/* The Schedule screen.
 *
 * It spent a while named `overview.css`, after a camp-wide timetable this file
 * used to style — that screen is gone (four territories run four different
 * clocks, so its rows said nothing), and the file carried the old name only
 * because index.html belonged to another phase at the time. It doesn't any
 * more, so the file sits where it should: `schedule.css`, beside
 * `schedule.js`.
 *
 * Every colour is a token from tokens.css (guardrail 10). Territory colours are
 * not written here at all — they are rows in the `territory` table, so the
 * screen paints them as inline styles straight from the API. Nothing here may
 * hold a raw colour value; `npm run check` enforces it.
 *
 * app.css owns the shared shapes (`.grid`, `.gcell`, `.agenda`, `.terr-box`)
 * and is loaded first, so what follows are the Schedule's own corrections to
 * them.
 */

/* --- the header ------------------------------------------------------------
 *
 * `.sched-head` is app.css's; during the burn it grows the design's Live door
 * on the right, which needs the row to be a row. */

.sched-head--burn {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-end;
  justify-content: space-between;
}

.sched-livecta { margin-top: 0; }

/* --- the full-territory banner ---------------------------------------------
 *
 * Not a warning and not an error: a territory with every seat taken is the best
 * news the app has. Live green, and it says the same thing the schedule under
 * it shows. */
.banner--full {
  background: var(--live-bg);
  color: var(--ink);
}

/* --- the grid is not a scroll box ------------------------------------------
 *
 * This is the correction the whole screen hangs on. The grid used to live in
 * `overflow: auto; max-height: 66vh` — a scrollable pane inside a scrollable
 * page, which on a 900px window meant the week was read through a 594px slot
 * while two thirds of the screen sat still. Two scrollbars, two scroll
 * positions, and a mouse wheel whose meaning depended on where the pointer was.
 *
 * So: no scroll container anywhere between the sticky cells and the viewport,
 * and the page scrolls. `position: sticky` resolves against the nearest
 * *scrollport*, which is now the viewport, and — this is the part worth knowing
 * — a sticky grid item is held inside its **grid container**, not inside its own
 * grid area, so a header cell can travel the whole height of the table and a day
 * cell the whole width. Measured in Chrome before relying on it.
 *
 * Two rules make that true and both matter:
 *
 *   `overflow: clip` rather than `auto`. Clip is the one overflow value that
 *   does not create a scroll container, so it keeps the rounded corners off the
 *   square cells underneath without taking sticky away. It can only clip what
 *   overflows, and nothing does, because —
 *
 *   `width: fit-content` with `max-width: none`. `fit-content` already stops at
 *   the room available, so the seat tracks shrink from 150px toward their 112px
 *   floor and a seven-column admin grid still fits 1280px. Past that floor the
 *   box grows and pushes the *page* sideways — where the day column's `left: 0`
 *   catches it — rather than being clipped unreachably, which is what a
 *   `max-width: 100%` would have done to it. Nothing is ever cut off; the worst
 *   case is a sideways scroll with the day column pinned.
 */
/* The scrolling rules moved into app.css, where `.grid-wrap` is defined — they
 * were written here as overrides because that file belonged to another
 * workstream at the time, and an override that only exists to undo the rule
 * above it is a rule waiting to be read wrong. */

/* How far down the header row parks is not written here: the app bar is itself
 * sticky at the top of the viewport, so the table's header has to stop
 * underneath it rather than slide behind it, and how tall that bar is belongs to
 * app.css and changes at the phone breakpoint. schedule-grid.js measures it and
 * writes `top` on the header cells. app.css's `top: 0` is the fallback if that
 * ever fails, which puts the header at the top of the window rather than losing
 * it — the safe way round.
 *
 * The corner cell holds both edges, so it has to out-rank both. Every sticky
 * cell is already opaque — app.css paints the header `--card`, the day column
 * `--panel` and schedule-grid.js paints the header its territory's tint — which
 * is what lets them float over the rows they pass. */
.gcell--corner { z-index: 6; }
.gcell--colhead { z-index: 5; }
.gcell--rowhead { z-index: 4; }

/* --- the agenda, on a phone ------------------------------------------------
 *
 * Days are open (see schedule-agenda.js), so outside the burn a day heading is
 * a heading and not a button. app.css's `.day-head` already resets the font and
 * the margin for it; all that is left is not pretending it is pressable. */
h3.day-head { cursor: default; }