/* Координат (/learn/coords, phases 5–6 spec §8.2): the trainer's setup, its board and what the round shows beside
   it. Mobile first: the square to find and the numbers above the board, the four names below it — a round brings
   the three into view together (pages/coords.js); side by side from 900 px. */
@layer page {
  .coords { display: grid; gap: var(--sp-4); max-width: 960px; margin: 0 auto; }
  .coords-setup { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: end; }
  .coords-setup .field { margin: 0; border: 0; padding: 0; }
  .coords-play { display: grid; gap: var(--sp-3); scroll-margin-top: calc(var(--top-h) + var(--sp-2)); }
  .coords-hud { display: grid; gap: var(--sp-2); }
  .coords-board { width: 100%; max-width: 560px; }
  .coords-side { display: grid; gap: var(--sp-3); align-content: start; }
  .coords-target { min-height: 1.2em; margin: 0; font-size: var(--fs-30); font-weight: var(--fw-heavy); color: var(--text); }
  .coords-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
  .coords-opt { min-height: var(--control-h); font-size: var(--fs-20); }
  .coords-opt.is-wrong { border-color: var(--bad); background: var(--bad-soft); color: var(--text); }
  .coords-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); margin: 0; }
  .coords-stats div { padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
  .coords-stats dt { color: var(--muted); font-size: var(--fs-12); }
  .coords-stats dd { margin: 0; font-size: var(--fs-20); font-weight: var(--fw-heavy); }
  .coords-result { margin: 0; padding: var(--sp-2) var(--sp-3); border-left: 3px solid var(--primary); border-radius: var(--r-xs); background: var(--primary-soft); color: var(--text); }

  @media (min-width: 900px) {
    .coords-play { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "board hud" "board side"; align-items: start; }
    .coords-hud { grid-area: hud; }
    .coords-board { grid-area: board; }
    .coords-side { grid-area: side; }
  }
}