/* 5-measurement (plan 119): Çit Tasarımcısı and Piksel Mimarı (units/5-measurement-boards.js) and the Hızlı Parmak
   figures (u5m-figure, units/5-measurement-core.js). Theme tokens only, so light, dark and high contrast follow
   tokens.css and the world tokens of topic-games.css. */

/* ---------- Shared ---------- */
.u5m-board { width: min(100%, 1040px); }
.u5m-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; }
.u5m-spark:empty { visibility: hidden; }
.u5m-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; }
.u5m-board [data-answer]:not(.u5m-chip) { color: var(--green-ink); }
.u5m-note { margin: 0; color: var(--world-ink); font-size: clamp(17px, 1.6vw, 21px); font-weight: 900; text-align: center; }

/* Lines and shapes, shared by the boards and the Hızlı Parmak figures. */
.u5m-lawn { fill: var(--world-band, var(--brand-tint)); }
.u5m-fence { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linejoin: round; }
.u5m-post { fill: var(--ink); }
.u5m-tiles { fill: var(--world-band, var(--brand-tint)); stroke: var(--ink); stroke-width: 3; }
.u5m-grid { fill: none; stroke: var(--ink-2); stroke-width: 1; }
.u5m-label { fill: var(--ink); font-size: 17px; font-weight: 900; paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.u5m-label--soft { fill: var(--ink-2); font-style: italic; }

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

/* ---------- Boards: the work on the left, the keypad on the right (stacked on a phone) ---------- */
.u5m-work { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(12px, 2vw, 28px); width: 100%; }
.u5m-panel { display: grid; justify-items: center; gap: 6px; width: min(100%, 460px); padding: 8px 10px; background: var(--world-model); border: 2px solid var(--world-model-edge); border-radius: 16px; }
.u5m-panel > [data-fence-garden], .u5m-panel > [data-pixel-garden] { width: 100%; }
.u5m-panel .u5m-figure { width: min(100%, 340px); }
.u5m-readout { min-height: 1.3em; margin: 0; color: var(--world-ink); font-size: clamp(18px, 1.7vw, 22px); font-weight: 900; text-align: center; }

/* ---------- Çit Tasarımcısı: the draggable corner ---------- */
[data-fence-grid] { width: 100%; }
.u5m-grid-figure { display: block; width: 100%; height: auto; touch-action: none; user-select: none; -webkit-user-select: none; }
.u5m-grid-figure .u5m-lawn { fill-opacity: .75; }
.u5m-handle { cursor: grab; outline: none; }
.u5m-handle__hit { fill: transparent; }
.u5m-handle__dot { fill: var(--world-accent, var(--coral-base)); stroke: var(--ink); stroke-width: 3; }
.u5m-handle:focus-visible .u5m-handle__dot { stroke: var(--focus, var(--brand)); stroke-width: 5; }
.u5m-handle[aria-disabled] { cursor: default; }
.u5m-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; width: 100%; }
.u5m-step { min-height: var(--touch); padding: 4px 6px; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.15; }
.u5m-confirm { min-height: var(--touch); font-size: clamp(19px, 1.8vw, 24px); }
.u5m-add { min-height: var(--touch); font-size: clamp(17px, 1.6vw, 21px); }
.u5m-pad { display: grid; justify-items: center; gap: 8px; }
.u5m-collect { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; max-width: 340px; }
.u5m-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; min-height: 36px; margin: 0; padding: 0; list-style: none; }
.u5m-chip { padding: 2px 12px; color: var(--ink); background: var(--surface); border: 2px solid var(--world-model-edge); border-radius: 999px; font-size: clamp(16px, 1.5vw, 19px); font-weight: 900; }
.u5m-chip[data-answer] { color: var(--green-ink); background: var(--green-tint); border-color: var(--green-base); }

/* ---------- Piksel Mimarı: the rows ---------- */
[data-pixel-sheet] { width: 100%; }
.u5m-pixels { display: block; width: 100%; height: auto; background: var(--surface); border-radius: 8px; }
.u5m-row { fill: var(--surface-2, var(--surface)); }
.u5m-row--on { fill: var(--world-accent, var(--brand)); }
.u5m-row--missing { fill: var(--gold-tint, var(--world-band)); stroke: var(--red-base); stroke-width: 3; stroke-dasharray: 6 4; }
[data-pixel-sheet][data-answer] .u5m-row--on { fill: var(--green-base); }
.u5m-pixels .u5m-grid { stroke: var(--ink-2); }

/* High contrast: no tints; marks speak through borders and weight. */
body.high-contrast .u5m-lawn, body.high-contrast .u5m-row--missing { fill: none; }
body.high-contrast .u5m-row--on { fill: var(--ink); }

/* A short landscape board (1366 × 768): the kicker goes, as on the units 1–2 boards, and the figures slim so the
   reason line stays above the instruction bar. */
@media (orientation: landscape) and (min-width: 900px) and (max-height: 820px) {
  .question-card--topic:has(.u5m-board) .question-kicker { display: none; }
  .question-card--topic:has(.u5m-board) .question-copy { margin-bottom: 8px; }
  .u5m-panel { width: min(100%, 420px); gap: 4px; }
  .u5m-grid-figure, .u5m-pixels { max-height: 28vh; }
}

@media (max-width: 700px) {
  /* A 390 × 844 phone holds the whole round above the instruction bar: smaller figures; on the list board (the
     keypad needs the room) the corner's steppers sit in a 2 × 2 block beside the grid and the list of gardens is
     one scrolling row. */
  .u5m-work { gap: 8px; }
  .u5m-panel { gap: 2px; padding: 4px 6px; }
  .u5m-grid-figure { max-height: 24vh; }
  .u5m-pixels { max-height: 15vh; }
  .u5m-panel .u5m-figure { max-height: 18vh; }
  .u5m-step { min-height: 44px; padding: 2px 2px; font-size: 14px; }
  .u5m-readout { font-size: 17px; }
  [data-task="count"] .u5m-panel { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "grid steps" "read read"; align-items: center; column-gap: 8px; }
  [data-task="count"] .u5m-panel > [data-fence-grid] { grid-area: grid; }
  [data-task="count"] .u5m-panel > .u5m-steps { grid-area: steps; grid-template-columns: repeat(2, 76px); }
  [data-task="count"] .u5m-panel > .u5m-readout { grid-area: read; }
  [data-task="count"] .u5m-grid-figure { max-height: 20vh; }
  .u5m-pad { gap: 4px; }
  .u5m-collect { flex-wrap: nowrap; width: 100%; }
  .u5m-add { min-height: 44px; flex: none; }
  .u5m-chips { flex-wrap: nowrap; justify-content: flex-start; min-height: 0; overflow-x: auto; }
  .u5m-chip { flex: none; }
}