/* The whole app's stylesheet. `templates/base.html` is the only thing that loads it and every page extends that template, so every rule here is on every page. A rule needed by one page goes in its own file loaded through `base.html`'s `{% block extra_css %}` instead (issue #137) -- `account_list.css` first among them; `static/css/` is the current list. A page whose only unique styling is a rule or two keeps it here as a named component class instead; a stylesheet request per page is not worth three lines. It lived inline in base.html until issue #134. Out here WhiteNoise serves it precompressed and under a content-hashed filename, so it is fetched once and read from cache after that; inline, the identical bytes were re-sent with every single page load. They were uncompressed too until issue #141 added `GZipMiddleware`, which is no longer a difference between the two -- the caching is. Which is why the comments below are ordinary CSS comments again. While this was inline, Django's template engine had no idea what one was and shipped it straight through into the HTML -- so the house rule was `{% comment %}`, enforced by a test, and writing down *why* a rule exists cost bytes on every request. Out here it costs nothing on any request. Comment freely. One hazard the old inline form did not have, found by reading computed styles in the browser rather than by any test: a comment that quotes CSS's own closing delimiter ends there, and every rule after it is parsed as garbage until the next brace. This header did exactly that on its first draft, which silently emptied `:root` below and left the app bar transparent while the file still returned 200 and the whole suite still passed. Do not write the delimiter inside a comment -- say "a CSS comment" instead. */ /* The "Refined Clinical" palette at Balanced intensity -- issue #257 is the spec these values come from, decided against three rounds of mockups. Naming, because the restyle added three kinds of token: * plain colour (--accent, --mine, --excluded): the thing's own hue -- fills, borders, rings. * `-ink` (--accent-ink, --mine-ink, --excluded-ink): the text variant, wherever hue-coloured text sits -- tint, surface, or page bg. The plain hue is never a text colour: a hue tuned to carry --on-accent on its fills cannot also clear text contrast, most sharply on the dark palettes (issue #281). Non-text marks keep the plain hue -- the subtab underline, the app bar's aria-hidden alert glyph -- since a mark needs only 3:1 and its meaning lives in adjacent text. A dark theme's -ink is *lighter* than its plain hue. * --on-accent: text sitting on a solid accent/mine/excluded fill. One token rather than #fff at each site so the dark palette can retune it in one place. The pairing is a two-sided constraint (issues #281/#285): a fill must be dark enough that --on-accent clears 4.5:1 on it -- enforced for every theme block by ComposedTextPairsStayReadable (shifts/tests/test_static_assets.py), with the app's other composed text pairs -- while staying light enough to mark at 3:1 against its own tint. Only Light's and Dark's mine/excluded are measured to that second half; Ember's fills and the dark accents sit below it, which is why the guard's mark side, MARK_PAIRS, does not hold these pairs -- add them there when they retune. On the dark side the window is narrow: retune by measuring, not by eye. --radius / --radius-sm / --radius-ctl is the 12/10/8 scale: cards / grid cells and small panels / controls (buttons, inputs, selects). --space-1..4 is the 4/8/12/16 rhythm -- issue #368, and the second dimensional scale in this file after --radius. Four rungs on a 4px grid, and four rather than six deliberately: a rung nothing wears is a rung that drifts, and these four covered every gap on the surface they were measured against. What they mean, so a new site picks the same rung as an old one: --space-1 the gap inside a thing -- a label and its control, an element and the one it is captioning. --space-2 the gap between siblings in a row -- pills, chips, the items of one group. --space-3 the gap between one band of the page and the next, and the page's own padding. The workhorse. --space-4 a deliberate separation, where a band needs to read as belonging to what follows rather than what precedes. **On-grid spacing is a token; off-grid spacing is a literal.** That is the whole rule, and both halves are load-bearing. #368 converted all 109 spacing declarations across `static/css/` that held exactly 4, 8, 12 or 16px -- every stylesheet, not just this one. Provably a no-op: computed margin, padding and gap were captured for all 6,418 elements on five pages before and after, and came back byte-identical. Zero on-grid literals remain in a `margin`, `padding` or `gap`, so `grep -n "gap: 8px"` finding one means somebody wrote it after this and it should be a token. The other half is why the conversion stops there. #368 first put `.admin-tabs.tabs-tight` (10px) and `.tabs-mid` (14px) on a rung, which collapsed two modifiers whose whole purpose was two values onto one, and moved admin_months and archived_months by 2px in a change that had not looked at them. Both were put back. **Converting an off-grid value is a pixel move, not a refactor** -- and because nothing on-grid is left as a literal, the remaining literals are now visibly the deliberate exceptions rather than indistinguishable from unconverted ones. --shadow is the resting elevation every raised surface wears; --shadow-hi is the raised state a *clickable* element lifts to on hover, plus the one at-rest exception: a panel that genuinely floats over the page body (the row menu's dropdown). Labels (status pills) stay flat -- elevation marks controls, not labels. --bar-*: the app bar's own colours. In this palette the bar is the accent, but the dark palette will split them (its bar is deeper than its accent), so nothing but these tokens may colour the bar. Two literals outside CSS restate them and cannot read tokens -- base.html's theme-color meta and static/manifest.json's theme_color/background_color -- so a palette change edits those two files as well. */ :root { --bg: #f2f5f6; --surface: #ffffff; --surface-2: #fbfcfc; --text: #16262b; --muted: #617277; --accent: #14505f; --accent-ink: #0f4250; --accent-light: #e6f0f2; --on-accent: #ffffff; --mine: #1e8650; --mine-light: #e8f6ee; --mine-ink: #12703f; --excluded: #bd5346; --excluded-bg: #fbebe8; --excluded-ink: #a8422f; --warning: #d9a02c; --warning-bg: #fdf4e5; --border: #e3e9ea; /* The edge of a form field (issue #530). Its own token rather than --border because a field is a control and --border is a card's hairline: WCAG 1.4.11 holds whatever marks a field as one to 3:1 against what it sits on, and --border is about 1.2:1 in every palette. Each theme mixes its own --muted toward its --surface until it clears 3:1 against both --surface and --bg, so it stays in the theme's hue; the mark pairs in ComposedTextPairsStayReadable measure it. */ --field-edge: #829094; --shift-a: #3f86cf; --shift-b: #bd7f2f; /* The shift-type tags on the All shifts tab (issue #548): a soft tint with its own ink, one pair per category. Hues stay off this palette's --mine and --excluded, which mark the viewer's own shift and a gap on the same page; a palette that moves those retunes these. */ --cat-daytime-bg: #e3eefa; --cat-daytime-ink: #1f4f86; --cat-evening-bg: #efe6f7; --cat-evening-ink: #5b3a86; --cat-night-bg: #e2e6f3; --cat-night-ink: #2c3a6b; --cat-call2-bg: #dff1ef; --cat-call2-ink: #1d625c; /* A neighbouring month's day on the All shifts tab. Its own token rather than --surface-2 because here it has to read as "not this month" at a glance, and this palette's --surface-2 sits too close to white for that (the review, 2026-09-30). Sandstone, Ember and Harbor alias their --surface-2, which already reads. */ --outside-month-bg: #f6f8f9; /* The working-week band behind the signup grid's cards (issue #477): each theme's own bar colour, stored as the solid colour it makes over that theme's --bg rather than as a see-through one. The band only ever sits on --bg, so the two look the same -- but neighbouring pieces overlap by a pixel to close the seam between them, and a see-through colour would show that overlap as a darker line. So a retune picks the tint, then composites it over the block's own --bg. This one is rgba(20,80,95,.20). */ --week-band: #c6d4d8; /* The category left bar, spelled once: every surface that draws it in a box-shadow list says var(--cat-bar-a), never the inset literal, so a bar retune is one edit (per category) instead of ten. */ --cat-bar-a: inset 4px 0 0 0 var(--shift-a); --cat-bar-b: inset 4px 0 0 0 var(--shift-b); --radius: 12px; --radius-sm: 10px; --radius-ctl: 8px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --shadow: 0 1px 2px rgba(16,40,48,.05), 0 1px 1px rgba(16,40,48,.04); --shadow-hi: 0 4px 10px rgba(16,40,48,.09), 0 1px 2px rgba(16,40,48,.06); /* The confirm dialog's ::backdrop wash: the theme's text tone at .45, deepened to black in the dark palettes the way the shadows are. A token because ::backdrop is still a page colour a theme must retune, even though only the ever wears it. */ --backdrop: rgba(22,38,43,.45); /* Hover feedback strength, tokens so each theme sets how strong and in which direction: brightness() is multiplicative, so the darken that reads on these light fills barely moves an already-dark one, and a dark-side theme restates both tokens above 1. -lift is every brightness hover's tier (the link chips gave up their own deeper dial in #293's retune -- mint a -deep token at the first chip-only retune, not before). -solid is the exception tier: a fill that wears --on-accent ink is dark in every palette (the contrast suite guarantees the white ink reads on it at rest), so no theme's darken has headroom there -- those controls lighten in every theme. The lighten spends label contrast while the pointer rests: measured at ~3.6:1 on the light side and ~3.4:1 on the dark side against the 4.5:1 rest floor, accepted in PR #294 -- motion and shadow carry the state alongside, and a lighten small enough to hold the floor would be invisible. Wearers are .btn-primary:hover, the assigned/excluded badge hovers and the pressed .toggle-chip's hover -- that is the full roster; a new solid-fill control joins by adding a rule, nothing inherits in. */ --hover-lift: brightness(0.93); --hover-solid: brightness(1.15); --bar-bg: var(--accent); --bar-line: rgba(255,255,255,0.14); --bar-shadow: 0 1px 0 rgba(0,0,0,0.06); /* The white-alpha family the bar's nav controls are drawn with -- part of the same "nothing but these tokens may colour the bar" boundary, since the dark palette's deeper bar will want them retuned together. */ --bar-outline: rgba(255,255,255,0.32); --bar-wash: rgba(255,255,255,0.12); --bar-wash-press: rgba(255,255,255,0.18); } /* --warning has no -ink variant, deliberately, in any palette: its one text use is the flash-warning glyph, which sits on --warning-bg with enough contrast as-is in every palette block -- sandstone's pair measures no worse than light's own. Mint the token when a warning text-on-tint use first appears, not before. */ /* Theme plumbing (issue #257). The :root block above is the standard light palette -- the default, the forced Light theme, and the light side of System. base.html stamps User.theme's name on as data-theme. Themes are a flat list: a future palette is one more :root[data-theme="..."] block of these same custom properties (with its color-scheme line), plus a choice in users/models.py -- the picker derives from the choices, and CONVENTIONS.md ("Themes are a flat list") carries the full recipe, including the theme-color meta branch a forced theme adds in base.html. No crossing with dark. color-scheme is which side the browser draws its own widgets on (scrollbars, date pickers, a select's chevron and its open list -- a field's own fill and ink are tokens, through the field base rule further down): System declares both and the device picks; the forced themes pin one side. Every future light-side theme declares `light`. The dark token block appears twice below -- once as the forced Dark theme, once as System on a device set to dark -- because a selector and a media query cannot share one rule, and generating one from the other needs a build step this app does not have. The one-block alternative, light-dark() at every token, was rejected: an engine that predates that function drops every colour in the app at computed-value time -- the same silent failure class as the color-mix note further down, at total instead of local scale. DarkTokenTwinsStayIdentical (shifts/tests/test_static_assets.py) pins the twins identical, so an edit to one fails the suite rather than quietly forking the palette. The twin is Dark's alone: System resolves only to :root's light values or Dark's block, so a second dark-side theme (Ember) has no twin and needs none. */ :root { color-scheme: light dark; } :root[data-theme="light"] { color-scheme: light; } /* The forced-dark rules are @media screen so printing falls back to the light palette. Print drops backgrounds by default but honours text colour, so an unscoped dark block would put near-white ink on white paper. System needs no such scoping: print evaluates prefers-color-scheme as light, which skips the twin below the same way. */ @media screen { :root[data-theme="dark"] { color-scheme: dark; } } /* The dark palette (issue #257, tuned at Balanced). Colours, shadows and the hover filters: the radius scale is theme-neutral, and --cat-bar-* needs no restatement because the bars reference var(--shift-a/b) at their point of use and pick the dark hues up from here. Dark shadows are tuned, not scaled -- dark needs disproportionate opacity for a shadow to register at all. Three families the issue-257 spec left open are derived here: the warning pair, --on-accent (white clears 4.5:1 on the dark accent; the dark text tone does not), and the bar's white-alpha family, dialled down a step because white reads louder on the deeper bar. */ @media screen { :root[data-theme="dark"] { --bg: #0e1416; --surface: #161f22; --surface-2: #1a2427; --text: #e8eff0; --muted: #93a6ab; --accent: #2b7d8f; --accent-ink: #8ed3e2; --accent-light: #1b353d; --on-accent: #ffffff; --mine: #298553; --mine-light: #14301f; --mine-ink: #79dfa4; --excluded: #b35c50; --excluded-bg: #361d19; --excluded-ink: #f0a294; --warning: #e2ae4e; --warning-bg: #322511; --border: #222f33; --field-edge: #606f73; --shift-a: #5b9ede; --shift-b: #cf9a4e; --cat-daytime-bg: #1b2c40; --cat-daytime-ink: #9cc4ee; --cat-evening-bg: #2a2140; --cat-evening-ink: #c9b1ec; --cat-night-bg: #1f2540; --cat-night-ink: #aab6e6; --cat-call2-bg: #15302d; --cat-call2-ink: #86d2c8; --outside-month-bg: #1e2a2e; --week-band: #1b434c; --shadow: 0 1px 2px rgba(0,0,0,.4); --shadow-hi: 0 6px 18px rgba(0,0,0,.55); --backdrop: rgba(0,0,0,.55); --hover-lift: brightness(1.25); --hover-solid: brightness(1.15); --bar-bg: #112a31; --bar-line: rgba(255,255,255,0.10); --bar-shadow: 0 1px 0 rgba(0,0,0,0.35); --bar-outline: rgba(255,255,255,0.30); --bar-wash: rgba(255,255,255,0.10); --bar-wash-press: rgba(255,255,255,0.16); } } @media (prefers-color-scheme: dark) { :root[data-theme="system"] { --bg: #0e1416; --surface: #161f22; --surface-2: #1a2427; --text: #e8eff0; --muted: #93a6ab; --accent: #2b7d8f; --accent-ink: #8ed3e2; --accent-light: #1b353d; --on-accent: #ffffff; --mine: #298553; --mine-light: #14301f; --mine-ink: #79dfa4; --excluded: #b35c50; --excluded-bg: #361d19; --excluded-ink: #f0a294; --warning: #e2ae4e; --warning-bg: #322511; --border: #222f33; --field-edge: #606f73; --shift-a: #5b9ede; --shift-b: #cf9a4e; --cat-daytime-bg: #1b2c40; --cat-daytime-ink: #9cc4ee; --cat-evening-bg: #2a2140; --cat-evening-ink: #c9b1ec; --cat-night-bg: #1f2540; --cat-night-ink: #aab6e6; --cat-call2-bg: #15302d; --cat-call2-ink: #86d2c8; --outside-month-bg: #1e2a2e; --week-band: #1b434c; --shadow: 0 1px 2px rgba(0,0,0,.4); --shadow-hi: 0 6px 18px rgba(0,0,0,.55); --backdrop: rgba(0,0,0,.55); --hover-lift: brightness(1.25); --hover-solid: brightness(1.15); --bar-bg: #112a31; --bar-line: rgba(255,255,255,0.10); --bar-shadow: 0 1px 0 rgba(0,0,0,0.35); --bar-outline: rgba(255,255,255,0.30); --bar-wash: rgba(255,255,255,0.10); --bar-wash-press: rgba(255,255,255,0.16); } } /* Sandstone (issue #273): the warm light theme, tuned in the round-two mockups. Light-side, so it retunes rather than restates. The bar's white-alpha family inherits :root's values because this bar (#5d3f26) sits at the same depth as the teal bar they were tuned on -- checked, not assumed; a paler bar would need them retuned, not inherited. --bar-bg is a literal, not the :root alias, because the bar sits a step darker than the accent here; base.html's sandstone theme-color meta restates it, pinned by PaletteMirrorsStayInSync. */ :root[data-theme="sandstone"] { color-scheme: light; --bg: #efe7da; --surface: #faf5ec; --surface-2: #f4eddf; --text: #2b2318; --muted: #726658; --accent: #6f4d31; --accent-ink: #573b24; --accent-light: #eeddc6; --mine: #55803a; --mine-light: #ebf1de; --mine-ink: #3f6127; --excluded: #bf4b26; --excluded-bg: #f9e3d8; --excluded-ink: #96351a; --warning: #c79433; --warning-bg: #f7edd6; --border: #e0d4bf; --field-edge: #8d8376; --shift-a: #4a6f8e; --shift-b: #9a5b68; --outside-month-bg: var(--surface-2); --week-band: #d8cbbc; --shadow: 0 1px 2px rgba(70,50,20,.07), 0 1px 1px rgba(70,50,20,.05); --shadow-hi: 0 4px 10px rgba(70,50,20,.12), 0 1px 2px rgba(70,50,20,.08); --backdrop: rgba(43,35,24,.45); --bar-bg: #5d3f26; } /* Ember (issue #273): the warm dark theme -- charcoal-brown where Dark is cool blue-grey. Dark-side, so it restates the whole palette, inside @media screen like the forced-dark block above. The bar's white-alpha family repeats Dark's dialled-down values: this bar (#2e1f14) sits at the same depth as Dark's -- checked, not assumed. --accent runs a step deeper than the mockup's amber on purpose -- --on-accent has to read on both the accent fills and the bar, and warm white clears 4.5:1 on this accent where it could not on the brighter one. */ @media screen { :root[data-theme="ember"] { color-scheme: dark; --bg: #171210; --surface: #221a15; --surface-2: #2a201a; --text: #f0e6da; --muted: #a8988a; --accent: #8a5f2a; --accent-ink: #e8bd81; --accent-light: #3a2c1c; --on-accent: #f5ead9; --mine: #3c7546; --mine-light: #22321f; --mine-ink: #a4d8a4; --excluded: #b4482c; --excluded-bg: #3a1e14; --excluded-ink: #f0a488; --warning: #d9a850; --warning-bg: #33260f; --border: #35291f; --field-edge: #76695f; --shift-a: #6f93b8; --shift-b: #b06d89; --cat-daytime-bg: #1e2a36; --cat-daytime-ink: #a9c6e4; --cat-evening-bg: #2c2230; --cat-evening-ink: #d4b6dc; --cat-night-bg: #23253a; --cat-night-ink: #b3b9e0; --cat-call2-bg: #1a2c2a; --cat-call2-ink: #94cfc6; --outside-month-bg: var(--surface-2); --week-band: #3a2918; --shadow: 0 1px 2px rgba(0,0,0,.5); --shadow-hi: 0 6px 18px rgba(0,0,0,.65); --backdrop: rgba(0,0,0,.55); --hover-lift: brightness(1.25); --hover-solid: brightness(1.15); --bar-bg: #2e1f14; --bar-line: rgba(255,255,255,0.10); --bar-shadow: 0 1px 0 rgba(0,0,0,0.35); --bar-outline: rgba(255,255,255,0.30); --bar-wash: rgba(255,255,255,0.10); --bar-wash-press: rgba(255,255,255,0.16); } } /* Harbor (issue #273): the reassigned light theme -- the sanctioned families exception (CONVENTIONS.md, "Themes are a flat list"), keyed by .legend-state in the signup legend. Light-side, so it retunes rather than restates; --surface stays :root's white on purpose. --excluded runs a step deeper than the mockup's amber -- --on-accent's white clears 4.5:1 on it where the amber held it to 3.5:1 -- and because that lands needs-coverage in the warning family, the warning pair is retuned yellower here rather than inherited, or error and warning flashes would share one cream. The bar-alpha family is retuned too, not inherited: this bar sits half a stop paler than the teal bar :root's values were tuned on, so the white alphas step up to keep the nav outline and hairline reading. --bar-bg restates the accent's value as a literal so the chrome pin has a value to hold. */ :root[data-theme="harbor"] { color-scheme: light; --bg: #f3f5f8; --surface-2: #fafbfd; --text: #1b2430; --muted: #606b7b; --accent: #7c4a70; --accent-ink: #63385a; --accent-light: #f0e2ee; --mine: #2e66b8; --mine-light: #e8f0fb; --mine-ink: #224f92; --excluded: #a85a0a; --excluded-bg: #fbf1de; --excluded-ink: #8f5a06; --warning: #b99a1d; --warning-bg: #faf5cf; --border: #dee4ec; --field-edge: #858d99; --shift-a: #2a8f8a; --shift-b: #a85275; /* Retuned rather than inherited: :root's Daytime blue and Night indigo would sit on this theme's blue --mine. */ --cat-daytime-bg: #e9efdc; --cat-daytime-ink: #4a5d1f; --cat-evening-bg: #f6e4ea; --cat-evening-ink: #8a2f4f; --cat-night-bg: #e6e8ee; --cat-night-ink: #3a4458; --cat-call2-bg: #dcf0ee; --cat-call2-ink: #1d6560; --outside-month-bg: var(--surface-2); --week-band: #ded6e0; --shadow: 0 1px 2px rgba(20,30,48,.06), 0 1px 1px rgba(20,30,48,.05); --shadow-hi: 0 4px 10px rgba(20,30,48,.10), 0 1px 2px rgba(20,30,48,.07); --backdrop: rgba(27,36,48,.45); --bar-bg: #7c4a70; --bar-line: rgba(255,255,255,0.18); --bar-outline: rgba(255,255,255,0.42); --bar-wash: rgba(255,255,255,0.16); --bar-wash-press: rgba(255,255,255,0.22); } /* IBM Plex Sans, vendored -- issue #368. Served from this origin like every other asset: `default-src 'self'` covers fonts through the `font-src` fallback, so a face from anywhere else is blocked, silently, the way everything else under that policy is. These two files are the *only* url() in this stylesheet, which CONVENTIONS.md flags as the thing to check. They are checked twice over: the policy above, and `collectstatic`, where the manifest storage rewrites the reference below to the content-hashed filename. CI runs that step. A variable face rather than three static weights, and that is not a preference: `font-weight: 650` is already in this file (the app bar's h1), and static cuts would round it to 600 or 700 without saying so. The split is upstream's. Google serves latin and latin-ext as separate subsets and this vendors both unmodified -- the second is what keeps a name carrying a Central or Eastern European diacritic from dropping to the fallback face for that one glyph, which reads as a rendering fault rather than as a different font. Their unicode-ranges are copied verbatim; edit neither, and do not merge the files, which would mean re-subsetting bytes that are upstream's. */ @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/ibm-plex-sans-latin.b2c9031d9fd6.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-ext.f0e2925b3fa6.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } * { box-sizing: border-box; } html { scrollbar-gutter: stable; } body { margin: 0; /* The system stack stays behind IBM Plex Sans as the fallback, which is what renders while the font is in flight under `font-display: swap` and if it never arrives at all. */ font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* `100%`, and emphatically not `16px`. This shipped as `16px` first, on the reasoning that "every size in this file is a rem off it, so saying it out loud changes nothing" -- which is wrong twice over. `rem` resolves against `html`, not `body`, and `html` above sets only `scrollbar-gutter`, so a body font-size pins no `rem` at all. What it does pin is every element that inherits from `body`, against the reader's own browser font-size setting. Measured at a 20px root, which is what Chrome's Appearance > Font size "Large" produces: body copy stuck at 16px while `.signup-hint` (0.85rem) rendered 17px -- secondary muted text larger than the text it qualifies, and a preference half-honoured. `100%` says the same thing to a default browser and keeps the whole page scaling together (WCAG 1.4.4). `line-height` is the one that was genuinely missing. `body` set none, so every page took the UA's `normal` -- which is derived from the face's own metrics, and so was about to change underneath us anyway when the face did. A rule that sets its own is not disturbed by this -- among them `.confirm-dialog-message` 1.5, the grid cell's name list 1.3, `.limits-row` 1.2, and 1 on the icon-sized controls (`.nav-toggle`, `.month-nav-arrow`, `.chip-x`, `.row-menu summary`, the phone cards' arrows). Not a full list: grep for `line-height` rather than trusting a count here. It inherits into every page stylesheet too, so that grep reads those as well as this file. One more *inherits* one rather than setting it -- `.admin-picker-control select` says `line-height: inherit` -- so it now takes 1.5 where it used to take the UA's `normal`. Measured rather than assumed: it renders no differently, because it is a `` with the selected option's colour rather than the select's own, which would put `--text` on the `--accent` fill -- 1.74:1 in the light palette, and unreadable. Untested: only Chromium has been looked at, and nobody is known to use Firefox. Noted rather than fixed because the obvious remedy is not one: scoping this to `option:checked` names the very option a closed control would be painted from, so it would change nothing. */ .admin-picker-control option { color: var(--text); background: var(--surface); } /* Divider and arrow, both `currentColor` off the fill above, so a new theme retunes them with everything else. **The arrow is drawn with borders rather than set as a glyph, and that is not a style choice.** An SVG would have to arrive as a `data:` URI, which `default-src 'self'` blocks -- `img-src` inherits from it and `data:` does not satisfy `'self'`. Measured, not assumed: an injected `data:` image raises a violation naming `img-src` while a same-origin control loads. A text glyph was the other candidate and is worse here: U+25BE is drawn small inside its em box, so it stays small however the font-size is raised, and how small depends on the font the device happens to have. Borders depend on nothing and size exactly as asked. */ .admin-picker-control::before, .admin-picker-control::after { content: ""; position: absolute; pointer-events: none; } .admin-picker-control::before { right: 32px; top: 6px; bottom: 6px; width: 1px; background: currentColor; opacity: 0.35; } .admin-picker-control::after { right: 10px; top: 50%; width: 0; height: 0; transform: translateY(-40%); border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 7px solid currentColor; } /* Inactive tabs answer the cursor (issue #188); the active tab is where you already are, so it stays put. */ @media (hover: hover) { .admin-tabs a:not([aria-current="page"]):hover { background: var(--accent-light); } } .admin-subtabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--border); margin-bottom: 20px; } .admin-subtabs a { text-decoration: none; font-size: 0.8rem; font-weight: 600; padding: 6px var(--space-3) var(--space-2); color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; } .admin-subtabs a[aria-current="page"] { /* -ink (issue #281): as plain accent the selected tab was dimmer on the dark themes than the inactive tabs' --muted -- it read as the disabled one. The underline keeps the plain hue; a mark, not text. */ color: var(--accent-ink); border-bottom-color: var(--accent); } /* Same issue #188 gap as .admin-tabs, quieter shape to match the underline style: the text firms up and the underline sketches itself in. */ @media (hover: hover) { .admin-subtabs a:not([aria-current="page"]):hover { color: var(--text); border-bottom-color: var(--border); } } /* The unsaved marker (issue #486): a dot after a tab's label while the form on its panel holds edits that differ from what was saved. preferences.js toggles the class from the form's data-unsaved attribute, so this rule only draws. Amber, the app's "look at this" hue, on a strip whose teal already means "selected". A glyph rather than a drawn circle so forced colours keep it, and a zero line-height so the larger glyph does not grow the strip's line box; the vertical-align settles it on the label's x-height. */ .admin-subtabs a.unsaved::after { content: "\2022"; color: var(--warning); margin-left: 5px; font-size: 1.5em; line-height: 0; vertical-align: -0.08em; } /* On a phone the strip packs tighter (issue #486), at the 480px the first-level .admin-tabs already use rather than a width of its own. Its own block, because the base padding rule above would override a line in that earlier block at equal specificity. The physician Preferences page's four tabs measure 365px at the 12px padding against a 351px strip on a 375px screen, and the strip does not wrap -- the losing tab wraps its own label onto two lines instead, "Working / Week" under one underline. At 8px the four measure 333px, which fits a 360px screen's 336px strip too. The labels still wrap rather than overflow below what fits, so a narrower screen degrades the way it did. */ @media (max-width: 480px) { .admin-subtabs a { padding-left: var(--space-2); padding-right: var(--space-2); } } /* Shift-type accent: the category left bar, worn by grid cells, signup day cards and admin day rows. `box-shadow` is one property, so the moment a surface also carries `--shadow` the two spellings fight and one silently vanishes -- which is why every bar-wearing surface *restates* the bar as a compound (`.day-card.shift-tue-thu { box-shadow: inset ..., var(--shadow) }`) next to its own elevation rule, and again for hover in the lift group. There is no bare `.shift-tue-thu` rule: all three wearers are elevated, so a bare rule could never win and would only misdirect the next reader. A new bar-wearing surface adds its own compound pair here or goes without. */ .grid-legend { display: flex; /* Wraps since the Harbor key (issue #273) grew the row to four entries, which overflows a 375px phone unwrapped. */ flex-wrap: wrap; /* Row gap stays 6px rather than taking a rung: the comment above says this row wraps on a 375px phone, so it is the gap between two visible lines of legend, and --space-1 (4px) tightened exactly the case that comment exists to handle. Column gap is --space-4 on the nose. */ gap: 6px var(--space-4); font-size: 0.8rem; color: var(--muted); margin-bottom: 10px; } /* The row's shape, once. The rota entry is an in its offer form, so this names both rather than letting the link restate the three declarations -- see .legend-link below, which now carries only weight. */ .grid-legend span, .grid-legend a { display: inline-flex; align-items: center; gap: 6px; } /* Per-physician Tue-Thu/Fri-Mon breakdown: hidden by default (opt-in detail, not everyone wants it); toggled via a class on the stable wrapper rather than the table itself, since the table is replaced wholesale by htmx oob swaps on badge clicks and would otherwise lose the toggle state on every click. */ .breakdown-detail { display: none; /* Typography arrived with the inline-style extraction (issue #175). It lives here rather than with the other stats-table rules so the whole component is one block -- two `.breakdown-detail` rules 500 lines apart is one an editor finds and one they miss. */ color: var(--muted); font-size: 0.8rem; } /* `block`, not `inline`, since #368 right-aligned these columns. Inline, the breakdown trails the figure inside a right-aligned cell, so the parenthetical takes the right edge and the primary count floats at an offset that varies with the breakdown's own digit counts -- `5 (3 2)` and `12 (10 2)` put 5 and 12 in different places. That is ragged in exactly the way the right-align was added to fix, and it fires for any admin who left the breakdown on, because the state is remembered. Scoping the right-align to `:not(.show-breakdown)` was the other candidate and is worse: app.js applies the class from localStorage after first paint, so the column would right-align and then jump left on every load. On its own line both the figure and its breakdown right-align, and the column of counts holds in both states. It costs row height while the breakdown is shown, which is an opt-in detail view. */ #physician-stats-section.show-breakdown .breakdown-detail { display: block; } /* Column widths come from here, never from the data (issue #123). The table is re-sent whole by an oob swap on every badge click, and under auto layout the browser re-measures each time -- so a count crossing 9 -> 10, or a physician's first assignment giving them a row, shifted every column downstream of it. `fixed` reads widths off the header row only and never measures a cell, so nothing moves. The max-width is the point of the change, not a detail: `main` caps at 900px while this table's content needs about 470, and auto layout hands the ~400px of slack out *in proportion* to intrinsic width. That is what made "Assignments" fatter than "Signups" (longer word, bigger share) and what pushed each number far from the name it belongs to. It sits on the *section* rather than on the table because the breakdown toggle is a sibling of the table inside that wrapper, in a flex row that right-justifies it. Capping only the table left the button tracking the 900px edge of `main` while the table stopped at 640 -- so one cap, on the element that owns both, rather than the same number written twice and free to drift apart. The table therefore depends on rendering inside that wrapper; `_physician_stats_table.html` records that, since all three of its include sites are what make it true. The numeric columns are percentages rather than px so they shrink with the viewport instead of overflowing a phone, and they are sized for the breakdown-*on* state. Sizing them per toggle state would cost two lines and reintroduce the reshuffle: the widths are identical breakdown on or off, and on the three-column Daytime tab, where the first column simply takes the larger remainder. */ #physician-stats-section { max-width: 640px; } #physician-stats-table { table-layout: fixed; width: 100%; } #physician-stats-table th:not(:first-child) { width: 20%; } /* The counts right-align, and this is a consequence of the fixed layout above rather than a taste for right-aligned numbers -- issue #368. A 20% column is far wider than the one or two digits it usually holds, so left-aligned the digit sits at the column's left edge while the eye is scanning for a column of figures. Over the roster's rows there is nothing to track down. Right-aligned they form the edge the header sits on, and the ones, tens and hundreds line up by place value -- with tabular-nums so a 1 occupies the same width as a 7 and the alignment holds row to row. The headers align with them: a right-aligned column under a left-aligned header reads as a mistake, and on the Gap fills header it is the lightning glyph that would otherwise drift away from the figures it labels. */ #physician-stats-table th:not(:first-child), #physician-stats-table td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; } /* The name column is the one that can be handed a token with nowhere to break. A physician with no first or last name renders their email instead, and an email has no space in it -- so where auto layout used to widen the column to fit one, a fixed column lets it run straight over the numbers beside it. Measured before this line existed: a 45-character address rendered 337px of content into a 256px cell, and at 375px, where the column is 140px, even a short address overflowed. `break-word` rather than `anywhere`: the two are indistinguishable under a fixed layout, which ignores intrinsic widths, and `break-word` is understood by every browser this app is likely to meet. */ #physician-stats-table td:first-child { overflow-wrap: break-word; } /* Two spellings for two of those headers. At 375px each numeric column is about 70px, which "Assignments" overflows into the column beside it, and that is what made the phone view read as crowded. Desktop has the room and keeps the full word rather than being abbreviated to match. Mobile-first like `.calendar-grid` below: the short spelling is the default and the full one is restored in the `min-width: 768px` block, so every responsive rule in this file reads the same direction. Named for the table rather than scoped to it by id. `.hdr-abbr` would have been a general name whose generality was a lie -- the rule hiding it would still have been id-scoped, so the same class used on any other header would silently render both spellings at every width. */ .stats-hdr-full { display: none; } /* The key half only where the mark is. The card list says the same thing in words at each week heading, so a swatch there would name a mark no card wears -- while the *link* half stays on both surfaces, since a physician who has not set this has no mark to explain and is exactly who it is for. Restored to the row's own inline-flex, not `inline`, or the swatch and its label stop sharing a centre line. */ .grid-legend .legend-desktop { display: none; } .grid-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; /* The swatch is the entry's whole point; the label flexes, not it. */ flex-shrink: 0; } /* Doubles/gap-claim name badges (inline variant): mobile card list and the admin schedule view both render at every width, unlike the block variant below which only exists inside the desktop calendar grid. */ .name-badge-inline { font-size: 0.65rem; vertical-align: super; opacity: 0.8; margin-left: var(--space-1); } /* Desktop calendar grid: hidden by default (mobile-first), shown on wide viewports. */ .calendar-grid { display: none; } @media (min-width: 768px) { main { max-width: 900px; } main.main-wide { max-width: 1250px; } /* The full stats headers, restored where there is room for them -- see `.stats-hdr-full` above for what the two spellings are. */ .stats-hdr-full { display: inline; } .stats-hdr-abbr { display: none; } /* The rota week key, restored where the mark it names is drawn. Only `display`, because `.grid-legend span` above already carries the row's alignment and gap. */ .grid-legend .legend-desktop { display: inline-flex; } /* --grid-gap is named because the working-week band below reaches half of it past each card. 10px is off the spacing scale on purpose (issue #477): at 6px the band had too little room to read as a band. */ .calendar-grid { --grid-gap: 10px; display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--grid-gap); margin-bottom: 20px; isolation: isolate; } /* The working-week band (issue #477): the physician's declared week as one tinted region behind its cards, because the question it answers is "where does my week run" -- a stretch of days -- rather than "is this one day mine". Only the working week is marked, as in #357. It is drawn by `.grid-slot`, the wrapper `_calendar_grid.html` puts round every dated cell, and never by the cell itself. A tappable cell lifts, brightens and shrinks under the pointer, and a band drawn by the cell would do all three and come apart from its neighbours. The slot also sits outside the element the out-of-band swaps replace, so a tap never has to redraw it. Each working slot's pseudo-element reaches half a gap past its cell, so neighbours meet in the middle of the gap and read as one piece; a joined side reaches one pixel further and squares its corners, closing the seam that sub-pixel column widths would otherwise leave. The overlap is invisible only because --week-band is opaque -- its comment in :root. Unjoined ends stay rounded, including where a Tuesday-to- Monday week breaks across two rows: the lone Monday is its own rounded tile, and colour plus reading order tie it to the row above. No two rows' bands ever touch: the cells above and below a day are seven days away, in the other rota week. z-index -1 puts the band behind every cell; `isolation` on the grid keeps it from falling behind the page instead. */ .calendar-grid .grid-slot { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; } .calendar-grid .grid-slot.wk-band::before { content: ""; position: absolute; z-index: -1; inset: calc(var(--grid-gap) / -2); background: var(--week-band); border-radius: calc(var(--radius-sm) + var(--grid-gap) / 2); } .calendar-grid .grid-slot.wk-join-left::before { left: calc(var(--grid-gap) / -2 - 1px); border-top-left-radius: 0; border-bottom-left-radius: 0; } .calendar-grid .grid-slot.wk-join-right::before { right: calc(var(--grid-gap) / -2 - 1px); border-top-right-radius: 0; border-bottom-right-radius: 0; } .calendar-grid .grid-weekday { font-size: 0.72rem; font-weight: 700; color: var(--muted); text-align: center; padding-bottom: var(--space-1); text-transform: uppercase; letter-spacing: 0.06em; } .calendar-grid .grid-cell { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); min-height: 91px; min-width: 0; padding: var(--space-2); position: relative; box-shadow: var(--shadow); } /* The category bar restated with the elevation -- see the bar comment at "Shift-type accent". The compound (0,3,0) outranks the base cell rule (0,2,0), so the bar survives wherever these rules sit. */ .calendar-grid .grid-cell.shift-tue-thu { box-shadow: var(--cat-bar-a), var(--shadow); } .calendar-grid .grid-cell.shift-fri-mon { box-shadow: var(--cat-bar-b), var(--shadow); } .calendar-grid .grid-cell .grid-names { margin-top: var(--space-1); font-size: 0.7rem; line-height: 1.3; color: var(--text); display: flex; flex-direction: column; gap: 2px; } .calendar-grid .grid-cell .grid-name-row { display: flex; align-items: baseline; gap: var(--space-1); min-width: 0; } .calendar-grid .grid-cell .grid-name-text { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .calendar-grid .grid-cell .grid-name-badge { flex-shrink: 0; font-weight: 700; } /* The Daytime posted order in the grid (issue #312): the same .rank-pill both card surfaces wear, at this surface's own scale -- the surface adopts the class and keeps only its own layout in its own rule (#291). The worked ✓ is mine-*family* on every surface, which is the invariant -- not one token. `--mine-ink` here and on `.p-worked-note`, because both are text on a tint or surface; the admin badge is `--mine` as a fill under `--on-accent` ink, and stays that way: the plain hue is never a text colour (the token charter's -ink rule, #281). How this surface says the word rather than showing it is `_grid_cell.html`'s business, and its own comment carries the reason. */ .calendar-grid .grid-cell .rank-pill { font-size: 0.55rem; padding: 0 5px; min-width: auto; } .calendar-grid .grid-cell .grid-name-badge-worked { color: var(--mine-ink); } .calendar-grid .grid-cell .grid-name-badge-gap-claim { margin-left: -5px; } .calendar-grid .grid-cell .grid-undo-note { margin-top: var(--space-1); font-size: 0.65rem; font-weight: 600; color: var(--mine-ink); } .calendar-grid .grid-cell.empty { background: transparent; border-color: transparent; box-shadow: none; } /* State rings: grouped with the card rules outside this block -- search "state ring" -- so each state has one spelling for both surfaces. */ .calendar-grid .grid-cell .grid-cell-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .calendar-grid .grid-cell .grid-date { font-size: 0.85rem; font-weight: 650; font-variant-numeric: tabular-nums; } .calendar-grid .grid-cell .grid-count { background: var(--accent-light); border: 1px solid var(--border); color: var(--accent-ink); font-size: 0.7rem; font-weight: 700; font-variant-numeric: tabular-nums; border-radius: 999px; padding: 2px 7px; } .calendar-grid .grid-cell.tappable { cursor: pointer; transition: transform 0.1s ease, filter 0.1s ease, box-shadow 0.1s ease; } /* Hover: the shared lift group near the buttons (its comment covers why the grid selectors live outside this width block). The old accent border-swap hover is gone, so state cells no longer need a defensive hover rule for their border colour. */ .calendar-grid .grid-cell.tappable:active { transform: scale(0.96); filter: brightness(0.93); } /* On desktop the grid is the input surface; the list below becomes read-only detail (matches v2's original grid-above/list-below pattern, avoids two surfaces both claiming to be clickable). */ .day-row { pointer-events: none; cursor: default; } /* Desktop: the grid is the single surface for browsing and marking availability, showing names directly in its cells -- the day-row list below is mobile-only, where there's no grid and the list is the only surface. */ .day-row-list { display: none; } } /* Nav: inline row on a wide screen (default). Below 1100px it collapses into a hamburger-revealed dropdown panel instead -- wrapping the row was considered but rejected since it degrades every time another nav item gets added; a hamburger's footprint stays constant. **1100px, not the 768px it was, and measured rather than borrowed** (issue #564). At 768px the row only switched off where it no longer fitted a phone; between 768 and about 1,070px it fitted nowhere, and every label wrapped inside its own box. An Overtime Admin's row -- five links, the name and Log Out, all at 16px -- needs 1,071px of the page, and a window 1100px wide gives 1,085 once a 15px scrollbar has taken its share. A plain physician's is narrower and gets the menu sooner than it strictly needs; one number for everybody is the price of not measuring the bar in script. A superuser's extra Django Admin link, and the undelivered-email alert's wording, can still overfill the row above 1100px; `#nav-links` then breaks between whole links rather than inside them. */ /* The glyph is about 22px square, under WCAG 2.2's 24px target and half Apple's 44pt; it was only on phones until issue #564 put it on tablets and phones held sideways too. 11px of padding makes the tap area about 44px, and the matching negative margin keeps the glyph and the bar exactly where they were. */ .nav-toggle { display: none; background: none; border: none; color: var(--on-accent); font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 11px; margin: -11px; } /* `align-items` and `gap` were a `style=` attribute on the div until issue #136, and moving them here is what let the `!important` below go. That flag was not guarding anything: it existed only because an inline declaration outranks any stylesheet rule however specific, so the mobile panel could not switch the row to `stretch` by ordinary means. With both declarations in this file the media query wins on source order at equal specificity, which is the mechanism doing the work rather than a flag suppressing one. **The `gap` beside it had no such flag, and that asymmetry is why the media query below now says 14px.** `align-items: stretch !important` won on main, so the panel always stretched; `gap: 10px` sat directly under it with no flag, lost to the inline `gap: 14px`, and so had never once applied since the day it was written. Hoisting the attribute would have switched it on and taken the sub-768px panel from 14px to 10px between links, 328px to 300px tall. It is 14px because that is what shipped and what anyone has ever seen. The 10px was not a design decision that this change restores -- it was dead the moment it was written, so nobody ever evaluated it, and adopting it here would have meant a CSS de-duplication quietly restyling a surface on its way past. Change it deliberately or not at all. Measured in the browser against a *faithful* reconstruction of main, meaning both halves -- the inline attribute and the `!important` together. Reinstating only the attribute makes it look as though `align-items` changed too, and it did not: alignment and the 343px link width are identical either way. The general lesson, since the next person hoisting an inline declaration will hit it: enumerate every stylesheet declaration the attribute was outranking, not only the one wearing the `!important`. The flag marks where somebody noticed the conflict. The silent losers are the ones that move. */ #nav-links { display: flex; align-items: center; gap: 14px; /* A row too wide for the bar breaks between whole links, right-aligned, rather than squeezing every label onto two lines inside its own box (issue #564). Above 1100px that is only the two rows the breakpoint cannot cover: a superuser's extra link, or the alert's wording. */ flex-wrap: wrap; justify-content: flex-end; } /* Name over role, two short lines rather than one long one (issue #564): 102px rather than 185px of the row, and at 1.25 the pair is 32px, inside a 36px link's height, so the bar does not grow for it. `_nav_user.html` is the markup, rendered twice by base.html; the blocks below say which copy shows where. */ .nav-user { display: inline-flex; flex-direction: column; color: var(--on-accent); opacity: 0.7; font-size: 0.8rem; line-height: 1.25; white-space: nowrap; } .logout-form { margin: 0; } /* What a button brings that the links' rules up by the app bar do not undo: its own fill, and the browser's `normal` line height (the control-font rule's comment) where the links take the body's 1.5. */ .logout-btn { background: none; line-height: 1.5; cursor: pointer; } @media (max-width: 1099px) { .nav-toggle { display: block; } #nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--bar-bg); flex-direction: column; align-items: stretch; /* 14px, not the 10px written here originally -- see above. That value was outranked by an inline attribute from the day it was written and never once rendered, so matching what shipped is the no-change option. */ gap: 14px; padding: var(--space-3) var(--space-4); z-index: 20; /* The row's wrap and right alignment, undone for a column. In a column with a height cap, `wrap` sends the overflow into a second column and `flex-end` pushes it off the top, where no scroll reaches it. */ flex-wrap: nowrap; justify-content: flex-start; /* No taller than the screen below the bar, scrolling inside itself (issue #564). A phone held sideways is about 390px tall, and the menu ran off the bottom with Log Out under the edge -- the bar is sticky, so scrolling the page moved nothing. `vh` first for a browser without `dvh`, which follows the browser's own bars as they show and hide. */ max-height: calc(100vh - var(--app-bar-height, 61px)); max-height: calc(100dvh - var(--app-bar-height, 61px)); overflow-y: auto; overscroll-behavior: contain; } #nav-links.open { display: flex; } /* Log Out is a row of the menu like the links above it (issue #564): its form is the flex item, so the button fills the form. */ #nav-links .logout-btn { width: 100%; text-align: left; } /* The undelivered-email alert keeps its count and glyph and drops its wording wherever the bar has collapsed, so it lives in this block rather than restating the breakpoint beside the alert's own rules (issue #564). The label is what makes it self-explanatory on a bar that has room for it; a collapsed bar holds the page title, on a tablet the name beside the menu, and the hamburger, and a five-word label there pushes the title into a third line on a phone. `title` on the anchor keeps the full wording reachable either way. Only the label changes; the right margin stays 14px (the note by the alert's own rules says why). */ header.app-bar a.failed-email-alert .failed-email-alert-label { display: none; } } /* Who the bar says is signed in, in two copies of `_nav_user.html` (issue #564): one in the row with the links, one standing beside the menu button. A tablet's collapsed bar has room for the name beside ☰, so it stays in sight there; a phone's does not -- a long title and a long name will not both fit 375px -- so there it stays in the menu, as before. One copy shows at any width, so it is never read out twice. */ .nav-user-bar { display: none; } /* The tablet band: the bar has collapsed, but there is room to spare. Its upper bound is the block above's, and the two change together. */ @media (min-width: 768px) and (max-width: 1099px) { /* The open menu is a panel under the button rather than the bar's full width, which at 1024px made each link a 1,000px bar. A phone keeps the full width, the width of a thumb's reach anyway. */ #nav-links { left: auto; width: 18rem; } .nav-user-bar { display: inline-flex; margin-left: auto; margin-right: 14px; } /* The alert's own auto margin already pins the pair right. */ .failed-email-alert + .nav-user-bar { margin-left: 0; } #nav-links .nav-user { display: none; } } /* ---- Extracted inline styles (issue #175) ---- Everything below this line came out of template style="" attributes, verbatim -- same declarations, same values. **One class per component, not per declaration set.** Several components below carry the same body today (`font-size: 0.8rem; color: var(--muted)` is six of them). They keep their own names on purpose: a physician's name list and a Max-slots hint are different things that happen to agree right now, and the restyle will move some of them apart. What is not allowed is one component spelled twice, or a body duplicated across files -- those are unified here. Where two components differ by a single value they stay two classes, since merging them would be a visible change and this pass must render identically to what it replaced. */ /* base.html -- the name and Log Out rules moved up beside `#nav-links` in issue #564, when they stopped being the attributes they were extracted from. */ /* Rendered by base.html and re-rendered out-of-band by _assignment_day_badges.html; one rule keeps the two spellings identical. */ #live-counts-data { display: none; } /* _month_switcher.html -- the list and the prev/next arrows either side of it (issue #257) read as one row of controls, so the box they share is one rule rather than two that a comment promises are identical. That includes the edge: the arrows wear the field's --field-edge rather than a card's --border, or the list would be ringed and the arrows beside it not. */ .month-switcher, .month-nav-arrow { background: var(--surface); border: 1px solid var(--field-edge); border-radius: var(--radius-ctl); box-shadow: var(--shadow); } /* `stretch`, so the arrows take the list's height whatever it is (issue #564): with the list at the once-a-page dropdowns' 40px, centred arrows at their own 34px stood short of it. */ .month-switcher-nav { display: inline-flex; align-items: stretch; gap: 6px; } .month-nav-arrow { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; min-height: 34px; padding: 0 9px; color: var(--accent-ink); font-size: 1rem; font-weight: 700; line-height: 1; text-decoration: none; transition: transform 0.1s ease, filter 0.1s ease, box-shadow 0.1s ease; } /* An end-of-list arrow: flat, because elevation in this app means "operable control". Why it is rendered at all rather than omitted is the template's business, and its comment holds that. */ .month-nav-arrow-dead { opacity: 0.38; box-shadow: none; } /* `a.` on both halves, not just hover: the anchor qualifier is what keeps the inert span out, and dropping it from one of the pair also breaks the equal-specificity tie the lift group's comment relies on -- hover would out-rank press and holding a live arrow would never scale. */ a.month-nav-arrow:active { transform: scale(0.97); filter: brightness(0.91); } /* _signup_window.html */ .signup-window-dates { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; } /* One bound, kept whole. Since issue #345 each bound carries its time, so "Jul 1, 7:00 AM – Jul 10, 5:00 PM" offers eight places to break and only the pair either side of the dash reads. This leaves that pair and closes the other six, the worst of which splits "5:00" from "PM". */ .signup-window-bound { white-space: nowrap; } /* _status_pills.html + _publish_pill.html: one base, one class per colourway. pill-neutral is shared by "Not published", "Signups not yet open" and "Archived" because their inline declarations were already byte-identical. */ .status-pill { border-radius: 999px; padding: 3px 10px; font-size: 0.8rem; font-weight: 600; } /* Ink text on the tinted fills, and the border softened to a 45% mix of the state colour -- a solid state-colour border read heavier than the text it framed. Pills stay flat: labels get no elevation. The mix lives in an @supports block, not inline: color-mix() wrapping a var() is accepted at parse time everywhere and only fails at computed-value time, where it resets border-style to its initial `none` rather than falling back to an earlier declaration -- so a plain fallback line above it would be discarded too, and a pre-2023 engine would show no border at all. Gated, old engines keep the solid border they always had. */ .status-pill.pill-accent { border: 1px solid var(--accent); background: var(--accent-light); color: var(--accent-ink); } .status-pill.pill-neutral { border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); } .status-pill.pill-open { border: 1px solid var(--mine); background: var(--mine-light); color: var(--mine-ink); } .status-pill.pill-closed { border: 1px solid var(--excluded); background: var(--excluded-bg); color: var(--excluded-ink); } @supports (color: color-mix(in srgb, red, red)) { .status-pill.pill-accent { border-color: color-mix(in srgb, var(--accent) 45%, transparent); } .status-pill.pill-open { border-color: color-mix(in srgb, var(--mine) 45%, transparent); } .status-pill.pill-closed { border-color: color-mix(in srgb, var(--excluded) 45%, transparent); } } /* An account's status, on its Accounts row and its own page (#559, `_account_status.html`). Borderless colourways -- the account pills never had the border the month pills carry. Compounds, matching the .status-pill.pill-* grammar above, so they cannot be silently outranked if the base ever gains colour. */ .status-pill.pill-active { background: var(--mine-light); color: var(--mine-ink); } .status-pill.pill-deactivated { background: var(--excluded-bg); color: var(--excluded-ink); } .stranded-link { display: inline-block; margin-top: var(--space-1); border-radius: 999px; padding: 3px 10px; font-size: 0.8rem; background: var(--excluded-bg); color: var(--excluded-ink); text-decoration: none; } /* _readiness_dot.html */ .readiness-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; } .readiness-dot.dot-green { background: var(--mine); } .readiness-dot.dot-yellow { background: var(--warning); } .readiness-dot.dot-red { background: var(--excluded); } /* The small muted note, on every surface that has one: "No signups for this day.", "Everyone available is already signed up.", "All days fully staffed.", the ranked-day empty state, the failed-email queue count, the release-schedule per-month note. `.flush` is for the

uses, which need the paragraph margin off; the

uses have none to begin with. */ .muted-note { font-size: 0.85rem; color: var(--muted); } .muted-note.flush { margin: 0; } /* Cross-page primitives (issue #291): looks that had grown a copy per stylesheet -- and page stylesheets cannot see each other, so a retune landed in one copy while the rest kept the old look. A surface adopts the class in its template and keeps only its own layout, spacing and type in its own rule. */ /* The raised card. Worn in templates -- grep class="card" for the roster rather than trusting a list here to stay complete. The near-quartets that stay out differ on purpose: .prepublish-checklist and the grid cells are the --radius-sm tier, the dashboard's panel is the deliberately quieter --surface-2 box, and the flash wears the quartet too but widens one border edge into its state bar and retints per level -- one render site in base.html, left standalone. */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } /* The muted uppercase section head; .spaced is the mid-page variant. .pref-group-head below is not a wearer deliberately: it differs in size, tracking and margin, so the base would be all overrides there. */ .section-head { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 0 0 var(--space-3); } .section-head.spaced { margin: 24px 0 var(--space-3); } /* The muted empty-state line ("No months...", "No upcoming assignments..."). Sibling of .muted-note above, kept apart by size and role: a note annotates a surface that exists, this stands in for one that is empty. The intro lines (.faq-intro, .release-intro) share this body but not the role and deliberately stay their own spellings. */ .empty-note { color: var(--muted); font-size: 0.9rem; } /* The accent chip: --accent-ink on --accent-light in the 5px corner family. Chips that are links shift brightness on hover and keyboard focus -- var(--hover-lift), so the light themes darken and the dark themes lighten (the chips' own deeper dial was retired in #293; the :root token comment marks the re-mint point). The underline lives only under forced colors -- and not because filters stop running there (they do not): that mode repaints the fill with system colours, so a brightness shift has nothing left to act on, and the underline, drawn in the forced ink, is the feedback that survives. Nowhere else -- an underline is foreign to this app's hover language (#293). The hover is gated like every hover in this file, so a tap cannot stick a chip shifted; the ungated :focus-visible is the keyboard channel. A page rule that must restyle a link chip's text-decoration or transition spells its selector a. -- this a. rule outranks a bare class. */ .accent-chip { color: var(--accent-ink); background: var(--accent-light); border-radius: 5px; } /* The All shifts tab's "Needs coverage" line (a.as-gap, #548) is the same kind of control-shaped link and wears the same feedback. */ a.accent-chip, a.as-gap { text-decoration: none; transition: filter 0.1s ease, transform 0.1s ease; } @media (hover: hover) { a.accent-chip:hover, a.as-gap:hover { filter: var(--hover-lift); } } a.accent-chip:focus-visible, a.as-gap:focus-visible { filter: var(--hover-lift); } /* The touch channel, ungated like every press and later in source than hover and focus so holding wins the ties: small-control scale with the tinted-fill press dip. Chips were the one control-shaped link with no tap response (PR #294 review follow-up). */ a.accent-chip:active, a.as-gap:active { transform: scale(0.96); filter: brightness(0.93); } @media (forced-colors: active) and (hover: hover) { a.accent-chip:hover, a.as-gap:hover { text-decoration: underline; } } @media (forced-colors: active) { a.accent-chip:focus-visible, a.as-gap:focus-visible { text-decoration: underline; } } /* no_months.html -- .empty-note plus the page margin. */ .no-months-note { margin: 20px 0; } /* An wearing a .btn-* class needs these two back; the button rules assume a