/* base.css — K-Fit design system. * * Greyscale with ONE accent that follows the person, plus red kept back for a * single job, in two modes that follow the phone. * * --accent the person's colour: the active tab, the one filled pill, the * focus ring, their own estimates in charts. It changes when the * person does, and it is IDENTITY: it never marks a data category * and never warns. * --red past a limit, and destructive. It never means "this is the * important thing"; it means "this went past a limit". * * Everything else is greyscale. Tabs add only their own prefixed classes on top. * * LIGHT AND DARK (round 12, docs/round-12/REVAMP-DESIGN.md §4.2). The light set * is the base on :root; the dark set follows under `prefers-color-scheme: dark` * on `:root:not([data-theme="light"])`, and again under `:root[data-theme= * "dark"]`, so the page is in the phone's mode before any script runs and * Me › Appearance can pin either (js/router.js writes `data-theme`). The two * dark blocks are the same set twice; cli/test_theme_contrast.py holds them * equal and measures every text/ground pair of both modes. * * The rules the measured numbers impose (the test checks them): * - --ink-3 and --red text never sit on --raised (4.32 and 4.08 in dark). * - --edge never sits on --raised (2.83 in dark). * - text on --accent-wash is --ink or --ink-2 only; the accent's own ink * measures ~4.1 there. * - red text never sits on --red-wash; a "past the limit" tag is red text * on --surface-2. * - text on an accent FILL is --on-accent (near-black, both modes); text on * a red fill is --on-red. */ /* ------------------------------------------------------------ the typeface -- * ONE self-hosted face: IBM Plex Sans Var (REVAMP-DESIGN §4.4). This REVERSES * the ratified "system fonts only" decision, on the owner's explicit * instruction for round 12 (one self-hosted typeface). The file is IBM's own, * UNMODIFIED: `IBM Plex Sans Var-Roman-Latin1.woff2` from the npm package * @ibm/plex-sans-variable 0.2.0 (github.com/IBM/plex), renamed on disk only. * 68,988 bytes; SHA-256 a18d94ea83c93f0a465d0976d8bc8ecbb031225dbaf76fd201d4e724a972034f * axes wght 100–700 (default 400) and wdth 85–100 (default 100), one file * SIL OFL 1.1, © 2017 IBM Corp., Reserved Font Name "Plex" — the licence * ships beside it as fonts/OFL.txt. Because the file is unmodified it keeps * its name; a subset cut here would be a Modified Version and would have to * drop "Plex", which is why cli/test_font_budget.py pins the hash (and the * 72 KB budget, the family name and the axes). * The Latin-1 split has no ₂ ≈ ≤ ≥ → ✓: write "VO2" with the font's own * subscripts, say "about" / "at most" / "at least", draw ticks and arrows as * SVG. A stray one falls through to the system faces in --font, never tofu. * Its figures are tabular by default (every digit is 600 units), so no mono * face is needed beside it. The URL is relative so both bases (/ and * /atelier/) resolve it; index.html preloads the same URL, sw.js precaches it, * and cli/serve.py serves it as font/woff2. */ @font-face { font-family: "IBM Plex Sans Var"; src: url("../fonts/IBMPlexSansVar-Roman-Latin1.woff2") format("woff2"); font-weight: 100 700; font-stretch: 85% 100%; font-style: normal; font-display: swap; } :root { /* ------------------------------------------------ the light set (base) -- * A neutral paper, not cream. Measured with cli/accents.py contrast() over * bg / surface / surface-2 / raised / pane: * --ink 15.81 / 17.72 / 14.43 / 17.72 / 17.72 * --ink-2 7.72 / 8.65 / 7.05 / 8.65 / 8.65 * --ink-3 5.08 / 5.70 / 4.64 / 5.70 / 5.70 * --red 5.00 / 5.60 / 4.56 / 5.60 / 5.60 * --edge 3.31 / 3.71 / 3.03 / 3.71 / 3.71 (a control's boundary, 3:1) */ color-scheme: light; --bg: #F2F2F0; --surface: #FFFFFF; --surface-2: #E8E8E5; --raised: #FFFFFF; /* the selected segment, the switch's thumb */ --pane: #FFFFFF; /* the wide pane */ --line: #D6D6D2; /* hairlines — decorative only */ --edge: #84848B; /* control boundaries: chips, ghost pills, empty ticks */ --grid: #E4E4E0; /* chart gridlines — decorative */ --ink: #18181B; --ink-2: #4B4B52; --ink-3: #66666D; /* The plate loader's iron (Train, js/plates.js; design V3). Each plate has * its own numeral ink at 4.5:1 or better on its own face, in both themes, * and the set avoids red (red is past a limit) and keeps cobalt off Jordan's * slate and lemon off Alex's amber. Plates are never colour-only: every chip * carries its numeral. */ --plate-45: #2F58C8; --plate-45-ink: #FFFFFF; --plate-45-edge: #23479F; --plate-35: #E6BE32; --plate-35-ink: #18181B; --plate-35-edge: #B08E1A; --plate-25: #237A4B; --plate-25-ink: #FFFFFF; --plate-25-edge: #185C38; --plate-10: #FFFFFF; --plate-10-ink: #18181B; --plate-10-edge: #84848B; --plate-5: #3A3A40; --plate-5-ink: #F5F5F7; --plate-5-edge: #2A2A2F; --plate-2_5: #C4C7CD; --plate-2_5-ink: #18181B; --plate-2_5-edge: #84848B; --plate-steel: #A9ACB2; --plate-steel-2: #7B7E86; --plate-db: #2E2E33; --plate-db-edge: #2E2E33; --plate-shine: #FFFFFF; /* the dumbbell head's highlight, at 0.2; one value, both themes */ --red: #C8261C; --tissue-fat: #D9A400; /* DEXA tissue colours: one palette for everyone, never an accent */ --tissue-lean: #2F6BD6; --tissue-bone: #6E6E73; --on-red: #FFFFFF; /* a label on a red fill: 5.60:1 */ --red-dim: color-mix(in srgb, var(--red) 24%, var(--surface)); --scrim: color-mix(in srgb, var(--ink) 34%, transparent); /* Light has one elevation, and it is the sheet's (the A pass: "reserve * lift for sheets and dialogs"). A white tile, callout or card on the paper * gets a crisp hairline ring instead of a drop shadow, so nothing on a face * floats; dark has none (its levels are surface steps). The thumb of a * segmented control or the switch keeps a small shadow: it IS on top. */ --lift: 0 0 0 1px color-mix(in srgb, var(--ink) 7%, transparent); --thumb-lift: 0 1px 2px color-mix(in srgb, var(--ink) 14%, transparent), 0 0 0 .5px color-mix(in srgb, var(--ink) 10%, transparent); --lift-sheet: 0 -8px 40px color-mix(in srgb, var(--ink) 16%, transparent); /* A sheet shown as a dialog on wide: lifted in light, edged in dark. */ --lift-dialog: var(--lift-sheet), 0 20px 60px color-mix(in srgb, #000000 28%, transparent); --dialog-edge: transparent; /* A soft pill, a set cell, the + on a food row (§4.6). Round 12's A pass: * a surface step in BOTH modes, flat. White discs with a lift on a light * ground read as a column of floating buttons and made a quiet action look * like the primary one; lift is kept for sheets and dialogs. */ --quiet-bg: var(--surface-2); /* The quiet pill's pressed step, and the rail's spine (a structural line * that must read in light, where --line almost vanishes on the paper). */ --quiet-press: color-mix(in srgb, var(--ink) 6%, var(--surface-2)); --line-strong: color-mix(in srgb, var(--edge) 45%, var(--line)); /* The selected segment and the switch's thumb: --raised in light (white on * the grey track). Only --ink sits on it. */ --thumb: #FFFFFF; --thumb-edge: color-mix(in srgb, var(--ink) 8%, transparent); /* A text field: white on the paper in light, so an empty field reads as a * field. Its outline is --edge like every other control boundary (3:1, * WCAG 1.4.11), and its focus is ONE 2px ring in the person's ink, never * the field's border plus an outline beside it. */ --field-bg: var(--surface); /* The ground a chart's on-plot labels are haloed in (base.css, charts). */ --chart-ground: var(--bg); /* Specimens of BOTH modes, whatever mode is on screen: Me › Appearance * draws a small light phone and a small dark one side by side. Declared * here only (never in the dark set), so they never follow the theme; each * is the very value of its mode's token above or below. */ --specimen-light-bg: #F2F2F0; --specimen-light-surface: #FFFFFF; --specimen-light-ink: #18181B; --specimen-light-line: #D6D6D2; --specimen-dark-bg: #0A0A0A; --specimen-dark-surface: #1F1F22; --specimen-dark-ink: #F5F5F7; --specimen-dark-line: #2E2E33; /* The two default accents' tiers in this mode (cli/accents.py ACCENT_TIERS), * so the first frame is right before /api/accents answers. js/router.js * then paints each person's chosen name over these, inline, for whichever * mode the page is showing. */ --accent-alex-mark: #B4781D; --accent-alex-ink: #8E5E17; --accent-jordan-mark: #4A82BD; --accent-jordan-ink: #3D6B9B; /* ---------------------------------------------------- in both modes -- */ --on-accent: #0A0A0A; /* a label on an accent fill: 4.92 to 8.49:1 */ --on-brand: #FFFFFF; /* the K knocked out of the brand tile, both modes */ --good: var(--ink); /* never green: ink means "on track" */ /* ---------------------------------------------------- person accents -- * The FILL of each person's accent is the ratified hex from cli/accents.py, * the same in both modes; near-black text sits on it. Each fill has two * derived tiers per mode (REVAMP-DESIGN §4.3): * * --accent-mark graphics drawn in the accent (meter segments, the ring, * dots, bars, a control's accent edge): at least 3:1 on * every ground of the mode * --accent-ink text and lines drawn in the accent (the active tab, the * focus ring, a chart's trend line): at least 4.5:1 * * In dark every mark is the fill and every ink is too, except slate's * (#558AC1, 6 % toward white). In light all eight need their own ink. * * Alex #B87A1E amber 5.51:1 on the dark ground passes * Jordan #4A82BD slate 4.92:1 on the dark ground passes * * SUBSTITUTION ON RECORD: the review specified #2E5A8F for Jordan. That * measures 2.80:1 on the dark ground, under the 3:1 floor a non-text UI * accent has to clear (WCAG 1.4.11), so it would fail as a ring, a tab * marker or a focus outline. It has been corrected upward to #4A82BD — the * nearest step that still reads as slate rather than as a generic blue — * and this comment is the record of that change. * * Every accent TINT below is a color-mix() of a fill or a tier. No other hex * enters the palette, which is what keeps the no-new-hues rule enforceable. */ /* THE BRAND, which is not an accent. Kaire's teal, from the mark itself * (kaire-playground logo-icon-color.svg). It dresses the wordmark and the * lock screen and nothing else: the palette law is one ACCENT per person — * that is IDENTITY, it says whose ledger you are looking at — plus red for * "past a limit". A brand colour doing a third job in the chrome would make * the accent stop meaning "you". */ --brand: #0d9488; --accent-alex: #B87A1E; --accent-jordan: #4A82BD; --accent: var(--accent-alex); --accent-mark: var(--accent-alex-mark); --accent-ink: var(--accent-alex-ink); --accent-dim: color-mix(in srgb, var(--accent) 34%, var(--bg)); --accent-wash: color-mix(in srgb, var(--accent) 16%, var(--surface)); --accent-wash-bg: color-mix(in srgb, var(--accent) 13%, var(--bg)); --accent-band: color-mix(in srgb, var(--accent-mark) 20%, transparent); --accent-fan: color-mix(in srgb, var(--accent-mark) 11%, transparent); --red-wash: color-mix(in srgb, var(--red) 16%, transparent); /* zones only */ /* Softer than they were (16/10/8). Both apps the principals picked are * round — Dropset's cards and Cal AI's tiles are nearer 20-26 than 16 — and * at phone size a larger radius is what makes a dark card read as an object * rather than as a panel. --radius-lg is the hero's, used sparingly. */ --radius-lg: 26px; --radius: 20px; --radius-sm: 12px; --radius-xs: 8px; --tap: 44px; /* minimum tap target */ /* The phone column (§3.3): full width to 600, then centred at 600. The wide * layout has its own columns (the rail 232, the face 420, the pane). */ --shell: 600px; --pad: 16px; /* the phone's side gutter; 22 in the wide face */ --tabbar-h: 55px; /* the bar above the safe area: its 1px hairline + 6 + 44 + 4 */ /* Space (§4.6): 4 to 48, named by their multiple of 4. */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; /* Radii grow with the object (§4.6). Rows and sections have none. */ --r-field: 12px; /* a field, a set cell, a selected row's wash */ --r-tile: 16px; /* a tile, a callout */ --r-capture: 14px; /* a capture tile */ --r-dialog: 24px; --r-sheet: 28px; /* a sheet's top corners */ /* The type scale before round 12. No half-steps (11.5, 12.5, 13.5, 14.5 * were the tell that no scale had been agreed) and no one-off orphans. * * NO TEXT UNDER 13px (the owner's decision for round 12; REVAMP-DESIGN * §4.5): body, labels, tab labels, badges and chart axes included. --fs-1 * and --fs-2 were 11 and 12; they are held at the floor here, so every * stylesheet that still names them clears it without a per-tab edit, and * cli/test_layout_rules.py fails any size under 13 in this file. They retire * into the §4.5 scale below as the tabs are rebuilt (WP13 removes them). */ --fs-1: 13px; /* was 11: micro labels, table headers */ --fs-2: 13px; /* was 12: captions, pills */ --fs-3: 13px; /* secondary body */ --fs-4: 14px; /* body */ --fs-5: 15px; /* primary body, buttons */ --fs-6: 16px; /* lead — and the floor below which iOS zooms a focused input, so text fields never go under it */ --fs-7: 18px; /* sheet titles, glyph buttons */ --fs-8: 22px; /* stat values */ --fs-9: 26px; /* the app title */ --fs-10: 30px; /* the rest clock */ --fs-11: 34px; /* the weight hero */ /* The round-12 type scale (REVAMP-DESIGN §4.5), in the one face. A size and * a `font` shorthand for each step; the width (Plex's wdth axis) is set * beside it with font-stretch, since the shorthand cannot carry 85%: * hero, display font-stretch: 85% stat 92% the rest 100% * Titles track at -0.02em. Inputs are 17 (iOS zooms a focused field under * 16). The hero drops to 48 under 360 wide or 720 tall (below). */ --t-hero-size: 56px; --t-display-size: 44px; --t-title-size: 30px; --t-stat-size: 24px; --t-head-size: 20px; --t-row-size: 17px; --t-body-size: 15px; --t-sub-size: 14px; --t-cap-size: 13px; /* the floor: captions, tags, tab labels, axes */ --t-hero: 600 var(--t-hero-size)/0.95 var(--font); --t-display: 600 var(--t-display-size)/1 var(--font); --t-title: 620 var(--t-title-size)/1.1 var(--font); --t-stat: 600 var(--t-stat-size)/1.1 var(--font); --t-head: 600 var(--t-head-size)/1.25 var(--font); --t-row: 560 var(--t-row-size)/1.3 var(--font); --t-body: 400 var(--t-body-size)/1.45 var(--font); --t-sub: 400 var(--t-sub-size)/1.4 var(--font); --t-cap: 450 var(--t-cap-size)/1.35 var(--font); /* The one face (see @font-face above), then the system faces for the first * paint (font-display: swap) and for any glyph outside the Latin-1 split. * There is no serif in this app and no font toggle. */ --font: "IBM Plex Sans Var", -apple-system, "Segoe UI Variable", system-ui, sans-serif; /* One family (REVAMP-DESIGN §4.4): Plex's condensed width sets the large * numerals and its tabular figures (.num) are the old mono register. There * is no display or mono stack. */ --ease: cubic-bezier(.32, .72, 0, 1); } /* ------------------------------------------------------------ the dark set -- * The ground the app was born on, kept, with the inks lifted to clear AA on * every ground (the old --ink-3 measured 2.76 to 3.32). Over bg / surface / * surface-2 / raised / pane: * --ink 18.18 / 16.60 / 15.10 / 12.76 / 17.32 * --ink-2 10.03 / 9.15 / 8.33 / 7.04 / 9.55 * --ink-3 6.16 / 5.63 / 5.12 / 4.32 / 5.87 (never on --raised) * --red 5.81 / 5.30 / 4.83 / 4.08 / 5.54 (never on --raised) * --edge 4.03 / 3.68 / 3.35 / 2.83 / 3.84 (never on --raised) * The same set twice: once for the phone's own dark mode (unless Appearance * pinned light), once for Appearance pinning dark. Keep them identical. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #0A0A0A; --surface: #161618; --surface-2: #1F1F22; --raised: #2C2C31; --pane: #111113; --line: #2E2E33; --edge: #707078; --grid: #232327; --ink: #F5F5F7; --ink-2: #B8B8BE; --ink-3: #8F8F96; --plate-45: #3D63D2; --plate-45-ink: #FFFFFF; --plate-45-edge: #5A7EE6; --plate-35: #D9B43A; --plate-35-ink: #0A0A0A; --plate-35-edge: #D9B43A; --plate-25: #268050; --plate-25-ink: #FFFFFF; --plate-25-edge: #3A9A66; --plate-10: #E4E4E8; --plate-10-ink: #0A0A0A; --plate-10-edge: #E4E4E8; --plate-5: #48484F; --plate-5-ink: #F5F5F7; --plate-5-edge: #8F8F96; --plate-2_5: #A4A7AE; --plate-2_5-ink: #0A0A0A; --plate-2_5-edge: #A4A7AE; --plate-steel: #8C8F97; --plate-steel-2: #5F6269; --plate-db: #3A3A40; --plate-db-edge: #707078; --red: #FF453A; --tissue-fat: #FFCC33; --tissue-lean: #4C8DF6; --tissue-bone: #F4F4F6; --on-red: #0A0A0A; --red-dim: #7A2119; --scrim: color-mix(in srgb, #000000 58%, transparent); --lift: none; --thumb-lift: none; --lift-sheet: none; --lift-dialog: none; --dialog-edge: var(--line); --quiet-bg: var(--surface-2); --quiet-press: color-mix(in srgb, #FFFFFF 5%, var(--surface-2)); --line-strong: color-mix(in srgb, var(--edge) 22%, var(--line)); --thumb: color-mix(in srgb, #FFFFFF 7%, var(--raised)); --thumb-edge: color-mix(in srgb, #FFFFFF 6%, transparent); --field-bg: var(--surface-2); --accent-alex-mark: #B87A1E; --accent-alex-ink: #B87A1E; --accent-jordan-mark: #4A82BD; --accent-jordan-ink: #558AC1; } } :root[data-theme="dark"] { color-scheme: dark; --bg: #0A0A0A; --surface: #161618; --surface-2: #1F1F22; --raised: #2C2C31; --pane: #111113; --line: #2E2E33; --edge: #707078; --grid: #232327; --ink: #F5F5F7; --ink-2: #B8B8BE; --ink-3: #8F8F96; --plate-45: #3D63D2; --plate-45-ink: #FFFFFF; --plate-45-edge: #5A7EE6; --plate-35: #D9B43A; --plate-35-ink: #0A0A0A; --plate-35-edge: #D9B43A; --plate-25: #268050; --plate-25-ink: #FFFFFF; --plate-25-edge: #3A9A66; --plate-10: #E4E4E8; --plate-10-ink: #0A0A0A; --plate-10-edge: #E4E4E8; --plate-5: #48484F; --plate-5-ink: #F5F5F7; --plate-5-edge: #8F8F96; --plate-2_5: #A4A7AE; --plate-2_5-ink: #0A0A0A; --plate-2_5-edge: #A4A7AE; --plate-steel: #8C8F97; --plate-steel-2: #5F6269; --plate-db: #3A3A40; --plate-db-edge: #707078; --red: #FF453A; --tissue-fat: #FFCC33; --tissue-lean: #4C8DF6; --tissue-bone: #F4F4F6; --on-red: #0A0A0A; --red-dim: #7A2119; --scrim: color-mix(in srgb, #000000 58%, transparent); --lift: none; --thumb-lift: none; --lift-sheet: none; --lift-dialog: none; --dialog-edge: var(--line); --quiet-bg: var(--surface-2); --quiet-press: color-mix(in srgb, #FFFFFF 5%, var(--surface-2)); --line-strong: color-mix(in srgb, var(--edge) 22%, var(--line)); --thumb: color-mix(in srgb, #FFFFFF 7%, var(--raised)); --thumb-edge: color-mix(in srgb, #FFFFFF 6%, transparent); --field-bg: var(--surface-2); --accent-alex-mark: #B87A1E; --accent-alex-ink: #B87A1E; --accent-jordan-mark: #4A82BD; --accent-jordan-ink: #558AC1; } /* The accent follows the ACTIVE PERSON, and js/router.js stamps that person on * the root element before the first paint. Declaring it here — above base.css's * own rules, above every tab stylesheet, above the inline SVG the charts draw — * is what lets a single attribute swap re-theme the whole app with no repaint * and no per-tab cooperation. */ :root[data-active-person="jordan"] { --accent: var(--accent-jordan); --accent-mark: var(--accent-jordan-mark); --accent-ink: var(--accent-jordan-ink); } *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } /* A grid that declares no `grid-template-columns` puts its items in an IMPLICIT * column, and an implicit column is sized by `grid-auto-columns` — whose `auto` * default can never shrink below the widest item's max-content. One long word or * one row of inputs then pushes the whole track past 390px, where `overflow-x: * hidden` clips it instead of scrolling. `minmax(0, 1fr)` is the same track with * a floor of zero: it still stretches to the container and still sizes to * max-content when the container is indefinite. Zero specificity, so any * explicit track definition wins. */ * { grid-auto-columns: minmax(0, 1fr); } html { -webkit-text-size-adjust: 100%; overflow-x: hidden; } body { background: var(--bg); color: var(--ink); font: 400 var(--fs-5)/1.45 var(--font); /* The face spans 100–700 upright; a faked bold or slanted italic would be * a face the design never drew. Inherited, so it holds for the whole page. */ font-synthesis: none; min-height: 100dvh; /* No overflow here: html already clips the viewport horizontally, and an * overflow on body would make body the containing scrollport for every * position:sticky descendant — pinning nothing, since body is as tall as its * content. The Workout tab's rest clock sticks to the viewport because of * this omission. */ -webkit-font-smoothing: antialiased; /* §4.5: multi-line text wraps "pretty" (no orphaned last word); inherited, * so every paragraph, row sub-line and note gets it. Subtitles and titles * say `balance` on their own rules. */ text-wrap: pretty; padding-bottom: calc(var(--tap) + 34px + env(safe-area-inset-bottom)); } /* fb_4fe00bb8: under viewport-fit=cover the page scrolls beneath the status * bar, and the system's translucent band blurred the header and rows into * it. The safe-area inset is capped in the page's own ground, so content * reads as starting below it; 0 tall wherever there is no inset (a desktop, * a phone in a browser tab). Under the sheets (60), over the face. */ body::before { content: ""; position: fixed; inset: 0 0 auto 0; height: env(safe-area-inset-top, 0px); z-index: 45; background: var(--bg); pointer-events: none; } img, svg, video { max-width: 100%; } /* Figures that sit in a column must not dance as they change. `.num` is the * explicit opt-in a tab puts on a cell; the rules further down apply the same * thing unconditionally to every structural place a number lands — stat values, * axis labels, chart tooltips, progress readouts, table cells, the date nav — * so no tab has to remember. * * The two !important flags are load-bearing, and they are here for a cascade * reason rather than a stylistic one. `font:` is a SHORTHAND: it cannot SET * font-variant-numeric or font-feature-settings, but it RESETS both to their * initial values. The tab stylesheets load after this one and carry ~246 `font:` * declarations, most of them a single class at the same specificity as `.num`, * so source order handed them the property — and `.trends-ceiling-value`, * `.body-tape-now`, `.wk-timer-clock`, `.today-item-macros`, every `.set-lb` * input and 70-odd more silently computed `font-variant-numeric: normal` while * carrying the class that exists to prevent exactly that. Even `.hint` below * beat it, from inside this file. `.num` is an opt-in a caller writes on * purpose; no rule may legitimately override it, which is the one case where * !important is the correct instrument rather than a shortcut. Nothing else in * this stylesheet uses it except the queue badge, which has its own note. */ .num { font-variant-numeric: tabular-nums !important; font-feature-settings: "tnum" 1 !important; } /* A number and its unit, kept on one line (ui.keepUnits): "120 kcal" never * breaks into "120 / kcal". */ .nw { white-space: nowrap; } /* Marks from js/icons.js. They belong on the tab bar and on section headers. * Never inside a data row — the numbers are the ornament there. */ .icon { display: block; flex: none; } /* Every keyboard user sees where they are. The outline already follows the * element's own border-radius, so this rule must not set one — doing so * reshapes pills into rectangles the moment they take focus. */ :focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; } :focus:not(:focus-visible) { outline: none; } /* ------------------------------------------------------------------ shell * * The chrome (REVAMP-DESIGN §3, §5; WP4): the face header, the person switch, * the tab bar, and at 1024px the same DOM laid out as rail + face + pane. * One design system at every width; the breakpoints (§3.3): * * under 360 narrow: the switch shows initials, the hero drops to 48 * 360 to 599 the phone (390 is the reference) * 600 to 1023 the phone, its column centred at 600 (--shell) * 1024 and up wide: side rail 232, face column 420, pane the rest * 1440 and up the pane caps at 820; rail, face and pane centre together * * and one height rule: under 720 tall the hero compacts to 48, so a morning * block still shows on a 375 x 667 phone. The face column (#view) and the * pane are size containers (`face`, `pane`), so a component can answer to * the column it sits in: the same at 390 on a phone and 420 on wide. */ /* The face header: the title row, then ONE subtitle line that ends in the * status tags. */ .top { max-width: var(--shell); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: calc(6px + env(safe-area-inset-top)) var(--pad) 6px; } .top-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; min-height: 48px; } /* The title yields to the switch: one line, ellipsised, never wrapped. */ .app-title { flex: 1 1 auto; min-width: 0; font: var(--t-title); letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .top-actions { flex: none; display: flex; align-items: center; gap: 8px; } /* The person switch: two segments, each with its own person's dot, the * current one the thumb on --raised (§5). One tap; both previews always * visible, so the switch says whose colour you are about to get. */ .person-switch { flex: none; display: inline-flex; padding: 3px; border-radius: 999px; background: var(--surface-2); } /* 36 tall inside the track's 3px; ::after reaches the hit area to 44. The dot * is the person's FILL in both modes. `--btn-accent` is scoped per button, so * it is independent of whichever person is driving the document's --accent. */ .person-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; /* 11px, not 13: the longest weekday ("Wednesday", Today's title with its * caret) fits beside the switch at 390 without an ellipsis. */ padding: 0 11px; font: 560 var(--t-body-size)/1 var(--font); color: var(--ink-2); background: none; border: 0; cursor: pointer; border-radius: 999px; white-space: nowrap; -webkit-tap-highlight-color: transparent; transition: color .15s var(--ease), background-color .15s var(--ease); } .person-btn[data-person="alex"] { --btn-accent: var(--accent-alex); } .person-btn[data-person="jordan"] { --btn-accent: var(--accent-jordan); } .person-btn::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 999px; background: var(--btn-accent, var(--ink-3)); } .person-btn::after { content: ""; position: absolute; inset: -4px 0; } /* The current half is the switch's thumb: --thumb (white in light, a clear * step up from the track in dark, where --raised measured 1.2:1 against it * and the choice was hard to see). Only --ink sits on it. */ .person-btn[aria-pressed="true"] { color: var(--ink); background: var(--thumb); box-shadow: var(--thumb-lift), inset 0 0 0 1px var(--thumb-edge); } .person-btn:hover { color: var(--ink); } /* The initial js/router.js derives from the name; shown under 360 only. */ .person-ini { display: none; } /* A title that opens a picker (Today's day, Train's session) is a button * with a visible caret: a tappable title nobody can see is tappable is not a * feature (§5). The caret is drawn (icons.js "caret"), so the title's text * stays the title. */ .title-btn { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: var(--tap); padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; } .title-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .title-caret { flex: none; width: 20px; height: 20px; margin-top: 4px; color: var(--ink-3); } .page-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font: 400 var(--t-body-size)/1.4 var(--font); color: var(--ink-2); text-wrap: balance; } .page-sub[hidden] { display: none; } /* Said, not shown: the subtitle's status tags for a screen reader * (#page-status, a polite live region; js/router.js announceStatus). */ .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* The status tags at the end of the subtitle: "As of 7:10", "Offline". * Neutral — stale and offline are words, never red and never the accent. */ .page-tag { display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); font: 500 var(--t-cap-size)/1 var(--font); white-space: nowrap; } main#view { max-width: var(--shell); margin: 0 auto; padding: 6px var(--pad) 28px; display: grid; /* Explicit, and explicitly floored at zero: a single `auto` track would be * sized to the widest card's max-content and blow the page past 390px. */ grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; /* The face column, for container queries (§3.3). Inline-size only: the * column's height still follows its content. */ container: face / inline-size; } main#view:focus { outline: none; } /* Each tab renders into its own root (js/router.js) and a switch only HIDES * the others, stacks and all (§3.2). A root is `display: contents`, so its * cards are #view's own grid items with #view's gap, exactly as before. */ [data-tab-root] { display: contents; } [data-tab-root][hidden], [data-pane-root][hidden] { display: none; } /* The first visit's skeleton, in the face's own shape (§6 "Loading"). Blocks * on --surface-2, no words; a screen reader hears the one label. */ .skel-face { display: grid; gap: 12px; } .skel-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skel { border-radius: var(--radius-sm); background: var(--surface-2); animation: skel-breathe 1.4s var(--ease) infinite alternate; } .skel-hero { height: 96px; } .skel-meter { height: 12px; border-radius: 999px; } .skel-row { height: 52px; } .skel-board { height: 248px; } .skel-chart { height: 200px; } .skel-tiles { height: 132px; } .skel-swatches { height: 44px; border-radius: 999px; } @keyframes skel-breathe { from { opacity: .55; } to { opacity: 1; } } /* The pane host (wide only) and its quiet default until a tab supplies one * (a module's `pane(ctx)`, WP7 on). */ #pane { display: none; } /* Nothing open yet: a heading on the face title's line and one sentence, * never a stray caption in a corner. */ .pane-empty { display: grid; gap: 6px; padding-top: 4px; } .pane-empty-title { font: var(--t-title); letter-spacing: -.02em; color: var(--ink-2); } .pane-empty-sub { font: var(--t-body); color: var(--ink-2); } /* The rail's head (the wordmark, the second person switch) and foot (the * queue's state, Report a problem, Lock) are wide-only. */ .rail-head, .rail-foot { display: none; } /* The tab bar: five destinations, marks over 13px labels, on --bg at 88 % * with a blur and a top hairline, above the home indicator (§3.1). */ .tabbar { position: fixed; inset: auto 0 0 0; z-index: 40; display: flex; justify-content: center; padding: 6px 4px calc(4px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--line); } /* The destinations share the width equally, however many there are. The bar * and the side rail are one element (§3.4). */ .tabbar-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; width: 100%; max-width: var(--shell); } /* Mark above word. The grid is declared with both rows so the bar keeps the * same height whether or not js/icons.js has painted its marks yet — no * reflow when the module lands. Inactive tabs are --ink-2 (7.05:1 or better * on every ground; the old grey measured 3.52). */ .tabbar .tab { min-width: 0; min-height: var(--tap); border: 0; background: none; cursor: pointer; font: 500 var(--t-cap-size)/1 var(--font); color: var(--ink-2); padding: 0 2px; border-radius: var(--radius-sm); display: grid; grid-template-rows: 24px auto; align-content: center; justify-items: center; gap: 3px; -webkit-tap-highlight-color: transparent; transition: color .15s var(--ease); } .tab-icon { width: 24px; height: 24px; grid-row: 1; } /* fb_4a0fa189: at the tab's line-height of 1 the clip box ended at the * baseline's em box and cut the g of "Progress"; the label keeps its own * line-height so a descender is inside what overflow clips (24 + 3 + 16 = * the 44 tap row, still). */ .tab-label { grid-row: 2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 16px; } /* The active tab: the person's ink at 620 and a 2.3 stroke, its mark on a * soft pill of the person's wash (the A pass), so where you are reads at a * glance without a second colour. The pill sits behind the mark in the same * grid cell and grows in; its row stays 24, so the bar keeps its height. */ .tabbar .tab::before { content: ""; grid-row: 1; grid-column: 1; align-self: center; justify-self: center; width: 54px; height: 30px; border-radius: 999px; background: transparent; transform: scaleX(.6); transition: background-color .2s var(--ease), transform .24s var(--ease); } .tabbar .tab .tab-icon { grid-column: 1; position: relative; } .tabbar .tab-label { grid-column: 1; } .tabbar .tab[aria-current="page"]::before { background: var(--accent-wash-bg); transform: none; } .tabbar .tab[aria-current="page"] { color: var(--accent-ink); font-weight: 620; } .tabbar .tab[aria-current="page"] .tab-icon { stroke-width: 2.3; } .tabbar .tab:hover { color: var(--ink); } .tabbar .tab[aria-current="page"]:hover { color: var(--accent-ink); } .tabbar .tab:active .tab-icon { transform: scale(.92); } .tabbar .tab .tab-icon { transition: transform .12s var(--ease); } /* A mark js/router.js puts in a chrome control ([data-icon]). */ .chrome-icon { width: 18px; height: 18px; flex: none; } /* ------------------------------------------------------------- containers */ .card { background: var(--surface); border-radius: var(--radius); padding: 18px; box-shadow: var(--lift); /* light mode only; dark has no elevation */ } .card-title { font: 600 var(--fs-5)/1.3 var(--font); margin-bottom: 12px; } /* icons.iconTitle() heads a section with one of the eleven marks: * ui.card(iconTitle("flame", "Calories"), ...rows) * The mark is ink-3 so it sits behind the words rather than competing with * them. Section headers and the tab bar are the ONLY places an icon belongs — * a data row's ornament is its numbers. */ .card-head { display: inline; } .card-head.has-icon { display: inline-flex; align-items: center; gap: 9px; } .card-icon { width: 17px; height: 17px; color: var(--ink-3); } .card-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 14px; } .card-actions.is-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* Every track below is floored at zero. A bare `1fr` takes its automatic * minimum from the item's min-content — for a text input that is ~186px, which * is how two fields end up demanding 382px inside a 354px sheet. */ .list { display: grid; grid-template-columns: minmax(0, 1fr); } .list > * + * { border-top: 1px solid var(--line); } .hint { color: var(--ink-3); font: 400 var(--fs-3)/1.45 var(--font); } .empty { color: var(--ink-2); font: 400 var(--t-sub-size)/1.5 var(--font); text-wrap: pretty; } /* A designed empty state (ui.emptyState): the screen's mark on a soft disc, * a headline, one line, one quiet action — centred, never a grey sentence * stranded at the top of a blank page. */ .empty-state { display: grid; justify-items: center; align-content: center; gap: 6px; padding: var(--s-8) var(--s-4); text-align: center; animation: fade .3s var(--ease); } .empty-state.is-compact { padding: var(--s-5) var(--s-2); } .empty-mark { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 10px; border-radius: 999px; background: var(--surface-2); color: var(--ink-3); } .empty-state.is-compact .empty-mark { width: 52px; height: 52px; margin-bottom: 6px; } .empty-mark .icon { width: 28px; height: 28px; stroke-width: 1.75; } .empty-title { font: 600 var(--t-row-size)/1.3 var(--font); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; } .empty-text { max-width: 34ch; font: var(--t-sub); color: var(--ink-2); text-wrap: balance; } .empty-act { margin-top: 12px; } .empty-detail { margin-top: 6px; font-size: var(--fs-2); color: var(--ink-3); word-break: break-word; } /* ------------------------------------------------------------------ atoms */ .stat { display: grid; gap: 2px; } /* A stat value is always a figure, so it always gets tabular lining — a caller * that forgets `.num` still lines up with the one beside it. */ .stat-v { font: 700 var(--fs-8)/1.15 var(--font); letter-spacing: -.01em; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* Units are annotation, not prose: mono, the same register as the chips. */ .stat-v .stat-unit { font: 600 var(--fs-3)/1 var(--font); letter-spacing: -.01em; color: var(--ink-2); } .stat-k { font: 500 var(--fs-2)/1.4 var(--font); color: var(--ink-3); } .stat-sub { font: 400 var(--fs-2)/1.4 var(--font); color: var(--ink-3); } .stat-red .stat-v { color: var(--red); } .stat-accent .stat-v { color: var(--accent-ink); } .stat-absent .stat-v { color: var(--ink-3); font-weight: 450; } .stat-absent .stat-sub { color: var(--ink-3); } /* A pill is a DATA CHIP — EVT, S/XL/ADD, a tier, a condition, a slot code — so * it takes the mono face. That is what separates a chip from a label at a * glance, and it makes the codes read as codes rather than as words. */ .pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font: 600 var(--fs-2)/1.3 var(--font); letter-spacing: -.01em; font-variant-numeric: tabular-nums; background: var(--surface-2); color: var(--ink-2); white-space: nowrap; } .pill-red { background: var(--red-dim); color: var(--ink); } .pill-accent { background: var(--accent-dim); color: var(--ink); } .pill-muted { background: transparent; color: var(--ink-3); border: 1px solid var(--line); } .pill-ghost { background: transparent; color: var(--ink-2); } /* Conditions travel with every measurement (fasted / post-exercise / hydration) * and they are metadata about a reading, never the reading. Same mono register * as the chips, one step quieter. */ .conditions { font: 500 var(--fs-2)/1.5 var(--font); letter-spacing: -.01em; color: var(--ink-3); } /* ----------------------------------------------------------------- inputs */ .field { display: grid; gap: 6px; } .field-label { font: 500 var(--fs-2)/1.4 var(--font); color: var(--ink-2); } .field-hint { font: 400 var(--fs-2)/1.4 var(--font); color: var(--ink-3); } /* Zero specificity (:where), so any tab's own field rule wins outright: the * kit supplies the default look, never a fight. */ :where(.input, textarea, select) { /* 17 (§4.5 "inputs"): under 16 a phone zooms the page on focus. */ font: 400 var(--t-row-size)/1.35 var(--font); color: var(--ink); background: var(--field-bg); border: 1px solid var(--edge); border-radius: var(--r-field); padding: 11px 12px; min-height: var(--tap); width: 100%; /* An input's default min-content width is its `size` attribute (~186px at * 15px), which is what makes it refuse to shrink inside a grid or flex * track. Zero here, and the track decides. */ min-width: 0; transition: border-color .14s var(--ease), box-shadow .14s var(--ease); } .input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: 1; } /* Focus is ONE ring: the border turns the person's ink and thickens to 2px * inside the same box, so nothing shifts and there is no second outline * floating 2px outside the field (the Note screen's double border). */ :where(.input, textarea, select):focus { border-color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent-ink); } :where(.input, textarea, select):focus-visible { outline: none; } :where(.input, textarea, select):disabled { color: var(--ink-3); background: transparent; border-style: dashed; cursor: default; } /* A number is typed, never spun: the native spin buttons are a desktop * widget that crowds a phone field and reads as a stray control. Callers * pass inputmode="decimal" (or numeric) so the phone opens its number pad. */ input[type="number"] { -moz-appearance: textfield; appearance: textfield; } input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* A text area grows with what is written (field-sizing where the browser has * it; ui.autoGrow() everywhere else) and never shows the corner grip. */ /* `textarea[class]` so a tab's own `.x-note { resize: vertical }` cannot * bring the grip back. */ textarea, textarea[class] { resize: none; } textarea { min-height: 112px; line-height: 1.5; field-sizing: content; max-height: 60dvh; } /* A clock or a date field reads as a value, not a form widget: the value in * tabular figures, the platform's own picker mark kept but quiet. */ input[type="time"], input[type="date"], .clock-input { font-variant-numeric: tabular-nums; } /* A clock field (ui.clockInput) is a value, not a paragraph: as wide as * "17:30" wants, not the whole row. */ .clock-input { max-width: 9ch; min-width: 7.5ch; text-align: center; letter-spacing: .01em; } input[type="time"]::-webkit-calendar-picker-indicator, input[type="date"]::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: var(--tap); padding: 13px 16px; border: 0; /* the same corner as the inputs and chips it sits beside */ border-radius: var(--radius-sm); cursor: pointer; font: 700 var(--fs-5)/1 var(--font); text-align: center; transition: filter .15s var(--ease), background-color .15s var(--ease); } /* The primary action carries the person's accent FILL. Its label is * --on-accent, near-black in both modes: white on the amber measures 3.60:1 * and would fail AA at this size, while the near-black label measures 5.51:1 * on Alex's amber and 4.92:1 on Jordan's slate (4.92 to 8.49 across the set). */ .btn-primary { background: var(--accent); color: var(--on-accent); } /* Destructive keeps red, with --on-red on it: near-black on the dark red * (6.15:1), white on the light one (5.60:1). White on #FF453A measured 3.1. */ .btn-danger { background: var(--red); color: var(--on-red); } .btn-grey { background: var(--surface-2); color: var(--ink); font-weight: 600; } .btn-ghost { background: transparent; color: var(--ink); font-weight: 600; border: 1px solid var(--edge); } .btn-grey:hover { background: var(--quiet-press); } .btn-ghost:hover { background: var(--surface-2); } .btn:active { filter: brightness(1.12); } /* Disabled is a state, not a dimmed version of the action: a neutral step * with a quiet label (never a muddy accent under 3:1). It keeps its label * and, with a reason, says why on tap (blockedAttrs). */ .btn:disabled, .btn[aria-disabled="true"] { background: var(--surface-2); color: var(--ink-3); border-color: transparent; cursor: default; filter: none; } .btn-full { width: 100%; } .segmented { display: flex; background: var(--surface-2); border-radius: 999px; padding: 3px; gap: 2px; } /* 38 tall in a 44 track; the ::after takes each segment's hit to the track's * full 44. One line always: a label that would wrap is ellipsised, so two * segments are never two heights (put a date range in the caption below). */ .segmented-btn { position: relative; flex: 1 1 0; min-width: 0; min-height: 38px; border: 0; background: none; cursor: pointer; color: var(--ink-2); font: 520 var(--t-sub-size)/1 var(--font); border-radius: 999px; padding: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-tap-highlight-color: transparent; transition: color .15s var(--ease), background-color .15s var(--ease), box-shadow .15s var(--ease); } .segmented-btn::after { content: ""; position: absolute; inset: -3px 0; } .segmented-btn:hover:not([aria-pressed="true"]) { color: var(--ink); } .segmented-btn[aria-pressed="true"] { color: var(--ink); font-weight: 620; background: var(--thumb); box-shadow: var(--thumb-lift), inset 0 0 0 1px var(--thumb-edge); } /* In a roomy column (the pane, a tablet) a two- or three-way choice does not * stretch to 880: it keeps a control's width. */ @container (min-width: 520px) { .segmented { max-width: 420px; } } /* js/meal_fields.js — the optional model fields on a food form (fb_53beb428), * shared by Today and Meals, so it lives here rather than in either tab's * sheet. Seven provenance classes do not fit one row at 320px: the group * wraps into rows of three rather than scrolling sideways. */ .meal-fields { display: grid; gap: 10px; } .meal-fields-body { display: grid; gap: 10px; } .meal-fields-body[hidden] { display: none; } .meal-fields-toggle { justify-self: start; } .meal-f-class .segmented, .meal-f-form .segmented { flex-wrap: wrap; } .meal-f-class .segmented-btn { flex: 1 1 30%; white-space: normal; } .meal-fields-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } /* The chart tables are the accessibility affordance — they are exactly the * control that must not be a 32px sliver. A full tap target, drawn as a * tertiary row (a hairline above, the words, a count, a chevron that turns * as it opens) so it reads as a control and never as an orphaned heading. */ .chart-table { border-top: 1px solid var(--line); } .chart-table > summary { list-style: none; cursor: pointer; color: var(--ink-2); font: 500 var(--t-sub-size)/1.2 var(--font); min-height: var(--tap); display: flex; align-items: center; gap: 8px; -webkit-tap-highlight-color: transparent; } .chart-table > summary::-webkit-details-marker { display: none; } .chart-table > summary:hover { color: var(--ink); } .chart-table-count { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-3); font-weight: 450; } .chart-table-chev { width: 18px; height: 18px; margin-left: auto; color: var(--ink-3); transition: transform .2s var(--ease); } .chart-table[open] > summary .chart-table-chev { transform: rotate(90deg); } /* --------------------------------------------------------------- date nav */ /* ‹ Sat 29 Aug › — built by ui.dateNav(). One row, three tap targets, and a * transparent native date input under the middle one. */ .datenav { display: grid; gap: 4px; background: var(--surface); border-radius: var(--radius); padding: 4px; } .datenav-row { display: flex; align-items: center; gap: 4px; } .datenav-btn { flex: none; display: grid; place-items: center; width: var(--tap); height: var(--tap); padding: 0; border: 0; border-radius: 999px; background: none; color: var(--ink-2); font: 400 var(--fs-7)/1 var(--font); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color .15s var(--ease), background-color .15s var(--ease); } .datenav-btn .icon { width: 22px; height: 22px; } .datenav-btn:hover:not(:disabled) { color: var(--ink); background: var(--surface-2); } /* The future holds no data, so forward is genuinely unavailable — inert and * in --ink-3 at full strength, never hidden and never faded to nothing, so * the edge of the record is legible in light as well as dark. */ .datenav-btn:disabled { color: var(--ink-3); opacity: .5; cursor: default; } /* The positioning context for the transparent input. */ .datenav-day-wrap { position: relative; display: flex; flex: 1 1 auto; min-width: 0; } .datenav-day { flex: 1 1 auto; min-width: 0; min-height: var(--tap); display: grid; gap: 1px; align-content: center; justify-items: center; padding: 4px 8px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink); font: 600 var(--fs-5)/1.2 var(--font); cursor: pointer; } .datenav-day:hover { background: var(--surface-2); } /* "Sat 29 Aug" changes under the finger as you step through days; tabular * figures stop the whole row shifting when 9 becomes 10. */ .datenav-label { white-space: nowrap; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* Sentence case, not an eyebrow (REVAMP-DESIGN §4.5: no all-caps labels). */ .datenav-note { font: 600 var(--fs-3)/1.2 var(--font); color: var(--ink-3); } .datenav-note:empty { display: none; } /* Rendered (showPicker() needs a rendered element) but invisible and inert: * the button above it is what the finger and the keyboard reach. The tag is in * the selector so this beats `input.input` from the field styles above. */ input.datenav-input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; min-width: 0; padding: 0; border: 0; background: none; opacity: 0; pointer-events: none; } /* ----------------------------------------------------------- warn badge -- */ /* A caution, not an alarm and not a hue: the palette has exactly one accent, so * a warning is red the way everything urgent here is red — as a 3px edge and a * small mark, not a filled amber slab that would out-shout the primary action. */ .badge-warn { display: flex; align-items: flex-start; gap: 9px; padding: 10px 12px; border-radius: var(--radius-sm); border-left: 3px solid var(--red); background: var(--surface-2); color: var(--ink-2); font: 500 var(--fs-3)/1.45 var(--font); } .badge-warn::before { content: "!"; flex: none; width: 17px; height: 17px; margin-top: 1px; border-radius: 999px; background: var(--red); color: var(--on-red); font: 700 var(--fs-1)/17px var(--font); text-align: center; } .badge-warn strong { color: var(--ink); font-weight: 600; } /* ------------------------------------------------------------------ sheet */ .sheet-backdrop { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; background: var(--scrim); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fade .18s var(--ease); } .sheet { width: 100%; max-width: var(--shell); max-height: 88dvh; /* A size container like the face and the pane (§3.3): what a sheet holds * lays out for the sheet's width, a phone's or the 480 dialog's. */ container: sheet / inline-size; /* The head stays, the body scrolls (ui.sheet): a column whose body takes * what is left and scrolls inside it, with its own bottom padding, so the * last control never touches the edge. */ display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border-radius: var(--r-sheet) var(--r-sheet) 0 0; border-top: 1px solid var(--line); box-shadow: var(--lift-sheet); padding: 8px 0 0; animation: rise .3s var(--ease); } .sheet::before { content: ""; flex: none; display: block; width: 36px; height: 5px; margin: 4px auto 8px; border-radius: 999px; background: var(--edge); opacity: .55; } /* ONE header on every sheet: the title left, the action (when there is one) * and a round × right. */ .sheet-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--tap); padding: 0 14px 10px 20px; transition: box-shadow .15s var(--ease); } .sheet.is-untitled .sheet-head { min-height: 0; padding-bottom: 2px; } .sheet.is-scrolled .sheet-head { box-shadow: 0 1px 0 var(--line); } .sheet-title { flex: 1 1 auto; min-width: 0; font: 620 19px/1.25 var(--font); letter-spacing: -.015em; text-wrap: balance; } .sheet-corner { flex: none; display: flex; align-items: center; gap: 6px; } /* The ×: a 36px disc in a 44px hit. If a caller relabels it with a word * ("Close" once a save cannot be repeated) it becomes a quiet pill. */ .sheet-x { position: relative; flex: none; display: inline-grid; place-items: center; min-width: 36px; height: 36px; padding: 0; border: 0; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); font: 560 var(--t-sub-size)/1 var(--font); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color .15s var(--ease), background-color .15s var(--ease); } .sheet-x::before { content: ""; position: absolute; inset: -4px; } .sheet-x:not(:has(.icon)) { padding: 0 14px; color: var(--ink); } .sheet-x:hover { color: var(--ink); background: var(--quiet-press); } .sheet-x .icon { width: 18px; height: 18px; stroke-width: 2.25; } .sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; align-content: start; gap: 12px; padding: 2px 20px calc(24px + env(safe-area-inset-bottom)); } /* More below: the last lines fade into the edge instead of being cut by it. */ .sheet.has-more .sheet-body { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent); } .confirm { display: grid; gap: 16px; } .confirm-msg { font: 400 var(--fs-5)/1.5 var(--font); color: var(--ink-2); } .confirm-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } @keyframes rise { from { transform: translateY(24px); opacity: .4; } to { transform: none; opacity: 1; } } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } @keyframes dialog-in { from { transform: translateY(8px) scale(.985); opacity: 0; } to { transform: none; opacity: 1; } } /* ------------------------------------------------------------------ toast */ #toast { position: fixed; left: 50%; bottom: calc(var(--tap) + 40px + env(safe-area-inset-bottom)); z-index: 80; transform: translateX(-50%) translateY(8px); max-width: calc(100vw - 32px); background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); font: 600 var(--fs-3)/1.4 var(--font); border-radius: var(--radius-sm); padding: 12px 18px; opacity: 0; pointer-events: none; transition: opacity .18s var(--ease), transform .18s var(--ease); } #toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ------------------------------------------------------------ queue badge */ /* js/queue.js mounts this before any stylesheet is guaranteed to exist, so it * carries an inline fallback of its own. Once base.css is here the stylesheet * is the authority for the two things the inline string gets wrong: the font * (it hardcodes a stack that drops SF Pro / Segoe UI Variable / Roboto) and the * offset (72px, which lands under the toast — the toast occupies 84–126px, so * the badge starts above it). Hence the two !important flags: they beat the * element's own style attribute, and nothing else in the app uses them. */ .queue-badge { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(132px + env(safe-area-inset-bottom, 0px)) !important; z-index: 60; max-width: calc(100vw - 32px); padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font: 500 var(--fs-3)/1.2 var(--font) !important; box-shadow: 0 6px 20px color-mix(in srgb, var(--scrim) 80%, transparent); pointer-events: none; } /* ----------------------------------------------------------------- charts */ .chart { display: grid; gap: 8px; } .chart-plot { position: relative; } .chart-svg { display: block; width: 100%; height: auto; } /* charts.js writes font-size as an SVG presentation attribute; the face and the * figure style are the stylesheet's business. An axis is a ruler — its numbers * have to sit on a fixed pitch or the gridlines look crooked. */ .chart-axis { font-family: var(--font); font-variant-numeric: tabular-nums; letter-spacing: -.02em; } /* A label drawn ON the plot (a goal, a rule, the last value) is cut out of * the gridlines under it by a halo in the ground it sits on, so "Goal 1,750" * never reads as struck through by the 2,000 line. */ .card, .tile, .callout, .sheet { --chart-ground: var(--surface); } #pane { --chart-ground: var(--pane); } .chart-svg text.chart-label, .chart-svg .chart-goal text, .chart-svg text.chart-endlabel { paint-order: stroke; stroke: var(--chart-ground); stroke-width: 4px; stroke-linejoin: round; } .chart-point { transition: r .12s var(--ease); } .chart-hover { cursor: crosshair; } .chart-cell { cursor: default; } .chart-bar, .chart-cell, .chart-dot, .chart-cross { transition: opacity .12s var(--ease); } .chart-grid { shape-rendering: crispEdges; } .chart-tip { position: absolute; z-index: 5; transform: translate(-50%, -130%); pointer-events: none; opacity: 0; white-space: nowrap; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-xs); padding: 5px 9px; font: 600 var(--fs-2)/1.4 var(--font); color: var(--ink); font-variant-numeric: tabular-nums; transition: opacity .12s var(--ease); } .chart-tip.is-visible { opacity: 1; } .chart-legend { display: flex; flex-wrap: wrap; gap: 14px; } .chart-legend-item { display: inline-flex; align-items: center; gap: 6px; } .chart-swatch { width: 12px; height: 12px; flex: none; } .chart-legend-label { font: 500 var(--fs-2)/1 var(--font); color: var(--ink-2); } /* The ring asks for a hard pixel width; cap it so three of them in a row can * never out-measure their track. The SVG inside is width:100% and scales. */ .chart-ring-plot { margin: 0 auto; max-width: 100%; } /* ---- the ring, per Build Spec 4 C4 -------------------------------------- * Round 12 retired the ring everywhere but the Lab's Adherence report * (tab_trends.js, three rings); ui.ringTile is a different, smaller mark. * charts.js paints the arc with a `stroke` presentation attribute; a stylesheet * rule outranks a presentation attribute, so the line below colours the ring * in the person's mark tier without anyone editing charts.js, over budget * included (charts.js switches its own stroke to red there and this outranks * it: over budget is information, not an alarm). */ .chart-ring .chart-ring-arc { stroke: var(--accent-mark); } /* A ring at zero draws no bead at 12 o'clock: a round cap on a zero-length * dash is still rendered. charts.js labels every ring `" of *