/* 7-data (plan 119): Veri Laboratuvarı (units/7-data-boards.js) and the Hızlı Parmak figures (u7d-figure,
   units/7-data-core.js). 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-unit: clamp(11px, 2.3vh, 20px); }
.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%; }

/* ---------- Dots, bars and axes (the board 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-bar { fill: var(--chart-1); stroke: var(--ink); stroke-width: 2; }
.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; }

/* ---------- Gruplama: the chips, the histogram with its steppers, then the total beside Kontrol et ---------- */
.u7d-board[data-task="group"] { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: stretch; }
.u7d-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 8px; list-style: none; background: var(--world-model); border: 2px solid var(--world-model-edge); border-radius: 14px; }
.u7d-chip { padding: 1px 10px; color: var(--ink); background: var(--surface); border: 2px solid var(--line-strong); border-radius: 999px; font-size: clamp(15px, 1.4vw, 19px); font-weight: 800; white-space: nowrap; }
.u7d-hist { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: end; gap: 6px; padding: 8px; background: var(--world-model); border: 2px solid var(--world-model-edge); border-radius: 14px; }
.u7d-col { display: grid; justify-items: center; gap: 4px; min-width: 0; }
/* The plot is 11 units tall: a class of 10 still leaves room for its count above the bar. Rules mark every 2 units. */
.u7d-plot { position: relative; display: flex; align-items: flex-end; justify-content: center; width: 100%; height: calc(11 * var(--u7d-unit)); border-bottom: 3px solid var(--ink); background: repeating-linear-gradient(to top, transparent 0 calc(2 * var(--u7d-unit) - 1px), var(--line) calc(2 * var(--u7d-unit) - 1px) calc(2 * var(--u7d-unit))); }
.u7d-bar { position: relative; box-sizing: border-box; width: min(72%, 64px); height: calc(var(--count, 0) * var(--u7d-unit)); background: var(--chart-1); border: 3px solid var(--ink); border-bottom: 0; border-radius: 6px 6px 0 0; transition: height var(--dur-fast) ease; }
.u7d-bar[data-count="0"] { border-top-width: 0; }
.u7d-num { position: absolute; bottom: calc(100% + 2px); left: 50%; min-width: 1.6em; padding: 0 4px; color: var(--ink); background: var(--surface); border-radius: 8px; font-family: var(--font-title); font-size: clamp(16px, 1.5vw, 20px); font-weight: 900; line-height: 1.2; text-align: center; transform: translateX(-50%); }
.u7d-bar[data-wrong] { outline: 3px dashed var(--red-base); outline-offset: 2px; }
.u7d-bar[data-answer] { outline: 3px solid var(--green-base); outline-offset: 2px; }
.u7d-class { color: var(--ink); font-size: clamp(14px, 1.3vw, 17px); font-weight: 800; white-space: nowrap; }
.u7d-step { width: 100%; max-width: 72px; padding: 0; }
.u7d-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.u7d-total { margin: 0; padding: 2px 12px; color: var(--world-ink); background: var(--world-band); border: 2px solid var(--world-band-edge); border-radius: 999px; font-size: clamp(15px, 1.4vw, 19px); font-weight: 800; text-align: center; }
.u7d-total[data-match="true"] { color: var(--green-ink); border-color: var(--green-base); }
.u7d-check { min-height: var(--touch); font-size: clamp(18px, 1.7vw, 22px); }

/* ---------- 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; }

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

/* From a tablet up the board has two columns: the chips and the check on the left, the histogram beside them with the
   two steppers of a class side by side. */
@media (min-width: 701px) {
  .u7d-board[data-task="group"] { grid-template-columns: minmax(280px, 440px) minmax(0, 1fr); align-items: start; column-gap: clamp(10px, 1.6vw, 22px); }
  .u7d-chips { grid-area: 1 / 1; }
  .u7d-hist { grid-area: 1 / 2 / span 2; }
  .u7d-foot { grid-area: 2 / 1; flex-wrap: nowrap; }
  .u7d-total { flex: 1 1 0; }
  .u7d-spark, .u7d-reason { grid-column: 1 / -1; }
  .u7d-col { grid-template-columns: 1fr 1fr; }
  .u7d-plot, .u7d-class { grid-column: 1 / -1; }
  .u7d-step { min-width: 44px; max-width: none; }
}

/* 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 { --u7d-unit: clamp(11px, 1.75vh, 20px); 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: smaller chips and steppers, a shorter plot, the
     total beside Kontrol et. */
  .u7d-board { --u7d-unit: 7px; gap: 4px; }
  .u7d-work { gap: 6px; }
  .u7d-chips { gap: 4px; padding: 4px 6px; }
  .u7d-chip { padding: 0 6px; border-width: 1px; font-size: 13px; }
  .u7d-total { flex: 1 1 0; padding-inline: 6px; font-size: 13px; }
  .u7d-hist { gap: 3px; padding: 4px; }
  .u7d-num { font-size: 15px; }
  .u7d-class { font-size: 13px; }
  .u7d-step { min-width: 0; min-height: 34px; font-size: 20px; }
  .u7d-check { min-height: 40px; }
  .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; }
}