/* ==========================================================================
   resupply.css — Sanusom · Resupply Design System
   ==========================================================================

   Source of truth
   ---------------
   • Figma "Resupply" (UXPIp3pVOm6BN8G5qLdbi7) — the altered, project-specific
     designs. Canonical refs: Label+Value cell 700:3381, Billing System Grid
     768:801, admin form 812:801, Admin Document Type Grid 863:1410.
   • Figma "Components for Web | Lightning Design System 2 (Community)"
     (ZzOWluSl8HBTUt1rHz8PYp) — token ramps and component recipes. Semantic
     names below mirror the SLDS global styling hooks (--slds-g-color-*)
     without the prefix, so every token cross-references the library 1:1.
   • html/ prototypes (dashboard.html family) — existing class vocabulary
     (BEM) and custom-property dialect this file consolidates and supersedes.

   Conventions
   -----------
   • Cascade layers, least → most specific. The @layer order below is the
     table of contents; utilities beat components by layer order, never by
     specificity or !important.
   • Two-tier tokens: primitives (--clr-*, --fs-*, --space-*…) are the raw
     Figma variables; semantic tokens (--color-*, --shadow-*…) alias them.
     Components consume ONLY the semantic tier.
   • Color format: hex. Primitives must match the Figma variables
     byte-for-byte (diffable against the library); derived states (hover/
     active) are computed in oklch via relative color syntax — with literal
     fallbacks for browsers without it (pre Chrome 119 / Safari 16.4 /
     Firefox 128).
   • rem for font sizes and spacing (user zoom / font-size settings are
     respected — WCAG 1.4.4); px for borders, radii and fixed control
     chrome. Root = 16px, so 4px = 0.25rem.
   • font-weight 590 is SF Pro's true Semibold (the value Figma exports).
     Static fallback fonts snap to 600 automatically.
   • State = `is-` prefix or ARIA attributes ([aria-selected],
     [aria-current], [aria-pressed], [aria-invalid]). The prototypes' bare
     `.active` is superseded.

   Migration notes (from the html/ prototypes)
   -------------------------------------------
   • Renames: .btn--destructive-filled → .btn--destructive;
     .btn-brand/.btn-neutral/.btn-destructive-fill (flat dialect) →
     .btn--brand/.btn--neutral/.btn--destructive.
   • Prototype --color-periwinkle-95 (#f1f3fb) is actually --clr-indigo-95
     here; the true Periwinkle/95 is #f2f4fb (--clr-periwinkle-95).
   • Prototype --shadow-subtle (black-only pair) = --shadow-hairline here;
     do NOT confuse with --shadow-card-subtle (brand-tinted, from Figma).
   • Poppins (status-tile display font) is retired — everything is --ff-base.
   • Out of scope, stays feature/page CSS: timer pill (off-system blues),
     status tiles, KPI/insight compositions, sparkline chart CSS, days-box,
     and all of patient-list.html (a different design language).

   ========================================================================== */

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


/* ==========================================================================
   1. RESET — Kevin Powell's current reset (modified Andy Bell), app-tuned
   ========================================================================== */

@layer reset {

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  /* https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/ */
  html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }

  body,
  h1, h2, h3, h4,
  p,
  figure,
  blockquote,
  dl, dd {
    margin: 0;
  }

  /* https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html */
  [role="list"] {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  body {
    min-block-size: 100vh;
    line-height: 1.5;
  }

  h1, h2, h3, h4,
  button, input, label {
    line-height: 1.1;
  }

  h1, h2, h3, h4 {
    text-wrap: balance;
  }

  p, li {
    text-wrap: pretty;
  }

  img, picture, svg {
    max-inline-size: 100%;
    display: block;
  }

  input, button, textarea, select {
    font: inherit;
  }

  @media (prefers-reduced-motion: no-preference) {
    html {
      scroll-behavior: smooth;
    }
  }
}


/* ==========================================================================
   2. TOKENS
   ========================================================================== */

@layer tokens {

  /* ------------------------------------------------------------------
     2a. Primitives — raw values, verbatim from the Figma variable
         collections ("Color Primitives", "Spacing/Sizing", "Typography").
         Never use these in components; alias them in 2b instead.
     ------------------------------------------------------------------ */
  :root {

    /* Periwinkle — the Resupply brand ramp (SLDS brand-base-*) */
    --clr-periwinkle-5:  #060216;
    --clr-periwinkle-10: #1f0f47;
    --clr-periwinkle-15: #1b1a72;
    --clr-periwinkle-20: #312771;
    --clr-periwinkle-30: #2a3db4;
    --clr-periwinkle-35: #2f4bc5;
    --clr-periwinkle-40: #3659d7;
    --clr-periwinkle-50: #5976e8;
    --clr-periwinkle-60: #8196ed;
    --clr-periwinkle-65: #90a4ef;
    --clr-periwinkle-70: #a0b1f1;
    --clr-periwinkle-80: #c0ccf6;
    --clr-periwinkle-85: #d0d8f7;
    --clr-periwinkle-90: #e1e7f8;
    --clr-periwinkle-95: #f2f4fb;

    /* Neutral (SLDS neutral-base-*) */
    --clr-neutral-5:   #020202;
    --clr-neutral-10:  #181818;
    --clr-neutral-15:  #242424;
    --clr-neutral-20:  #2e2e2e;
    --clr-neutral-30:  #444444;
    --clr-neutral-35:  #515151;
    --clr-neutral-40:  #5c5c5c;
    --clr-neutral-50:  #757575;
    --clr-neutral-60:  #939393;
    --clr-neutral-65:  #a0a0a0;
    --clr-neutral-70:  #aeaeae;
    --clr-neutral-80:  #c9c9c9;
    --clr-neutral-85:  #d7d7d7;
    --clr-neutral-90:  #e5e5e5;
    --clr-neutral-95:  #f3f3f3;
    --clr-neutral-100: #ffffff;

    /* Teal — success family */
    --clr-teal-30: #024d4c;
    --clr-teal-40: #056764;
    --clr-teal-60: #06a59a;
    --clr-teal-80: #04e1cb;
    --clr-teal-90: #acf3e4;

    /* Yellow — warning family */
    --clr-yellow-40: #8c4b02;
    --clr-yellow-80: #fcc003;
    --clr-yellow-90: #f9e3b6;

    /* Pink — error / destructive family */
    --clr-pink-30: #8a033e;
    --clr-pink-40: #b60554;
    --clr-pink-50: #e3066a;
    --clr-pink-80: #fdb6c5;
    --clr-pink-90: #fddde3;

    /* Blue — info family (classic Salesforce blue) */
    --clr-blue-15: #03234d;
    --clr-blue-20: #032d60;
    --clr-blue-40: #0b5cab;
    --clr-blue-50: #0176d3;
    --clr-blue-60: #1b96ff;
    --clr-blue-90: #d8e6fe;
    --clr-blue-95: #eef4ff;

    /* Indigo — light tint containers */
    --clr-indigo-10: #200647;
    --clr-indigo-90: #e0e5f8;
    --clr-indigo-95: #f1f3fb;

    /* Hot Orange — header gradient / notification accents */
    --clr-hot-orange-50: #d83a00;
    --clr-hot-orange-60: #ff5d2d;
    --clr-hot-orange-65: #ff784f;

    /* Electric Blue — the DS "Dark Mode BETA" brand ramp (unused in light) */
    --clr-electric-blue-40: #0250d9;
    --clr-electric-blue-50: #066afe;
    --clr-electric-blue-60: #4992fe;
    --clr-electric-blue-80: #a8cbff;
    --clr-electric-blue-90: #d6e6ff;

    /* Data-viz palette (charts, avatar tints) */
    --clr-green-60:      #3ba755;
    --clr-purple-40:     #7526e3;
    --clr-purple-50:     #9050e9;
    --clr-purple-90:     #ece1f9;
    --clr-violet-60:     #cb65ff;
    --clr-cloud-blue-60: #0d9dda;
    --clr-pink-60:       #ff538a;
    --clr-orange-60:     #dd7a01;
    --clr-red-40:        #ba0517;
    --clr-red-50:        #ea001e;

    /* Resupply-local values (in the file/prototypes, not the DS ramps) */
    --clr-canvas:          #eeeef2; /* "bg main linear" — page background   */
    --clr-warmgray-30:     #514f4d; /* card section headers, FILTERS        */
    --clr-warmgray-50:     #706e6b; /* record-info audit label, muted text  */
    --clr-warmgray-60:     #8b8b8b; /* 10px uppercase micro-labels          */
    --clr-filters-border:  #e8ebf4; /* filters panel 1px border             */
    --clr-dropdown-border: #e2e8f0; /* filters-panel dropdown border        */
    --clr-checkbox-muted:  #c4c4c4; /* local 20px checkbox unchecked border */
    --clr-inset-card:      #f3f3f6; /* record-info inset card background    */
    --clr-icon-gray:       #5f6368; /* Material Symbols icon gray           */
    --clr-rail-bg:         #f8f8fc; /* left nav rail background (prototype) */

    /* Typography ------------------------------------------------------- */

    /* DS spec: SF Pro (Mac/iOS) / Segoe UI (Windows) — i.e. the system
       font. system-ui resolves to exactly that. Prototypes ship Inter for
       cross-platform parity; if loaded, prepend "Inter" here. */
    --ff-base: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --ff-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    /* SLDS font scale (--slds-g-font-scale-*) */
    --fs-neg-2: 0.625rem;  /* 10px */
    --fs-neg-1: 0.75rem;   /* 12px */
    --fs-base:  0.8125rem; /* 13px — the default body size */
    --fs-1:     0.875rem;  /* 14px */
    --fs-2:     1rem;      /* 16px */
    --fs-3:     1.25rem;   /* 20px */
    --fs-4:     1.5rem;    /* 24px */
    --fs-5:     1.75rem;   /* 28px */
    --fs-6:     2rem;      /* 32px */
    --fs-7:     2.5rem;    /* 40px */
    --fs-8:     3rem;      /* 48px */

    /* Paired line-heights, unitless (Figma px shown) */
    --lh-neg-2: 1.4;    /* 14/10 */
    --lh-neg-1: 1.4167; /* 17/12 */
    --lh-base:  1.3846; /* 18/13 */
    --lh-1:     1.3571; /* 19/14 */
    --lh-2:     1.375;  /* 22/16 */
    --lh-3:     1.4;    /* 28/20 */
    --lh-4:     1.3333; /* 32/24 */
    --lh-5:     1.25;   /* 35/28 */
    --lh-6:     1.25;   /* 40/32 */

    --fw-light:    300;
    --fw-regular:  400;
    --fw-semibold: 590; /* SF Pro Semibold; static fonts snap to 600 */
    --fw-bold:     700;

    /* Spacing (--slds-g-spacing-*; the DS scale continues 9–12 =
       56/64/72/80px — add steps only when layouts need them) ---------- */
    --space-1: 0.25rem; /*  4px */
    --space-2: 0.5rem;  /*  8px */
    --space-3: 0.75rem; /* 12px */
    --space-4: 1rem;    /* 16px */
    --space-5: 1.5rem;  /* 24px */
    --space-6: 2rem;    /* 32px */
    --space-7: 2.5rem;  /* 40px */
    --space-8: 3rem;    /* 48px */

    /* Sizing ------------------------------------------------------------ */
    --size-control: 2rem;     /* 32px — buttons, inputs, icon buttons     */
    --size-header:  4rem;     /* 64px — global header & page-header band  */
    --size-icon-sm: 0.875rem; /* 14px — icons inside controls & badges    */
    --size-icon-md: 1rem;     /* 16px — search icon                       */
    --size-icon-lg: 1.5rem;   /* 24px — row actions, header cluster       */

    /* Radii (--slds-g-radius-border-*) ---------------------------------- */
    --radius-1:     4px;    /* buttons, badges, checkboxes    */
    --radius-2:     8px;    /* cards, inputs, menus           */
    --radius-3:     12px;
    --radius-4:     20px;   /* filter pills                   */
    --radius-pill:  9999px; /* search, icon buttons, avatars  */
    --radius-inner: 1px;    /* shared corners in card stacks  */

    /* Shadows ------------------------------------------------------------ */

    /* "Shadow/design/brand 1" — THE card shadow, on every elevated surface */
    --shadow-card:
      0 1px 3px rgb(0 0 0 / 0.05),
      0 1px 2px rgb(0 0 0 / 0.08),
      0 4px 8px -4px rgb(89 118 232 / 0.4);

    /* "brand 2 - unclipped content" (brand-tinted — NOT the prototypes'
       --shadow-subtle; that black-only pair is --shadow-hairline below) */
    --shadow-card-subtle: 0 1px 4px -4px rgb(89 118 232 / 0.4);

    /* Prototype --shadow-subtle */
    --shadow-hairline:
      0 1px 2px rgb(0 0 0 / 0.08),
      0 1px 3px rgb(0 0 0 / 0.05);

    /* SLDS Shadow/Elevation/1 (down) and /2 (up) — bars, docked panels */
    --shadow-elevation-1:
      0 -1px 2px rgb(0 0 0 / 0.10),
      0 2px 2px rgb(0 0 0 / 0.18),
      0 0 2px rgb(0 0 0 / 0.18);
    --shadow-elevation-2:
      0 1px 2px rgb(0 0 0 / 0.09),
      0 -3px 3px rgb(0 0 0 / 0.16),
      0 0 5px rgb(0 0 0 / 0.16);

    /* "Shadow/Buttons/Active" — pressed state */
    --shadow-pressed:
      inset 0 1px 0 rgb(0 0 0 / 0.15),
      inset 0 0.5px 2px rgb(0 0 0 / 0.35),
      inset 2px 2px 5px rgb(0 0 0 / 0.08);

    /* "Shadow/Inputs/Checked" — tactile checked controls */
    --shadow-checked:
      inset 2px 2px 5px rgb(0 0 0 / 0.10),
      inset 0 0.5px 2px rgb(0 0 0 / 0.50),
      inset 0 1px 0 rgb(0 0 0 / 0.25);

    /* Global-header gradient ("bg gradient"), painted over Periwinkle/15 */
    --gradient-header:
      linear-gradient(90deg,
        rgb(27 26 114 / 0.8)  0%,
        rgb(5 103 100 / 0.8)  75.102%,
        rgb(255 93 45 / 0.8)  94.712%,
        rgb(255 120 79 / 0.8) 100%);
  }

  /* ------------------------------------------------------------------
     2b. Semantic tokens — the only tier components may reference.
         Names mirror the SLDS global hooks (--slds-g-color-…) minus
         the prefix, so each maps 1:1 to the Figma variable.
     ------------------------------------------------------------------ */
  :root {

    color-scheme: light;

    /* Accent (brand) */
    --color-accent:          var(--clr-periwinkle-50);
    --color-accent-2:        var(--clr-periwinkle-40);
    --color-accent-3:        var(--clr-periwinkle-30);
    --color-on-accent:       var(--clr-neutral-100);
    --color-border-accent:   var(--clr-periwinkle-50);
    --color-border-accent-2: var(--clr-periwinkle-40);

    /* Interaction states — literal fallbacks; browsers with relative
       color syntax get perceptually-even oklch derivations below. */
    --color-accent-hover:       var(--clr-periwinkle-40);
    --color-accent-active:      var(--clr-periwinkle-30);
    --color-destructive-hover:  var(--clr-pink-40);
    --color-surface-hover:      var(--clr-periwinkle-95); /* tinted wash  */

    /* Surfaces */
    --color-page:            var(--clr-canvas);
    --color-surface:         var(--clr-neutral-100);
    --color-surface-2:       var(--clr-neutral-95);
    --color-surface-3:       var(--clr-neutral-90);
    --color-surface-tint:    var(--clr-periwinkle-95); /* Row-Patient shell */
    --color-surface-tint-2:  var(--clr-indigo-95);     /* indigo wash — landing menu items */
    --color-surface-inset:   var(--clr-inset-card);    /* record-info audit card */
    --color-surface-inverse: var(--clr-blue-20);

    /* Text ("on surface") */
    --color-text:           var(--clr-neutral-20);    /* primary body      */
    --color-text-strong:    var(--clr-neutral-10);    /* KPI values, names */
    --color-text-secondary: var(--clr-neutral-40);    /* labels, meta      */
    --color-text-muted:     var(--clr-warmgray-50);   /* dates, audit text */
    --color-text-value:     var(--clr-periwinkle-10); /* Label+Value value */
    --color-heading:        var(--clr-periwinkle-15); /* page titles       */
    --color-text-section:   var(--clr-warmgray-30);   /* card headers      */
    --color-text-micro:     var(--clr-warmgray-60);   /* uppercase micro — ⚠ 3.4:1 on white (AA fail, Figma-inherited) */
    --color-text-inverse:   var(--clr-neutral-100);
    --color-link:           var(--clr-periwinkle-40);

    /* Borders */
    --color-border:           var(--clr-neutral-80); /* subtle: dividers, outline badges */
    --color-border-strong:    var(--clr-neutral-40); /* controls: inputs, neutral button */
    --color-border-table:     var(--clr-periwinkle-85);
    --color-border-info-pill: var(--clr-periwinkle-70);

    /* Sort menu ("Dynamic Menu" 933:10056) — the Figma stroke is a 20%-alpha
       vertical gradient; stops are pre-composited over Periwinkle/95 so the
       hairline renders identically on any backdrop */
    --color-menu-border-top:    color-mix(in srgb, var(--clr-hot-orange-60) 20%, var(--clr-periwinkle-95));
    --color-menu-border-bottom: color-mix(in srgb, var(--clr-periwinkle-50) 20%, var(--clr-periwinkle-95));
    --gradient-menu-border:     linear-gradient(180deg,
                                  var(--color-menu-border-top),
                                  var(--color-menu-border-bottom));
    --color-icon-off:   var(--clr-periwinkle-80);  /* unselected sort-direction arrows */
    --color-icon-trash: var(--clr-hot-orange-60);  /* menu remove-criteria icon */
    --shadow-menu: 0 4px 8px rgb(89 118 232 / 0.4); /* elevation/brand-1 */

    /* Status */
    --color-success:           var(--clr-teal-40);
    --color-success-container: var(--clr-teal-90);
    --color-warning:           var(--clr-yellow-40);
    --color-warning-container: var(--clr-yellow-90);
    --color-error:             var(--clr-pink-40);
    --color-error-container:   var(--clr-pink-90);
    --color-info:              var(--clr-blue-40);
    --color-info-container:    var(--clr-blue-90);
    --color-status-indigo:     var(--clr-indigo-10);

    /* Component hooks */
    --color-destructive:    var(--clr-pink-50);
    --color-on-destructive: var(--clr-neutral-100);
    --color-selected-row:   var(--clr-periwinkle-90);
    --color-header-bg:      var(--clr-periwinkle-15);
    --color-tab-inactive:   var(--clr-periwinkle-95);
    --color-avatar-bg:      var(--clr-periwinkle-90);
    --color-avatar-text:    var(--clr-periwinkle-10);
    --color-toggle-off:     var(--clr-neutral-60);

    /* Left nav rail (prototype-derived app chrome) */
    --color-nav-surface:       var(--clr-rail-bg);
    --color-nav-active:        var(--clr-periwinkle-15);
    --color-nav-inactive:      var(--clr-periwinkle-30);
    --color-nav-active-bg:     rgb(255 255 255 / 0.6);
    --color-nav-active-border: var(--clr-canvas);
    --color-nav-hover-bg:      rgb(89 118 232 / 0.06);

    /* Trend / data-viz semantics. The prototypes hardcoded off-system
       greens/oranges (#2e844a, #22683e, #ea5a0c, #fb8c00, #3a49da);
       these remap them onto the DS data-viz ramp. */
    --color-trend-up:   var(--clr-green-60);
    --color-trend-down: var(--clr-red-50);
    --color-trend-flat: var(--clr-orange-60);

    /* Disabled */
    --color-disabled:           var(--clr-neutral-50);
    --color-disabled-container: var(--clr-neutral-90);

    /* Focus — brand-dark ring, offset so the backdrop reads as the DS
       "white gap". Implemented as outline (never box-shadow) so no
       component shadow can ever erase focus visibility. */
    --color-focus: var(--clr-periwinkle-15);
  }

  /* Perceptually-even hover/active derivation where supported.
     `l` is oklch's 0–1 lightness channel, so -0.05 = a 5-point step;
     the accent result ≈ #4a66d4, the hover the prototypes hardcoded. */
  @supports (color: oklch(from red l c h)) {
    :root {
      --color-accent-hover:      oklch(from var(--clr-periwinkle-50) calc(l - 0.05) c h);
      --color-accent-active:     oklch(from var(--clr-periwinkle-50) calc(l - 0.1) c h);
      --color-destructive-hover: oklch(from var(--clr-pink-50) calc(l - 0.05) c h);
    }
  }
}


/* ==========================================================================
   3. BASE — element defaults
   ========================================================================== */

@layer base {

  body {
    font-family: var(--ff-base);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    font-weight: var(--fw-regular);
    color: var(--color-text);
    background-color: var(--color-page);
  }

  h1, h2, h3, h4 {
    color: var(--color-heading);
    font-weight: var(--fw-semibold);
  }

  a {
    color: var(--color-link);
    text-decoration: none;
  }

  a:hover,
  a:focus-visible {
    text-decoration: underline;
  }

  :focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
  }

  ::placeholder {
    color: var(--color-text-secondary);
    opacity: 1;
  }

  ::selection {
    background-color: var(--clr-periwinkle-90);
    color: var(--clr-periwinkle-10);
  }
}


/* ==========================================================================
   4. LAYOUT — reusable primitives; spacing between siblings is always gap
   ========================================================================== */

@layer layout {

  /* App shell: fixed 64px header row, content below (dashboard.html adds
     a nav rail column: grid-template-columns: 86px 1fr). */
  .app-shell {
    display: grid;
    grid-template-rows: var(--size-header) 1fr;
    min-block-size: 100vh;
  }

  .wrapper {
    max-inline-size: var(--wrapper-max-width, 1960px);
    margin-inline: auto;
    padding-inline: var(--space-5);
  }

  /* Vertical stack; the page-content default gap is 8px (Figma "Content") */
  .stack {
    display: grid;
    gap: var(--stack-gap, var(--space-2));
  }

  /* Horizontal row of items */
  .cluster {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--cluster-gap, var(--space-2));
  }

  .repel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cluster-gap, var(--space-2));
  }

  /* Prose rhythm (notes, help text) — the only sanctioned sibling margin */
  .flow > * + * {
    margin-block-start: var(--flow-space, 1em);
  }

  /* Page content region below .page-header (Figma "Content": 4px top,
     24px sides/bottom) — also the container components respond to */
  .content {
    padding: var(--space-1) var(--space-5) var(--space-5);
    container-type: inline-size;
  }

  /* Responsive card grid */
  .grid-auto-fill {
    display: grid;
    gap: var(--grid-gap, var(--space-1));
    grid-template-columns: repeat(
      auto-fill,
      minmax(min(var(--grid-min-column, 250px), 100%), 1fr)
    );
  }
}


/* ==========================================================================
   5. COMPONENTS
   ========================================================================== */

@layer components {

  /* --------------------------------------------------------------------
     Buttons — 32px, radius 4, 14px Semibold (⚡ Button - Brand / Neutral)
     -------------------------------------------------------------------- */

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    block-size: var(--size-control);
    padding: 1px var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-1);
    font-size: var(--fs-1);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-1);
    cursor: pointer;
    background-color: transparent;

    &:active {
      box-shadow: var(--shadow-pressed);
    }

    &:disabled {
      background-color: var(--color-disabled-container);
      border-color: transparent;
      color: var(--color-disabled);
      cursor: not-allowed;
      box-shadow: none;
    }
  }

  /* ⚠ white on #5976e8 = 4.05:1 — fails AA for 14px text. Faithful to the
     Figma design; flag to design. #3659d7 (accent-2) would pass at 5.9:1. */
  .btn--brand {
    background-color: var(--color-accent);
    color: var(--color-on-accent);

    &:hover:not(:disabled),
    &:focus-visible {
      background-color: var(--color-accent-hover);
    }
  }

  .btn--neutral {
    background-color: var(--color-surface);
    border-color: var(--color-border-strong);
    color: var(--color-accent-2);

    /* Hover washes are extrapolations — Figma defines no hover fills */
    &:hover:not(:disabled),
    &:focus-visible {
      background-color: var(--color-surface-hover);
    }
  }

  .btn--destructive {
    background-color: var(--color-destructive);
    color: var(--color-on-destructive);

    &:hover:not(:disabled),
    &:focus-visible {
      background-color: var(--color-destructive-hover);
    }
  }

  /* Prototype-derived variant (dashboard Disenroll row) — not in the DS */
  .btn--destructive-outline {
    background-color: var(--color-surface);
    border-color: var(--color-error);
    color: var(--color-error);

    &:hover:not(:disabled),
    &:focus-visible {
      background-color: var(--color-error-container);
    }
  }

  /* Round bordered icon button (toolbar sort/filter) */
  .btn--icon {
    inline-size: var(--size-control);
    min-inline-size: var(--size-control);
    padding: 0 var(--space-2);
    border-radius: var(--radius-pill);
    background-color: var(--color-surface);
    border-color: var(--color-border-strong);
    color: var(--color-text-secondary);

    &:hover:not(:disabled),
    &:focus-visible {
      background-color: var(--color-surface-hover);
    }
  }

  /* Segmented button group (day-range selector; Lightning "Button Group") */
  .btn-group {
    display: inline-flex;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2);
    overflow: clip;
  }

  .btn-group__item {
    display: inline-flex;
    align-items: center;
    block-size: var(--size-control);
    padding-inline: var(--space-4);
    border: 0;
    background-color: var(--color-surface);
    font-size: var(--fs-1);
    font-weight: var(--fw-semibold);
    color: var(--color-accent-2);
    cursor: pointer;

    & + & {
      border-inline-start: 1px solid var(--color-border);
    }

    /* segments navigate as links on the landing pages — chrome, not prose */
    &:hover,
    &:focus-visible {
      background-color: var(--color-surface-hover);
      text-decoration: none;
    }

    &.is-active,
    &[aria-pressed="true"] {
      background-color: var(--color-surface-2);
      color: var(--color-accent-3);
      box-shadow: var(--shadow-pressed);
    }
  }

  /* --------------------------------------------------------------------
     Badges — h 25px, padding 4px 8px (from 768:801 / 130:4562 instances)
     -------------------------------------------------------------------- */

  .badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    block-size: 25px;
    padding: var(--space-1) var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--radius-1);
    font-size: var(--fs-neg-1);
    line-height: var(--lh-neg-1);
    color: var(--color-text-secondary);
    background-color: var(--color-surface-2);
    white-space: nowrap;
  }

  /* ⚠ same 4.05:1 contrast note as .btn--brand */
  .badge--accent {
    background-color: var(--color-accent);
    color: var(--color-on-accent);
    font-size: var(--fs-1);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-1);
  }

  .badge--success {
    background-color: var(--color-success-container);
    color: var(--color-success);
  }

  .badge--warning {
    background-color: var(--color-warning-container);
    color: var(--color-warning);
  }

  .badge--error {
    background-color: var(--color-error-container);
    color: var(--color-error);
  }

  .badge--info {
    background-color: var(--color-info-container);
    color: var(--color-info);
  }

  /* Outlined on white (Light/Base) */
  .badge--outline {
    background-color: var(--color-surface);
    border-color: var(--color-border);
  }

  /* Product-tag pill: white, periwinkle border, info text (CPAP, Supplies) */
  .badge--info-pill {
    background-color: var(--color-surface);
    border-color: var(--color-border-info-pill);
    border-radius: var(--radius-pill);
    color: var(--color-info);
  }

  /* Neutral pill (PreResupply) */
  .badge--neutral-pill {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    border-radius: var(--radius-pill);
  }

  /* Borderless status micro-badge (Verified, Paid, Fee For Service) */
  .badge--status {
    block-size: auto;
    padding: 0;
    background-color: transparent;
    font-size: var(--fs-neg-2);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-neg-2);
    color: var(--color-success);
  }

  .badge--status-indigo {
    color: var(--color-status-indigo);
  }

  /* --------------------------------------------------------------------
     Forms — field label 13px Semibold, controls 32px radius 8 (⚡ Input)
     -------------------------------------------------------------------- */

  .field {
    display: grid;
    gap: var(--space-1);
  }

  .field__label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-base);
    color: var(--color-text);
  }

  .field__required {
    color: var(--color-error);
    font-size: var(--fs-neg-1);
  }

  .field__error {
    font-size: var(--fs-neg-1);
    line-height: var(--lh-neg-1);
    color: var(--color-error);
  }

  .input {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    inline-size: 100%;
    block-size: var(--size-control);
    padding: 2px var(--space-2);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-2);
    font-size: var(--fs-base);
    color: var(--color-text);

    &:disabled {
      background-color: var(--color-disabled-container);
      border-color: var(--color-disabled);
      color: var(--color-disabled);
    }

    /* Readonly holds live content the user must read — keep it legible
       and merely calm, unlike the grayed disabled state */
    &[readonly] {
      background-color: var(--color-surface-2);
      border-color: var(--color-border);
      color: var(--color-text);
    }

    &[aria-invalid="true"],
    &.input--error {
      border-color: var(--color-error);
    }
  }

  /* Pill search (📝 Input - Search): borderless in the header,
     bordered inside card toolbars */
  .input--search {
    border-radius: var(--radius-pill);
    border-color: var(--color-border);
  }

  .input--search-header {
    border-color: transparent;
    max-inline-size: 500px;
  }

  /* Landing hero search (605:5392) — grown pill, borderless, card shadow */
  .input--search-hero {
    block-size: auto;
    padding: var(--space-4);
    border-color: transparent;
    box-shadow: var(--shadow-card);
  }

  /* Composed input shell — a .input <div> carries the chrome (icon + pill),
     the inner control is bare, and the focus ring moves to the shell */
  .input > input {
    flex: 1;
    min-inline-size: 0;
    border: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    font: inherit;
  }

  .input > input:focus-visible {
    outline: none;
  }

  .input:has(> input:focus-visible) {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
  }

  .input > svg {
    flex: none;
    color: var(--color-text-secondary);
  }

  /* icon-as-control inside a composed input (search submit, clear) —
     renders identical to a bare .input > svg icon */
  .input > button {
    display: grid;
    place-content: center;
    flex: none;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-text-secondary);
    cursor: pointer;
  }

  /* Combobox / picklist — replace the stripped native arrow with the DS
     14px "down" chevron */
  select.input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='%235c5c5c'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: calc(100% - 8px) center;
    padding-inline-end: var(--space-6);
  }

  textarea.input {
    block-size: auto;
    min-block-size: 100px;
    padding: var(--space-2);
    resize: vertical;
  }

  /* Checkbox — 16px, radius 4 (⚡ Checkbox) */
  .checkbox {
    appearance: none;
    inline-size: 1rem;
    block-size: 1rem;
    flex: none;
    margin: 0;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-1);
    display: inline-grid;
    place-content: center;
    cursor: pointer;

    &::before {
      content: "";
      inline-size: 0.625rem;
      block-size: 0.625rem;
      transform: scale(0);
      background-color: var(--color-on-accent);
      clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    }

    &:checked,
    &:indeterminate {
      background-color: var(--color-accent);
      border-color: var(--color-accent);
      box-shadow: var(--shadow-checked);

      &::before {
        transform: scale(1);
      }
    }

    &:indeterminate::before {
      clip-path: inset(40% 10% 40% 10%); /* dash glyph */
    }

    &:disabled {
      background-color: var(--color-disabled-container);
      border-color: var(--color-disabled);
      cursor: not-allowed;
    }
  }

  /* Toggle switch (⚡ Checkbox Toggle) — 48×24 pill track, white knob */
  .toggle {
    appearance: none;
    position: relative;
    inline-size: 3rem;   /* 48px */
    block-size: 1.5rem;  /* 24px */
    flex: none;
    margin: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background-color: var(--color-toggle-off);
    cursor: pointer;

    &::before {
      content: "";
      position: absolute;
      inset-block-start: 2px;
      inset-inline-start: 2px;
      inline-size: 1.25rem;
      block-size: 1.25rem;
      border-radius: var(--radius-pill);
      background-color: var(--color-surface);
      transition: translate 150ms ease;
    }

    &:checked {
      background-color: var(--color-accent);

      &::before {
        translate: 1.5rem 0;
      }
    }

    &:disabled {
      background-color: var(--color-disabled-container);
      cursor: not-allowed;
    }
  }

  /* --------------------------------------------------------------------
     Global header — 64px gradient band (📝 Global Header).
     Mobile-first: branding + actions on the first row, tabs and search
     wrap below; ≥64rem collapses to the DS single 64px row.
     -------------------------------------------------------------------- */

  .global-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    min-block-size: var(--size-header);
    padding-block-end: var(--space-2);
    background-color: var(--color-header-bg);
    background-image: var(--gradient-header);
    color: var(--color-text-inverse);
  }

  .global-header nav {
    order: 3;
    flex-basis: 100%;
    overflow-x: auto;
  }

  .header-search {
    order: 4;
    display: flex;
    flex: 1;
    flex-basis: 100%;
    justify-content: flex-end;
    padding-inline: var(--space-4);
  }

  .header-search .input {
    max-inline-size: none;
  }

  @media (width >= 64rem) {
    .global-header {
      flex-wrap: nowrap;
      block-size: var(--size-header);
      padding-block-end: 0;
    }

    .global-header nav,
    .header-search {
      order: 0;
      flex-basis: auto;
      overflow-x: visible;
    }

    .header-search .input {
      max-inline-size: 500px; /* back to the DS pill width */
    }
  }

  .global-header__branding {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    align-self: stretch;
    padding-inline: var(--space-3) var(--space-7);
    background-color: var(--color-accent);
  }

  .global-header__title {
    font-size: var(--fs-3);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-3);
    color: var(--color-text-inverse);
  }

  .global-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    padding-inline: var(--space-4);
    margin-inline-start: auto;
  }

  /* Bare icon button (header action cluster) */
  .icon-btn {
    display: grid;
    place-content: center;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-text-inverse);
    cursor: pointer;
  }

  /* Header tabs (⚡ Tabs): active is white + glowing underline */
  .tabs {
    display: flex;
    gap: var(--space-1);
  }

  .tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    block-size: 2.5rem; /* 40px */
    padding-inline: var(--space-3);
    border: 0;
    background: none;
    font-size: var(--fs-1);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-1);
    color: var(--color-tab-inactive);
    cursor: pointer;

    /* underline is a pseudo-element, not a border, so the glow filter
       can hit the bar alone — never the label */
    &::after {
      content: "";
      position: absolute;
      inset-block-end: 0;
      inset-inline: 0;
      block-size: 3px;
      background-color: transparent;
    }

    &[aria-selected="true"],
    &.is-active {
      color: var(--color-text-inverse);

      &::after {
        background-color: var(--color-border-accent-2);
        filter:
          drop-shadow(0 1px 2px var(--color-accent))
          drop-shadow(0 0 6px var(--color-accent));
      }
    }

    /* tabs are chrome, not prose — no base-layer link underline */
    &:hover,
    &:focus-visible {
      text-decoration: none;
    }
  }

  /* Content tabs — Lightning "Text + underline": 13px link text,
     2px accent underline, on light surfaces */
  .tabs--content .tab {
    block-size: var(--size-control);
    font-size: var(--fs-base);
    color: var(--color-text-secondary);

    /* light surfaces: thinner underline, no glow */
    &::after {
      block-size: 2px;
      filter: none;
    }

    &[aria-selected="true"],
    &.is-active {
      color: var(--color-link);
    }
  }

  /* --------------------------------------------------------------------
     Left nav rail — 86px icon+label navigation (app chrome; confirmed by
     the Angular nav-menu templates)
     -------------------------------------------------------------------- */

  .nav-rail {
    inline-size: 5.375rem; /* 86px */
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-1);
    background-color: var(--color-nav-surface);
  }

  .nav-item {
    position: relative;
    display: grid;
    justify-items: center;
    gap: var(--space-1);
    padding-block: var(--space-2);
    border: 2px solid transparent;
    border-radius: var(--radius-2);
    background: none;
    font-size: var(--fs-base);
    color: var(--color-nav-inactive);
    text-decoration: none;
    cursor: pointer;

    &:hover {
      background-color: var(--color-nav-hover-bg);
      text-decoration: none;
    }

    &.is-active,
    &[aria-current="page"] {
      background-color: var(--color-nav-active-bg);
      border-color: var(--color-nav-active-border);
      color: var(--color-nav-active);
    }
  }

  /* Notification count (16px destructive circle, top-right) */
  .nav-item__badge {
    position: absolute;
    inset-block-start: 2px;
    inset-inline-end: 10px;
    display: grid;
    place-content: center;
    min-inline-size: 1rem;
    block-size: 1rem;
    padding-inline: 2px;
    border-radius: var(--radius-pill);
    background-color: var(--color-destructive);
    color: var(--color-on-destructive);
    font-size: var(--fs-neg-1);
    font-weight: var(--fw-semibold);
    line-height: 1;
  }

  /* --------------------------------------------------------------------
     Page header — breadcrumb + 24px title on the page canvas
     -------------------------------------------------------------------- */

  .page-header {
    display: grid;
    gap: 6px;
    padding: var(--space-4) var(--space-5);
  }

  .page-header__breadcrumb {
    font-size: var(--fs-neg-1);
    line-height: var(--lh-neg-1);
    color: var(--color-text-secondary);
  }

  .page-header__title {
    font-size: var(--fs-4);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-4);
    color: var(--color-heading);
  }

  /* Breadcrumb trail (inside .page-header__breadcrumb) */
  .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
  }

  .breadcrumb a {
    color: inherit;
  }

  .breadcrumb li + li::before {
    content: "/";
    content: "/" / ""; /* visual-only separator, silent for screen readers */
    margin-inline-end: var(--space-1);
  }

  /* --------------------------------------------------------------------
     Admin landing (605:2988 family) — centered hero column: search-mode
     button group, hero search, results / detail menu below
     -------------------------------------------------------------------- */

  .landing-column {
    display: grid;
    justify-items: center;
    gap: 14px; /* Figma "List Column" */
    padding-block: var(--space-4) var(--space-6);
  }

  /* the hero search's wrapper (Figma "search": full row, capped pill) */
  .landing-search {
    inline-size: 100%;
    max-inline-size: 720px;
  }

  /* --------------------------------------------------------------------
     Admin Add/Edit form — form-grid rows + read-only audit card +
     actions (promoted from billing-system-form when eligibility-
     schedule-group-form became the second consumer). Rows respond to
     the .content container, not the viewport.
     -------------------------------------------------------------------- */

  /* The form column (Figma "Sections", 850px in both admin forms) */
  .admin-form {
    max-inline-size: 850px;
  }

  .form-grid {
    display: grid;
    gap: var(--space-5);
    padding-block: var(--space-1);
  }

  .form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
    align-items: start;
  }

  /* A lone field that stops one 100px track short of full width
     (Figma: Payer "Phone Number", Plan "Days Before Next Dos…";
     promoted from insurance-payer-form when insurance-plan-form
     became the second consumer) */
  .form-row--wide {
    grid-template-columns: minmax(0, 1fr) 100px;
  }

  /* Checkbox paired beside an input drops to the input line:
     label line + field gap (promoted with .form-row--wide) */
  .checkbox-cell {
    padding-block-start: calc(var(--fs-base) * var(--lh-base) + var(--space-1));
  }

  .record-card {
    display: grid;
    gap: var(--space-4);
  }

  .audit {
    margin: 0;
    padding: var(--space-4);
    border: 0;
    background-color: var(--color-surface-inset);
    border-radius: var(--radius-2);
  }

  .audit__legend {
    /* floats the legend out of the fieldset border area into normal flow */
    float: inline-start;
    inline-size: 100%;
    padding: 0;
    margin-block-end: var(--space-4);
    font-size: var(--fs-neg-1);
    line-height: var(--lh-neg-1);
    letter-spacing: 0.5px;
    color: var(--color-text-muted);
  }

  .audit__rows {
    clear: inline-start;
    inline-size: 100%;
    display: grid;
    gap: var(--space-4);
  }

  .audit-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
  }

  .audit-row--meta {
    grid-template-columns: 240px repeat(2, minmax(0, 1fr));
  }

  .form-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-3);
  }

  /* Rows stack when the form's container narrows — placed after the
     row variants so the equal-specificity override wins by source order */
  @container (width < 40rem) {
    .form-row,
    .form-row--wide,
    .audit-row {
      grid-template-columns: 1fr;
    }

    .checkbox-cell {
      padding-block-start: 0;
    }
  }

  /* --------------------------------------------------------------------
     Cards — white, radius 8, brand shadow on every elevated surface
     -------------------------------------------------------------------- */

  .card {
    background-color: var(--color-surface);
    border-radius: var(--radius-2);
    box-shadow: var(--shadow-card);
    padding: var(--card-padding, var(--space-4) var(--space-5));
  }

  /* Form cards (812:801) pad 20px block / 24px inline */
  .card--form {
    --card-padding: 1.25rem var(--space-5);
  }

  .card--clip {
    overflow: clip;
  }

  .card__title {
    font-size: var(--fs-3);
    font-weight: var(--fw-regular);
    line-height: 1.1;
    color: var(--color-text-section);
  }

  /* Sidebar cards use the 16px title */
  .card__title--sm {
    font-size: var(--fs-2);
  }

  /* Card stack — the signature Resupply corner choreography:
     4px gaps; 8px radius only on the stack's outer corners, 1px on
     shared corners (first 8 8 1 1 / middle 1 / last 1 1 8 8).
     Lives in @layer components (not layout) so the corner overrides
     beat .card's own border-radius by layer order. Longhand corner
     properties, so a single child composes first+last = all four 8px. */
  .card-stack {
    display: grid;
    gap: var(--card-stack-gap, var(--space-1));
  }

  .card-stack > * {
    border-radius: var(--radius-inner);
  }

  .card-stack > :first-child {
    border-start-start-radius: var(--radius-2);
    border-start-end-radius: var(--radius-2);
  }

  .card-stack > :last-child {
    border-end-start-radius: var(--radius-2);
    border-end-end-radius: var(--radius-2);
  }

  /* Horizontal variant (3-up action tiles, 4-up KPI rows):
     first 8 1 1 8 / middle 1 / last 1 8 8 1 */
  .card-stack--row {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }

  .card-stack--row > :first-child {
    border-start-end-radius: var(--radius-inner);
    border-end-start-radius: var(--radius-2);
  }

  .card-stack--row > :last-child {
    border-start-end-radius: var(--radius-2);
    border-end-start-radius: var(--radius-inner);
  }

  .card-stack--row > :only-child {
    border-radius: var(--radius-2);
  }

  /* Grid/list toolbar card: brand action left, search + sort right */
  .toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
  }

  .toolbar__controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    flex: 1 1 auto;
    min-inline-size: 0;
  }

  /* Toolbar search pill (Figma 304px) — shrinks with the toolbar instead
     of overflowing (promoted from billing-system-grid when
     document-attribute-master-grid became the second consumer).
     Grow-and-cap, not a set inline-size: an explicit inline-size feeds the
     controls' min-content and blocks shrinking, while a flex-basis alone
     collapses to the input's ~20-char default. max-inline-size does neither. */
  .toolbar-search {
    inline-size: auto;
    flex: 1 1 auto;
    max-inline-size: 19rem;
    min-inline-size: 0;
  }

  /* --------------------------------------------------------------------
     Row card — one record in an admin grid (Item N of 768:801)
     -------------------------------------------------------------------- */

  .row-card {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-4) var(--space-5);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-card);
  }

  .row-card__fields {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    flex: 1;
    min-inline-size: 0;
  }

  .row-card__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-inline-start: auto;
    color: var(--color-text-secondary);
  }

  /* Bare icon action inside a row card (edit / delete) — promoted from
     billing-system-grid when document-attribute-master-grid became the
     second consumer */
  .row-action {
    display: grid;
    place-content: center;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
  }

  /* Responsive admin-grid row: narrow containers stack checkbox + actions
     on the top line with the label/value cells in an auto-fit grid below;
     at >= 64rem of container the row flattens to the Figma single line.
     Pages mirror their design's column widths via --row-fields-columns —
     promoted from billing-system-grid when document-state-master-grid
     became the second consumer */
  .row-card--grid {
    flex-wrap: wrap;
  }

  .row-card--grid .row-card__fields {
    order: 2;
    flex-basis: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 7rem), 1fr));
    gap: var(--space-4) var(--space-5);
    align-items: start;
  }

  @container (width >= 64rem) {
    .row-card--grid {
      flex-wrap: nowrap;
    }

    .row-card--grid .row-card__fields {
      order: 0;
      flex-basis: auto;
      align-items: center;
      gap: var(--space-5);
      grid-template-columns: var(
        --row-fields-columns,
        repeat(auto-fit, minmax(min(100%, 7rem), 1fr))
      );
    }
  }

  /* Label + Value cell — canonical 700:3381 */
  .label-value {
    display: grid;
    gap: 2px;
  }

  .label-value__label {
    font-size: var(--fs-neg-1);
    font-weight: var(--fw-regular);
    line-height: var(--lh-neg-1);
    color: var(--color-text-secondary);
  }

  .label-value__value {
    font-size: var(--fs-2);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-2);
    color: var(--color-text-value);
  }

  /* Patient row variant: periwinkle shell, white cells, 2px seams */
  .row-card--tinted {
    padding: 0;
    gap: 2px;
    background-color: var(--color-surface-tint);
    overflow: clip;
  }

  /* Zero-specificity radius so .card-stack's corner choreography wins
     when a tinted row sits inside a stack; standalone rows keep 8px */
  :where(.row-card--tinted) {
    border-radius: var(--radius-2);
  }

  .row-card--tinted > * {
    background-color: var(--color-surface);
    padding: var(--space-3) var(--space-4);
    align-self: stretch;
  }

  /* --------------------------------------------------------------------
     Data table (DS recipe — for dense tabular views).
     border-collapse: separate — collapse would void the border-radius
     and swallow the selected row's accent top border.
     -------------------------------------------------------------------- */

  .table {
    inline-size: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background-color: var(--color-surface);
    border-radius: var(--radius-2);
    overflow: clip;
  }

  .table th {
    block-size: 2.25rem; /* 36px */
    padding-inline: var(--space-4);
    background-color: var(--color-surface-2);
    border-block-end: 1px solid var(--color-border-table);
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    color: var(--color-text);
    text-align: start;
  }

  .table td {
    block-size: 3.75rem; /* 60px row height per DS */
    padding: var(--space-3) var(--space-4);
    border-block-end: 1px solid var(--color-border);
    font-size: var(--fs-base);
  }

  .table tbody tr:hover td {
    background-color: var(--color-surface-hover);
  }

  /* Accent outline via inset shadows — adjacent borders would collide */
  .table tr[aria-selected="true"] td {
    background-color: var(--color-selected-row);
    box-shadow:
      inset 0 1px 0 var(--color-border-accent-2),
      inset 0 -1px 0 var(--color-border-accent-2);
  }

  /* --------------------------------------------------------------------
     Small parts
     -------------------------------------------------------------------- */

  /* Removable filter pill (⚡ Pill) */
  .pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    block-size: 26px;
    padding-block: var(--space-1);
    padding-inline: var(--space-2) var(--space-1);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-4);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--color-heading);
  }

  /* Avatar (⚡ Avatar) — 40px circle, periwinkle tint */
  .avatar {
    display: inline-grid;
    place-content: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    flex: none;
    background-color: var(--color-avatar-bg);
    border-radius: var(--radius-pill);
    font-size: var(--fs-1);
    font-weight: var(--fw-semibold);
    color: var(--color-avatar-text);
  }

  /* Tooltip — inverse surface (prototype insight-tooltip recipe) */
  .tooltip {
    max-inline-size: 300px;
    padding: var(--space-2) var(--space-3);
    background-color: var(--color-surface-inverse);
    border-radius: var(--radius-2);
    color: var(--color-text-inverse);
    font-size: var(--fs-1);
    line-height: var(--lh-1);
  }

  /* Progress — 8px pill track; segments size via flex ratios */
  .progress {
    display: flex;
    block-size: 0.5rem;
    border-radius: var(--radius-pill);
    background-color: var(--color-surface-3);
    overflow: clip;
  }

  .progress__fill {
    background-color: var(--color-accent);

    & + & {
      border-inline-start: 1px solid var(--color-surface);
    }
  }

  .progress__fill--success {
    background-color: var(--color-trend-up);
  }

  /* Sort menu — toolbar sort dropdown (Figma "Dynamic Menu" 933:10056).
     JS-free: opens via popover/popovertarget anchored to the .sort-trigger
     icon button; criteria rows 2–3 toggle through hidden checkboxes driven
     by the + Add Criteria / trash labels; direction is a styled radio pair;
     Clear is a native form reset. Drag-to-reorder needs JS — the grip
     handle is the resting state only. */

  .sort-trigger {
    anchor-name: --sort-trigger;
  }

  .sort-menu {
    position: fixed;
    position-anchor: --sort-trigger;
    inset: auto;
    inset-block-start: calc(anchor(bottom) + 0.75rem);
    inset-inline-end: calc(anchor(center) - 2.875rem); /* nubbin ↔ trigger center */
    margin: 0;
    inline-size: min(29rem, 100dvw - 1rem);
    padding: var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-1);
    background:
      linear-gradient(var(--color-surface-tint), var(--color-surface-tint)) padding-box,
      var(--gradient-menu-border) border-box;
    box-shadow: var(--shadow-menu);
    overflow: visible; /* the nubbin pokes above the border box */
  }

  /* Static fallback while anchor positioning is unsupported (pre-26 Safari):
     park the menu under the toolbar's right end */
  @supports not (anchor-name: --a) {
    .sort-menu {
      inset-block-start: 15rem;
      inset-inline-end: 1.5rem;
    }
  }

  /* Nubbin — rotated square whose upper edges carry the gradient's top color */
  .sort-menu::after {
    content: "";
    position: absolute;
    inset-block-start: -7.5px;
    inset-inline-end: var(--space-7);
    inline-size: 12px;
    block-size: 12px;
    rotate: 45deg;
    background-color: var(--color-surface-tint);
    border-block-start: 1px solid var(--color-menu-border-top);
    border-inline-start: 1px solid var(--color-menu-border-top);
  }

  .sort-menu > form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .sort-menu__title {
    padding: var(--space-4) var(--space-3);
    font-size: var(--fs-1);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-1);
    color: var(--color-text);
  }

  .sort-menu__then {
    padding-block: var(--space-4) var(--space-2);
    padding-inline: var(--space-3);
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-base);
    color: var(--color-heading);
  }

  .sort-menu__row {
    display: flex;
    align-items: center;
  }

  .sort-menu__field {
    display: flex;
    flex: 1;
    align-items: center;
    gap: var(--space-2);
    min-inline-size: 0;
    min-block-size: 2.875rem; /* 46px */
    padding: var(--space-2);
    background-color: var(--color-surface);
    border-radius: var(--radius-inner);
  }

  .sort-menu__field > svg {
    flex: none;
    color: var(--color-text);
    cursor: grab; /* reorder affordance only — actual dragging needs JS */
  }

  /* criteria picklist — bare select inside the white field shell, DS chevron */
  .sort-menu__field > select {
    flex: 1;
    min-inline-size: 0;
    border: 0;
    padding: 0;
    background-color: transparent;
    color: var(--color-text);
    font: inherit;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='%235c5c5c'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: calc(100% - 8px) center;
    padding-inline-end: var(--space-6);
  }

  /* fixed 3-icon track so the arrows column stays aligned on the trash-less
     first row */
  .sort-menu__controls {
    display: grid;
    grid-template-columns: repeat(3, 1.5rem);
    gap: var(--space-2);
    align-items: center;
    justify-items: center;
    align-self: stretch;
    padding-inline: var(--space-5);
  }

  /* Ascending / descending — a radio pair rendered as arrows */
  .sort-dir {
    position: relative;
    display: inline-grid;
    place-content: center;
    color: var(--color-icon-off);
    border-radius: var(--radius-1);
    cursor: pointer;

    &:has(:checked) {
      color: var(--color-accent);
    }

    &:has(:focus-visible) {
      outline: 2px solid var(--color-focus);
      outline-offset: 2px;
    }

    /* DS inverse-surface tooltip (.tooltip recipe), on hover and focus */
    &::after {
      content: attr(data-tip);
      position: absolute;
      inset-block-end: calc(100% + var(--space-2));
      inset-inline-start: 50%;
      translate: -50%;
      padding: var(--space-2) var(--space-3);
      background-color: var(--color-surface-inverse);
      border-radius: var(--radius-2);
      color: var(--color-text-inverse);
      font-size: var(--fs-1);
      line-height: var(--lh-1);
      white-space: nowrap;
      pointer-events: none;
      visibility: hidden;
      opacity: 0;
    }

    &:hover::after,
    &:has(:focus-visible)::after {
      visibility: visible;
      opacity: 1;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .sort-dir::after {
      transition: opacity 120ms ease, visibility 120ms;
    }
  }

  .sort-menu__trash {
    display: inline-grid;
    place-content: center;
    color: var(--color-icon-trash);
    border-radius: var(--radius-1);
    cursor: pointer;
  }

  /* Criteria rows 2–3 appear while their hidden .sort-toggle is checked */
  .sort-menu__extra {
    display: none;
  }

  .sort-menu:has(.sort-toggle--2:checked) .sort-menu__extra--2,
  .sort-menu:has(.sort-toggle--3:checked) .sort-menu__extra--3 {
    display: block;
  }

  .sort-menu__add {
    display: none;
    align-items: center;
    gap: var(--space-2);
    align-self: start;
    min-block-size: 2rem;
    padding-inline: var(--space-2);
    margin-block-start: var(--space-2);
    border-radius: var(--radius-1);
    font-size: var(--fs-1);
    font-weight: var(--fw-semibold);
    color: var(--color-accent-2);
    cursor: pointer;
  }

  /* exactly one + Add Criteria proxy shows: the first unchecked toggle's */
  .sort-menu:has(.sort-toggle--2:not(:checked)) .sort-menu__add--2,
  .sort-menu:has(.sort-toggle--2:checked):has(.sort-toggle--3:not(:checked)) .sort-menu__add--3 {
    display: inline-flex;
  }

  /* focus ring hops to the visible proxy while a hidden toggle has focus */
  .sort-menu:has(.sort-toggle--2:focus-visible) .sort-menu__add--2,
  .sort-menu:has(.sort-toggle--3:focus-visible) .sort-menu__add--3,
  .sort-menu:has(.sort-toggle--2:focus-visible) .sort-menu__extra--2 .sort-menu__trash,
  .sort-menu:has(.sort-toggle--3:focus-visible) .sort-menu__extra--3 .sort-menu__trash {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
  }

  .sort-menu__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-block-start: var(--space-2);
    padding-block-start: var(--space-2);
    border-block-start: 1px solid var(--color-border);
  }

  /* Narrow viewports: span the viewport instead of hugging the trigger */
  @media (width < 36rem) {
    .sort-menu {
      inset-inline: 0.5rem;
      inline-size: auto;
    }
  }

  /* Filter menu — toolbar filter dropdown. Same JS-free popover chrome as
     .sort-menu (anchor-positioned card, gradient border, nubbin), anchored
     to its own .filter-trigger icon button instead. Content is plain
     checkbox groups using the existing .cluster/.checkbox recipe. */

  .filter-trigger {
    anchor-name: --filter-trigger;
  }

  .filter-menu {
    position: fixed;
    position-anchor: --filter-trigger;
    inset: auto;
    inset-block-start: calc(anchor(bottom) + 0.75rem);
    inset-inline-end: calc(anchor(center) - 2.875rem);
    margin: 0;
    inline-size: min(22rem, 100dvw - 1rem);
    padding: var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-1);
    background:
      linear-gradient(var(--color-surface-tint), var(--color-surface-tint)) padding-box,
      var(--gradient-menu-border) border-box;
    box-shadow: var(--shadow-menu);
    overflow: visible;
  }

  @supports not (anchor-name: --a) {
    .filter-menu {
      inset-block-start: 15rem;
      inset-inline-end: 1.5rem;
    }
  }

  .filter-menu::after {
    content: "";
    position: absolute;
    inset-block-start: -7.5px;
    inset-inline-end: var(--space-7);
    inline-size: 12px;
    block-size: 12px;
    rotate: 45deg;
    background-color: var(--color-surface-tint);
    border-block-start: 1px solid var(--color-menu-border-top);
    border-inline-start: 1px solid var(--color-menu-border-top);
  }

  .filter-menu > form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
  }

  .filter-menu__title {
    padding: var(--space-4) var(--space-3) 0;
    font-size: var(--fs-1);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-1);
    color: var(--color-text);
  }

  .filter-menu__group {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-inline: var(--space-3);
  }

  .filter-menu__group-label {
    font-size: var(--fs-neg-1);
    line-height: var(--lh-neg-1);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.5px;
    color: var(--color-text-muted);
  }

  .filter-menu__options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
  }

  .filter-menu__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding-block-start: var(--space-2);
    border-block-start: 1px solid var(--color-border);
  }

  @media (width < 36rem) {
    .filter-menu {
      inset-inline: 0.5rem;
      inline-size: auto;
    }
  }
}


/* ==========================================================================
   6. UTILITIES — tiny, token-backed, win by layer order
   ========================================================================== */

@layer utilities {

  .visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .text-secondary { color: var(--color-text-secondary); }
  .text-strong    { color: var(--color-text-strong); }
  .text-muted     { color: var(--color-text-muted); }
  .text-value     { color: var(--color-text-value); }
  .text-heading   { color: var(--color-heading); }
  .text-error     { color: var(--color-error); }
  .text-success   { color: var(--color-success); }

  /* 10px bold uppercase group label (RECENT OUTREACHES, PROD LINE)
     ⚠ #8b8b8b on white = 3.4:1 — AA fail, Figma-inherited; prefer
     .panel-heading (#514f4d) where design allows */
  .micro-label {
    font-size: var(--fs-neg-2);
    font-weight: var(--fw-bold);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--color-text-micro);
  }

  /* 12px bold uppercase panel heading (FILTERS) */
  .panel-heading {
    font-size: var(--fs-neg-1);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    color: var(--color-text-section);
  }

  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mono { font-family: var(--ff-mono); }

  .elevated { box-shadow: var(--shadow-card); }
}