/* 5-data (plan 119): Grafik Muhabiri (units/5-data-boards.js) and the figures of units/5-data-core.js (u5d-tally,
   u5d-bars, u5d-pie), which Hızlı Parmak shares. The boards' bar charts are the newsroom's tg-chart (topic-games.css);
   this file sets their size inside the board and adds the tally, the nokta grafiği, the pie and the choices. 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-bars__amount { fill: var(--ink); font-size: 13px; font-weight: 900; }
.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); }

/* ---------- Pie figure (parts of a whole: a bead on the rim for every pupil) ---------- */
.u5d-pie { display: block; width: min(100%, 400px); height: auto; margin-inline: auto; overflow: visible; }
.u5d-slice { stroke: var(--surface); stroke-width: 3; stroke-linejoin: round; }
.u5d-bead { stroke: var(--ink); stroke-width: 1.5; }
.u5d-pie__name { fill: var(--ink); font-size: 15px; font-weight: 900; }

/* ---------- 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; }
/* The − / + kit buttons fill their cells of the stepper. */
.u5d-stepper > .uk-btn { inline-size: auto; }
.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; }

/* The board-sized figures of nokta-daire and iddia. */
.u5d-panel--pie, .u5d-panel--claim { flex: 0 1 auto; width: min(100%, 560px); }
.u5d-board .u5d-pie { width: min(100%, 520px); max-height: clamp(220px, 100vh - 460px, 360px); }
.u5d-board .u5d-pie__name { font-size: 18px; }
.u5d-board .u5d-bars { width: min(100%, 540px); max-height: clamp(220px, 100vh - 500px, 320px); }
.u5d-board .u5d-bars__num, .u5d-board .u5d-bars__unit { font-size: 13px; }
.u5d-board .u5d-bars__name { font-size: 14px; }

/* The nokta grafiği: one dot a pupil, each stack on the baseline, the stacks are buttons when one is the answer. */
.u5d-dots { --dot: clamp(12px, (var(--dots-h, 240px) - 30px) / var(--rows) - 4px, 26px); display: grid; justify-items: center; gap: 4px; margin: 0; }
.u5d-dots__unit { color: var(--ink-2); font-size: 18px; font-weight: 800; }
.u5d-dots__marks { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 120px)); padding-inline: 6px; }
.u5d-dots__stack { display: grid; justify-items: center; gap: 4px; min-width: 0; padding: 4px 4px 2px; color: var(--ink); background: none; border: 0; border-radius: 12px; font: inherit; }
button.u5d-dots__stack { cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
  button.u5d-dots__stack:hover:not(:disabled) { background-color: var(--surface-2); }
}
.u5d-dots__stack:focus-visible { outline: 4px solid var(--focus); outline-offset: 2px; }
.u5d-dots__stack:disabled { cursor: default; }
.u5d-dots__column { display: flex; flex-direction: column-reverse; align-items: center; justify-content: flex-start; gap: 4px; width: calc(100% + 8px); height: calc(var(--rows) * (var(--dot) + 4px) + 30px); padding-bottom: 4px; border-bottom: 3px solid var(--ink-2); margin-inline: -4px; }
.u5d-dot { flex: none; width: var(--dot); height: var(--dot); border: 2px solid var(--ink-2); border-radius: 50%; box-sizing: border-box; }
.u5d-dots__stack--1 .u5d-dot { background: var(--chart-1); }
.u5d-dots__stack--2 .u5d-dot { background: var(--chart-2); }
.u5d-dots__stack--3 .u5d-dot { background: var(--chart-3); }
.u5d-dots__stack--4 .u5d-dot { background: var(--chart-4); }
.u5d-dots__stack--5 .u5d-dot { background: var(--chart-5); }
.u5d-dots__stack--6 .u5d-dot { background: var(--chart-6); }
.u5d-dots__amount { min-height: 26px; color: var(--ink); font-size: 20px; font-weight: 900; line-height: 26px; }
.u5d-dots[data-amounts="off"] .u5d-dots__amount { visibility: hidden; }
.u5d-dots__label { max-width: 100%; font-size: 18px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.u5d-dots__stack[data-missed] .u5d-dot { opacity: .3; }
.u5d-dots__stack[data-missed] .u5d-dots__label { text-decoration: line-through 2px; }
.u5d-dots__stack[data-answer] { outline: 4px solid var(--green-base); outline-offset: -2px; }
.u5d-dots__stack[data-answer] .u5d-dots__amount, .u5d-dots__stack[data-answer] .u5d-dots__label { color: var(--green-ink); }

/* Choices (slices, fractions, displays, verdicts), as on the 5-shapes boards. */
.u5d-choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.u5d-choice { min-width: 150px; padding: 6px 16px; font-size: clamp(18px, 1.7vw, 22px); line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
.u5d-choice[data-missed] { border-color: var(--red-base); border-style: dashed; }
.u5d-choice[data-answer] { color: var(--green-ink); background: var(--green-tint); border-color: var(--green-base); opacity: 1; }
.u5d-work > .u5d-choices { flex: 0 1 320px; flex-direction: column; }
.u5d-work > .u5d-choices:only-child { flex: 1 1 100%; flex-direction: row; }
.u5d-choice:has(.u5d-choice__icon) { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; min-width: 260px; padding: 10px 18px; text-align: left; }
.u5d-choice__icon { width: 54px; height: 42px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }


/* 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; }
body.high-contrast .u5d-bars__num, body.high-contrast .u5d-bars__unit, body.high-contrast .u5d-dots__unit { fill: var(--ink); color: var(--ink); }
body.high-contrast .u5d-dot, body.high-contrast .u5d-dots__column { border-color: var(--ink); }
body.high-contrast .u5d-slice { stroke: var(--ink); stroke-width: 2; }
body.high-contrast .u5d-dots__stack[data-answer] { outline-color: var(--ink); outline-style: double; outline-width: 6px; }
body.high-contrast .u5d-dots__stack[data-answer] .u5d-dots__amount, body.high-contrast .u5d-dots__stack[data-answer] .u5d-dots__label { color: var(--ink); }
body.high-contrast .u5d-choice[data-answer] { color: var(--ink); background: var(--surface); border-color: var(--ink); border-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-stepper > [data-tg-step]:first-child { grid-area: less; }
  .u5d-stepper > [data-tg-step]:last-child { grid-area: more; }
  .u5d-steps > [data-tg-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; }
  .u5d-dots { --dots-h: clamp(150px, 100vh - 510px, 260px); }
  .u5d-dots__unit { font-size: 16px; }
  .u5d-board .u5d-pie { max-height: clamp(180px, 100vh - 470px, 300px); }
  .u5d-board .u5d-bars { max-height: clamp(180px, 100vh - 520px, 260px); }
  .u5d-choice:has(.u5d-choice__icon) { padding-block: 6px; }
}

@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-readout { font-size: 17px; }
  .u5d-pad { gap: 4px; }
  .u5d-dots { --dots-h: clamp(150px, 100vh - 600px, 260px); --dot: clamp(9px, (var(--dots-h) - 26px) / var(--rows) - 3px, 20px); gap: 2px; }
  .u5d-dots__unit { font-size: 14px; }
  .u5d-dots__marks { width: 100%; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); padding-inline: 0; }
  .u5d-dots__stack { padding-inline: 2px; }
  .u5d-dots__column { gap: 3px; width: calc(100% + 4px); height: calc(var(--rows) * (var(--dot) + 3px) + 24px); margin-inline: -2px; }
  .u5d-dots__amount { min-height: 22px; font-size: 16px; line-height: 22px; }
  .u5d-dots__label { font-size: 13px; letter-spacing: -.02em; }
  .u5d-board .u5d-pie, .u5d-board .u5d-bars { max-height: 30vh; }
  .u5d-board .u5d-pie__name { font-size: 19px; }
  .u5d-work > .u5d-choices { flex: 1 1 100%; flex-direction: row; }
  .u5d-choices { gap: 8px; }
  .u5d-choice { min-width: 0; flex: 1 1 40%; padding-inline: 10px; font-size: 17px; }
  .u5d-choice:has(.u5d-choice__icon) { flex-basis: 100%; min-width: 0; gap: 10px; padding: 4px 12px; }
  .u5d-choice__icon { width: 40px; height: 32px; }
}