/* ==========================================================================
   Icebreaker KPI Tracker v2 · Design system ("Calm, done better")

   One cool neutral family, one confident blue, status colours tuned to one
   lightness, and a dark palette designed as its own. Surfaces layer quietly:
   the canvas, then cards with a hairline edge and a 1 to 2 px shadow, then
   raised panels (menus, toasts, sheets). An eight-step type scale with
   tabular figures for every number. Pressable things are capsules, fields
   are 10, surfaces 16, floating panels 14, sheets 20. One control height per
   density (44 on touch, 36 with a mouse), one optical icon stroke (1.5 px),
   motion of 150 to 250 ms. No gradients, glows or decoration.

   Rules and rationale:   docs/DESIGN.md
   Every component:       /styleguide (admins, development) and docs/design-reference/

   Layers, lowest priority first:
     reset       element normalisation
     tokens      colour (light, dark), type, space, radius, elevation, motion, icons
     base        element defaults, numbers, focus, selection, scrollbars, icons
     components  everything a page is built from
     layout      shell: sidebar, top bar, page, tab bar, sign-in and public pages
                 (after components, so the shell can adjust a component it holds)
     utilities   single-purpose helpers (last, so they win)

   Naming: .block, .block__part, .block--variant; state is .is-* or an ARIA
   attribute (aria-current, aria-pressed, aria-busy, aria-invalid, [open]);
   JavaScript hooks are data-* attributes and never carry styling.
   Colours live only in the tokens layer: nothing below it names a hex value.
   ========================================================================== */

@layer reset, tokens, base, components, layout, utilities;

/* Inter (vendored) is the family everywhere except Apple devices, which get SF. */
@font-face {
  font-family: "Inter";
  src: url("../vendor/fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  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: "Inter";
  src: url("../vendor/fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------------ reset */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
  body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
  ol, ul { padding: 0; list-style: none; }
  h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
  button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; margin: 0; }
  button { background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
  a { color: inherit; text-decoration: none; }
  img, svg, video, canvas { display: block; max-width: 100%; }
  svg { overflow: visible; }
  table { border-collapse: separate; border-spacing: 0; }
  th { font-weight: inherit; text-align: inherit; }
  fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
  legend { padding: 0; }
  dialog { padding: 0; border: 0; color: inherit; background: none; max-width: none; max-height: none; }
  [popover] { padding: 0; border: 0; color: inherit; background: none; overflow: visible; }
  [hidden]:not([hidden="until-found"]) { display: none !important; }
  input[type="search"]::-webkit-search-decoration,
  input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
  input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
}

/* ----------------------------------------------------------------- tokens
   Light values sit on :root. Dark values apply three ways:
     1. the system is dark and the page has no manual choice (media query),
     2. the viewer picked dark: <html data-theme="dark"> (app.js, persisted),
     3. any subtree marked data-theme="dark" (the design reference).
   The two dark blocks are identical: change one, change both.
   Plain values only (no light-dark()), so older browsers keep every token.
   Contrast ratios in the comments are measured on the card (and the canvas);
   docs/DESIGN.md "Accessibility" has the full table. */
@layer tokens {
  :root, [data-theme="light"] {
    color-scheme: light;

    /* Surfaces: canvas < card < raised. One cool neutral family (hue 262). */
    --bg: #F4F6F8;                     /* the canvas */
    --surface: #FFFFFF;                /* cards, tiles, tables, grouped lists */
    --surface-2: #F7F8FA;              /* wells inside a card: total rows, code, the calc line */
    --surface-3: #EEF0F3;              /* pressed wells */
    --surface-raised: #FFFFFF;         /* menus, toasts, sheets, the palette (lifted by shadow) */
    --field-bg: #FFFFFF;               /* every text field, select, date, stepper */
    --card-hover: #FFFFFF;             /* a linked card lifts (shadow); it never tints */
    --sidebar: #F4F6F8;                /* the canvas itself, plus a hairline edge */
    --sidebar-hover: rgb(20 28 40 / .05);

    /* Ink: three text greys with a job each, all AA where they are allowed. */
    --ink: #161A1F;                    /* text: 17.5 card, 16.1 canvas */
    --ink-2: #5E636D;                  /* secondary text: 6.0 card, 5.6 canvas */
    --ink-3: #6C7079;                  /* tertiary text, placeholders, table headers: 5.0 card, 4.6 canvas */
    --ink-4: #A1A5AB;                  /* chevrons, disabled glyphs, neutral dots: never text */

    /* Lines. */
    --line: #E8E9EC;                   /* dividers inside a surface */
    --border: #DDE0E4;                 /* the edge of cards, fields and the sidebar */
    --border-strong: #C4C7CD;          /* field hover, the total rule, scrollbar thumbs */
    --control-edge: #82868E;           /* checkbox and radio edge: 3.65, a real UI boundary */
    --hairline: var(--line);           /* older name for --line */
    --hairline-strong: var(--border-strong);
    --field-border: var(--border);

    /* Neutral fills: ink at low alpha, so they work on the card and on the canvas. */
    --fill-1: rgb(20 28 40 / .055);    /* quiet buttons, chips, tracks */
    --fill-2: rgb(20 28 40 / .085);    /* hover; progress tracks */
    --fill-3: rgb(20 28 40 / .13);     /* pressed; the grabber */
    --fill-search: var(--fill-1);
    --row-hover: rgb(20 28 40 / .035);
    --thumb: #FFFFFF;                  /* the segmented thumb */

    /* The one accent: "you can press this", "selected", "you are here". */
    --accent: #0068D1;                 /* text, icons, marks, the chart line: 5.38 card, 4.97 canvas */
    --accent-fill: #0068D1;            /* under white text: 5.38 */
    --accent-hover: #005DBC;
    --accent-active: #0252A7;
    --accent-text: var(--accent);      /* one blue for text too */
    --accent-soft: #E8F1FE;            /* tinted button, selected chip, the viewer's own row */
    --accent-soft-hover: #DAE9FE;      /* its hover; text selection */
    --accent-wash: var(--accent-soft-hover);
    --on-accent: #FFFFFF;
    --focus: #0068D1;
    --focus-ring: rgb(0 104 209 / .22);   /* the halo around a focused field */
    --tile-blue: var(--accent);        /* older name: icon tiles are no longer a second blue */
    --tile-gray: #8B9099;

    /* Brand: the logo's navy. The app icon, the sign-in mark, emails and the PDF only. */
    --brand: #123E74;
    --logo-ink: #123E74;   /* the logo artwork: navy on light */
    --on-brand: #FFFFFF;               /* 10.7 */

    /* Status: one lightness, three hues. The word first; colour is the second signal.
       Marks (dots, bar fills, rings) >= 3:1 on the card; words >= 4.5:1 on the card,
       the canvas and their own tint. */
    --good: #2AA765;  --good-text: #127946;  --good-soft: #E2FBE9;
    --warn: #BD8005;  --warn-text: #895C05;  --warn-soft: #FFF1E0;
    --bad:  #D8655F;  --bad-text:  #9F4642;  --bad-soft:  #FFEFEE;
    --danger-fill: #C22826;  --danger-fill-hover: #B01F1F;          /* white on it 5.79 */
    --switch-on: var(--accent);        /* a switch is a control, not a status: blue, never green */
    --switch-off: #CED1D6;
    --switch-thumb: #FFFFFF;
    --shadow-switch: 0 1px 3px rgb(16 24 40 / .22);
    --app-icon-edge: inset 0 0 0 .5px rgb(0 0 0 / .10);

    /* People: one neutral monogram colour, never a rainbow. */
    --avatar: #E6E8EC;
    --avatar-ink: #4B505A;

    /* Charts: the same palette and nothing else. */
    --chart-1: var(--accent);          /* the series */
    --chart-2: #9DB9E6;                /* a second series that belongs to the first */
    --chart-muted: #C4C7CD;            /* last period, "the rest" */
    --chart-pace: #6C7079;             /* Expected by now, the day target (dashed) */
    --chart-grid: #E8E9EC;
    --chart-axis: #6C7079;

    /* Tags: calm tints for kinds that are not a status (Client ops' plays: Head off, Value drop,
       Expansion, Human). Never a status and never alone: each carries its word. Words >= 4.5:1 on their tint. */
    --tag-indigo: #4A4FBF;  --tag-indigo-soft: #EDEEFC;
    --tag-teal: #0B6D67;    --tag-teal-soft: #DDF3F0;
    --tag-purple: #7D3DAD;  --tag-purple-soft: #F4ECFB;
    --tag-rose: #A23A6E;    --tag-rose-soft: #FBEBF3;

    /* Materials and elevation. Cards carry a 1 px edge plus a 1 to 2 px shadow. */
    --material: rgb(244 246 248 / .92);   /* the scrolled top bar and the tab bar */
    --scrim: rgb(14 17 22 / .32);
    --scrim-canvas: color-mix(in srgb, var(--bg), rgb(14 17 22) 32%);   /* the canvas under the scrim (the scrollbar gutter) */
    --sheet-grouped: var(--bg);        /* a sheet that is a grouped list (Keyboard shortcuts): the grouped grey... */
    --sheet-grouped-row: var(--surface);   /* ...under white groups */
    --shadow-1: 0 0 0 1px var(--border), 0 1px 2px rgb(16 24 40 / .04);
    --shadow-2: 0 0 0 1px var(--border), 0 1px 2px rgb(16 24 40 / .05), 0 4px 12px -2px rgb(16 24 40 / .08);
    --shadow-3: 0 0 0 1px rgb(16 24 40 / .07), 0 4px 10px -2px rgb(16 24 40 / .08), 0 16px 32px -8px rgb(16 24 40 / .16);
    --shadow-4: 0 0 0 1px rgb(16 24 40 / .06), 0 8px 16px -4px rgb(16 24 40 / .08), 0 32px 64px -16px rgb(16 24 40 / .28);
    --shadow-float: var(--shadow-3);   /* older names */
    --shadow-sheet: var(--shadow-4);
    --shadow-thumb: 0 0 0 .5px rgb(16 24 40 / .08), 0 1px 3px rgb(16 24 40 / .12);
    --shadow-field: 0 1px 1px rgb(16 24 40 / .03);

    /* The select's chevron follows the theme. */
    --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236C7079' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E");
  }

  /* ---- Dark: its own palette (manual choice, or a dark subtree) ---- */
  [data-theme="dark"] {
    color-scheme: dark;
    --bg: #0E1013;  --surface: #17191C;  --surface-2: #1E2124;  --surface-3: #25282C;
    --surface-raised: #202226;  --field-bg: rgb(255 255 255 / .045);  --card-hover: #17191C;
    --sidebar: #0E1013;  --sidebar-hover: rgb(255 255 255 / .05);
    --ink: #EFF0F3;  --ink-2: #B4B7BE;  --ink-3: #9498A0;  --ink-4: #5F636A;
    --line: #25272B;  --border: #2B2E32;  --border-strong: #3F4248;  --control-edge: #767A82;
    --hairline: var(--line);  --hairline-strong: var(--border-strong);  --field-border: rgb(255 255 255 / .10);
    --fill-1: rgb(255 255 255 / .06);  --fill-2: rgb(255 255 255 / .09);  --fill-3: rgb(255 255 255 / .14);
    --fill-search: var(--fill-1);  --row-hover: rgb(255 255 255 / .035);  --thumb: #34373D;
    --accent: #5BA0FA;  --accent-fill: #046EDA;  --accent-hover: #1374E1;  --accent-active: #0365CB;
    --accent-text: var(--accent);  --accent-soft: #182E4B;  --accent-soft-hover: #1C385E;  --accent-wash: var(--accent-soft-hover);
    --on-accent: #FFFFFF;  --focus: #5BA0FA;  --focus-ring: rgb(91 160 250 / .30);
    --tile-blue: var(--accent);  --tile-gray: #5F636A;
    --brand: #123E74;  --on-brand: #FFFFFF;
    --logo-ink: #FFFFFF;   /* the logo artwork: white on dark */
    --good: #52C180;  --good-text: #88D9A5;  --good-soft: #173523;
    --warn: #DA992C;  --warn-text: #EEBA70;  --warn-soft: #3C2A0E;
    --bad:  #F3827A;  --bad-text:  #FFABA3;  --bad-soft:  #442321;
    --danger-fill: #CC3430;  --danger-fill-hover: #DB423C;
    --switch-on: #046EDA;  --switch-off: #3A3D43;  --switch-thumb: #FFFFFF;  --shadow-switch: 0 1px 3px rgb(0 0 0 / .40);
    --app-icon-edge: inset 0 0 0 1px rgb(255 255 255 / .14);
    --avatar: #2B2E33;  --avatar-ink: #C9CCD2;
    --chart-1: var(--accent);  --chart-2: #2F5C94;  --chart-muted: #3F4248;  --chart-pace: #9498A0;
    --chart-grid: #25272B;  --chart-axis: #9498A0;
    --tag-indigo: #B0B4F8;  --tag-indigo-soft: #262A52;  --tag-teal: #7CD5CB;  --tag-teal-soft: #11312F;
    --tag-purple: #D4AFF3;  --tag-purple-soft: #33244A;  --tag-rose: #F4A6CB;  --tag-rose-soft: #3F2032;
    --material: rgb(14 16 19 / .92);  --scrim: rgb(0 0 0 / .60);  --scrim-canvas: color-mix(in srgb, var(--bg), black 60%);  --sheet-grouped: var(--surface-raised);  --sheet-grouped-row: var(--field-bg);
    --shadow-1: 0 0 0 1px var(--border), inset 0 1px 0 rgb(255 255 255 / .03);
    --shadow-2: 0 0 0 1px var(--border-strong), inset 0 1px 0 rgb(255 255 255 / .04), 0 6px 16px -4px rgb(0 0 0 / .5);
    --shadow-3: 0 0 0 1px rgb(255 255 255 / .09), 0 16px 36px -8px rgb(0 0 0 / .65);
    --shadow-4: 0 0 0 1px rgb(255 255 255 / .09), 0 32px 72px -16px rgb(0 0 0 / .75);
    --shadow-float: var(--shadow-3);  --shadow-sheet: var(--shadow-4);
    --shadow-thumb: 0 0 0 .5px rgb(255 255 255 / .10), 0 1px 3px rgb(0 0 0 / .45);
    --shadow-field: none;
    --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239498A0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E");
  }

  /* ---- Dark from the system preference (no manual choice): the same values ---- */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --bg: #0E1013;  --surface: #17191C;  --surface-2: #1E2124;  --surface-3: #25282C;
      --surface-raised: #202226;  --field-bg: rgb(255 255 255 / .045);  --card-hover: #17191C;
      --sidebar: #0E1013;  --sidebar-hover: rgb(255 255 255 / .05);
      --ink: #EFF0F3;  --ink-2: #B4B7BE;  --ink-3: #9498A0;  --ink-4: #5F636A;
      --line: #25272B;  --border: #2B2E32;  --border-strong: #3F4248;  --control-edge: #767A82;
      --hairline: var(--line);  --hairline-strong: var(--border-strong);  --field-border: rgb(255 255 255 / .10);
      --fill-1: rgb(255 255 255 / .06);  --fill-2: rgb(255 255 255 / .09);  --fill-3: rgb(255 255 255 / .14);
      --fill-search: var(--fill-1);  --row-hover: rgb(255 255 255 / .035);  --thumb: #34373D;
      --accent: #5BA0FA;  --accent-fill: #046EDA;  --accent-hover: #1374E1;  --accent-active: #0365CB;
      --accent-text: var(--accent);  --accent-soft: #182E4B;  --accent-soft-hover: #1C385E;  --accent-wash: var(--accent-soft-hover);
      --on-accent: #FFFFFF;  --focus: #5BA0FA;  --focus-ring: rgb(91 160 250 / .30);
      --tile-blue: var(--accent);  --tile-gray: #5F636A;
      --brand: #123E74;  --on-brand: #FFFFFF;
      --logo-ink: #FFFFFF;   /* the logo artwork: white on dark */
      --good: #52C180;  --good-text: #88D9A5;  --good-soft: #173523;
      --warn: #DA992C;  --warn-text: #EEBA70;  --warn-soft: #3C2A0E;
      --bad:  #F3827A;  --bad-text:  #FFABA3;  --bad-soft:  #442321;
      --danger-fill: #CC3430;  --danger-fill-hover: #DB423C;
      --switch-on: #046EDA;  --switch-off: #3A3D43;  --switch-thumb: #FFFFFF;  --shadow-switch: 0 1px 3px rgb(0 0 0 / .40);
      --app-icon-edge: inset 0 0 0 1px rgb(255 255 255 / .14);
      --avatar: #2B2E33;  --avatar-ink: #C9CCD2;
      --chart-1: var(--accent);  --chart-2: #2F5C94;  --chart-muted: #3F4248;  --chart-pace: #9498A0;
      --chart-grid: #25272B;  --chart-axis: #9498A0;
      --tag-indigo: #B0B4F8;  --tag-indigo-soft: #262A52;  --tag-teal: #7CD5CB;  --tag-teal-soft: #11312F;
      --tag-purple: #D4AFF3;  --tag-purple-soft: #33244A;  --tag-rose: #F4A6CB;  --tag-rose-soft: #3F2032;
      --material: rgb(14 16 19 / .92);  --scrim: rgb(0 0 0 / .60);  --scrim-canvas: color-mix(in srgb, var(--bg), black 60%);  --sheet-grouped: var(--surface-raised);  --sheet-grouped-row: var(--field-bg);
      --shadow-1: 0 0 0 1px var(--border), inset 0 1px 0 rgb(255 255 255 / .03);
      --shadow-2: 0 0 0 1px var(--border-strong), inset 0 1px 0 rgb(255 255 255 / .04), 0 6px 16px -4px rgb(0 0 0 / .5);
      --shadow-3: 0 0 0 1px rgb(255 255 255 / .09), 0 16px 36px -8px rgb(0 0 0 / .65);
      --shadow-4: 0 0 0 1px rgb(255 255 255 / .09), 0 32px 72px -16px rgb(0 0 0 / .75);
      --shadow-float: var(--shadow-3);  --shadow-sheet: var(--shadow-4);
      --shadow-thumb: 0 0 0 .5px rgb(255 255 255 / .10), 0 1px 3px rgb(0 0 0 / .45);
      --shadow-field: none;
      --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239498A0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E");
    }
  }

  /* ---- Theme-independent scales ---- */
  :root {
    /* Type: one family (SF on Apple devices, Inter everywhere else) and eight steps,
       each with its line height and tracking. */
    --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", system-ui,
      "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    --fs-11: 11px;  --lh-11: 13px;  --ls-11: .006em;    /* tab bar labels, counts */
    --fs-12: 12px;  --lh-12: 16px;  --ls-12: .002em;    /* captions, table headers, chips, axes */
    --fs-13: 13px;  --lh-13: 18px;  --ls-13: -.004em;   /* second lines, help, meta, small buttons */
    --fs-15: 15px;  --lh-15: 20px;  --ls-15: -.009em;   /* body, rows, cells, buttons */
    --lh-15-prose: 22px;                                 /* 15 px running text of several lines (help, empty states) */
    --fs-17: 17px;  --lh-17: 22px;  --ls-17: -.013em;   /* phone rows and inputs, card titles */
    --fs-20: 20px;  --lh-20: 25px;  --ls-20: -.017em;   /* section and sheet titles */
    --fs-28: 28px;  --lh-28: 34px;  --ls-28: -.021em;   /* page titles; tile figures on phones */
    --fs-34: 34px;  --lh-34: 40px;  --ls-34: -.022em;   /* tile figures on desktop */
    /* The older names map onto the eight steps (14 is 15, 16 is 17, 22 is 20, 30 is 28). */
    --fs-caption2: var(--fs-11);
    --fs-caption: var(--fs-12);
    --fs-footnote: var(--fs-13);
    --fs-subhead: var(--fs-15);
    --fs-body: var(--fs-15);
    --fs-callout: var(--fs-17);
    --fs-headline: var(--fs-17);
    --fs-title3: var(--fs-20);
    --fs-title2: var(--fs-20);
    --fs-title1: var(--fs-28);
    --fs-large: var(--fs-28);          /* page titles, every page */
    --fs-figure: var(--fs-28);
    --fs-hero: var(--fs-34);

    /* Radii: shape says what a thing is. */
    --r-xs: 6px;                       /* keycaps, the checkbox */
    --r-sm: 8px;                       /* icon tiles, nav, menu and palette items */
    --r-field: 10px;                   /* fields, selects, search, date, stepper */
    --r-float: 14px;                   /* menus, popovers, toasts */
    --r-card: 16px;                    /* cards, tiles, tables, grouped lists, alerts */
    --r-group: var(--r-card);          /* grouped lists match the cards beside them */
    --r-sheet: 20px;                   /* sheets and the palette */
    --r-pill: 999px;                   /* buttons, chips, badges, segmented, switches, bars */

    /* Space: the 4 pt grid (4, 8, 12, 16, 20, 24, 32, 40, 48, 64). */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
    --sp-6: 24px; --sp-7: 28px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;

    /* Motion: 150 / 200 / 250 ms; out for entrances, in for exits, the sheet curve for sheets. */
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --ease-in: cubic-bezier(.4, 0, 1, 1);
    --ease-sheet: cubic-bezier(.32, .72, 0, 1);
    --dur-1: 150ms;                    /* colour, background, border, opacity */
    --dur-2: 200ms;                    /* the segmented thumb, menus, popovers, fades */
    --dur-3: 250ms;                    /* sheets, the palette, toasts in */

    /* Icons: five sizes, one optical 1.5 px stroke (stroke = 36 / size on Lucide's 24 grid). */
    --icon-xs: 14px;  --stroke-xs: 2.5;    /* next to 12 to 13 px text: chips, meta */
    --icon-sm: 16px;  --stroke-sm: 2.25;   /* buttons, next to 15 px text */
    --icon-md: 18px;  --stroke-md: 2;      /* rows, menus, the sidebar */
    --icon-lg: 20px;  --stroke-lg: 1.8;    /* the top bar, period arrows */
    --icon-xl: 24px;  --stroke-xl: 1.5;    /* the tab bar, the back chevron */

    /* Layout. */
    --sidebar-w: 260px;
    --bar-h: 52px;
    --tabbar-h: 49px;
    --content-max: 1280px;             /* reading pages and dashboards */
    --content-page: 1280px;            /* the width every page's left edge follows (never overridden) */
    --content-narrow: 760px;           /* list and form pages (.page--narrow) */
    --content-wide: 1440px;            /* dashboards from a 1,760 px viewport (.page--dashboard) */
    --gutter: 16px;
    /* The inside edge of a card: row padding, card padding and inset dividers all start here. */
    --pad-card: 16px;

    /* Controls: one height per density (44 on touch, 36 with a mouse). */
    --control-h: 44px;
    --control-h-sm: 36px;              /* small buttons; a 44 px hit area stays */
    --control-h-lg: 50px;
    --hit: 44px;                       /* the smallest touch target */
    --hairline-w: 1px;                 /* hairlines are 1 px everywhere */
  }
  @media (min-width: 768px) { :root { --gutter: 24px; --pad-card: 20px; } }
  @media (min-width: 1024px) { :root { --gutter: 32px; } }
  @media (min-width: 768px) and (pointer: fine) {
    :root { --control-h: 36px; --control-h-sm: 28px; --control-h-lg: 44px; }
  }

  /* The tracking above is Inter's own curve. WebKit (Safari, every iPhone browser) renders the
     system font (SF), which already carries Apple's size-specific tracking: the Inter curve on top
     of it would tighten every line twice. There the steps keep only a hair on the large titles. */
  @supports (font: -apple-system-body) {
    :root {
      --ls-11: 0; --ls-12: 0; --ls-13: 0; --ls-15: 0; --ls-17: 0;
      --ls-20: -.005em; --ls-28: -.01em; --ls-34: -.012em;
    }
  }

  /* Increase Contrast: a deeper blue, firmer lines and secondary ink. */
  @media (prefers-contrast: more) {
    :root, [data-theme="light"] {
      --accent: #0052A8; --accent-fill: #0052A8; --accent-hover: #00468F; --accent-active: #003C7B; --focus: #0052A8;
      --ink-2: #464A52; --ink-3: #464A52;
      --line: #C4C7CD; --border: #A1A5AB; --border-strong: #82868E; --field-border: #82868E;
    }
    [data-theme="dark"] {
      --accent: #8CBBFF; --focus: #8CBBFF; --ink-2: #D2D4D9; --ink-3: #D2D4D9;
      --line: #3F4248; --border: #5F636A; --border-strong: #767A82; --field-border: #767A82;
    }
  }
  @media (prefers-contrast: more) and (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --accent: #8CBBFF; --focus: #8CBBFF; --ink-2: #D2D4D9; --ink-3: #D2D4D9;
      --line: #3F4248; --border: #5F636A; --border-strong: #767A82; --field-border: #767A82;
    }
  }

  /* The operating system's Reduce Transparency: the two bars become the solid canvas. */
  @media (prefers-reduced-transparency: reduce) {
    :root { --material: var(--bg); }
  }
  :root[data-transparency="reduced"] { --material: var(--bg); }

  @media (prefers-reduced-motion: reduce) {
    :root { --dur-1: 1ms; --dur-2: 1ms; --dur-3: 1ms; }
  }
}

/* ------------------------------------------------------------------- base */
@layer base {
  html {
    background: var(--bg);
    color: var(--ink);
    scroll-padding-top: calc(var(--bar-h) + 12px);
    scroll-padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 12px);
  }
  @media (min-width: 1024px) { html { scroll-padding-bottom: 12px; } }
  /* The page behind an open sheet, menu sheet or the palette never scrolls. */
  html:has(dialog[open]) { overflow: hidden; }
  /* Under a sheet or the palette the canvas dims with the page, so the scrollbar gutter (which the
     ::backdrop does not cover) never shows as a bright strip at the right edge. */
  html { transition: background-color var(--dur-3) var(--ease-out); }
  html:has(dialog[open]) { background-color: var(--scrim-canvas); }
  body {
    min-height: 100dvh;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--fs-15);
    line-height: var(--lh-15);
    letter-spacing: var(--ls-15);
    font-synthesis-weight: none;
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
  /* A themed subtree (design reference) paints its own ink. */
  [data-theme]:not(:root) { color: var(--ink); }

  h1, h2, h3, h4 { font-weight: 600; text-wrap: balance; }
  p, li, dd { text-wrap: pretty; }
  strong, b { font-weight: 600; }
  small { font-size: var(--fs-13); line-height: var(--lh-13); }
  hr { border: 0; height: 1px; background: var(--line); margin: var(--sp-4) 0; }
  code, kbd, samp, pre { font-family: var(--font-mono); font-size: .92em; }
  abbr[title] { text-decoration: none; cursor: help; }
  a:where(:not([class])) { color: var(--accent); }
  @media (hover: hover) { a:where(:not([class])):hover { text-decoration: underline; text-underline-offset: 3px; } }

  /* Every number is tabular; "case" lifts / ( ) - to figure height in "869/1,260" and "(20%)". */
  .num, .is-num, table, .metric-cell, .list__trail, .kv dd, .badge, .chip, .age, .stat__figure,
  .chart__y, .chart__x, .figure { font-variant-numeric: tabular-nums; }
  .num, .is-num, .metric-cell, .stat__figure, .figure, .chart__y, .chart__x { font-feature-settings: "case"; }

  /* One focus ring everywhere: 2 px of the accent, 2 px out, round where the thing is round. */
  :focus-visible, .is-focus { outline: 2px solid var(--focus); outline-offset: 2px; }
  :focus:not(:focus-visible) { outline: none; }
  a:is(:focus-visible, .is-focus) { border-radius: 4px; }
  ::selection { background: var(--accent-soft-hover); color: inherit; }

  /* Designed scrollbars, with a mouse only (touch screens keep their overlay scrollbars, which
     take no width): 12 px, a rounded thumb in the border colour inside a 3 px clear edge, and a
     stable gutter so pages do not shift. Browsers without ::-webkit-scrollbar (Firefox) get the
     thin standard one in the same colour. */
  @media (hover: hover) and (pointer: fine) {
    html { scrollbar-gutter: stable; }
    ::-webkit-scrollbar { width: 12px; height: 12px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: var(--r-pill); background: var(--border-strong) padding-box; }
    ::-webkit-scrollbar-thumb:hover { background-color: var(--ink-4); }
    ::-webkit-scrollbar-corner { background: transparent; }
    @supports not selector(::-webkit-scrollbar) {
      :root { scrollbar-color: var(--border-strong) transparent; }
    }
  }

  .visually-hidden, table.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  /* A hidden table ignores its 1 px box: as a block it cannot stretch the page. */
  table.visually-hidden { display: block; }
  .skip-link {
    position: fixed; z-index: 1000; top: 12px; left: 12px;
    padding: 10px 20px; border-radius: var(--r-pill);
    background: var(--accent-fill); color: var(--on-accent); font-weight: 600;
    translate: 0 -200%;
  }
  .skip-link:focus-visible { translate: 0 0; }

  /* Icons: Lucide line icons from the sprite. Size with --icon, weight with --icon-stroke,
     always as one of the five pairs (18 and 2 by default). */
  .icon {
    width: var(--icon, var(--icon-md)); height: var(--icon, var(--icon-md));
    flex: none;
    fill: none; stroke: currentColor;
    stroke-width: var(--icon-stroke, var(--stroke-md));
    stroke-linecap: round; stroke-linejoin: round;
    vertical-align: middle;
  }

  kbd {
    display: inline-grid; place-items: center;
    min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: var(--r-xs);
    background: var(--fill-1);
    font: 500 var(--fs-11)/1 var(--font-sans);
    letter-spacing: 0;
    color: var(--ink-2);
  }
}

/* ----------------------------------------------------------------- layout */
@layer layout {
  /* ---- Shell ---------------------------------------------------------------
     <div class="app"> holds the sidebar and the main column. The tab bar,
     sheets, menus and toasts are siblings of .app. */
  .app { min-height: 100dvh; }

  /* ---- Sidebar (1024 px and up) -------------------------------------------
     The canvas itself with a hairline edge: the brand, the search field, the
     destinations (grey icons; the current one a raised white pill with a blue
     icon) and the account at the bottom. No solid blue slab competes with the
     page's own primary button. */
  .sidebar {
    position: fixed; z-index: 40; inset: 0 auto 0 0;
    width: var(--sidebar-w);
    display: none; flex-direction: column;
    background: var(--sidebar);
    box-shadow: inset -1px 0 0 var(--border);
  }
  .sidebar__head { padding: 20px 12px 16px; }
  .brand { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 40px; padding: 0 4px 0 10px; border-radius: var(--r-sm); color: var(--ink); }
  .brand__text { display: grid; min-width: 0; }
  .brand__logo { display: block; aspect-ratio: 3000 / 644; margin-left: 5px; height: 34px; width: auto; color: var(--logo-ink); }
  .brand > .app-icon { display: none; }
  .brand__name { font-size: var(--fs-15); line-height: var(--lh-15); font-weight: 600; letter-spacing: var(--ls-15); }
  .brand__sub { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); }
  .sidebar__search { padding: 0 12px 16px; }
  .sidebar__scroll {
    flex: 1; min-height: 0;
    overflow-y: auto; overscroll-behavior: contain;
    padding: 0 12px 12px;
    scrollbar-width: none;
  }
  .sidebar__scroll::-webkit-scrollbar { display: none; }
  .sidebar__foot { padding: 8px 12px 12px; }

  .nav { display: grid; gap: 2px; }
  .nav + .nav { margin-top: 2px; }
  .nav__item {
    position: relative;
    display: flex; align-items: center; gap: 12px;
    min-height: 36px; padding: 0 10px;
    border-radius: var(--r-sm);
    font-size: var(--fs-15); line-height: var(--lh-15); font-weight: 500; letter-spacing: var(--ls-15);
    color: var(--ink-2);
    transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
  }
  .nav__item > .icon { --icon: var(--icon-md); --icon-stroke: var(--stroke-md); color: var(--ink-3); }
  @media (hover: hover) { .nav__item:hover { background: var(--sidebar-hover); color: var(--ink); } }
  .nav__item[aria-current="page"], .nav__item.is-current-parent {
    background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-1);
  }
  .nav__item[aria-current="page"] > .icon, .nav__item.is-current-parent > .icon { color: var(--accent); }
  .nav__item:focus-visible { outline-offset: -2px; }
  .nav__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav__badge { font-size: var(--fs-13); line-height: var(--lh-13); font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }
  .nav__item[aria-current="page"] .nav__badge, .nav__item.is-current-parent .nav__badge { color: var(--ink-2); }
  .nav__sub { display: grid; gap: 2px; padding: 4px 0 8px; }
  .nav__subitem {
    display: flex; align-items: center; gap: 8px;
    min-height: 32px; padding: 0 10px 0 40px;
    border-radius: var(--r-sm);
    font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-2);
    transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
  }
  @media (hover: hover) { .nav__subitem:hover { background: var(--sidebar-hover); color: var(--ink); } }
  .nav__subitem[aria-current="page"] { color: var(--ink); font-weight: 600; }
  .nav__subitem > .icon { --icon: var(--icon-xs); --icon-stroke: var(--stroke-xs); color: var(--ink-3); margin-left: -22px; }

  .sidebar__account {
    display: flex; align-items: center; gap: 12px;
    width: 100%; padding: 8px 10px;
    border-radius: var(--r-sm);
    text-align: left;
    transition: background-color var(--dur-1) var(--ease-out);
  }
  .sidebar__account[aria-expanded="true"] { background: var(--sidebar-hover); }
  @media (hover: hover) { .sidebar__account:hover { background: var(--sidebar-hover); } }
  .sidebar__account:focus-visible { outline-offset: -2px; }
  .sidebar__account-text { display: grid; min-width: 0; flex: 1; }
  .sidebar__name { font-size: var(--fs-13); line-height: var(--lh-13); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sidebar__role { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sidebar__account > .icon { --icon: var(--icon-sm); --icon-stroke: var(--stroke-sm); color: var(--ink-4); }

  /* ---- Main column and top bar ---------------------------------------------
     The top bar is transparent at the top of the page and turns into the
     material, with the page's name centred, once the title scrolls under it
     (html.is-scrolled, from app.js). */
  .main { min-width: 0; min-height: 100dvh; display: flex; flex-direction: column; }
  .topbar {
    position: sticky; top: 0; z-index: 30;
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px;
    height: var(--bar-h);
    padding-inline: max(calc(var(--gutter) - 8px), calc((100% - var(--content-max)) / 2 + var(--gutter) - 8px));
    transition: background-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
  }
  :root.is-scrolled .topbar {
    background: var(--material);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    box-shadow: inset 0 -1px 0 var(--line);
  }
  /* Added to the Home Screen (standalone): the bar clears the status bar. */
  @media (display-mode: standalone) {
    .topbar { height: calc(var(--bar-h) + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); }
  }
  .topbar__lead { grid-column: 1; min-width: 0; display: flex; align-items: center; }
  /* The back button shrinks (its label ends in "…") rather than running under the title. */
  .topbar__lead > nav { min-width: 0; }
  /* Until the title shows in the bar, the back button may use the width the actions leave; once the
     page scrolls the columns are even again, so the title stays centred and the label stops short of it. */
  :root:not(.is-scrolled) .topbar { grid-template-columns: minmax(0, 1fr) 0 auto; }
  .topbar__title {
    grid-column: 2; grid-row: 1;
    max-width: 50vw;
    font-size: var(--fs-17); line-height: var(--lh-17); font-weight: 600; letter-spacing: var(--ls-17);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    opacity: 0; transition: opacity var(--dur-2) var(--ease-out);
    pointer-events: none;
  }
  :root.is-scrolled .topbar__title { opacity: 1; }
  /* Phones: the centred name leaves room for two 44 px buttons on each side (the bar's padding, its two gaps
     and 2 x 92 px), so it never runs under the buttons; a longer name ends in "…". */
  @media (max-width: 767px) { .topbar__title { max-width: calc(100vw - 216px); } }
  .topbar__actions { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 4px; }
  .topbar__actions .icon-btn { color: var(--accent); }
  @media (hover: hover) { .topbar__actions .icon-btn:hover { background: var(--fill-1); color: var(--accent); } }
  .topbar__actions .icon-btn .icon { --icon: var(--icon-lg); --icon-stroke: var(--stroke-lg); }

  /* The breadcrumb is one back button to the nearest parent ("‹ Clients"),
     as on iPhone. The rest of the trail stays in the markup for screen readers
     only where it is the parent; the current page is the large title. */
  .crumbs { display: flex; align-items: center; min-width: 0; }
  .crumbs li { display: none; min-width: 0; }
  .crumbs li.is-parent { display: flex; }
  .crumbs li.is-parent a {
    position: relative;
    display: inline-flex; align-items: center;
    /* The full width of its item plus the 8 px it pulls left, so a label that fits is never cut. */
    min-width: 0; max-width: calc(100% + 8px); min-height: var(--hit);
    margin-left: -8px; padding: 0 10px 0 2px;
    border-radius: var(--r-pill);
    font-size: var(--fs-17); line-height: var(--lh-17); letter-spacing: var(--ls-17); color: var(--accent);
    transition: background-color var(--dur-1) var(--ease-out);
  }
  @media (hover: hover) { .crumbs li.is-parent a:hover { background: var(--accent-soft); } }
  .crumbs__back-icon { --icon: var(--icon-xl); --icon-stroke: var(--stroke-xl); color: var(--accent); }
  .crumbs__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  @media (min-width: 768px) {
    .topbar__title { font-size: var(--fs-15); line-height: var(--lh-15); letter-spacing: var(--ls-15); }
    .crumbs li.is-parent a { font-size: var(--fs-15); line-height: var(--lh-15); letter-spacing: var(--ls-15); min-height: var(--control-h); padding-right: 12px; }
    .crumbs__back-icon { --icon: var(--icon-lg); --icon-stroke: var(--stroke-lg); }
  }

  /* ---- Page ----------------------------------------------------------------
     Three widths: list and form pages (.page--narrow, 760), reading pages
     (1,280) and dashboards (.page--dashboard: 1,280, then 1,440 from a 1,760 px
     viewport). The top bar follows the page's width, so the back button and
     the title share one left edge. */
  .page {
    width: 100%;
    max-width: calc(var(--content-max) + var(--gutter) * 2);
    margin-inline: auto;
    padding: 0 var(--gutter) calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 40px);
  }
  .main:has(> .page--narrow), .page--narrow { --content-max: var(--content-narrow); }
  /* A narrow page keeps the left edge of every other page, so a title never jumps sideways between
     sibling pages: its 760 px column starts where a 1,280 px page starts, and the top bar with it. */
  .main > .page--narrow { margin-inline: max(0px, calc((100% - var(--content-page)) / 2 - var(--gutter))) auto; }
  .main:has(> .page--narrow) > .topbar {
    padding-inline: max(calc(var(--gutter) - 8px), calc((100% - var(--content-page)) / 2 + var(--gutter) - 8px));
  }
  @media (min-width: 1760px) {
    .main:has(> .page--dashboard), .page--dashboard { --content-max: var(--content-wide); }
  }
  .page > * + * { margin-top: var(--sp-8); }
  .page > .page-head + * { margin-top: var(--sp-6); }
  .page > .tabs + * { margin-top: var(--sp-6); }
  .page > .alert + .page-head, .page > .banner + .page-head { margin-top: var(--sp-6); }
  /* Wide pages (boards) use the whole width. */
  .page--wide { max-width: none; }

  /* A titled group of content: the 20 px title on the canvas, flush with the cards
     under it, and a quiet meta at the right. */
  .section { --_gap: var(--sp-3); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--_gap); min-width: 0; }
  .section__head {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
    gap: 4px 12px;
  }
  .section__title { font-size: var(--fs-20); line-height: var(--lh-20); font-weight: 600; letter-spacing: var(--ls-20); }
  .section__meta { font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-2); font-variant-numeric: tabular-nums; }

  /* Grids. Content grids use container queries, never page breakpoints. */
  .grid { display: grid; gap: var(--sp-8) var(--sp-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
  .grid--split { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .grid--halves { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-wrap { container: grid / inline-size; }
  @container grid (width < 880px) {
    .grid--split, .grid--halves { grid-template-columns: minmax(0, 1fr); }
    /* A split whose aside comes first once it stacks (Needs attention above the Month card). */
    .grid--aside-first > :last-child { order: -1; }
  }

  /* ---- Phone tab bar (below 1024 px) ---------------------------------------
     The material with a hairline on top: the role's destinations (at most five,
     no More; Settings is behind your picture beside the large title). 24 px
     icons at the one optical stroke, 11 px labels, the current in blue. */
  .tabbar {
    position: fixed; z-index: 40; inset: auto 0 0 0;
    padding-bottom: max(2px, env(safe-area-inset-bottom));
    background: var(--material);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    box-shadow: inset 0 1px 0 var(--line);
  }
  .tabbar__bar {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    max-width: 480px; height: var(--tabbar-h);
    margin: 0 auto;
  }
  .tabbar__item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-width: 0; padding-top: 1px;
    font-size: var(--fs-11); line-height: var(--lh-11); font-weight: 500; letter-spacing: var(--ls-11);
    color: var(--ink-3);
    transition: color var(--dur-1) var(--ease-out), opacity var(--dur-1) var(--ease-out);
  }
  .tabbar__item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabbar__item .icon { --icon: var(--icon-xl); --icon-stroke: var(--stroke-xl); }
  .tabbar__item:active { opacity: .6; }
  .tabbar__item:focus-visible { outline-offset: -2px; border-radius: var(--r-sm); }
  .tabbar__item[aria-current="page"] { color: var(--accent); }

  @media (min-width: 1024px) {
    .sidebar { display: flex; }
    .main { margin-left: var(--sidebar-w); }
    .tabbar, .topbar__search { display: none; }
    .page { padding-bottom: 64px; }
  }

  /* ---- Compact sidebar (Cmd/Ctrl-\ or the account menu; kept per device) ----------------------
     The same column narrowed to its icons. Labels stay the links' names
     (visually hidden) and show as tooltips beside the column (app.js,
     data-rail-tip); a count becomes a small grey dot. */
  @media (min-width: 1024px) {
    :root[data-sidebar="rail"] { --sidebar-w: 72px; }
    :root[data-sidebar="rail"] .sidebar__head { padding-inline: 16px; }
    :root[data-sidebar="rail"] .brand { justify-content: center; padding: 0; }
    :root[data-sidebar="rail"] .brand > .app-icon { display: grid; }
    :root[data-sidebar="rail"] .brand__logo { display: none; }
    :root[data-sidebar="rail"] :is(.brand__text, .search-trigger > span, .search-trigger > kbd, .nav__sub,
                                   .sidebar__account-text, .sidebar__account > .icon) { display: none; }
    :root[data-sidebar="rail"] :is(.sidebar__search, .sidebar__scroll, .sidebar__foot) { padding-inline: 12px; }
    :root[data-sidebar="rail"] .search-trigger { justify-content: center; padding: 0; }
    :root[data-sidebar="rail"] .nav__item { justify-content: center; min-height: 40px; padding: 0; }
    :root[data-sidebar="rail"] .nav__label {
      position: absolute; width: 1px; height: 1px; overflow: hidden;
      clip-path: inset(50%); white-space: nowrap;
    }
    :root[data-sidebar="rail"] .nav__badge {
      position: absolute; top: 8px; right: 8px;
      width: 8px; height: 8px; overflow: hidden;
      border-radius: 50%; background: var(--ink-3);
      font-size: 0; color: transparent;
    }
    :root[data-sidebar="rail"] .sidebar__account { justify-content: center; padding-inline: 0; }
  }

  /* ---- Sign-in and public pages --------------------------------------------
     The canvas, a column top-aligned at the same height on every step of a flow
     (so the icon never jumps), a quiet footer. Public pages have a top bar with
     the logo and the theme button; sign-in pages have none. From 768 px the
     sign-in column sits on a raised card. */
  .auth {
    min-height: 100dvh;
    display: grid; grid-template-rows: auto 1fr auto;
    padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  }
  .auth:not(:has(> .auth__top)) { grid-template-rows: 1fr auto; }
  .auth__scene { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
  .auth__top {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: min(100%, calc(var(--content-max) + var(--gutter) * 2)); margin: 0 auto;
    min-height: 64px; padding: 8px var(--gutter);
  }
  .auth__tools { display: flex; align-items: center; gap: 8px; }
  .auth__tools .icon-btn { color: var(--ink-2); }
  .auth__top .lockup { --logo-h: 32px; }
  .auth__main {
    display: grid; align-content: start; justify-content: center; justify-items: center; gap: var(--sp-5);
    width: 100%; padding: var(--sp-8) var(--gutter) var(--sp-10);
  }
  .auth:not(:has(> .auth__top)) .auth__main { padding-top: clamp(48px, 12vh, 120px); }
  .auth__main--wide { justify-content: stretch; justify-items: stretch; width: min(720px, 100%); margin-inline: auto; }
  .auth__foot {
    display: grid; justify-items: center; gap: 4px;
    padding: 16px var(--gutter) 32px;
    font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); text-align: center;
  }
  /* Footer links keep their line but get a 44 px tall target. */
  .auth__foot a, .auth__help a { display: inline-block; padding-block: 14px; margin-block: -14px; color: var(--accent); }
  @media (hover: hover) { .auth__foot a:hover, .auth__help a:hover { text-decoration: underline; text-underline-offset: 3px; } }
  .auth__foot .test-flag { font-size: inherit; }
  .auth__help { font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-2); text-align: center; }
}

/* ------------------------------------------------------------- components */
@layer components {

  /* ---- App icon: the Icebreaker mark on its own, no tile (as the brand icon file): navy on light,
     white on dark (--logo-ink). ---- */
  .app-icon {
    --size: 32px;
    display: grid; place-items: center; flex: none;
    width: var(--size); height: var(--size);
    color: var(--logo-ink);
  }
  .app-icon svg { width: calc(var(--size) * .9); height: calc(var(--size) * .9); overflow: visible; }
  .app-icon--lg { --size: 56px; border-radius: 14px; }

  /* ---- Page header -------------------------------------------------------------
     The title (28/34 700 on every page), one line of context, then the controls
     that change this page and the one primary action. With a period the controls
     get their own row (segmented control left, period and actions right). */
  .page-head {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
    gap: var(--sp-4) var(--sp-6);
  }
  .page-head__main { flex: 1 1 320px; min-width: 0; display: flex; align-items: center; gap: var(--sp-3); }
  .page-head__titles { min-width: 0; }
  .page-head__eyebrow { margin-bottom: 4px; font-size: var(--fs-13); line-height: var(--lh-13); font-weight: 500; color: var(--ink-2); }
  .page-head__title {
    font-size: var(--fs-28); line-height: var(--lh-28);
    font-weight: 700; letter-spacing: var(--ls-28);
    overflow-wrap: break-word;
  }
  .page-head__sub {
    margin-top: 4px;
    font-size: var(--fs-15); line-height: var(--lh-15); color: var(--ink-2);
    text-wrap: balance;
  }
  /* A chip or a status in the subtitle is the attention signal: plain coloured words. */
  .page-head__sub > :is(.chip, .status) {
    height: auto; min-height: 0; padding-block: 0; padding-right: 0; border-radius: 0;
    background: none; box-shadow: none; font: inherit; font-weight: 500; letter-spacing: inherit;
  }
  .page-head__sub > :is(.chip, .status) .icon { display: none; }
  @media (hover: hover) { .page-head__sub a.chip:hover { text-decoration: underline; text-underline-offset: 3px; } }
  .page-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
  /* In the header every action but the one primary (and tinted second actions) reads as plain blue text. */
  .page-head__actions :is(.btn:not(.btn--primary, .btn--secondary, .btn--danger, .btn--danger-quiet, .btn--float, .btn--card, .filter-btn)) {
    --_px: 10px; background: transparent; color: var(--accent); padding-inline: var(--_px);
  }
  @media (hover: hover) { .page-head__actions :is(.btn:not(.btn--primary, .btn--secondary, .btn--danger, .btn--danger-quiet, .btn--float, .btn--card, .filter-btn)):hover { background: var(--accent-soft); } }
  .page-head__actions :is(.btn:not(.btn--primary, .btn--secondary, .btn--danger, .btn--danger-quiet, .btn--float, .btn--card, .filter-btn)):active { background: var(--accent-soft-hover); }
  .page-head__actions .icon-btn { color: var(--accent); }
  .page-head__actions:not(:has(> .icon-btn[aria-haspopup="menu"])) > .btn:last-child:not(.btn--primary, .btn--secondary, .btn--danger, .btn--danger-quiet, .btn--float, .btn--card, .filter-btn, .ws-admin) { margin-right: calc(var(--_px) * -1); }
  /* An overflow "…" comes after the other actions, as in every toolbar (AR-23). */
  .page-head__actions > .icon-btn[aria-haspopup="menu"] { order: 99; }
  @media (hover: hover) { .page-head__actions .icon-btn:hover { background: var(--accent-soft); color: var(--accent); } }
  form.page-head__actions { flex: 1 1 100%; }
  form.page-head__actions > .period { margin-left: auto; }
  form.page-head__actions > .segmented:only-of-type { min-width: 264px; }
  @media (max-width: 767px) {
    .page-head { gap: var(--sp-4); }
    .page-head__main { flex-basis: 100%; }
    /* Long titles stop at two lines on a phone. */
    .page-head__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
    .page-head__actions { flex: 1 1 100%; }
    /* An actions row with nothing to show on a phone (Download PDF is desktop only; the Admin menu is
       in the top bar) takes no room, so the header's row gap never opens under the title. */
    .page-head__actions:not(:has(> :not(.hide-phone, [hidden], .ws-admin))) { display: none; }
    /* Optical alignment: a leading plain action ("Plans 1") starts at the text edge, like the title. */
    .page-head__actions > .btn:first-child:not(.btn--primary, .btn--secondary, .btn--danger, .btn--danger-quiet, .btn--float, .btn--card, .filter-btn, .ws-admin) { margin-left: calc(var(--_px) * -1); }
    .page-head__actions > .btn--float { order: -1; flex: 1 1 100%; }
    /* Only icon buttons beside it ("…"): they share the button's row. */
    .page-head__actions:not(:has(> :not(.btn--float, .icon-btn))) > .btn--float { flex: 1 1 0; }
    .page-head__actions > .btn--primary:only-child { flex: 1 1 100%; }
    .page-head__actions > .segmented, form.page-head__actions > .segmented { flex: 1 1 100%; }
    form.page-head__actions > .period { flex: 1 1 auto; justify-content: center; margin: 0; }
    .page-head__actions > .period:only-child, .page-head__actions > .period:first-child:has(+ .btn--float) { flex: 1 1 100%; justify-content: center; }
    .page-head .monogram--lg, .page-head .avatar--lg { --size: 48px; }
  }

  /* Title menu: the page title doubles as a switcher (MedStaff ⌃⌄). */
  .title-menu {
    display: inline-flex; align-items: center; gap: 4px;
    margin: 0 -8px; padding: 0 8px;
    border-radius: var(--r-sm);
    font: inherit; letter-spacing: inherit; text-align: left;
    transition: background-color var(--dur-1) var(--ease-out);
  }
  @media (hover: hover) { .title-menu:hover { background: var(--fill-1); } }
  .title-menu:active { background: var(--fill-2); }
  .title-menu .icon { --icon: var(--icon-lg); --icon-stroke: var(--stroke-lg); color: var(--ink-3); }

  /* "Synced with Close 4 min ago": plain words; stale reads amber. */
  .sync--stale { color: var(--warn-text); }

  /* The test copy flag: a quiet word ("Test copy"). */
  .test-flag { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); white-space: nowrap; }
  .test-flag .icon { --icon: var(--icon-xs); --icon-stroke: var(--stroke-xs); }

  /* ---- Buttons ------------------------------------------------------------------
     Capsules with one weight (500), one icon gap (6 px) and one height per
     density: 44 on touch, 36 with a mouse (small 36 / 28 with a 44 px hit area,
     large 50 / 44).
       primary       the accent fill: the page's one main action
       secondary     the accent tint: second actions, empty-state actions
       quiet         a neutral fill (the default): Cancel, neutral actions
       plain         accent text, a tint on hover: header links, row actions
       card          the surface with an edge: buttons on the canvas (Continue with Google)
       danger        the red fill: the confirm of a destructive sheet
       danger-quiet  the red tint: "Delete metric" rows
     Disabled is the quiet fill with --ink-4 text for every variant: never a faded colour.
     .is-hover / .is-pressed / .is-focus draw a state statically (the styleguide). */
  .btn {
    --_h: var(--control-h);
    --_px: 16px;
    position: relative;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: var(--_h); min-width: 0;
    padding: 0 var(--_px);
    border-radius: var(--r-pill);
    background: var(--fill-1); color: var(--ink);
    font-size: var(--fs-15); line-height: var(--lh-15); font-weight: 500; letter-spacing: var(--ls-15);
    text-align: center; white-space: nowrap;   /* a capsule is one line: a label never wraps inside it */
    user-select: none; -webkit-user-select: none;
    transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out),
      box-shadow var(--dur-1) var(--ease-out), scale var(--dur-1) var(--ease-out);
  }
  @media (min-width: 768px) and (pointer: fine) { .btn { --_px: 14px; } }
  .btn.is-hover { background: var(--fill-2); }
  @media (hover: hover) { .btn:hover { background: var(--fill-2); } }
  .btn:is(:active, .is-pressed) { background: var(--fill-3); scale: .98; }
  .btn .icon { --icon: var(--icon-sm); --icon-stroke: var(--stroke-sm); }
  /* A trailing chevron or arrow (icon_end): Lucide draws it with about 6 px of air on its left, so the
     gap is pulled in to look like the leading icon's. */
  .btn > .btn__icon-end { margin-inline: -3px -2px; }
  /* Plain buttons that start or end a row sit on the text edge (their 10 to 12 px padding hangs
     outside it), as iOS aligns a bar's text buttons. */
  :is(.card__foot, .card__bar, .section__head, .alert__actions, .form-actions) > .btn--plain:last-child { margin-right: calc(var(--_px) * -1); }
  :is(.card__foot, .card__bar, .section__head) > .btn--plain:first-child { margin-left: calc(var(--_px) * -1); }
  .btn--primary { background: var(--accent-fill); color: var(--on-accent); }
  .btn--primary.is-hover { background: var(--accent-hover); }
  @media (hover: hover) { .btn--primary:hover { background: var(--accent-hover); } }
  .btn--primary:is(:active, .is-pressed) { background: var(--accent-active); }
  .btn--secondary { background: var(--accent-soft); color: var(--accent); }
  .btn--secondary:is(:active, .is-hover, .is-pressed) { background: var(--accent-soft-hover); }
  @media (hover: hover) { .btn--secondary:hover { background: var(--accent-soft-hover); } }
  .btn--quiet { background: var(--fill-1); color: var(--ink); }
  .btn--plain { --_px: 10px; background: transparent; color: var(--accent); }
  .btn--plain.is-hover { background: var(--accent-soft); }
  @media (hover: hover) { .btn--plain:hover { background: var(--accent-soft); } }
  .btn--plain:is(:active, .is-pressed) { background: var(--accent-soft-hover); }
  .btn--danger { background: var(--danger-fill); color: var(--on-accent); }
  .btn--danger:is(:active, .is-hover, .is-pressed) { background: var(--danger-fill-hover); }
  @media (hover: hover) { .btn--danger:hover { background: var(--danger-fill-hover); } }
  .btn--danger-quiet { background: var(--bad-soft); color: var(--bad-text); }
  .btn--danger-quiet.is-hover { background: color-mix(in srgb, var(--bad-soft), var(--bad) 12%); }
  @media (hover: hover) { .btn--danger-quiet:hover { background: color-mix(in srgb, var(--bad-soft), var(--bad) 12%); } }
  .btn--danger-quiet:is(:active, .is-pressed) { background: color-mix(in srgb, var(--bad-soft), var(--bad) 20%); }
  .btn--card, .btn--google { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
  :is(.btn--card, .btn--google).is-hover { background: var(--surface); box-shadow: var(--shadow-2); }
  @media (hover: hover) { :is(.btn--card, .btn--google):hover { background: var(--surface); box-shadow: var(--shadow-2); } }
  :is(.btn--card, .btn--google):is(:active, .is-pressed) { background: var(--surface-3); box-shadow: var(--shadow-1); }
  /* Inside a surface a card button is the quiet fill. */
  :is(.card, .sheet, .menu, .group) :is(.btn--card, .btn--google) { background: var(--fill-1); box-shadow: none; }
  :is(.card, .sheet, .menu, .group) :is(.btn--card, .btn--google).is-hover { background: var(--fill-2); }
  @media (hover: hover) { :is(.card, .sheet, .menu, .group) :is(.btn--card, .btn--google):hover { background: var(--fill-2); } }
  :is(.card, .sheet, .menu, .group) :is(.btn--card, .btn--google):is(:active, .is-pressed) { background: var(--fill-3); }
  .btn--sm { --_h: var(--control-h-sm); --_px: 12px; font-size: var(--fs-13); line-height: var(--lh-13); letter-spacing: var(--ls-13); }
  .btn--sm .icon { --icon: var(--icon-xs); --icon-stroke: var(--stroke-xs); }
  .btn--sm::after { content: ""; position: absolute; inset: calc((var(--hit) - var(--_h)) / -2) -2px; }
  .btn--lg { --_h: var(--control-h-lg); --_px: 22px; font-size: var(--fs-17); line-height: var(--lh-17); letter-spacing: var(--ls-17); }
  .btn--lg .icon { --icon: var(--icon-md); --icon-stroke: var(--stroke-md); }   /* 18 beside 17 px text */
  @media (min-width: 768px) and (pointer: fine) {
    .btn--lg { font-size: var(--fs-15); line-height: var(--lh-15); letter-spacing: var(--ls-15); }
    .btn--lg .icon { --icon: var(--icon-sm); --icon-stroke: var(--stroke-sm); }
  }
  .btn--block { width: 100%; }
  .btn:disabled, .btn[aria-disabled="true"] {
    background: var(--fill-1); color: var(--ink-4); box-shadow: none; scale: 1;
    cursor: not-allowed; pointer-events: none;
  }
  .btn--plain:disabled, .btn--plain[aria-disabled="true"] { background: transparent; }
  /* Busy: a spinner takes the icon's place and the label stays; a button without an
     icon gives the spinner its padding, so the width never changes. */
  .btn[aria-busy="true"] { pointer-events: none; }
  .btn[aria-busy="true"] > .icon { display: none; }
  .btn[aria-busy="true"] > .spinner { --size: var(--icon-sm); order: -1; color: currentColor; opacity: 1; }
  .btn--sm[aria-busy="true"] > .spinner { --size: var(--icon-xs); }
  .btn[aria-busy="true"]:not(:has(> .icon)) { padding-inline: max(4px, calc(var(--_px) - 11px)); }

  .spinner {
    --size: 18px;
    display: inline-block; width: var(--size); height: var(--size); flex: none;
    border-radius: 50%;
    border: 1.5px solid currentColor; border-right-color: transparent;   /* the icons' 1.5 px stroke */
    opacity: .9;
    animation: spin 800ms linear infinite;
  }
  @keyframes spin { to { rotate: 360deg; } }

  /* ---- Icon buttons ------------------------------------------------------------------
     Round, icon only, always named, as tall as a button. Plain by default; quiet is
     the 30 px grey circle that closes sheets (with a 44 px hit area); accent is
     filled; card is the surface with an edge, on the canvas. */
  .icon-btn {
    --_s: var(--control-h);
    position: relative;
    display: inline-grid; place-items: center; flex: none;
    width: var(--_s); height: var(--_s);
    border-radius: 50%;
    color: var(--ink-2);
    transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), scale var(--dur-1) var(--ease-out);
  }
  .icon-btn .icon { --icon: var(--icon-md); --icon-stroke: var(--stroke-md); }
  .icon-btn.is-hover { background: var(--fill-1); color: var(--ink); }
  @media (hover: hover) { .icon-btn:hover { background: var(--fill-1); color: var(--ink); } }
  .icon-btn:is(:active, .is-pressed) { background: var(--fill-2); scale: .96; }
  .icon-btn--quiet { --_s: 30px; background: var(--fill-1); color: var(--ink-2); }
  .icon-btn--quiet .icon { --icon: var(--icon-xs); --icon-stroke: var(--stroke-xs); }
  .icon-btn--quiet::after { content: ""; position: absolute; inset: -7px; }
  .icon-btn--quiet.is-hover { background: var(--fill-2); }
  @media (hover: hover) { .icon-btn--quiet:hover { background: var(--fill-2); } }
  .icon-btn--quiet:is(:active, .is-pressed) { background: var(--fill-3); }
  .icon-btn--accent { background: var(--accent-fill); color: var(--on-accent); }
  .icon-btn--accent.is-hover { background: var(--accent-hover); color: var(--on-accent); }
  @media (hover: hover) { .icon-btn--accent:hover { background: var(--accent-hover); color: var(--on-accent); } }
  .icon-btn--accent:is(:active, .is-pressed) { background: var(--accent-active); color: var(--on-accent); }
  .icon-btn--card { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
  .icon-btn--card.is-hover { background: var(--surface); box-shadow: var(--shadow-2); }
  @media (hover: hover) { .icon-btn--card:hover { background: var(--surface); box-shadow: var(--shadow-2); } }
  :is(.card, .sheet, .menu, .group) .icon-btn--card { background: var(--fill-1); box-shadow: none; }
  .icon-btn--sm { --_s: var(--control-h-sm); }
  .icon-btn--sm .icon { --icon: var(--icon-sm); --icon-stroke: var(--stroke-sm); }
  .icon-btn--sm::after { content: ""; position: absolute; inset: calc((var(--hit) - var(--_s)) / -2); }
  .icon-btn--lg { --_s: var(--control-h-lg); }
  .icon-btn--lg .icon { --icon: var(--icon-lg); --icon-stroke: var(--stroke-lg); }
  .icon-btn[aria-disabled="true"], .icon-btn:disabled { background: none; color: var(--ink-4); scale: 1; cursor: not-allowed; pointer-events: none; }
  .icon-btn .badge-dot {
    position: absolute; top: 8px; right: 8px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--bad); box-shadow: 0 0 0 2px var(--bg);
  }

  /* Search field (the sidebar's): the surface with an edge, so its label is AA. As a
     button it opens the command palette. */
  .search-trigger {
    display: flex; align-items: center; gap: 8px;
    width: 100%; height: 36px; padding: 0 8px 0 10px;
    border-radius: var(--r-field);
    background: var(--surface); box-shadow: var(--shadow-1);
    color: var(--ink-3);
    font-size: var(--fs-15); line-height: var(--lh-15); text-align: left;
    transition: box-shadow var(--dur-1) var(--ease-out);
  }
  @media (hover: hover) { .search-trigger:hover { box-shadow: var(--shadow-2); } }
  .search-trigger .icon { --icon: var(--icon-sm); --icon-stroke: var(--stroke-sm); }
  .search-trigger span { flex: 1; }

  /* ---- Segmented control ------------------------------------------------------------
     A capsule track (the quiet fill) and a capsule thumb that slides in 200 ms, as
     tall as a button, so it never collapses. Real radio buttons (works without
     JavaScript); the thumb follows :has(). Set --n to the number of options. */
  .segmented {
    --n: 3; --i: 0;
    position: relative;
    display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
    height: var(--control-h); min-height: var(--control-h);
    padding: 3px;
    border-radius: var(--r-pill);
    background: var(--fill-1);
    user-select: none; -webkit-user-select: none;
  }
  .segmented__thumb {
    position: absolute; z-index: 0;
    top: 3px; bottom: 3px; left: 3px;
    width: calc((100% - 6px) / var(--n));
    border-radius: var(--r-pill);
    background: var(--thumb);
    box-shadow: var(--shadow-thumb);
    translate: calc(var(--i) * 100%) 0;
    transition: translate var(--dur-2) var(--ease-out);
  }
  .segmented__item {
    position: relative; z-index: 1;
    /* Flex, centred: a label wider than its share overflows evenly on both sides (never runs into the
       thumb's right edge), and a count bubble sits 6 px after the label. */
    display: flex; align-items: center; justify-content: center; gap: 6px; text-align: center;
    min-width: 64px; padding: 0 14px;
    border-radius: var(--r-pill);
    font-size: var(--fs-15); line-height: var(--lh-15); font-weight: 500; letter-spacing: var(--ls-15);
    color: var(--ink-2);
    white-space: nowrap; cursor: pointer;
    transition: color var(--dur-1) var(--ease-out);
  }
  /* Phones: equal shares of a 358 px track are narrow, so the side padding shrinks to keep long labels
     inside the thumb (the label stays centred either way). */
  @media (max-width: 767px) { .segmented__item { padding: 0 8px; } }
  /* 15 px like the buttons and the period beside it; in a filter bar, with a mouse, 13 like the filter capsules. */
  @media (min-width: 768px) and (pointer: fine) {
    :is(.filterbar, .filterbar__chips) > .segmented .segmented__item { font-size: var(--fs-13); line-height: var(--lh-13); letter-spacing: var(--ls-13); }
  }
  /* The whole track height, and 44 px with a mouse, is the hit area. */
  .segmented__item::after { content: ""; position: absolute; inset: calc(-3px - (var(--hit) - var(--control-h)) / 2) 0; }
  @media (hover: hover) { .segmented__item:hover { color: var(--ink); } }
  .segmented__item input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
  .segmented__item:has(input:checked), .segmented__item[aria-pressed="true"], .segmented__item[aria-selected="true"] { color: var(--ink); font-weight: 600; }
  .segmented__item:has(input:focus-visible), .segmented__item.is-focus { outline: 2px solid var(--focus); outline-offset: -2px; }
  .segmented:has(> .segmented__item:nth-of-type(2) input:checked) { --i: 1; }
  .segmented:has(> .segmented__item:nth-of-type(3) input:checked) { --i: 2; }
  .segmented:has(> .segmented__item:nth-of-type(4) input:checked) { --i: 3; }
  .segmented:has(> .segmented__item:nth-of-type(5) input:checked) { --i: 4; }
  .segmented:has(> .segmented__item:nth-of-type(6) input:checked) { --i: 5; }
  /* A count of things waiting for the viewer ("Needs a look" 7): the tab bar's blue bubble, only above 0.
     Plain totals are not shown in a segmented control (the list below shows them). */
  .segmented__badge {
    display: inline-grid; place-items: center; flex: none;
    min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: var(--r-pill);
    background: var(--accent-fill); color: var(--on-accent);
    font-size: var(--fs-12); line-height: 1; font-weight: 700; letter-spacing: 0;
    font-variant-numeric: tabular-nums;
  }
  /* A control with a bubble sizes its items to their content (the spare width then shared), so
     "Needs a look 7" fits a phone's third. app.js puts the thumb on the chosen item (--thumb-x,
     --thumb-w, .is-measured); until it has, the chosen item paints itself. */
  .segmented--sized { grid-auto-columns: auto; }
  .segmented--sized .segmented__thumb { transition: translate var(--dur-2) var(--ease-out), width var(--dur-2) var(--ease-out); }
  .segmented--sized.is-measured .segmented__thumb { width: var(--thumb-w); translate: var(--thumb-x) 0; }
  .segmented--sized:not(.is-measured) .segmented__thumb { display: none; }
  .segmented--sized:not(.is-measured) .segmented__item:is(:has(input:checked), [aria-current]) { background: var(--thumb); box-shadow: var(--shadow-thumb); }
  .segmented .icon { --icon: var(--icon-sm); --icon-stroke: var(--stroke-sm); }
  /* In a form: the field's width on a phone, at most 360 px from 768 px. */
  :is(.field, .field--group) > .segmented { width: 100%; }
  @media (min-width: 768px) { :is(.field, .field--group) > .segmented { max-width: 360px; } }
  /* On a phone a segmented control in a page's own rows is full width, on every page alike. */
  @media (max-width: 767px) {
    :is(.page, .stack, .section, .filterbar, .filterbar__chips, .page-controls, .row) > .segmented { display: grid; width: 100%; flex: 1 1 100%; }
    .filterbar > .segmented { grid-column: 1 / -1; }
    /* A segmented control in a one-control form (an autosubmit filter in the header). */
    .page-head__actions > form:has(> .segmented) { flex: 1 1 100%; }
    .page-head__actions > form > .segmented { display: grid; width: 100%; }
  }

  /* ---- Period navigator: ‹ September 2026 › ------------------------------------------
     Previous and next are plain links (the period lives in the URL). */
  .period { display: inline-flex; align-items: center; justify-content: space-between; gap: 2px; }
  .period .icon-btn { color: var(--accent); }
  @media (hover: hover) { .period .icon-btn:hover { background: var(--accent-soft); color: var(--accent); } }
  .period .icon-btn .icon { --icon: var(--icon-lg); --icon-stroke: var(--stroke-lg); }
  .period .icon-btn[aria-disabled="true"] { color: var(--ink-4); background: none; }
  .period .icon-btn::after { content: ""; position: absolute; inset: calc((var(--hit) - var(--_s)) / -2); }
  /* Optical alignment: the chevron's point, not its 44 px box, lines up with the text edge (as the top
     bar's back chevron does). The box hangs outside; the hit area is unchanged. */
  .card__bar .period--part:first-child:has(> .icon-btn:first-child) { margin-left: -16px; }
  .period__label {
    min-width: 132px; padding: 0 4px;
    text-align: center;
    font-size: var(--fs-15); line-height: var(--lh-15); font-weight: 600; letter-spacing: var(--ls-15);
    font-variant-numeric: tabular-nums; white-space: nowrap;
  }
  /* On a phone the period is a button ("September ⌄") that opens the period sheet. */
  button.period__label {
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    height: var(--control-h); padding: 0 14px;
    border-radius: var(--r-pill);
    transition: background-color var(--dur-1) var(--ease-out);
  }
  @media (hover: hover) { button.period__label:hover { background: var(--fill-1); } }
  button.period__label:active { background: var(--fill-2); }
  button.period__label .icon { --icon: var(--icon-xs); --icon-stroke: var(--stroke-xs); color: var(--ink-3); }

  /* ---- Tabs: an underline row ------------------------------------------------------
     Sub-pages of one thing (a client's Overview, Reps, Calls...). Links with
     aria-current, or role="tab" buttons with aria-selected (in-page tabs). The
     current tab is ink 600 over a 2 px ink bar. On phones the row scrolls inside
     itself, never the page, and fades at its edge. */
  .tabs {
    display: flex; gap: var(--sp-6);
    overflow-x: auto; scrollbar-width: none;
    box-shadow: inset 0 -1px 0 var(--line);
    scroll-snap-type: x proximity;
  }
  .tabs__item { scroll-snap-align: center; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs__item {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none;
    height: var(--hit); min-width: var(--hit);
    font-size: var(--fs-15); line-height: var(--lh-15); font-weight: 500; letter-spacing: var(--ls-15);
    color: var(--ink-2);
    white-space: nowrap;
    transition: color var(--dur-1) var(--ease-out);
  }
  @media (hover: hover) { .tabs__item:hover { color: var(--ink); } }
  .tabs__item[aria-current="page"], .tabs__item[aria-selected="true"] { color: var(--ink); font-weight: 600; }
  .tabs__item[aria-current="page"]::after, .tabs__item[aria-selected="true"]::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0;
    height: 2px; border-radius: 2px 2px 0 0;
    background: var(--ink);
  }
  .tabs__item:focus-visible { outline-offset: -2px; border-radius: var(--r-xs); }
  .tabs__item .badge { min-width: 18px; height: 18px; }
  @media (max-width: 767px) {
    .tabs {
      /* Edge to edge: the tab cut by the screen's edge says the row scrolls (no fade: no gradients). */
      gap: var(--sp-5); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
    }
  }
  /* A small phone (under 390 px) packs the row a little closer, so a six-tab row never rests with a
     sliver of its first tab at the edge (app.js tabsRest). */
  @media (max-width: 389px) { .tabs { gap: var(--sp-4); } }

  /* ---- Cards ------------------------------------------------------------------------
     The surface, 16 px corners, a hairline edge and a 1 to 2 px shadow (--shadow-1).
     A linked card lifts to --shadow-2 on hover and never tints. A card with a head
     (card(title=...), data_table(title=...)) shows the title on the canvas above
     the box, as a section, and its foot as a note under it. */
  .card {
    position: relative;
    min-width: 0;
    background: var(--surface);
    border-radius: var(--r-card);
    box-shadow: var(--shadow-1);
  }
  /* One inside edge (--pad-card: 16, 20 from 768 px) for padding, rows and inset dividers alike. */
  .card--pad { padding: var(--pad-card); }
  .card__head {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px;
    padding: var(--pad-card) var(--pad-card) 8px;
  }
  .card__title { font-size: var(--fs-17); line-height: var(--lh-17); font-weight: 600; letter-spacing: var(--ls-17); }
  .card__sub { margin-top: 2px; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-2); }
  .card__body { padding: 0 var(--pad-card) var(--pad-card); }
  .card__foot {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
    padding: 12px var(--pad-card);
    box-shadow: inset 0 1px 0 var(--line);
    font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-2);
  }
  .card__foot a { color: var(--accent); }
  .card__foot .icon { --icon: var(--icon-xs); --icon-stroke: var(--stroke-xs); }
  a.card, .card--link { transition: box-shadow var(--dur-1) var(--ease-out), scale var(--dur-1) var(--ease-out); }
  @media (hover: hover) { a.card:hover, .card--link:hover { background: var(--surface); box-shadow: var(--shadow-2); } }
  a.card:active, .card--link:active { scale: .99; }
  /* A card that is one link row (card_link: the Rank card) titles itself like every card: 600. */
  .card--link.list__row .list__title { font-weight: 600; }
  a.card:focus-visible, .card--link:focus-visible { outline-offset: 2px; }
  /* A card inside a card or a sheet drops the shadow and keeps a line edge. */
  :is(.card, .sheet) .card { box-shadow: 0 0 0 1px var(--line); }

  /* The sectioned card: the title on the canvas, the box below, the foot as a note.
     Everything on the canvas shares one left edge, so the head is flush with the box. */
  .card:has(> .card__head) { background: none; border-radius: 0; box-shadow: none; }
  .card:has(> .card__head) > .card__head { padding: 0 0 12px; }
  .card:has(> .card__head) > .card__head .card__title { font-size: var(--fs-20); line-height: var(--lh-20); letter-spacing: var(--ls-20); }
  .card:has(> .card__head) > :not(.card__head, .card__foot) { background: var(--surface); box-shadow: var(--shadow-1); }
  .card:has(> .card__head) > :not(.card__head, .card__foot, .card__body, .table-x, .table-scroll) { overflow: hidden; }
  .card:has(> .card__head) > .card__head + :not(.card__foot) { border-top-left-radius: var(--r-card); border-top-right-radius: var(--r-card); }
  .card:has(> .card__head) > :not(.card__head, .card__foot):last-child,
  .card:has(> .card__head) > :not(.card__head, .card__foot):has(+ .card__foot) {
    border-bottom-left-radius: var(--r-card); border-bottom-right-radius: var(--r-card);
  }
  .card:has(> .card__head) > .card__body { padding-top: 16px; }
  .card:has(> .card__head) > .card__foot { display: block; padding: 8px 0 0; box-shadow: none; }
  /* A foot that holds a button ("Saving again replaces that day's numbers." and Save) keeps the
     note at the left and the button at the right, never touching. */
  .card:has(> .card__head) > .card__foot:has(.btn) { display: flex; padding-top: 12px; }
  @media (min-width: 768px) { .card:has(> .card__head) > .card__body { padding-top: 20px; } }
  :is(.card, .sheet) .card:has(> .card__head) > :not(.card__head, .card__foot) { box-shadow: 0 0 0 1px var(--line); }

  /* A card's own head row inside the box: the title left, a link or chip right. */
  .card__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: var(--pad-card) var(--pad-card) 8px; }
  .card__bar-title { font-size: var(--fs-15); line-height: var(--lh-15); font-weight: 600; letter-spacing: var(--ls-15); }
  .card__bar .link { font-size: var(--fs-15); }
  .card__actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px var(--pad-card) var(--pad-card); }

  /* A text link, with a 44 px target ("See all", "Edit targets"). Accent text, underlined on hover. */
  .link {
    position: relative;
    display: inline-flex; align-items: center; gap: 2px;
    font-size: var(--fs-15); line-height: var(--lh-15); color: var(--accent);
    white-space: nowrap;
  }
  .link::after { content: ""; position: absolute; inset: -12px -6px; }
  .link .icon { --icon: var(--icon-sm); --icon-stroke: var(--stroke-sm); }
  @media (hover: hover) { .link:hover { text-decoration: underline; text-underline-offset: 3px; } }
  .card__head .link, .section__head .link { font-size: var(--fs-15); }
  .card__head .link .icon, .section__head .link .icon { display: none; }

  /* A section's own controls at its right: the period arrows, an (i). */
  .section__head:has(> .section__tools) { align-items: center; }
  .section__title-row { display: flex; align-items: center; gap: 4px; min-width: 0; }
  .section__tools { display: flex; align-items: center; gap: 2px; margin-left: auto; }
  .section__tools .icon-btn { --_s: 32px; color: var(--accent); }
  .section__tools .icon-btn::after { content: ""; position: absolute; inset: -6px; }
  .section__tools .icon-btn .icon { --icon: var(--icon-lg); --icon-stroke: var(--stroke-lg); }
  .section__tools .icon-btn[aria-disabled="true"] { color: var(--ink-4); }

  /* (i): a 24 px button with a 44 px hit area after a title; its popover or sheet says how. */
  .info-btn {
    --_s: 24px;
    position: relative;
    display: inline-grid; place-items: center; flex: none;
    width: var(--_s); height: var(--_s);
    border-radius: 50%;
    color: var(--ink-3);
    vertical-align: middle;
    transition: color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
  }
  .info-btn::after { content: ""; position: absolute; inset: -10px; }
  .info-btn .icon { --icon: var(--icon-sm); --icon-stroke: var(--stroke-sm); }
  .info-btn[aria-expanded="true"] { color: var(--accent); background: var(--accent-soft); }
  @media (hover: hover) { .info-btn:hover { color: var(--accent); background: var(--accent-soft); } }
  .info-pop { max-width: 320px; }
  .info-pop__title { font-size: var(--fs-15); line-height: var(--lh-15); font-weight: 600; letter-spacing: var(--ls-15); }
  .info-pop__text { margin-top: 4px; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-2); }

  /* ---- Inset grouped lists -------------------------------------------------------------
     Rows at least 44 px: an optional neutral glyph or avatar, the title and a quiet
     second line, and one trailing thing (a value, a status chip or a chevron).
     Separators start at the text (16 px, 56 after a glyph). */
  .group { background: var(--surface); border-radius: var(--r-group); box-shadow: var(--shadow-1); overflow: hidden; }
  :is(.card, .sheet) .group { box-shadow: 0 0 0 1px var(--line); }
  .grouped { min-width: 0; }
  .card.list__row { border-radius: var(--r-group); }
  .group > * + .list, .group > * + .kv { box-shadow: inset 0 1px 0 var(--line); }
  /* A group title: 13/18 600 in sentence case, flush with the box under it. */
  .group-title {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: 0 0 8px;
    font-size: var(--fs-13); line-height: var(--lh-13); font-weight: 600; letter-spacing: var(--ls-13);
    color: var(--ink-2);
  }
  legend.group-title { padding-inline: 0; }
  .list { display: grid; grid-template-columns: minmax(0, 1fr); }
  .list__row {
    position: relative;
    display: flex; align-items: center; gap: 12px;
    min-height: var(--hit); padding: 0 var(--pad-card);
    color: inherit;
  }
  /* The separator is drawn on the top of every row after the first, inset to the text: the card's edge,
     plus the lead and its 12 px gap (a 28 px glyph, a 32 px avatar, a 44 px one, a rank and an avatar). */
  .list > * + .list__row::before, .list > * + * > .list__row::before {
    content: ""; position: absolute; top: 0; right: 0; left: var(--sep, var(--pad-card));
    height: 1px; background: var(--line);
  }
  .list__row:has(> .list__lead, > .glyph) { --sep: calc(var(--pad-card) + 40px); }
  .list__row:has(> .avatar, > .monogram) { --sep: calc(var(--pad-card) + 44px); }
  .list__row:has(> .avatar--lg) { --sep: calc(var(--pad-card) + 56px); }
  .list__row:has(> .rank + :is(.avatar, .monogram)) { --sep: calc(var(--pad-card) + 84px); }
  /* A list of figures whose rows mix a chevron and none (.list--figures): the trails keep one right
     edge, the chevron's gutter held open on the rows without one. */
  .list--figures > li > .list__row:not(:has(> .list__chev)) > .list__trail { margin-right: 24px; }
  /* Bars in a list start and end together: a status trail keeps one width in every row. */
  .list:has(.list__body > .pbar):has(.list__trail > .status) .list__trail { flex: none; min-width: 88px; }
  a.list__row, button.list__row, label.list__row { width: 100%; text-align: left; cursor: pointer; transition: background-color var(--dur-1) var(--ease-out); }
  @media (hover: hover) { a.list__row:hover, button.list__row:hover, label.list__row:hover { background: var(--row-hover); } }
  a.list__row:active, button.list__row:active { background: var(--fill-1); }
  a.list__row:focus-visible, button.list__row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
  a.list__row[aria-current="page"] .list__title { color: var(--accent); }
  /* A row whose title is a link (mailto:, tel:) is one big target; buttons in it stay on top. */
  @media (hover: hover) { .list__row:has(> .list__body > a.list__title):hover { background: var(--row-hover); } }
  .list__row > .list__body > a.list__title::after { content: ""; position: absolute; inset: 0; }
  .list__row > :is(button, a, .btn, .icon-btn, form) { position: relative; z-index: 1; }
  .list__lead { flex: none; display: grid; place-items: center; }
  /* The body keeps room for a long word ("Meadowbrook") before a trail ("Meeting booked") may
     squeeze it: at least 7.5em, less only when the row itself is too narrow for that and a trail. */
  .list__body { flex: 1; min-width: min(7.5em, 100% - 11rem); display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 12px 0; }
  .list__title { font-size: var(--fs-17); line-height: var(--lh-17); font-weight: 400; letter-spacing: var(--ls-17); overflow-wrap: break-word; }
  .list__sub { font-size: var(--fs-13); line-height: var(--lh-13); letter-spacing: var(--ls-13); color: var(--ink-2); overflow-wrap: break-word; }
  .list__body > .pbar { margin-top: 6px; }
  /* A long trailing value ("Not in the web app") wraps rather than squeezing the title. */
  .list__trail {
    margin-left: auto; flex: 0 1 auto; max-width: 45%;
    display: grid; justify-items: end; gap: 2px;
    padding: 12px 0;
    font-size: var(--fs-17); line-height: var(--lh-17); letter-spacing: var(--ls-17); color: var(--ink); font-weight: 600;
    text-align: right; text-wrap: balance;
  }
  .list__trail strong, .list__trail .num { color: var(--ink); font-weight: 600; }
  /* A status longer than the trail's room ("Interviewing with the employer") wraps inside its
     chip, left aligned with the dot on the first line, rather than running past the card. */
  .list__trail .status { max-width: 100%; align-items: flex-start; height: auto; min-height: 24px; padding-block: 4px; border-radius: 12px; white-space: normal; text-align: left; }
  .list__trail .status::before { margin-top: 5px; }
  .list__trail .status--lg { padding-block: 3px; }
  .list__trail .status--lg::before { margin-top: 6px; }
  .list__trail-sub { font-size: var(--fs-13); line-height: var(--lh-13); font-weight: 400; color: var(--ink-2); }
  .list__chev { --icon: var(--icon-sm); --icon-stroke: var(--stroke-sm); color: var(--ink-4); flex: none; margin-right: -4px; }
  .list__row > .badge, .list__row > .status, .list__row > .chip { flex: none; }
  /* A trailing switch never shrinks. When a switch with its label ("We work this day") cannot sit
     beside the title, it drops under it at the right, so a title never breaks mid-word. */
  .list__row > input[role="switch"], .list__row > .switch { flex: none; }
  .list__row:has(> form .switch, > .switch) { flex-wrap: wrap; row-gap: 0; }
  .list__row:has(> form .switch, > .switch) > .list__body { flex: 1 1 12rem; }
  .list__row > form:has(.switch) { flex: none; margin-left: auto; padding-block: 8px; }
  /* A drag handle first in the row (list_row(handle=true)): the grip in grey, over the row's link. */
  .list__handle {
    position: relative; z-index: 1;
    display: grid; place-items: center; flex: none;
    width: 24px; min-height: var(--hit); margin-left: -8px;
    color: var(--ink-4); cursor: grab; touch-action: none;
  }
  .list__handle .icon { --icon: var(--icon-md); --icon-stroke: var(--stroke-md); }
  @media (hover: hover) { .list__row:hover > .list__handle { color: var(--ink-2); } }
  .list__row:has(> .list__handle) { --sep: calc(var(--pad-card) + 28px); }
  .list__row:has(> .list__handle):has(> .list__lead, > .glyph) { --sep: calc(var(--pad-card) + 68px); }
  .list__row:has(> .list__handle):has(> .avatar, > .monogram) { --sep: calc(var(--pad-card) + 72px); }
  /* A row being dragged (SortableJS's own classes): the slot it will drop into is tinted, the row in
     hand floats on the menu shadow. */
  .list__row.sortable-chosen { background: var(--surface); }
  .list__row.sortable-ghost { background: var(--accent-soft); }
  .list__row.sortable-ghost > * { opacity: .4; }
  .list__row.sortable-drag, .list__row.sortable-fallback { border-radius: var(--r-group); background: var(--surface-raised); box-shadow: var(--shadow-3); }
  .list__row.sortable-chosen > .list__handle, .list__row.sortable-drag > .list__handle { cursor: grabbing; color: var(--accent); }
  .list__row--stack { flex-direction: column; align-items: stretch; gap: 12px; padding-block: 12px; }
  .list__row--stack > .segmented { width: 100%; }
  .list__row.switch { display: flex; font-size: var(--fs-17); line-height: var(--lh-17); letter-spacing: var(--ls-17); cursor: pointer; }
  /* The viewer's own row (a rep row, the leaderboard on phones). */
  .list__row.is-me { background: var(--accent-soft); }
  .list__row.is-me .list__title { font-weight: 600; }
  /* A sticky day head in a long list: "Thu, Sep 24 · 35". */
  .subhead {
    position: sticky; top: var(--bar-h); z-index: 2;
    padding: 8px var(--pad-card);
    background: var(--surface-2);
    box-shadow: inset 0 -1px 0 var(--line);
    font-size: var(--fs-13); line-height: var(--lh-13); font-weight: 600; color: var(--ink-2);
    font-variant-numeric: tabular-nums;
  }
  /* A card that starts with a day head: the band takes the card's corners (CR-5). */
  :is(.card, .group) > .subhead:first-child { border-top-left-radius: var(--r-card); border-top-right-radius: var(--r-card); }
  .group-foot { margin-top: 8px; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-2); }
  .group-foot a { color: var(--accent); }
  @media (min-width: 768px) {
    .list__title, .list__trail, .list__row.switch { font-size: var(--fs-15); line-height: var(--lh-15); letter-spacing: var(--ls-15); }
  }

  /* Icon tile: a neutral 28 px tile. It appears only when the glyph differs by row and
     means something; blue is for what you press and where you are. */
  .glyph {
    display: grid; place-items: center; flex: none;
    width: 28px; height: 28px; border-radius: var(--r-sm);
    background: var(--fill-1); color: var(--ink-2);
  }
  .glyph .icon { --icon: var(--icon-sm); --icon-stroke: var(--stroke-sm); }
  .glyph--accent { background: var(--fill-1); color: var(--ink-2); }

  /* ---- Key-value lists ------------------------------------------------------------------ */
  /* Single-column grids take minmax(0, 1fr), so a long word (a URL) wraps instead of widening them. */
  .kv { display: grid; grid-template-columns: minmax(0, 1fr); }
  .kv__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); padding: 12px 0; }
  .kv__row + .kv__row { box-shadow: inset 0 1px 0 var(--line); }
  .kv dt { flex: none; max-width: 50%; color: var(--ink); }
  .kv dd { min-width: 0; text-align: right; color: var(--ink-2); overflow-wrap: anywhere; }
  .kv dd a { color: var(--accent); }
  .group.kv .kv__row, .group .kv .kv__row { position: relative; padding: 12px var(--pad-card); min-height: var(--hit); }
  .group.kv .kv__row + .kv__row, .group .kv .kv__row + .kv__row { box-shadow: none; }
  .group.kv .kv__row + .kv__row::before, .group .kv .kv__row + .kv__row::before {
    content: ""; position: absolute; left: var(--pad-card); right: 0; top: 0; height: 1px; background: var(--line);
  }
  /* Facts (key_value(..., variant="facts")): the figure is the point, the label is its caption. */
  .kv--facts dt { color: var(--ink-2); }
  .kv--facts dd { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
  /* On a phone an email or a web address takes its own line under its label, left aligned, rather than
     breaking mid-word against the right edge. */
  @media (max-width: 767px) {
    .kv:not(.kv--grid) .kv__row:has(> dd > a:is([href^="mailto:"], [href^="http"])) { flex-direction: column; align-items: flex-start; gap: 2px; }
    .kv:not(.kv--grid) .kv__row:has(> dd > a:is([href^="mailto:"], [href^="http"])) > dt { max-width: none; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-2); }
    .kv:not(.kv--grid) .kv__row:has(> dd > a:is([href^="mailto:"], [href^="http"])) > dd { text-align: left; }
  }
  .kv--stacked .kv__row { flex-direction: column; align-items: flex-start; gap: 2px; }
  .kv--stacked dt { max-width: none; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-2); }
  .kv--stacked dd { text-align: left; color: var(--ink); }
  .kv--grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: var(--sp-4) var(--sp-6); }
  .kv--grid .kv__row { flex-direction: column; align-items: flex-start; gap: 2px; padding: 0; box-shadow: none; }
  .kv--grid dt { max-width: none; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-2); }
  .kv--grid dd { text-align: left; color: var(--ink); font-size: var(--fs-17); line-height: var(--lh-17); }

  /* ---- Metric tiles ---------------------------------------------------------------------
     A card: the label (and, on .stat--v2, the status chip at its right), one big
     tabular figure with its target in quiet type after it ("3,417 of 4,713"), the
     progress bar, and one quiet line. Three sizes per tile: 12 (the chip), 13, and
     the figure (28 on phones, 34 from 768 px). No icon tile. */
  .stats { container: stats / inline-size; }
  .stats__grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* On a phone an odd last tile spans both columns. */
  @container stats (width < 760px) {
    .stats__grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  }
  @container stats (width >= 760px) {
    .stats__grid { gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .stats__grid:has(> :nth-child(3):last-child),
    .stats__grid:has(> :nth-child(5):last-child),
    .stats__grid:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    /* One or two tiles never leave a half-empty row of four. */
    .stats__grid:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stats__grid:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
  }
  .stat {
    display: flex; flex-direction: column;
    min-width: 0; padding: var(--pad-card);
    color: inherit;
    container-type: inline-size;
  }
  .stat__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; min-width: 0; }
  .stat__head > .glyph { display: none; }
  .stat__head .status { flex: none; }
  .stat__label {
    display: flex; align-items: center; gap: 8px; min-width: 0;
    font-size: var(--fs-13); line-height: var(--lh-13); font-weight: 500; letter-spacing: var(--ls-13); color: var(--ink-2);
  }
  .stat__label > .icon { display: none; }
  .stat__value { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin-top: 8px; }
  .stat__figure {
    font-size: var(--fs-28); line-height: var(--lh-28); font-weight: 600; letter-spacing: var(--ls-28);
    white-space: nowrap;
  }
  .stat__of { font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-3); white-space: nowrap; }
  .stat__foot {
    margin-top: 8px;
    font-size: var(--fs-13); line-height: var(--lh-13); letter-spacing: var(--ls-13); color: var(--ink-2);
  }
  .stat__foot strong { color: var(--ink); font-weight: 600; }
  /* A call metric's connects under the foot ("42 connects · 31% connect rate"), quieter than the foot. */
  .stat__connect {
    margin-top: 4px;
    font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-2); font-variant-numeric: tabular-nums;
  }
  .stat__foot .status { font-size: inherit; }
  .stat > :is(.meter, .pbar) { margin-top: auto; }
  .stat > .stat__value + :is(.meter, .pbar), .stat > .stat__foot + :is(.meter, .pbar) { margin-top: 12px; }
  .stat > :is(.meter, .pbar) + :is(.stat__foot, .stat__connect) { margin-top: 12px; }
  a.stat { transition: box-shadow var(--dur-1) var(--ease-out), scale var(--dur-1) var(--ease-out); }
  @media (hover: hover) { a.stat:hover { background: var(--surface); box-shadow: var(--shadow-2); } }
  @media (min-width: 768px) {
    .stat__value { margin-top: 12px; }
    .stat__figure { font-size: var(--fs-34); line-height: var(--lh-34); letter-spacing: var(--ls-34); }
  }
  /* A long figure (.stat__figure--long: more than 7 characters, "$15,196.75") would run past a
     narrow tile's edge, so it steps down, and the other figures of its grid with it (one size
     per grid): 28 in tiles under 220 px, 20 under 180 px and in a phone's two columns. Tiles
     show whole dollars (plan 7.3), which keeps this rare. */
  @container (width < 220px) {
    :is(.stat__figure--long, .stats__grid:has(.stat__figure--long) .stat__figure) {
      font-size: var(--fs-28); line-height: var(--lh-28); letter-spacing: var(--ls-28);
    }
  }
  @container (width < 180px) {
    :is(.stat__figure--long, .stats__grid:has(.stat__figure--long) .stat__figure) {
      font-size: var(--fs-20); line-height: var(--lh-20); letter-spacing: var(--ls-20);
    }
  }
  @container stats (width < 400px) {
    .stats__grid:has(.stat__figure--long) .stat__figure { font-size: var(--fs-20); line-height: var(--lh-20); letter-spacing: var(--ls-20); }
  }
  /* The new tile (status beside the label, .stat--v2): a tile under 200 px has no room for a
     chip beside its label, so the status moves to the start of the foot as a coloured word. */
  .stat--v2 .stat__foot > .status { display: none; }
  @container (width < 200px) {
    .stat--v2 .stat__head > .status { display: none; }
    .stat--v2 .stat__foot > .status { display: inline-flex; }
  }

  /* A standalone figure (Owed to you $7,600, a hero number): 28 on phones, 34 from 768 px. */
  .figure { font-size: var(--fs-28); line-height: var(--lh-28); font-weight: 600; letter-spacing: var(--ls-28); }
  @media (min-width: 768px) { .figure--lg { font-size: var(--fs-34); line-height: var(--lh-34); letter-spacing: var(--ls-34); } }

  /* ---- Progress bar with a "should be here by now" marker ----------------------------------
     <div class="pbar pbar--warn" style="--value: .62; --pace: .80" role="img" aria-label="…">
       <span class="pbar__fill"></span><span class="pbar__pace"></span></div>
     The fill is min(value, 1) of the track, at least 6 px once above 0 (0 shows an empty
     track), in the status colour (the accent while running with no status). The marker
     is 2 px of ink ringed by the surface, 3 px taller than the bar on each side; it shows
     only when 0 < pace <= 1. 6 px on tiles and rows, 4 px in tables and lists (--sm),
     8 px in the Month card (--lg). */
  .pbar {
    --value: 0; --pace: -1; --_c: var(--accent); --_ring: var(--surface);
    position: relative;
    height: 6px;
    border-radius: var(--r-pill);
    background: var(--fill-2);
  }
  .pbar__fill {
    position: absolute; inset: 0 auto 0 0;
    width: calc(clamp(0, var(--value), 1) * 100%);
    min-width: min(6px, calc(var(--value) * 100000px));
    border-radius: inherit;
    background: var(--_c);
  }
  .pbar__pace {
    position: absolute; top: -3px; bottom: -3px;
    left: calc(clamp(0, var(--pace), 1) * 100%);
    width: 2px; margin-left: -1px;
    border-radius: var(--r-pill);
    background: var(--ink);
    box-shadow: 0 0 0 2px var(--_ring);
    opacity: min(clamp(0, calc(var(--pace) * 100000), 1), clamp(0, calc((1.0001 - var(--pace)) * 100000), 1));
  }
  .pbar--good { --_c: var(--good); }
  .pbar--warn { --_c: var(--warn); }
  .pbar--bad { --_c: var(--bad); }
  .pbar--accent { --_c: var(--accent); }
  .pbar--sm { height: 4px; }
  .pbar--lg { height: 8px; }
  /* The overall's one big bar (the Month card and the rep page): 12 px, its 100% mark a little taller. */
  .pbar--xl { height: 12px; }
  .pbar--xl .pbar__pace { top: -4px; bottom: -4px; width: 3px; margin-left: -1.5px; }
  :is(.sheet, .menu, .toast) .pbar { --_ring: var(--surface-raised); }
  /* Just past the mark, the fill runs under it without the ring's gap (no stray nub beside it). */
  .pbar--at-pace .pbar__pace { box-shadow: none; }
  /* Delight: bars and rings grow in on first paint (250 ms), never under Reduce Motion. */
  @media (prefers-reduced-motion: no-preference) {
    .pbar__fill { transition: width var(--dur-3) var(--ease-out); }
    @starting-style { .pbar__fill { width: 0; } .ring__value { stroke-dasharray: 0 100; } }
  }
  .is-me .pbar, .list__row.is-me .pbar { --_ring: var(--accent-soft); }

  /* The older meter and task progress bars share the shape. */
  .meter {
    --value: .5;
    position: relative; overflow: hidden;
    height: 6px;
    border-radius: var(--r-pill);
    background: var(--fill-2);
  }
  .meter__fill {
    position: absolute; inset: 0 auto 0 0;
    width: calc(clamp(0, var(--value), 1) * 100%);
    border-radius: inherit;
    background: var(--accent);
  }
  .meter--sm { height: 4px; }

  /* Pace rule and other notes: a quiet line under a group. */
  .pace-note { display: block; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-2); }
  .pace-note a { color: var(--accent); }

  /* "141 ahead": neutral text. */
  .delta { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
  .delta .icon { --icon: var(--icon-xs); --icon-stroke: var(--stroke-xs); }

  /* ---- Status, badges, chips, ages ---------------------------------------------------------
     A status is a word first and colour second: in tables, lists and tiles a 22 px tinted
     capsule with a 6 px dot; inside a sentence (a subtitle, a tile's foot, a paragraph,
     a list's second line) only the coloured word. good (On track, Target met, Paid),
     warn (At risk), bad (Off track, Missed by N, Failed), info (Today, New), neutral
     (Not started, Paused), outline (Unpaid). */
  .status {
    --_c: var(--ink-2); --_dot: var(--ink-4); --_bg: var(--fill-1);
    display: inline-flex; align-items: center; gap: 6px;
    height: 24px; padding: 0 9px 0 8px;   /* the chip's height: one capsule height for status and chips */
    border-radius: var(--r-pill);
    background: var(--_bg);
    color: var(--_c);
    font-size: var(--fs-12); line-height: var(--lh-12); font-weight: 600; letter-spacing: var(--ls-12);
    white-space: nowrap;
    vertical-align: middle;
  }
  .status::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--_dot); }
  .status > .icon { display: none; }
  .status--good { --_c: var(--good-text); --_dot: var(--good); --_bg: var(--good-soft); }
  .status--warn { --_c: var(--warn-text); --_dot: var(--warn); --_bg: var(--warn-soft); }
  .status--bad { --_c: var(--bad-text); --_dot: var(--bad); --_bg: var(--bad-soft); }
  .status--info { --_c: var(--accent); --_dot: var(--accent); --_bg: var(--accent-soft); }
  .status--outline { --_bg: transparent; box-shadow: inset 0 0 0 1px var(--border); }
  .status--outline::before { background: none; box-shadow: inset 0 0 0 1.5px var(--ink-4); }
  .status--lg { height: 24px; font-size: var(--fs-13); line-height: var(--lh-13); letter-spacing: var(--ls-13); }
  /* In a sentence: the coloured word, no capsule, no dot. */
  :is(p, .list__sub, .card__sub, .section__meta, .menu__sub, .sheet__sub) > .status {
    display: inline; height: auto; padding: 0; border-radius: 0;
    background: none; box-shadow: none; font: inherit; font-weight: 500; letter-spacing: inherit;
    white-space: normal;
    vertical-align: baseline; line-height: inherit;   /* on the sentence's baseline, not the capsule's middle */
  }
  /* A grey word ("Voicemail", "Not started") is plain text; only a coloured one takes the weight. */
  :is(p, .list__sub, .card__sub, .section__meta, .menu__sub, .sheet__sub, .page-head__sub, .stat__foot) > .status:not(.status--good, .status--warn, .status--bad, .status--info) { font-weight: inherit; }
  :is(p, .list__sub, .card__sub, .section__meta, .menu__sub, .sheet__sub) > .status::before { content: none; }
  /* An icon in running text (a call's "Set by AI" mark): inline with the words, not on its own line. */
  :is(.list__sub, td) > .icon { display: inline-block; vertical-align: -2px; }

  /* A small dot for a status strip, a Needs you row or a rep's mark in a list. */
  .dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-4); vertical-align: middle; }
  .dot--lg { width: 10px; height: 10px; }
  .dot--good { background: var(--good); }
  .dot--warn { background: var(--warn); }
  .dot--bad { background: var(--bad); }
  .dot--accent { background: var(--accent); }

  /* A round check that marks an item done (components/buttons.html check_off; admin Home's Needs you,
     Client ops): a 24 px ring in the item's severity colour on a 44 px target. The tick shows on hover;
     once checked the ring fills green with a white tick, and the item folds away (app.js). */
  .check-off { flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin: 0; }
  .check-off__btn {
    --ring: var(--ink-4);
    position: relative; display: grid; place-items: center;
    width: 24px; height: 24px; padding: 0; border-radius: 50%;
    border: 2px solid var(--ring); background: transparent; color: var(--ring); cursor: pointer;
    transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out),
                color var(--dur-1) var(--ease-out), transform var(--dur-2) var(--ease-out);
  }
  .check-off__btn::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; }
  .check-off__btn > .icon { --icon: 14px; --icon-stroke: 3; opacity: 0; transition: opacity var(--dur-1) var(--ease-out); }
  .check-off__btn--bad { --ring: var(--bad); }
  .check-off__btn--warn { --ring: var(--warn); }
  @media (hover: hover) { .check-off__btn:hover > .icon { opacity: .55; } }
  .check-off__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  .check-off__btn:active { transform: scale(.88); }
  .check-off.is-checked .check-off__btn { --ring: var(--good); background: var(--good); color: var(--on-accent); }
  .check-off.is-checked .check-off__btn > .icon { opacity: 1; }
  /* The item leaving: app.js pins its height, then this folds it (instant with reduced motion). */
  [data-check-item].is-leaving {
    overflow: hidden; opacity: 0;
    transition: height var(--dur-3) var(--ease-out), opacity var(--dur-2) var(--ease-out),
                margin var(--dur-3) var(--ease-out), padding var(--dur-3) var(--ease-out);
  }
  /* What was checked off, folded under the list: a green tick, the words one step quieter. */
  .checked-fold { margin-top: 12px; }
  .checked-fold .checked-fold__mark { --icon: 22px; color: var(--good); }
  .checked-fold .list__title { color: var(--ink-2); }

  /* A status strip: one equal segment per client in its status colour (admin Home). */
  .status-strip { display: flex; gap: 2px; height: 8px; min-width: 0; border-radius: var(--r-pill); overflow: hidden; }
  .status-strip__seg { flex: 1; min-width: 4px; background: var(--ink-4); }
  .status-strip__seg--good { background: var(--good); }
  .status-strip__seg--warn { background: var(--warn); }
  .status-strip__seg--bad { background: var(--bad); }

  /* A count ("3"). */
  .badge {
    display: inline-grid; place-items: center;
    min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: var(--r-pill);
    background: var(--fill-2); color: var(--ink-2);
    font-size: var(--fs-11); line-height: 1; font-weight: 600;
    letter-spacing: 0; white-space: nowrap;
  }
  .badge--accent { background: var(--accent-soft); color: var(--accent); }
  .badge--solid { background: var(--accent-fill); color: var(--on-accent); }
  .badge--dot { min-width: 8px; width: 8px; height: 8px; padding: 0; background: var(--accent); }

  /* Chips: small facts ("Fri, 11 AM") and active filters (removable). The quiet fill inside
     a surface; on the canvas the surface with an edge, so their words stay AA. */
  .chip {
    display: inline-flex; align-items: center; gap: 4px;
    min-height: 24px; padding: 2px 9px;
    border-radius: var(--r-pill);
    background: var(--surface); box-shadow: var(--shadow-1); color: var(--ink-2);
    font-size: var(--fs-12); line-height: var(--lh-12); font-weight: 500; letter-spacing: var(--ls-12);
  }
  :is(.card, .group, .sheet, .menu, .alert, .kcard, .stat, .toast, .table-card, .lane__cards) .chip { background: var(--fill-1); box-shadow: none; }
  .chip .icon { --icon: var(--icon-xs); --icon-stroke: var(--stroke-xs); }
  a.chip, button.chip { position: relative; transition: background-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out); }
  a.chip::after, button.chip::after { content: ""; position: absolute; inset: -10px -2px; }
  @media (hover: hover) { a.chip:hover, button.chip:hover { box-shadow: var(--shadow-2); } }
  @media (hover: hover) { :is(.card, .group, .sheet, .menu, .alert, .kcard, .stat, .toast, .table-card, .lane__cards) :is(a.chip, button.chip):hover { background: var(--fill-2); box-shadow: none; } }
  .chip--accent, :is(.card, .group, .sheet, .menu, .alert, .kcard, .stat, .toast, .table-card, .lane__cards) .chip--accent { background: var(--accent-soft); box-shadow: none; color: var(--accent); }
  .chip--good, :is(.card, .group, .sheet, .menu, .alert, .kcard, .stat, .toast, .table-card, .lane__cards) .chip--good { background: var(--good-soft); box-shadow: none; color: var(--good-text); }
  .chip--warn, :is(.card, .group, .sheet, .menu, .alert, .kcard, .stat, .toast, .table-card, .lane__cards) .chip--warn { background: var(--warn-soft); box-shadow: none; color: var(--warn-text); }
  .chip--bad, :is(.card, .group, .sheet, .menu, .alert, .kcard, .stat, .toast, .table-card, .lane__cards) .chip--bad { background: var(--bad-soft); box-shadow: none; color: var(--bad-text); }
  @media (hover: hover) { :is(a, button).chip--accent:hover { background: var(--accent-soft-hover); } }
  .page-head__sub > .chip--accent { color: var(--accent); }
  .page-head__sub > .chip--good { color: var(--good-text); }
  .page-head__sub > .chip--warn { color: var(--warn-text); }
  .page-head__sub > .chip--bad { color: var(--bad-text); }
  .chip__remove {
    position: relative; display: grid; place-items: center;
    width: 18px; height: 18px; margin: -2px -6px -2px 0; border-radius: 50%;
    color: inherit;
  }
  .chip__remove::after { content: ""; position: absolute; inset: -13px; }
  @media (hover: hover) { .chip__remove:hover { background: var(--fill-2); } }
  .chip__remove .icon { --icon: var(--icon-xs); --icon-stroke: var(--stroke-xs); }

  /* The admin tag: a small grey capsule on controls only Icebreaker admins see. */
  .admin-tag {
    display: inline-flex; align-items: center; gap: 4px;
    height: 20px; padding: 0 8px 0 6px;
    border-radius: var(--r-pill);
    background: var(--fill-1); color: var(--ink-2);
    font-size: var(--fs-11); line-height: var(--lh-11); font-weight: 600; letter-spacing: var(--ls-11);
    white-space: nowrap; vertical-align: middle;
  }
  .admin-tag .icon { --icon: var(--icon-xs); --icon-stroke: var(--stroke-xs); }

  /* Choice chips: quick values (Today / Yesterday, 1 h 2 h 4 h). The chosen one is the accent. */
  .choices { display: flex; flex-wrap: wrap; gap: 8px; }
  .choice {
    position: relative;
    display: inline-grid; place-items: center;
    height: var(--control-h-sm); min-width: 52px; padding: 0 14px;
    border-radius: var(--r-pill);
    background: var(--fill-1); color: var(--ink);
    font-size: var(--fs-13); line-height: var(--lh-13); font-weight: 500; letter-spacing: var(--ls-13);
    font-variant-numeric: tabular-nums;
    transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
  }
  @media (pointer: coarse) { .choice { font-size: var(--fs-15); line-height: var(--lh-15); letter-spacing: var(--ls-15); } }
  .choice::after { content: ""; position: absolute; inset: calc((var(--hit) - var(--control-h-sm)) / -2) -2px; }
  @media (hover: hover) { .choice:hover { background: var(--fill-2); } }
  .choice:active { background: var(--fill-3); }
  /* Selected is the tinted chip (plan 2.1: --accent-soft is the selected chip), so the page's
     primary button stays its only filled blue. */
  .choice[aria-pressed="true"], .choice:has(input:checked) { background: var(--accent-soft); color: var(--accent); }
  @media (hover: hover) { .choice[aria-pressed="true"]:hover, .choice:has(input:checked):hover { background: var(--accent-soft-hover); } }
  .choice input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
  .choice:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
  /* Icon picker (icon_picker): round icon tiles, the chosen one blue. */
  .choices--icons { gap: 12px; }
  .choice--icon { width: 40px; min-width: 40px; height: 40px; padding: 0; border-radius: 50%; }
  .choice--icon .icon { --icon: var(--icon-md); --icon-stroke: var(--stroke-md); }
  .choice--icon::after { inset: -2px; }
  @media (pointer: coarse) { .choice--icon { width: 44px; min-width: 44px; height: 44px; } }

  /* Days in a stage: grey, then amber after a week and red after two. */
  .age { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-12); line-height: var(--lh-12); font-weight: 500; color: var(--ink-2); white-space: nowrap; }
  .age--warn { color: var(--warn-text); font-weight: 600; }
  .age--bad { color: var(--bad-text); font-weight: 600; }

  /* ---- People: neutral monograms ------------------------------------------------------------
     Initials on one neutral grey, fixed sizes per step (never computed). */
  .avatar, .monogram {
    --size: 32px;
    display: inline-grid; place-items: center; flex: none;
    width: var(--size); height: var(--size);
    background: var(--avatar); color: var(--avatar-ink);
    font-size: var(--fs-12); font-weight: 600; letter-spacing: 0; line-height: 1;
    user-select: none; -webkit-user-select: none;
  }
  .avatar { border-radius: 50%; }
  img.avatar { object-fit: cover; }
  .monogram { --size: 36px; border-radius: var(--r-sm); font-size: var(--fs-13); }
  .avatar--xs { --size: 22px; font-size: var(--fs-11); }
  .avatar--sm { --size: 28px; font-size: var(--fs-11); }
  .avatar--lg { --size: 44px; font-size: var(--fs-15); }
  .avatar--xl { --size: 60px; font-size: var(--fs-20); }
  .monogram--xs { --size: 22px; border-radius: var(--r-xs); font-size: var(--fs-11); }
  .monogram--sm { --size: 30px; font-size: var(--fs-11); }
  .monogram--lg { --size: 56px; border-radius: var(--r-float); font-size: var(--fs-20); }
  .monogram--brand { background: var(--accent-soft); color: var(--accent); }
  .monogram--soft, .avatar--soft { background: var(--fill-1); color: var(--ink-2); }
  .avatar .icon, .monogram .icon { --icon: var(--icon-sm); --icon-stroke: var(--stroke-sm); }

  /* Person: avatar + name + one line of context. Wraps, never truncates. */
  .person { display: flex; align-items: center; gap: 12px; min-width: 0; }
  .person__text { min-width: 0; display: grid; }
  .person__name { font-weight: 500; }
  .person__sub { font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-2); }

  /* ---- Data table ----------------------------------------------------------------------------
     A table on a card: 12/16 500 grey headers on a 36 px row, 15/20 cells on 56 px rows
     with a 1 px line between them, numbers right-aligned and tabular, at most one
     13/18 line under a value, the total row on the well. Below 640 px of container
     each row becomes a card of the list: the name (with its status or actions at the
     right), then the other cells as label and value pairs. */
  .table-wrap { container: table / inline-size; min-width: 0; }
  .table-card { overflow: hidden; }
  .card.table-card:has(> .card__head) { overflow: visible; }
  .data-table { width: 100%; font-size: var(--fs-15); line-height: var(--lh-15); letter-spacing: var(--ls-15); }
  /* A table whose columns do not fit (many metrics, money cells) scrolls sideways inside its card, never the page. */
  .table-x { overflow-x: auto; overscroll-behavior-x: contain; }
  /* A cell's small line of parts breaks only at its dots when the column is narrow. */
  .data-table td > .text-xs > .hide-phone { white-space: normal; }
  .data-table caption { padding: 0 var(--pad-card) 8px; text-align: left; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-2); }
  .data-table th {
    height: 36px; padding: 0 12px;
    font-size: var(--fs-12); line-height: var(--lh-12); font-weight: 500; letter-spacing: var(--ls-12); color: var(--ink-3);
    text-align: left; white-space: nowrap; vertical-align: middle;
    box-shadow: inset 0 -1px 0 var(--line);
  }
  .data-table td { position: relative; padding: 8px 12px; height: 56px; vertical-align: middle; }
  .data-table tbody tr + tr td::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0;
    height: 1px; background: var(--line);
  }
  .data-table tbody tr + tr td:first-child::before { left: var(--pad-card); }
  .data-table :is(th, td):first-child { padding-left: var(--pad-card); }
  .data-table :is(th, td):last-child { padding-right: var(--pad-card); }
  .data-table tbody tr { transition: background-color var(--dur-1) var(--ease-out); }
  @media (hover: hover) { .data-table tbody tr:hover { background: var(--row-hover); } }
  /* The viewer's own row (row_class "is-me"): tinted, the name in ink 600. */
  .data-table tbody tr.is-me { background: var(--accent-soft); }
  @media (hover: hover) { .data-table tbody tr.is-me:hover { background: var(--accent-soft); } }
  .data-table tr.is-me :is(.person__name, .cell--primary > strong) { font-weight: 600; }
  .data-table .is-num { text-align: right; white-space: nowrap; }
  .data-table .cell--status, .data-table .cell--actions { text-align: right; white-space: nowrap; }
  /* Row actions sit side by side, 8 px apart (a form around a button is inline too). */
  .data-table .cell--actions > * { vertical-align: middle; }
  .data-table .cell--actions > form { display: inline-flex; }
  .data-table .cell--actions > * + * { margin-left: 8px; }
  .data-table .pbar { width: 88px; margin: 8px 0 0 auto; }
  .data-table td:not(.is-num) .pbar { margin-left: 0; }
  .data-table tfoot td { background: var(--surface-2); box-shadow: inset 0 1px 0 var(--border); font-weight: 600; }
  .data-table tfoot :is(.person__sub, .metric-cell__of) { font-weight: 400; }
  .data-table tr.is-total td { background: var(--surface-2); font-weight: 600; }
  /* Sortable column header: a link inside th[aria-sort] with a 14 px chevron. */
  .th-sort { display: inline-flex; align-items: center; gap: 4px; font: inherit; color: inherit; border-radius: var(--r-xs); }
  .th-sort .icon { --icon: var(--icon-xs); --icon-stroke: var(--stroke-xs); color: var(--ink-4); }
  th[aria-sort="ascending"] .th-sort, th[aria-sort="descending"] .th-sort { color: var(--ink); }
  @media (hover: hover) { .th-sort:hover { color: var(--ink); } }
  th[aria-sort] .th-sort .icon { color: var(--accent); }
  /* Metric cell: "402/375", the target quiet. As a link (.cell-link) it keeps the ink and turns
     blue on hover; on touch screens its target grows to 44 px. */
  .metric-cell { white-space: nowrap; }
  .cell-link { position: relative; display: inline-block; color: inherit; border-radius: var(--r-xs); }
  @media (hover: hover) { .cell-link:hover .metric-cell__value { color: var(--accent); } }
  @media (hover: hover) { .cell-link--text:hover { color: var(--accent); } }   /* a text cell that opens a page (a candidate's Stage) */
  @media (pointer: coarse) { .cell-link::after { content: ""; position: absolute; inset: -12px -8px; } }
  .metric-cell__value { font-weight: 500; }
  .metric-cell__value.is-top, .is-top > .metric-cell__value { font-weight: 600; }
  .metric-cell__of, .metric-cell__value span { font-weight: 400; color: var(--ink-3); }
  .metric-cell__sub { display: block; margin-top: 2px; font-size: var(--fs-13); line-height: var(--lh-13); font-weight: 400; color: var(--ink-3); white-space: nowrap; }

  /* An editable grid (variant grid, the targets grid): a rep per row and a box per column of
     equal width. It scrolls inside its card when the columns do not fit, with the header row
     and the first column pinned, and a fade at the right edge. */
  .table-scroll { overflow: auto; max-height: calc(100dvh - var(--bar-h) - 96px); overscroll-behavior: contain; }
  .data-table--grid { width: max-content; min-width: 100%; }
  .data-table--grid th { white-space: normal; vertical-align: bottom; padding-block: 8px; line-height: var(--lh-12); }
  .data-table--grid :is(th, td):not(:first-child) { width: 136px; min-width: 136px; max-width: 136px; }
  .data-table--grid thead th { position: sticky; top: 0; z-index: 2; background: var(--surface); }
  .data-table--grid :is(th, td):first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); min-width: 200px; max-width: 280px; }
  .data-table--grid thead th:first-child { z-index: 3; }
  @media (hover: hover) { .data-table--grid tbody tr:hover > td:first-child { background: color-mix(in srgb, var(--surface), var(--ink) 3%); } }
  .data-table--grid td .input { min-width: 88px; text-align: right; font-variant-numeric: tabular-nums; }
  /* Any table of boxes (Targets without the grid variant): the figure columns share the width
     equally and their numbers sit right, tabular, like every other figure. (Phone cards keep
     their own layout.) */
  .data-table td .input:is([inputmode="decimal"], [inputmode="numeric"], [type="number"]) { text-align: right; font-variant-numeric: tabular-nums; }
  @container table (width >= 640px) {
    .data-table:not(.data-table--grid):has(td .input) { table-layout: fixed; }
    .data-table:not(.data-table--grid):has(td .input) :is(th, td):first-child { width: 30%; }
    .data-table:not(.data-table--grid):has(td .input) thead th:not(:first-child) { text-align: right; padding-right: 25px; }
  }

  @container table (width < 640px) {
    .data-table, .data-table tbody, .data-table tfoot { display: block; }
    .data-table thead { display: none; }
    .data-table tr {
      position: relative;
      display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px 16px;
      padding: 12px var(--pad-card);
    }
    .data-table tbody tr + tr::before, .data-table tfoot tr::before {
      content: ""; position: absolute; top: 0; left: var(--pad-card); right: 0;
      height: 1px; background: var(--line);
    }
    .data-table tbody tr + tr td::before { content: none; }
    .data-table td, .data-table tfoot td { display: block; height: auto; padding: 0 !important; min-width: 0; text-align: left; box-shadow: none; }
    .data-table tfoot td { background: none; }
    .data-table tfoot { font-weight: 600; background: var(--surface-2); }
    .data-table td[data-label]::before {
      content: attr(data-label);
      position: static; display: block; height: auto; margin-bottom: 2px;
      background: none;
      font-size: var(--fs-12); line-height: var(--lh-12); font-weight: 500; color: var(--ink-3);
    }
    /* The name spans the row; a status or actions cell sits at its right end. */
    .data-table .cell--primary { grid-column: 1 / -1; grid-row: 1; align-self: center; }
    .data-table tr:has(> .cell--status, > .cell--actions) > .cell--primary { padding-right: var(--status-space, 112px) !important; }
    .data-table td:is(.cell--primary, .cell--status, .cell--actions)::before { display: none; }
    .data-table .cell--status, .data-table .cell--actions { grid-column: 1 / -1; grid-row: 1; justify-self: end; align-self: center; }
    /* Two controls at the right ("Mark paid" and Send back) need a wider reserve than a chip, and
       a status longer than the reserve wraps inside its chip instead of running over the name. */
    .data-table tr:has(> .cell--actions:not(.cell--below) > * + *) { --status-space: 148px; }
    .data-table .cell--status { max-width: var(--status-space, 112px); }
    .data-table .cell--status .status { align-items: flex-start; height: auto; min-height: 24px; padding-block: 4px; border-radius: 12px; white-space: normal; text-align: left; }
    .data-table .cell--status .status--lg { padding-block: 3px; }
    .data-table .cell--status .status.status--lg::before { margin-top: 6px; }
    /* Column money and hours (money_col, hours_col): no ".00" on a card, where there is no column to align. */
    .data-table .num-zc { display: none; }
    /* The total row's first cell is its title ("Total · 6 people"): a value cell labelled "Total" again
       drops the label (AR-10). */
    .data-table tfoot td[data-label="Total"]:not(.cell--primary)::before, .data-table tr.is-total td[data-label="Total"]:not(.cell--primary)::before { content: none; display: none; }
    .data-table .cell--status .status::before { margin-top: 5px; }
    .data-table .cell--full { grid-column: 1 / -1; }
    /* Several buttons (an actions column with class cell--below): under the fields, not over the name. */
    .data-table .cell--actions.cell--below { grid-column: 1 / -1; grid-row: auto; justify-self: start; }
    .data-table tr:has(> .cell--actions.cell--below):not(:has(> .cell--status)) > .cell--primary { padding-right: 0 !important; }
    /* A labelled cell with nothing in it is left off the card. */
    .data-table td[data-label]:empty { display: none; }
    .data-table .is-num { text-align: left; }
    .data-table .pbar { width: 100%; margin: 8px 0 0; }
    /* Rows variant: label and value on one line. */
    .data-table--rows tr { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 4px var(--pad-card); }
    .data-table--rows td { display: flex !important; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0 !important; }
    .data-table--rows td + td { box-shadow: inset 0 1px 0 var(--line); }
    .data-table--rows td[data-label]::before { margin: 0; font-size: var(--fs-15); line-height: var(--lh-15); font-weight: 400; color: var(--ink-2); }
    .data-table--rows .cell--primary, .data-table--rows .cell--status, .data-table--rows .cell--actions { grid-column: 1; grid-row: auto; justify-self: stretch; }
    /* List variant: the name and a trailing value, the other cells as one quiet line. */
    .data-table.data-table--list tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
    .data-table.data-table--list tr::after { content: ""; flex-basis: 100%; order: 2; }
    .data-table.data-table--list tr > td.cell--primary { order: 1; flex: 1 1 0; padding-right: 0 !important; }
    .data-table--list :is(.cell--status, .cell--actions) { order: 1; flex: none; }
    .data-table--list td:not(.cell--primary, .cell--status, .cell--actions) {
      order: 3; display: inline-flex; align-items: center;
      font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-2);
    }
    .data-table--list tr > td[data-label]:not(.cell--primary, .cell--status, .cell--actions)::before {
      content: "·"; display: inline; margin: 0 6px 0 -6px; font: inherit; color: var(--ink-3);
    }
    .data-table--list tr > .cell--primary + td[data-label]::before { content: none; }
    .data-table--list td:not(.cell--primary) :is(.avatar, .monogram) { display: none; }
    /* A line of parts under a metric: one part per line in a half-width card column. */
    .metric-cell__sub { white-space: normal; }
    .metric-cell__dot { display: none; }
    .metric-cell__part { display: block; }
    /* The editable grid is cards like any table here: nothing pinned, nothing scrolls. */
    .table-scroll { overflow: visible; max-height: none; }
    .data-table--grid { width: 100%; min-width: 0; }
    .data-table--grid :is(th, td), .data-table--grid :is(th, td):first-child,
    .data-table--grid :is(th, td):not(:first-child) { position: relative; width: auto; min-width: 0; max-width: none; background: none; }
  }

  /* ---- Forms ----------------------------------------------------------------------------------
     A field is a 13/18 label, a white control with a hairline edge (blue edge and halo
     on focus, red when invalid) and one help or error line. 44 px and 17 px text on
     touch (iOS never zooms under 16), 36 px and 15 px with a mouse. */
  .form-stack { --_gap: var(--sp-5); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--_gap); }
  .form-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; align-content: start; }
  .field__label {
    display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
    font-size: var(--fs-13); line-height: var(--lh-13); font-weight: 500; letter-spacing: var(--ls-13); color: var(--ink-2);
  }
  .field__label .field__hint, .field__optional { font-size: var(--fs-13); font-weight: 400; color: var(--ink-3); }
  .field__help { font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-3); }
  .field__error { display: flex; align-items: flex-start; gap: 6px; font-size: var(--fs-13); line-height: var(--lh-13); font-weight: 500; color: var(--bad-text); }
  .field__error .icon { --icon: var(--icon-xs); --icon-stroke: var(--stroke-xs); margin-top: 2px; }
  /* A group of controls (field_group): the <legend> is the label. Floated, a legend is an ordinary
     grid item, so the gap under it matches a label's. */
  fieldset.field > legend { float: left; width: 100%; padding: 0; }
  .field--group .segmented { justify-self: start; }

  .input, .select, .textarea {
    width: 100%;
    height: var(--control-h);
    padding: 0 12px;
    border: 1px solid var(--field-border); border-radius: var(--r-field);
    background-color: var(--field-bg);
    box-shadow: var(--shadow-field);
    color: var(--ink);
    font-size: var(--fs-17); line-height: var(--lh-17); letter-spacing: var(--ls-17); font-weight: 400;
    outline: none;
    transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
  }
  @media (min-width: 768px) and (pointer: fine) {
    .input, .select, .textarea { font-size: var(--fs-15); line-height: var(--lh-15); letter-spacing: var(--ls-15); }
  }
  :is(.input, .select, .textarea, .date-field, .num-stepper, .composer).is-hover { border-color: var(--border-strong); }
  @media (hover: hover) { :is(.input, .select, .textarea, .date-field, .num-stepper, .composer):hover { border-color: var(--border-strong); } }
  :is(.input, .select, .textarea):focus, :is(.input, .select, .textarea).is-focus,
  .date-field:focus-within, .num-stepper:focus-within, .composer:focus-within {
    border-color: var(--accent);
    background-color: var(--field-bg);
    box-shadow: 0 0 0 3px var(--focus-ring);
  }
  .input::placeholder, .textarea::placeholder { color: var(--ink-3); opacity: 1; }
  :is(.input, .select, .textarea)[aria-invalid="true"], .date-field:has([aria-invalid="true"]), .num-stepper:has([aria-invalid="true"]) { border-color: var(--bad); }
  :is(.input, .select, .textarea)[aria-invalid="true"]:focus,
  .date-field:has([aria-invalid="true"]):focus-within, .num-stepper:has([aria-invalid="true"]):focus-within {
    border-color: var(--bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 22%, transparent);
  }
  :is(.input, .select, .textarea):disabled { background-color: var(--fill-1); border-color: transparent; box-shadow: none; color: var(--ink-3); cursor: not-allowed; opacity: 1; }
  .input[readonly] { background: transparent; border-color: transparent; box-shadow: none; padding-inline: 0; color: var(--ink-2); }
  .select {
    appearance: none; -webkit-appearance: none;
    padding-right: 34px;
    background-image: var(--select-chevron);
    background-repeat: no-repeat; background-position: right 12px center; background-size: 14px;
  }
  /* An unanswered select ("Choose one") reads as a placeholder, like an empty text field. */
  .select:has(option[value=""]:checked) { color: var(--ink-3); }
  .select option { color: var(--ink); }
  .textarea { height: auto; min-height: 88px; padding: 8px 12px; resize: vertical; field-sizing: content; max-height: 320px; }
  .input--lg { --control-h: 50px; font-size: var(--fs-17); line-height: var(--lh-17); }

  /* Input with a leading icon or a trailing button. Money ($ first) reads right-aligned and tabular. */
  .input-group { position: relative; display: flex; align-items: center; }
  .input-group > .icon { position: absolute; left: 12px; z-index: 1; --icon: var(--icon-sm); --icon-stroke: var(--stroke-sm); color: var(--ink-3); pointer-events: none; }
  .input-group > .icon ~ .input { padding-left: 36px; }
  .input-group > .icon ~ .input[inputmode="decimal"] { font-variant-numeric: tabular-nums; }
  .input-group > .input-group__end { position: absolute; right: 0; z-index: 1; }
  .input-group:has(.input-group__end) .input { padding-right: 46px; }
  /* As tall as the field (a 44 px target on touch), drawn 4 px smaller inside it. */
  .input-group__end .icon-btn { --_s: var(--control-h); padding: 2px; background-clip: content-box; }

  /* Grouped rows (the sign-in form): borderless inputs in one white group with an edge,
     separated by lines; the group takes the blue edge and halo on focus. */
  .form-group {
    background: var(--field-bg); border-radius: var(--r-field); overflow: hidden;
    box-shadow: 0 0 0 1px var(--field-border), var(--shadow-field);
    transition: box-shadow var(--dur-1) var(--ease-out);
  }
  .form-group:focus-within { box-shadow: 0 0 0 1px var(--accent), 0 0 0 4px var(--focus-ring); }
  .form-row { position: relative; display: flex; align-items: center; gap: 8px; min-height: 50px; padding: 0 4px 0 16px; }
  .form-row + .form-row::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: var(--line); }
  .form-row__input {
    flex: 1; min-width: 0;
    height: 50px; padding: 0;
    border: 0; background: none; outline: none;
    font-size: var(--fs-17); letter-spacing: var(--ls-17); color: var(--ink);
  }
  .form-row__input::placeholder { color: var(--ink-3); opacity: 1; }
  .form-row:has([aria-invalid="true"]) .form-row__input { color: var(--bad-text); }
  .form-row .icon-btn { color: var(--ink-3); }
  .form-row--switch { justify-content: space-between; padding-right: 12px; font-size: var(--fs-17); letter-spacing: var(--ls-17); text-align: left; cursor: pointer; }
  @media (min-width: 768px) and (pointer: fine) {
    .form-row { min-height: 44px; }
    .form-row__input { height: 44px; font-size: var(--fs-15); letter-spacing: var(--ls-15); }
    .form-row--switch { font-size: var(--fs-15); letter-spacing: var(--ls-15); }
  }

  /* Checkbox and radio: 20 px (22 on touch) with a 3:1 edge, the accent when on, in a 44 px row. */
  .check, .radio {
    position: relative;
    display: inline-flex; align-items: center; gap: 12px;
    min-height: var(--hit);
    font-size: var(--fs-15); line-height: var(--lh-15); color: var(--ink);
    cursor: pointer;
  }
  .check input, .radio input {
    appearance: none; -webkit-appearance: none;
    flex: none; margin: 0;
    width: 20px; height: 20px;
    display: grid; place-items: center;
    background: var(--field-bg);
    box-shadow: inset 0 0 0 1.5px var(--control-edge);
    cursor: pointer;
    transition: background-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
  }
  @media (pointer: coarse) { .check input, .radio input { width: 22px; height: 22px; } }
  .check input { border-radius: var(--r-xs); }
  .radio input { border-radius: 50%; }
  .check input::after {
    content: ""; width: 10px; height: 6px; margin-top: -2px;
    border: solid var(--on-accent); border-width: 0 0 2px 2px;
    rotate: -45deg; scale: 0;
    transition: scale var(--dur-1) var(--ease-out);
  }
  .radio input::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--on-accent); scale: 0; transition: scale var(--dur-1) var(--ease-out); }
  .check input:checked, .radio input:checked, .check input:indeterminate { background: var(--accent-fill); box-shadow: none; }
  .check input:checked::after, .radio input:checked::after { scale: 1; }
  .check input:indeterminate::after { border-width: 0 0 2px 0; rotate: 0deg; margin-top: -6px; scale: 1; }
  .check input:focus-visible, .radio input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  .check input:disabled, .radio input:disabled { background: var(--fill-1); box-shadow: inset 0 0 0 1.5px var(--border-strong); cursor: not-allowed; }
  .check input:disabled:checked, .radio input:disabled:checked { background: var(--ink-4); box-shadow: none; }
  /* A box the form sent back (checkbox(errors=...)): the same red edge as a text box. */
  .check input[aria-invalid="true"]:not(:checked) { box-shadow: inset 0 0 0 1.5px var(--bad); }
  .check__text { display: grid; gap: 2px; }
  /* With a second line the box sits on the first line (as iOS does), not between the two. */
  :is(.check, .radio):has(> .check__text) { align-items: flex-start; padding-block: 2px; }
  :is(.check, .radio):has(> .check__text) > input { margin-top: calc((1lh - 20px) / 2); }
  @media (pointer: coarse) { :is(.check, .radio):has(> .check__text) > input { margin-top: calc((1lh - 22px) / 2); } }
  .check__sub { font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-2); }

  /* Switch: any <input type="checkbox" role="switch">, usually in a label (.switch, a .list__row
     or a sign-in .form-row). 44 x 26, a 22 px thumb; on is the accent: a control, not a status. */
  .switch { position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--hit); cursor: pointer; font-size: var(--fs-15); line-height: var(--lh-15); }
  input[type="checkbox"][role="switch"] {
    appearance: none; -webkit-appearance: none;
    position: relative; flex: none; margin: 0;
    width: 44px; height: 26px;
    border-radius: var(--r-pill);
    background: var(--switch-off);
    box-shadow: inset 0 0 0 1px var(--fill-1);
    cursor: pointer;
    transition: background-color var(--dur-2) var(--ease-out);
  }
  input[type="checkbox"][role="switch"]::after {
    content: ""; position: absolute; top: 2px; left: 2px;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--switch-thumb);
    box-shadow: 0 0 0 .5px var(--control-edge), var(--shadow-switch);
    transition: translate var(--dur-2) var(--ease-out);
  }
  input[type="checkbox"][role="switch"]:checked { background: var(--switch-on); box-shadow: none; }
  input[type="checkbox"][role="switch"]:checked::after { translate: 18px 0; box-shadow: var(--shadow-switch); }
  input[type="checkbox"][role="switch"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  input[type="checkbox"][role="switch"]:disabled { background: var(--fill-2); cursor: not-allowed; }
  input[type="checkbox"][role="switch"]:disabled::after { background: var(--surface-3); box-shadow: none; }
  input[type="checkbox"][role="switch"]:disabled:checked { background: var(--ink-4); }

  /* Date field: the app's date ("Thu, Sep 24") over the native picker. The invisible input is
     16 px, so iOS never zooms. Without JavaScript the native input shows instead. */
  .date-field {
    position: relative;
    display: flex; align-items: center; gap: 8px;
    height: var(--control-h); padding: 0 12px;
    border: 1px solid var(--field-border); border-radius: var(--r-field);
    background-color: var(--field-bg);
    box-shadow: var(--shadow-field);
    font-size: var(--fs-17); line-height: var(--lh-17); letter-spacing: var(--ls-17);
    cursor: pointer;
    transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
  }
  @media (min-width: 768px) and (pointer: fine) { .date-field { font-size: var(--fs-15); line-height: var(--lh-15); letter-spacing: var(--ls-15); } }
  .date-field > .icon { --icon: var(--icon-sm); --icon-stroke: var(--stroke-sm); color: var(--ink-3); }
  .date-field__display { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
  .date-field > .date-field__chev { --icon: var(--icon-xs); --icon-stroke: var(--stroke-xs); margin-left: auto; color: var(--ink-3); }
  /* The invisible native input covers the whole field, its 1 px edge included (a 44 px target). */
  .date-field__input { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); margin: 0; border: 0; border-radius: inherit; opacity: 0; cursor: pointer; font-size: 16px; }
  .date-field__input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: auto; height: auto; opacity: 0; cursor: pointer; }
  .date-field + .choices { margin-top: 8px; }
  :root:not(.js) .date-field__display, :root:not(.js) .date-field__chev { display: none; }
  :root:not(.js) .date-field__input { position: static; width: auto; height: auto; opacity: 1; flex: 1; background: none; font: inherit; color: inherit; }

  /* Number stepper: − value + on a field-styled track, as tall as the fields beside it. Blue buttons 8 px
     smaller than the track (36 on touch, 28 with a mouse; a 44 px hit), the value 20/25 600 tabular and
     centred between them; − is grey at the minimum. */
  .num-stepper {
    display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; align-items: center;
    height: var(--control-h); padding: 0 2px;
    border: 1px solid var(--field-border); border-radius: var(--r-field);
    background-color: var(--field-bg);
    box-shadow: var(--shadow-field);
    transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
  }
  .num-stepper .icon-btn { --_s: calc(var(--control-h) - 8px); justify-self: center; border-radius: var(--r-sm); color: var(--accent); }
  .num-stepper .icon-btn::after { content: ""; position: absolute; inset: calc((var(--hit) - var(--_s)) / -2); }
  @media (hover: hover) { .num-stepper .icon-btn:hover { background: var(--accent-soft); color: var(--accent); } }
  .num-stepper .icon-btn:active { background: var(--accent-soft-hover); }
  .num-stepper .icon-btn .icon { --icon: var(--icon-md); --icon-stroke: var(--stroke-md); }
  .num-stepper .icon-btn:is([aria-disabled="true"], :disabled) { color: var(--ink-4); background: none; }
  .num-stepper__value { display: flex; align-items: baseline; justify-content: center; gap: 4px; min-width: 0; cursor: text; }
  .num-stepper__value input {
    width: 3.4ch; height: calc(var(--control-h) - 2px); padding: 0; border: 0; background: none; outline: none;
    text-align: center;
    font-size: var(--fs-20); line-height: var(--lh-20); font-weight: 600; letter-spacing: var(--ls-20);
    font-variant-numeric: tabular-nums;
  }
  /* No unit: the value fills the middle and sits on the stepper's centre. A unit ("3.5 h") keeps the
     pair centred, the number right-aligned against it. */
  .num-stepper__value:not(:has(> span)) input { width: 100%; }
  .num-stepper__value:has(> span) input { text-align: right; }
  .num-stepper__value span { font-size: var(--fs-15); color: var(--ink-2); }
  .num-stepper + .choices { margin-top: 8px; }
  .num-stepper__value input.is-bumped { animation: ib-bump 180ms var(--ease-out); }
  @keyframes ib-bump { 40% { scale: 1.14; } }

  /* File drop: a label around a hidden file input. */
  .file-drop {
    position: relative;
    display: grid; justify-items: center; gap: 4px;
    padding: 24px 20px;
    border-radius: var(--r-card);
    border: 1px dashed var(--border-strong);
    background: var(--surface-2);
    text-align: center; cursor: pointer;
    transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
  }
  .file-drop.is-dragover { border-color: var(--accent); background: var(--accent-soft); }
  @media (hover: hover) { .file-drop:hover { border-color: var(--accent); background: var(--accent-soft); } }
  .file-drop:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
  .file-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 16px; }
  .file-drop__icon { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 4px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
  .file-drop__icon .icon { --icon: var(--icon-md); --icon-stroke: var(--stroke-md); }
  .file-drop__title { font-weight: 500; }
  .file-drop__title u { color: var(--accent); text-decoration: none; }
  .file-drop__help { font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-2); }
  .file-drop__name { font-size: var(--fs-13); line-height: var(--lh-13); font-weight: 600; }

  /* Live calculation ("Adds to what you are owed  $105.00"). */
  .calc-line {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: 12px 16px;
    border-radius: var(--r-field);
    background: var(--surface-2);
    box-shadow: inset 0 0 0 1px var(--line);
    font-size: var(--fs-15); line-height: var(--lh-15); color: var(--ink-2);
  }
  .calc-line strong { font-size: var(--fs-17); line-height: var(--lh-17); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

  /* The error summary at the top of a form sent back: "3 things to fix", a link per field. */
  .alert__list { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; font-size: var(--fs-13); line-height: var(--lh-13); }
  .alert__list a { color: var(--bad-text); text-decoration: underline; text-underline-offset: 3px; }

  /* The end of a form: Cancel (quiet), then the primary, at the right. On a phone the bar
     docks at the bottom in thumb reach, above the tab bar. */
  .form-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; }
  .form-actions > .btn--danger-quiet:first-child { margin-right: auto; }
  /* A note ("Nothing here is saved.") keeps the left; the buttons stay at the right. */
  .form-actions > :is(span, p, small):not(.btn) { margin-right: auto; }
  @media (max-width: 767px) {
    .form-actions {
      position: sticky; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); z-index: 20;
      flex-wrap: nowrap;
      margin-inline: calc(var(--gutter) * -1); padding: 12px var(--gutter);
      transition: background-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
    }
    /* The material and its hairline only while the bar floats over the page (app.js adds is-stuck);
       in its own place it is just the buttons. Without JavaScript it always floats. */
    .form-actions.is-stuck, :root:not(.js) .form-actions {
      background: var(--material);
      -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
      box-shadow: inset 0 1px 0 var(--line);
    }
    .form-actions > .btn--primary { flex: 1; }
    /* A note beside the buttons takes its own line above them, so neither squeezes the other. */
    .form-actions:has(> :is(span, p, small):not(.btn)) { flex-wrap: wrap; }
    .form-actions > :is(span, p, small):not(.btn) { flex: 1 1 100%; order: -1; }
    /* Inside a sheet or a card the actions are the end of that surface, never a docked bar. */
    :is(.sheet, .card) .form-actions, :root:not(.js) :is(.sheet, .card) .form-actions {
      position: static; margin: 0; padding: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    }
  }

  /* The save bar: it appears when a long form changes ("2 changes · Discard · Save"), sticky
     above the tab bar on phones and at the bottom of the window on desktop. */
  .save-bar {
    position: sticky; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 12px); z-index: 25;
    display: flex; align-items: center; gap: 8px;
    width: fit-content; max-width: 100%; margin-inline: auto;
    padding: 6px 6px 6px 16px;
    border-radius: var(--r-pill);
    background: var(--surface-raised);
    box-shadow: var(--shadow-3);
    font-size: var(--fs-15); line-height: var(--lh-15); font-weight: 500;
  }
  .save-bar[hidden] { display: none; }
  .save-bar__text { flex: 1; min-width: 0; margin-right: 8px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  @media (min-width: 1024px) { .save-bar { bottom: 16px; } }

  /* ---- Sheets and dialogs (native <dialog>) ------------------------------------------------------
     Raised panels (white in light, the raised grey in dark), 20 px corners, on a dim. .sheet--side is an
     inspector at the right, .sheet--center a short form, .sheet--alert a confirmation. On phones
     every sheet is a bottom sheet with a grabber, lifted above the keyboard (--kb). */
  .sheet {
    position: fixed; margin: 0;
    display: none; flex-direction: column;
    max-height: calc(100dvh - 48px);
    border-radius: var(--r-sheet);
    background: var(--surface-raised); color: var(--ink);
    box-shadow: var(--shadow-4);
    overflow: hidden;
    transition:
      translate var(--dur-3) var(--ease-sheet), scale var(--dur-3) var(--ease-sheet), opacity var(--dur-2) var(--ease-out),
      overlay var(--dur-3) allow-discrete, display var(--dur-3) allow-discrete;
  }
  .sheet[open] { display: flex; }
  .sheet::backdrop {
    background: var(--scrim);
    transition: opacity var(--dur-3) var(--ease-out), overlay var(--dur-3) allow-discrete, display var(--dur-3) allow-discrete;
  }
  .sheet:not([open])::backdrop { opacity: 0; }
  @starting-style { .sheet[open]::backdrop { opacity: 0; } }

  .sheet--side { inset: 8px 8px 8px auto; width: min(440px, calc(100vw - 16px)); height: auto; max-height: none; }
  .sheet--side:not([open]) { translate: 24px 0; opacity: 0; }
  @starting-style { .sheet--side[open] { translate: 24px 0; opacity: 0; } }
  .sheet--center { inset: 0; margin: auto; width: min(480px, calc(100vw - 32px)); height: fit-content; }
  .sheet--center:not([open]) { scale: .96; opacity: 0; }
  @starting-style { .sheet--center[open] { scale: .96; opacity: 0; } }
  .sheet--alert { inset: 0; margin: auto; width: min(340px, calc(100vw - 48px)); height: fit-content; text-align: center; }
  .sheet--alert:not([open]) { scale: 1.04; opacity: 0; }
  @starting-style { .sheet--alert[open] { scale: 1.04; opacity: 0; } }
  .sheet--alert .sheet__head { justify-content: center; padding: 24px 24px 8px; }
  .sheet--alert .sheet__title { font-size: var(--fs-17); line-height: var(--lh-17); letter-spacing: var(--ls-17); }
  .sheet--alert .sheet__sub { font-size: var(--fs-15); line-height: var(--lh-15); }
  .sheet--alert .sheet__foot { flex-direction: column-reverse; gap: 8px; box-shadow: none; padding: 16px; }
  .sheet--alert .sheet__foot .btn { flex: none; width: 100%; }

  .sheet__grabber { display: none; }
  /* The X's right edge lines up with the body's content edge (24, 20 on phones). */
  .sheet__head { display: flex; align-items: flex-start; gap: 12px; padding: 20px 24px 8px; }
  .sheet__titles { flex: 1; min-width: 0; padding-top: 2px; }
  .sheet__eyebrow { font-size: var(--fs-13); line-height: var(--lh-13); font-weight: 500; color: var(--ink-2); }
  .sheet__title { font-size: var(--fs-20); line-height: var(--lh-20); font-weight: 600; letter-spacing: var(--ls-20); }
  .sheet__title:focus { outline: none; }
  .sheet__sub { margin-top: 4px; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-2); }
  /* The 30 px X centres on the 25 px title line (the titles' 2 px lead included). */
  .sheet__head-actions { display: flex; align-items: center; gap: 8px; flex: none; padding-top: 0; }
  .sheet__body {
    flex: 1; min-height: 0;
    overflow-y: auto; overscroll-behavior: contain;
    padding: 12px 24px 24px;
    --_gap: var(--sp-5);
    display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--_gap);
  }
  .sheet__foot {
    display: flex; gap: 12px; align-items: center; justify-content: flex-end;
    padding: 16px 24px 24px;
    box-shadow: inset 0 1px 0 var(--line);
  }
  .sheet__note { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-2); text-align: center; }
  .sheet__note .icon { --icon: var(--icon-xs); --icon-stroke: var(--stroke-xs); }
  /* On desktop a sheet whose footer has its own Cancel shows no X. */
  @media (min-width: 768px) {
    .sheet:has(.sheet__foot [data-sheet-close]) .sheet__head-actions > [data-sheet-close] { display: none; }
  }
  /* Inside a raised panel, groups and fields are the field colour with a line edge; wells stay wells. */
  .sheet :is(.group, .form-group) { background: var(--field-bg); }
  .sheet .calc-line { background: var(--surface-2); }
  .sheet .card { background: var(--surface-2); }
  /* A sheet that is a grouped list (Keyboard shortcuts): white groups on the grouped grey, as iOS
     does; in dark the raised panel keeps its lighter groups. */
  .sheet--grouped { background: var(--sheet-grouped); }
  .sheet--grouped :is(.group, .form-group) { background: var(--sheet-grouped-row); box-shadow: none; }

  @media (max-width: 767px) {
    .sheet--side, .sheet--center {
      inset: auto 0 var(--kb, 0px) 0;
      width: 100%; height: auto;
      max-height: calc(100dvh - var(--kb, 0px) - 40px);
      border-radius: var(--r-sheet) var(--r-sheet) 0 0;
      padding-bottom: env(safe-area-inset-bottom);
    }
    .sheet--side:not([open]), .sheet--center:not([open]) { translate: 0 100%; scale: 1; opacity: 1; }
    @starting-style { .sheet--side[open], .sheet--center[open] { translate: 0 100%; scale: 1; opacity: 1; } }
    /* The grabber: a 5 px bar in a 24 px drag strip. */
    .sheet__grabber { position: relative; display: block; flex: none; height: 16px; }
    .sheet__grabber::before { content: ""; position: absolute; top: 6px; left: 50%; width: 36px; height: 5px; margin-left: -18px; border-radius: 3px; background: var(--fill-3); }
    .sheet__head { padding: 8px 20px; }
    .sheet__body { padding: 8px 20px 20px; }
    /* Two actions stack: the primary on top, full width, the other under it. */
    /* The sheet itself carries the home-indicator inset (padding-bottom above): the foot adds none. */
    .sheet__foot { flex-direction: column-reverse; align-items: stretch; gap: 8px; padding: 12px 20px 16px; }
    .sheet__foot .btn { width: 100%; }
  }

  /* ---- Menus and popovers (Popover API) ------------------------------------------------------
     A raised panel next to its invoker (app.js places it): 14 px corners, 6 px padding and
     8 px items (concentric). Mouse hover is the quiet fill; keyboard focus is the accent
     with white text, so Enter's target is unmistakable. */
  .menu {
    position: fixed; inset: auto; margin: 0;
    min-width: 220px; max-width: min(320px, calc(100vw - 24px));
    max-height: min(480px, calc(100dvh - 24px));
    overflow-y: auto;
    padding: 6px;
    border-radius: var(--r-float);
    background: var(--surface-raised);
    box-shadow: var(--shadow-3);
    transform-origin: var(--origin, top left);
    transition: opacity var(--dur-2) var(--ease-out), scale var(--dur-2) var(--ease-out),
      overlay var(--dur-2) allow-discrete, display var(--dur-2) allow-discrete;
  }
  .menu:not(:popover-open) { opacity: 0; scale: .96; transition-timing-function: var(--ease-in); }
  @starting-style { .menu:popover-open { opacity: 0; scale: .96; } }
  .menu__label { padding: 8px 10px 4px; font-size: var(--fs-12); line-height: var(--lh-12); font-weight: 600; color: var(--ink-3); }
  .menu__item {
    display: flex; align-items: center; gap: 12px;
    width: 100%; min-height: 36px; padding: 8px 10px;
    border-radius: var(--r-sm);
    font-size: var(--fs-15); line-height: var(--lh-15); letter-spacing: var(--ls-15); color: var(--ink);
    text-align: left;
    transition: background-color var(--dur-1) var(--ease-out);
  }
  .menu__item.is-hover { background: var(--fill-1); }
  @media (hover: hover) { .menu__item:hover { background: var(--fill-1); } }
  .menu__item:focus-visible { background: var(--accent-fill); color: var(--on-accent); outline: none; }
  .menu__item:focus-visible :is(.menu__sub, .menu__trail, .menu__check, .icon) { color: var(--on-accent) !important; }
  .menu__item > .icon { --icon: var(--icon-md); --icon-stroke: var(--stroke-md); color: var(--ink-3); }
  .menu__text { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .menu__sub { font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-2); }
  .menu__check { --icon: var(--icon-sm) !important; --icon-stroke: var(--stroke-sm) !important; margin-left: auto; color: var(--accent) !important; visibility: hidden; }
  .menu__item[aria-checked="true"] .menu__check, .menu__item[aria-current] .menu__check { visibility: visible; }
  .menu__trail { margin-left: auto; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-2); font-variant-numeric: tabular-nums; }
  .menu__sep { height: 1px; margin: 4px 10px; background: var(--line); }
  .menu__item--danger, .menu__item--danger > .icon { color: var(--bad-text); }
  .menu__item--danger:focus-visible { background: var(--danger-fill); }
  .menu__head { display: flex; align-items: center; gap: 12px; padding: 8px 10px 12px; }
  .menu__head .menu__text strong { font-weight: 600; }
  .menu__block { padding: 8px 10px 12px; }
  .menu .segmented { width: 100%; }
  .menu--account { min-width: 248px; }
  /* A tick list inside a menu or popover (the Reps picker). */
  .menu .check { display: flex; width: 100%; min-height: 36px; padding: 0 10px; border-radius: var(--r-sm); }
  @media (hover: hover) { .menu .check:hover { background: var(--fill-1); } }
  @media (pointer: coarse), (max-width: 767px) { .menu__item, .menu .check { min-height: var(--hit); } }

  /* ---- Toasts ----------------------------------------------------------------------------------- */
  .toast-region {
    position: fixed; z-index: 90;
    left: 50%; bottom: 24px; translate: -50% 0;
    display: grid; gap: 8px;
    width: min(480px, calc(100vw - 24px));
    pointer-events: none;
  }
  .toast {
    pointer-events: auto;
    display: flex; align-items: center; gap: 12px;
    min-height: 52px; padding: 8px 8px 8px 16px;
    border-radius: var(--r-float);
    background: var(--surface-raised);
    box-shadow: var(--shadow-3);
    font-size: var(--fs-15); line-height: var(--lh-15); font-weight: 500;
    transition: opacity var(--dur-3) var(--ease-out), translate var(--dur-3) var(--ease-out);
  }
  @starting-style { .toast { opacity: 0; translate: 0 12px; } }
  .toast.is-leaving { opacity: 0; translate: 0 8px; transition-duration: var(--dur-2); transition-timing-function: var(--ease-in); }
  .toast__icon { --icon: var(--icon-lg); --icon-stroke: var(--stroke-lg); color: var(--ink-2); }
  .toast--good .toast__icon { color: var(--good); }
  .toast--warn .toast__icon { color: var(--warn); }
  .toast--bad .toast__icon { color: var(--bad); }
  .toast__text { flex: 1; min-width: 0; }
  .toast__text small { display: block; margin-top: 2px; color: var(--ink-2); font-weight: 400; }
  .toast__action { display: flex; flex: none; }
  .toast--static { width: 100%; }
  @media (max-width: 1023px) { .toast-region { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 12px); } }

  /* ---- Alerts and banners --------------------------------------------------------------------------
     An alert takes its tone's tint with a 1 px edge of the tone at 28%, so a warning never looks
     like a content card; an info alert stays neutral with the card edge. The test copy banner is
     one quiet line; "Viewing as" is the accent tint. */
  .alert {
    --_c: var(--ink-2);
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px 16px;
    border-radius: var(--r-card);
    background: var(--surface);
    box-shadow: var(--shadow-1);
    font-size: var(--fs-15); line-height: var(--lh-15);
  }
  :is(.card, .sheet, .group, .menu) .alert { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
  .alert__icon { --icon: var(--icon-lg); --icon-stroke: var(--stroke-lg); color: var(--_c); margin-top: 0; }
  .alert__body { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .alert__title { font-weight: 600; color: var(--ink); }
  .alert__text { font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-2); }
  .alert__text a, .alert__title a { color: var(--accent); }
  .alert__actions { display: flex; flex-wrap: wrap; gap: 8px; align-self: center; }
  .alert .icon-btn { margin: -6px -8px -6px 0; }
  .alert--success, :is(.card, .sheet, .group, .menu) .alert--success { --_c: var(--good); background: var(--good-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--good) 28%, transparent); }
  .alert--warning, :is(.card, .sheet, .group, .menu) .alert--warning { --_c: var(--warn); background: var(--warn-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 28%, transparent); }
  .alert--danger, :is(.card, .sheet, .group, .menu) .alert--danger { --_c: var(--bad); background: var(--bad-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bad) 28%, transparent); }
  /* A second action on a tinted alert takes the alert's own tone, never a blue tint on amber. */
  :is(.alert--warning, .alert--danger, .alert--success) .btn--secondary { background: color-mix(in srgb, var(--_c) 16%, transparent); color: var(--ink); }
  @media (hover: hover) { :is(.alert--warning, .alert--danger, .alert--success) .btn--secondary:hover { background: color-mix(in srgb, var(--_c) 24%, transparent); } }
  :is(.alert--warning, .alert--danger, .alert--success) .btn--secondary:active { background: color-mix(in srgb, var(--_c) 24%, transparent); }
  /* The test copy line: its icon on the first line when it wraps. */
  .banner--test {
    display: flex; align-items: flex-start; gap: 6px;
    padding: 0; border-radius: 0;
    background: none; box-shadow: none;
    font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-2);
  }
  .banner--test .alert__icon { --icon: var(--icon-xs); --icon-stroke: var(--stroke-xs); color: var(--ink-3); margin: 2px 0 0; }
  .banner--test .alert__text, .banner--test .alert__title { color: var(--ink-2); font-weight: 400; }
  .banner--test .alert__title { font-weight: 600; }
  .banner--view-as { --_c: var(--accent); background: var(--accent-soft); box-shadow: none; }
  .banner--view-as .alert__title { color: var(--ink); }
  @media (max-width: 767px) {
    .alert { position: relative; flex-wrap: wrap; }
    .alert__actions { flex-basis: 100%; padding-left: 32px; }
    .alert:has(> .icon-btn) { padding-right: 48px; }
    .alert > .icon-btn { position: absolute; top: 12px; right: 12px; margin: -6px; }
    .banner--test { flex-wrap: nowrap; }
  }

  /* The view-as bar: 44 px of the accent tint under the top bar, on every page. */
  .view-as-bar {
    position: sticky; top: var(--bar-h); z-index: 29;
    display: flex; align-items: center; gap: 8px;
    min-height: var(--hit); padding: 4px 4px 4px 12px;
    border-radius: var(--r-pill);
    background: var(--accent-soft); color: var(--accent);
    font-size: var(--fs-13); line-height: var(--lh-13); font-weight: 500;
  }
  .view-as-bar > .icon { --icon: var(--icon-sm); --icon-stroke: var(--stroke-sm); }
  .view-as-bar__text { flex: 1; min-width: 0; color: var(--ink); overflow-wrap: break-word; }
  .view-as-bar .btn { --_h: var(--control-h-sm); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }

  /* ---- Empty state: a quiet icon tile, one sentence, one action ------------------------------------ */
  .empty { display: grid; justify-items: center; gap: 4px; padding: 40px 24px; text-align: center; }
  .empty__icon {
    display: grid; place-items: center;
    width: 44px; height: 44px; margin-bottom: 8px;
    border-radius: 12px;
    background: var(--fill-1); color: var(--ink-3);
  }
  .empty__icon .icon { --icon: var(--icon-lg); --icon-stroke: var(--stroke-lg); }
  .empty__title { font-size: var(--fs-17); line-height: var(--lh-17); font-weight: 600; letter-spacing: var(--ls-17); }
  .empty__text { max-width: 40ch; font-size: var(--fs-15); line-height: var(--lh-15-prose); color: var(--ink-2); text-wrap: balance; }
  .sheet__body > p:not([class]) { line-height: var(--lh-15-prose); }
  .empty .btn, .empty form { margin-top: 16px; }
  .empty .row { justify-content: center; }
  .empty--page { padding-block: 64px; }
  .empty__code { margin-top: 12px; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); }

  /* ---- Skeletons: flat blocks sized like the content, a calm opacity pulse (no shimmer) -------------- */
  .skeleton {
    display: block;
    height: 12px; width: var(--w, 100%);
    border-radius: var(--r-xs);
    background: var(--fill-2);
    animation: ib-pulse 1.6s ease-in-out infinite;
  }
  .skeleton--title { height: 20px; }
  .skeleton--figure { height: 28px; width: var(--w, 55%); border-radius: var(--r-sm); }
  .skeleton--circle { width: var(--size, 32px); height: var(--size, 32px); border-radius: 50%; flex: none; }
  .skeleton--block { height: var(--h, 120px); border-radius: var(--r-card); }
  .skeleton-stack { display: grid; gap: 12px; }
  @keyframes ib-pulse { 50% { opacity: .55; } }
  /* An older name kept for callers that still say shimmer. */
  @keyframes shimmer { 50% { opacity: .55; } }

  /* ---- Filter bar: a search field, filter capsules, then the active filters ------------------------- */
  .filterbar-wrap { container: filters / inline-size; }
  .filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .filter-btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: var(--control-h); min-width: 0; padding: 0 12px 0 14px;
    border-radius: var(--r-pill);
    background: var(--surface); box-shadow: var(--shadow-1);
    font-size: var(--fs-15); line-height: var(--lh-15); font-weight: 500; letter-spacing: var(--ls-15); color: var(--ink);
    white-space: nowrap;
    transition: box-shadow var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
  }
  @media (min-width: 768px) and (pointer: fine) { .filter-btn { font-size: var(--fs-13); line-height: var(--lh-13); letter-spacing: var(--ls-13); } }
  @media (hover: hover) { .filter-btn:hover { box-shadow: var(--shadow-2); } }
  .filter-btn[aria-expanded="true"] { box-shadow: 0 0 0 1px var(--border-strong); }
  :is(.card, .sheet, .group) .filter-btn { background: var(--fill-1); box-shadow: none; }
  @media (hover: hover) { :is(.card, .sheet, .group) .filter-btn:hover { background: var(--fill-2); } }
  .filter-btn > .icon { --icon: var(--icon-sm); --icon-stroke: var(--stroke-sm); color: var(--ink-3); }
  .filter-btn__key { color: var(--ink-2); }
  .filter-btn__value { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
  .filter-btn > .filter-btn__chev { --icon: var(--icon-xs); --icon-stroke: var(--stroke-xs); }
  .filter-btn .badge { background: var(--accent-fill); color: var(--on-accent); }
  .search-field {
    display: flex; align-items: center; gap: 8px;
    height: var(--control-h); width: 280px; max-width: 100%;
    padding: 0 12px;
    border-radius: var(--r-field);
    background: var(--field-bg); box-shadow: 0 0 0 1px var(--field-border), var(--shadow-field);
    color: var(--ink-3);
    cursor: text;
    transition: box-shadow var(--dur-1) var(--ease-out);
  }
  @media (hover: hover) { .search-field:hover { box-shadow: 0 0 0 1px var(--border-strong), var(--shadow-field); } }
  .search-field .icon { --icon: var(--icon-sm); --icon-stroke: var(--stroke-sm); }
  .search-field input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none; font-size: var(--fs-17); letter-spacing: var(--ls-17); color: var(--ink); }
  @media (min-width: 768px) and (pointer: fine) { .search-field input { font-size: var(--fs-15); letter-spacing: var(--ls-15); } }
  .search-field input::placeholder { color: var(--ink-3); opacity: 1; }
  .search-field:focus-within { box-shadow: 0 0 0 1px var(--accent), 0 0 0 4px var(--focus-ring); }
  .filterbar__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  /* Beside the capsule filter buttons the search is the iOS search capsule (fields elsewhere keep 10). */
  .filterbar .search-field { border-radius: var(--r-pill); padding-inline: 14px 12px; }
  @container filters (width < 600px) {
    .filterbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .filterbar .search-field { grid-column: 1 / -1; order: -1; width: 100%; }
    .filterbar .filter-btn { justify-content: flex-start; }
    .filterbar .filter-btn__chev { margin-left: auto; }
    .filterbar__chips { grid-column: 1 / -1; }
    /* In the two phone columns the key already says what each filter is ("Outcome ⌄", plan 8.8),
       so the leading icon goes and "Outcome Any" fits instead of ending in "…". */
    .filterbar .filter-btn > .icon:not(.filter-btn__chev) { display: none; }
  }

  /* ---- Pipeline board: whitespace between stages, cards with an edge ---------------------------------
       >= 1040 px container: six lanes side by side
       560 to 1039 px:        three lanes per row (never sideways scrolling)
       < 560 px:              one stage at a time behind the stage switcher
                              (JavaScript only; without it the lanes stack). */
  .board-wrap { container: board / inline-size; }
  .board { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; align-items: start; }
  @container board (width < 1040px) { .board { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 16px; } }
  @container board (width < 560px) { .board { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
  .lane { min-width: 0; border-radius: var(--r-card); transition: background-color var(--dur-1) var(--ease-out); }
  .lane.is-over { background: var(--accent-soft); }
  .lane__head { display: grid; gap: 2px; padding: 0 0 8px; }
  .lane__title { font-size: var(--fs-15); line-height: var(--lh-15); font-weight: 600; letter-spacing: var(--ls-15); }
  .lane__meta { font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-2); font-variant-numeric: tabular-nums; }
  .lane__count { font-size: var(--fs-15); color: var(--ink-2); font-variant-numeric: tabular-nums; }
  .lane__cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-height: 48px; }
  .lane__empty { padding: 16px 8px; text-align: center; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-3); }

  .kcard {
    position: relative;
    display: grid; gap: 2px;
    padding: 12px;
    border-radius: var(--r-card);
    background: var(--surface);
    box-shadow: var(--shadow-1);
    color: inherit; text-align: left;
    cursor: pointer;
    transition: box-shadow var(--dur-1) var(--ease-out);
  }
  @media (hover: hover) { .kcard:hover { box-shadow: var(--shadow-2); } }
  .kcard.is-selected, .kcard[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--accent); }
  .kcard.is-dragging { box-shadow: var(--shadow-3); }
  .kcard.is-ghost { opacity: .35; }
  .kcard__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
  .kcard__name { font-size: var(--fs-15); line-height: var(--lh-15); font-weight: 600; min-width: 0; }
  .kcard__job { font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-2); }
  .kcard__event { display: flex; align-items: flex-start; gap: 6px; margin-top: 4px; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink); }
  .kcard__event .icon { --icon: var(--icon-xs); --icon-stroke: var(--stroke-xs); margin-top: 2px; color: var(--ink-3); }
  .kcard__event--warn { color: var(--warn-text); }
  .kcard__event--good { color: var(--good-text); }
  .kcard__event--warn .icon, .kcard__event--good .icon { color: currentColor; }
  .kcard__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: 4px; }
  .kcard__source { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-2); }

  /* Phone: one stage at a time, as an inset grouped list. */
  .stage-switch { display: none; }
  @container board (width < 560px) {
    :root.js .stage-switch { position: sticky; top: calc(var(--bar-h) + 4px); z-index: 5; display: block; margin-bottom: 12px; }
    :root.js .board .lane:not(.is-active) { display: none; }
    :root.js .board .lane__head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .lane__cards { gap: 0; overflow: hidden; border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-1); }
    .kcard { padding: 12px 16px; border-radius: 0; box-shadow: none; }
    @media (hover: hover) { .kcard:hover { box-shadow: none; background: var(--row-hover); } }
    .kcard.is-selected, .kcard[aria-expanded="true"] { box-shadow: inset 0 0 0 2px var(--accent); }
    .lane__cards > * + .kcard::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: var(--line); }
    .lane__empty { background: var(--surface); }
  }
  .stage-switch__bar {
    display: grid; grid-template-columns: var(--hit) minmax(0, 1fr) var(--hit); align-items: center;
    width: 100%; height: 52px; padding: 4px;
    border-radius: var(--r-card);
    background: var(--surface);
    box-shadow: var(--shadow-1);
  }
  .stage-switch__bar .icon-btn { --_s: 44px; color: var(--accent); }
  .stage-switch__current {
    display: grid; justify-items: center; align-content: center; gap: 4px;
    min-width: 0; height: 44px; padding: 0 12px;
    border-radius: var(--r-field);
  }
  @media (hover: hover) { .stage-switch__current:hover { background: var(--fill-1); } }
  .stage-switch__line { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
  .stage-switch__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-15); font-weight: 600; }
  .stage-switch__current .icon { --icon: var(--icon-xs); --icon-stroke: var(--stroke-xs); color: var(--ink-3); }
  .stage-switch__dots { display: flex; gap: 4px; }
  .stage-switch__dots span { width: 5px; height: 5px; border-radius: 50%; background: var(--fill-3); }
  .stage-switch__dots span.is-active { background: var(--accent); }

  /* ---- Stepper: a thin segmented bar, one segment per stage ----------------------------------------- */
  .steps-wrap { container: steps / inline-size; }
  .steps { --n: 6; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 4px; }
  .steps__item { position: relative; display: grid; gap: 8px; align-content: start; min-width: 0; }
  .steps__item::before { content: ""; height: 4px; border-radius: var(--r-pill); background: var(--fill-2); }
  .steps__item:is(.is-done, [aria-current="step"])::before { background: var(--accent); }
  .steps__label { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-2); overflow-wrap: break-word; }
  .steps__item[aria-current="step"] .steps__label { color: var(--ink); font-weight: 600; }
  /* Narrow (a sheet, a phone): only the current step keeps its label. */
  @container steps (width < 480px) {
    .steps__item:not([aria-current]) .steps__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .steps__item[aria-current] .steps__label { white-space: nowrap; }
  }

  /* ---- Timeline (notes and history) ------------------------------------------------------------------ */
  .timeline { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .timeline__item { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; }
  .timeline__icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--fill-1); color: var(--ink-2); }
  .timeline__icon .icon { --icon: var(--icon-xs); --icon-stroke: var(--stroke-xs); }
  .timeline__meta { padding-top: 4px; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-2); }
  .timeline__meta strong { color: var(--ink); font-weight: 600; }
  .timeline__text { margin-top: 2px; font-size: var(--fs-15); line-height: var(--lh-15); }

  /* Composer: add a note (a field with a round send button). */
  .composer {
    display: flex; align-items: flex-end; gap: 8px;
    padding: 0 4px 0 12px;
    border: 1px solid var(--field-border); border-radius: var(--r-field);
    background-color: var(--field-bg);
    box-shadow: var(--shadow-field);
    transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
  }
  .composer textarea {
    flex: 1; min-width: 0; min-height: 40px; max-height: 160px;
    padding: 9px 0; border: 0; background: none; outline: none; resize: none;
    font-size: var(--fs-17); line-height: var(--lh-17); color: var(--ink);
    field-sizing: content;
  }
  @media (min-width: 768px) and (pointer: fine) { .composer textarea { font-size: var(--fs-15); line-height: var(--lh-15); } }
  .composer textarea::placeholder { color: var(--ink-3); }
  .composer .icon-btn { --_s: 30px; margin-block: 5px; }
  .composer .icon-btn .icon { --icon: var(--icon-sm); --icon-stroke: var(--stroke-sm); }
  .composer .icon-btn::after { content: ""; position: absolute; inset: -7px; }

  /* Message bubbles (WhatsApp approvals): their last message in grey, the draft reply tinted. */
  .bubble {
    width: fit-content; max-width: min(36rem, 100%);
    padding: 8px 12px;
    border-radius: var(--r-card) var(--r-card) var(--r-card) var(--r-xs);
    background: var(--fill-1); color: var(--ink);
    font-size: var(--fs-15); line-height: var(--lh-15); text-align: left;
  }
  .bubble.draft { border-radius: var(--r-card) var(--r-card) var(--r-xs) var(--r-card); background: var(--accent-soft); }

  /* ---- Command palette (Cmd/Ctrl-K) --------------------------------------------------------------------
     A raised panel (20 px, --shadow-4). The selected row is a quiet fill with its icon in the accent. */
  .palette {
    position: fixed; inset: 12vh 0 auto; margin: 0 auto;
    width: min(620px, calc(100vw - 24px));
    max-height: min(560px, 76dvh);
    display: none; flex-direction: column;
    border-radius: var(--r-sheet);
    background: var(--surface-raised);
    box-shadow: var(--shadow-4);
    overflow: hidden;
    transition: opacity var(--dur-3) var(--ease-out), scale var(--dur-3) var(--ease-out),
      overlay var(--dur-3) allow-discrete, display var(--dur-3) allow-discrete;
  }
  .palette[open] { display: flex; }
  .palette:not([open]) { opacity: 0; scale: .98; }
  @starting-style { .palette[open] { opacity: 0; scale: .98; } }
  .palette::backdrop { background: var(--scrim); }
  .palette__search {
    display: flex; align-items: center; gap: 12px;
    padding: 4px 12px 4px 16px;
    box-shadow: inset 0 -1px 0 var(--line);
  }
  .palette__search > .icon { --icon: var(--icon-lg); --icon-stroke: var(--stroke-lg); color: var(--ink-3); }
  .palette__search input { flex: 1; min-width: 0; height: 52px; border: 0; background: none; outline: none; font-size: var(--fs-17); letter-spacing: var(--ls-17); color: var(--ink); }
  .palette__search input::placeholder { color: var(--ink-3); }
  .palette__search > kbd { background: var(--fill-1); }
  .palette__cancel { display: none; }
  .palette__results { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 6px 8px; overscroll-behavior: contain; }
  .palette__group { padding: 12px 10px 4px; font-size: var(--fs-12); line-height: var(--lh-12); font-weight: 600; color: var(--ink-3); }
  .palette__item {
    display: flex; align-items: center; gap: 12px;
    min-height: 44px; padding: 6px 10px;
    border-radius: var(--r-sm);
    color: var(--ink);
  }
  @media (hover: hover) { .palette__item:hover { background: var(--fill-1); } }
  .palette__item[aria-selected="true"] { background: var(--fill-2); color: var(--ink); }
  .palette__item[aria-selected="true"] .glyph { color: var(--accent); }
  .palette__item:active { background: var(--fill-3); }
  .palette__text { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
  .palette__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .palette__sub { font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .palette__empty { padding: 32px 16px; text-align: center; color: var(--ink-2); }
  .palette__foot {
    display: flex; flex-wrap: wrap; gap: 8px 20px;
    padding: 12px 16px;
    box-shadow: inset 0 1px 0 var(--line);
    font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3);
  }
  .palette__foot span { display: inline-flex; align-items: center; gap: 4px; }
  .palette__foot kbd { background: var(--fill-1); }
  @media (max-width: 767px) {
    .palette { inset: 8px 8px auto; width: auto; max-height: calc(100dvh - 120px); }
    .palette__foot, .palette kbd { display: none; }
    .palette__cancel { display: inline-flex; margin-right: -6px; }
  }

  /* ---- Keycaps: the shortcuts sheet ("⌘ K", "G then H") and a menu item's hint ("?") ------------------- */
  .keys__caps { display: inline-flex; align-items: center; gap: 4px; }
  .keys kbd { min-width: 24px; height: 24px; padding: 0 6px; background: var(--fill-1); font-size: var(--fs-12); color: var(--ink); }
  .keys__then { padding-inline: 2px; font-size: var(--fs-13); color: var(--ink-2); }
  .menu__item > kbd { background: var(--fill-1); }
  .menu__item:focus-visible > kbd { background: color-mix(in srgb, var(--on-accent) 20%, transparent); color: var(--on-accent); }

  /* ---- Charts ------------------------------------------------------------------------------------------
     One theme for the SVG line chart and Chart.js (components/_chartjs.html): the insight as
     the headline, the accent series, a dashed Expected line, 1 px grid lines, the axis on the
     right in 12 px, a callout read with the pointer or the arrow keys, the page's own legend
     (none for one series) and a hidden table for screen readers. */
  .chart { --plot-h: 200px; position: relative; display: flex; flex-direction: column; container: chart / inline-size; }
  .chart > .legend { margin-top: 12px; }
  .chart__insight { margin-bottom: 12px; font-size: var(--fs-15); line-height: var(--lh-15); font-weight: 600; letter-spacing: var(--ls-15); color: var(--ink); text-wrap: balance; }
  .legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-2); }
  .legend:has(> li:only-child) { display: none; }
  .legend li { display: inline-flex; align-items: center; gap: 6px; }
  .legend__key { width: 14px; height: 2px; border-radius: var(--r-pill); background: var(--chart-1); }
  .legend__key--pace { height: 0; background: none; border-top: 1.5px dashed var(--chart-pace); }
  /* The day target drawn as a short solid tick over each bar: the key is that tick. */
  .legend__key--tick { width: 12px; height: 2px; background: var(--chart-pace); }
  .legend__key--muted { background: var(--chart-muted); }
  .legend__key--paired { background: var(--chart-2); }
  /* Bars get a rounded square key. */
  .legend__key--bar,
  .chart:has(canvas[data-chartjs*='"type": "bar"']) .legend__key:not(.legend__key--pace, .legend__key--tick) { width: 10px; height: 10px; border-radius: 3px; }
  .chart:has(canvas[data-chartjs*='"stacked": true']) .legend__key--muted { background: var(--chart-2); }
  .chart__frame { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 8px; }
  .chart__y { order: 2; position: relative; width: 32px; height: var(--plot-h); font-size: var(--fs-12); line-height: var(--lh-12); color: var(--chart-axis); }
  .chart__y span { position: absolute; left: 0; top: calc((1 - var(--v)) * 100%); translate: 0 -50%; }
  .chart__plot { position: relative; height: var(--plot-h); touch-action: pan-y; border-radius: var(--r-xs); }
  .chart__plot:focus-visible { outline-offset: 6px; }
  .chart__svg, .chart__canvas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .chart__grid { stroke: var(--chart-grid); stroke-width: 1; vector-effect: non-scaling-stroke; shape-rendering: crispEdges; }
  .chart__base { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; shape-rendering: crispEdges; }
  .chart__line { fill: none; stroke: var(--chart-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
  .chart__pace { fill: none; stroke: var(--chart-pace); stroke-width: 1.5; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
  .chart__dot {
    position: absolute; left: calc(var(--x) * 100%); top: calc((1 - var(--y)) * 100%);
    width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
    background: var(--chart-1);
    box-shadow: 0 0 0 2px var(--surface);
  }
  .chart__label {
    position: absolute; left: calc(var(--x) * 100%); top: calc((1 - var(--y)) * 100%);
    translate: -50% calc(-100% - 8px);
    font-size: var(--fs-13); line-height: var(--lh-13); font-weight: 600; font-variant-numeric: tabular-nums;
    transition: opacity var(--dur-1) var(--ease-out);
  }
  /* While the callout shows, the latest value's label steps aside. */
  .chart__plot:is(:focus-visible) .chart__label, .chart__plot:has(.chart__hover.is-on) .chart__label { opacity: 0; }
  @media (hover: hover) { .chart__plot:hover .chart__label { opacity: 0; } }
  .chart__x { position: relative; height: 16px; margin: 8px 40px 0 0; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--chart-axis); }
  .chart__x span { position: absolute; left: calc(var(--x) * 100%); translate: -50% 0; white-space: nowrap; }
  .chart__x span:first-child { translate: 0 0; }
  .chart__x span:last-child { translate: -100% 0; }
  .chart__hover { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity var(--dur-1) var(--ease-out); }
  .chart__plot:is(:focus-visible) .chart__hover, .chart__hover.is-on { opacity: 1; }
  @media (hover: hover) { .chart__plot:hover .chart__hover { opacity: 1; } }
  .chart__cross { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--border-strong); }
  .chart__hdot { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--chart-1); box-shadow: 0 0 0 2px var(--surface); }
  /* The callout: the day on top (12/600 ink-2), the value under it (15/600 ink). */
  .chart__tip {
    position: absolute; top: 0; min-width: 128px;
    display: flex; flex-direction: column-reverse; gap: 2px;
    padding: 8px 10px; border-radius: var(--r-field);
    background: var(--surface-raised);
    box-shadow: var(--shadow-3);
    translate: -50% calc(-100% - 12px);
    font-size: var(--fs-12); line-height: var(--lh-12); font-weight: 600; white-space: nowrap; color: var(--ink-2);
  }
  .chart__tip strong { display: block; font-size: var(--fs-15); line-height: var(--lh-15); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
  @container chart (width < 420px) {
    .chart__x span:nth-child(even):not(:last-child) { visibility: hidden; }
  }

  /* ---- Pagination ------------------------------------------------------------------------------------------ */
  .pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
  .pagination__info { font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-2); font-variant-numeric: tabular-nums; }
  .pagination__pages { display: flex; align-items: center; gap: 4px; }
  .pagination__pages .icon-btn { color: var(--accent); }
  @media (hover: hover) { .pagination__pages .icon-btn:hover { background: var(--accent-soft); color: var(--accent); } }
  .pagination__pages .icon-btn[aria-disabled="true"] { color: var(--ink-4); background: none; }
  /* Touch screens: a 44 px box, not only a 44 px hit area, for the view-as bar's buttons and the
     pager's arrows (the view-as bar grows to 52 px). Not the segmented items: they sit inside the
     track's 3 px padding, so a 44 px item spilled 6 px below it and its label sat 3 px under the
     thumb's centre; their ::after already makes the whole track height a 44 px hit area. */
  @media (pointer: coarse) {
    .view-as-bar .btn, .view-as-bar .info-btn { min-width: 44px; min-height: 44px; }
    .pagination__pages .icon-btn { min-width: 44px; min-height: 44px; }
  }
  .pagination__page {
    position: relative;
    display: inline-grid; place-items: center;
    min-width: var(--control-h-sm); height: var(--control-h-sm); padding: 0 8px;
    border-radius: var(--r-pill);
    font-size: var(--fs-15); color: var(--ink-2);
    font-variant-numeric: tabular-nums;
    transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
  }
  .pagination__page::after { content: ""; position: absolute; inset: calc((var(--hit) - var(--control-h-sm)) / -2) 0; }
  @media (hover: hover) { .pagination__page:hover { background: var(--fill-1); color: var(--ink); } }
  .pagination__page[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
  .pagination__gap { color: var(--ink-3); padding: 0 4px; }
  .pagination__compact { display: none; font-size: var(--fs-15); font-weight: 600; padding: 0 8px; }
  @media (max-width: 767px) {
    .pagination__page, .pagination__gap { display: none; }
    .pagination__compact { display: inline; }
  }

  /* ---- Task progress (an import) and the ring ---------------------------------------------------------------
     The ring: a 44 px ring with a 5 px stroke (64 / 6 as .ring--lg) for today's share: the
     accent, the good colour once met with a check in the middle. Rings have no marker. */
  .progress { --value: 0; position: relative; overflow: hidden; height: 6px; border-radius: var(--r-pill); background: var(--fill-2); }
  .progress__bar { position: absolute; inset: 0 auto 0 0; width: calc(clamp(0, var(--value), 1) * 100%); border-radius: inherit; background: var(--accent); transition: width var(--dur-3) var(--ease-out); }
  .progress--indeterminate .progress__bar { width: 38%; animation: indeterminate 1.3s ease-in-out infinite; }
  @keyframes indeterminate { from { translate: -110% 0; } to { translate: 280% 0; } }
  .progress-label { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-2); font-variant-numeric: tabular-nums; }
  .progress-label strong { color: var(--ink); font-weight: 600; }
  .ring { --value: 0; --size: 44px; --stroke: 5px; --_px: 44; position: relative; display: inline-grid; place-items: center; width: var(--size); height: var(--size); flex: none; }
  .ring > svg:not(.icon) { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; }
  .ring > svg:not(.icon) circle { fill: none; stroke-width: calc(var(--stroke) * 64 / var(--_px, 44)); }
  .ring__track { stroke: var(--fill-2); }
  .ring__value { stroke: var(--_fill, var(--accent)); stroke-linecap: round; stroke-dasharray: calc(clamp(0, var(--value), 1) * 100) 100; transition: stroke-dasharray var(--dur-3) var(--ease-out); }
  /* At 0 the round cap alone would paint a lone dot at 12 o'clock: an empty ring is just its track. */
  .ring--empty .ring__value { visibility: hidden; }
  .ring--good { --_fill: var(--good); }
  .ring--warn { --_fill: var(--warn); }
  .ring--bad { --_fill: var(--bad); }
  .ring--lg { --size: 64px; --stroke: 6px; --_px: 64; }
  .ring__label { font-size: var(--fs-11); line-height: var(--lh-11); font-weight: 600; letter-spacing: 0; font-variant-numeric: tabular-nums; }
  .ring--lg .ring__label { font-size: var(--fs-20); line-height: var(--lh-20); letter-spacing: var(--ls-20); }
  .ring > .icon { position: relative; --icon: var(--icon-sm); --icon-stroke: var(--stroke-sm); color: var(--good); }
  .ring--lg > .icon { --icon: var(--icon-xl); --icon-stroke: var(--stroke-xl); }

  /* ---- Tooltip (app.js shows it for [data-tip] on hover and keyboard focus) ---------------------------------- */
  .tip {
    position: fixed; z-index: 100;
    max-width: 260px; padding: 4px 8px;
    border-radius: var(--r-sm);
    background: var(--ink); color: var(--bg);
    font-size: var(--fs-12); line-height: var(--lh-12); font-weight: 500;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--dur-1) var(--ease-out);
  }
  .tip.is-on { opacity: 1; }

  /* ---- Disclosure card (<details>): a closed group ("How is this counted?") ----------------------------------- */
  .disclosure > summary {
    display: flex; align-items: center; gap: 12px;
    min-height: var(--hit); padding: 12px 16px;
    border-radius: inherit;
    list-style: none; cursor: pointer;
    transition: background-color var(--dur-1) var(--ease-out);
  }
  .disclosure > summary::-webkit-details-marker { display: none; }
  @media (hover: hover) { .disclosure > summary:hover { background: var(--row-hover); } }
  .disclosure > summary:focus-visible { outline-offset: -2px; }
  .disclosure > summary > .list__body { padding: 0; }
  .disclosure__chev { --icon: var(--icon-sm) !important; --icon-stroke: var(--stroke-sm) !important; margin-left: auto; color: var(--ink-4); transition: rotate var(--dur-2) var(--ease-out); }
  .disclosure[open] .disclosure__chev { rotate: 180deg; }
  .disclosure[open] > summary { box-shadow: inset 0 -1px 0 var(--line); border-radius: var(--r-card) var(--r-card) 0 0; }
  @media (min-width: 768px) { .disclosure > summary { padding-inline: 20px; } }

  /* ---- Logo lockup: the Icebreaker artwork (traced from the brand files, one inline SVG). It is
     navy on light and white on dark (--logo-ink, which follows the theme); --logo-h sets the height. */
  .lockup { display: inline-flex; align-items: center; min-height: var(--hit); border-radius: var(--r-sm); }
  .lockup__logo { display: block; aspect-ratio: 3000 / 644; height: var(--logo-h, 30px); width: auto; color: var(--logo-ink); }
  .auth-card__logo { display: block; aspect-ratio: 3000 / 644; height: 40px; width: auto; margin: 0 auto 24px; color: var(--logo-ink); }

  /* ---- Sign-in: a small brand moment ----------------------------------------------------------------------------
     The logo, the title (28/34 700) and one line, Continue with Google (a card
     button), an "or" rule, the grouped fields, the switch and one blue button. On a phone
     the column sits on the canvas; from 768 px on a raised card (20 px, 32 padding). */
  /* A viewport width, not a percentage: the centred grid track sizes to its content. */
  .auth-card { width: min(400px, calc(100vw - var(--gutter) * 2)); text-align: center; }
  .auth-card > .app-icon { margin: 0 auto 16px; }
  .auth-card__title { font-size: var(--fs-28); line-height: var(--lh-28); font-weight: 700; letter-spacing: var(--ls-28); }
  .auth-card__lede { max-width: 22rem; margin: 8px auto 24px; font-size: var(--fs-15); line-height: var(--lh-15); color: var(--ink-2); text-wrap: balance; }
  .auth-card__form { text-align: left; }
  .auth-card__hint { min-height: 18px; margin: 8px 16px 0; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-3); text-align: left; }
  .auth-card__hint--error { color: var(--bad-text); font-weight: 500; }
  .auth-card__hint--top { margin: 0 16px 8px; }
  .auth-card__hint--center { margin-inline: 0; text-align: center; }
  .auth-card__submit { margin-top: 24px; }
  .auth-card__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 16px; margin-top: 8px; font-size: var(--fs-15); line-height: var(--lh-15); color: var(--ink-2); }
  .auth-card__links a { display: inline-flex; align-items: center; min-height: var(--hit); }
  .auth-card__links a, .auth-card .link { color: var(--accent); }
  @media (hover: hover) { .auth-card__links a:hover { text-decoration: underline; text-underline-offset: 3px; } }
  .auth-card > .btn + .btn { margin-top: 12px; }
  /* One quiet grouped row under the form (the referral partner program). */
  .auth-card__more { margin-top: 32px; text-align: left; }
  /* "or": a line, the word, a line. */
  .divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-3); text-align: center; }
  .divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
  @media (min-width: 768px) {
    .auth-card { padding: 32px 32px 28px; border-radius: var(--r-sheet); background: var(--surface); box-shadow: var(--shadow-2); }
    .auth-card__submit { margin-top: 20px; }
    .auth-card .form-group { box-shadow: 0 0 0 1px var(--field-border); }
    .auth-card .form-group:focus-within { box-shadow: 0 0 0 1px var(--accent), 0 0 0 4px var(--focus-ring); }
    .auth-card .auth-card__more .group { box-shadow: 0 0 0 1px var(--line); }
  }

  /* ---- Embedded frame (frame(): an email as it looked, a PDF) --------------------------------------------------
     Full width, rounded, on a well while it loads; 720 px high on desktop (or --frame-h), about
     two thirds of the screen on phones. In a sheet (.sheet__frame) it fills the sheet's body. */
  .frame {
    display: block;
    width: 100%; height: var(--frame-h, 720px);
    border: 0; border-radius: var(--r-card);
    background: var(--surface-2);
    box-shadow: 0 0 0 1px var(--line);
  }
  @media (max-width: 767px) { .frame { height: min(var(--frame-h, 720px), 68dvh); } }
  /* .frame--bleed: an email shown as a phone's mail app shows it, edge to edge on a phone (the
     public review page), so it lays out at the phone's own width. */
  @media (max-width: 767px) {
    .frame--bleed { width: calc(100% + var(--gutter) * 2); margin-inline: calc(var(--gutter) * -1); border-radius: 0; box-shadow: none; }
  }
  .card:has(> .card__head) > .frame { background: var(--surface-2); }
  .sheet .frame.sheet__frame { height: max(320px, calc(100dvh - 220px)); max-height: 960px; border-radius: var(--r-card); }

  /* ---- Code block (webhook URLs, keys) ---------------------------------------------------------------------------- */
  .code {
    margin: 0; padding: 12px;
    border-radius: var(--r-field);
    background: var(--surface-2);
    box-shadow: inset 0 0 0 1px var(--line);
    font-family: var(--font-mono); font-size: var(--fs-13); line-height: 1.55; color: var(--ink-2);
    overflow-x: auto; white-space: pre; tab-size: 2;
  }

  /* ---- Metric row (the Month card, Today's cards, plan goals) --------------------------------------------------
     <a class="metric-row" href="…">
       <span class="metric-row__head"><span class="metric-row__name">Dials</span>
         <span class="metric-row__figure"><span class="metric-row__value">3,417</span> <span class="metric-row__of">of 4,713</span></span></span>
       <div class="pbar pbar--lg" style="--value: .72; --pace: .78">…</div>
       <span class="metric-row__sub"><span>This week 729 of 1,165 · Today 21 of 233</span><span class="metric-row__status status status--good">On track</span></span>
     </a>
     The row carries no chip: the card's head does. From 1,440 px the status word sits at the right of the sub. */
  .metric-rows { display: grid; grid-template-columns: minmax(0, 1fr); }
  .metric-row {
    position: relative;
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px;
    padding: 12px var(--pad-card);
    color: inherit;
  }
  /* Every divider in the card starts at the text (the first one, under the week strip, too). */
  .metric-rows > .metric-row + .metric-row::before, .metric-row + .metric-row::before,
  .month-card__week + .metric-rows > .metric-row:first-child::before {
    content: ""; position: absolute; top: 0; left: var(--pad-card); right: 0; height: 1px; background: var(--line);
  }
  a.metric-row { transition: background-color var(--dur-1) var(--ease-out); }
  @media (hover: hover) { a.metric-row:hover { background: var(--row-hover); } }
  a.metric-row:active { background: var(--fill-1); }
  a.metric-row:focus-visible { outline-offset: -2px; }
  .metric-row__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; }
  .metric-row__name { min-width: 0; font-size: var(--fs-17); line-height: var(--lh-17); letter-spacing: var(--ls-17); font-weight: 500; overflow-wrap: break-word; }
  .metric-row__figure { flex: none; white-space: nowrap; font-variant-numeric: tabular-nums; font-feature-settings: "case"; }
  .metric-row__value { font-size: var(--fs-20); line-height: var(--lh-20); font-weight: 600; letter-spacing: var(--ls-20); }
  .metric-row__of { font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-3); }
  .metric-row .pbar { margin: 0; }
  .metric-row__sub { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-2); font-variant-numeric: tabular-nums; }
  .metric-row__sub > .status { display: none; height: auto; padding: 0; background: none; box-shadow: none; font: inherit; font-weight: 600; white-space: nowrap; }
  .metric-row__sub > .status::before { content: none; }
  .metric-row__extra { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-2); font-variant-numeric: tabular-nums; }
  @media (min-width: 768px) { .metric-row__name { font-size: var(--fs-15); line-height: var(--lh-15); letter-spacing: var(--ls-15); } }
  @media (min-width: 1440px) { .metric-row__sub > .status { display: inline; } }

  /* ---- Week strip: one 28 px token per working day, Mon to Fri ------------------------------------------------
     A finished day: a good check (every day target met), a warn "2/4" or a bad "0/4". Today is
     ringed in the accent; a day to come is an empty track; a holiday is grey and struck. */
  /* The title and the caption are centred on the 28 px day tokens (not on the tokens plus their
     letters). The caption sits at the right; where it cannot fit (a phone) it goes under the tokens,
     left aligned with them. */
  .week-strip { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
  .week-strip__days { display: flex; gap: 8px; }
  .week-strip__day {
    position: relative;
    display: grid; place-items: center; flex: none;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--fill-1); color: var(--ink-3);
    font-size: var(--fs-11); line-height: var(--lh-11); font-weight: 600; letter-spacing: 0;
    font-variant-numeric: tabular-nums;
  }
  .week-strip__day .icon { --icon: var(--icon-xs); --icon-stroke: var(--stroke-xs); }
  .week-strip__day::after { content: ""; position: absolute; inset: -8px -4px; }
  .week-strip__day.is-met { background: var(--good-soft); color: var(--good-text); }
  .week-strip__day.is-partial { background: var(--warn-soft); color: var(--warn-text); }
  .week-strip__day.is-missed { background: var(--bad-soft); color: var(--bad-text); }
  .week-strip__day.is-today { background: var(--surface); color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
  .week-strip__day.is-future { background: var(--fill-1); color: transparent; }
  .week-strip__day.is-holiday { background: var(--fill-1); color: var(--ink-4); text-decoration: line-through; }
  .week-strip__dow { display: block; margin-top: 4px; font-size: var(--fs-11); line-height: var(--lh-11); color: var(--ink-3); text-align: center; }
  .week-strip__caption { margin-left: auto; font-size: var(--fs-13); line-height: 28px; color: var(--ink-2); text-align: right; }
  @container weekstrip (width < 440px) {
    .week-strip { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
    .week-strip:has(> .week-strip__title) { grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; }
    .week-strip__caption { grid-column: -2; margin-left: 0; line-height: var(--lh-13); text-align: left; }
  }

  /* ---- Left today: a ring, the metric and what is left, one row each -------------------------------------------- */
  .today__row { position: relative; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px var(--pad-card); }
  .today__row + .today__row::before { content: ""; position: absolute; top: 0; left: calc(var(--pad-card) + 56px); right: 0; height: 1px; background: var(--line); }
  .today__body { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .today__name { font-size: var(--fs-17); line-height: var(--lh-17); letter-spacing: var(--ls-17); font-weight: 500; }
  .today__sub { font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-2); font-variant-numeric: tabular-nums; }
  .today__connect { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-2); font-variant-numeric: tabular-nums; }
  .today__left { flex: none; text-align: right; font-variant-numeric: tabular-nums; }
  .today__left strong { display: block; font-size: var(--fs-20); line-height: var(--lh-20); letter-spacing: var(--ls-20); font-weight: 600; }
  .today__left span { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); }
  .today__left .today__done { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-15); line-height: var(--lh-15); font-weight: 600; color: var(--good-text); }
  .today__done .icon { --icon: var(--icon-sm); --icon-stroke: var(--stroke-sm); }
  /* Beside a control (a stepper, a button) the parts of the sub stack, one per line, with no dot
     ("4 of 8 this week" / "4 to go"), so a dot never dangles at a line's end. */
  .today__row:has(> .num-stepper, > .btn, > form) .today__sub > * { flex-basis: 100%; }
  @media (min-width: 768px) {
    .today__name { font-size: var(--fs-15); line-height: var(--lh-15); letter-spacing: var(--ls-15); }
  }
  /* Narrow phones (under 380 px): the text column keeps its room (a name on one line, a row about 76 px):
     a 36 px ring without its percentage, tighter gaps, and a narrower stepper value. The stepper's 36 px
     buttons keep their 44 px hits (the ::after above). */
  @media (max-width: 379px) {
    /* The card keeps its one 16 px edge (CR-29); the room comes from the gaps and the ring. */
    .today__row { gap: 8px; }
    .today__row + .today__row::before { left: calc(var(--pad-card) + 44px); }
    .today__row .ring { --size: 36px; --stroke: 4px; --_px: 36; }
    .today__row .ring__label { display: none; }
    .today__row .num-stepper { grid-template-columns: 36px minmax(0, 1fr) 36px; }
  }

  /* ---- Ranks (the leaderboard and Reps): the number at 20/25 700, the movement since the last close ---------------- */
  .rank { display: inline-grid; justify-items: center; min-width: 28px; font-size: var(--fs-20); line-height: var(--lh-20); font-weight: 700; letter-spacing: var(--ls-20); font-variant-numeric: tabular-nums; }
  .rank__move { display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-11); line-height: var(--lh-11); font-weight: 500; letter-spacing: var(--ls-11); color: var(--ink-2); }
  .rank__move .icon { --icon: var(--icon-xs); --icon-stroke: var(--stroke-xs); }

  /* ---- Rows that open a person (Needs attention): the name leads. ---------------------------------------------------- */
  .team-reps .list__title { font-weight: 600; }

  /* ---- Dot-separated lines (the page subtitle, a tile's foot) ------------------------------------------------------
     Every part owns the dot on its left; the line is shifted left by one dot and clipped
     there, so a part that wraps to the start of a line loses its dot instead of leaving it
     dangling. After the chip and status rules, so these win on source order. */
  :is(.page-head__sub, .stat__foot, .today__sub, .stat__connect, .metric-row__extra, .today__connect) {
    --_sep: 12px;
    display: flex; flex-wrap: wrap; align-items: baseline;
    margin-left: calc(var(--_sep) * -1);
    clip-path: inset(-8px -8px -8px 8px);
  }
  :is(.page-head__sub, .stat__foot, .today__sub, .stat__connect, .metric-row__extra, .today__connect) > :is(*, .status, .chip) {
    position: relative; display: inline-flex; align-items: baseline; gap: 6px; min-width: 0;
    height: auto; padding: 0 0 0 var(--_sep); border-radius: 0;
    background: none; box-shadow: none;
    font: inherit; letter-spacing: inherit; white-space: normal;
  }
  :is(.page-head__sub, .stat__foot, .today__sub, .stat__connect, .metric-row__extra, .today__connect) > :is(.status, .chip) { font-weight: 500; }
  :is(.page-head__sub, .stat__foot, .today__sub, .stat__connect, .metric-row__extra, .today__connect) > :is(*, .status, .chip)::before {
    content: "·"; position: absolute; left: 0; width: var(--_sep);
    height: auto; border-radius: 0; background: none; box-shadow: none;
    text-align: center; color: var(--ink-3); font-weight: 400;
  }

  /* ---- Static renderings of overlays (the styleguide and the design reference) ----------------------------------------- */
  .sheet.sheet--static, .palette.palette--static {
    position: relative; inset: auto; display: flex; margin: 0;
    width: 100%; max-width: 440px; height: auto; max-height: none;
    opacity: 1; scale: 1; translate: none;
  }
  .sheet--static.sheet--alert { max-width: 340px; }
  .menu.menu--static { position: relative; inset: auto; display: block; opacity: 1; scale: 1; max-height: none; }
  .tip.tip--static { position: relative; display: inline-block; opacity: 1; }
  .tabbar.tabbar--static { position: relative; inset: auto; z-index: auto; display: block; }
  .topbar.topbar--static { position: relative; top: auto; z-index: auto; }
  .stage-switch.stage-switch--static { display: block; position: relative; top: auto; width: 100%; max-width: 380px; margin: 0; }
  .save-bar.save-bar--static { position: relative; bottom: auto; margin: 0; }
  .view-as-bar.view-as-bar--static { position: relative; top: auto; }
  .form-actions.form-actions--static { position: relative; bottom: auto; margin: 0; }

  /* ---- The styleguide's specimens (home/styleguide.html, docs/design-reference) ----------------------------------
     A theme panel (data-theme="light" or "dark") redefines the tokens for its subtree, so both
     palettes sit side by side whatever the page's own theme. */
  .sg-themes { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); }
  .sg-theme { display: grid; gap: 16px; align-content: start; padding: 16px; border-radius: var(--r-card); background: var(--bg); color: var(--ink); box-shadow: 0 0 0 1px var(--border); }
  .sg-theme__title { font-size: var(--fs-13); line-height: var(--lh-13); font-weight: 600; color: var(--ink-2); }
  .sg-swatches { display: grid; gap: 12px 8px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .sg-swatch { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 8px; align-items: center; min-width: 0; }
  .sg-swatch__chip { grid-row: span 2; width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--_c); box-shadow: inset 0 0 0 1px var(--line); }
  .sg-swatch__name { font-family: var(--font-mono); font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink); overflow-wrap: anywhere; }
  .sg-swatch__use { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); }
  .sg-type { display: grid; gap: 16px; }
  .sg-type__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px 16px; }
  .sg-type__meta { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
  @media (max-width: 559px) { .sg-type__row { grid-template-columns: 1fr; } }
  .sg-shapes { display: flex; flex-wrap: wrap; gap: 16px; }
  .sg-shape { display: grid; place-items: center; align-content: center; gap: 2px; width: 96px; height: 72px; background: var(--surface); box-shadow: var(--shadow-1); text-align: center; }
  .sg-shape strong { font-size: var(--fs-13); line-height: var(--lh-13); }
  .sg-shape span { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); }
  .sg-bars { display: grid; gap: 16px; }
  .sg-bar { display: grid; gap: 8px; }
  .sg-bar__label { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-2); }
  .sg-bar__label strong { color: var(--ink); font-weight: 500; }
  .sg-scroll { overflow-x: auto; margin-inline: -4px; padding-inline: 4px; }
  .sg-grid { border-collapse: separate; border-spacing: 12px 12px; margin: -12px; }
  .sg-grid th { font-size: var(--fs-12); line-height: var(--lh-12); font-weight: 500; color: var(--ink-3); text-align: left; white-space: nowrap; vertical-align: middle; }
  .sg-grid td { vertical-align: middle; white-space: nowrap; }
  .sg-grid .btn { white-space: nowrap; }
}

/* -------------------------------------------------------------- utilities */
@layer utilities {
  .text-2 { color: var(--ink-2); }
  .text-3 { color: var(--ink-3); }
  .text-accent { color: var(--accent); }
  .text-sm { font-size: var(--fs-13); line-height: var(--lh-13); }
  .text-xs { font-size: var(--fs-12); line-height: var(--lh-12); }
  .text-strong { font-weight: 600; }
  .text-center { text-align: center; }
  .text-end { text-align: end; }
  .text-good { color: var(--good-text); }
  .text-warn { color: var(--warn-text); }
  .text-bad { color: var(--bad-text); }
  .nowrap { white-space: nowrap; }
  /* Kept on one line in a table column, a value may wrap in a phone card's half-width column
     rather than run into its neighbour ("Mon, Sep 28, 8:00 AM" beside "3 people"). */
  @container table (width < 640px) { .data-table td .nowrap { white-space: normal; } }
  /* A table's name column keeps a name on one line (the Clients board's Client column). */
  @container table (width >= 640px) { .data-table .cell--name { min-width: 13rem; } }
  /* A column shown from 1,440 px only, its value folded into another cell below that (the Clients
     board's "Behind on", under This month). */
  @media (max-width: 1439px) { .hide-below-1440 { display: none !important; } }
  @media (min-width: 1440px) { .show-below-1440 { display: none !important; } }
  /* Long unbroken text (email addresses) wraps anywhere rather than running out of its box. */
  .text-break { overflow-wrap: anywhere; }
  .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .row { display: flex; align-items: center; gap: var(--sp-3); }
  .row--wrap { flex-wrap: wrap; }
  .row--between { justify-content: space-between; }
  .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
  /* One column that never grows past its container (a long URL wraps instead of widening it). */
  .stack { --_gap: var(--sp-4); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--_gap); }
  .stack--sm { --_gap: var(--sp-2); }
  .stack--lg { --_gap: var(--sp-8); }
  :is(.stack, .form-stack, .section, .sheet__body) > :is(.group-title, .row:has(> .group-title:first-child)) + * { margin-top: calc(var(--_gap) * -1); }
  .grow { flex: 1; min-width: 0; }
  .ms-auto { margin-inline-start: auto; }
  .mt-0 { margin-top: 0 !important; }
  .mt-2 { margin-top: var(--sp-2); }
  .mt-4 { margin-top: var(--sp-4); }
  .mt-6 { margin-top: var(--sp-6); }
  .w-full { width: 100%; }
  /* Icon sizes as classes (icon("info", class="icon--sm")): each size with its stroke. */
  .icon.icon--xs { --icon: var(--icon-xs); --icon-stroke: var(--stroke-xs); }
  .icon.icon--sm { --icon: var(--icon-sm); --icon-stroke: var(--stroke-sm); }
  .icon.icon--md { --icon: var(--icon-md); --icon-stroke: var(--stroke-md); }
  .icon.icon--lg { --icon: var(--icon-lg); --icon-stroke: var(--stroke-lg); }
  .icon.icon--xl { --icon: var(--icon-xl); --icon-stroke: var(--stroke-xl); }
  @media (max-width: 767px) { .hide-phone { display: none !important; } }
  /* Only where the sidebar shows (1024 px and up): its own settings. */
  @media (max-width: 1023px) { .with-sidebar { display: none !important; } }
  @media (min-width: 768px) { .show-phone { display: none !important; } }

  /* Motion off: everything settles at once, and nothing pulses. */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 1ms !important; animation-iteration-count: 1 !important;
      transition-duration: 1ms !important; scroll-behavior: auto !important;
    }
    .skeleton, .progress--indeterminate .progress__bar { animation: none !important; }
    .spinner { animation-duration: 1.6s !important; animation-iteration-count: infinite !important; }
  }
  /* Reduced transparency: the two bars are solid (tokens), with no blur. */
  @media (prefers-reduced-transparency: reduce) {
    .topbar, .tabbar, .form-actions { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  }
  :root[data-transparency="reduced"] :is(.topbar, .tabbar, .form-actions) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  @media (forced-colors: active) {
    .card, .group, .stat, .kcard, .sheet, .menu, .palette, .toast, .alert, .form-group, .chip, .status, .search-trigger, .filter-btn { border: 1px solid CanvasText; }
    .meter__fill, .progress__bar, .pbar__fill, .steps__item::before { background: Highlight; forced-color-adjust: none; }
    .pbar__pace { background: CanvasText; forced-color-adjust: none; }
    .status::before, .dot { forced-color-adjust: none; background: CanvasText; }
    .badge { border: 1px solid CanvasText; }
    .nav__item[aria-current="page"], .nav__item.is-current-parent, .tabbar__item[aria-current="page"], .segmented__thumb { outline: 2px solid Highlight; }
    .tabs__item[aria-current="page"]::after { background: Highlight; }
  }
  @media print {
    .sidebar, .topbar, .tabbar, .toast-region, .skip-link, .save-bar, .view-as-bar { display: none !important; }
    .main { margin: 0 !important; }
    body, html { background: white; }
    .card, .group, .stat { break-inside: avoid; box-shadow: 0 0 0 1px silver; }
  }
}

/* ---- foundation components ---- */
/* The shell, the page frame and the shared components the areas build pages from (package
   foundation: plan.md 3 to 8, docs/DESIGN.md "Components"). Tokens only. Everything here sits in the
   components layer: where the layout layer sets a property on the same element (the page's padding),
   this section works through custom properties or neighbouring elements instead. */
@layer components {

  /* ---- Safe areas: the gutter never runs under a notch in landscape (plan.md 3.4). ---------------- */
  :root { --gutter: max(16px, env(safe-area-inset-left), env(safe-area-inset-right)); }
  @media (min-width: 768px) { :root { --gutter: max(24px, env(safe-area-inset-left), env(safe-area-inset-right)); } }
  @media (min-width: 1024px) { :root { --gutter: max(32px, env(safe-area-inset-left), env(safe-area-inset-right)); } }

  /* ---- Scroll lock: the page behind an open sheet or the palette never moves. ---------------------- */
  html:has(dialog[open]) { overscroll-behavior: contain; }
  /* iOS keeps scrolling a page with overflow hidden: app.js pins the body where it was. */
  :root.is-scroll-locked body { position: fixed; inset-inline: 0; top: var(--lock-top, 0px); overflow: hidden; }

  /* ---- Top bar ---------------------------------------------------------------------------------- */
  /* From 1,024 px a destination's own page (no back link) gives the bar no height until it scrolls:
     the bar lies over the page's first 52 px, empty and transparent, and fills in once the title
     scrolls under it. */
  @media (min-width: 1024px) {
    .topbar--root { margin-bottom: calc(var(--bar-h) * -1); }
    :root:not(.is-scrolled) .topbar--root { pointer-events: none; }
    .topbar--root + .page > :first-child { margin-top: var(--sp-6); }
  }
  /* A back label that cannot fit shows the chevron alone (app.js adds is-compact; its aria-label
     still reads "Back to Clients"). */
  .crumbs li.is-parent a.is-compact .crumbs__text { display: none; }
  /* Settings is behind your picture: below 1,024 px it sits at the right of a tab's own large title and
     opens Settings (the sidebar's account row from there). */
  .page-head__avatar {
    position: relative; display: inline-grid; place-items: center;
    width: var(--hit); height: var(--hit); border-radius: 50%;
  }
  @media (hover: hover) { .page-head__avatar:hover { background: var(--fill-1); } }
  .page-head__avatar[aria-current="page"] .avatar { box-shadow: 0 0 0 2px var(--accent); }
  /* Icon buttons a page puts in the top bar (Download, "+") and the workspace's Admin icon are for
     phones: from 768 px the header holds them. */
  .topbar__extra, .ws-topbar { display: contents; }
  @media (min-width: 768px) { .topbar__extra { display: none; } }
  /* A phone's top bar holds at most two buttons: the page's own and the Admin menu come first, and search
     gives way when both are there (it stays on every tab's own page). */
  @media (max-width: 767px) {
    .topbar__actions:has(.ws-topbar):has(.topbar__extra > :not(.ws-topbar)) .topbar__search { display: none; }
  }

  /* ---- Phone tab bar: a count on an item (follow-ups due, people to pay). ------------------------- */
  .tabbar__item { position: relative; }
  .tabbar__badge {
    position: absolute; top: 2px; left: calc(50% + 7px);
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: var(--r-pill);
    background: var(--accent-fill); color: var(--on-accent);
    box-shadow: 0 0 0 2px var(--bg);
    font-size: var(--fs-11); line-height: 18px; font-weight: 700; letter-spacing: 0;
    font-variant-numeric: tabular-nums; text-align: center;
  }

  /* ---- The controls row: the period picker, then a tabbed page's actions, under the tabs. -------- */
  /* Its space above and below is the page rhythm (layout layer: 24 px after a header or tabs, 32 px
     between blocks). */
  .page-controls {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--sp-3) var(--sp-4);
    min-width: 0;
  }
  .page-controls__actions { margin-left: auto; }
  /* On a phone a controls row whose every action is desktop only takes no room (AR-4). */
  @media (max-width: 767px) {
    .page-controls:not(:has(.period-picker, .page-controls__actions > :not(.hide-phone, [hidden]))) { display: none; }
  }
  .page-controls > .period-picker { flex: 1 1 auto; }

  /* ---- Period picker (plan.md 8.6): the grains left, "‹ September 2026 ›" right. -------------------- */
  .period-picker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4); min-width: 0; }
  .period-picker > .period { margin-left: auto; }
  .period-picker > .segmented { min-width: min(100%, 240px); }
  .period > .period__label--button { display: none; }
  .segmented--links .segmented__item { color: var(--ink-2); }
  .segmented--links .segmented__item[aria-current] { color: var(--ink); font-weight: 600; }
  .segmented--links .segmented__item:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
  .segmented--links:has(> .segmented__item:nth-of-type(2)[aria-current]) { --i: 1; }
  .segmented--links:has(> .segmented__item:nth-of-type(3)[aria-current]) { --i: 2; }
  .segmented--links:has(> .segmented__item:nth-of-type(4)[aria-current]) { --i: 3; }
  @media (max-width: 767px) {
    .period-picker { flex: 1 1 100%; }
    .period-picker > .segmented { flex: 1 1 100%; }
    /* The arrows' glyphs, not their boxes, sit on the gutter (SYS-13). */
    .period-picker > .period { flex: 1 1 100%; min-width: 0; margin: 0 -16px; justify-content: space-between; }
    .period-picker > .period:not(:has(> .icon-btn:first-child)) { margin-left: 0; }
    .period-picker > .period:not(:has(> .icon-btn:last-child)) { margin-right: 0; }
    .period > .period__label--wide { display: none; }
    .period > .period__label--button { display: inline-flex; }
  }
  .period-sheet .list__check { --icon: var(--icon-sm); --icon-stroke: var(--stroke-sm); margin-left: auto; color: var(--accent); }
  .period-sheet__reps { display: grid; gap: var(--sp-2); }
  /* While the period changes (HTMX swaps #main), the numbers under the controls wait quietly. */
  .page[aria-busy="true"] > :not(.page-head, .tabs, .page-controls, .view-as-bar, .ws-bar, .banner) {
    opacity: .55; transition: opacity var(--dur-2) var(--ease-out);
  }
  .page[aria-busy="true"] :is(.stat__figure, .metric-row__value) { animation: ib-pulse 1.6s ease-in-out infinite; }

  /* ---- The client workspace (admins): the header, the bar, the switcher and the Admin menu. --------- */
  .ws-switch { max-width: 100%; }
  .ws-switch .icon { flex: none; }
  .page-head--workspace .page-head__actions { align-self: center; }
  .page-head__actions .btn.ws-admin, .ws-bar .btn.ws-admin {
    background: var(--fill-1); color: var(--ink); padding-inline: 12px 10px;
  }
  @media (hover: hover) { .page-head__actions .btn.ws-admin:hover, .ws-bar .btn.ws-admin:hover { background: var(--fill-2); } }
  .ws-admin > .icon { color: var(--ink-2); }
  .ws-admin > .ws-admin__chev { --icon: var(--icon-xs); --icon-stroke: var(--stroke-xs); color: var(--ink-3); }
  @media (max-width: 767px) {
    :is(.page-head__actions, .ws-bar__line) > .ws-admin { display: none; }
  }
  .ws-bar { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
  .ws-bar__line { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: var(--hit); }
  .ws-bar__name { min-width: 0; font-size: var(--fs-17); line-height: var(--lh-17); font-weight: 600; letter-spacing: var(--ls-17); }
  .ws-bar__name .title-menu { margin: 0 -8px; }
  .ws-bar__name .title-menu .icon { --icon: var(--icon-sm); --icon-stroke: var(--stroke-sm); }
  .ws-switcher { min-width: 260px; }
  .ws-switcher .menu__item > .dot { margin-inline: 4px; }
  .menu__search { position: sticky; top: -6px; z-index: 1; padding: 6px 4px 8px; margin: -6px -6px 4px; background: var(--surface-raised); }
  .menu__search .search-field { width: 100%; }
  .menu__empty { padding: 12px 10px; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-3); }
  .menu__note {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 10px 8px;
    font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3);
  }
  .menu__note .icon { --icon: var(--icon-xs); --icon-stroke: var(--stroke-xs); }

  /* ---- Rep picker (plan.md 8.8) ------------------------------------------------------------------ */
  .rep-picker { min-width: 260px; }
  .rep-picker__list { display: grid; gap: 2px; }
  .rep-picker__all { font-weight: 600; }
  .rep-picker__hint { margin-top: var(--sp-2); padding: 0 10px; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-3); }
  .rep-picker__foot { display: flex; justify-content: flex-end; padding: var(--sp-3) 10px 0; }
  .rep-picker--inline .check { padding: 0 2px; min-height: var(--hit); }

  /* ---- Filter bar on phones: one "Filters" button with a count opens the sheet (plan.md 8.8). ------ */
  .filterbar__more { display: none; }
  @container filters (width < 600px) {
    .filterbar-wrap--sheet .filterbar { grid-template-columns: minmax(0, 1fr) auto; }
    .filterbar-wrap--sheet .filterbar .search-field { grid-column: 1; order: 0; }
    .filterbar-wrap--sheet .filterbar > .filter-btn:not(.filterbar__more) { display: none; }
    .filterbar-wrap--sheet .filterbar__more { display: inline-flex; }
    .filterbar-wrap--sheet .filterbar__chips { grid-column: 1 / -1; }
  }
  .filterbar__more > .icon:first-child { color: var(--ink-2); }
  .filterbar__more .badge { min-width: 18px; height: 18px; }

  /* ---- Tables: rows that open a page, and grids that scroll on phones (plan.md 8.10). ---------------- */
  .data-table tr.row-link { cursor: pointer; }
  .row-link__a { color: inherit; }
  @media (hover: hover) { .row-link__a:hover { color: inherit; } }
  @media (hover: hover) { .data-table tr.row-link:hover .row-link__a :is(.person__name, strong), .data-table tr.row-link:hover .row-link__a:not(:has(*)) { color: var(--accent); } }
  /* A real grid (phone="scroll") stays a table at every width: it scrolls inside its card with the
     first column pinned; "Scroll for more" shows until it is scrolled (no fade: no gradients). */
  .table-wrap.table-wrap--scroll { container-type: normal; container-name: none; }
  .data-table--scroll { width: max-content; min-width: 100%; }
  .data-table--scroll :is(th, td) { white-space: nowrap; }
  .data-table--scroll :is(th, td):first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); }
  @media (hover: hover) { .data-table--scroll tbody tr:hover > td:first-child { background: var(--surface); } }
  .table-hint {
    display: none; align-items: center; justify-content: flex-end; gap: 2px;
    padding: 8px 16px 12px;
    font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3);
  }
  .table-hint .icon { --icon: var(--icon-xs); --icon-stroke: var(--stroke-xs); }
  .table-x--scroll.is-overflowing:not(.was-scrolled) + .table-hint { display: flex; }

  /* ---- The Month card (plan.md 9.1, 9.2): the period, the status line with its (i), the week, the rows. */
  .month-card { display: grid; grid-template-columns: minmax(0, 1fr); }
  .month-card > .card__bar { padding-bottom: 4px; }
  .month-card__meta { flex: none; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-2); font-variant-numeric: tabular-nums; }
  .month-card__status { padding: 4px var(--pad-card) 12px; }
  .month-card__word {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: var(--fs-28); line-height: var(--lh-28); font-weight: 700; letter-spacing: var(--ls-28);
    color: var(--ink);
  }
  .month-card__word::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--_dot, var(--ink-4)); }
  .month-card__word--good { color: var(--good-text); --_dot: var(--good); }
  .month-card__word--warn { color: var(--warn-text); --_dot: var(--warn); }
  .month-card__word--bad { color: var(--bad-text); --_dot: var(--bad); }
  .month-card--compact .month-card__word { font-size: var(--fs-20); line-height: var(--lh-20); font-weight: 600; letter-spacing: var(--ls-20); gap: 8px; }
  .month-card--compact .month-card__word::before { width: 8px; height: 8px; }
  .month-card__summary { margin-top: 2px; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-2); }
  /* The overall bar under the word (owner, 2026-10-05) and the goals ahead and behind under the bar. */
  .month-card__overall { margin-top: 14px; }
  .month-card__detail { margin-top: 10px; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-2); text-wrap: pretty; }
  .overall-detail__label { font-weight: 600; color: var(--ink); }
  .overall-detail__label--good { color: var(--good-text); }
  .overall-detail__label--bad { color: var(--bad-text); }
  .month-card__week { padding: 4px var(--pad-card) 12px; container: weekstrip / inline-size; }
  .week-strip__title { flex: none; font-size: var(--fs-13); line-height: 28px; font-weight: 600; color: var(--ink-2); }

  /* ---- Tiles: a foot that only holds the status shows only when the chip moved there (< 200 px). --- */
  .stat--v2 .stat__foot--status-only { display: none; }
  @container (width < 200px) { .stat--v2 .stat__foot--status-only { display: flex; } }
  /* The connect line keeps the foot's 12 px under the bar while that foot is hidden, 4 px under it once shown. */
  .stat--v2 .stat__foot--status-only + .stat__connect { margin-top: 12px; }
  @container (width < 200px) { .stat--v2 .stat__foot--status-only + .stat__connect { margin-top: 4px; } }

  /* ---- "How is this counted?": a quiet (i) link that opens the rule (plan.md 8.9). ------------------ */
  .info-link {
    position: relative;
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 28px; margin-left: -4px; padding: 0 6px 0 4px;
    border-radius: var(--r-sm);
    font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-2);
    transition: color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
  }
  .info-link::after { content: ""; position: absolute; inset: -8px 0; }
  .info-link .icon { --icon: var(--icon-sm); --icon-stroke: var(--stroke-sm); color: var(--ink-3); }
  .info-link[aria-expanded="true"] { color: var(--accent); background: var(--accent-soft); }
  @media (hover: hover) { .info-link:hover { color: var(--accent); background: var(--accent-soft); } }
  .info-link[aria-expanded="true"] .icon { color: var(--accent); }
  @media (hover: hover) { .info-link:hover .icon { color: var(--accent); } }

  /* ---- A person that opens a page (person(..., href=url)). ---------------------------------------- */
  a.person--link { color: inherit; border-radius: var(--r-sm); }
  @media (hover: hover) { a.person--link:hover .person__name { color: var(--accent); } }

  /* ---- Command palette: actions (View as) are one-button forms; a client's workspace rows sit
     indented under it. --------------------------------------------------------------------------- */
  .palette__form { display: contents; }
  button.palette__item { width: 100%; text-align: left; font: inherit; }
  .palette__item--child { padding-left: 32px; min-height: 40px; }
  .palette__item--child .glyph { width: 24px; height: 24px; }

  /* ---- Sheet footers: on phones the X closes and the footer holds the one primary (plan.md 8.11). -- */
  @media (max-width: 767px) {
    /* A confirmation (.sheet--alert) has no X, so its Cancel stays. */
    .sheet:not(.sheet--alert) .sheet__foot:has(.btn--primary, .btn--danger) > .btn[data-sheet-close] { display: none; }
  }

  /* ---- Phone sheets: a 24 px drag strip; the grabber and the head take the drag (app.js). ------------ */
  @media (max-width: 767px) {
    .sheet__grabber { height: 24px; touch-action: none; }
    .sheet__grabber::before { top: 9px; }
    .sheet__head { touch-action: none; }
  }

  /* ---- Popovers and menus as bottom sheets on phones (app.js adds menu--sheet): an (i), a long
     menu (over 6 items) or a filter menu slides up from the bottom with 44 px rows. ---------------- */
  @media (max-width: 767px) {
    .menu.menu--sheet {
      inset: auto 0 var(--kb, 0px) 0 !important;
      width: 100%; min-width: 0; max-width: none;
      max-height: min(80dvh, calc(100dvh - var(--kb, 0px) - 40px));
      padding: 8px 8px max(12px, env(safe-area-inset-bottom));
      border-radius: var(--r-sheet) var(--r-sheet) 0 0;
      box-shadow: var(--shadow-4);
      transform-origin: bottom center;
    }
    .menu.menu--sheet:not(:popover-open) { opacity: 1; scale: 1; translate: 0 100%; }
    @starting-style { .menu.menu--sheet:popover-open { opacity: 1; scale: 1; translate: 0 100%; } }
    .menu.menu--sheet { transition: translate var(--dur-3) var(--ease-sheet), overlay var(--dur-3) allow-discrete, display var(--dur-3) allow-discrete; }
    /* The grabber 9 px from the top edge, as on the dialog sheets. */
    .menu.menu--sheet::before {
      content: ""; display: block; width: 36px; height: 5px; margin: 1px auto 10px;
      border-radius: 3px; background: var(--fill-3);
    }
    .menu.menu--sheet .menu__item { min-height: var(--hit); }
    .menu.menu--sheet.info-pop .menu__block { padding: 4px 12px 8px; }
    .menu.menu--sheet.info-pop .info-pop__title { font-size: var(--fs-17); line-height: var(--lh-17); letter-spacing: var(--ls-17); }
    .menu.menu--sheet.info-pop .info-pop__text { font-size: var(--fs-15); line-height: var(--lh-15-prose); letter-spacing: var(--ls-15); }
    /* The dim fades in and out with the sheet, as the dialog sheets' does. */
    .menu.menu--sheet::backdrop {
      background: var(--scrim);
      transition: opacity var(--dur-3) var(--ease-out), overlay var(--dur-3) allow-discrete, display var(--dur-3) allow-discrete;
    }
    .menu.menu--sheet:not(:popover-open)::backdrop { opacity: 0; }
    @starting-style { .menu.menu--sheet:popover-open::backdrop { opacity: 0; } }
  }
}

/* ---- Touch: press feedback and hit areas --------------------------------------------------------
   Hover styles live in @media (hover: hover), so a tap never leaves a control tinted (iOS keeps
   :hover on the last tapped element). What a finger gets instead is :active: every pressable thing
   answers the press, and every small control has a 44 px target under a coarse pointer. */
@layer components {
  :is(.kcard, .stage-switch__current, .disclosure > summary, .menu__item, .menu .check, label.list__row):active { background: var(--fill-1); }
  :is(.tabs__item, .link, .crumbs li.is-parent a, .auth-card__links a, .auth__foot a):active { opacity: .6; }
  .info-btn:active, .info-link:active { color: var(--accent); background: var(--accent-soft); }
  a.stat:active { scale: .99; }
  :is(a, button).chip:active { background: var(--fill-2); }
  .filter-btn:active { background: var(--fill-1); }
  :is(.card, .sheet, .group) .filter-btn:active { background: var(--fill-3); }
  .pagination__page:active, .page-head__avatar:active, .title-menu:active { background: var(--fill-2); }
  :is(.tabs__item, .link, .crumbs li.is-parent a) { transition: opacity var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
  @media (pointer: coarse) {
    /* 44 px tall targets for the controls drawn smaller than that (as .segmented__item already has). */
    :is(.title-menu, label.chip, .th-sort) { position: relative; }
    :is(.title-menu, label.chip, .th-sort)::after { content: ""; position: absolute; inset: min(0px, calc((var(--hit) - 100%) / -2)) -4px; }
  }
}

/* ---- Delight: page to page, a quick cross-fade (same-origin navigations; Chrome 126+, Safari 18.2+).
   The tab bar and the sidebar are the same on both pages, so they hold still. Never under Reduce Motion. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; }
.tabbar:not(.tabbar--static) { view-transition-name: tabbar; }
.sidebar { view-transition-name: sidebar; }

/* Archive client (team/_archive.html): the confirm sheet's lines, an icon beside each sentence. */
@layer components {
  .archive-sheet__list { --_gap: var(--sp-3); text-align: left; }
  .archive-sheet__reps { display: block; margin-top: var(--sp-1); }
  .archive-sheet__line { align-items: flex-start; }
  .archive-sheet__line > .icon { flex: none; margin-top: 2px; color: var(--ink-3); }
}

/* ==== area: client-rep ==== */
/* Page CSS owned by the client/rep polish agent. Keep this block second-to-last. */
@layer components {
  /* Logged by hand / Entries (tracker/_parts.html entry_rows): the number in the value column, a closed
     month's lock beside it. */
  .entry-trail { display: inline-flex; align-items: center; gap: 6px; }
  .entry-trail > .icon { --icon: var(--icon-sm); --icon-stroke: var(--stroke-sm); color: var(--ink-3); }
  /* Entries by day (entry_groups): one group, the day heads inside it. clip (not hidden) keeps the
     rounded corners over the first head and lets the heads stick. In a sheet they stick to the
     sheet's own top, not under the app bar. */
  .entry-groups { overflow: clip; }
  .entry-groups > .subhead + .list { box-shadow: none; }        /* the head's own line is the one line */
  .sheet .entry-groups .subhead { top: -12px; }                  /* the sheet body's top padding */
  @media (max-width: 767px) { .sheet .entry-groups .subhead { top: -8px; } }

  /* Left today: every control in the column (stepper, "Log a deal", "Log a meeting") is one width,
     one height and one shape, so the right column reads as one edge. */
  .today__row > :is(.num-stepper, .btn) { flex: none; width: 132px; }
  .today__row > .btn {
    --_px: 8px;
    border-radius: var(--r-field);                      /* the stepper's corners */
  }
  @media (max-width: 379px) {
    .today__row > :is(.num-stepper, .btn) { width: 120px; }
  }

  /* Calls on phones (calls/_macros.html call_rows): day heads in one group, as a metric's Records. The
     time sits on the company's baseline at the right, 13 px grey, tabular; the chevron stays centred. */
  .call-days { overflow: clip; }
  .call-days > .subhead + .list { box-shadow: none; }
  .call-days .list__row { align-items: baseline; }
  .call-days .list__row > .list__chev { align-self: center; }
  .call-days .list__trail {
    font-size: var(--fs-13); line-height: var(--lh-13); letter-spacing: var(--ls-13);
    font-weight: 400; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap;
  }

  /* Edit entry sheet: Delete is quiet red text on the fields' edge (the glyph optically on it). */
  .entry-sheet__delete { margin-left: -10px; color: var(--bad-text); }
  .entry-sheet__delete:is(:hover, .is-hover) { background: var(--bad-soft); }
  .entry-sheet__delete:is(:active, .is-pressed) { background: color-mix(in srgb, var(--bad-soft), var(--bad) 12%); }

  /* Metric page (performance/metric_detail.html): the reps filter names its value only ("All reps"),
     and on phones it sits at the right of the title's first line when both fit ("Dials   All reps ⌄"),
     so the first number comes up about 60 px sooner; a long title or rep name wraps it to its own row
     as before. The capsule's -5 px centres it on the 34 px title line; the row gap adds those 5 px back
     when it wraps, so the gap under the subtitle stays 16 px. */
  .page--metric .filter-btn__key:empty { display: none; }
  @media (max-width: 767px) {
    .page--metric .page-head { align-items: flex-start; row-gap: 21px; }
    .page--metric .page-head__main { flex: 1 1 auto; }
    .page--metric .page-head__actions { flex: none; margin-top: -5px; }
  }

  /* Client Reports: the leaderboard row's "Set up" reads as the row's action in the value column. */
  .list__trail > .report-setup { color: var(--accent); font-weight: 400; }

  /* Log a deal (payments/_deal_sheet.html): "Your commission" starts on the fields' text edge (1 px
     border + 12 px padding), so the sheet has one left edge for text. */
  #deal-sheet .kv--stacked .kv__row { padding-inline: 13px; }

  /* Metric page Records on phones: "Show 25 more" under the list, the count under it, centred. */
  .records-more { display: grid; gap: 8px; margin-top: 12px; }
  .records-more__note { font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-2); text-align: center; font-variant-numeric: tabular-nums; }
  .records { overflow: clip; }
  .records > .subhead + .list { box-shadow: none; }

  /* Earnings (payments/my_earnings.html): in a list where some rows open (a chevron) and some don't
     (Salary, a payment), the amounts still end on one edge: a row without a chevron keeps its gutter
     (16 px glyph - 4 px overhang + 12 px gap). */
  section:is([aria-labelledby="owed"], [aria-labelledby="paid"]) .list:has(.list__chev) > li > .list__row:not(:has(.list__chev)) > .list__trail,
  section:is([aria-labelledby="owed"], [aria-labelledby="paid"]) .list:has(.list__chev) > li.list__row:not(:has(.list__chev)) > .list__trail { margin-right: 24px; }
}

/* ==== area: admin-rec ==== */
/* Page CSS owned by the admin/recruiting polish agent. Keep this block last. */
@layer components {
  /* Recruiting: the rating as six CSS dots (rating_meter in web/recruiting/work.py). */
  .rating-meter { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; flex: none; }
  .rating-meter__dot { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--fill-3); }
  .rating-meter__dot.is-on { background: var(--ink-2); }
  .rating-btn { color: var(--ink-3); }
  .rating-btn .rating-meter { margin-right: 2px; }

  /* Pipeline board: the rating left and the last activity right in every card (margin-left: auto
     keeps it right when a narrow lane wraps it under the rating); the Hired lane's older hires link. */
  .lane .kcard__foot { flex-wrap: wrap; align-items: center; row-gap: 4px; }
  .lane .kcard__foot > .age { margin-left: auto; }
  .kcard__source .kcard__unassigned { color: var(--ink-2); }
  .lane__older { padding: 8px 8px 4px; text-align: center; font-size: var(--fs-13); line-height: var(--lh-13); }
  .lane__head .lane__meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Candidate page. Phones: the contact channels as equal tiles, icon over label (3 or 4 in a row). */
  .contact-actions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--sp-2); }
  .contact-actions > .btn {
    flex-direction: column; gap: 4px; height: 56px; min-height: 56px; padding: 0 4px;
    font-size: var(--fs-12); line-height: var(--lh-12); letter-spacing: var(--ls-12); border-radius: var(--r-group);
  }
  .contact-actions > .btn .icon { --icon: 20px; }
  /* An application card's job title is a card title (17), not a second section title (20). */
  .app-card.card > .card__head .card__title { font-size: var(--fs-17); line-height: var(--lh-17); letter-spacing: var(--ls-17); }
  /* The Overview's inline menus (Rating, Owner) sit in a 48 px row like Status: no box of their own,
     the 44 px hit area on ::after. */
  .page--candidate .kv__row dd > .btn--plain { height: auto; min-height: 0; padding-block: 0; position: relative; }
  .page--candidate .kv__row dd > .btn--plain::after { content: ""; position: absolute; inset: -12px -8px; }
  .page--candidate .kv__row { align-items: center; }
  /* Phones: with only the "…" menu in the header (the moves are on each application's card), it sits beside
     the name instead of alone on a row of its own under it. */
  @media (max-width: 767px) {
    .page--candidate .page-head:has(> .page-head__actions > .icon-btn:only-child) { flex-wrap: nowrap; align-items: flex-start; }
    .page--candidate .page-head:has(> .page-head__actions > .icon-btn:only-child) > .page-head__main { flex: 1 1 0; }
    .page--candidate .page-head__actions:has(> .icon-btn:only-child) { flex: none; }
  }
  @media (max-width: 767px) {
    /* Contact: the label over the value, so an email or a LinkedIn address wraps left-aligned. */
    .contact-kv .kv__row { flex-direction: column; align-items: flex-start; gap: 2px; }
    .contact-kv dt { max-width: none; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-2); }
    .contact-kv dd { text-align: left; }
  }

  /* Integrations > Maintenance: the help beside its button. */
  .maint-help { flex: 1 1 240px; }

  /* Jobs (phones): one box per job; the head is the link (title in ink 17/22, company under it), the
     facts, then a foot inside the box under a hairline: the candidates and two ink-2 icon buttons. */
  .job-card { display: grid; }
  .job-card__head { display: flex; align-items: center; gap: 12px; padding: 14px 16px 0; color: inherit; text-decoration: none; }
  .job-card__title { display: block; font-size: var(--fs-17); line-height: var(--lh-17); font-weight: 600; letter-spacing: var(--ls-17); color: var(--ink); }
  .job-card__body { padding: 12px 16px 14px; }
  .job-card__foot { min-height: var(--hit); padding: 0 8px 0 16px; box-shadow: inset 0 1px 0 var(--line); }
  .job-card__foot .icon-btn { color: var(--ink-2); }
  @media (hover: hover) { .job-card__head:hover .job-card__title { color: var(--accent); } }

  /* Jobs (desktop): the six stages as a strip, a count over a 4 px bar each. */
  .stage-strip { display: inline-grid; grid-template-columns: repeat(6, 28px); gap: 3px; vertical-align: middle; }
  .stage-strip__seg { display: grid; gap: 3px; justify-items: center; }
  .stage-strip__seg::after { content: ""; width: 100%; height: 4px; border-radius: 2px; background: var(--fill-2); }
  .stage-strip__seg.is-on::after { background: var(--accent); }
  .stage-strip__seg--hired.is-on::after { background: var(--good); }
  .stage-strip__n { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-4); font-variant-numeric: tabular-nums; }
  .stage-strip__seg.is-on .stage-strip__n { color: var(--ink-2); font-weight: 600; }
  .page--jobs td .chip { white-space: nowrap; }

  /* Recruiting > Today: the chips stay one line on a phone and scroll sideways, bleeding to the edges. */
  .chip-scroller { flex-wrap: wrap; }
  @media (max-width: 767px) {
    .chip-scroller {
      flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain;
      margin-inline: calc(var(--gutter, 16px) * -1); padding-inline: var(--gutter, 16px);
      /* The chips' tap areas reach 10px above and below them (a.chip::after): room for them inside the row, so
         the row has nothing to scroll up and down (a vertical swipe on the chips used to slide them half out of
         sight) and the swipe scrolls the page. The negative margin keeps the chips where they were. */
      padding-block: 10px; margin-block: -10px;
    }
    .chip-scroller::-webkit-scrollbar { display: none; }
    .chip-scroller > * { flex: none; }
  }

  /* Referral portal: the link as a read-only field with Copy at its end. */
  .partner-link__field { position: relative; }
  .partner-link__field > .input { padding-right: 76px; text-overflow: ellipsis; color: var(--ink-2); }
  .partner-link__field > .btn { position: absolute; top: 50%; right: 6px; translate: 0 -50%; }

  /* People > a recruiter: the placement commission wears its unit, "$" before a flat amount, "%" after a
     percent; the number reads left to right like the other single fields in the card. */
  .commission-amount.input-group > .input[inputmode="decimal"] { text-align: left; }
  .commission-amount__pct { position: absolute; right: 12px; z-index: 1; color: var(--ink-3); pointer-events: none; }
  .commission-amount.is-flat > .commission-amount__pct { display: none; }
  .commission-amount.is-percent > .commission-amount__dollar { display: none; }
  .commission-amount.is-percent > .input { padding-left: 12px; padding-right: 32px; }

  /* Payments > Deals: a settled deal's trail is a quiet word, not a figure. */
  .list__trail .list__trail-quiet { font-size: var(--fs-15); line-height: var(--lh-15); letter-spacing: var(--ls-15); font-weight: 400; color: var(--ink-3); }

  /* Targets grid: every metric head is the name over its period, right-aligned over its boxes, the
     column's "…" beside the name; the head row's cells sit on one bottom line (Rep included). */
  th:has(> .th-metric), th:has(.th-metric) { vertical-align: bottom; text-align: right; }
  .data-table thead:has(.th-metric) th { vertical-align: bottom; }
  .th-metric { display: inline-flex; flex-direction: column; align-items: flex-end; max-width: 100%; text-align: right; }
  .th-metric__name { white-space: nowrap; }
  .th-metric__per { display: inline-flex; align-items: center; gap: 2px; color: var(--ink-3); font-weight: 400; white-space: nowrap; }
  .th-metric__per > .icon-btn { flex: none; margin-block: calc((var(--lh-13) - 28px) / 2); }

  /* Client Setup: the Turned off row's eye-off sits in the drag handle's slot (same width), no grab cursor. */
  .list__handle.setup-off__lead { cursor: inherit; color: var(--ink-3); }

  /* Pipeline: a card moved from its sheet glides to its new lane (each card names its own transition). */
  .board .kcard { view-transition-class: kcard; }
  ::view-transition-group(*.kcard) { animation-duration: 250ms; animation-timing-function: var(--ease-out); }
}

/* admin-rec overrides of layout-layer rules (.section) live in that layer so they can win there. */
@layer layout {
  @media (max-width: 767px) {
    /* Candidate page, one heading system on a phone: Applications and Notes read as group titles,
       like Contact below. */
    .page--candidate .section > .section__head { margin-bottom: -4px; }
    .page--candidate .section__title { font-size: var(--fs-13); line-height: var(--lh-13); letter-spacing: var(--ls-13); color: var(--ink-2); }
  }
}

/* ════════════════════════════════════════════════════════════════════════
   Navigation and simplicity pass (2026-09-26). One section per area, so
   each area's rules stay together. Add rules only inside your own section.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Nav pass: client and admin views (performance, calls, search) ── */
@layer components {
  /* The call page (K-05): one readable column, what happened first. */
  .call-page { max-width: 760px; }
  .call-outcome { display: grid; gap: var(--sp-2); }
  .call-outcome__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
  .call-outcome__what { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); min-width: 0; }
  .call-outcome__row > .btn { flex: none; }
  .call-outcome__note { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }

  /* Home on a phone (K-20): every rep's status inside the Month card, flat rows under a quiet label. */
  .month-card__reps { padding-bottom: 8px; box-shadow: inset 0 -1px 0 var(--line); }
  .month-card__label { display: flex; align-items: center; gap: 8px; }
  .month-card__label, .month-card__reps .group-title {
    margin: 0; padding: 4px var(--pad-card) 2px;
    font-size: var(--fs-13); line-height: var(--lh-13); font-weight: 600; color: var(--ink-2);
    text-transform: none; letter-spacing: normal;
  }
  .month-card__reps .group { background: transparent; box-shadow: none; border-radius: 0; }
  .month-card__reps .log-numbers { margin-bottom: 4px; }
  .log-numbers .list__row .btn { flex: none; }

  /* Reps (K-03): "Last logged Thu, Sep 24" on its own quiet line under a phone row's reason. */
  .rep-logged { display: block; color: var(--ink-3); }
  .rep-logged::before { content: none; }

  /* Reps, read first (2026-10-06): the rank as a small number before the avatar; Overall "96% · On track"
     over its bar; a metric cell keeps "8 to go" and the connects in its tooltip. */
  .rank-lead { flex: none; min-width: 1.5em; margin-right: 4px; text-align: right; font-size: var(--fs-12); line-height: var(--lh-12); font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
  .overall-cell { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
  .overall-cell .metric-cell__dot { color: var(--ink-3); }
  .cell-tip { display: block; }

  /* Targets (K-07): the line under a box that changed by 2x or more. */
  .target-hint { margin-top: 4px; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--warn-text); text-align: right; }
  .target-hint[hidden] { display: none; }

  /* Metric page on a phone (K-28): the facts in one line and a jump to the records. */
  .metric-facts { margin-top: 8px; padding: 0 4px; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-2); }
  .metric-jump { margin-top: calc(var(--sp-2) * -1); }

  /* Calls: All · Conversations · Meetings under the search (K-19). */
  .calls-quick { max-width: 420px; }
}

/* ── end: client and admin views ── */

/* ── Nav pass: rep and salesperson Today and logging ── */
@layer components {
  /* A day with no targets: one quiet line under the day's title ("No targets today. Anything you log
     counts for Sat, Sep 26."), tucked up to the title like a subtitle. */
  .left-off { margin-top: calc(var(--sp-1) * -1); font-size: var(--fs-15); line-height: var(--lh-15); letter-spacing: var(--ls-15); }
}

/* ── end: rep and salesperson Today and logging ── */

/* ── Nav pass: admin areas (clients, team, integrations, system, payments, reports) ── */
@layer components {
  /* The workspace title (A-06): the client's name on one line, the chevron right after it; it ends in
     "…" only when it truly does not fit. */
  .ws-switch { display: inline-flex; width: auto; max-width: calc(100% + 16px); gap: 6px; white-space: nowrap; }  /* 100% plus its -8px margins */
  .ws-switch__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .page-head--workspace .page-head__titles { min-width: 0; }

  /* A sync problem above a client's Overview, with its fix (A-03). */
  .ws-alerts .alert__actions .btn { white-space: nowrap; }

  /* A report's Preview inside the app (A-16): the bar stays at the top while the email scrolls. */
  .preview-bar {
    position: sticky; top: calc(var(--bar-h) + 8px); z-index: 5;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3) var(--sp-4);
    padding: var(--sp-3) var(--sp-4); border-radius: var(--r-card);
    background: var(--surface); box-shadow: var(--shadow-1);
  }
  .preview-bar__titles { min-width: 0; }
  .preview-bar__title { font-size: var(--fs-17); line-height: var(--lh-17); font-weight: 600; letter-spacing: var(--ls-17); }
  .preview-bar__sub { font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-2); }
  .preview-bar__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
  .preview-bar__actions form { display: contents; }
  .report-preview__frame { display: block; width: 100%; height: max(640px, calc(100dvh - 220px)); border: 0; border-radius: var(--r-card); background: var(--bg); }
  @media (max-width: 767px) {
    .preview-bar__actions { width: 100%; }
    .preview-bar__actions .btn { flex: 1 1 100%; justify-content: center; min-height: var(--hit); }
  }
  /* "Email a preview to abe@icebreakerbd.com" says its real address (A-15), so on a phone it may take two
     lines rather than run past the button's edge. */
  @media (max-width: 767px) {
    .btn.preview-to, .preview-bar__actions .btn {
      height: auto; white-space: normal; overflow-wrap: anywhere; text-align: center; padding-block: 10px;
    }
  }

  /* Payments > Owed: a person's name stays on one line beside the amounts (A-24's wider Pay buttons). */
  #owed .person__name { white-space: nowrap; }
  #owed :is(th, td):not(:first-child, :last-child) { padding-inline: 8px; }
  /* On a phone card the Pay button has the room for the full size. */
  @media (max-width: 767px) {
    #owed .btn--sm { --_h: var(--control-h); --_px: 16px; font-size: var(--fs-15); line-height: var(--lh-15); letter-spacing: var(--ls-15); }
  }

  /* The report just set up, in view on its list (K-18). */
  #email-reports li.list__row:target { background: var(--accent-soft); transition: background-color 1.2s var(--ease-out); }
}
@layer layout {
  /* One frame width on every page of a client (A-07): on a list or form page the workspace bar and its
     tab row keep the full width of the other tabs; only the page's own header and content take the
     760 px column, from the same left edge. */
  .main > .page--narrow:has(> .ws-bar) { --content-max: var(--content-page); margin-inline: auto; }
  .page--narrow:has(> .ws-bar) > :not(.ws-bar, .view-as-bar, .banner) { max-width: var(--content-narrow); }
}


/* ── end: admin areas ── */

/* ── Nav pass: recruiting, partner and public pages ── */
@layer components {
  /* Pipeline: the card a "Move to" just moved, for a moment after the page comes back at its lane. */
  .kcard.is-moved { outline: 2px solid var(--accent); outline-offset: -2px; }
  /* The quick sheet's footer on wide screens: when "Close application…" and "Move to Submit to client"
     don't fit one line, the move goes on top (as phones stack it) and nothing squeezes its label. */
  @media (min-width: 768px) {
    .sheet--side .sheet__foot:has(> .row) { flex-wrap: wrap-reverse; }
    .sheet--side .sheet__foot > .btn { flex: none; white-space: nowrap; }
    .sheet--side .sheet__foot > .row { flex: 0 1 auto; margin-left: auto; }
  }
  /* The quick sheet's "Note added." / "Next step saved." under what was saved. */
  .saved-line { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
  .saved-line .icon { color: var(--good, var(--accent)); }
  /* The quick sheet's "Open profile" beside the X: one line, never wraps. */
  .sheet__head-actions .sheet__profile { white-space: nowrap; }
  /* The quick sheet's newest notes under the composer. */
  .sheet .composer + .timeline { margin-top: var(--sp-3); }
  /* Candidates: the Applications header holds the counts and "+ Add to a job" on one line. */
  .section--apps .section__meta { display: flex; align-items: center; gap: var(--sp-3); }
  .section--apps .section__meta .btn { margin-block: -8px; }

  /* A job's page. The header: "13 in process · 1 hired · 2 overdue" and "Open on the board" on one line. */
  .section--people .section__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--sp-3); }
  .section--people .section__meta .btn { margin-block: -8px; }
  /* How many people are at each stage: one cell per stage in one card, six across (three on phones), the
     card's line colour showing through 1 px gaps as the dividers; a count jumps to its people below, a
     stage nobody is at stays quiet. */
  .stage-strip {
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px;
    background: var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-1); overflow: hidden;
  }
  .stage-strip__item {
    display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px 12px 14px;
    background: var(--surface); color: inherit; text-decoration: none;
  }
  @media (hover: hover) { a.stage-strip__item:hover { background: var(--surface-2); } }
  a.stage-strip__item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  .stage-strip__count {
    font-size: var(--fs-28); line-height: var(--lh-28); letter-spacing: var(--ls-28); font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .stage-strip__label { font-size: var(--fs-12); line-height: var(--lh-12); letter-spacing: var(--ls-12); color: var(--ink-2); }
  .stage-strip__item.is-empty .stage-strip__count, .stage-strip__item.is-empty .stage-strip__label { color: var(--ink-3); }
  .stage-strip__item.is-empty .stage-strip__count { font-weight: 500; }
  @media (max-width: 767px) {
    .stage-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .stage-strip__count { font-size: var(--fs-20); line-height: var(--lh-20); letter-spacing: var(--ls-20); }
  }
  /* Each stage's people: the stage and its count over the list; the page scrolls a jump clear of the bar. */
  .stage-group { scroll-margin-top: 72px; }
  .stage-group__count { color: var(--ink-3); font-weight: 500; font-variant-numeric: tabular-nums; }
  .stage-group > .group-title { justify-content: flex-start; gap: 6px; }
  /* A person's line: the next step (amber once it is late) or how long it has been quiet. */
  .person-line { display: inline; }
  .person-line > .icon { --icon: var(--icon-xs); --icon-stroke: var(--stroke-xs); display: inline-block; vertical-align: -2px; margin-right: 4px; color: var(--ink-3); }
  .person-line--warn { color: var(--warn-text); }
  .person-line--bad { color: var(--bad-text); }
  .person-line--warn > .icon, .person-line--bad > .icon { color: currentColor; }
  /* The candidate page's application card (Abe, Oct 5). The next step: a soft well with what is next and
     when (amber once late); "Change" opens its two fields under it, in the same well. */
  .next-step { border-radius: var(--r-float); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
  .next-step__summary {
    display: flex; align-items: center; gap: 12px; min-height: var(--hit); padding: 10px 12px;
    list-style: none; cursor: pointer; border-radius: inherit;
  }
  .next-step__summary::-webkit-details-marker { display: none; }
  .next-step__summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .next-step__icon { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--surface); color: var(--ink-2); box-shadow: 0 0 0 1px var(--line); }
  .next-step__body { display: grid; gap: 1px; min-width: 0; flex: 1; }
  .next-step__label { font-size: var(--fs-12); line-height: var(--lh-12); letter-spacing: var(--ls-12); color: var(--ink-2); font-weight: 500; }
  .next-step__text { font-size: var(--fs-15); line-height: var(--lh-15); letter-spacing: var(--ls-15); color: var(--ink); overflow-wrap: anywhere; }
  .next-step__edit { flex: none; font-size: var(--fs-13); line-height: var(--lh-13); font-weight: 600; color: var(--accent-text); }
  .next-step[open] .next-step__edit { visibility: hidden; }
  .next-step__form { padding: 4px 12px 12px; border-top: 1px solid var(--line); padding-top: 12px; }
  .next-step--warn { background: var(--warn-soft); box-shadow: none; }
  .next-step--warn .next-step__text, .next-step--warn .next-step__label { color: var(--warn-text); }
  .next-step--warn .next-step__icon { color: var(--warn-text); box-shadow: none; }
  @media (hover: hover) { .next-step:not([open]) .next-step__summary:hover .next-step__edit { text-decoration: underline; text-underline-offset: 3px; } }
  /* What has happened, one quiet line under it. */
  /* A fact never breaks inside itself ("No activity / for 9 days"): the line wraps after a dot. */
  .app-facts > :is(span, a):not(.app-facts__sep) { white-space: nowrap; }
  .app-facts { margin: 0; font-size: var(--fs-13); line-height: var(--lh-13); letter-spacing: var(--ls-13); color: var(--ink-2); }
  /* The moves: "Move to …" with its chevron, "Send to client again", and the menu at the far end. */
  .app-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
  .app-card__actions .split, .list .split { display: inline-flex; align-items: center; gap: 2px; }
  .app-card__more { margin-left: auto; }
  /* Closed applications on a phone: Reactivate goes under the job, so the job's name keeps the row's width. */
  @media (max-width: 767px) {
    .closed-apps .list__row { flex-wrap: wrap; row-gap: 8px; padding-block: 12px; }
    .closed-apps .list__row > .split { flex-basis: 100%; }
  }
  /* Whose they are (admins, someone else's or nobody's): quiet beside the name, never a second title. */
  .person-owner { font-size: var(--fs-13); line-height: var(--lh-13); font-weight: 400; color: var(--ink-2); }

  /* Referrals: the link shown like a read-only field; the part that is theirs ("/apply?aff=27") stays whole
     and a narrow screen shortens the host instead. */
  .partner-link__show {
    display: flex; align-items: center; gap: var(--sp-2); min-height: var(--hit);
    padding: 0 6px 0 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2);
  }
  .partner-link__show > .btn { position: static; translate: none; flex: none; }
  .partner-link__url { display: flex; min-width: 0; flex: 1; color: var(--ink-2); font-variant-numeric: tabular-nums; }
  .partner-link__host { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .partner-link__path { flex: none; color: var(--ink); white-space: nowrap; }

  /* Sign in: "Looking for a sales job? See open roles" reads as one line, the link's 44 px target centred on it. */
  .auth-card__links--jobs { align-items: center; gap: 0 6px; margin-top: 0; }
}


/* ── end: recruiting, partner and public pages ── */


/* ════════════════════════════════════════════════════════════════════════
   Owner decisions pass (2026-09-27). One section per area, so each area's
   rules stay together. Add rules only inside your own section.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Decisions: shell (tab bar, avatar, Settings) ── */
/* Settings lives behind your picture (A-10, K-21): the phone tab bar holds the role's destinations
   only (at most five, no More); below 1,024 px your picture beside a tab's large title opens Settings
   (never in the top bar: two buttons at most there), and the sidebar's account row from 1,024 px. */
@layer components {
  /* The picture, with a dot while System needs attention (an admin's late or failing background job).
     The words are in the control's own aria-label; the dot is decoration. */
  .avatar-wrap { position: relative; display: inline-grid; place-items: center; flex: none; }
  .avatar-dot {
    position: absolute; top: -1px; right: -1px;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--bad); box-shadow: 0 0 0 2px var(--bg);
    pointer-events: none;
  }
  /* The same dot on Settings' System row (on its icon, as on an app icon) and at the end of the account
     menu's Settings. */
  .glyph:has(> .avatar-dot) { position: relative; }
  .glyph > .avatar-dot { top: -3px; right: -3px; box-shadow: 0 0 0 2px var(--surface); }
  .avatar-dot--inline { position: static; flex: none; width: 8px; height: 8px; box-shadow: none; }
  .menu__item > .avatar-dot--inline { margin-left: auto; }
  .menu__item:focus-visible > .avatar-dot--inline { background: var(--on-accent); }

  /* The picture beside a tab's large title (phones and tablets; the top bar keeps two buttons at most):
     a 44 px target at the right of the title's row, centred on the title's 34 px line, the 32 px picture
     flush with the page's edge; it scrolls away with the title. Only the title makes room for it: the
     line of context under it keeps the full width. The focus ring follows its circle. */
  .page-head__main:has(> .page-head__avatar) { position: relative; }
  .page-head__avatar { position: absolute; top: -5px; right: -6px; }
  .page-head__main:has(> .page-head__avatar) .page-head__title { padding-right: calc(var(--hit) + 4px); }
  .page-head__avatar:focus-visible { outline-offset: -2px; }
  .page-head__avatar .avatar[data-initials]::before { content: attr(data-initials); }
  /* Tablets: the header's actions share the title's row, so the picture takes the row's far right. */
  @media (min-width: 768px) and (max-width: 1023px) {
    .page-head:has(> .page-head__main > .page-head__avatar) { position: relative; padding-right: calc(var(--hit) + 8px); }
    .page-head__main:has(> .page-head__avatar) { position: static; }
    .page-head__main:has(> .page-head__avatar) .page-head__title { padding-right: 0; }
  }
  /* From 1,024 px the sidebar's account row is the way in (after the shell's own .page-head__avatar
     rule, which would show it again). */
  @media (min-width: 1024px) {
    .page-head__avatar { display: none; }
    .page-head__main:has(> .page-head__avatar) .page-head__title { padding-right: 0; }
  }
}
/* The sidebar's rules live in the layout layer, so the account row's are here too. */
@layer layout {
  /* Desktop: while Settings (or a page under it) is open, the account row is the current item: the
     white pill of a current sidebar item, hovered or open too. The dot keeps a ring of the row's colour. */
  .sidebar__account .avatar-dot { box-shadow: 0 0 0 2px var(--sidebar); }
  .sidebar__account[aria-expanded="true"] .avatar-dot { box-shadow: 0 0 0 2px var(--sidebar-hover); }
  @media (hover: hover) { .sidebar__account:hover .avatar-dot { box-shadow: 0 0 0 2px var(--sidebar-hover); } }
  .sidebar__account.is-current, .sidebar__account.is-current[aria-expanded="true"] {
    background: var(--surface); box-shadow: var(--shadow-1);
  }
  @media (hover: hover) { .sidebar__account.is-current:hover { background: var(--surface); } }
  .sidebar__account.is-current .avatar-dot,
  .sidebar__account.is-current:is(:hover, [aria-expanded="true"]) .avatar-dot { box-shadow: 0 0 0 2px var(--surface); }
}

/* ── end decisions: shell ── */

/* ── Decisions: periods and drill-downs (client pages, payments history) ── */
@layer components {
  /* The one period control (A-08, K-15, A-30; docs/DESIGN.md "Segmented control and the period picker"):
     "‹ September 2026 ›" first, at the controls row's left edge directly under the title or the tabs, so it
     sits in the same place on every page; the page's grains follow it; the page's actions stay at the right. */
  .period-picker > .period { margin-left: 0; justify-content: flex-start; }
  /* Optical alignment: the previous arrow's point, not its box, sits on the text edge (the chevron's point is
     3/8 into the 20 px glyph). The hit area is unchanged. */
  .period-picker > .period:has(> .icon-btn:first-child) {
    margin-left: calc((var(--icon-lg) - var(--control-h)) / 2 - var(--icon-lg) * .375);
  }
  @media (max-width: 767px) {
    /* Phones: the period keeps its own width ("‹ September ⌄ ›") instead of a row of its own. With one or
       two grains the grains fill the rest of the same row (A-30: one controls row); three take a row of
       their own under it. */
    .period-picker > .period { flex: 0 0 auto; margin-right: 0; }
    /* The previous arrow's box starts at the screen edge, its glyph on the gutter (as SYS-13 had it). */
    .period-picker > .period:has(> .icon-btn:first-child) { margin-left: calc(var(--gutter) * -1); }
    /* "September ⌄" keeps one width whatever the grain ("Sep 21–27 ⌄", "Today ⌄"), so switching grains
       never moves the grains beside it; a longer label (another year) grows it. */
    .period-picker > .period .period__label--button { min-width: 116px; padding-inline: 8px; }
    /* Two grains sit at the row's end at one width, so a longer label ("Aug 31–Sep 6") never moves them;
       three take the next row, full width. */
    .period-picker:has(> .segmented) { column-gap: var(--sp-3); }
    .period-picker > .segmented { flex: 0 0 132px; min-width: 0; margin-left: auto; }
    .period-picker > .segmented:has(> .segmented__item:nth-of-type(3)) { flex: 1 1 100%; margin-left: 0; }
    /* A controls row whose actions are all desktop only (Reps' Targets, Home's Download PDF: the top bar has
       them on a phone) keeps no empty slot beside the period. */
    .page-controls__actions:not(:has(> :not(.hide-phone, [hidden]))) { display: none; }
  }
}

/* ── end decisions: periods ── */

/* ── Decisions: client setup, plans, logging ── */

/* ── end decisions: setup ── */

/* ── Decisions: recruiting, public apply and careers ── */

@layer components {
  /* The careers page (/recruiting/apply, owner decision of Sep 27): the open roles as cards over the
     application, one column on phones and two from 640 px; each card ends with "View role". */
  .role-grid {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3);
    margin: 0; padding: 0; list-style: none;
  }
  @media (min-width: 640px) { .role-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .role-card { display: flex; flex-direction: column; min-width: 0; padding: var(--pad-card); }
  .role-card__title {
    font-size: var(--fs-17); line-height: var(--lh-17); letter-spacing: var(--ls-17); font-weight: 600;
    color: var(--ink); overflow-wrap: anywhere;
  }
  .role-card__company { margin-top: 2px; font-size: var(--fs-15); line-height: var(--lh-15); color: var(--ink-2); }
  .role-card__facts {
    display: grid; gap: var(--sp-1); margin: var(--sp-3) 0 0; padding: 0; list-style: none;
    font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-2);
  }
  .role-card__facts li { display: flex; align-items: flex-start; gap: 6px; min-width: 0; }
  .role-card__facts .icon { flex: none; margin-top: 2px; color: var(--ink-3); }
  .role-card__foot { margin-top: auto; padding-top: var(--sp-4); }
  @media (max-width: 639px) {
    /* A phone stacks the cards: a little tighter, so the application is not far below them. */
    .role-card__facts { margin-top: var(--sp-2); }
    .role-card__foot { padding-top: var(--sp-3); }
  }

  /* A role's pay and its text: the ?role= page's card and the "View role" sheet. */
  .role-about { display: grid; gap: var(--sp-5); }
  .role-pay {
    display: flex; align-items: flex-start; gap: 8px;
    font-size: var(--fs-15); line-height: var(--lh-15); font-weight: 600; color: var(--ink);
  }
  .role-pay .icon { flex: none; margin-top: 1px; color: var(--ink-3); }
  .role-text { display: grid; gap: var(--sp-2); }
  .role-text .group-title { padding: 0; }
  .role-text p { font-size: var(--fs-15); line-height: var(--lh-15-prose); color: var(--ink); }

  /* "Apply for this role" brings the form into view with a little room above it. */
  #apply-form { scroll-margin-top: var(--sp-4); }
}

/* ── end decisions: recruiting ── */

/* ── Decisions: partner payouts and payout method ── */
@layer components {
  /* "How should we pay you?" (the portal, and the Change sheet): the owner's four ways as radio rows in one
     group; the chosen row opens its fields under it, lined up with its text (no script: :has). */
  .payout-choices { min-width: 0; min-inline-size: 0; margin: 0; padding: 0; border: 0; }
  .payout-choices > .list { box-shadow: none; }
  .payout-choices > .payout-choices__error { padding: 12px var(--pad-card) 0; }
  .payout-choice__head { align-items: flex-start; }
  .payout-choice__head > .radio { flex: none; min-height: 0; margin-top: 12px; }
  .payout-choice__head .list__title { font-weight: 500; }
  .payout-choice__head:has(input:checked) .list__title { font-weight: 600; }
  /* The text's edge: the card's inside edge, the radio (22 px on touch, 20 with a mouse) and its 12 px gap. */
  .payout-choices { --_text: calc(var(--pad-card) + 34px); }
  @media (pointer: fine) { .payout-choices { --_text: calc(var(--pad-card) + 32px); } }
  .payout-choice__fields { display: none; gap: 16px; padding: 0 var(--pad-card) 16px var(--_text); }
  .payout-choice:has(> .payout-choice__head input:checked) > .payout-choice__fields { display: grid; }
  .payout-choice__fields > .field { min-width: 0; }
  .payout-choice__pair { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
  .payout-choice__pair > .field { min-width: 0; }
  .payout-choice__type { max-width: 360px; }
  /* Separators start at the text, as in every list. */
  .payout-choice__head { --sep: var(--_text); }
  .payout-form__actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
  @media (max-width: 767px) { .payout-form__actions > .btn--primary { flex: 1; } }

  /* An admin's "Bank transfer · Checking ••••6789", then "Show full details" as an action row (a button in
     a form, so the list's separator is drawn here), which the full details replace in place. */
  .payout-method__show-item > form { display: contents; }
  .payout-method__show { --sep: calc(var(--pad-card) + 40px); }
  .payout-method__show::before {
    content: ""; position: absolute; top: 0; right: 0; left: var(--sep);
    height: 1px; background: var(--line);
  }
  .payout-method__show .list__title { color: var(--accent); }
  .payout-method__line .list__title { font-variant-numeric: tabular-nums; }
}
/* ── end decisions: partners ── */

/* ── Decisions: report types and dates ── */
@layer components {
  /* "Download a report" (reports/client.html): the reports as radio rows, one line each; under the chosen
     one what it takes (the dates as one line and "Choose dates", then the reps or the rep: one block that
     flex order places after the chosen row); the primary button at the end of the card. */
  .report-dl { display: grid; }
  .report-dl__errors { padding: var(--pad-card) var(--pad-card) 0; }
  .report-kinds { display: flex; flex-direction: column; padding-block: 4px; }
  .report-kinds > .report-kind { display: flex; width: 100%; gap: 12px; padding: 12px var(--pad-card); cursor: pointer; }
  .report-kind:has(input:disabled) { cursor: default; }
  /* Rows after the first take a hairline from the text's edge (the radio's 20 px and its 12 px gap). */
  .report-kind:not(:first-child)::before {
    content: ""; position: absolute; top: 0; right: 0; left: calc(var(--pad-card) + 32px);
    height: 1px; background: var(--line);
  }
  @media (pointer: coarse) { .report-kind:not(:first-child)::before { left: calc(var(--pad-card) + 34px); } }
  .report-kind__text { flex: 1; min-width: 0; }
  .report-kind__name { font-weight: 600; }
  .report-kind:has(input:disabled) .report-kind__name { color: var(--ink-3); }
  @media (hover: hover) { .report-kind:not(:has(input:disabled)):hover { background: var(--row-hover); } }

  /* What the chosen report takes, lined up with its words. */
  .report-opts {
    display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 8px;
    padding: 0 var(--pad-card) 16px calc(var(--pad-card) + 32px);
  }
  .report-opts > * { max-width: 100%; }
  @media (pointer: coarse) { .report-opts { padding-left: calc(var(--pad-card) + 34px); } }
  .report-who[hidden] { display: none; }

  /* The dates: "This month · Sep 1–30" and "Choose dates" (a native disclosure); the presets and Custom's
     From and To only once it is open. */
  .report-dates__summary {
    display: flex; align-items: center; gap: 12px;
    min-height: var(--hit); list-style: none; cursor: pointer;
  }
  .report-dates__summary::-webkit-details-marker { display: none; }
  .report-dates__summary:focus-visible { outline: none; }
  .report-dates__summary:focus-visible .report-dates__btn { outline: 2px solid var(--focus); outline-offset: 2px; }
  .report-dates { justify-self: stretch; }
  .report-dates__line {
    flex: 0 1 auto; min-width: 0;
    font-size: var(--fs-15); line-height: var(--lh-15); letter-spacing: var(--ls-15); color: var(--ink);
    font-variant-numeric: tabular-nums;
  }
  .report-dates__btn { flex: none; pointer-events: none; }
  .report-dates[open] .report-dates__btn { background: var(--accent-soft); color: var(--accent); }
  .report-dates__panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 4px 0 8px; }
  .report-dates__custom { max-width: 560px; }
  .report-dates__custom[hidden] { display: none; }

  /* Rep scorecard's rep: a "Rep  Nina Patel" capsule like the Reps one, the native list under it (the
     select covers the capsule; without JavaScript the select itself shows). */
  .report-rep { position: relative; max-width: 100%; cursor: pointer; }
  .report-rep__select {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer; font: inherit; appearance: none; -webkit-appearance: none;
  }
  .report-rep:has(.report-rep__select:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
  :root:not(.js) .report-rep__select { position: static; opacity: 1; width: auto; height: auto; border: 0; background: none; font-weight: 600; }
  :root:not(.js) .report-rep__name { display: none; }

  .report-dl__foot { padding: 4px var(--pad-card) var(--pad-card); }
  @media (max-width: 767px) { .report-dl__foot .form-actions > .btn--primary { flex: 1; } }
}
/* ── end decisions: reports ── */

/* ── Decisions: emails (web pages the emails link to) ── */

/* ── end decisions: emails ── */

/* ── Decisions: client ops ── */
@layer components {
  /* Client ops (performance/client_ops.html): the ops dashboard drawn from its structured copy. Phone first:
     one column of sections; the .ops container lays each section's cards out in columns when it is wide.
     Payload text is plain text: paragraphs keep their line breaks (pre-line) and long words wrap. */
  .ops { container: ops / inline-size; }
  .ops :is(.ops-detail, .ops-note, .ops-quiet, .ops-lead, .ops-client__note, .ops-bubble__text, .ops-next__detail,
           .ops-money__summary, .ops-slot__text, .ops-footnote) { white-space: pre-line; overflow-wrap: anywhere; }
  .ops :is(.ops-q__action, .ops-play__play, .ops-client__name, .ops-client__headline, .ops-prospect__title,
           .ops-money__headline, .ops-next__title, .ops-tile__label, .ops-name) { overflow-wrap: anywhere; }

  /* The section chips: under the header; on a phone they scroll sideways (the chip-scroller) and stay under the
     top bar on its material, so any section is one tap away. A jump lands the section's title under them. */
  @media (max-width: 767px) {
    .ops-nav {
      position: sticky; top: var(--bar-h); z-index: 20;
      background: var(--material);
      -webkit-backdrop-filter: saturate(180%) blur(20px);
      backdrop-filter: saturate(180%) blur(20px);
    }
    .ops-section { scroll-margin-top: 48px; }
  }
  @media (max-width: 767px) and (display-mode: standalone) {
    .ops-nav { top: calc(var(--bar-h) + env(safe-area-inset-top)); }
  }
  /* After a jump, the chip of the section it landed on reads as chosen (the section is :target: no script). */
  .ops:has(#ops-queue:target) .ops-nav a[href="#ops-queue"],
  .ops:has(#ops-todos:target) .ops-nav a[href="#ops-todos"],
  .ops:has(#ops-ahead:target) .ops-nav a[href="#ops-ahead"],
  .ops:has(#ops-schedule:target) .ops-nav a[href="#ops-schedule"],
  .ops:has(#ops-clients:target) .ops-nav a[href="#ops-clients"],
  .ops:has(#ops-money:target) .ops-nav a[href="#ops-money"],
  .ops:has(#ops-new-business:target) .ops-nav a[href="#ops-new-business"] {
    background: var(--accent-soft); box-shadow: none; color: var(--accent);
  }

  /* Glance: the figure over its words, toned with the status words' colours; each tile jumps to its section. */
  .ops-tile { gap: 4px; }
  .ops-tile .stat__value { margin-top: 0; }
  .ops-tile__label { font-size: var(--fs-13); line-height: var(--lh-13); letter-spacing: var(--ls-13); color: var(--ink-2); }
  .ops-tile--bad .stat__figure { color: var(--bad-text); }
  .ops-tile--warn .stat__figure { color: var(--warn-text); }
  .ops-tile--good .stat__figure { color: var(--good-text); }
  a.ops-tile:active { scale: .98; }

  /* Cards in a section: one column, two once the page is wide (a row's cards share its height). */
  .ops-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ops-grid > .card { align-content: start; }
  @container ops (width >= 880px) { .ops-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }

  /* A client's name over a card's main line: 13/18 600 grey, or the accent when it opens the client's workspace
     (its tap area grows to 44 px). */
  .ops-name { display: block; min-width: 0; font-size: var(--fs-13); line-height: var(--lh-13); font-weight: 600; letter-spacing: var(--ls-13); color: var(--ink-2); }
  a.ops-name { position: relative; justify-self: start; color: var(--accent); }
  a.ops-name::after { content: ""; position: absolute; inset: -13px -6px; }
  @media (hover: hover) { a.ops-name:hover { text-decoration: underline; text-underline-offset: 3px; } }
  .ops-detail { font-size: var(--fs-15); line-height: var(--lh-15-prose); letter-spacing: var(--ls-15); color: var(--ink-2); }
  .ops-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .ops-quiet { font-size: var(--fs-13); line-height: var(--lh-13); letter-spacing: var(--ls-13); color: var(--ink-2); }

  /* Queue: numbered cards, most urgent first. The rank takes the item's tone; the timing chip ends the first line. */
  .ops-q { display: grid; gap: 4px; padding: 12px var(--pad-card) 16px; }
  .ops-q__head { display: flex; align-items: center; gap: 10px; min-height: 32px; margin-bottom: 2px; }
  .ops-q__head > .ops-name { flex: 1; }
  .ops-q__head > .chip { flex: none; max-width: 50%; margin-left: auto; }
  /* The round check ends the card's first line (components/buttons.html check_off). */
  .ops-check { margin-left: auto; margin-right: -2px; }
  .ops-q__head > .chip + .ops-check { margin-left: 2px; }
  /* Send to hub sits just before the check (or ends the line on a to-do). */
  .ops-hub { flex: none; margin-left: auto; color: var(--ink-2); }
  .ops-q__head > .chip + .ops-hub, .ops-hub + .ops-check { margin-left: 2px; }
  .ops-hub__item { font-size: var(--fs-15); line-height: var(--lh-15); font-weight: 600; letter-spacing: var(--ls-15); }
  .ops-hub__voice { align-items: center; gap: 10px; }
  .ops-play__head { display: flex; align-items: center; gap: 10px; min-height: 28px; }
  .ops-play__head > .ops-name { flex: 1; min-width: 0; }
  .ops-rank {
    flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
    background: var(--fill-1); color: var(--ink-2);
    font-size: var(--fs-13); line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums;
  }
  .ops-rank--bad { background: var(--bad-soft); color: var(--bad-text); }
  .ops-rank--warn { background: var(--warn-soft); color: var(--warn-text); }
  .ops-rank--good { background: var(--good-soft); color: var(--good-text); }
  .ops-q__action { font-size: var(--fs-17); line-height: var(--lh-17); font-weight: 600; letter-spacing: var(--ls-17); }
  /* A small thing reads quieter: a tighter card and a lighter line. */
  .ops-q--small { padding-block: 10px 14px; }
  .ops-q--small .ops-q__action { font-size: var(--fs-15); line-height: var(--lh-15); font-weight: 500; letter-spacing: var(--ls-15); }
  .ops-q--small .ops-detail { font-size: var(--fs-13); line-height: var(--lh-13); }

  /* A long detail folds after three lines on a phone, with More (a <details>: no script needed). */
  .ops-fold__toggle { display: none; }
  .ops-fold__toggle > summary {
    position: relative; display: inline-flex; align-items: center; min-height: 24px;
    list-style: none; cursor: pointer; color: var(--accent); font-size: var(--fs-15); line-height: var(--lh-15); font-weight: 500;
  }
  .ops-fold__toggle > summary::-webkit-details-marker { display: none; }
  .ops-fold__toggle > summary::after { content: ""; position: absolute; inset: -10px -12px; }
  .ops-fold__toggle[open] .ops-fold__more, .ops-fold__toggle:not([open]) .ops-fold__less { display: none; }
  @media (max-width: 767px) {
    .ops-fold__toggle { display: block; margin-top: 4px; }
    .ops-fold:not(:has(> .ops-fold__toggle[open])) > .ops-fold__text {
      display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
    }
  }

  /* Get ahead: one card per client with its play, then the kind (a calm tag tint and its icon) and when. */
  .ops-play { display: grid; gap: 4px; padding: 14px var(--pad-card) 16px; }
  .ops-play__play { font-size: var(--fs-17); line-height: var(--lh-17); font-weight: 600; letter-spacing: var(--ls-17); }
  .ops-play > .ops-chips { margin-top: 8px; }
  .ops-kind {
    --_c: var(--ink-2); --_bg: var(--fill-1);
    display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 2px 10px 2px 8px;
    border-radius: var(--r-pill); background: var(--_bg); color: var(--_c);
    font-size: var(--fs-12); line-height: var(--lh-12); font-weight: 600; letter-spacing: var(--ls-12); white-space: nowrap;
  }
  .ops-kind .icon { --icon: var(--icon-xs); --icon-stroke: var(--stroke-xs); }
  .ops-kind--head-off { --_c: var(--tag-purple); --_bg: var(--tag-purple-soft); }
  .ops-kind--value-drop { --_c: var(--tag-teal); --_bg: var(--tag-teal-soft); }
  .ops-kind--expansion { --_c: var(--tag-indigo); --_bg: var(--tag-indigo-soft); }
  .ops-kind--human { --_c: var(--tag-rose); --_bg: var(--tag-rose-soft); }
  .ops-play + .ops-quiet, .ops-grid + .ops-quiet { margin-top: 4px; }

  /* Schedule: today (or its note), the next meeting on the accent tint, the coming days, the rest folded. */
  .ops-sched { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
  @container ops (width >= 760px) {
    .ops-sched { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-areas: "today next" "days next" "note note"; gap: 16px 24px; }
    .ops-sched__today { grid-area: today; }
    .ops-sched__next { grid-area: next; }
    .ops-sched__today ~ .ops-sched__next { margin-top: 26px; }     /* level with the Today box, under its title */
    .ops-sched__days { grid-area: days; }
    .ops-sched__note { grid-area: note; }
  }
  .ops-slots { display: grid; grid-template-columns: fit-content(40%) minmax(0, 1fr); }
  .ops-slot {
    position: relative; display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; column-gap: 16px;
    padding: 12px var(--pad-card);
  }
  .ops-slot + .ops-slot::before { content: ""; position: absolute; top: 0; right: 0; left: var(--pad-card); height: 1px; background: var(--line); }
  .ops-slot__label { font-size: var(--fs-15); line-height: var(--lh-15); letter-spacing: var(--ls-15); font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
  .ops-slot__text { font-size: var(--fs-15); line-height: var(--lh-15); letter-spacing: var(--ls-15); }
  .ops-note { padding: 12px var(--pad-card); font-size: var(--fs-15); line-height: var(--lh-15-prose); letter-spacing: var(--ls-15); color: var(--ink-2); }
  .ops-slots + .ops-note { box-shadow: inset 0 1px 0 var(--line); }
  .ops-next { display: grid; gap: 4px; padding: 14px var(--pad-card) 16px; background: var(--accent-soft); box-shadow: none; }
  .ops-next__eyebrow { display: flex; flex-wrap: wrap; gap: 0 8px; font-size: var(--fs-13); line-height: var(--lh-13); letter-spacing: var(--ls-13); color: var(--accent); }
  .ops-next__eyebrow > :first-child { font-weight: 600; }
  .ops-next__title { font-size: var(--fs-17); line-height: var(--lh-17); font-weight: 600; letter-spacing: var(--ls-17); }
  .ops-next__detail { font-size: var(--fs-15); line-height: var(--lh-15-prose); letter-spacing: var(--ls-15); color: var(--ink-2); }
  .ops-rest { position: relative; }
  .ops-slots + .ops-rest::before { content: ""; position: absolute; top: 0; right: 0; left: var(--pad-card); height: 1px; background: var(--line); }
  .ops-rest > summary {
    display: flex; align-items: center; gap: 12px; min-height: var(--hit); padding: 10px var(--pad-card);
    list-style: none; cursor: pointer; transition: background-color var(--dur-1) var(--ease-out);
  }
  .ops-rest > summary::-webkit-details-marker { display: none; }
  @media (hover: hover) { .ops-rest > summary:hover { background: var(--row-hover); } }
  .ops-rest > summary:focus-visible { outline-offset: -2px; }
  .ops-rest__title { flex: 1; font-size: var(--fs-15); line-height: var(--lh-15); font-weight: 500; color: var(--accent); }
  .ops-rest__count { font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-3); font-variant-numeric: tabular-nums; }
  .ops-rest[open] .disclosure__chev { rotate: 180deg; }
  .ops-rest > .ops-slots > .ops-slot:first-child::before { content: ""; position: absolute; top: 0; right: 0; left: var(--pad-card); height: 1px; background: var(--line); }

  /* Clients, grouped by health (the dot and the word, then the count). A row opens (a <details>) to the notes,
     the latest messages (theirs on the left, Abe's on the right, on the tint of your own row) and the workspace. */
  .ops-health-groups { display: grid; gap: 24px; }
  .ops-health {
    display: flex; align-items: center; gap: 8px; padding: 0 0 8px;
    font-size: var(--fs-13); line-height: var(--lh-13); font-weight: 600; letter-spacing: var(--ls-13); color: var(--ink-2);
  }
  .ops-health__count { font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }
  .ops-client { position: relative; }
  .ops-client + .ops-client::before { content: ""; position: absolute; top: 0; right: 0; left: calc(var(--pad-card) + 20px); height: 1px; background: var(--line); z-index: 1; }
  .ops-client__row { display: flex; align-items: flex-start; gap: 12px; min-height: var(--hit); padding: 12px var(--pad-card); }
  summary.ops-client__row { list-style: none; cursor: pointer; transition: background-color var(--dur-1) var(--ease-out); }
  summary.ops-client__row::-webkit-details-marker { display: none; }
  @media (hover: hover) { summary.ops-client__row:hover { background: var(--row-hover); } }
  summary.ops-client__row:focus-visible { outline-offset: -2px; }
  .ops-client__row > .dot { margin-top: 7px; }
  .ops-client__row > .disclosure__chev { margin-top: 2px; }
  .ops-client__fold[open] .disclosure__chev { rotate: 180deg; }
  .ops-client__body { flex: 1; min-width: 0; display: grid; gap: 2px; }
  .ops-client__name { font-size: var(--fs-17); line-height: var(--lh-17); font-weight: 600; letter-spacing: var(--ls-17); }
  .ops-client__headline { font-size: var(--fs-15); line-height: var(--lh-15); font-weight: 600; letter-spacing: var(--ls-15); }
  .ops-client__summary { font-size: var(--fs-15); line-height: var(--lh-15); letter-spacing: var(--ls-15); color: var(--ink-2); }
  .ops-client__body > .ops-chips { margin-top: 6px; }
  /* A wide row keeps its chips at the right, beside the words. */
  @container ops (width >= 880px) {
    .ops-client__body { grid-template-columns: minmax(0, 1fr) minmax(0, 40%); column-gap: 24px; }
    .ops-client__body > :not(.ops-chips) { grid-column: 1; }
    .ops-client__body > .ops-chips { grid-column: 2; grid-row: 1 / span 3; align-self: start; justify-content: flex-end; margin-top: 0; }
  }
  .ops-client__more { display: grid; gap: 12px; padding: 0 var(--pad-card) 16px calc(var(--pad-card) + 20px); }
  .ops-client__note { font-size: var(--fs-15); line-height: var(--lh-15-prose); letter-spacing: var(--ls-15); }
  .ops-client__more > * { max-width: 760px; }         /* a readable measure; the thread reads as one chat */
  .ops-thread { display: grid; gap: 8px; padding: 4px 0; }
  .ops-bubble { justify-self: start; max-width: min(88%, 560px); padding: 8px 12px 9px; border-radius: 18px 18px 18px 6px; background: var(--fill-1); }
  .ops-bubble--mine { justify-self: end; border-radius: 18px 18px 6px 18px; background: var(--accent-soft); }
  .ops-bubble__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; font-size: var(--fs-12); line-height: var(--lh-12); letter-spacing: var(--ls-12); color: var(--ink-2); }
  .ops-bubble__meta > span { display: inline-flex; align-items: center; gap: 3px; }
  .ops-bubble__meta > span + span::before { content: "·"; margin-right: 3px; color: var(--ink-3); }
  .ops-bubble__meta .icon { --icon: var(--icon-xs); --icon-stroke: var(--stroke-xs); }
  .ops-bubble__text { margin-top: 2px; font-size: var(--fs-15); line-height: var(--lh-15); letter-spacing: var(--ls-15); }

  /* Money: the headline big and toned, the summary, the invoice book folded (a table on a wide page, one card
     per invoice on a phone), then what was collected. */
  .ops-money { display: grid; gap: 6px; padding: 16px var(--pad-card) 18px; }
  .ops-money__headline { font-size: var(--fs-20); line-height: var(--lh-20); font-weight: 600; letter-spacing: var(--ls-20); }
  @container ops (width >= 760px) {
    .ops-money__headline { font-size: var(--fs-28); line-height: var(--lh-28); letter-spacing: var(--ls-28); }
  }
  .ops-money__summary { font-size: var(--fs-15); line-height: var(--lh-15-prose); letter-spacing: var(--ls-15); color: var(--ink-2); }
  .ops-book .table-wrap { overflow: hidden; border-radius: 0 0 var(--r-card) var(--r-card); }
  .ops-invoices td.cell--primary { font-weight: 500; }
  .ops-invoices td.cell--primary > .ops-name { font-size: inherit; line-height: inherit; font-weight: inherit; letter-spacing: inherit; color: var(--ink); }
  .ops-invoices td.cell--primary > a.ops-name { color: var(--accent); }
  .ops-card-mark { display: flex; align-items: center; gap: 4px; margin-top: 2px; font-size: var(--fs-12); line-height: var(--lh-12); font-weight: 500; color: var(--ink-2); }
  /* An invoice card on a phone: the client and status, then invoice, amount and due side by side. */
  @container table (width < 640px) {
    .ops-invoices tr { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .7fr); gap: 10px 12px; }
  }
  .ops-card-mark .icon { --icon: var(--icon-xs); --icon-stroke: var(--stroke-xs); }

  /* New business: the calls booked, one card per prospect, and the pipeline as a plain list (beside the cards
     on a wide page). */
  .ops-todos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .ops-todos__client { display: grid; gap: 8px; }
  .ops-nb { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 24px; align-items: start; }
  .ops-nb__cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ops-nb__items, .ops-nb__pipeline { margin-top: 4px; }
  @container ops (width >= 880px) {
    .ops-nb:has(> .ops-nb__items):has(> .ops-nb__pipeline) {
      grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "booked booked" "items pipeline";
    }
    .ops-nb__booked { grid-area: booked; }
    .ops-nb__items { grid-area: items; }
    .ops-nb__pipeline { grid-area: pipeline; }
    .ops-nb:not(:has(> .ops-nb__pipeline)) .ops-nb__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  }
  .ops-lead { font-size: var(--fs-15); line-height: var(--lh-15-prose); letter-spacing: var(--ls-15); }
  .ops-prospect { display: grid; gap: 4px; padding: 14px var(--pad-card) 16px; }
  .ops-prospect__title { font-size: var(--fs-17); line-height: var(--lh-17); font-weight: 600; letter-spacing: var(--ls-17); }
  .ops-prospect > .ops-chips { margin-top: 8px; }

  /* The foot: where the data came from (a source that failed reads amber), the footnote, and on a phone the
     classic page. */
  .ops-foot { display: grid; gap: 10px; }
  .ops-footnote { font-size: var(--fs-13); line-height: var(--lh-13); letter-spacing: var(--ls-13); color: var(--ink-3); }
  .ops-foot .btn--plain { margin-left: calc(var(--_px, 12px) * -1); }
}
/* ── end decisions: client ops ── */