/* 7-area (plan 119): Mozaik Ustası and Pizza Paylaşımı (units/7-area-boards.js) and the Hızlı Parmak figures
   (u7a-figure, units/7-area-core.js). Theme tokens only, so light, dark and high contrast follow tokens.css and the
   world tokens of topic-games.css (blueprint, picnic). */

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

/* Lines and shapes, shared by the boards and the Hızlı Parmak figures. */
.u7a-shape { fill: var(--world-band, var(--brand-tint)); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.u7a-dash { stroke-dasharray: 7 6; }
.u7a-height { fill: none; stroke: var(--world-accent, var(--coral-base)); stroke-width: 3; }
.u7a-measure { stroke: var(--world-accent, var(--coral-base)); stroke-width: 4; stroke-linecap: round; }
.u7a-hub { fill: var(--ink); }
.u7a-ring { fill: var(--surface); stroke: var(--ink); stroke-width: 3; }
.u7a-slice { fill: var(--gold-base, var(--brand-tint)); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.u7a-label { fill: var(--ink); font-size: 17px; font-weight: 900; paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.u7a-label--soft { fill: var(--ink-2); font-style: italic; }
.u7a-label--angle { font-size: 15px; }

/* ---------- Hızlı Parmak figures ---------- */
.u7a-figure { display: block; width: min(100%, 320px); height: auto; margin-inline: auto; }
.u7a-figure .u7a-shape { fill: var(--brand-tint); }

/* ---------- Both boards: the sheet on the left, the keypad on the right (stacked on a phone) ---------- */
.u7a-work { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(12px, 2vw, 28px); width: 100%; }
.u7a-sheet { position: relative; display: grid; justify-items: center; gap: 8px; width: min(100%, 520px); padding: 8px; background: var(--world-model); border: 2px solid var(--world-model-edge); border-radius: 16px; }
.u7a-paper { display: block; width: 100%; height: auto; background: var(--surface); border-radius: 8px; }
[data-u7a-paper] { width: 100%; }
.u7a-plot { fill: var(--world-band); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.u7a-plot--moved { fill: var(--gold-tint, var(--world-band)); stroke: var(--world-accent); stroke-dasharray: 8 5; }
.u7a-pie { stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.u7a-pie--a { fill: var(--world-band); }
.u7a-pie--b { fill: var(--gold-tint, var(--surface)); }
.u7a-pie--rest { fill: var(--world-band); fill-opacity: .35; stroke: var(--ink-2); stroke-dasharray: 6 5; }
.u7a-pi { margin: 0; padding: 0 14px; color: var(--world-ink); background: var(--world-band); border: 2px solid var(--world-band-edge); border-radius: 999px; font-size: clamp(18px, 1.8vw, 24px); font-weight: 900; }
.u7a-move { min-height: var(--touch); font-size: clamp(18px, 1.7vw, 22px); }
.u7a-note { margin: 0; color: var(--world-ink); font-size: clamp(18px, 1.7vw, 22px); font-weight: 900; text-align: center; overflow-wrap: anywhere; }

/* High contrast: no tints; marks speak through borders and weight. */
body.high-contrast .u7a-plot--moved, body.high-contrast .u7a-pie--b, body.high-contrast .u7a-pie--rest { fill: none; }

/* A short landscape board (1366 × 768): the kicker goes, as on the units 1–2 boards, the π chip moves onto the paper's
   corner and the sheet holds a taller paper, so the figure fills the frame and the reason line stays above the
   instruction bar. */
@media (orientation: landscape) and (min-width: 900px) and (max-height: 820px) {
  .question-card--topic:has(.u7a-board) .question-kicker { display: none; }
  .question-card--topic:has(.u7a-board) .question-copy { margin-bottom: 8px; }
  .u7a-pi { position: absolute; top: 12px; right: 12px; }
  .u7a-paper { max-height: 32vh; }
}

@media (max-width: 700px) {
  /* A 390 × 844 phone holds the whole round above the instruction bar: a smaller sheet over the keypad. */
  .u7a-work { gap: 8px; }
  .u7a-sheet { gap: 4px; padding: 4px 6px; }
  .u7a-paper { max-height: 17vh; }
  .u7a-pi { font-size: 15px; }
  .u7a-paper .u7a-label { font-size: 24px; }
  .u7a-paper .u7a-label--angle { font-size: 20px; }
  .u7a-note { font-size: 16px; }
}