/* ErgIntz web — the next-step material, Manrope, dark-mode friendly. */ /* **Manrope, self-hosted.** The landing page has shipped this face since 2026-09-10 and the app pages wore the system stack; one product in two typefaces is what the next-step pass is for (Martin, 2026-09-11). Declared here as well as in landing.css because the two stylesheets are never loaded together — the same file, the same unicode-range, one download. */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('fonts/manrope-latin.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; } :root { /* --- THE MATERIAL --------------------------------------------- 2026-09-11 The next-step redesign's ten values, the same ten `AppTheme.swift` took on 2026-09-10, read off the design canvas's own stylesheet (`docs/mockups/web-next-step/gen.py` and `light.py`) rather than off a picture — a 6 % hairline and a 3.5 % surface are invisible in a PNG. **The role tokens below are REPOINTED, not replaced.** `--bg`, `--card`, `--text`, `--muted`, `--border`, `--accent` and `--shadow` keep their names and every one of the ~900 rules that reads them takes the material without being touched. That is the whole reason this block exists; a redesign that has to visit every template is a redesign that half-lands. Light is a plain neutral off-white with NO tint and NO glow (Martin, 2026-09-10) and separates its surfaces with a shadow; dark is a near-black violet with three soft washes, and separates its surfaces by making them LIGHTER than the ground. The two are not each other's inverse, which is exactly where a "just invert it" palette goes wrong. */ --bg: #F7F7F8; --card: #FFFFFF; --text: #16181D; /* Ink at 60 % — a value's label, a sub-line, a secondary number. A rgba of the ink rather than a grey of its own, so the two themes' muted inks are the same statement about the same ink. iOS mirror: `Palette.inkMuted`. */ --muted: rgba(22, 24, 29, 0.60); /* Ink at 42 % — a section label, a chevron, a "never done". **Two muted inks, not one**: 60 % is text you are meant to read and 42 % is text you are meant to be able to FIND, and drawing them alike is what makes a dense screen read as a wall. iOS mirror: `Palette.inkFaint`. **Never at the 10 px step** (Martin, 2026-09-14: "fix it"): 42 % measures 2.65:1 on the light sheet and 3.81:1 on the dark ground, and 10 px text needs 4.5. The column head, the field caption and the head-to-head label take `--muted` (4.55:1 / 6.84:1) — the drawing's `.mu2` there was a contrast failure, not a concept. */ --ink-faint: rgba(22, 24, 29, 0.42); /* **The accent is the material's violet** (Martin, 2026-09-11) — the same pair iOS took into `AccentColor.colorset` the same day: #6D28D9 on the light sheet, #B07CFF on the dark ground. */ --accent: #6D28D9; /* The account disc in the rail. Its own value rather than a generic accent wash: a 10 % chip behind a 15 px glyph reads as nothing, and the drawing gives the disc its own value (`gen.py`: `.25` on dark, `light.py`: `.16`). */ --avatar-wash: rgba(109, 40, 217, 0.16); /* The primary rung's own light, on iOS `Elevation.go`'s geometry (y 6, radius 12) — `0 6px 14px` of the fill at 16 % on the light sheet and 18 % on the dark ground. It was the drawing's `0 10px 30px` at 22 / 28 %, which lit a halo wider than the button (Martin, 2026-09-14: "shadow/glow is too prominent"). */ --go-glow: 0 6px 14px rgba(34, 197, 94, 0.16); /* The run's edge on the go button — iOS `Elevation.goHighlight` / `.goShade`. */ --go-highlight: 0.28; --go-shade: 0.18; /* The destruction rung's slab. iOS mirrors: `Palette.dangerFill` / `.dangerBorder`; the drawing's `.btn.danger` (12 %/30 % dark, 9 %/35 % light — `light.py` steps the fill DOWN and the border UP, because a tint that reads on a dark ground disappears on paper). */ --danger-fill: rgba(217, 38, 79, 0.09); --danger-border: rgba(217, 38, 79, 0.35); --work: #f59e0b; /* **Rest is cyan** (the material), not a second blue: rest and the accent were two blues a row apart. iOS mirror: `Palette.rest`. */ --rest: #0891B2; --error: #dc2626; --warning: #d97706; --success: #16a34a; /* A HEART RATE, wherever one is printed — `AppTheme.Palette.heart`. It said "Apple's systemRed, which ADAPTS (#FF3B30 light, #FF453A dark)"; that was true until 2026-09-11, when the web took the material and the heart became its own red, #DC2F4B / #FF5A6E, pinned to iOS in both themes by `test_ramp_token_parity.py`. Not `--error`: the error colour means something went wrong, and a pulse is not an error. The session page's ♥ column and its HR chart drew the error red, and the head-to-head page reads `--h2h-heart`, which reads from here. **There are still two hearts, and this sentence used to claim there was one.** `--card-hr` is `#FF453A` — Apple's old systemRed — and the share card does NOT read `:root` on purpose: it is theme-independent, pinned by `parity/export_card_vectors.json` and its geometry twin, because a card is an image that leaves the app. So the card keeps its own red until somebody decides that image should change, which is a product call and not a palette one. Recorded in `docs/web-next-step/STATE.md`. */ --heart: #DC2F4B; /* BETTER and WORSE, where a number is genuinely two-valued: the `vs this` column on a session's page, and the ± diffs on the phone's Compare. Not --success / --error: nothing has succeeded or failed, and these are the contrast-pushed variants iOS uses at caption sizes (system green is too light on white, system red too washed out). iOS mirror: `Palette.diffGood` / `Palette.diffBad`, pinned by `tests/test_ramp_token_parity.py` in both themes. */ --diff-good: #0D8033; --diff-bad: #C81E1E; --border: rgba(22, 24, 29, 0.11); /* The material's light lift — `0 1 5 −1` ink at 6 %. One shadow, not two stacked ones: a white surface on an off-white ground needs a single soft edge, and the old pair drew a halo under every card. iOS mirror: `Elevation.surface` (y 1, radius 2, 6 %). */ --shadow: 0 1px 5px -1px rgba(22, 24, 29, 0.06); --shadow-hover: 0 2px 10px -2px rgba(22, 24, 29, 0.10); /* **The card's own drop** — the one place the material throws a real shadow, and the only shadow that exists in DARK. `--shadow` above is the surface lift and is LIGHT ONLY (`AppTheme.Elevation`: "the shadow is drawn in dark too only where the drawing draws one … which is `cardDark`, not this"), so in the dark blocks `--shadow` is `none` and this carries the 22-radius card. iOS mirror: `Elevation.cardDark`. */ --shadow-card: 0 1px 5px -1px rgba(22, 24, 29, 0.06); /* --- The material's surfaces ------------------------------------------- **A hairline is not a border.** They were one value on this side, and the drawing gives them different weights: a row divider has to be nearly invisible or a ten-row band reads as a grid, while a band's own edge has to state where the band stops. iOS mirrors in brackets. */ /* A list band or a panel: the surface a row sits on. Opaque white in light, where `--shadow` separates it; a 3.5 % white FILM in dark, so the ground's washes carry through. [`Palette.surface`] */ --surface: #FFFFFF; /* A control lifted off the ground — an icon button, the secondary rung, a toolbar pill. One step brighter than `--surface` in dark (6 %); the same white in light, where the shadow does the lifting. [`Palette.surfaceRaised`] */ --surface-raised: #FFFFFF; /* The edge of a CARD — the one component that keeps its radius. A step stronger than `--border` in dark (12 % against 9 %), because a card is an object and a band is a surface. [`Palette.cardBorder`] */ --card-border: rgba(22, 24, 29, 0.11); /* The rule BETWEEN two rows — 6 % in both themes. [`Palette.hairline`] */ --hairline: rgba(22, 24, 29, 0.06); /* The unfilled part of a progress bar. **Not symmetric**: 8 % white on the dark ground, 5 % ink on the light one — a track has to be quieter than a hairline on white and louder than one on black, because a light ground has less room below it than a dark ground has above it. [`Palette.track`] */ --track: rgba(22, 24, 29, 0.05); /* --- The two fills the material allows --------------------------------- **The primary action's green** — the one on the button that starts a piece, and the ONLY saturated fill in the app. Deliberately not `--success`, four lines up and nearly the same hue: "this worked" and "start rowing" are two sentences, and one green with two meanings is how a palette stops meaning anything. [`Palette.go` / `Palette.onGo`] */ /* **Lighter in light mode — #22C55E** (Martin, 2026-09-12, iOS `71c7a8f4`). `#17A75A` was the drawing's own light go and read as a dull slab on paper; it lives on as `--go-deep`, the switch's ring and the rung's far end. */ --go: #22C55E; /* The DEEP green — the ring round an ON switch. iOS mirror: `Palette.goDeep`. */ --go-deep: #17A75A; --on-go: #FFFFFF; /* **Red is destruction, and nothing else** outside the ramp — Delete, Remove, Disconnect, Revoke. [`Palette.danger`] */ --danger: #D9264F; /* **The label on an INK fill** — the primary rung, a selected segment, a strong tag, the play disc. It was `--card`, on the reasoning that "paper flips with the theme, so the label flips with the ink". That held while `--card` was an opaque surface and broke the moment the material made it a 3.5 % white FILM: a film on a near-white slab IS the slab, so all six of those labels went blank in dark at once. **The ink's opposite is the GROUND**, and naming it is what stops the next surface token being borrowed for the job. Sibling of `--on-go`. iOS mirror: `Palette.onInk`, which hit this the same way on 2026-09-10. */ --on-ink: var(--bg); /* **The same surface, flattened** — for an OCCLUDER, which is all this token has left. It was introduced for form controls, on the belief that "Chrome paints its own opaque field backdrop under `input`/`select`/`textarea`, and a translucent background lets that white through". **Measured 2026-09-11, that is not true**: a `rgba(255,0,0,0.2)` background on a text input, a select, a date input, a number input and a textarea composites over the washed ground to within a unit of a plain `
` carrying the same colour — (58,6,12) at the page's left edge against (69,13,27) under the top-right wash, the div's own gradient — and forcing `color-scheme: light` changes nothing. Whatever made every field a white slab the day the material landed, it was not the UA's backdrop, and the fields take `--surface` now. If a field ever goes pale again in a browser that is not Chrome, this is the measurement to repeat before reaching for this token. **The percentage is `--surface`'s, not `--surface-raised`'s.** It was 6 % in dark — `--surface-raised` flattened — so every field, menu and share-link on the site sat one step ABOVE the surface this token is named after, and the drawing draws a field on the plain one (`a_screens.py`'s `field()`: `background:{SURF}`). Light was already right, because there `--surface`, `--surface-raised` and `--card` are all `#FFFFFF` and a drift cannot show. */ --surface-opaque: #FFFFFF; /* What it IS for: anything drawn OVER page content — a menu, a dialog, a pinned header, a slider's thumb — plus a GAP ring, which is opaque by definition. `--card` is the right token for a surface sitting IN FLOW on the ground (the film is what lets the washes through); it is the wrong one for a surface whose whole job is to hide what is behind it. Compare's rep picker read straight through to the chart's axis labels and the hero delta underneath it. */ /* Spacing scale — every margin/padding/gap references these. */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; /* Half-steps — the de-facto 14/18px insets used by notices, cards and the card-link padding. Named between sp-3/4 and sp-4/5. */ --sp-35: 14px; --sp-45: 18px; /* Sub-scale steps. Named because both platforms were already spelling them out — 6px alone appears 25 times in this file — and an unnamed constant is how the two sides drift apart without anything noticing. `--sp-05` and `--sp-1r` are the gap between two lines of ONE label, never between two elements; reach for `--sp-1` upwards for that. iOS mirror: Spacing.hairline / .tight / .microPlus (added 2026-08-17). */ --sp-05: 1px; --sp-1r: 2px; --sp-15: 6px; /* The half-step between sp-2 and sp-3. It was USED twice and never DECLARED — `.open-remove` and the fold row's bar both asked for `var(--sp-25)`, both declarations were invalid at computed-value time, and both margins silently resolved to 0, so the bar sat flush against the title row. iOS mirror: Spacing.xsPlus, which the gate had recorded as "iOS-only, the web has no equivalent" — the web had two, spelled as a typo. */ --sp-25: 10px; /* Corner radius scale. */ --r-sm: 8px; --r-md: 10px; /* The smallest rounding either platform draws — the chart ribbon's chips. iOS mirror: Radius.micro. */ --r-micro: 4px; /* The rounding of a mark drawn INSIDE something else — the version chip, the plan's count slab, the banded value. It was commented "iOS-only" over there while this file spelled 6px for the same components. iOS mirror: Radius.inner. */ --r-inner: 6px; --r-lg: 14px; /* **The material's own three radii**, which `--r-lg` was standing in for. A button is 16, a panel 18, a card 22 — the drawing spells all three out and they are three different objects. iOS mirrors: `Radius.button`, `Radius.panel`, `Radius.cardLarge`, added on the iOS pass 2026-09-10 and unpaired here until this one. */ --r-button: 16px; --r-panel: 18px; --r-card-lg: 22px; --r-pill: 999px; /* Control heights — buttons, inputs and selects share these so rows of mixed controls always line up. */ /* **44, the drawing's control** (Martin, 2026-09-14: "take it" — fields and buttons at 44 / r14 / 14 px). WEB ONLY for now: iOS `ControlHeight.md` is still 38, and the parity gate carries the gap in `WEB_AHEAD` until the phones take the same step. */ --control-h: 44px; --control-h-sm: 30px; --control-h-lg: 46px; /* **The rung that starts a piece is its own size** — the material's `.btn{height:52px}`, six pixels above `lg`. It is the one control on a screen you reach for without looking, and the drawing gives it a height no other control has for exactly that reason. iOS mirror: `ControlHeight.primary`. */ --control-h-primary: 52px; /* The app's FLOOR for a reachable control — 36, not the HIG's 44. Not a button height: it is the minimum a tap target may be, which is why it sits beside the heights rather than among them. iOS mirror: ControlHeight.tap. */ --control-h-tap: 36px; /* The three figure columns on a club's weekly top list, each only as wide as what it prints ↔ `Control.topListWatts` / `…Time` / `…Meters`. One shared width broke every name at 360 pt on the phone. */ --wt-fig-w: 50px; --wt-fig-t: 64px; --wt-fig-m: 76px; /* One number for "this control is off", named so the two platforms can be compared. It was .55 here against iOS's 0.38 — the same ladder, the same rung, two values, and nothing to compare because this side never named it. 0.38 wins: the ladder was designed on iOS and ported here (round 5, W5). */ --btn-disabled-opacity: 0.38; /* A rest asks for nothing, and greying it is what lets work and rest be told apart down a column. Named so it can be compared: it has agreed with iOS's Control.restRowOpacity by luck since W7. */ --plan-row-rest-opacity: 0.62; /* --- A component's own inside ----------------------------------- P0, 2026-09-08 The numbers a chip, a wash or a rung is MADE of. Every one of them was a literal in this file and a `static let` over there, which is the shape a drift takes when nothing is looking: W5 closed the ladder's section of docs/redesign-web-debt.md by writing 5.5 %, 18 % and .86 into three rules rather than by naming them, so the gate could not see them at all. A chip's INSET is off the spacing scale on purpose, on both platforms: the scale measures the distance BETWEEN elements, and these measure how much room a two-letter word gets inside its own capsule. `-v-tall` is the same inset for a chip whose text sits on a larger type step. iOS mirror: Control.chipInsetH / .chipInsetV / .chipInsetVTall. */ --chip-inset-h: 7px; --chip-inset-v: 2px; --chip-inset-v-tall: 3px; /* The band chip — the strip that places a row on the ramp. Its height is `--bar-h` and its rounding `--bar-seg-r`, so only the width and the hang below the baseline are its own. iOS mirror: Laps.chipWidth (the design's 5 pt chip) / Bar.chipBaselineHang. */ --chip-w: 5px; --chip-hang: 3px; /* **A log row's chip is a 4 × 24 BAR.** `BandChip`'s height is a PARAMETER on iOS — "the plan table's rows carry a taller chip" — and this side hard-coded `--bar-h`, so History drew a 5 × 14 dot beside a two-line block that is 43.5 px deep. iOS's own comment for these two: "a band that is a 4 × 24 BAR rather than the plan table's 6 × 18 chip — it stands beside a two-line block, so it answers to the block's height". The drawing says 4 × 30; 24 is the app's, and the app is who this has to agree with. iOS mirrors: `Control.logBandWidth` / `.logBandHeight`. */ --log-chip-w: 4px; --log-chip-h: 24px; /* The TALLER chip's corner — `--bar-seg-r` is the bar segment's 2, and a chip standing on its own gets a point more (iOS `Control.planChipRadius`, passed by `LogRowView` and by `WorkoutPlanTable`). The web's `.plan-chip` still rounds at 2 and is still 5 × 14 against iOS's 6 × 18 — the same parameter gap one component over, recorded for 4.4. */ --chip-tall-r: 3px; /* A value chip's fill — the mark that separates "you can change this" from the plain grey facts beside it. iOS mirror: Control.valueWash. */ --value-wash: 5.5%; /* An insertion row's dashes. Lighter than a separator on purpose: it is a gap you may fill, not a division between things. iOS mirror: Control.insertionBorder. (Its dash PATTERN, [4, 4], has no CSS spelling — the UA picks one — so only the ink is a token.) */ --insertion-border: 18%; /* The pressed state, for the filled variants. iOS mirror: Control.pressedOpacity. */ --pressed-opacity: 0.86; /* A range input's thumb, which is also how far it insets its own track at each end. iOS mirror: Control.sliderThumb. */ --slider-thumb: 22px; /* The switch: the drawing's 44 × 26 with a 3 px inset (Martin, 2026-09-14: iOS's look, the drawing's size). iOS's own head switch is 34 × 20, so the size does not pair; the knob's shadow does. iOS mirror: `Control.headSwitchKnobShadow`. */ --switch-w: 44px; --switch-h: 26px; --switch-inset: 3px; --switch-knob-shadow: 0.30; /* **Compare, rep by rep** (ruling 01, 2026-09-14) — iOS `CompareAttemptsView`'s own numbers, `Control.compare*` / `.rep*` and `Chart.compare*`, so the two screens are one screen. */ --cmp-head-value: 28px; --cmp-edge: 3px; --cmp-strip-h: 11px; --cmp-readout-h: 40px; --rep-row-h: 42px; --rep-head-h: 34px; --rep-n-col: 26px; --rep-v-col: 56px; --rep-d-col: 36px; --rep-bar-h: 6px; --rep-bar-track: 20px; --rep-bar-share: 0.58; --cmp-this-w: 2.5px; --cmp-best-w: 2px; --cmp-glow-w: 6px; --cmp-glow-o: 0.30; --cmp-wedge-o: 0.06; /* Focus ring — one definition reused by every focusable control. */ /* 80%, not 35%. The ring was genuinely there at 35% — it just composited to rgb(48,74,108) on a rgb(22,25,31) card, i.e. 1.95:1, under the 3:1 WCAG 2.2 asks of a focus indicator. Both themes were checked with a pixel probe rather than by eye, because "I can see it" is exactly the judgement this threshold exists to replace: 60% fixed dark (3.31:1) but left light at 2.55:1 against white. 80% clears both (dark 4.9:1, light 3.6:1). */ --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 80%, transparent); /* Typography scale. The two smallest steps are the phone's own: `--text-3xs` is `Typography.metricLabel` (a caps label above or beside a metric, and a badge's number) and `--text-2xs` is `.caption2` (the count slab, the PB badge, a version chip, a bar's scale). They were spelled 9.5, 10, 10.5 and 11 across nine rules, all meaning one of these two. */ /* Also the COLUMN HEAD's size. The drawing gives the section label 11 px and the head 10 (`gen.py`: `.k{font-size:11px}` against `.tr.hd{font-size:10px}`) — a head names a column while a label names a section, and the head has to stay out of the way of the numbers under it. */ --text-3xs: 10px; --text-2xs: 11px; --text-xs: 12px; --text-sm: 13px; /* De-facto step between sm and base — table cells, card meta, notices. */ --text-sm-plus: 14px; --text-base: 15px; --text-md: 16px; /* iOS `.headline` at Large — a list row's name, and the one step the scale was missing between 16 and 18. Both were reached for instead: the workout row's title sat at body 15 while the phone's sat at 17. */ --text-md-plus: 17px; --text-lg: 18px; --text-xl: 22px; --text-2xl: 26px; /* **The display steps** (Martin, 2026-09-14: "try drawing") — the drawing's `.big`, the one number a page is about: 44 on the workout page's hero, 72 on Compare's delta. Its own weight, tracking and leading, because a number that size set like body text reads heavy and loose (`gen.py`: `.big{font-weight:600;letter-spacing:-.04em;line-height:.95}`). Web-only for now: iOS sets its live numbers from `Typography`, which has no step here yet. */ --text-display: 44px; --text-display-xl: 72px; --display-tracking: -0.04em; --display-leading: 0.95; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* The tracked-caps labels — the section band and the column head — are 800 in the drawing (`gen.py`: `.k` and `.tr.hd`). At `bold` the column head came out the LIGHTEST tracked-caps label on the site, under a section label this file hard-codes at 750. */ --weight-heavy: 800; /* Icon size — referenced by the .icon class and icon-buttons. */ --icon-size: 18px; /* Motion. */ --t-fast: 120ms ease-out; --t-med: 160ms ease-out; /* --- The intensity ramp ---------------------------------------- W1, 2026-08-14 Every colour in the redesigned app comes from this scale. Chosen by `IntensityBand` — pure domain on both sides (W2 ports it to Python), so a bar on the phone and a bar on this page cannot land on different bands. The offsets are seconds per 500 m against the READER'S OWN 5 km best, never the leader's and never the club's average. That is the only scale this palette has ever meant. THE SIX HUES ARE PINNED IN BOTH THEMES, on purpose: this is a scale, and a scale that shifts with the theme is not one. They are therefore in `:root` ONLY — do not add them to either dark block. The two that DO adapt are `--band-unplaceable` and `--bar-channel`, and both appear below in all three places (the light root, the media query, and [data-theme="dark"]). Values are the iOS hexes verbatim (AppTheme.Palette), checked value for value against docs/redesign-web-debt.md. */ --band-grey: #6C788A; /* slower than 5 km pace +25 s */ --band-blue: #55A3FF; /* +12 … +25 s */ --band-green: #22D96E; /* +4 … +12 s */ --band-lime: #CBF03A; /* 0 … +4 s */ --band-orange: #FF8A1F; /* −3 … 0 s */ --band-red: #FF5580; /* −3 s and faster */ /* A fixed watt or pace with NO 5 km best to measure it against. Adapts, because its job is to recede rather than to be compared — a pale #C9CFD8 on a dark row would be the brightest bar on the screen. Two greys, never drawn alike: --band-grey says "this is easy", this one says "we have nothing to measure this against". Keeping them far apart in lightness is load-bearing. */ --band-unplaceable: #C9CFD8; /* The INK of the 45° hatch that means *nothing was written here*, not a fill. A rest asks for nothing; a work step with no target is the grey above. Two marks, two meanings. */ --band-hatch: #78849A; /* The trough a bar sits in on a list row. Present in both themes — it is what makes the bar read as a bar — but DROPPED on a live surface, where the ground is already near-black. A per-surface decision, not a per-theme one. */ --bar-channel: #12171E; --bar-lit-highlight: rgba(255,255,255,0.42); --bar-marker: #FFFFFF; /* Without the ring the marker vanishes on lime. */ --bar-marker-ring: rgba(10,12,16,0.9); /* --- Bar geometry ---------------------------------------------- W1 `AppTheme.Bar`, value for value. One size everywhere: the design draws the workouts list, the builder's preview and the live timeline all at 14 px. */ --bar-h: 14px; --bar-inset: 2px; /* the channel only */ --bar-gap: 1px; --bar-gap-live: 1.5px; --bar-seg-r: 2px; --bar-channel-r: 4px; --bar-highlight-h: 1px; --bar-marker-overhang: 3px; /* The repeating-linear-gradient stops, measured perpendicular as CSS measures them: 2 px of ink every 5 px. */ --bar-hatch-stripe: 2px; --bar-hatch-period: 5px; /* iOS has `Bar.minimumSegment = 1`; the web had no floor at all, so a very short step could vanish. W3 applies this as a min-width. */ --bar-min-seg: 1px; /* --- The ramp's marker ------------------------------------------ P0 `RampMarker` — the pin on the intensity ramp, one shape at two weights on the three surfaces that mark a position on the SAME scale (two shapes would imply two scales). iOS mirror: Rail.pinWidth / .pinHeight / .pinRing. */ --rail-pin-w: 5px; --rail-pin-h: 26px; /* The TARGET's mark on the same rail: thinner and shorter than the pin — iOS writes it inline in `IntensityRampView` and only Android has named it, so there is no Swift `static let` to pair with (the same reason `--rail-pin-ring` is absent from the gate). */ --rail-notch-w: 3px; --rail-notch-h: 20px; --rail-pin-ring: 1px; /* --- Washes ----------------------------------------------------- R9 → W1 YOUR row on a board or a series table. Lime, not accent: the ramp already marks you on the live screen, and lime is the colour of holding your own 5 km pace. 16 % rather than the accent's 10 % because lime is a pale hue and a tenth of it is not a row you can pick out at a glance. */ --me-wash: color-mix(in srgb, var(--band-lime) 16%, transparent); /* Behind a row you PICKED — the two reps a head-to-head is about. Accent at 9 %, which is `AppTheme.Palette.accent.opacity(0.09)` on the phone: a wash, not a fill, because the row is still to be read. */ --pick-wash: color-mix(in srgb, var(--accent) 9%, transparent); /* Behind a marked FACT — the PB badge. Heavier than a value chip's wash because a fact is read, not tapped: a chip has a caret to say what it is and a badge has only its fill. */ --fact-wash: color-mix(in srgb, var(--text) 10%, transparent); /* A section band's caps title. The design's `.sect` is .06em at 12.5px. */ --band-tracking: 0.75px; /* The column head's tracking, and NOT `--band-tracking` above it: that one is 0.75 px chosen for a 12.5 px section label, and tracking is a ratio to the size it is set at — the same absolute value at 10 px reads as a wider gap than it does at 12.5. The drawing states this one in ems for exactly that reason (`gen.py`: `.tr.hd{letter-spacing:.14em}`). */ --band-head-tracking: 0.14em; /* The gap between a cell's two LINES — not between two elements, which is what the spacing scale measures, and a step the scale does not have (its neighbours are 2 and 4). iOS tightens a stacked pair with a negative `Spacing.stackedLines` instead, so there is nothing to pair it with. */ --cell-line-gap: 3px; /* The segmented switch's own two numbers — 4 px of padding round a 32 px pill, so the box is 42 and the chosen cell floats with air on all four sides. **From iOS, not from the drawing** — `Control.segInset` / `Control.segPillHeight` are the pairing partners, and `gen.py`'s cell is 30 (a 40 px box). 2 px, and iOS is who this has to agree with. */ --seg-inset: 4px; --seg-pill-h: 32px; /* The plan's leading gutter — iOS `Control.planGutter`. 44, not 22: 22 fits the count alone, 44 also fits the group's own total, which is the one thing the deleted header row was for. The gutter is dead space on every row but a group's first, so the second 22 costs nothing that was in use. The bracket rail it replaced (`--plan-bracket-w`) is gone: a bracket indents what it contains, so the label column stepped in and out down a dense workout. iOS keeps its rail in the BUILDER, which the web has not got. */ /* **The shell's own gutter** — the distance between the page and its rail, and between the page and the window. `gen.py`'s `padding:30px 40px 40px 40px`. It was a literal in `.container`, in `.sitefoot` and (as `--sp-6`'s 32) in the workout page's two columns, which is three answers to one question; 4.4 named it. No iOS twin: the phone has no rail. */ --shell-gutter: 40px; --plan-gutter: 44px; /* The count slab — iOS `Control.slabRadius` / `.slabCountMinWidth` / `.slabCountHeight`. The width IS the gutter's, because the slab is what the rail hangs from rather than a tag beside it. */ --slab-radius: 7px; --slab-count-min-w: 44px; --slab-count-h: 26px; /* The builder's repeat mark — the web half of the 2026-08-20 iOS redesign ("Marking a Repeat", aligned variant). The spine and its cap reuse the bracket's own geometry; the bar wash is a step darker than a section band so a group's head reads as INSIDE the Intervals section, not as a second one. Pairs: --builder-bar-wash ↔ Control.groupBarWash (7 % ink — whose "no web counterpart" comment predates this file catching up), --builder-spine-w ↔ Control.bracketWidth, --builder-spine-dot ↔ Control.bracketDot. */ --builder-bar-wash: color-mix(in srgb, var(--text) 7%, var(--card)); --builder-spine-w: 2px; --builder-spine-dot: 9px; /* The fold-open step's ground — barely off the card, "open" without a card. iOS's open step wash, same reading. */ --builder-open-wash: color-mix(in srgb, var(--text) 2%, var(--card)); /* The wash a repeat's rows sit on — iOS `Control.planGroupWash`. */ --plan-group-wash: color-mix(in srgb, var(--text) 3.5%, transparent); } /* Dark tokens. Two routes in: the OS prefers dark (unless the user forced light via the Settings → Appearance cookie, rendered as html[data-theme]), or the user forced dark. CSS can't share a block across a media query and a plain selector, so the token set is duplicated — KEEP THE TWO IN SYNC. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { /* Makes the browser draw its OWN widgets dark too — without it the date and time inputs get a black calendar glyph on the dark field (measured 1.19:1) and a white picker panel over the dark page. */ color-scheme: dark; --bg: #09070F; --card: rgba(255, 255, 255, 0.035); --text: #F3F6FF; --muted: rgba(243, 246, 255, 0.60); --ink-faint: rgba(243, 246, 255, 0.42); --accent: #B07CFF; --avatar-wash: rgba(176, 124, 255, 0.25); --go-glow: 0 6px 14px rgba(47, 207, 120, 0.18); --danger-fill: rgba(255, 77, 109, 0.12); --danger-border: rgba(255, 77, 109, 0.3); /* Semantic colors brightened for dark backgrounds (parallel to --accent; these match the hexes already used by .notice/.lap-kind-pill in dark). */ --success: #4ade80; --work: #fbbf24; --rest: #22D3EE; --error: #f87171; --warning: #fbbf24; --diff-good: #6BE680; --diff-bad: #FF7A6E; --border: rgba(255, 255, 255, 0.09); /* The surface lift is LIGHT ONLY — dark separates a surface by making it lighter than the ground, not by dropping a shadow behind it. It carried the CARD's `0 20px 50px` here, which `.stat` (a tile) and `.rep-list` (a dropdown) then wore. */ --shadow: none; --shadow-hover: none; --shadow-card: 0 20px 50px rgba(0, 0, 0, 0.45); --surface: rgba(255, 255, 255, 0.035); --surface-raised: rgba(255, 255, 255, 0.06); --surface-opaque: color-mix(in srgb, #FFFFFF 3.5%, var(--bg)); --card-border: rgba(255, 255, 255, 0.12); --hairline: rgba(255, 255, 255, 0.06); --track: rgba(255, 255, 255, 0.08); --go: #2FCF78; --go-deep: #1FB866; --on-go: #FFFFFF; --danger: #FF4D6D; --ground-washes: radial-gradient(1000px 560px at 78% 8%, rgba(176, 124, 255, 0.13), transparent 60%), radial-gradient(700px 500px at 8% 40%, rgba(34, 211, 238, 0.09), transparent 60%), radial-gradient(900px 600px at 70% 95%, rgba(176, 124, 255, 0.07), transparent 60%); /* The only two ramp tokens that adapt — see the note in :root. The unplaceable grey has a FLOOR here: it is drawn inside --bar-channel, and too close to it the bar reads as an empty channel ("we did not draw this") rather than as "we cannot place this". */ --band-unplaceable: #4A5462; --bar-channel: #1E242C; /* A HEART RATE, in the material's own red. */ --heart: #FF5A6E; --h2h-heart: var(--heart); } } :root[data-theme="dark"] { color-scheme: dark; /* see the note in the media-query block above */ --bg: #09070F; --card: rgba(255, 255, 255, 0.035); --text: #F3F6FF; --muted: rgba(243, 246, 255, 0.60); --ink-faint: rgba(243, 246, 255, 0.42); --accent: #B07CFF; --avatar-wash: rgba(176, 124, 255, 0.25); --go-glow: 0 6px 14px rgba(47, 207, 120, 0.18); --danger-fill: rgba(255, 77, 109, 0.12); --danger-border: rgba(255, 77, 109, 0.3); /* Semantic colors brightened for dark backgrounds (parallel to --accent; these match the hexes already used by .notice/.lap-kind-pill in dark). */ --success: #4ade80; --work: #fbbf24; --rest: #22D3EE; --error: #f87171; --warning: #fbbf24; --diff-good: #6BE680; --diff-bad: #FF7A6E; --border: rgba(255, 255, 255, 0.09); /* The surface lift is LIGHT ONLY — dark separates a surface by making it lighter than the ground, not by dropping a shadow behind it. It carried the CARD's `0 20px 50px` here, which `.stat` (a tile) and `.rep-list` (a dropdown) then wore. */ --shadow: none; --shadow-hover: none; --shadow-card: 0 20px 50px rgba(0, 0, 0, 0.45); --surface: rgba(255, 255, 255, 0.035); --surface-raised: rgba(255, 255, 255, 0.06); --surface-opaque: color-mix(in srgb, #FFFFFF 3.5%, var(--bg)); --card-border: rgba(255, 255, 255, 0.12); --hairline: rgba(255, 255, 255, 0.06); --track: rgba(255, 255, 255, 0.08); --go: #2FCF78; --go-deep: #1FB866; --on-go: #FFFFFF; --danger: #FF4D6D; --ground-washes: radial-gradient(1000px 560px at 78% 8%, rgba(176, 124, 255, 0.13), transparent 60%), radial-gradient(700px 500px at 8% 40%, rgba(34, 211, 238, 0.09), transparent 60%), radial-gradient(900px 600px at 70% 95%, rgba(176, 124, 255, 0.07), transparent 60%); /* The only two ramp tokens that adapt — see the note in :root. The unplaceable grey has a FLOOR here: it is drawn inside --bar-channel, and too close to it the bar reads as an empty channel ("we did not draw this") rather than as "we cannot place this". */ --band-unplaceable: #4A5462; --bar-channel: #1E242C; /* A HEART RATE, in the material's own red. */ --heart: #FF5A6E; --h2h-heart: var(--heart); } /* The interval bar ------------------------------------------------ W3 Geometry entirely from W1's tokens; colour entirely from W2's bands. **No dark channel behind it** (Martin, 2026-09-29, iOS b91eac73 — the web followed on 2026-09-30): the segments sit on the page's own ground. The channel stays a token and an opt-in (`.channel`) because the share card keeps it on the phones (`SessionSummaryCard`); the web's card draws its own bars and never used `.ibar`. */ .ibar { display: flex; gap: var(--bar-gap); height: var(--bar-h); padding: 0; border-radius: var(--bar-channel-r); background: none; overflow: hidden; } .ibar.channel { padding: var(--bar-inset); background: var(--bar-channel); } .ibar.live { gap: var(--bar-gap-live); padding: 0; background: none; } .ibar-seg { border-radius: var(--bar-seg-r); /* THE FLOOR. Without it a 10 s rest beside a 4:00 work rounds to zero pixels and the bar draws a workout that is not the one you have. It shrinks before the bar does — a 50-interval workout's minimums can ask for more room than the row has, and the bar must not run off the end. */ min-width: var(--bar-min-seg); flex-grow: 0; flex-shrink: 1; position: relative; } /* The 1 px top highlight that makes a lit segment read as raised. */ .ibar-seg::after { content: ""; position: absolute; inset: 0 0 auto 0; height: var(--bar-highlight-h); background: var(--bar-lit-highlight); border-radius: inherit; } .ibar-seg.band-grey { background: var(--band-grey); } .ibar-seg.band-blue { background: var(--band-blue); } .ibar-seg.band-green { background: var(--band-green); } .ibar-seg.band-lime { background: var(--band-lime); } .ibar-seg.band-orange { background: var(--band-orange); } .ibar-seg.band-red { background: var(--band-red); } .ibar-seg.band-unplaceable { background: var(--band-unplaceable); } /* Hatched is a TEXTURE, not a fill: nothing was written here. The stops are measured perpendicular, as CSS measures them — which is what --bar-hatch- stripe/period are in. No highlight: it is not a lit segment. */ .ibar-seg.band-hatched { background: repeating-linear-gradient( 45deg, var(--band-hatch) 0 var(--bar-hatch-stripe), transparent var(--bar-hatch-stripe) var(--bar-hatch-period)); } .ibar-seg.band-hatched::after { display: none; } /* The bar's time axis — iOS `BarTimeScale`. `caption2`, secondary, tabular, spread under the bar it labels. */ .bar-scale { display: flex; justify-content: space-between; gap: var(--sp-1); margin-top: var(--sp-1); font-size: var(--text-2xs); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; } /* The midpoint is the first thing to go: unlike the ends it carries no number you cannot work out from them, and three five-digit labels do not fit a card at 320 px. iOS drops it past the stacked-layout threshold for the same reason. */ @media (max-width: 360px) { .bar-scale-mid { display: none; } } /* The intensity ramp — iOS `IntensityRampView`. The six placeable bands laid flat at the bar's own height, gap and rounding, so the scale and the bars drawn against it are visibly the same object. */ /* The strip is clipped and the PIN is not: the marker stands 2 px proud of the ramp at each end, the way the bar's own marker overhangs its channel. One box cannot do both, so the bands get their own. */ .ramp { position: relative; padding-block: var(--bar-marker-overhang); } /* **Six pills, not one bar cut into six.** The drawing's ramp is separate segments with their own rounding (`ramp_bar`: `border-radius:3px`, `gap:3px`) — the same anatomy the interval bar has — and this drew one rounded channel with hairline cuts in it, so the ends were round and the four inner boundaries were square. */ .ramp-bands { display: flex; gap: var(--bar-gap); height: var(--bar-h); } .ramp-cell { flex: 1 1 0; min-width: 0; border-radius: var(--bar-seg-r); } .ramp-cell.band-grey { background: var(--band-grey); } .ramp-cell.band-blue { background: var(--band-blue); } .ramp-cell.band-green { background: var(--band-green); } .ramp-cell.band-lime { background: var(--band-lime); } .ramp-cell.band-orange { background: var(--band-orange); } .ramp-cell.band-red { background: var(--band-red); } /* Without the ring the marker vanishes on lime. CLAMPED to the strip rather than merely centred on the fraction: centred, half the pin hung outside at 0 and at 1, where the clip sliced it flat — off the scale it marks AND a different shape from itself. */ /* **The TARGET's mark** — narrower and shorter than the pin, and BEHIND it, because where you landed is the answer and what was asked for is the question. Same clamp as the pin: half of it hangs outside the strip at 0 and at 1 otherwise. **It carries the pin's RING.** The first version was 55 % of `--bar-marker` with no ring, which is a rule the dark theme hides: `--bar-marker` is `#FFFFFF` in BOTH themes and the pin survives a white card only because of its ring, so the notch came out white-on-white in light and the panel lost one of its two marks. Three signals separate them instead, and all three hold on either ground — 3 px against 5, 20 against 26, and behind rather than in front. */ .ramp-notch { position: absolute; top: 50%; left: clamp(calc(var(--rail-notch-w) / 2), var(--at, 50%), calc(100% - var(--rail-notch-w) / 2)); translate: -50% -50%; width: var(--rail-notch-w); height: var(--rail-notch-h); border-radius: var(--r-pill); background: var(--bar-marker); box-shadow: 0 0 0 var(--rail-pin-ring) var(--bar-marker-ring); } .ramp-pin { position: absolute; top: 50%; z-index: 1; left: clamp(calc(var(--rail-pin-w) / 2), var(--at, 50%), calc(100% - var(--rail-pin-w) / 2)); translate: -50% -50%; width: var(--rail-pin-w); height: var(--rail-pin-h); border-radius: var(--r-pill); background: var(--bar-marker); box-shadow: 0 0 0 var(--rail-pin-ring) var(--bar-marker-ring); } /* The plan ------------------------------------------- W4, REDRAWN by P1, the MARK redrawn again 2026-09-08 One drawing, on both platforms — iOS `WorkoutPlanTable` + `RepeatBracket`. A repeat is a TINT and a GUTTER since 2026-08-15: no indent, no header row, so the label column runs dead straight from a workout's first step to its last. That much this file had. What it did not have is the MARK, which came back on 2026-08-17 in the shape Martin drew and this side never followed: **a small ink slab carrying the count, a rail hanging from it down the rows it covers, and a dot closing it on the last one.** A wash says where a group IS and cannot say where it ENDS, and where it ends is the whole of what a repeat means; a bare bold `3×` in a margin says neither. It lives in the gutter, so it still indents nothing. **The group's total is not here**, on Martin's instruction (iOS, 2026-08-17): it was the second line of a two-line mark and made the gutter a paragraph in a margin. The estimate beside the workout's name already answers the cost. **Full-bleed, and squared off.** The tint and the hairlines are as wide as the rows are, and a row on these pages is as wide as its sheet. Inset and rounded, the tint floated with a margin either side while every hairline ran past it — Martin ringed both edges. `--plan-bleed` is how far the paint escapes the host's own gutter; `--sp-4` covers `.sect-body` and `.fold-panel`, and a host that insets by something else says so (iOS passes the same measure as `washBleed`). */ .plan { display: flex; flex-direction: column; margin-inline: calc(-1 * var(--plan-bleed, var(--sp-4))); } .plan-group { display: flex; flex-direction: column; position: relative; } /* The wash. No radius and no inset — see the note above. */ .plan-group.bracketed { background: var(--plan-group-wash); } /* A group that follows a group gets a gap of ground — iOS draws the same 2 px. "The repeat's tint is full-bleed and its bottom edge IS the boundary" holds against the page and fails against another group's identical tint: two adjacent repeats merge into one slab whose internal hairlines are indistinguishable from the one where they meet. */ .plan-group.bracketed + .plan-group.bracketed { margin-top: var(--sp-1r); } /* A hairline BETWEEN rows — not above the first one. It used to be above every row, on the reasoning that a first row with no rule floats. It does not: the table's first row sits directly under a section band or a bar, which already closes it, and the extra rule read as a second edge a few pixels below the band's own (Martin, 2026-08-17: "a border above the first warm-up row"). And there is NO rule under the last repeat either (2026-08-19: "a border on last row look strange") — the tint's bottom edge IS the boundary, and an inset hairline hanging under a full-bleed tint was a short line floating across a page of edge-to-edge shapes. */ .plan-row { display: flex; align-items: baseline; gap: var(--sp-2); padding: var(--sp-2) var(--plan-bleed, var(--sp-4)); /* A HAIRLINE, like every other divider between two rows (3.1). The drawing's plan rows are `border-top:1px solid HAIR` — 6 % in both themes, against the 9 % (dark) / 11 % (light) a container's own edge gets — and here it matters twice over: these rules run under a full-bleed TINT, and at 9 % a repeat's rows read as a grid drawn on the wash rather than as rows sharing it. */ border-top: 1px solid var(--hairline); /* 15, not 14 — iOS's `.subheadline`, which is what the row is. */ font-size: var(--text-base); font-variant-numeric: tabular-nums; } /* **It missed every plan that OPENS WITH A REPEAT.** The mark is the group's first element child, so `.plan-row:first-child` cannot match there, and the first row drew the very rule the paragraph above says it must not — "a border above the first warm-up row" (Martin, 2026-08-17). A plan that opens with a warm-up was always fine, because an unbracketed group has no mark; 3.5 first recorded this as "zero hits", which was true only of the eleven fixture workouts, all of which open with a repeat. CSS cannot say "a row with no row before it", so both shapes a first row can take are named: straight after the mark, or first in a group without one. */ .plan > .plan-group:first-child > .plan-row:first-child, .plan > .plan-group:first-child > .plan-mark + .plan-row { border-top: 0; } /* The gutter is on EVERY row and EMPTY on all of them — that is what keeps the label column straight whether or not a block repeats. The mark is drawn over it by the group, as ONE shape: a rail assembled per row cannot meet itself across a row's own padding ("the lines doesn't fit together"). */ .plan-gutter { flex: none; width: var(--plan-gutter); } /* The mark: slab, rail, dot, in that order down a centred column — so the rail hangs from the middle of the count whatever the count is wide. LEADING-aligned in the 44 px gutter, not centred: centred put the slab about 22 px in and the row had far more air on the left than the right. `bottom` is the LAST REPEATED ROW'S CENTRE, and `--plan-rows` is how the group says where that is: with N rows of equal height, half a row is `50 % / N` of the group. Equal heights is the same assumption iOS's anchor makes and the reason its target column is clamped to one line. The dot's CENTRE goes on that row's centre, so it is pulled down by its own radius — a shape's frame is its extent, not its centreline, and iOS hung it 3.5 pt high the first time for exactly this reason. */ .plan-mark { position: absolute; z-index: 1; pointer-events: none; top: var(--sp-1); left: var(--plan-bleed, var(--sp-4)); bottom: calc(50% / var(--plan-rows, 1)); display: flex; flex-direction: column; align-items: center; } .plan-mark::before { content: ""; order: 2; flex: 1 0 var(--builder-spine-dot); width: var(--builder-spine-w); background: var(--text); } .plan-mark::after { content: ""; order: 3; flex: none; width: var(--builder-spine-dot); height: var(--builder-spine-dot); margin-bottom: calc(-0.5 * var(--builder-spine-dot)); border-radius: 50%; background: var(--text); } /* `N×` in a slab — the app's one way of putting a structural COUNT on ink, and it has exactly two callers on each platform: the plan's gutter mark and the builder's group bar. iOS `BandSlab.count`. They were two drawings of one badge here (a bare bold 12 px in the plan, 12 px/800 on a 1.5/6 inset and a literal 6 px radius in the builder), which is the drift `BandSlab` was created to close on the other side. */ .plan-count, .grp-badge { order: 1; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--text); color: var(--on-ink); font-size: var(--text-2xs); font-weight: var(--weight-heavy); line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; /* **A SLAB THE RAIL HANGS FROM, not a tag.** It was 1/4 on `--r-inner` and sized to its own text — 20 × 15 against iOS's 44 × 26 — and `BandSlab`'s own doc-comment names that exact state as the one it was written to fix: "it was 4/1 and `Radius.inner`, which made the count read as a tag rather than as a slab the rail hangs from". The web still had the tag. Framed to the gutter (`--slab-count-min-w` = `--plan-gutter`), which also retires the rule invented to compensate for it: the note above about leading-alignment because "centred put the slab about 22 px in" does not arise once the slab IS the gutter's width. Radius 7, deliberately not `--r-inner`'s 6. The two insets were declared and unused. */ min-width: var(--slab-count-min-w); min-height: var(--slab-count-h); padding: var(--chip-inset-v-tall) var(--chip-inset-h); border-radius: var(--slab-radius); } /* A rest asks for nothing and holds nothing; greying it is what lets work and rest be told apart down a column at a glance, without a second colour. **The LABEL, not the row.** `opacity` on the row takes its BORDER with it, so the rule above every rest came out at 62 % of the hairline — 3.7 % where its neighbours are 6 %, effectively gone at 1× while theirs are not. 3.5's own 9 % → 6 % made that worse, which is how it was caught. iOS ruled this already (`WorkoutPlanTable`: "A rest mutes its LABEL, not its row. The whole row used to carry `restRowOpacity`, which dimmed the numbers too"), and the drawing greys the word while giving every row a full `HAIR`. The amount and the target are `--muted` in their own right and must not be dimmed twice. */ .plan-row.rest .plan-what { opacity: var(--plan-row-rest-opacity); } .plan-link { display: contents; color: inherit; text-decoration: none; } /* A hover LIFTS. It read `--bg`, which is the opaque ground UNDER the washes, so on a dark screen the highlight came out ~Δ(21,17,26) DARKER than the row it was highlighting — `.sect`'s hole in miniature, pointing the wrong way. */ .plan-row:has(.plan-link):hover { background: var(--surface-raised); } /* The band chip's own geometry — `--chip-w` × `--bar-h`, hung `--chip-hang` below the baseline, exactly as `BandChip` draws it. It was a 4 px stripe stretched to the row's full height, which reads as a rule down the column rather than as a mark on the ramp. `position: relative` for the hang so the row's own baseline is untouched. */ .plan-chip { flex: none; align-self: baseline; position: relative; top: var(--chip-hang); width: var(--chip-w); height: var(--bar-h); border-radius: var(--bar-seg-r); } /* nowrap: "Warm-up" and "Cool-down" broke at their hyphens on a phone. */ .plan-what { font-weight: var(--weight-semibold); flex: 1; white-space: nowrap; } @media (max-width: 30rem) { /* **The amounts in one column** (2026-09-24): with the label taking the slack, each amount sat wherever its target's width left it — 10:00, 8:00 and 1:30 started at three x positions. On a phone the label is a fixed column and the amount takes the slack, so every amount starts at one x. */ .plan-what { flex: none; width: 5.5em; } .plan-amount { flex: 1; font-variant-numeric: tabular-nums; } .plan-target { min-width: 0; } } /* **The step's own affordance.** The row was a `display: contents` link with nothing to say so — you could click it and nothing on screen told you. The drawing gives every row a 36 px trailing cell with a pencil in it, in the faint ink, and lifts to the reading ink under the cursor. */ .plan-edit { flex: none; width: 36px; display: flex; align-items: center; justify-content: center; align-self: center; color: var(--ink-faint); } .plan-link:hover .plan-edit { color: var(--text); } .plan-amount { color: var(--muted); } .plan-target { color: var(--muted); text-align: right; min-width: 7em; } .plan-footnote { font-size: var(--text-sm); color: var(--muted); margin: var(--sp-2) 0 0; } /* The opener for a plan longer than its cap — iOS `WorkoutPlanTable.rowCap`'s "Show all N intervals" row. A ROW of the table, not a button on top of it: it is the table saying there is more of itself, which is the same grammar the builder's insertion rows use. `list-style: none` on both engines because a disclosure triangle beside a plan reads as a second gutter mark. */ .plan-more > summary { list-style: none; cursor: pointer; min-height: var(--control-h-tap); display: flex; align-items: center; /* CENTRED, with air above and a rule below (Martin, 2026-08-28). Left aligned in the row grammar it read as one more plan row — the one thing it is not. It is the end of the table and the way past it, so it sits on an axis nothing else here uses, and the rule below separates it from the next section with equal air on both sides of the line. */ justify-content: center; text-align: center; padding: var(--sp-4) var(--plan-bleed, var(--sp-4)) 0; color: var(--accent); font-size: var(--text-base); font-weight: 600; } .plan-more > summary::after { content: ""; display: block; } .plan-more:not([open]) { border-bottom: 1px solid var(--border); margin-bottom: var(--sp-4); padding-bottom: var(--sp-4); } /* Every rule and every wash bleeds; the FOOTNOTE does not — it is prose about the table rather than part of it. It sits outside `.plan`, so it keeps the host's gutter with nothing to say about it here. */ .plan-more > summary::-webkit-details-marker { display: none; } .plan-more[open] > summary { display: none; } /* The chip takes the ramp's colours — the same eight the bar uses. */ .plan-chip.band-grey { background: var(--band-grey); } .plan-chip.band-blue { background: var(--band-blue); } .plan-chip.band-green { background: var(--band-green); } .plan-chip.band-lime { background: var(--band-lime); } .plan-chip.band-orange { background: var(--band-orange); } .plan-chip.band-red { background: var(--band-red); } .plan-chip.band-unplaceable { background: var(--band-unplaceable); } .plan-chip.band-hatched { background: repeating-linear-gradient( 45deg, var(--band-hatch) 0 var(--bar-hatch-stripe), transparent var(--bar-hatch-stripe) var(--bar-hatch-period)); } /* Section bands & the attempts table -------------------------------- W6 §7 rebuilt a workout's page as hairline rows on white with grey bands doing the separating that a stack of card edges was doing. **The grey is gone** (2026-09-11): a filled band punches a hole in the material's washes, so what separates now is the tracked caps and the air around them. */ .sect { display: flex; align-items: center; gap: var(--sp-2); font-size: 12.5px; font-weight: 750; letter-spacing: var(--band-tracking); text-transform: uppercase; color: var(--muted); padding: var(--sp-35) var(--sp-4) var(--sp-2); /* **No fill.** It was `var(--bg)`, which worked while the ground was a flat colour and broke the day the ground grew washes (2026-09-11): `--bg` is the opaque near-black UNDER the washes, so every caps band punched a dark rectangle through the light — a hard vertical edge of ΔRGB (19,13,27) down the side of the list, on every dark screen. Worse, a `--bg` band directly above a `--card` band sent the two section markers in opposite directions from the same ground. The drawing gives `.sect` no fill at all (`gen.py`'s `.sect` rule is padding and layout only); the tracked caps and the air around them are what makes it a band. */ background: none; } /* The trailing fact is the band's own voice, not a second one: regular weight, the SAME ink as the title (iOS `SectionBand`: `.caption`, `titleInk ?? textSecondary`). It was 600 on a lightened grey, which read as a value being announced rather than as the band counting what is under it. */ .sect-n { margin-left: auto; font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; } /* One grid for the WHOLE table, rows on a subgrid: every row — the head included — shares the same resolved tracks. Each .at-row used to be its own grid, so `1fr` and `auto` resolved per row: the head's visually-hidden Marks header made ITS last track zero wide and pushed the four numeric headers right of the numbers they name (Martin's screenshot, 2026-08-21) — and a PB row's wider marks cell mis-set its row the same way. FIVE tracks, and the DATE takes the slack. There was a sixth, trailing, holding the PB badge and the version chip — and a trailing track absorbs every point of slack, so one attempt with no PB left its `v1` marooned against the right edge with an inch of white in front of it. The marks are not a measurement: they qualify WHICH attempt this is, which is what the date says, so they ride with it and the numbers reach the right edge (iOS `AttemptsTableView`, 2026-08-17). */ .attempts-table { display: grid; grid-template-columns: minmax(4.5em, 1fr) auto auto auto auto; } /* The SESSION page's two variants (2026-09-08). `compact` drops `ø /500` and `ø ♥` — the phone does the same to make room for the delta, and both are one tap away on the workout's own page; `with-delta` adds the `vs this` column. The macro is the same one, so a row cannot be drawn two ways. */ .attempts-table.with-delta { grid-template-columns: minmax(4.5em, 1fr) auto auto auto auto auto; } .attempts-table.compact { grid-template-columns: minmax(4.5em, 1fr) auto auto; } .attempts-table.compact.with-delta { grid-template-columns: minmax(4.5em, 1fr) auto auto auto; } /* The one coloured column on this table — better or worse than the session you are reading. Equal carries no colour: it is an answer, and it is not a win. */ /* `.at-row > ` so this outranks the muted-column rule below, which colours cells by POSITION and would otherwise grey a delta out — the delta's column index moves with `compact`. */ .at-row > .at-delta.good { color: var(--diff-good); } .at-row > .at-delta.bad { color: var(--diff-bad); } /* The row you are standing in. No wash: the tag says it, and a tint under one row of a four-column subgrid stripes at every gap. */ .at-row.reading { font-weight: var(--weight-semibold); } /* Which workout the table under it is about — printed only on a session that held more than one, where the rows above cannot answer it on their own. */ .at-subject { margin: 0; font-weight: var(--weight-semibold); } /* The session page's workout rows sit closer than a list of them does: they are a doorway, not the page's subject. */ .session-workouts { display: flex; flex-direction: column; gap: var(--sp-2); } .at-row { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: baseline; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); border-top: 1px solid var(--border); color: var(--text); text-decoration: none; font-variant-numeric: tabular-nums; font-size: var(--text-sm-plus); } a.at-row:hover { background: var(--surface-raised); text-decoration: none; } /* 10 px, not 12 — iOS `metricLabel`, bold, tracked 0.5. Two pixels bigger, a header is wider than the number under it and the head, not the data, is what sets a content-sized column's width: `SMART ØW` alone took 14 px off the date column, which is where the version chip lives. And a column head names a column, so it never wraps. */ .at-head { border-top: 0; text-transform: uppercase; letter-spacing: .5px; font-size: var(--text-3xs); font-weight: var(--weight-bold); color: var(--muted); white-space: nowrap; } .at-row > :nth-child(n+2) { text-align: right; } .at-row > :first-child { text-align: left; } /* No weight of its own, and no slab. The band said nothing here — every attempt at ONE workout sits in more or less the same power range, so a column of banded results is a colour that barely changes down the page (Martin, 2026-08-27, on the phone). One `rowFont` for every cell. */ .at-result { font-weight: inherit; } /* The date, the PB badge and the version chip, in one leading cell. */ /* **The marks sit UNDER the date, not beside it.** They rode the same line until the date grew its year on 2026-09-08: at a phone's width `18 Aug 2026` plus a `This session` tag plus `v1` had nowhere to go, and the cell wrapped mid-date. The date is what this column is FOR, so it keeps the first line to itself and never wraps. iOS stacks the same two rows. */ .at-when { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-05); min-width: 0; } .at-marks { display: flex; align-items: baseline; gap: var(--sp-1); flex-wrap: wrap; } .at-date { white-space: nowrap; } /* A partial attempt is a fact, not a failure — the same grey as everything else. Red here would collide with the bands, where red means a sprint. */ .at-row > :nth-child(3), .at-row > :nth-child(4), .at-row > :nth-child(5) { color: var(--muted); } /* …but a delta is never one of those, whatever position it lands in. */ .at-row > .at-delta { color: var(--text); } /* The structure diff — what was different about the workout the day you rowed it. The only thing that explains why two attempts at "the same" workout are not comparable, so it stays, UNDER its row rather than beside it. */ /* `text-align: left` explicitly: it spans every column, and the rule above right-aligns everything after the first — which put the diff hard against the marks column instead of under the date it belongs to. */ /* `.at-row > .at-struct`, not `.at-struct`: the nth-child rule above that right-aligns every column after the first is (0,2,0) and wins against a bare class. Specificity, not order — the first fix looked right in the CSS and changed nothing in the picture. */ .at-row > .at-struct { grid-column: 1 / -1; text-align: left; font-size: var(--text-xs); color: var(--muted); } /* Below the app's one reflow threshold the columns stop being columns: a table squeezed to five truncated numbers is less readable than the cards it replaced, so at those widths it IS rows again. */ @media (max-width: 23rem) { .at-row { grid-template-columns: 1fr auto; row-gap: var(--sp-1); } .at-head { display: none; } .at-row > :nth-child(n+3) { text-align: left; } } /* `.visually-hidden` went with the Marks column on 2026-09-08 — it had exactly one caller, the hidden header over the PB badge and the version chip, and those ride with the date now. A screen-reader-only utility with nothing to hide is a rule waiting to be misapplied; it comes back with its next caller. */ /* A workout's page ---------------------------------------------------- W6 §7: rows on white, grey bands between the sections, no cards. */ .page-sheet { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; margin-top: var(--sp-4); } .wk-head { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); align-items: flex-start; } /* A tag is a chip, not a band. In a flex COLUMN the default `stretch` made it the full width of the page, which reads as a status bar rather than a badge. */ .wk-head > .tag { align-self: flex-start; } .wk-head > .ibar, .wk-head > .wk-title, .wk-head > .wk-meta, .wk-head > .bar-scale { align-self: stretch; } /* The scale belongs TO the bar, not beside it: iOS stacks the two `micro` apart inside one container, and this head's own `--sp-2` gap between children is four times that. The negative half pulls it back to 2 px. */ .wk-head > .bar-scale { margin-top: calc(var(--sp-05) - var(--sp-2)); } /* The name and what it costs, in the pairing the list row uses. Wraps rather than truncating: the name is the one thing you already knew and came to confirm, and a fragment of it confirms nothing. */ .wk-title { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; } .wk-title h1 { font-size: var(--text-xl); font-weight: var(--weight-bold); margin: 0; } .wk-cost { margin-left: auto; color: var(--muted); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; } .wk-meta { margin: 0; font-size: var(--text-sm); color: var(--muted); } /* WHOSE session — the crest and the club's name on a line above the title, which is iOS `ClubWorkoutView.headerSection`'s first row. You arrive here from a list of several clubs' workouts, and which of them set this one is the first question. */ .wk-club { display: flex; align-items: center; gap: var(--sp-2); align-self: stretch; } .wk-club-name { font-size: var(--text-base); font-weight: var(--weight-semibold); } /* The window, with its clock glyph, under Before you start. */ .wk-window { display: flex; align-items: center; gap: var(--sp-15); margin: var(--sp-3) 0 0; } /* The scoring clause ends the line, in ink. */ .wk-meta strong { color: var(--text); font-weight: var(--weight-semibold); } .sect-body { padding: var(--sp-2) var(--sp-4) var(--sp-35); } /* The head's tag row — the phone's `HStack(spacing: .sm)` under the meta line. `.wk-head` is a flex COLUMN, so without this the tags stacked one per line and each one stretched, which reads as a status bar rather than a pair of badges. */ .wk-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); } /* "Available until Thu 13 Aug" — the muted clock line a workout outside its window prints under the plan, in place of the START it cannot lend (iOS `OfficialWorkoutView`'s `Label(…, systemImage: "clock")`). */ .wk-when { display: flex; align-items: center; gap: var(--sp-2); margin: 0; font-size: var(--text-sm-plus); color: var(--muted); } /* The signed-out nudge — value first, then a secondary button. iOS `SignInPrompt`, whose spacing is `Spacing.xs` between the two. */ .signin-prompt { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); } .signin-prompt p { margin: 0; font-size: var(--text-sm-plus); } /* "Already in your workouts" — what stands where the Add button was once the copy exists. A statement, not a disabled control: the phone swaps the button for this label rather than greying it (`SharedWorkoutSheet`). */ .claimed { display: flex; align-items: center; gap: var(--sp-2); margin: 0; font-size: var(--text-sm-plus); font-weight: var(--weight-semibold); } .wk-whose { margin: 0 0 var(--sp-1); font-size: var(--text-sm); } /* **A workout's description** (2026-09-29) — the writer's own plain text, under the bar and above the plan. iOS `WorkoutDescriptionText`: body size, secondary ink, wrapped, the writer's line breaks kept (`pre-line`) and nothing else interpreted. */ /* **A thin line under it, even space around it** (Martin, 2026-09-29) — everywhere it is shown, as on the phones: room above the words, the same room down to an ordinary hairline, and the plan below. */ .wk-desc { margin: var(--sp-2) 0 0; align-self: stretch; font-size: var(--text-base); line-height: 1.45; color: var(--muted); white-space: pre-line; overflow-wrap: anywhere; padding-bottom: var(--sp-4); border-bottom: 1px solid var(--border); } /* On the personal page it sits in the main column between the bar's scale and the plan's band: the same space above as down to its line. */ .wk-main > .wk-desc { margin: var(--sp-4) 0 var(--sp-4); } /* Inset from the band's edge like every other row (2026-09-24: the icons sat flush on the card's edge). */ .wk-actions { display: flex; flex-direction: column; padding-inline: var(--band-gutter, 20px); } /* One action per row, full width — three equal buttons truncated "Duplicate" to "Duplica…" and had no room for the actions beside them. */ .wk-action { display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: var(--control-h); padding: var(--sp-2) 0; border: 0; border-top: 1px solid var(--border); background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; text-decoration: none; } .wk-action:hover { text-decoration: none; color: var(--text); } .wk-actions > :first-child .wk-action, .wk-actions > .wk-action:first-child { border-top: 0; } /* The one chevron, on the one row that goes anywhere. */ .wk-go { margin-left: auto; width: .5em; height: .5em; border: 0 solid var(--muted); border-width: 1.5px 1.5px 0 0; rotate: 45deg; } .wk-action-form { display: block; } /* The chip sits beside a name, not against it. */ .cell-chip { display: flex; align-items: baseline; gap: var(--sp-2); } .leader-row .band-chip { margin-right: 0; } /* Band chip — W7. The same eight the bar and the plan use, and the same geometry `BandChip` draws: `--chip-w` wide, `--bar-h` tall, `--bar-seg-r` rounded, hung `--chip-hang` below the baseline. It was 4 px on a 1.1 em height here and 5 pt on 14 over there — one component, two sizes, and no token to compare them with. */ .band-chip { display: inline-block; flex: none; width: var(--chip-w); height: var(--bar-h); border-radius: var(--bar-seg-r); vertical-align: calc(-1 * var(--chip-hang)); } /* **The two-line row's chip is the bar form.** Not a modifier class: the condition is the CELL it stands beside, and a class would have to be remembered at every call site — the same argument `.tr:has(.cell2-b)` makes one section down. (4.1.) */ .log-name .band-chip { width: var(--log-chip-w); height: var(--log-chip-h); border-radius: var(--chip-tall-r); vertical-align: baseline; } /* Hatched is a TEXTURE — *nothing was written here* — and this chip had no rule for it at all, so a hatched band drew an empty box. The stops are the bar's, measured perpendicular as CSS measures them. */ .band-chip.band-hatched { background: repeating-linear-gradient( 45deg, var(--band-hatch) 0 var(--bar-hatch-stripe), transparent var(--bar-hatch-stripe) var(--bar-hatch-period)); } .band-chip.band-grey { background: var(--band-grey); } .band-chip.band-blue { background: var(--band-blue); } .band-chip.band-green { background: var(--band-green); } .band-chip.band-lime { background: var(--band-lime); } .band-chip.band-orange { background: var(--band-orange); } .band-chip.band-red { background: var(--band-red); } .band-chip.band-unplaceable { background: var(--band-unplaceable); } /* Club branding ------------------------------------------------- * * A club's own colour and picture. The containment rule, which is the whole * reason this is only three selectors: club colour may say WHOSE, never how * hard or how good. It is allowed on a badge, on a ring and in a club header. * It must never reach the interval bar, a value, a result or the button * ladder — those belong to the intensity ramp, the app's one colour language. * * **The badge is a TINT of the club's colour, not a fill of it** (2026-09-14, * ruling 09 of the next-step questions: the drawing tints it). A solid brand * slab was the loudest object on a row whose loud thing is the ramp; a wash * with an edge in the club's colour still says WHOSE, and the name stays in * ink, so no club's pick can make it unreadable — which is also why the badge * no longer needs `brand.label_ink` (the picture's initials still use it). */ .tag.club { background: color-mix(in srgb, var(--club-colour, var(--text)) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--club-colour, var(--text)) 45%, transparent); color: var(--text); } /* The picture. Circle with a paper ring, which is what keeps it off whatever * it is drawn on — a bare circle on a white card reads as a hole. The soft * sweep is one gradient and no asset; it is deliberately soft, because the * hard highlight is the 2008 app-icon look and it fights a design whose whole * character is flat ink on paper. */ .club-pic { /* `inline-block`, and it is load-bearing: this is a , and width and height do not apply to an inline non-replaced element. Without it the size classes below were ignored and the picture rendered as a ~10 px box — ring, no image (Martin, 2026-08-19: "I uploaded an image but preview doesn't work"). */ display: inline-block; vertical-align: middle; flex: none; position: relative; overflow: hidden; border-radius: 50%; background: var(--card) center/cover no-repeat; box-shadow: 0 0 0 2px var(--surface-opaque), 0 0 0 3.5px var(--club-colour, rgba(21,23,26,.12)); } .club-pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(155deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.08) 38%, rgba(255,255,255,0) 55%); } .club-pic.sm { width: 36px; height: 36px; } .club-pic.md { width: 40px; height: 40px; } .club-pic.lg { width: 56px; height: 56px; } /* No picture: the club's INITIALS in its own colour on a 14 % wash of it — iOS `ClubPicture`'s fallback, which is `InitialsAvatar`. Same disc, same two rings, so a club with no upload still reads as a club instead of as a name with a gap where the others have a crest. The 14 % is `InitialsAvatar`'s own `tint.opacity(0.14)`. */ .club-pic.initials { display: inline-flex; align-items: center; justify-content: center; background-image: none; background-color: color-mix(in srgb, var(--club-colour, var(--text)) 14%, var(--card)); color: var(--club-colour, var(--text)); font-weight: var(--weight-bold); line-height: 1; } .club-pic.sm.initials { font-size: var(--text-md); } .club-pic.md.initials { font-size: var(--text-lg); } .club-pic.lg.initials { font-size: var(--text-xl); } /* A club as a row — iOS `ClubsView.clubRow`. The crest leads, the name and its member count stack beside it, and the role tag sits at the trailing edge. Built on `.member-item` because it is the same anatomy: a picture, a person or a club, and one qualifier. */ .club-item-link { display: flex; align-items: center; gap: var(--sp-3); flex: 1; min-width: 0; color: inherit; text-decoration: none; } /* `.club-item-who` was the two-line cell's first private spelling; the component replaced it (3.2). What is left is the basis it carried — a name with controls beside it must not shrink to min-content. **Scoped to `.member-item`, not `.club-item`.** Only `club_row` adds the second class; the series rows are bare `
  • `, so a `.club-item` scope left them at `flex: 0 1 auto` and their chevron landed mid-row instead of at the trailing edge. The rule the deleted one carried was unscoped, and the replacement has to cover the same rows. */ .member-item .cell2 { flex: 1 1 9rem; } /* The picker's swatch grid — 8 across, and a hex field beside it. */ .sw-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: var(--sp-2); max-width: 420px; } .sw-grid button { aspect-ratio: 1; border: 0; border-radius: var(--r-sm); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(21,23,26,.10); } .sw-grid button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--surface-opaque), 0 0 0 4px var(--text); } /* The value ON its band ----------------------------------------- * * iOS moved the ramp off a 4 px marker at the far left of the row and onto the * number it grades (Martin, 2026-08-17: "move the color code so the avg power * value has this color as a background", then "you can remove the marker to the * left on each row"). This is that, here. * * The ink flips with the band because the ramp's two halves cannot take the * same label — lime and orange are bright, blue and red are dark. Mirrors * AppTheme.Palette.bandLabelInk exactly; change one, change the other. * * `unplaceable` and `hatched` get NO slab: they are the absence of a reading, * and a grey box around a dash reads as a measurement. Same rule as iOS's * `band.isPlaced` guard. */ .band-value { display: inline-block; padding: var(--sp-05) var(--sp-1); border-radius: var(--r-inner); font-variant-numeric: tabular-nums; } .band-value.band-green, .band-value.band-lime, .band-value.band-orange { color: #0a0d12; } .band-value.band-grey, .band-value.band-blue, .band-value.band-red { color: #fff; } .band-value.band-grey { background: var(--band-grey); } .band-value.band-blue { background: var(--band-blue); } .band-value.band-green { background: var(--band-green); } .band-value.band-lime { background: var(--band-lime); } .band-value.band-orange { background: var(--band-orange); } .band-value.band-red { background: var(--band-red); } /* No background, no padding: it must not read as a slab with nothing in it. */ .band-value.band-unplaceable, .band-value.band-hatched { background: none; padding: 0; color: inherit; } .band-chip.band-hatched { background: repeating-linear-gradient( 45deg, var(--band-hatch) 0 var(--bar-hatch-stripe), transparent var(--bar-hatch-stripe) var(--bar-hatch-period)); } /* YOUR row. Lime at 16 %, not the accent: the ramp already marks you on the live screen, and lime is the colour of holding your own 5 km pace. */ .leader-row.me, tr.me, .log-row.me { background: var(--me-wash); } * { box-sizing: border-box; } /* The hidden attribute always wins, even over rules that set display on the element's class (the UA's plain `[hidden]` rule loses that fight). */ [hidden] { display: none !important; } body { margin: 0; font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; font-size: var(--text-base); line-height: 1.5; color: var(--text); background: var(--bg); /* **Tabular figures everywhere.** This is a page of numbers read down a column — a pace, a watt, a split — and proportional digits make the same figure a different width on every row. Set once on the body rather than on the dozen classes that print a number, which is how three of them were missed before. */ font-variant-numeric: tabular-nums; /* macOS renders text noticeably heavier without this — fixes "AI slop" body feel and lets the serif/mono choices we set elsewhere read cleanly. */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* **The dark ground's three washes** — a violet at the top right, a cyan at the left third, a violet at the bottom, each a soft ellipse fading to nothing well before the opposite edge. Read off the canvas's `.site` rule (`docs/mockups/web-next-step/gen.py`), whose sizes are for the 1440 px artboard the boards are drawn at. **Light has none** — "plain neutral #F7F7F8, no tint, no glows" (Martin, 2026-09-10) — so this rule exists only in the two dark blocks. `fixed` rather than scrolling: the drawing is one screenful and a page that scrolls would otherwise carry its own sunrise down with it. iOS mirror: `AppTheme.Ground.washes`, which is the same three lights placed proportionally on a 390 pt artboard. */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) body { background: var(--ground-washes), var(--bg); background-attachment: fixed; } } :root[data-theme="dark"] body { background: var(--ground-washes), var(--bg); background-attachment: fixed; } /* **A form control does not inherit type, and `