/* ============================================================================ Starting Point — design modernisation: the component layer ============================================================================ The clean-sheet vocabulary. Every rule here references tier 3 semantic tokens and nothing else — no ramp step, no literal hex, no brand or mode class. That is what makes one rule correct in four palettes. Geometry is the geometry of the chosen explorations: 1c for the shell, 3b for the form controls, 5b for mobile, 6a for dense tables and 6b for the users list. Where a value came from a measurement rather than a choice it says so. THE SEAM IS GONE. Every rule here used to be scoped under `.sp-next` so that a migrated screen could opt in while `theme.css` still governed the ones that had not moved — seven class names collided between the two vocabularies, and two of them destructively: `.btn` was on every existing button, and legacy's `.tile` was a centred flex column with a shadow where this one is a quiet panel. Every screen has moved, `theme.css` is deleted, and the prefix came off in one commit. What that commit had to carry across first is worth knowing, because none of it was obvious from the file: the `@import` of Nunito (the only request for the typeface the whole system is built on), `.sp-root`, `.sp-reset`'s own bare selector, the bare `a` rules, and eight utility shims the transcribed guide content depends on. Removing the prefix dropped every rule's specificity by exactly one class, uniformly, so relative precedence held — including the three places written deliberately to out-specify something: `.field-tight` over `.field-row > .field`, `.trow-unread` over the 6a body cells, and `.tile-skill` over `.tile`. Uniform is the safe direction, and all three were measured in a browser afterwards rather than trusted to the arithmetic. AUDIT SELECTORS BY PARSING, NOT BY READING LINES. The original scoping pass rewrote only selectors that ended a line with `{` or `,`, so it left every single-line rule — `.navpill-on`, `.btn-p`, `.avatar`, `.modal` — unscoped: 119 of 181. The check written to confirm the work shared the bug, looked at the same line-endings, and reported clean. What found it was measuring the active nav pill in the running app and getting `rgba(0, 0, 0, 0)`. A verification that shares the bug it is checking for is not a verification — and the removal pass was written to track comment state for the same reason, so prose mentioning the prefix was left for a human to rewrite. This file is the draft of the stylesheet `crates/ui-core`'s components carry. ============================================================================ */ /* ---------------------------------------------------------------------------- The base reset. The rules that reach the document rather than a component, and they are unscoped because they are about the DOCUMENT rather than about a screen: no selector reaches inside the app, so nothing here can restyle an unmigrated screen. They also close a defect older than this work. Neither `theme.css` nor the design capture contained a single `html` or `body` rule, so the user agent's `body { margin: 8px }` was in force on every screen the application has ever rendered — an 8px frame around the whole app, which is why the shell could never reach the edge of the window. Found by the user looking at it, not by any of the gates: the 68px bar measures 68px whether or not it starts 8px in from the left. `height: 100%` on both is what makes a percentage height mean anything further down: a percentage resolves against the parent's height, so a chain that starts at an `auto`-height `` resolves to `auto` all the way. Deliberately no `background` on `body`. The palette tokens are declared on the wrapper `
` that carries `brand-sp light`, and custom properties inherit downward only — `var(--surface-canvas)` on `body` would resolve to nothing at all. `.shell-next` is `min-height: 100vh` and paints the canvas itself, so the body's own surface is never visible. ---------------------------------------------------------------------------- */ html { height: 100%; /* Stops mobile Safari inflating text in landscape, which no other browser does and which silently breaks any measured type scale. */ -webkit-text-size-adjust: 100%; } body { height: 100%; margin: 0; padding: 0; } /* ---------------------------------------------------------------------------- Root ---------------------------------------------------------------------------- */ /* `.sp-reset` ITSELF as well as its descendants. `theme.css` had the element in this selector list and this file did not, so deleting that sheet would have left the one element carrying the class — the application root — at `content-box`. Inert today, because that wrapper sets no width, padding or border, but a delta is a delta and this deletion is meant to be exactly neutral. */ .sp-reset, .sp-reset *, .sp-reset *::before, .sp-reset *::after { box-sizing: border-box; } /* The document root, carried across from `theme.css`, which was the only sheet that ever declared it. It owns the surface, the base colour and the base type for the whole page — which is what the guest screens and the not-found view render straight onto, having no frame of their own. The values are the new tokens rather than legacy's `--font-sans` / `--gray-800` / `--leading-base`, all three of which went with that sheet. `min-height: 100%` belongs here because this class sits on ONE element and that element is the page; a duplicate of this rule lived on `.sp-next` while the seam existed, deliberately without the height, because that class was on three elements at once. */ .sp-root { /* The pinned mobile tab bar's height, declared here because THREE rules depend on it and none of them is a descendant of the others: the bar itself, the sheet that rises above it, and the content padding that clears it. Declaring it on `.tabbar` would put it out of reach of the other two — which is the duplication this exists to remove. The home-indicator inset is part of the measurement rather than added at each site, so a phone that has one moves all three together. */ --tabbar-h: calc(74px + env(safe-area-inset-bottom, 0px)); min-height: 100%; background: var(--surface-canvas); color: var(--text-2); font: var(--t-body); -webkit-font-smoothing: antialiased; } /* A bare anchor, also carried from `theme.css`. Every link the application renders carries a class — `.link`, `.link-plain`, `.btn`, `.lr`, `.tab`, `.cell-who` — with one exception: the four anchors inside the transcribed guide content, which `.guide-content a` styles. This is the floor under anything that gets missed, and without it a classless link reverts to the user agent's blue underline. `--brand-text` rather than legacy's `--brand`: the latter is a FILL at 2.41:1 on paper, and this is type. */ /* `:not([class])` on the HOVER, and it is a fix rather than a refinement. The rest state is a floor for a classless link, which is what the comment above is about. The hover was the same rule without the same reasoning, and it LEAKED: a bare `a:hover` scores (0,1,1), so it beats every component class at (0,1,0) — meaning any anchor whose own rule set `text-decoration: none` at rest got an underline back on hover anyway. Audited rather than guessed, and the audit had to include the classes built in a closure — `.navpill` and `.tab` are `attr:class=move || …`, so a grep for a literal `class="…"` misses the whole navigation, which is half of what this is about. Of the twenty-two anchor classes this frontend emits, THREE declare their own hover decoration: `.link`, `.link-plain` and `.cell-who`, all of which want one. The other nineteen were underlining by accident — every `.btn`, `.navpill`, `.tab`, `.mark`, `.menu-item`, `.tile-action`, `.org-card`, `.card`, `.lr`, `.panel-open`. The symptom that found it: the dashboard draws `.tile tile-action` as a `