/* 6-data (plan 119): Veri Doktoru (units/6-data-boards.js), the Hızlı Parmak dot plot (u6d-figure) and the
   kök-yaprak gösterimi of the stage kok-yaprak (u6d-stemfig; both markups in units/6-data-core.js). Theme tokens only, so light, dark and high contrast follow tokens.css and the world tokens
   of topic-games.css. Tones: coral = the headline's claim, brand = the pupil's try, green = the truth; each also
   has its own label text, so colour is never the only cue. */

/* ---------- Board ---------- */
.u6d-board { width: min(100%, 1040px); }
.u6d-doctor__work { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(12px, 2vw, 28px); width: 100%; }
.u6d-desk { display: grid; gap: 4px; width: min(100%, 580px); margin: 0; padding: 8px 10px; background: var(--world-model); border: 2px solid var(--world-model-edge); border-radius: 16px; }
.u6d-desk__caption { color: var(--world-ink); font-size: clamp(16px, 1.5vw, 19px); font-weight: 900; text-align: center; }
.u6d-doctor__controls { display: grid; justify-items: center; }
.u6d-spark { min-height: 1.6em; margin: 0; padding: 2px 14px; color: var(--ink); background: var(--red-tint); border: 2px solid var(--red-base); border-left-width: 8px; border-radius: 12px; font-size: clamp(17px, 1.6vw, 21px); font-weight: 800; text-align: center; overflow-wrap: anywhere; }
.u6d-spark:empty { visibility: hidden; }
.u6d-reason { margin: 0; padding: 6px 16px; color: var(--world-ink); background: var(--world-band); border: 2px solid var(--world-band-edge); border-radius: 14px; font-size: clamp(17px, 1.6vw, 21px); font-weight: 800; text-align: center; overflow-wrap: anywhere; }
.u6d-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: min(100%, 420px); }
.u6d-choice { min-width: 0; padding: 6px 12px; font-size: clamp(20px, 1.9vw, 26px); line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
.u6d-choice[data-missed] { border-color: var(--red-base); border-style: dashed; }
.u6d-choice[data-answer] { color: var(--green-ink); background: var(--green-tint); border-color: var(--green-base); opacity: 1; }

/* ---------- The dot plot ---------- */
.u6d-figure { display: block; width: min(100%, 520px); height: auto; margin-inline: auto; overflow: visible; }
.u6d-dot { fill: var(--brand); stroke: var(--ink); stroke-width: 1.5; }
.u6d-axis { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.u6d-tick { stroke: var(--ink-2); stroke-width: 2; }
.u6d-tick-label { fill: var(--ink-2); font-size: 17px; font-weight: 800; }
.u6d-label { font-size: 18px; font-weight: 900; paint-order: stroke; stroke: var(--surface); stroke-width: 5px; stroke-linejoin: round; }
.u6d-label--claim { fill: var(--coral-ink); }
.u6d-label--try { fill: var(--brand-ink); }
.u6d-label--truth { fill: var(--green-ink); }
.u6d-line { fill: none; stroke-width: 2.5; stroke-dasharray: 6 4; }
.u6d-mk--claim .u6d-line { stroke: var(--coral-base); }
.u6d-mk--try .u6d-line { stroke: var(--brand); }
.u6d-mk--truth .u6d-line { stroke: var(--green-base); stroke-dasharray: none; stroke-width: 3; }
.u6d-shape { stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }
.u6d-mk--claim .u6d-shape { fill: var(--coral-base); }
.u6d-mk--try .u6d-shape { fill: var(--brand); }
.u6d-mk--truth .u6d-shape { fill: var(--green-base); }
.u6d-column { fill-opacity: .18; stroke-width: 3; }
.u6d-bracket { fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.u6d-mk--claim .u6d-column { fill: var(--coral-base); stroke: var(--coral-base); stroke-dasharray: 6 4; }
.u6d-mk--try .u6d-column { fill: var(--brand); stroke: var(--brand); }
.u6d-mk--truth .u6d-column { fill: var(--green-base); stroke: var(--green-base); }
.u6d-mk--claim .u6d-bracket { stroke: var(--coral-base); stroke-dasharray: 6 4; }
.u6d-mk--try .u6d-bracket { stroke: var(--brand); }
.u6d-mk--truth .u6d-bracket { stroke: var(--green-base); }
.u6d-desk .u6d-figure { width: 100%; }

/* ---------- The kök-yaprak gösterimi ---------- */
/* Big tabular digits for the back row; a lit leaf is a tinted rounded cell in its tone's ink, the claim's dashed. */
.u6d-stemfig { display: grid; justify-items: center; gap: 4px; color: var(--world-ink); }
.u6d-stems { border-collapse: collapse; font-size: clamp(24px, 2.3vw, 32px); font-weight: 900; line-height: 1.15; font-variant-numeric: tabular-nums; }
.u6d-stems__head { padding: 0 12px 2px; font-size: .6em; font-weight: 900; text-align: left; border-bottom: 3px solid var(--ink); }
.u6d-stems__head:first-child, .u6d-stems__stem { border-right: 3px solid var(--ink); text-align: right; }
.u6d-stems__stem { padding: 1px 14px 1px 10px; }
.u6d-stems__row { min-width: 8.6em; padding: 1px 8px; text-align: left; white-space: nowrap; }
.u6d-leaf, .u6d-gap { display: inline-block; min-width: 1.1em; margin: 1px; border: 2px solid transparent; border-radius: 8px; text-align: center; }
.u6d-gap { color: var(--ink-2); border-style: dashed; border-color: var(--ink-2); padding: 0 .3em; }
.u6d-leaf--claim { color: var(--coral-ink); background: var(--coral-tint); border-color: var(--coral-base); border-style: dashed; }
.u6d-leaf--try { color: var(--brand-ink); background: var(--brand-tint); border-color: var(--brand); }
.u6d-leaf--truth { color: var(--green-ink); background: var(--green-tint); border-color: var(--green-base); }
.u6d-stemfig__key { margin: 0; font-size: clamp(16px, 1.4vw, 19px); font-weight: 800; white-space: nowrap; }
.u6d-stemfig__marks { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; min-height: 1.9em; margin: 0; font-size: clamp(16px, 1.4vw, 19px); }
.u6d-chip { padding: 0 10px; font-weight: 900; background: var(--surface); border: 2px solid; border-radius: 999px; white-space: nowrap; }
.u6d-chip--claim { color: var(--coral-ink); border-color: var(--coral-base); border-style: dashed; }
.u6d-chip--try { color: var(--brand-ink); border-color: var(--brand); }
.u6d-chip--truth { color: var(--green-ink); border-color: var(--green-base); }
.u6d-choices--rows { grid-template-columns: minmax(0, 1fr); font-variant-numeric: tabular-nums; }

/* High contrast: marks speak through ink borders and weight, not tints. */
body.high-contrast .u6d-leaf--claim, body.high-contrast .u6d-leaf--try, body.high-contrast .u6d-leaf--truth,
body.high-contrast .u6d-chip { color: var(--ink); background: var(--surface); border-color: var(--ink); }
body.high-contrast .u6d-leaf--truth { border-width: 3px; }
body.high-contrast .u6d-dot { fill: var(--surface); stroke-width: 3; }
body.high-contrast .u6d-column { fill-opacity: 0; }
body.high-contrast .u6d-mk--claim .u6d-line, body.high-contrast .u6d-mk--claim .u6d-column, body.high-contrast .u6d-mk--claim .u6d-bracket,
body.high-contrast .u6d-mk--try .u6d-line, body.high-contrast .u6d-mk--try .u6d-column, body.high-contrast .u6d-mk--try .u6d-bracket,
body.high-contrast .u6d-mk--truth .u6d-line, body.high-contrast .u6d-mk--truth .u6d-column, body.high-contrast .u6d-mk--truth .u6d-bracket { stroke: var(--ink); }
body.high-contrast .u6d-mk--claim .u6d-shape, body.high-contrast .u6d-mk--try .u6d-shape, body.high-contrast .u6d-mk--truth .u6d-shape { fill: var(--ink); }
body.high-contrast .u6d-label { fill: var(--ink); }

/* A short landscape board (1366 × 768): the kicker goes and the plot is capped by height (labels stay about 16 px) so the reason line stays above the
   instruction bar. */
@media (orientation: landscape) and (min-width: 900px) and (max-height: 820px) {
  .question-card--topic:has(.u6d-board) .question-kicker { display: none; }
  .question-card--topic:has(.u6d-board) .question-copy { margin-bottom: 8px; }
  .u6d-desk { width: min(100%, 500px); }
  .u6d-desk .u6d-figure { max-height: 42vh; }
  .u6d-stems { font-size: 26px; }
}

@media (max-width: 700px) {
  /* A 390 × 844 phone holds the whole round above the instruction bar: the plot is capped by height (labels stay 12 px or more), two choices a row. */
  /* The spark sits between the plot and the keypad, so a wrong try's meaning is read where the eye already is
     (below the pad it hides under the toast). */
  .u6d-board { gap: 8px; }
  .u6d-doctor__work { display: contents; }
  .u6d-doctor__controls { order: 2; }
  .u6d-spark { order: 1; }
  .u6d-reason { order: 3; }
  .u6d-desk { gap: 2px; padding: 4px 6px; }
  .u6d-desk .u6d-figure { max-height: 28vh; }
  .u6d-stems { font-size: 21px; line-height: 1.05; }
  .u6d-stemfig__key, .u6d-stemfig__marks { font-size: 15px; }
  .u6d-stemfig__marks { min-height: 1.7em; }
  .u6d-choices { gap: 8px; }
}