/* ----------------------------------------------------------------------------------- ONE PRESENTATION LAYER. Everything this application draws -- the eleven hand-authored displays, their eleven dialogs, the command bar, the wall route, and the pages the Screen's renderer composes from the primitive catalog -- reads from the vocabulary declared in this file and from nothing else. There are three tiers and a page may only ever reach for the next one up: 1. TOKENS (this block and the dark block below). Every colour, radius, control measure, spacing step and type step in the application is named here. A rule elsewhere in this file that writes a colour literal, a bare radius or a bare font-size is a bug, and `visual-system.test.ts` fails on it. 2. PRIMITIVES (`.app-*`, declared once in "The shared primitive vocabulary" below). A surface, a control, a row, a list, a tag, a checkbox, a notice, a scroller, a dialog. Both the hand-authored displays and `view.js`'s renderer compose these. 3. PANE RULES. What is genuinely this pane's own: its layout, its semantics, its one or two deliberate departures. A pane rule may position a primitive, give it a modifier, or zero one of its declarations. It may not restate one. The extension rule, for a new display and for a new registered primitive alike: build it out of tier 2, and if tier 2 has no word for what you need, ADD ONE THERE -- named, commented, and used by at least the two callers that wanted it -- rather than writing a lookalike in tier 3. See ARCHITECTURE.md, "One presentation layer". THE GOLD-AND-BLUE DIRECTION supersedes the mobile visual-polish round's cream/peach/sage palette. It is one wallpaper (a fixed gold-and-teal-on-blue marble, see "THE WALLPAPER" below) behind every pane, with equal cards floating on it -- no per-destination tint, no featured-surface wash, no "which pane am I on" colour cue on the card itself. The one accent is gold, reserved for the thing you press or the thing that is selected; the three ICON INKS (--icon-gold/-blue/-teal) are a separate, cooler family used only to tell one destination's nav icon from another. The token ROLES are unchanged from the round this replaces -- --page, --panel-subtle, --accent and the rest still mean exactly what their own comments below say -- only the hues, and a handful of geometry/type/motion steps the brief widens, moved. :root is the explicit LIGHT preference: the same wallpaper, with light cards and a darker amber accent so both clear contrast on a bright field. The dark block below is THE APPROVED, default appearance -- see "Appearance default + migration" in chat.js and index.html's boot script for how a device actually lands there. Every new or moved value below carries a computed contrast/dE figure in its own comment rather than a link to a script this pass did not need to run. ----------------------------------------------------------------------------------- */ /* DM Sans (body) and Manrope (display/headings), both Open Font License, self-hosted so the app never depends on Google Fonts at runtime. Both files are the Google latin-subset variable fonts (weights 400-500, the only two this design uses -- see --w-* below) and both declare the same unicode-range Google publishes for that subset, so a glyph outside it falls through to the system fallback in --font-body/--font-display instead of showing a tofu box. font-display: swap shows the fallback immediately rather than a blank paint. */ @font-face { font-family: 'DM Sans'; src: url('/fonts/dm-sans-latin.woff2') format('woff2'); font-weight: 400 500; font-style: normal; font-display: swap; 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: 'Manrope'; src: url('/fonts/manrope-latin.woff2') format('woff2'); font-weight: 400 500; font-style: normal; font-display: swap; 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 { color-scheme: light; --font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-display: 'Manrope', var(--font-body); /* THE WALLPAPER. One fixed backdrop behind every pane in both themes -- see .app-wallpaper near the shared primitives below -- a blue marble base with a gold wave entering from the upper right, a teal wave from the lower left, and a blue wave anchoring the bottom. These are the only colour literals for it anywhere in the file: the layer itself reads nothing but these tokens. Ported from the phone-width reference at its own literal geometry (the wallpaper's rule comments carry the position math), unchanged by theme -- a light preference changes the CARDS floating on it, never the wallpaper underneath them. */ --wall-base-radial: #367fba; --wall-grad-1: #235b98; --wall-grad-2: #2c6199; --wall-grad-3: #244b80; --wave-gold-1: #d7ac4d; --wave-gold-2: #c69139; --wave-gold-3: #aa7630; --wave-teal-1: #238da1; --wave-teal-2: #3aa7ac; --wave-teal-3: #27879f; --wave-blue-1: #254a80; --wave-blue-2: #3c65a1; /* The launcher tiles sit on the wallpaper, which is the same in both themes, so their dark bevelled ground and the three ink families drawn on it are too: --icon-tile-2 is the dark theme's own card surface as a literal (not --panel-subtle, which is a pale card here) and the inks are the dark block's values. #e5c47c / #9fc7f0 / #9ed4cc measure 5.2:1 / 5.0:1 / 5.3:1 against #3b4c61, the lighter tile stop. */ --icon-tile-1: #3b4c61; --icon-tile-2: #27313e; /* The tile's gradient ground, shared by the launcher's .app-tile-icon and the dock's .dock-icon (a smaller sibling of the same tile). */ --icon-tile-ground: linear-gradient(145deg, var(--icon-tile-1), var(--icon-tile-2) 80%); --icon-gold: #e5c47c; --icon-blue: #9fc7f0; --icon-teal: #9ed4cc; /* The wallpaper's own overlay (a top-to-bottom darken so text near the edges keeps some legibility margin) and the two waves' inset highlights, exactly the reference's own literals converted from #rrggbbaa to rgb()/alpha. */ --wall-overlay-top: rgb(18 43 71 / 0.08); --wall-overlay-bottom: rgb(22 50 85 / 0.52); --wave-gold-shadow: rgb(255 241 179 / 0.11); --wave-teal-shadow: rgb(185 227 215 / 0.07); /* Text set directly on the wallpaper, not on a card: a page heading (--ink-heading, white) and a quieter caption (this token) both fall short of 4.5:1 against the wallpaper's own lightest patch (--wall-base-radial: 4.28:1 and 3.45:1 respectively) -- the brief's own prescribed fix is the soft text-shadow below, not a brighter colour, since a brighter muted tone would stop reading as quieter than the heading beside it. */ --ink-on-wall-muted: #dce8f4; --text-shadow-on-wall: 0 1px 3px rgb(12 30 55 / 0.45); /* A secondary control set directly on the wallpaper, not on a card -- the reference's own gp-top-button. Both states and both themes: the wallpaper is unconditional (see --page below), so this ground never has to change with --theme. */ --top-button-ground: rgb(255 255 255 / 0.11); --top-button-ground-hover: rgb(255 255 255 / 0.16); /* The Review/Emails switch's own track (.email-review-bar): a darker, bluer translucent ground than --top-button-ground, the reference's own gp-view-switch value, so the switch's selected pill (--panel-subtle) still reads as the lighter, "chosen" surface against it. Unconditional for the same reason --top-button-ground is. */ --switch-track-ground: rgb(15 35 60 / 0.32); /* --page is the flat fallback for wherever the fixed wallpaper layer cannot reach (behind a dialog's own scrim maths, print, a canvas too small to keep it in view) -- --wall-grad-3, literally, the colour the wallpaper itself settles to at its own lower edge, so a fallback never reads as a seam against the real thing. Card headings sit on the wallpaper now, not on --panel-subtle, so they read in --ink-heading (white, both themes) rather than --ink. */ --page: #244b80; --ink-heading: #ffffff; /* The light preference: the SAME wallpaper, with light cards. #f4f6f9 clears 13.9:1 against --ink and 6.4:1 against --muted below (computed with the WCAG relative-luminance formula; see the file history for the script). */ --panel-subtle: #f4f6f9; /* The persistent player bar: a cool blue-grey pulled from the wallpaper's own blue, so the bar reads as a distinct control rather than a near-white slab beside the composer pill. Its edge and the unplayed part of its progress line step a little darker. */ --player-surface: color-mix(in srgb, var(--page) 16%, var(--panel-subtle)); --player-line: color-mix(in srgb, var(--page) 30%, var(--line-strong)); --player-progress-track: color-mix(in srgb, var(--page) 22%, var(--panel-subtle)); /* Sunken and hover both read as one step down from --panel-subtle, same role as always. */ --panel: #e7eaef; --surface-raised: var(--panel-subtle); --surface-high: var(--panel); --ink: #1e2733; --muted: #4f5b6a; --faint: color-mix(in srgb, var(--muted) 68%, var(--panel-subtle)); --line: #dfe3e8; --line-strong: #cbd1d9; /* The one action/selection colour: a darker amber than the dark theme's gold, chosen so it clears 4.5:1 as TEXT on the light card (measured 5.5:1 on #f4f6f9) as well as working as a fill -- white ink on this fill measures 5.9:1. Hover darkens further, toward black, since it is already the darker of the pair (the dark theme's own hover brightens instead, for the same reason its own comment below gives). */ --accent: #8a5a00; --accent-hover: color-mix(in srgb, var(--accent) 85%, black); --on-accent: #ffffff; --accent-soft: color-mix(in srgb, var(--accent) 14%, var(--panel-subtle)); --error: #b42318; --code: #eef1f5; --accent-ink: color-mix(in srgb, var(--accent) 55%, var(--ink)); /* The dock's own current-item ink (see .dock-button[aria-current]): the plain accent reads fine as text on the light card, so this aliases straight to it rather than inventing a second amber for a theme the reference itself never drew. */ --dock-ink-current: var(--ink-heading); /* The dock and the Calendar's Now marker sit on the wallpaper, not on a card, so the light theme's dark amber --accent is invisible on them. The Now marker takes the on-wall white heading ink (4.28:1 on the wallpaper's lightest patch, the same figure and the same text-shadow fix the page headings carry). */ --now-ink: var(--ink-heading); /* THE DESTINATION IDENTITY TOKENS. The gold-and-blue direction gives every destination the SAME accent as everything else -- cards are equal, and there is one accent per region (rule 01) -- so unlike the three-ink family the dark block below uses for its nav icons, every one of these aliases straight to --accent here, and every wash is the plain card surface: no cream/peach/sage tint survives in either theme. */ --accent-meals: var(--accent); --wash-meals: var(--panel-subtle); --accent-grocery: var(--accent); --wash-grocery: var(--panel-subtle); --accent-household: var(--accent); --wash-household: var(--panel-subtle); --accent-podcasts: var(--accent); --wash-podcasts: var(--panel-subtle); --accent-music: var(--accent); --wash-music: var(--panel-subtle); --accent-calendar: var(--accent); --wash-calendar: var(--panel-subtle); --accent-email: var(--accent); --wash-email: var(--panel-subtle); --accent-library: var(--accent); --accent-stocks: var(--accent); --accent-settings: var(--accent); --accent-photos: var(--accent); --accent-outcomes: var(--accent); /* The stock chart panel: a dark trading-chart surface in both themes, unrelated to either theme's own card. Unchanged by this round. */ --chart-surface: #191814; --chart-ink: #8a8578; --chart-line: color-mix(in srgb, var(--chart-ink) 30%, var(--chart-surface)); /* The Library's own type badges, unchanged by this round. */ --library-image-ink: #0a6a70; --library-note-ink: #93221f; --library-link-ink: #4f5348; --library-remove-border: #d9a39d; --shadow-float: 0 -4px 10px rgb(41 38 30 / 0.16); --shadow-sheet: 0 -6px 20px rgb(41 38 30 / 0.16); --scrim: rgb(35 33 26 / 0.34); /* The reference's own card shadow (see .gp-panel in the source mock): a soft drop plus a hairline inner highlight, so a card reads as gently raised off the wallpaper rather than flat-pasted onto it. Colour literals only, no radius/size token involved, so it needs no entry in the radius vocabulary below. */ --shadow-card: 0 5px 14px rgb(20 32 50 / 0.11), inset 0 1px rgb(255 255 255 / 0.04); /* The composer pill's own hairline highlight (see .composer-row): the reference's #ffffff0b, converted to rgb()/alpha the same way the wallpaper's own literals above were. Lighter than --shadow-card's inset alone, and with no drop shadow of its own -- the pill sits inside the command bar's already-elevated surface, not on the wallpaper directly. */ --shadow-inset-highlight: inset 0 1px rgb(255 255 255 / 0.043); /* The launcher tile icon's own three-layer shadow (see .app-tile-icon): two insets that read as a bevel plus a soft drop, the reference's own #b5d6ef40/#101f3355/#14203233 converted the same way. */ --shadow-tile-bevel: inset 0 1px 1px rgb(181 214 239 / 0.25), inset 0 -1px 1px rgb(16 31 51 / 0.33); --shadow-tile-icon: var(--shadow-tile-bevel), 0 6px 12px rgb(20 32 50 / 0.2); /* The dock's smaller tile: the same bevel under a shorter drop. */ --shadow-tile-icon-dock: var(--shadow-tile-bevel), 0 3px 6px rgb(20 32 50 / 0.22); /* The same tile pressed (see .app-tile:active .app-tile-icon): the drop shortens and the lower inset drops out, the reference's own reduced pair for :active. */ --shadow-tile-icon-active: inset 0 1px 1px rgb(181 214 239 / 0.25), 0 2px 5px rgb(20 32 50 / 0.2); /* Status colours, unchanged in role: what they mean, they mean everywhere, never a category or an accent. --warn (amber) and the new amber --accent sit closer in hue than either theme's blue accent ever did -- an inherent tension in a gold-accent system this pass does not resolve, since both individually still clear their own 4.5:1 floors (light --warn on --panel-subtle measures 4.9:1; see the dark block for its own figure) and neither is a status site --accent ever appears beside. */ --ok: #0d7a4a; --warn: #96600a; /* Person-slot category hues. Slot 4 moves off its old brown/tan (#8f5f2b) for the same reason slot 5 has twice moved off the app's own accent hue before it (see the dark block): an amber accent and a brown person tag measured dE76 13.9 apart, well under the ~20 floor the other four slots clear against it, so a person's row could misread as the selected one. #5b6b83 (a cool slate) measures dE76 67.1 from --accent and 34.5 from the nearest other slot (teal, slot 1). */ --cat-1: #0f8f8a; --cat-2: #7a5ad0; --cat-3: #c2567f; --cat-4: #5b6b83; --cat-5: #2a5e3c; --cat-1-wash: color-mix(in srgb, var(--cat-1) 12%, var(--panel-subtle)); --cat-2-wash: color-mix(in srgb, var(--cat-2) 12%, var(--panel-subtle)); --cat-3-wash: color-mix(in srgb, var(--cat-3) 12%, var(--panel-subtle)); --cat-4-wash: color-mix(in srgb, var(--cat-4) 12%, var(--panel-subtle)); --cat-5-wash: color-mix(in srgb, var(--cat-5) 12%, var(--panel-subtle)); --cat-border-mix: 35%; --wash-shared: #eeeee6; /* The card-list idiom's visible border, unchanged in role. */ --card-line: var(--line-strong); /* An input/select/textarea's own ground: the light theme's already-sunken --panel reads fine as a field, so it just aliases; the dark block overrides this with the reference's own translucent-white field fill instead of repeating --panel there (see the dark block's own comment on this token for why a real fill and a translucent one are not interchangeable). */ --field-fill: var(--panel); /* THE CARD GEOMETRY. The reference's own panel: a noticeably rounder corner and roomier padding than the old 10px/12px card, so a card reads as a deliberate object floating on the wallpaper rather than a bounded list row. --card-pad stays the single property most rules read (.app-card's own signature is `padding: var(--card-pad)`); the two halves below exist for the handful of rules that pad an axis on its own. */ --card-radius: var(--radius-surface); --card-pad-y: 15px; --card-pad-x: 17px; --card-pad: var(--card-pad-y) var(--card-pad-x); --card-gap: 12px; /* THE RADIUS VOCABULARY. Six named roles, none of which scales with text size -- see visual-system.test.ts, which fails on a bare radius outside this list. --radius-nested a small element inside another: a compact badge or status label, a small thumbnail, a selected inner segment, an icon inset inside a tile --radius-control buttons, inputs, selects, menu-item highlights --radius-tile app tiles: dock icons, All Apps icons, app-selection tiles, device-type icon containers. Equal to --radius-control today, but a separate role --radius-surface cards, grouped lists, the composer, the mini-player, bubbles --radius-overlay dialogs, sheets, the app's large floating frame panels --radius-pill an explicit exception only: switch tracks, meters, progress bars, count chips, round icon buttons --card-radius alias of --radius-surface, kept because many rules read this name 50% a circle, written literally, because it is a shape not a size */ --radius-nested: 6px; --radius-control: 10px; --radius-tile: 10px; --radius-surface: 16px; --radius-overlay: 20px; --radius-pill: 999px; /* A QR's quiet zone is white in every theme. */ --qr-ground: #ffffff; /* THE CONTROL MEASURES, unchanged in role. */ --control-min: 32px; --touch-min: 44px; --control-pad-y: 0.25rem; --control-pad-x: 0.7rem; /* The ringed-circle checkbox (.app-check), sized to the reference's own 22px ring (from its 24px predecessor); 19px is still the Screen's own smaller decorative step. */ --check-size: 22px; --check-size-small: 19px; /* --control-line is given directly by the reference for the dark/approved theme (see the dark block); the light value keeps the established derivation -- a mix of --muted toward --line-strong -- so it re-centres on the new light --muted/--line-strong automatically. */ --control-line: color-mix(in srgb, var(--muted) 64%, var(--line-strong)); /* THE STOCKS ROW TINTS, unchanged by this round. */ --stock-up: #34d399; --stock-down: #f87171; --stock-yellow: #eab308; --stock-stop-line: #6e6a5c; --stock-up-bg: #dcefdf; --stock-up-border: #a3d0ad; --stock-up-status: #0d6b3d; --stock-down-bg: #f7d0ca; --stock-down-border: #e0a299; --stock-down-status: #93221f; --stock-row-meta-ink: #4e5347; --stock-flat-bg: #e6e5db; --stock-flat-border: #c0bfb2; --stock-flat-status: #4f5148; /* THE WEIGHT LADDER. The gold-and-blue direction uses only two weights -- large Manrope display type reads at 400, everything that used to step up to 600/700 (a title, a control label, a section marker) now steps to 500. --w-display and --w-meta collapse onto --w-body and --w-title's own new values respectively; all four tokens stay, since every existing font-weight in the file points at one of them and nothing here restates a number. */ --w-display: 400; --w-title: 500; --w-meta: 500; --w-body: 400; --keyline: 2.5px; /* List geometry: the phone's own side gutter widens to the reference's 17px; --page-gutter is the new, slightly roomier measure a page HEADER reads (21px, the reference's own `.gp-header` padding) now that a header sits on the wallpaper rather than in a bounded card. --list-lead/-gap are unchanged: the rail still has to hold `10:00 PM` whole. */ --list-gutter: 17px; --page-gutter: 21px; --list-lead: 76px; --list-lead-gap: 12px; /* Half the difference between a checkbox's box and its 44px touch target -- 11px now that the box itself is 22px (was 10px against a 24px box); the formula is what checkbox-shape .test.ts's own touch-target test recomputes from --check-size, not a literal 44. */ --touch-slack: 11px; /* The semantic text-size tokens, set per preset by data-text-size (text-size.js); these are the Medium values. Inputs never drop below 16px, which avoids iPhone focus zoom. */ --text-detail-meta: 1rem; --text-detail-body: 1.125rem; --text-detail-title: 1.375rem; --leading-detail-tight: 1.3; --leading-detail-body: 1.5; --text-page-title: 2rem; --text-section: 1.25rem; --text-item: var(--text-detail-body); --text-support: var(--text-detail-meta); --text-caption: 0.875rem; --text-control: 1.125rem; --text-dock-label: 1rem; --text-launcher-label: 0.875rem; --text-input: max(1rem, var(--text-detail-body)); /* Fixed: transport controls do not scale with the text preset. */ --podcast-control-size: 1.6875rem; /* Icon geometry: fixed per viewport width tier (the media queries after the preset blocks), never by the text preset or the viewport's height. */ --launcher-tile: 60px; --launcher-glyph: 30px; /* An installed Android app's own icon sits inset in the tile ground at this share of the tile, the same room a page glyph has, so no tile is ever a bare square bitmap. */ --launcher-native-inset: 0.72; --dock-tile: 52px; --dock-glyph: 26px; /* The composer's own 67px resting height (50px row + the reference's own 17px top / 0 bottom footer padding, .composer below) plus the dock's own ~88px resting height (10px top padding + 52px tile + 6px gap + one 20px label line) below it -- ~155px. Only the pre-measure fallback: chat.js measures the real dock, which grows with a wrapped or larger label. */ --command-bar-space: 9.6875rem; /* Where .chat-lower's scrollers end: --command-bar-space less the composer's 17px top padding (transparent, so not part of the opaque stack) less --dock-overlap. The overlap is how far a scroller reaches BEHIND the opaque stack; it is negative here, so the scroller stops 4px ABOVE the pill and a clear band of wallpaper separates them. chat.js overrides the clearance with measured values. */ --dock-content-clearance: calc(var(--command-bar-space) - 17px - var(--dock-overlap)); --dock-overlap: -4px; --dock-fade: 12px; --dock-rest-gap: 16px; /* The one gap between stacked bottom-shell surfaces (the mini player above the composer pill). */ --stack-gap: 8px; /* .chat's own bottom padding (without the safe-area inset it also adds); the phone breakpoint below lowers it. .chat-lower's reservation subtracts it. */ --shell-pad-bottom: 1rem; /* The flex gap between .chat's rows (.chat-upper, .chat-lower); a row that renders nothing cancels it (.chat-upper below). */ --shell-gap: 0.75rem; --shell-max: 45rem; /* The reading column every page's header and content share on a wide screen (Today, Inbox and the lists all centre on it). */ --content-max: 60rem; --shell-gutter: 1rem; /* Press feedback (scale(.98) on :active, the reference's own button feel) and a page transition's own easing, named so both are the one thing prefers-reduced-motion turns off across every consumer rather than a per-component transition duration. */ --motion-press: 140ms; --motion-page: 260ms; --ease-page: cubic-bezier(.2, .8, .2, 1); } /* Text size presets (text-size.js sets data-text-size on ). Only the base steps are redefined; --text-item, --text-support and --text-input follow them. */ :root[data-text-size="small"] { --text-detail-body: 1rem; --text-detail-meta: 0.875rem; --text-detail-title: 1.125rem; --text-section: 1.0625rem; --text-page-title: 1.875rem; --text-caption: 0.75rem; --text-control: 1rem; --text-dock-label: 0.875rem; --text-launcher-label: 0.8125rem; } :root[data-text-size="large"] { --text-detail-body: 1.375rem; --text-detail-meta: 1.125rem; --text-detail-title: 1.625rem; --text-section: 1.5rem; --text-page-title: 2.25rem; --text-caption: 1rem; --text-control: 1.375rem; --text-dock-label: 1.125rem; --text-launcher-label: 1.125rem; } /* Icon geometry by viewport width: 320-359 uses the :root values; text never changes it. */ @media (min-width: 360px) { :root { --launcher-tile: 64px; --launcher-glyph: 32px; } } @media (min-width: 375px) { :root { --launcher-tile: 68px; --launcher-glyph: 34px; --dock-tile: 56px; --dock-glyph: 28px; } } @media (min-width: 412px) { :root { --launcher-tile: 72px; --launcher-glyph: 36px; } } /* The dock table above is for phones; tablets, desktops and the TV keep the compact dock. */ @media (min-width: 48rem) { :root { --dock-tile: 32px; --dock-glyph: 20px; } } /* Phone: touch targets are 48px (never below 44px) and the gutters tighten. Density comes from dropping redundant inset, not from shrinking type or targets. --card-pad is restated because it is computed from the two it follows where it is declared. */ @media (max-width: 47.99rem) { :root { --control-min: 44px; --touch-min: 48px; --list-gutter: 16px; --page-gutter: 16px; --card-pad-x: 14px; --card-pad: var(--card-pad-y) var(--card-pad-x); } /* A header with no subtitle needs less vertical room; safe-area padding is separate. */ .app-page-header:where(:not(:has(.app-page-header-subtitle))) { padding-block: 12px; } } @media (max-width: 359px) { :root { --list-gutter: 12px; --page-gutter: 12px; --card-pad-x: 12px; --card-pad: var(--card-pad-y) var(--card-pad-x); } } /* Dark theme. Same roles as the light :root above -- most of what changes is the base surface/ink/status/category values; anything defined as a color-mix() of those ( --accent-ink, --cat-N-wash) follows them automatically and needs no restating here. --accent-hover and the destination accent/wash pairs are formulas over their OWN literal (not over --accent or the light block's value), so each gets its own line below rather than silently keeping its light-theme shade. This is its own neutral-charcoal composition, not the light block darkened: a cool near-black canvas, two lighter elevation steps for raised surfaces (below), and the richer blue lifted to a paler, still-legible sky tone that reads as the one action colour. It stays a genuinely separate direction rather than collapsing to one theme because it is a contract this application argued for and shipped -- a wall-mounted kitchen panel that is on all day in a room whose light changes, where the OS answer is routinely wrong (see DESIGN.md, "Appearance"). The Screen reads in this vocabulary too, so it is light exactly when the app is, which on the default `system` preference is almost always. Elevation runs the OPPOSITE direction from light mode here: light's --panel is a step DARKER than --panel-subtle (a sunken field, a hovered row), but stacking dark surfaces the same way reads as murkier rather than raised. --panel is redefined below to --surface-raised -- a step LIGHTER than --panel-subtle -- and --surface-high is a second, lighter step again for a card that must read as one tier above a raised field (see .app-card's dark override and the Podcasts/agenda-tint fixes near the shared primitives below). */ :root[data-theme="dark"] { color-scheme: dark; /* THE APPROVED APPEARANCE. --page is --wall-grad-3 above, literally: the flat colour the wallpaper itself settles to, so wherever the fixed layer cannot reach reads as a continuation of it rather than a seam. */ --page: #244b80; /* The reference's own card surface, opaque -- not the near-black --panel-subtle this token held before. Raised/high step a little lighter again, the same "lighter, not darker" elevation direction this block has always used. */ --panel-subtle: #27313e; /* The player bar keeps the dark look it always had; the tokens exist so the light block can differ. */ --player-surface: var(--panel-subtle); --player-line: var(--line-strong); --player-progress-track: rgb(255 255 255 / 0.14); --surface-raised: #303c4b; --surface-high: #3a4859; --panel: var(--surface-raised); --line: rgb(255 255 255 / 0.06); --line-strong: rgb(255 255 255 / 0.12); --ink: #f1f3f5; /* Page headings now sit on the wallpaper, not on --panel-subtle -- see --page-header below -- so they read in white rather than --ink: 4.28:1 measured against the wallpaper's own lightest patch (--wall-base-radial, #367fba), just under the 4.5:1 text floor, which is why .app-page-header-title also carries a soft text-shadow (below) -- the brief's own prescribed fix, not a colour change. */ --ink-heading: #ffffff; --muted: #b3becb; --faint: color-mix(in srgb, var(--muted) 68%, var(--panel-subtle)); /* THE one action/selection colour, gold, given directly by the reference (its --gp-gold). Nothing else in this theme is accent-coloured by default; a destination's nav icon uses one of the three ICON INKS below instead (--icon-gold/-blue/-teal), a cooler, more numerous family reserved for "which destination is this", never for "press this". */ --accent: #e3bd68; --accent-hover: color-mix(in srgb, var(--accent) 85%, white); /* Ink on a gold fill: 7.1:1 against --accent itself. */ --on-accent: #293441; /* ~16% gold over the card, the reference's own selected-nav-ground value (#e3bd6828). */ --accent-soft: color-mix(in srgb, var(--accent) 16%, var(--panel-subtle)); --error: #ef6f66; --code: #202b33; --accent-ink: color-mix(in srgb, var(--accent) 55%, var(--ink)); /* The dock's own current-item ink (see .dock-button[aria-current]): the reference's own literal (#ffdfa2), a paler, more washed-out gold than --accent itself -- legible small text reads better slightly lighter than a fill colour does. */ --dock-ink-current: #ffdfa2; --now-ink: var(--accent); /* THE THREE ICON INKS, the reference's own app-icon palette (appColors in the source mock). A destination's nav icon takes one of the three rather than a hue of its own -- thirteen destinations collapse onto three families instead of the nine-plus hand-picked hues the mobile visual-polish round carried. */ --icon-gold: #e5c47c; --icon-blue: #9fc7f0; --icon-teal: #9ed4cc; /* THE DESTINATION IDENTITY TOKENS. today/meals/podcasts/music -> gold; calendar/household/ library/stocks/settings -> blue; email/grocery/photos/outcomes -> teal (five of these -- library, stocks, settings, photos, outcomes -- are new: the mobile visual-polish round gave them no destination accent at all, and the reference's own three-way grouping covers every destination this app has). Every wash is the plain card surface -- cards are equal, no tinted destination ground survives; Today has no tokens of its own here because its cards carry no destination wash at all now (see .today-card in the Today section below) -- only its card headings' icons pick up the plain --accent gold, the same accent a card heading in any other gold-family pane would. */ --accent-meals: var(--icon-gold); --wash-meals: var(--panel-subtle); --accent-podcasts: var(--icon-gold); --wash-podcasts: var(--panel-subtle); --accent-music: var(--icon-gold); --wash-music: var(--panel-subtle); --accent-calendar: var(--icon-blue); --wash-calendar: var(--panel-subtle); --accent-household: var(--icon-blue); --wash-household: var(--panel-subtle); --accent-library: var(--icon-blue); --accent-stocks: var(--icon-blue); --accent-settings: var(--icon-blue); --accent-email: var(--icon-teal); --wash-email: var(--panel-subtle); --accent-grocery: var(--icon-teal); --wash-grocery: var(--panel-subtle); --accent-photos: var(--icon-teal); --accent-outcomes: var(--icon-teal); /* Person-slot category hues. Slot 4 moves off its old brown/tan (#c08b55) for the same reason the light block's own comment gives: it sat too close to the new gold accent (dE76 22.4) to trust beside it. #8ba3c2 (a cool slate, the dark twin of the light block's own replacement) measures dE76 67.5 from --accent and 32.4 from the nearest other slot (teal, slot 1). */ --ok: #4ec2a0; --warn: #d9a23e; --cat-1: #5cc9c9; --cat-2: #a48bea; --cat-3: #e184a6; --cat-4: #8ba3c2; --cat-5: #3e8f63; --cat-1-wash: color-mix(in srgb, var(--cat-1) 26%, var(--panel-subtle)); --cat-2-wash: color-mix(in srgb, var(--cat-2) 26%, var(--panel-subtle)); --cat-3-wash: color-mix(in srgb, var(--cat-3) 26%, var(--panel-subtle)); --cat-4-wash: color-mix(in srgb, var(--cat-4) 26%, var(--panel-subtle)); --cat-5-wash: color-mix(in srgb, var(--cat-5) 26%, var(--panel-subtle)); --wash-shared: #212a30; /* The reference's own field ground, given directly (its .gp-composer input's implicit transparency plus the sheet's own inset highlight reads as a faint lift, not a real surface) -- --panel is opaque here (a real card/scroller ground, --surface-raised), so a field needs a token of its own rather than reusing it translucent-by-coincidence. */ --field-fill: rgb(255 255 255 / 0.06); /* Sits WITH the surrounding dark surfaces instead of fighting them: reuses this theme's own panel and muted ink rather than a colour of its own. --chart-line needs no entry here -- its formula in the light block already reads whichever of these two is active. */ --chart-surface: var(--panel); --chart-ink: var(--muted); --library-image-ink: color-mix(in srgb, #0a6a70 70%, white); --library-note-ink: color-mix(in srgb, #93221f 70%, white); --library-link-ink: color-mix(in srgb, #4f5348 60%, white); --library-remove-border: color-mix(in srgb, var(--library-note-ink) 45%, var(--panel-subtle)); --stock-up-bg: color-mix(in srgb, var(--stock-up) 18%, var(--panel-subtle)); --stock-up-border: color-mix(in srgb, var(--stock-up) 45%, var(--panel-subtle)); --stock-up-status: color-mix(in srgb, var(--stock-up) 85%, white); --stock-down-bg: color-mix(in srgb, var(--stock-down) 18%, var(--panel-subtle)); --stock-down-border: color-mix(in srgb, var(--stock-down) 45%, var(--panel-subtle)); --stock-down-status: color-mix(in srgb, var(--stock-down) 85%, white); --stock-row-meta-ink: var(--muted); --stock-flat-bg: color-mix(in srgb, var(--muted) 18%, var(--panel-subtle)); --stock-flat-border: color-mix(in srgb, var(--muted) 45%, var(--panel-subtle)); --stock-flat-status: color-mix(in srgb, var(--muted) 85%, white); /* Given directly by the reference (its own .gp-check ring): 5.1:1 against --panel-subtle. */ --control-line: #93a3b3; --shadow-float: 0 -3px 8px rgb(0 0 0 / 0.35); --shadow-sheet: 0 -4px 14px rgb(0 0 0 / 0.5); /* A darker navy than the old near-black scrim, so a dialog still reads as dimming AWAY from the wallpaper's own blues rather than toward a colour indistinguishable from them. */ --scrim: rgb(10 20 35 / 0.6); } /* =================================================================================== THE WALLPAPER: one fixed layer behind every pane, in both themes -- see index.html, which places it as body's own first child, never inside
. It belongs to the viewport, not to content: html, body, .chat and .chat-upper all read var(--page) or transparent rather than painting their own opaque ground (below and near .chat), so the wallpaper shows through everywhere a real surface (.app-card, .app-surface, an .app-scroller's own field/page ground) does not cover it. Ported from the reference's own phone-width composition -- a 390x854 frame, each wave an absolutely-positioned circle (width/height/left/top, then rotated) -- by keeping its exact pixel geometry as a ratio of that frame rather than copying the pixels themselves: width, height, left and top are each the reference's own literal divided by the frame dimension it is measured against (390 for anything horizontal, 854 for anything vertical) and multiplied back out over 100vw/100dvh, so the composition holds -- gold entering upper- right, teal lower-left, blue anchoring the bottom, at the same crossing points the reference itself renders -- from a 320px phone to a 430px one, and from 640px tall to 932px, rather than stretching a fixed shape or drifting off a hand-picked oversized guess. dvh, not vh, for every vertical figure: the dynamic viewport height, so an iOS address bar showing or hiding never reflows the composition the way vh's larger, static value would. The desktop block below (48rem) is a deliberately calmer, wider composition -- gold to the right third, teal to the left third, blue along the bottom -- rather than the phone shape stretched wide. No animation, no blur filter, no background-attachment trick: three flat gradients and one overlay, all colour literals living in the token blocks above (visual-system.test.ts's colour scan is the enforcement; the position/size figures below are geometry, which the same test does not restrict). The wall route keeps its own dedicated look (see ARCHITECTURE.md, "The wall route") and may show this same layer underneath it. */ .app-wallpaper { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: radial-gradient(ellipse at 8% 0, var(--wall-base-radial) 0, transparent 62%), linear-gradient(155deg, var(--wall-grad-1), var(--wall-grad-2) 48%, var(--wall-grad-3) 100%); } .app-wallpaper::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, var(--wall-overlay-top), transparent 29%, transparent 72%, var(--wall-overlay-bottom) 100%); } .app-wallpaper-wave { position: absolute; border-radius: 50%; } .app-wallpaper-wave-gold { width: calc(610 / 390 * 100vw); height: calc(950 / 854 * 100dvh); left: calc(105 / 390 * 100vw); top: calc(100 / 854 * 100dvh); transform: rotate(28deg); background: linear-gradient(145deg, var(--wave-gold-1), var(--wave-gold-2) 45%, var(--wave-gold-3)); box-shadow: inset 20px 8px 48px var(--wave-gold-shadow); } .app-wallpaper-wave-teal { width: calc(550 / 390 * 100vw); height: calc(810 / 854 * 100dvh); left: calc(-320 / 390 * 100vw); top: calc(280 / 854 * 100dvh); transform: rotate(-26deg); background: linear-gradient(140deg, var(--wave-teal-1), var(--wave-teal-2) 49%, var(--wave-teal-3)); box-shadow: inset -16px 0 42px var(--wave-teal-shadow); } .app-wallpaper-wave-blue { width: calc(670 / 390 * 100vw); height: calc(500 / 854 * 100dvh); left: calc(25 / 390 * 100vw); bottom: calc(-200 / 854 * 100dvh); transform: rotate(-26deg); background: linear-gradient(30deg, var(--wave-blue-1), var(--wave-blue-2)); } /* Tablet/desktop: a calmer, wider composition rather than the phone shape stretched across a much wider frame -- gold anchored to the right third, teal to the left third, blue along the bottom, each far shallower than its phone counterpart since a wide viewport needs reach, not height. */ @media (min-width: 48rem) { .app-wallpaper-wave-gold { width: 55vw; height: 140vh; top: -25vh; right: -8vw; } .app-wallpaper-wave-teal { width: 50vw; height: 130vh; top: 5vh; left: -8vw; } .app-wallpaper-wave-blue { width: 65vw; height: 55vh; left: 18vw; bottom: -22vh; } } /* =================================================================================== THE SHARED PRIMITIVE VOCABULARY (tier 2). Every display, every dialog, the command bar and the pages view.js composes are built from these and nothing else. The measures began as the Calendar agenda's, which is why several of them used to be declared as a joined selector with their agenda originals -- .app-row and .agenda-event-toggle on one rule, and so on. That join is gone: agenda.js puts the shared class on the node instead, so Calendar now READS this vocabulary rather than being named inside it, exactly like every other pane. Its computed style is unchanged either way; what changed is which direction the dependency runs. A pane rule below may position one of these, add a modifier, or zero one of its declarations. It may not restate one. See the token block at the top of this file for the extension rule. =================================================================================== */ /* --panel-subtle, not --panel: several panes hang a hoverable control off this bar (Podcasts' back and Now Playing buttons, .app-quiet-button generally), and that control's own hover is --panel. A toolbar sitting on --panel would make that hover invisible against its own bar -- the retired --header-tint used to dodge this by being its own colour; the plain card surface dodges it by being visibly lighter than --panel. */ .app-toolbar { display: flex; align-items: center; flex: none; gap: 0.5rem; padding: 0.6rem 0.75rem 0.3rem; background: var(--panel-subtle); border-bottom: 1px solid var(--line); } /* A toolbar inside a pane that already carries its own horizontal padding, so the bar keeps its row shape instead of stacking a second inset on top of it. Five panes -- Meals, Today, Settings, Groceries and the Screen -- had written this same override out, with five near-identical comments explaining it. */ .app-toolbar-flush { padding-inline: 0; } /* --text-detail-body, not --text-detail-title, and it is the same 16px this row has always rendered at: every pane that uses this toolbar (Meals, Groceries, Today) is a list whose own row titles are --text-detail-body, so the heading sits at their step and is told apart by weight. Raising it a step clipped `Dinner plan` against the count beside it, and bought nothing: the rule the request set was a 16px floor, and this was never below it. */ .app-toolbar-title { flex: 1 1 auto; min-width: 0; margin: 0; color: var(--ink); font-size: var(--text-detail-body); font-weight: var(--w-title); line-height: 1.3; overflow-wrap: break-word; white-space: normal; } /* The count beside a toolbar title is the part that gives way, the same rule .calendar-note follows in the bar above: a shrink factor of 100 makes it absorb the whole deficit before the pane's own heading loses a character. Without it `Dinner plan` ellipsised against `2 meals in the current plan (up to 7).` at 390px. */ .app-toolbar > .app-row-meta { flex: 0 100 auto; min-width: 0; } /* THE SUB-VIEW BAR. Every view one level below a pane (a show, a queue, a playlist, a library entry, a photo, a settings page) opens with a back control and its own title, set directly on the wallpaper rather than in the shared toolbar's card-ground band: a 44px back button in the on-wall heading ink (chevron glyph + the parent's name), then the title on its own line in the section step, which may wrap rather than lose its tail. Composed onto .app-toolbar so an element that needs the flex row keeps it; this zeroes the band's ground, rule and inset. .app-toolbar-flush (a pane whose own scroller already pads the sides) is declared after and keeps winning the inline padding. */ .app-back-bar { flex-wrap: wrap; align-items: center; column-gap: 0.5rem; row-gap: 0; padding: 4px var(--list-gutter) 6px; background: transparent; border-bottom: 0; } .app-back-bar.app-toolbar-flush { padding-inline: 0; } .app-back-bar > button:first-child { flex: none; min-height: var(--touch-min); padding: 0 0.75rem 0 0; color: var(--ink-heading); background: transparent; border: 0; font-size: var(--text-section); text-shadow: var(--text-shadow-on-wall); } .app-back-bar > button:first-child:hover, .app-back-bar > button:first-child:focus-visible { background: var(--top-button-ground); } .app-back-bar > .app-toolbar-title { flex: 1 1 100%; overflow: visible; color: var(--ink-heading); font-size: var(--text-section); text-shadow: var(--text-shadow-on-wall); white-space: normal; overflow-wrap: anywhere; } /* An empty title (a view whose heading has not loaded yet) must not leave a blank line. */ .app-back-bar > .app-toolbar-title:empty { display: none; } /* The count beside a title and the trailing text of a bar read as on-wall captions too. */ .app-back-bar > .app-row-meta { color: var(--ink-on-wall-muted); text-shadow: var(--text-shadow-on-wall); } /* A card with nothing in it is a dark empty bar on the wallpaper: a list container that has no rows (a failed feed, a queue not yet loaded) hides the card around it. Only a list or text container with nothing in it (ul, ol, p, div) or a [hidden] child counts as empty; a bare :empty would also match an img, canvas or input, which are content. */ .app-card:empty, .app-card:has(> :empty:only-child), .app-card:has(> *):not(:has(> :not([hidden], ul:empty, ol:empty, p:empty, div:empty))) { display: none; } /* Softer than the all-caps tracked caption this used to be: the audit's "reduce uppercase/letter-spacing" note, answered once here because every section heading in the app already goes through this rule. The label still reads as a label through the system face, the --muted ink and the title weight -- a word the eye can find without being shouted at. Household-facing labels this rule draws (Food preferences, Saved recipes, grocery category names, Playlists) read in the platform font now, not monospace -- the mobile-polish audit's finding that monospace was leaking onto ordinary words rather than staying reserved for tickers/ids/numeric data. The Screen keeps its own stronger override (.view-section > .app-section-label) for the one surface that reads as a page rather than a list. */ .app-section-label { margin: 0; color: var(--muted); font-size: var(--text-detail-meta); font-weight: var(--w-title); letter-spacing: 0.05em; } /* A list row that is also a control: no chrome of its own beyond a hover/focus wash and the same brief press feedback every other pressable control gives (.app-quiet-button and .app-primary-button's own scale(0.98), --motion-press). One rule here, rather than one per caller, covers every row this primitive composes onto -- Today's own openers, a podcast episode or group, a meal's opener, an agenda event or task's own toggle. */ .app-row { display: flex; width: 100%; min-height: 0; align-items: flex-start; gap: 0.6rem; padding: 0.35rem 0.3rem; color: var(--ink); text-align: left; background: transparent; border: 0; border-radius: var(--radius-control); font: inherit; transition: transform var(--motion-press) ease, background var(--motion-press) ease; } .app-row:hover, .app-row:focus-visible { background: var(--panel); } .app-row:active { transform: scale(0.98); } @media (prefers-reduced-motion: reduce) { .app-row:active { transform: none; } } /* Every row title wraps rather than overflowing, stated here once: the two agenda overrides below used to carry this separately, one apiece, before what a card row needed became what every row needs. */ .app-row-title { margin: 0; font-size: var(--text-detail-body); font-weight: var(--w-title); line-height: var(--leading-detail-tight); overflow-wrap: anywhere; } .app-row-meta { margin: 0.1rem 0 0; color: var(--muted); font-size: var(--text-detail-meta); line-height: var(--leading-detail-tight); } /* Calendar's day heading, event title and task title read as one restrained hierarchy instead of three same-looking titles: the day heading alone still steps up to --text-detail-title (see .agenda-day-heading, unchanged, 18px/700), and an event title reads at the shared row rule above (16px/600) with no escalation of its own and no rule of its own at all: the wrap it used to carry is stated once in that shared rule now, and an override left standing with nothing in it is only somewhere for a declaration to creep back in. A task is a plan, not a claim on the day the way an event is, so it is the one title here that steps down from the shared 600 -- to 500 rather than 400, the same weight Today's task row gives it (see the .today-row :has() rule), so a task reads alike on both displays it appears on. */ /* One step below its row title, because the row title does the naming. A task's own title is the second thing read in that row, not the first. */ .agenda-task-title { font-weight: var(--w-meta); } .agenda-event-meta, .agenda-task-planned, .agenda-task-repeats, .agenda-task-time-meta { margin-top: 4px; font-size: var(--text-detail-body); line-height: var(--leading-detail-tight); } /* A planned-for-another-day task's own date label reads one step quieter than the row around it, through ink alone: the muted caption colour, applied evenly to every such label and never a state colour. A plan that has passed is still a plan -- the words stay exactly what agendaTaskPlannedLabel builds, and nothing here says otherwise. A timed task's own time meta (.agenda-task-time-meta, the reference's own plain "5:00 PM") reads the same quiet way -- a time is a datum, not a state, the same rule .agenda-event-time gives the event rail beside it. */ .agenda-task-planned, .agenda-task-time-meta { color: var(--muted); } .app-tag { display: inline-block; padding: 0.02rem 0.35rem; color: var(--muted); border: 1px solid var(--line); border-radius: var(--radius-nested); font-size: var(--text-detail-meta); font-weight: var(--w-meta); vertical-align: middle; } /* The same marker with a ground under it, for a mark that has to be found in a dense list rather than read beside a title -- a calendar cell's chips and its "+N more", a library type badge. Written four times before this pass at three different radii, which is the difference between a marker you recognise everywhere and four things that happen to be small. */ .app-tag-solid { background: var(--panel); border-color: transparent; } /* The agenda's tags sit directly after a title with no gap of their own, so they carry the gap; a tag that follows its own row's gap (Email Review's kinds) does not. */ .agenda-event-overlap-tag, .agenda-event-repeats-tag { margin-left: 0.4rem; } /* Repeats reads as a tracked marker, not a second tag competing with the category wash on the same card -- the outline .app-tag and .agenda-event-overlap-tag still draw is dropped here only. Colour is --muted, not --faint: this is read content at a glance, not incidental text (see the --faint token comment). */ .agenda-event-repeats-tag { padding: 0; color: var(--muted); background: none; border: none; border-radius: 0; text-transform: uppercase; letter-spacing: 0.08em; } /* A quiet nested block: panel surface at the small reading size. */ .app-inset { margin: 0 0 0.4rem; padding: 0.45rem 0.55rem; color: var(--muted); background: var(--panel); border-radius: var(--radius-control); font-size: var(--text-detail-meta); } .app-quiet-button, #calendar-reminder-enable, .calendar-notifications { min-height: var(--control-min); padding: var(--control-pad-y) var(--control-pad-x); color: var(--ink); background: transparent; border: 0; border-radius: var(--radius-control); font: inherit; font-size: var(--text-detail-body); font-weight: var(--w-meta); transition: transform var(--motion-press) ease, background var(--motion-press) ease; } .app-quiet-button:hover, .app-quiet-button:focus-visible, #calendar-reminder-enable:hover, #calendar-reminder-enable:focus-visible, .calendar-notifications:hover, .calendar-notifications:focus-visible { background: var(--panel); } .app-quiet-button:active, #calendar-reminder-enable:active, .calendar-notifications:active { transform: scale(0.98); } /* The filled treatment the brief's control vocabulary asks for beside the quiet button above and the icon/overflow button below: the pane's ONE clearly primary action -- never a row's routine action (Dismiss, Later, Save), which stays quiet, and never every button on a pane, which is exactly the "outlined text button everywhere" the brief's audit found. Same box as .app-quiet-button (min-height, radius, padding) so the two read as one family at two weights, not two different controls. */ .app-primary-button { /* --touch-min (44px), not --control-min: this is the one control the brief calls out for an "intentional action" floor of its own, matching the reference's own gold button exactly rather than a control-min literal near it. */ min-height: var(--touch-min); padding: var(--control-pad-y) var(--control-pad-x); color: var(--on-accent); background: var(--accent); border: 0; border-radius: var(--radius-control); font: inherit; font-size: var(--text-detail-body); font-weight: var(--w-title); transition: transform var(--motion-press) ease, background var(--motion-press) ease; } .app-primary-button:hover, .app-primary-button:focus-visible { background: var(--accent-hover); } .app-primary-button:active { transform: scale(0.98); } .app-primary-button:disabled { color: var(--muted); background: var(--panel); } /* An icon plus one word, in the same pill as any other quiet button. Selected is the shared .app-selected and not a colour of its own -- the bell inside stays in the button's own ink (see .calendar-notifications svg below), never a colour it owns. */ .calendar-notifications { display: inline-flex; align-items: center; gap: 0.35rem; flex: none; /* Sized with the Calendar bar it lives in rather than with the detail scale, for the reason spelled out on .email-review-toggle strong: this row is the app's tightest at 390px, and the width this control takes comes straight out of the note beside it. */ font-size: var(--text-detail-meta); margin-right: 0.5rem; } .calendar-notifications svg { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; } /* The pill: the quiet button's box, round. Its 500 weight is deliberate -- this is a navigation action rather than a quiet secondary one, so it keeps the heading weight the quiet button steps down from. Stocks' own selector chip is the one caller now: Calendar's Today control, this primitive's original reason for existing, moved onto the wallpaper itself when the header did (see .app-top-button below) and no longer sits on a card ground a bordered pill would read against. */ .app-pill { flex: none; min-height: var(--control-min); padding: var(--control-pad-y) var(--control-pad-x); color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: var(--radius-control); font: inherit; font-size: var(--text-detail-body); font-weight: var(--w-title); } .app-pill:hover, .app-pill:focus-visible { background: var(--panel); } /* The reference's own gp-top-button: a secondary action set directly on the wallpaper, beside a page's own title, on a translucent ground rather than a card. Calendar's Today control is the first caller. */ .app-top-button { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: var(--touch-min); min-width: var(--touch-min); padding: 10px 13px; color: var(--ink-heading); background: var(--top-button-ground); border: 0; border-radius: var(--radius-control); font: inherit; font-size: var(--text-caption); font-weight: var(--w-title); box-shadow: var(--shadow-inset-highlight); } .app-top-button:hover, .app-top-button:focus-visible { background: var(--top-button-ground-hover); } .app-top-button:disabled { opacity: 0.6; } .app-top-button[hidden] { display: none; } /* Check now's own refresh icon (prepended by chat.js, see appIconSvg) is this primitive's first caller to carry one. */ .app-top-button svg { width: 15px; height: 15px; stroke-width: 2; } .app-status { margin: 0; color: var(--muted); font-size: var(--text-detail-body); } .app-failure { margin: 0; color: var(--error); font-size: var(--text-detail-body); } .app-empty { margin: 0; color: var(--muted); font-size: var(--text-detail-body); } /* A loading placeholder, for a surface whose fetch is already tracked in JS and would otherwise show nothing (or a bare "Loading…" line) while it waits. It stands on the wallpaper drawn in the card's own surface (--panel-subtle, --card-radius, --shadow-card), so it never reads brighter or more transparent than the card it stands in for. Composed by the caller onto whatever box shape the real content will take (a grid tile, a row). The reduced-motion twin follows the checkbox control's own pattern: the animation drops to the static tint, never a motionless flash. */ .app-skeleton { min-height: 1rem; background: var(--panel-subtle); border-radius: var(--card-radius); box-shadow: var(--shadow-card); animation: app-skeleton-pulse 1.6s ease-in-out infinite; } @keyframes app-skeleton-pulse { 50% { background: color-mix(in srgb, var(--panel) 55%, var(--panel-subtle)); } } /* A skeleton shaped like a list of rows: one .app-card (it supplies the surface) holding .app-skeleton-row entries, each an optional thumb beside two lines. A list of them takes .app-card-list's gap, and the card composes .app-divider-list for the hairline between rows. The pane's own "Loading…" line is what is announced, so the card is aria-hidden. */ .app-skeleton-card { display: flex; flex-direction: column; } .app-skeleton-row { display: flex; align-items: center; gap: 12px; min-height: 44px; padding-block: 6px; } .app-skeleton-thumb { flex: none; width: 40px; height: 40px; border-radius: var(--radius-control); background: var(--panel); animation: app-skeleton-line-pulse 1.6s ease-in-out infinite; } .app-skeleton-lines { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; } .app-skeleton-line { width: 85%; /* Follows the text step (10.8px at Medium) so a skeleton holds the rough height of the line it stands in for at Large too. */ height: calc(var(--text-detail-body) * 0.6); border-radius: var(--radius-pill); background: var(--panel); animation: app-skeleton-line-pulse 1.6s ease-in-out infinite; } .app-skeleton-line-short { width: 45%; } @keyframes app-skeleton-line-pulse { 50% { background: color-mix(in srgb, var(--line) 60%, var(--panel)); } } @media (prefers-reduced-motion: reduce) { .app-skeleton, .app-skeleton-thumb, .app-skeleton-line { animation: none; } } /* The one accented datum in a row (a date, a time), or a row whose leading title is that datum. */ .app-key { color: var(--accent-ink); font-weight: var(--w-title); } /* Rhythm, not cards: one faint divider between entries and none around them. */ .app-divider-list > * + * { border-top: 1px solid var(--line); } /* The app's second list idiom. .app-divider-list above is rhythm, not cards: it suits a list of lines inside one document. This one suits a list whose entries are things in their own right -- a calendar row, an email -- where the eye has to find where one ends and the next begins. The two are siblings; neither replaces the other. */ .app-card-list { display: flex; flex-direction: column; gap: var(--card-gap); } .app-card { padding: var(--card-pad); background: var(--panel-subtle); border: 0; border-radius: var(--card-radius); box-shadow: var(--shadow-card); } /* No dark override here on purpose. This rule used to promote every card to --surface-high, reasoning that a card had to read one step above a --panel field it sat inside -- but no pane paints that field any more (.app-scroller-field and .app-scroller-page are both `background: transparent` below, and the wallpaper is the only ground behind them). A card is the ONLY opaque surface between its content and the wallpaper now, so the base rule's own --panel-subtle -- #27313e in the approved theme, the reference's own opaque .gp-panel -- is already the right, single step; promoting it further just made the card read close enough to the wallpaper's own blue to look translucent. An inset or field nested INSIDE a card (Email Review's own overflow menu, an .app-inset) may still take --panel/--surface-raised as its own lighter step above the card -- that pairing is unaffected, since it was never about the card's own background. */ /* A grouped surface: several rows a page reads as ONE block, rather than a list of bounded entries (.app-card-list) or lines in one document (.app-divider-list). It is the largest of the three radii because it is the largest of the three shapes -- an 18px corner on a 40px card looks like a mistake, and a 10px corner on a whole block looks like a card that grew. This is the Screen's own 18px surface, promoted. It was written four times there as a literal (.view-body's page, the five live blocks, and two container overrides) and once more on the composer's `+` sheet, and it is the shape that made a generated page read as a published document rather than app chrome -- which is exactly why the rest of the app should have the word too. */ .app-surface { padding: 0.7rem 0.85rem; background: var(--panel-subtle); border: 1px solid var(--line); border-radius: var(--radius-surface); } /* THE SCROLLER. Every display in this app is one: the band shows exactly one pane, and that pane owns the vertical scroll. Thirteen rules wrote this out before this round -- eight whole panes plus five inner scrollers -- and overscroll-behavior is part of the primitive rather than an afterthought, because a scroller that bubbles its overscroll drags the whole app on a phone. The mechanics are here; the GROUND is a separate decision and gets its own name, because it is not arbitrary -- it follows from which of the app's two list idioms the pane holds. See "Which list idiom a new list should use": entries that are things in their own right sit as bounded cards on a pale field, and lines inside one document sit on the plain card surface. Eight panes were making that choice correctly and writing it out by hand; now they name it. */ .app-scroller { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } /* `hidden` IS ONLY A UA `display: none`, which any author rule naming `display` outranks -- so every primitive that sets one has to hand the attribute back, or a consumer that relied on the UA rule silently stops hiding. This is stated once, over the whole set, rather than per primitive: the failure is invisible in a unit test (jsdom lays out nothing) and the next primitive to name `display` would have to remember. It was not hypothetical -- the Calendar's day list had no `display` of its own, so `hidden` worked, and it kept a full-height empty field above the four-week grid the moment .app-scroller gave it one. Found in a browser screenshot. */ .app-toolbar[hidden], .app-row[hidden], .app-tag[hidden], .app-card-list[hidden], .app-skeleton-card[hidden], .app-skeleton-row[hidden], .app-skeleton-lines[hidden], .app-scroller[hidden], .app-check[hidden], .app-check-target[hidden], .app-section[hidden], .app-stack[hidden], .app-row-group[hidden], .app-grid[hidden], .app-media[hidden], .app-dialog-frame[hidden], .app-dialog-header[hidden], .app-dialog-footer[hidden] { display: none; } /* Bounded cards on a pale field: Today, Podcasts, the Library, the Calendar's day list, the Email Review list, the Stocks list and its chart, Meals and Groceries. The Library was the one that MOVED here in an earlier round -- it held cards on the plain surface, which is the mismatch the two names exist to make visible; Meals and Groceries moved here in the gold-and-blue card round, for the same reason -- each recipe and each category is now its own bounded card rather than a line inside one document. */ /* Transparent, both idioms: the gold-and-blue direction's own wallpaper (.app-wallpaper, fixed behind everything) is what a pane's own ground used to hide, one dark column per destination -- see index.html's boot comment and ARCHITECTURE.md's "One presentation layer" for the fixed layer this reveals. A card floating on it still draws its own surface (.app-card, .app-surface); it is only the FIELD or PAGE around those cards that stopped drawing one of its own. */ .app-scroller-field { padding: 10px var(--list-gutter) 1rem; background: transparent; } /* Lines inside one document: Household, Settings, the Screen and the All launcher. The roomier inset is this idiom's own -- a document wants a margin, a field of cards wants a gutter; vertically only -- sideways its cards start at the same --list-gutter as a field's, at every width. */ .app-scroller-page { padding: 0.75rem var(--list-gutter) 1rem; background: transparent; } /* A page header that lives INSIDE a padded scroller (Meals, Groceries, Music, Library, Photos, Outcomes, Household, Settings, All apps) stacked its own 21px --page-gutter on the scroller's 17px, so those titles sat 38px from the edge while Inbox, Calendar, Stocks and Podcasts, whose headers sit outside a padded scroller, sit at 21. The header hands the scroller's inset back at every width, so a phone and a tablet both put every title at --page-gutter from the pane edge; cards stay at --list-gutter. The wide-screen content-column rule in the 68.75rem block still recentres headers and content together. Podcasts zeroes its scroller's padding, Today's header is its clock, and the All apps launcher keeps its title on the tile grid's first column (the approved reference), so none of them take it. */ :where(.app-scroller-field, .app-scroller-page):not(.podcasts, .today, .apps) .app-page-header { margin-inline: calc(var(--list-gutter) * -1); } /* A page header owns its own 18px padding-top (.app-page-header above); a field or page container that ALSO wraps it as the pane's first content stacks a second gap on top of that one -- the exact ~10px Meals/Groceries/Music (both classes on the outer section, or one level in through a bare wrapper div like #music-overview/#settings-root) used to read lower than Calendar/Inbox/Stocks/Podcasts, whose header sits outside any field/page padding. Podcasts solved this itself by zeroing its whole field padding and pushing the gutter into each sub-view instead (see .podcasts above); this generalises just the top-padding half of that fix to every pane whose header is its scroller's first child, so every destination's title lands at the same offset without touching the side/bottom gutters its card list still needs. */ .app-scroller-field:has(.app-page-header:first-child), .app-scroller-page:has(.app-page-header:first-child) { padding-top: 0; } /* THE CHECKBOX, once. This ringed circle was written out seven times before this pass -- .agenda-task-check, .calendar-candidate-choice, .meals-proposal-choice's input, .grocery-check-input, .grocery-ingredient-check, .view-task-checkbox and .view-grocery-checkbox -- each with its own prefers-reduced-motion twin, and the last two byte-for-byte identical to each other. Seven copies is seven chances for one display's checkbox to drift, which is the most literal possible way a set of pages stops feeling like one product. It works on a as well as an : the Screen draws a decorative, always-open ring for a task list it has no done-state for, and a span simply never matches :checked. The ring reads --control-line rather than --line-strong, which is a real fix and not a restyle: a card's outline measures 1.3:1 and a control's boundary has to clear 3:1, so every one of those seven copies was drawing a ring a low-vision reader could not find. */ /* Transparent, not --panel-subtle: an unchecked box is a ring, not a filled disc -- the reference's own .gp-check input draws no fill at all, and a solid panel-coloured circle read as a dark disc rather than an open ring in a screenshot review. :checked below still fills it, which is what tells the two states apart beyond colour alone. */ .app-check { appearance: none; -webkit-appearance: none; display: grid; flex: none; place-content: center; width: var(--check-size); height: var(--check-size); margin: 0; background: transparent; border: 1.4px solid var(--control-line); border-radius: 50%; cursor: pointer; } .app-check::before { content: ''; width: calc(var(--check-size) / 2); height: calc(var(--check-size) / 2); border-radius: 50%; background: var(--on-accent); transform: scale(0); transition: transform 120ms ease-in-out; } .app-check:checked { background: var(--accent); border-color: var(--accent); } .app-check:checked::before { transform: scale(1); } .app-check:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* The smaller ring, for a mark inside a list the pane already owns the rhythm of -- the Screen's own task and grocery rows. A size modifier only: it re-points the one variable every measure above is derived from, so nothing is restated. */ .app-check-small { --check-size: var(--check-size-small); border-width: 1.5px; } @media (prefers-reduced-motion: reduce) { .app-check::before { transition: none; } .app-quiet-button, #calendar-reminder-enable, .calendar-notifications, .app-primary-button { transition: none; } } /* The same reach, for a checkbox with no wrapper to put it on. A