/* 7-triangles (plan 119): Üçgen Cerrahı (units/7-triangles-boards.js) and the Hızlı Parmak figures (u7t-figure,
   units/7-triangles-core.js). Theme tokens only, so light, dark and high contrast follow tokens.css and the blueprint
   world tokens of topic-games.css. The three special segments differ by dash pattern and by the legend text, not by
   hue alone. */

/* ---------- Shared ---------- */
.u7t-board { width: min(100%, 1040px); }
.u7t-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; }
.u7t-spark:empty { visibility: hidden; }
.u7t-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; }

/* ---------- Figures, shared by the board and Hızlı Parmak ---------- */
.u7t-figure { display: block; width: min(100%, 320px); height: auto; margin-inline: auto; }
.u7t-shape { fill: var(--world-band, var(--brand-tint)); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.u7t-ext { stroke: var(--ink-2); stroke-width: 3; stroke-dasharray: 4 5; }
.u7t-ruler { fill: none; stroke: var(--ink-2); stroke-width: 2; }
.u7t-foot { fill: var(--surface); stroke: var(--ink); stroke-width: 2.5; }
.u7t-seg { fill: none; stroke: var(--ink-2); stroke-width: 3; stroke-linecap: butt; }
.u7t-seg--height { stroke: var(--world-accent, var(--coral-base)); stroke-width: 4; stroke-dasharray: 10 6; }
.u7t-seg--median { stroke: var(--brand-ink); stroke-width: 5; }
.u7t-seg--bisector { stroke: var(--ink); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1 8; }
.u7t-seg--decoy { stroke: var(--ink-2); stroke-width: 3; stroke-dasharray: 14 4 2 4; }
.u7t-sign { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.u7t-label { fill: var(--ink); font-size: 20px; font-weight: 900; text-anchor: middle; paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.u7t-label--caption { font-size: 22px; }
.u7t-label--legend { font-size: 20px; text-anchor: start; }
.u7t-label--note { fill: var(--ink-2); font-size: 20px; }
.u7t-label--bar { fill: var(--world-ink, var(--ink)); stroke: none; font-size: 22px; }

/* Bars: the sides, the two shorter ones chained under the longest. */
.u7t-bar { fill: var(--world-band); stroke: var(--ink); stroke-width: 3; }
.u7t-bar--alt { fill: var(--gold-tint, var(--surface)); }
.u7t-bar--unknown { fill: var(--surface); stroke-dasharray: 8 5; }
.u7t-gap { fill: none; stroke: var(--red-base); stroke-width: 3; stroke-dasharray: 6 5; }
.u7t-over { fill: var(--red-tint); stroke: var(--red-base); stroke-width: 3; }
.u7t-end { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 6 5; }

/* ---------- The board: the sheet beside the choices (stacked on a phone) ---------- */
.u7t-work { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(12px, 2vw, 28px); width: 100%; }
.u7t-sheet { display: grid; justify-items: center; width: min(100%, 520px); padding: 8px; background: var(--world-model); border: 2px solid var(--world-model-edge); border-radius: 16px; }
.u7t-sheet .u7t-figure { width: 100%; background: var(--surface); border-radius: 8px; }
.u7t-controls { display: grid; justify-items: center; min-width: min(100%, 200px); }
.u7t-choices { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.u7t-choice { min-width: 150px; min-height: var(--touch); padding: 6px 16px; font-size: clamp(18px, 1.7vw, 22px); font-weight: 900; }
.u7t-choice[data-missed] { border-color: var(--red-base); border-style: dashed; }
.u7t-choice[data-answer] { color: var(--green-ink); background: var(--green-tint); border-color: var(--green-base); opacity: 1; }

/* High contrast: no tints; marks speak through borders, dashes and weight. */
body.high-contrast .u7t-bar--alt, body.high-contrast .u7t-over { fill: none; }

/* A short landscape board (1366 × 768): the kicker goes and the figure is capped so the reason line stays above the
   instruction bar. */
@media (orientation: landscape) and (min-width: 900px) and (max-height: 820px) {
  .question-card--topic:has(.u7t-board) .question-kicker { display: none; }
  .question-card--topic:has(.u7t-board) .question-copy { margin-bottom: 8px; }
  .u7t-board[data-task=mark] .u7t-sheet { width: fit-content; max-width: 100%; }
  .u7t-board[data-task=mark] .u7t-sheet .u7t-figure { width: auto; max-width: 100%; height: 35vh; }
}

@media (max-width: 700px) {
  /* A 390 × 844 phone holds the whole round above the instruction bar: a smaller sheet over a row of choices. */
  .u7t-work { gap: 8px; }
  .u7t-sheet { padding: 4px 6px; }
  .u7t-sheet .u7t-figure { max-height: 22vh; }
  .u7t-board[data-task=mark] .u7t-sheet .u7t-figure { max-height: 30vh; }
  .u7t-controls { width: 100%; }
  .u7t-choices { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px; }
  .u7t-choice { flex: 1 1 40%; min-width: 0; padding: 4px 8px; }
  .u7t-sheet .u7t-label { font-size: 24px; }
  .u7t-sheet .u7t-label--caption, .u7t-sheet .u7t-label--legend, .u7t-sheet .u7t-label--note, .u7t-sheet .u7t-label--bar { font-size: 26px; }
}