/* 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 two header controls an admin gets --------------------------------- * * A row head opens or closes every unheld seat on that shift; a column head * opens or closes that seat all week. They are on the *schedule* because you * open capacity when you can see a gap, and the coverage bars that tell you * there is one are two centimetres to the left of the button. * * A camper never gets these: `schedule-grid.js` draws the same heads as plain * `
`s without the handlers, so there is nothing here for them to match. * * app.css's `button.gcell { cursor: pointer }` already carries the pointer, and * `.gcell` already resets the border and the font, so a `