/* ══════════════════════════════════════════════════════════════════════════════ Planbook — the home screen (WO-1.10). THE FIRST PER-SCREEN STYLESHEET, and it exists because src/shell.css's own header says the next screen gets one: "a screen that needs styles of its own gets src/.css, loaded after this file, styling only its own class names, with its own @media (pointer: coarse) block at its end. Two stylesheets must never style the same class — that is the only way per-file touch passes stay safe from the cascade." Everything in shell.css so far belongs to the shell or to a modal; this is the first actual screen, so this is the first time that rule applies. It is obeyed literally: no selector below names anything shell.css styles. The values are shell.css's and design/style-guide.md's, not new ones: - The card is the style guide's subdued card — #f8f9fb on the white panel with an #eef0f4 hairline — which is `.class-row` and `.roster-row`'s surface, because a card holding one class should read as the same kind of object as a row holding one. - 10px radius: §3's "feature cards", the one radius in the guide above a button's 8 and below a panel's 14. - The OPEN card takes the interactive wash (#eef2ff / #b0bcf0 / #5b6fcc), not a solid fill. §1 reserves solid for a primary action, and `.year-row.current` already made this exact call for the same meaning: this is not an action, it is where you already are. Two things read like mistakes here and are the same two that read like mistakes in shell.css: colors are written out inline rather than as custom properties, and there is no dark variant of anything. Both are deliberate suite conventions — read CLAUDE.md before tidying either one. ══════════════════════════════════════════════════════════════════════════════ */ /* ── THE CARD GRID ── */ /* auto-fill rather than a column count, so the same rule gives three columns on an iPad in portrait, four in landscape and one on a phone without a breakpoint per shape. The 200px floor is what stops a sixth class from squeezing a name into two words: past that the grid drops a column and the cards get taller instead of narrower. Padded to match `.panel-header` above it (16px 20px 0), so the cards line up with the panel title rather than with the panel edge. */ .home-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; padding: 0 20px 20px; } /* This sheet's one tappable class, written out rather than left to shell.css's bare `button` term for the reason `.hdr-mode-btn` is named in its coarse block: a control that is only covered by another selector's rule is a control the next reader has to go and prove is covered. It was a pair between WO-2.1 and WO-1.13, while the state line was a control of its own; it is one again because the card is one control again (src/home.js). */ .class-card-open { touch-action: manipulation; user-select: none; -webkit-user-select: none; } /* One class. A container rather than the button itself — which it has been since WO-2.1, and stays now that WO-1.13 has collapsed the card back to a single control: the border, the fill and the hover belong to the card as an object, the button fills it exactly, and the day a later phase adds a second control that MEANS something else it goes in beside that button rather than round it. src/home.js's classCard() carries the reasoning in both directions. */ .class-card { display: flex; min-width: 0; padding: 12px 14px; border-radius: 10px; border: 1.5px solid #eef0f4; background: #f8f9fb; transition: all 0.15s; } /* Lifts to white on hover — the card comes forward off the panel's own wash, which is what says it is the thing being pointed at rather than a region of the page. Kept on the container rather than moved to the button inside it, so that pointing anywhere on the card still lifts the whole card. */ .class-card:hover { border-color: #5b6fcc; background: #fff; } .class-card.open { background: #eef2ff; border-color: #b0bcf0; } /* The tap. Full-bleed across the card and transparent, so it is the card's own surface that shows through and everything on it sits exactly where it did when the card was three loose pieces. It is the column now — the head, the state line and the reserved slot are its children — because since WO-1.13 the whole card is the one control. `text-align: left` and `font-family: inherit` are what a button needs to stop looking like a platform control on a page. */ .class-card-open { display: flex; flex-direction: column; gap: 8px; width: 100%; min-width: 0; padding: 0; border: none; background: none; font-family: inherit; text-align: left; cursor: pointer; } .class-card-head { display: flex; align-items: center; gap: 10px; min-width: 0; } /* Capped by the grid track and ellipsised, never wrapped: two lines of class name on one card and one on the next is a grid of cards that no longer line up. The whole name is on the card's `title`, and the class manager shows it in full. */ .class-card-name { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 700; color: #1a1a2e; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .class-card.open .class-card-name { color: #5b6fcc; } /* TODAY'S ATTENDANCE (WO-2.1). This is the slot the rule below it still holds open for Phase 3 and 4, filled. A since WO-1.13 rather than a button of its own: it reports, and the tap that fixes what it reports is the card it sits inside (src/home.js). Everything visual about it is unchanged — the three palettes are src/attendance.css's own, the same three fills and the same dashed edge on a class that did not meet, because the card and the screen it opens are one answer about one class and they must not say it two ways. The values are repeated rather than shared for the reason every colour in this repo is repeated: there are no custom properties here, deliberately (CLAUDE.md). Full width, and it takes the whole line: at 200px of card the state is the only thing on it, and a line indented inside a card reads as a second object rather than as this one's own news. */ .class-card-state { display: block; width: 100%; padding: 5px 9px; border-radius: 8px; border: 1.5px solid #eef0f4; background: #fff; font-size: 12px; font-weight: 700; line-height: 1.5; color: #6b7a8d; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .class-card-state.taken { background: #eafaf1; border-color: #a3e4bc; color: #27ae60; } .class-card-state.not-taken { background: #fff8e6; border-color: #f0dfa8; color: #8a6d1a; } /* Dashed and quiet: the "set aside" grammar `.class-row.archived` uses in shell.css, and the half of taken-vs-dropped-vs-untaken that survives being read from across a desk. */ .class-card-state.dropped { background: #fff; border-style: dashed; border-color: #d0d8e4; color: #6b7a8d; } /* A class that has been STARTED and not finished (WO-2.10): taken, so a meeting exists, but holding a `U` for every student the teacher never reached — and every one of those counts as an absence. It takes the caution wash rather than the taken one, deliberately overriding the rule above it on source order, because "act on this" is what an unfinished class is and a green line over twelve unconfirmed students is the silent failure that work order's Traps line is about. Same three colours as `.not-taken` and as src/attendance.css's amber: this is the same alarm, not a fourth. */ .class-card-state.unconfirmed { background: #fff8e6; border-color: #f0dfa8; color: #8a6d1a; } /* The calendar closed the day (WO-2.3) — the fourth answer src/attendance.js's stateOf() gives, and the one whose line carries a REASON rather than a count: "No school · Thanksgiving break". Solid where `.dropped` above is dashed, and one shade deeper, which is exactly the distinction src/attendance.css draws between the same two states in a column head. The two mean the same thing about the class and different things about where the undo lives, and this line is nine times out of ten the first place a teacher meets one. It is declared after `.unconfirmed` and cannot collide with it: a covered day has no record, so there is no `U` on it to be counted. */ .class-card-state.covered { background: #f5f7fa; border-color: #d0d8e4; color: #6b7a8d; } /* THE SLOT THAT IS STILL RESERVED, and `min-height` is the entire point of the rule. It is empty today — src/home.js explains why a placeholder would be worse than nothing — and it holds its own height so that the day WO-3.x or WO-4.x writes into it, every card on the page is already the size it will be. Without the reserved height the first real datum reflows the whole grid, which is how "six classes fit on an iPad in portrait" stops being true in a work order that never touched this file. The height is one row of chips: a `.pill`-shaped count is 24. Not a guess about what the content will SAY, only about how tall one line of it is. */ .class-card-signals { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 24px; } /* ── THE EMPTY STATE ── */ /* Inside shell.css's `.empty-state`, which supplies the centred 48px-padded zero-data block; these three are the children it does not have, because that component was written for a panel with no rows and this one has to lead somewhere. The lead line takes secondary text rather than the container's `#a0aab8`: an empty state that a teacher is meant to act on should not be styled like a disabled control. */ .home-empty-lead { font-size: 14px; font-weight: 700; color: #6b7a8d; } /* Capped and centred at a readable measure rather than run across an iPad, the same call `.loading-error` makes in shell.css over the same kind of paragraph. */ .home-empty-text { max-width: 460px; margin: 8px auto 0; font-size: 13px; line-height: 1.6; color: #8a9bb0; } .home-empty-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; } /* ── RESPONSIVE ── */ /* Same order design/style-guide.md §6 names and shell.css follows: (pointer: coarse) first, then the width blocks. */ /* The touch pass for this screen's own control. The card's button is a