/* 7-data (plan 119, curriculum-correctness tasks 1, 2 and 14): Veri Laboratuvarı (units/7-data-boards.js) and the
   figures of units/7-data-core.js (the line chart, the dot plots of the boards and Hızlı Parmak). Theme tokens only, so light, dark and high contrast follow tokens.css and the newsroom world
   tokens of topic-games.css. The two compared groups differ by shape, fill and line style as well as by hue: A is a
   filled circle on a solid mean line, B a hollow square on a dashed one. */

/* ---------- Shared ---------- */
.u7d-board { width: min(100%, 1040px); }
.u7d-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(16px, 1.5vw, 20px); font-weight: 800; text-align: center; overflow-wrap: anywhere; }
.u7d-spark:empty { visibility: hidden; }
.u7d-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(16px, 1.5vw, 20px); font-weight: 800; text-align: center; overflow-wrap: anywhere; }
.u7d-work { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: clamp(10px, 1.6vw, 22px); width: 100%; }

/* ---------- Lines, dots and axes (the boards and the Hızlı Parmak figures) ---------- */
.u7d-figure { display: block; width: min(100%, 360px); height: auto; margin-inline: auto; background: var(--surface); border-radius: 10px; }
.u7d-label { fill: var(--ink); font-size: 12px; font-weight: 800; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.u7d-label--y { fill: var(--ink-2); font-size: 11px; }
.u7d-label--row { font-size: 15px; font-weight: 900; }
.u7d-grid { stroke: var(--line); stroke-width: 1; }
.u7d-grid--base, .u7d-axis { stroke: var(--ink); stroke-width: 2; }
.u7d-line { fill: none; stroke: var(--chart-1); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.u7d-point { fill: var(--surface); stroke: var(--ink); stroke-width: 2; }
.u7d-point--mark { fill: var(--green-base); stroke-width: 2.5; }
.u7d-label--point { font-size: 12px; }
.u7d-row { stroke: var(--line-strong); stroke-width: 1.5; }
.u7d-dot { stroke-linejoin: round; }
.u7d-dot--a { fill: var(--chart-1); stroke: var(--ink); stroke-width: 1.5; }
.u7d-dot--b { fill: var(--surface); stroke: var(--chart-3); stroke-width: 3; }
.u7d-mean { stroke-width: 3; stroke-linecap: round; }
.u7d-mean--a { stroke: var(--chart-1); }
.u7d-mean--b { stroke: var(--chart-3); stroke-dasharray: 5 4; }

/* ---------- Karşılaştırma: the sheet with both dot plots, the two group buttons beside it ---------- */
.u7d-sheet { position: relative; display: grid; justify-items: center; gap: 6px; flex: 2 1 380px; max-width: 560px; margin: 0; padding: 8px; background: var(--world-model); border: 2px solid var(--world-model-edge); border-radius: 16px; }
.u7d-sheet .u7d-figure { width: 100%; max-width: none; }
.u7d-key { margin: 0; color: var(--world-ink); font-size: clamp(14px, 1.3vw, 17px); font-weight: 800; text-align: center; }
.u7d-groups { display: grid; align-content: center; gap: 10px; flex: 1 1 300px; max-width: 420px; }
.u7d-group { grid-template-columns: auto 1fr; justify-items: start; column-gap: 10px; row-gap: 2px; width: 100%; padding: 8px 14px; text-align: left; }
.u7d-mark { grid-row: 1 / 3; width: 32px; height: 32px; }
.u7d-group__name { font-size: clamp(20px, 2vw, 26px); font-weight: 900; }
.u7d-group__facts { font-size: clamp(14px, 1.25vw, 17px); font-weight: 800; }
.u7d-group[data-answer] { color: var(--green-ink); border-color: var(--green-base); opacity: 1; }
.u7d-group[data-missed] { border-color: var(--red-base); border-style: dashed; }

/* ---------- Çizgi grafiği and İddia: the chart (or the situation) beside the keypad, the options or the claim ---------- */
.u7d-sheet--line { flex: 2 1 400px; }
.u7d-controls { display: grid; align-content: center; justify-items: center; gap: 10px; flex: 1 1 300px; max-width: 460px; }
.u7d-pad { display: grid; justify-items: center; gap: 8px; }
.u7d-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: min(100%, 440px); }
.u7d-choice { min-width: 0; padding: 6px 12px; font-size: clamp(18px, 1.7vw, 24px); line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
.u7d-choice[data-missed] { border-color: var(--red-base); border-style: dashed; }
.u7d-choice[data-answer] { color: var(--green-ink); background: var(--green-tint); border-color: var(--green-base); opacity: 1; }
.u7d-claim { width: 100%; margin: 0; padding: 8px 14px; color: var(--world-ink); background: var(--world-band); border: 2px solid var(--world-band-edge); border-left-width: 8px; border-radius: 12px; }
.u7d-claim p { margin: 0; font-size: clamp(17px, 1.6vw, 22px); font-weight: 800; overflow-wrap: anywhere; }
.u7d-claim cite { display: block; margin-top: 2px; font-size: clamp(14px, 1.25vw, 17px); font-style: normal; font-weight: 800; text-align: right; }
.u7d-facts { display: grid; gap: 4px; width: 100%; margin: 0; padding: 0; list-style: none; color: var(--world-ink); font-size: clamp(14px, 1.25vw, 17px); font-weight: 800; }
.u7d-facts li { display: flex; align-items: center; gap: 8px; }
.u7d-facts .u7d-mark { width: 22px; height: 22px; flex: none; }
.u7d-situation { display: grid; grid-template-columns: auto 1fr; align-content: center; gap: 6px 12px; flex: 2 1 380px; max-width: 560px; margin: 0; padding: 12px 16px; color: var(--ink); background: var(--world-model); border: 2px solid var(--world-model-edge); border-radius: 16px; font-size: clamp(16px, 1.5vw, 20px); }
.u7d-situation dt { color: var(--world-ink); font-weight: 900; }
.u7d-situation dd { margin: 0; font-weight: 800; overflow-wrap: anywhere; }

/* High contrast: no tints; marks speak through borders, fills and dashes. */
body.high-contrast .u7d-dot--a { fill: var(--chart-1); }
body.high-contrast .u7d-line { stroke-width: 4; }
body.high-contrast .u7d-mean--a { stroke-width: 4; }
body.high-contrast .u7d-mean--b { stroke-width: 4; stroke-dasharray: 3 4; }

/* A short landscape board (1366 × 768): the kicker goes, as on the units 1–2 boards, and the plot and the figures hold
   to the height so the controls and the reason line stay above the instruction bar. */
@media (orientation: landscape) and (min-width: 900px) and (max-height: 820px) {
  .question-card--topic:has(.u7d-board) .question-kicker { display: none; }
  .question-card--topic:has(.u7d-board) .question-copy { margin-bottom: 8px; }
  .u7d-board { gap: 8px; }
  .u7d-spark { min-height: 1.4em; padding-block: 0; font-size: 17px; }
  .u7d-sheet .u7d-figure { max-height: 34vh; }
}

@media (max-width: 700px) {
  /* A 390 × 844 phone holds the whole round above the instruction bar: a shorter chart, a tighter keypad and claim. */
  .u7d-board { gap: 4px; }
  .u7d-work { gap: 6px; }
  .u7d-controls { flex-basis: 100%; max-width: none; gap: 6px; }
  .u7d-pad { gap: 4px; }
  .u7d-choices { gap: 6px; }
  .u7d-choice { padding: 4px 8px; font-size: 16px; }
  .u7d-claim { padding: 4px 10px; border-left-width: 6px; }
  .u7d-claim p { font-size: 15px; }
  .u7d-claim cite, .u7d-facts { font-size: 13px; }
  .u7d-situation { padding: 6px 10px; gap: 2px 8px; font-size: 14px; }
  .u7d-spark { min-height: 2.5em; padding-block: 0; font-size: 14px; line-height: 1.25; }
  .u7d-sheet { padding: 4px 6px; }
  .u7d-sheet .u7d-figure { max-height: 22vh; }
  .u7d-groups { max-width: none; flex-basis: 100%; gap: 6px; }
  .u7d-group { padding: 4px 10px; }
  .u7d-mark { width: 24px; height: 24px; }
  .u7d-group__name { font-size: 18px; }
  .u7d-group__facts { font-size: 14px; }
}