/* 5-data (plan 119): Grafik Muhabiri (units/5-data-boards.js) and the Hızlı Parmak figures (u5d-tally, u5d-bars,
   units/5-data-core.js). The boards' charts are the newsroom's tg-chart (topic-games.css); this file sets their size
   inside the board and adds the tally. Theme tokens only, so light, dark and high contrast follow tokens.css and the
   world tokens of topic-games.css. */

/* ---------- Shared ---------- */
.u5d-board { width: min(100%, 1100px); }
.u5d-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; }
.u5d-spark:empty { visibility: hidden; }
.u5d-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; }
.u5d-board [data-answer]:not(.tg-chart__bar) { color: var(--green-ink); }

/* ---------- Tally figure (the board and Hızlı Parmak) ---------- */
.u5d-tally { display: block; width: min(100%, calc(var(--w) * 1.5px)); height: auto; margin-inline: auto; }
.u5d-tally__label { fill: var(--ink); font-size: 17px; font-weight: 900; }
.u5d-tally__marks { fill: none; stroke: var(--ink); stroke-width: 3.2; stroke-linecap: round; }
.u5d-tally__rule { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }

/* ---------- Hızlı Parmak bar figure ---------- */
.u5d-bars { display: block; width: min(100%, 360px); height: auto; margin-inline: auto; }
.u5d-bars__axis { fill: none; stroke: var(--ink-2); stroke-width: 2; }
.u5d-bars__grid { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.u5d-bars__num, .u5d-bars__unit { fill: var(--ink-2); font-size: 11px; font-weight: 800; }
.u5d-bars__name { fill: var(--ink); font-size: 12px; font-weight: 800; }
.u5d-bar--1 { fill: var(--chart-1); }
.u5d-bar--2 { fill: var(--chart-2); }
.u5d-bar--3 { fill: var(--chart-3); }
.u5d-bar--4 { fill: var(--chart-4); }
.u5d-bar--5 { fill: var(--chart-5); }
.u5d-bar--6 { fill: var(--chart-6); }

/* ---------- Boards: the work on the left, the keypad on the right (stacked on a phone) ---------- */
.u5d-work { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(12px, 2vw, 28px); width: 100%; }
.u5d-panel { display: grid; justify-items: center; align-content: center; gap: 6px; min-width: 0; max-width: 100%; padding: 8px 12px; background: var(--world-model); border: 2px solid var(--world-model-edge); border-radius: 16px; }
.u5d-panel[data-tg-tally] { width: min(100%, 460px); }
.u5d-panel--source[data-tg-tally] { width: min(100%, 300px); }
.u5d-panel[data-answer] { border-color: var(--green-base); }
.u5d-panel--source { align-self: stretch; }
.u5d-pad { display: grid; justify-items: center; gap: 8px; }
/* The chart inside a panel: every column gets an equal slot of --slot, names on one line under their column. */
.u5d-board .tg-chart--bar { --plot-h: clamp(180px, 100vh - 520px, 280px); --headroom: 30px; --label-h: 36px; --axis-w: 48px; --slot: 140px; width: calc(var(--n) * var(--slot) + var(--axis-w) + 12px); }
.u5d-work:has(.u5d-pad) .tg-chart--bar { --slot: 104px; }
.u5d-panel--source ~ .u5d-panel--build .tg-chart--build { --slot: 100px; }
.u5d-board .tg-chart__marks { gap: 4px; padding-inline: 4px; }
.u5d-board .tg-chart__unit { font-size: 18px; }
.u5d-board .tg-chart__tick b { font-size: 17px; }
.u5d-board .tg-chart__amount { color: var(--ink); font-size: 20px; }
.u5d-board .tg-chart__label { font-size: 18px; }
.u5d-board [data-amounts="off"] .tg-chart__amount { visibility: hidden; }
.u5d-board .tg-chart--build .tg-chart__marks { touch-action: none; user-select: none; -webkit-user-select: none; cursor: ns-resize; }
.u5d-board .tg-chart--build .tg-chart__bar { cursor: ns-resize; }
.u5d-board .tg-chart--build .tg-chart__bar[aria-pressed="true"] { background-color: var(--surface-2); outline: 3px solid var(--world-accent, var(--brand)); outline-offset: -3px; }
.u5d-board .tg-chart--build .tg-chart__bar:disabled { cursor: default; }
.u5d-steps { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; width: 100%; }
.u5d-stepper { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; flex: 1 1 220px; }
.u5d-step { min-width: var(--touch); min-height: var(--touch); padding: 4px 10px; font-size: clamp(20px, 1.9vw, 26px); font-weight: 900; }
.u5d-readout { min-height: 1.3em; margin: 0; color: var(--world-ink); font-size: clamp(18px, 1.7vw, 22px); font-weight: 900; text-align: center; overflow-wrap: anywhere; }
.u5d-confirm { min-height: var(--touch); font-size: clamp(19px, 1.8vw, 24px); }

/* High contrast: no tints; marks speak through borders and weight. */
body.high-contrast .u5d-board .tg-chart--build .tg-chart__bar[aria-pressed="true"] { background: none; outline-width: 4px; }

/* A wide board sets the build controls beside the chart, so the chart takes the height. */
@media (min-width: 900px) {
  .u5d-panel--build { grid-template-columns: auto 224px; align-items: center; column-gap: 20px; }
  .u5d-steps { flex-direction: column; gap: 12px; }
  .u5d-stepper { grid-template: "reading reading" auto "less more" auto / 1fr 1fr; flex: none; width: 100%; }
  .u5d-readout { grid-area: reading; min-height: 2.6em; }
  .u5d-step:first-child { grid-area: less; }
  .u5d-step:last-child { grid-area: more; }
  .u5d-confirm { width: 100%; }
}

/* A short landscape board (1366 × 768): the kicker goes, as on the units 1–2 boards, and the work slims so the
   reason line stays above the instruction bar. */
@media (orientation: landscape) and (min-width: 900px) and (max-height: 820px) {
  .question-card--topic:has(.u5d-board) .question-kicker { display: none; }
  .question-card--topic:has(.u5d-board) .question-copy { margin-bottom: 8px; }
  .u5d-board .tg-chart--bar { --plot-h: clamp(120px, 100vh - 580px, 200px); }
  .u5d-work:has(.u5d-pad) .tg-chart--bar { --plot-h: clamp(110px, 100vh - 580px, 190px); }
  .u5d-panel { gap: 4px; padding: 6px 10px; }
  .u5d-tally { max-height: 34vh; }
  .u5d-panel--source .u5d-tally { max-height: 28vh; }
}

@media (max-width: 700px) {
  /* A 390 × 844 phone holds the whole round above the instruction bar: the chart takes the panel's width, the
     steppers sit beside the readout, the keypad stacks under the work. */
  .u5d-work { gap: 8px; }
  .u5d-panel { gap: 2px; width: 100%; padding: 4px 6px; }
  .u5d-panel[data-tg-tally] { width: 100%; }
  .u5d-steps { flex-direction: column; gap: 4px; }
  .u5d-stepper { flex-basis: auto; width: 100%; }
  .u5d-tally { max-height: 17vh; }
  .u5d-board .tg-chart--bar { --plot-h: 110px; --headroom: 22px; --label-h: 28px; --axis-w: 28px; width: 100%; }
  .u5d-board .tg-chart--build { --plot-h: 76px; --headroom: 20px; }
  .u5d-work:not(:has(.u5d-pad)) .tg-chart--bar:not(.tg-chart--build) { --plot-h: clamp(170px, 100vh - 540px, 320px); }
  .u5d-board .tg-chart__plot { margin-right: 4px; }
  .u5d-board .tg-chart__marks { gap: 2px; padding-inline: 2px; }
  .u5d-board .tg-chart__unit { font-size: 13px; }
  .u5d-board .tg-chart__tick b { right: calc(100% + 4px); font-size: 12px; }
  .u5d-board .tg-chart__amount { font-size: 15px; }
  .u5d-board .tg-chart__label { font-size: 13px; letter-spacing: -.02em; }
  .u5d-step { min-height: 44px; }
  .u5d-readout { font-size: 17px; }
  .u5d-pad { gap: 4px; }
}