/* Sentence diagrams (js/diagram/). Lines and words in the theme's ink, on the
   theme's card colour, so they read in Daylight, Lamplight and Quill & Ink. */
.dg-box { background: var(--card); border-radius: var(--r-2); overflow-x: auto; overflow-y: hidden; max-width: 100%; padding: 4px 0; }
.dg-svg { display: block; height: auto; margin: 0 auto; font-family: var(--serif); }
.dg-l { stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; fill: none; }
.dg-dash { stroke-dasharray: 5 4; }
.dg-w { fill: var(--ink); font-family: var(--serif); }
.dg-label { fill: var(--muted); font-style: italic; font-family: var(--serif); }

/* The sentence above a diagram question. */
.dg-sentence { margin: 0 0 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r-2); background: var(--card); }
.dg-sentence p { margin: 4px 0 0; font-family: var(--serif); font-size: 22px; line-height: 1.35; color: var(--ink); }
.dg-sentence .passage-source { display: block; margin-top: 6px; }

/* Which diagram is right? Four choices: 2 x 2 on wide screens, stacked on phones. */
fieldset.dg-choices { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 760px) { fieldset.dg-choices { grid-template-columns: 1fr 1fr; } fieldset.dg-choices.one-col { grid-template-columns: 1fr; } }
fieldset.dg-choices legend { grid-column: 1 / -1; }
.dg-choice { flex-direction: column; align-items: stretch; gap: 6px; min-width: 0; }
.dg-choice-head { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.dg-choice-head input { margin-top: 0; }
.dg-choice .dg-box { background: transparent; }
.dg-tag { margin-left: auto; font-size: 13px; font-weight: 700; padding: 2px 8px; border-radius: 999px; border: 1.5px solid currentColor; }
.dg-tag.ok { color: var(--right); }
.dg-tag.bad { color: var(--wrong); }
.dg-answer { margin: 12px 0 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-2); background: var(--card); }
.dg-why { display: block; margin-bottom: 4px; }

/* Build it */
.dg-build .q-legend { font-weight: 700; font-size: 19px; margin: 0 0 10px; }
.dg-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; min-height: 44px; }
.dg-chip { font: inherit; font-family: var(--serif); font-size: 17px; min-height: 44px; padding: 6px 14px; border-radius: 999px; border: 1.5px solid var(--primary); background: var(--card); color: var(--ink); cursor: pointer; }
.dg-chip:hover { background: var(--soft); }
.dg-chip[aria-pressed="true"] { background: var(--primary); color: #fff; box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--primary); }
.dg-frame { border: 1px solid var(--border); }
.dg-slot { cursor: pointer; outline: none; }
.dg-slot rect.dg-hit { fill: transparent; stroke: none; }
.dg-slot rect:not(.dg-hit) { fill: var(--soft); stroke: var(--primary); stroke-width: 1.5; stroke-dasharray: 4 3; }
.dg-slot.filled rect:not(.dg-hit) { fill: var(--card); stroke-dasharray: none; stroke-width: 1; }
.dg-slot:hover rect:not(.dg-hit), .dg-slot:focus-visible rect:not(.dg-hit) { stroke-width: 3; }
.dg-slot:focus-visible rect:not(.dg-hit) { stroke: var(--ink); stroke-dasharray: none; }
.dg-slot.is-selected rect:not(.dg-hit) { stroke-width: 2.5; }
.dg-slot.is-right rect:not(.dg-hit) { stroke: var(--green); stroke-width: 2; stroke-dasharray: none; fill: var(--right-bg); }
.dg-slot.is-wrong rect:not(.dg-hit) { stroke: var(--wrong-line); stroke-width: 2; stroke-dasharray: 3 2; fill: var(--wrong-bg); }
.dg-slot.is-right .dg-w, .dg-slot.is-wrong .dg-w { fill: #1F2937; }
.dg-mark-ok { stroke: var(--green); stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.dg-mark-bad { stroke: var(--wrong-line); stroke-width: 2.4; fill: none; stroke-linecap: round; }
.dg-help { margin: 8px 0; }

/* Lesson cards and the Diagram lab */
.example .dg-box { margin: 8px 0; }
.dg-lab-q { gap: 8px; }
.dg-lab-sentence { font-family: var(--serif); font-size: 19px; margin: 0; color: var(--ink); }
.dg-lab-wrong summary { cursor: pointer; font-weight: 600; }
.dg-lab-nav li { margin: 4px 0; }
.dg-lab-nav [aria-current] { font-weight: 700; }

/* Quill & Ink: diagrams sit on the parchment cards, never on the dark page. */
html.quill .dg-sentence p, html.quill .dg-lab-sentence { color: var(--ink); }
html.quill .dg-chip { background: #EFE3C6; color: #2A1A0E; border-color: #7E1618; }
html.quill .dg-chip[aria-pressed="true"] { background: #7E1618; color: #F2DFA6; }

/* Build it sits on a card, so its help and buttons read in every theme. */
.dg-build { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-2); padding: 14px; color: var(--body); }
.dg-build .dg-frame { border-color: var(--border); }
html.quill .dg-build .small.muted { color: var(--muted); }
html.quill .page-head a { color: #E3C77C; }
html.quill .dg-intro, html.quill .page-head .dg-intro { color: #D8C59A; }
html.quill .dg-units .unit-col > header h2 { color: #EAD7A2; }
html.quill main > p.small.muted { color: #D8C59A; }
/* Drag and drop (Nov 9): the word follows the pointer; the blank under it lights. */
.dg-chip, .dg-slot.filled { touch-action: none; }
.dg-chip { cursor: grab; }
.dg-ghost { position: fixed; z-index: 100; pointer-events: none; transform: translate(-50%, -60%); font-family: var(--serif); font-size: 17px; padding: 6px 14px; border-radius: 999px; background: var(--primary); color: #fff; box-shadow: 0 6px 18px rgba(20,33,61,.28); white-space: nowrap; }
.dg-dragging { opacity: .45; }
.dg-slot.dg-over rect:not(.dg-hit) { stroke-width: 3.5; stroke-dasharray: none; fill: #E4EDFB; }
.dg-chips.dg-over { outline: 2px dashed var(--primary); outline-offset: 4px; border-radius: var(--r-2); }