/* ═══════════════════════════════════════════════════════════════════════════
   Battle AIrena — Layout Framework (shared)

   Composition-as-data grid engine. See T66 Phase G Design v3.0 §4.

   This file is the framework — written once, applied everywhere. Per-dashboard
   composition (the `grid-template-areas` strings per band) lives in:
     server/ui/dashboard/projection.layout.css
     server/ui/play/play.layout.css

   Contract:
     - `.layout` is a CSS Grid container with `container-type: inline-size`.
     - Panels declare identity via `data-slot="<name>"` and height behavior via
       `data-height="fixed|expandable|folding|scrolling"`.
     - Slot → grid-area bindings are stable across dashboards.
     - Folding panels mark the items container with `data-collapsible-items`
       and expose `--visible-count` (read by layout.js at init time).

   ═══════════════════════════════════════════════════════════════════════════ */

@layer defaults {

/* `.everything` owns the container-query context so @container rules on
   `.layout` resolve against an ancestor (CSS spec: a container queries its
   nearest container ancestor, not itself). */
.everything {
  container-type: inline-size;
}

.layout {
  display: grid;
  gap: var(--layout-gap, 12px);
  padding: 12px 16px;
}

/* ── Slot → grid-area bindings ─────────────────────────────────────────── */

[data-slot="brand"]         { grid-area: brand; }
[data-slot="status"]        { grid-area: status; }
[data-slot="controls"]      { grid-area: controls; }
[data-slot="tournament"]    { grid-area: tournament; }
[data-slot="game"]          { grid-area: game; }
[data-slot="standings"]     { grid-area: standings; }
[data-slot="leaderboard"]   { grid-area: leaderboard; }
[data-slot="matches"]       { grid-area: matches; }
[data-slot="schedule"]      { grid-area: schedule; }
[data-slot="movelog"]       { grid-area: movelog; }
[data-slot="challenges"]    { grid-area: challenges; }
[data-slot="registration"]  { grid-area: registration; }
[data-slot="opponents"]     { grid-area: opponents; }
[data-slot="matchmaking"]   { grid-area: matchmaking; }
[data-slot="mystats"]       { grid-area: mystats; }

/* ── Height behaviors ──────────────────────────────────────────────────── */

/* fixed — no extra rules; panel stretches with its row like the rest. */
/* expandable — natural content height, no cap. */
/* folding — wired by layout.js via makeCollapsible(). No extra rules. */

[data-height="scrolling"] {
  max-height: var(--h-scroll, 400px);
  overflow-y: auto;
}

/* ── Game panel container-query zone (§5) ──────────────────────────────── */

.game-panel {
  container-type: inline-size;
}

}