globals.css

@import "tailwindcss";
/* Design-scratch routes have their own route-scoped utility sheet. Keeping
   their rapidly growing utility vocabulary out of every production page cuts
   the shared render-blocking stylesheet without changing mockup rendering. */
@source not "./mockups";
@source not "../components/**/*mockup*";
/* Opt-in v2 design-system token layer. Every rule is scoped to `.ckb-v2`, so
   importing it cannot change any surface that does not carry the class. */
@import "./ckb-v2-tokens.css";

@custom-variant dark (&:where(.dark, .dark *));

/*
 * Motion variants are redefined so the in-app Motion preference is authoritative
 * in BOTH directions, without touching the ~164 `motion-reduce:`/`motion-safe:`
 * call sites.
 *
 *   data-motion absent    -> "system": follow prefers-reduced-motion (unchanged)
 *   data-motion="reduced" -> explicit opt-OUT: suppress regardless of the OS
 *   data-motion="full"    -> explicit opt-IN: animate even when the OS asks to reduce
 *
 * The opt-in exists because iOS "Reduce Motion" is commonly switched on to stop
 * app-launch zoom rather than out of vestibular sensitivity, and it was silently
 * freezing this app's answer-progress feedback on a physical iPhone (both Safari
 * and the installed PWA) with no in-app way to get it back.
 */
@custom-variant motion-reduce {
  @media (prefers-reduced-motion: reduce) {
    html:not([data-motion="full"]) & {
      @slot;
    }
  }

  html[data-motion="reduced"] & {
    @slot;
  }
}

@custom-variant motion-safe {
  @media (prefers-reduced-motion: no-preference) {
    html:not([data-motion="reduced"]) & {
      @slot;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    html[data-motion="full"] & {
      @slot;
    }
  }
}

/*
 * Design tokens that generate Tailwind utilities.
 * Colour ramps and per-theme values live in :root / .dark below and are
 * consumed directly via var(), e.g. text-[color:var(--text-muted)], so
 * .dark overrides cascade to every call site without a generated colour bridge.
 *
 * Radius usage rules:
 *   rounded-md  chips, inner elements, metadata pills
 *   rounded-lg  controls, inputs, buttons, cards, panels, drawers
 *   rounded-xl  bottom sheets, dialogs, large shells
 *
 * Z-index ladder (Tailwind v4 has no z theme namespace; arbitrary values are
 * the idiom — pick an existing rung, never invent a new number):
 *   0–40    in-page layering: sticky headers, badges, count bubbles
 *   60      app chrome: master search header, mode menus
 *   80–85   document overlays: viewer fullscreen (80), table fullscreen (85)
 *   95      popovers that must beat overlays (source preview)
 *   100     modal layer — the Sheet primitive — and the skip link
 *   max     mockup-only diagnostics; never in live routes
 * New overlays go through components/ui/sheet.tsx rather than a new layer.
 */
@theme {
  /* Named responsive breakpoint tokens (Task #336) */
  --breakpoint-phone: 640px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;
  /* The one narrow phone interval where the shared filter wordmark would make
     a single-line control band wrap. The upper token is exclusive, so this is
     exactly 414–429px. */
  --breakpoint-filter-label-collapse: 414px;
  --breakpoint-filter-label-restore: 430px;

  /* Radius ladder: 4 · 6 · 10 · 12 · 16 · 20 — the 4px grid with two deliberate
     half-steps. `sm` is 6px, for chips and pills that read as too heavy at 8.
     `md` is 10px because it is the control rung, and it is the one value the v2
     layer and the live layer had to agree on: `ckb-v2-tokens.css` sizes
     controls, inputs and buttons at 10px, and leaving the live ladder at 8
     meant every adopted surface silently changed shape (SPEC §4.6). Moving it
     here instead moves every `rounded-md` at once, deliberately, with one
     visual diff. `lg` used to be 10px, which collided with `xl` when it moved
     to 12, so the whole upper ladder shifted a rung rather than collapsing two
     names onto one value. */
  --radius-xs: 0.25rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.25rem;
  --radius-phone-frame: 1.85rem;
  /* Fully-round role (chips, pills, avatars). Call sites carried a bare
     `, 9999px` fallback before this was declared. */
  --radius-pill: 9999px;

  /* Minimum interactive target (WCAG 2.5.5 / 2.5.8) — 48px, and the design
     system's ONE tap knob (SPEC §4.10, DECISIONS §C2). It is declared here in
     @theme because this is the layer that generates min-h-tap / h-tap / w-tap /
     min-w-tap / size-tap; the v2 layer's --tap-min is a pure alias of it and
     never carries its own value, so the app can never render a 44/48 split.
     Semantic intent: "this is a touch target", not a pixel count.
     NB: the min-h-12 sites now match the token rather than exceeding it — leave
     them alone; no production target is ever reduced. A grid track sized to hold
     a tap target uses var(--spacing-tap), never a copy of the number, or the
     track and its child desync the next time this value moves. The one
     deliberate exception is the phone composer, pinned to 44px below 431px so
     the edge-to-edge dock keeps its height (see the max-width: 430px block,
     which covers the composer input as well as the icon/send buttons). */
  --spacing-tap: 3rem;
  --spacing-phone-frame: 52.75rem;

  /* Shared reading measure, wide mockup study canvas, and Factsheets phone geometry. */
  --container-reading: 64rem;
  --container-mockup-wide: 92rem;
  --container-phone-frame: 24.375rem;

  /* Specifier-map layout roles: jump target height, numbered step column, and
     wide-screen detail rail. These stay together so the page cannot drift back
     to unrelated one-off dimensions. */
  --spacing-specifier-map-jump: 5.25rem;
  --spacing-specifier-map-step-number: 2.25rem;
  --spacing-specifier-map-aside: 22rem;

  /* Mode-home composer slots reserve their settled portal geometry before the
     client host adopts them. Without this structural reserve, Therapy moved the
     entire action stack when hydration relocated the composer (CLS 0.248).
     These are layout tokens, not a second v2 colour/theme source. */
  /* Re-measured 2026-08-19 at 390px across six mode homes (therapy-compass,
     dsm, forms, factsheets, specifiers, and the shared `/` home): every one
     settles at 162px, not the 106px this reserved. The 56px difference is the
     smart-search hint, which `UniversalSearchCommandSurface` renders INSIDE
     this slot above the composer: a 48px hint row plus the 8px flex gap that
     separates it from the composer (`gap-2` on `.universal-command-surface` —
     the `gap-1` in that same expression is the bottom-dock placement, not this
     slot). The earlier measurement counted only the composer pill plus the
     privacy notice, before that hint existed. Under-reserving it meant the slot
     grew on portal adoption and pushed the action and pill stacks down on every
     ticket-bearing mode home (measured CLS: specifiers 0.055, dsm 0.047,
     therapy 0.042, `/` 0.020, forms 0.019, factsheets 0.017). Both the hint row
     and its gap are fixed-height on phone, so 162px is exact: the settled
     layout is unchanged and only the pre-adoption reserve grows.

     The default wide value remains 88px. Current production attribution at
     1280–1440 measured the resulting initial shift below the 0.01 decision
     threshold, so those profiles stay unchanged. The 640–1279px band has a
     separate measured reserve and one-line prompt rail below: the old wrapping
     surface grew 88→199px and produced 0.021676 CLS at 800px and 0.019870 at
     1025px. */
  --spacing-mode-home-composer-phone: 10.125rem;
  --spacing-mode-home-composer-wide: 5.5rem;
  /* Hero medallion. Scales continuously with the viewport the way --text-hero
     does, instead of stepping 48→48→56 at sm/lg: the old steps served the
     768–1023px tablet band the phone size while the heading beside it had
     already grown to 34.56px. The 3rem floor is load-bearing — it must still
     resolve to exactly 48px at 390px, where ui-tools.spec.ts pins the tile
     across seven mode homes — and it holds that floor through 430px. The cap
     is reached at 800px. */
  --spacing-hero-medallion: clamp(3rem, 1.5rem + 4vw, 3.5rem);

  /* Icon glyph size scale. Named spacing tokens so icon sizing is a documented
     scale (size-icon-md is the 16px default) instead of raw `h-4 w-4` literals,
     and so a step can carry a responsive variant: `size-icon-md sm:size-icon-lg`.
     Generates size-icon-*, h-icon-*, w-icon-* exactly like --spacing-tap generates
     size-tap. The `4.5` (18px) half-step these retire snaps to sm/md/lg per site.
     NB: container tiles (iconTile h-9, empty-state tile h-10) are NOT glyphs and
     stay on the integer spacing scale — this token is for the icon glyph itself. */
  --spacing-icon-xs: 0.75rem; /* 12px — inline markers, dense metadata */
  --spacing-icon-sm: 0.875rem; /* 14px — badge / chip / metadata icons */
  --spacing-icon-md: 1rem; /* 16px — default: buttons, nav, fields */
  --spacing-icon-lg: 1.25rem; /* 20px — header / primary controls */
  --spacing-icon-xl: 1.5rem; /* 24px — hero / composer emphasis */

  /* Active-filter count bubble on the search band. 17px is deliberately off
     both the 4px grid and the icon scale above: it is a text-bearing box sized
     to its own --text-2xs numeral plus the tinted ring, not a glyph, so
     snapping it to 16px clips the digit and 20px reads as the solid alert disc
     the pill is written to avoid. Held as a token because the raw value has
     already leaked once — it reached mode-nav and a since-deleted therapy
     filter sheet before the shared control absorbed those call sites (#275). */
  --spacing-search-band-badge: 1.0625rem;

  /* Type scale — sub-`xs` micro steps plus the 13–22px "between" steps the
     dense clinical UI reaches for. These are intentionally SIZE-ONLY: unlike
     Tailwind's default text-* tokens they carry no `--line-height` /
     `--letter-spacing` companion, so `text-3xs` etc. set font-size alone and
     drop in cleanly for the `text-[Npx]` arbitrary values they retire without
     re-leading or re-tracking. This UI sets its own `leading-*` / `tracking-*`
     per context (pills, tables, legends, eyebrow labels); a baked line-height
     would be overridden at most call sites and silently shift the few without
     one. Set leading/tracking explicitly where a step needs it — see
     `eyebrowText` in ui-primitives.tsx for the uppercase eyebrow treatment
     (`--text-2xs` used to bake that tracking in; it is now the neutral 11px
     step and the tracking lives at the recipe/call site instead).
       3xs         10px  micro floor: dense metadata, legend labels, count
                         bubbles. An 8px `4xs` step existed here and is retired
                         — unreadable at any density in a clinical product, so
                         nothing below 10px is a legal step. ≤9px snaps here.
       2xs         11px  Chip `compact` / secondary labels (most common small size)
       (xs 12 · sm 14 · base 16 come from Tailwind's default scale —
        Chip `standard` uses xs / 12px; see docs/design-system/TOKENS.md)
       sm-minus    13px  one notch under sm — dense body/labels bigger than xs
       base-minus  15px  one notch under base — comfortable body just under 16
       (lg 18 · xl 20 · 2xl 24 come from Tailwind's default scale)
       lg-minus    17px  one notch under lg — display titles a shade under 18
       2xl-minus   22px  one notch under 2xl — wide-screen nowrap headings */
  --text-3xs: 0.625rem;
  --text-2xs: 0.6875rem;
  --text-sm-minus: 0.8125rem;
  --text-base-minus: 0.9375rem;
  --text-lg-minus: 1.0625rem;
  --text-2xl-minus: 1.375rem;
  --text-3xl-minus: 1.625rem;

  /* Fluid display heading for the hero / mode-home titles (hybrid-fluid type:
     the large display heading scales continuously; body / UI text stays on the
     stepped scale above). The floor is deliberately 1.45rem so the phone
     baseline (23.2px at ≤~393px) is unchanged, then it ramps to the 2.15rem cap
     by ~1033px — no breakpoint jumps. Generates the `text-hero` utility.
     clamp() font sizes are not flagged by scripts/check-type-scale.mjs. */
  --text-hero: clamp(1.75rem, 1.2rem + 2vw, 2.25rem);
  /* Companion line-height marks --text-hero as a font-SIZE token (Tailwind v4
     `--text-<name>--line-height` convention) so downstream tooling never
     misreads the clamp() value as a font-family list. Call sites that set an
     explicit leading-* utility still win over this default. */
  --text-hero--line-height: 1.12;

  /* Named leading steps for the two contexts the stepped scale could not
     express, so neither has to be spelled as an arbitrary value. Tailwind owns
     --leading-tight/-snug/-normal/-relaxed; these do NOT redefine those (that
     would silently retune every existing leading-tight/leading-snug call site).
       leading-display  1.05  large display headings — hero/mode-home/detail h1
       leading-prose    1.6   the max-w-[68ch] body measure */
  --leading-display: 1.05;
  --leading-prose: 1.65;

  /* ---- Letterspacing scale -------------------------------------------------
     Measured 7 Aug 2026, production only (`*-mockups.tsx` and `mockups/` are
     design scratch and gate-exempt): 110 arbitrary `tracking-[…]` call sites
     across 18 distinct values, against one named token. Counting mockups gives
     372/31 — that is the number to quote about the *sprawl*, not about the debt
     a gate can act on.

     The real defect is sharper than sprawl. 57 of the 110 sites are a single
     value, 0.06em — and `--tracking-eyebrow` is declared at 0.08em, so the one
     named token does not match the value its own call sites overwhelmingly use.
     That is why it has almost no consumers: the token was named for a number
     nobody writes.

     Named roles, with the measured production counts each one absorbs:

       --tracking-display  -0.02em  folds: -0.008 (1), -0.01 (3), -0.035 (1), -0.04 (1)
       --tracking-normal    0       folds: 0.01 (1), 0.02 (2)
       --tracking-label     0.06em  folds: 0.04 (3), 0.05 (6), 0.06 (57)   <- the mass
       --tracking-eyebrow   0.08em  folds: 0.08 (8), 0.09 (1)   [pre-existing, value unchanged]
       --tracking-kicker    0.12em  folds: 0.1 (7), 0.11 (1), 0.12 (14), 0.16 (1)

     Five roles, not seven: production does not justify a second wide step or a
     separate tight-display step — the negative cluster is six sites total. No
     fold moves a call site by more than 0.04em, and most by 0.01–0.02em.

     `--tracking-eyebrow` keeps 0.08em deliberately. Retuning it to 0.06em would
     silently move every existing consumer of the token; that is a different
     change from naming the scale, and wants its own measured step.

     The `arbitraryTracking` contract ratchet holds the family at its current
     per-path count (68 statically-resolvable sites across 40 files) so it cannot
     regrow while the call-site migration waits on the open answer-shell and
     doc-truth PRs. `tracking-[var(--…)]` is the sanctioned token form and is not
     counted, exactly as `text-[color:var(--…)]` is exempt from the type-scale
     check. */
  --tracking-display: -0.02em;
  --tracking-normal: 0em;
  --tracking-label: 0.06em;
  --tracking-eyebrow: 0.08em;
  --tracking-kicker: 0.12em;

  /* Font families: bind Tailwind's font-sans / font-mono to the loaded Geist
     faces (variables set on <html> by next/font). font-mono is used for
     clinical codes and IDs (guideline refs, chunk/page numbers, versions). */
  --font-sans:
    var(--font-geist-sans), ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  --font-mono: var(--font-geist-mono), ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;

  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1);

  --animate-fade-up: fade-up 200ms cubic-bezier(0.22, 1, 0.36, 1) both;
  --animate-overlay-in: overlay-in 200ms cubic-bezier(0.22, 1, 0.36, 1) both;
  --animate-sheet-up: sheet-up var(--swipe-duration, 250ms) cubic-bezier(0.22, 1, 0.36, 1) both;
  --animate-sheet-left: sheet-left var(--swipe-duration, 220ms) cubic-bezier(0.22, 1, 0.36, 1) both;
  --animate-pop-in: pop-in 180ms cubic-bezier(0.34, 1.3, 0.64, 1) both;
  --animate-dialog-rise: dialog-rise 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
  --animate-action-tray-in: action-tray-in var(--swipe-duration, 160ms) cubic-bezier(0.22, 1, 0.36, 1) both;
  --animate-shimmer: shimmer 1.4s linear infinite;
  --animate-answer-ecg: answer-ecg-scroll 3.2s linear infinite;
  --animate-answer-ecg-compact: answer-ecg-scroll 2.6s linear infinite;
}

/* Theme tokens */
:root {
  /* Named responsive breakpoint tokens (Task #336) */
  --bp-phone: 640px;
  --bp-tablet: 768px;
  --bp-desktop: 1024px;

  /* Layout constraints */
  --content-max-width: 1440px;
  --rail-width: 480px;
  --content-width-catalogue: 76rem;

  /* Clinical White: true-neutral graphite-to-ash ramp (de-blued). */
  --neutral-0: #ffffff;
  --neutral-50: #f7f8fa;
  --neutral-100: #f1f4f6;
  --neutral-200: #e5e7eb;
  --neutral-300: #cdd5df;
  --neutral-400: #98a2b3;
  --neutral-500: #667085;
  --neutral-600: #475467;
  --neutral-700: #344054;
  --neutral-800: #1d2939;
  --neutral-900: #101418;
  --neutral-950: #080b0f;

  /* Clinical accent (Clinical Sky): cool blue clinical identity ramp. The whole
     ramp is derived from --primary-500 #1d6fb8 (5.2:1 on white, so it is legal
     as both a text colour and a button fill) — never swap one step in isolation
     or the tints, borders and hover states stop agreeing with each other. */
  --primary-50: #eff5fc;
  --primary-100: #d9e8f8;
  --primary-200: #c6dcf2;
  --primary-300: #8ebde6;
  --primary-400: #4a91d2;
  --primary-500: #1d6fb8;
  --primary-600: #1a66a8;
  --primary-700: #185c99;
  --primary-800: #164a7a;
  --primary-900: #143c62;

  /* Surfaces are an ordered five-step scale: inset < wash < subtle < surface <
     raised. `raised` must stay the lightest plane or cards read as recesses. */
  --background: #f1f4f8;
  --app-shell: #101d2e;
  --surface: #fcfdfe;
  --surface-chrome: #f7f9fc;
  --surface-raised: #ffffff;
  --surface-subtle: #f7f9fc;
  --surface-inset: #eaeef4;
  --surface-glass: rgb(255 255 255 / 82%);
  --surface-highlight: color-mix(in srgb, var(--neutral-0) 64%, transparent);
  --surface-lux: #ffffff;
  --surface-wash: #f1f4f8;
  --text: var(--neutral-900);
  --text-heading: #080b0f;
  --text-muted: var(--neutral-600);
  --text-soft: var(--neutral-500);
  --decoration-soft: var(--neutral-500);
  /* Placeholder is still text (≥4.5:1). Same ink as muted until a distinct step
     is needed; also declared on the v2 layer for opt-in adoption. */
  --text-placeholder: var(--neutral-600);
  --border: #e3e8ef;
  --border-strong: #c8d2de;
  /* Tracks --border-strong at 55% — re-derive both together. */
  --border-lux: rgb(200 210 222 / 55%);
  /* Highlight rings on lux surfaces (panel, mobile FAB menu, PWA notice). These
     exist so the ring carries its own per-theme value and the call site does not
     need a `dark:` override — the prohibition GATES §3 lists, now gated at zero.
     Values are byte-equivalent to the utilities they replace: Tailwind emits
     `color-mix(in oklab, <colour> N%, transparent)` for `ring-<colour>/N`, and
     mixing any colour with `transparent` yields that colour at alpha N
     regardless of space, so the glass ring is written in the plainer rgb() form
     the .dark --surface-highlight already uses.
       --ring-highlight  tracks --border-strong, 20% light / 10% dark
       --ring-glass      literal white, 35% light / 10% dark — deliberately NOT
                         --neutral-0, which inverts to #060708 in dark */
  --ring-highlight: color-mix(in oklab, var(--border-strong) 20%, transparent);
  --ring-glass: rgb(255 255 255 / 35%);
  --primary: var(--primary-500);
  --primary-strong: var(--primary-700);
  --primary-soft: #eff5fc;
  --primary-contrast: #ffffff;

  /* Command (graphite): primary actions — New chat, primary CTAs. */
  --command: #111827;
  --command-hover: #0b1220;
  --command-contrast: #ffffff;

  /* Clinical accent role tokens (Clinical Sky). Selected · evidence · send ·
     focus. Hover is a full ramp step (not a 4% nudge) and :active settles back
     to rest rather than pushing below the resting baseline. */
  --clinical-accent: var(--primary-500);
  --clinical-accent-hover: #185c99;
  --clinical-accent-active: #14507f;
  --clinical-accent-strong: var(--primary-700);
  --clinical-accent-soft: var(--primary-soft);
  --clinical-accent-border: #c6dcf2;
  --clinical-accent-contrast: #ffffff;
  /* Tinted filter-count pill on the results band — quieter than a solid disc. */
  --search-band-badge-bg: color-mix(in oklab, var(--clinical-accent) 16%, transparent);

  /* Bespoke chat surfaces with no role-token equivalent: warm sand callouts
     and table headers. Per-theme values, not aliases. */
  --clinical-chat-sand: #f7f1e6;
  --clinical-chat-sand-border: #eadcc7;
  --clinical-chat-sand-border-strong: #ddc7a8;
  /* These two are plain surface steps, not bespoke values — alias them so they
     cannot drift off the scale again when the surface ladder is re-derived. */
  --clinical-chat-document: var(--surface-inset);
  --clinical-chat-table-header: var(--surface-subtle);
  --clinical-chat-ready: var(--success);

  /* Favourite type chips — categorical, not semantic status. Chroma is capped
     and lightness matched across the six so an identity chip can never
     out-shout a status badge: status always wins the attention contest. */
  --type-document: #3a5a94;
  --type-document-soft: #f0f4fa;
  --type-document-border: #d3dfef;
  --type-table: #2f6b57;
  --type-table-soft: #eef5f2;
  --type-table-border: #cfe3da;
  --type-search: #4a5568;
  --type-search-soft: #f4f5f7;
  --type-search-border: #dfe2e8;
  --type-source: #634f8f;
  --type-source-soft: #f4f1fa;
  --type-source-border: #ded6ee;
  --type-service: #2b6474;
  --type-service-soft: #eaf4f7;
  --type-service-border: #c4dfe7;
  --type-form: #7d5a2c;
  --type-form-soft: #f8f4ec;
  --type-form-border: #e8dbc4;

  /* Semantic triads (text / background / border), on-white for light mode.
     These all sat in one 4.6–5.2:1 band, so nothing read as more urgent than
     anything else. Every -text step now clears 5.5:1 on its own -bg and danger
     is clearly the highest of the four. */
  --info-text: #1c4fbf;
  --info-bg: #eff4ff;
  --info-border: #b2ccff;
  --success-text: #0c6b41;
  --success-bg: #ecfdf3;
  --success-border: #abefc6;
  --warning-text: #8a4d05;
  --warning-bg: #fef7ec;
  --warning-border: #f5d9a8;
  --danger-text: #a3190f;
  --danger-bg: #fef3f2;
  --danger-border: #fda29b;
  --danger-solid: #a3190f;
  --danger-solid-hover: #85140d;
  --danger-solid-active: #6f120c;
  --danger-solid-contrast: #ffffff;
  --print-furniture-gap: 4mm;

  --info: var(--info-text);
  --info-soft: var(--info-bg);
  --success: var(--success-text);
  --success-soft: var(--success-bg);
  --warning: var(--warning-text);
  --warning-soft: var(--warning-bg);
  --danger: var(--danger-text);
  --danger-soft: var(--danger-bg);

  /* Categorical tone scale — taxonomy/pathway dots only. NEVER semantic: kept
     visually distinct from the role tokens (success/danger/warning/info) and
     the brand accent so green/blue/sky keep their meanings. Each tone ships a
     complete text/-soft/-border triad so chips never hand-roll their own wash,
     and chroma is capped to match the --type-* identity set. */
  --tone-purple: #634f8f;
  --tone-purple-soft: #f4f1fa;
  --tone-purple-border: #ded6ee;
  --tone-indigo: #43508f;
  --tone-indigo-soft: #f0f2fa;
  --tone-indigo-border: #d6dcef;
  --tone-rose: #8a4a7d;
  --tone-rose-soft: #f9f0f6;
  --tone-rose-border: #eed6e6;
  --tone-slate: #4a5568;
  --tone-slate-soft: #f4f5f7;
  --tone-slate-border: #dfe2e8;

  /* WCAG exempts disabled controls from contrast, but a clinician still has to
     read WHICH action is unavailable — so this clears 3:1 rather than 2.5:1. */
  --disabled: #8794a8;
  --focus: var(--clinical-accent);
  --overlay-backdrop: rgb(4 8 14 / 56%);
  --z-overlay: 80;
  --z-popover: 95;
  --z-modal: 100;
  --z-toast: 110;
  --panel-gloss: color-mix(in srgb, var(--surface-lux) 82%, transparent);

  /* Selection emphasis: crisp accent ring + shadow tinted to the same hue as
     the elevation ladder (these were the last flat-grey shadows in the set). */
  --glow-primary: 0 0 0 1px color-mix(in srgb, var(--clinical-accent) 40%, transparent), 0 8px 20px rgb(11 42 56 / 10%);
  --glow-soft: 0 0 0 1px color-mix(in srgb, var(--clinical-accent) 28%, transparent), 0 4px 12px rgb(11 42 56 / 8%);

  /* Elevation ladder. --e0 … --e4 is the vocabulary: one monotonic sequence
     that sorts by name, hue-tinted rather than flat grey, with negative spread
     so a shadow pulls inward instead of bleeding past its own box. Reach for a
     tier, never a hand-rolled `shadow-[0_…]`.
       e0  flush        e1  resting hairline   e2  cards, popovers
       e3  hover / lifted chrome               e4  modals, sheets, drawers */
  --e0: none;
  --e1: 0 1px 2px rgb(11 42 56 / 7%);
  --e2: 0 1px 2px rgb(11 42 56 / 5%), 0 4px 10px -2px rgb(11 42 56 / 8%);
  --e3: 0 2px 4px rgb(11 42 56 / 5%), 0 10px 24px -6px rgb(11 42 56 / 11%);
  --e4: 0 4px 8px rgb(11 42 56 / 5%), 0 24px 48px -12px rgb(11 42 56 / 15%);

  /* Role aliases onto the ladder. Keep these pointing AT a tier — the previous
     hand-tuned values produced five effects that did not sort by name. The
     resting-hairline role is gone: its call sites reach for --e1 directly. */
  --shadow-card: var(--e2);
  --shadow-soft: var(--e2);
  --shadow-hover: var(--e3);
  --shadow-elevated: var(--e4);
  /* Floating overlay surfaces (menus, popovers). Aliased to the elevated tier
     because that is what the existing production popovers already use. */
  --shadow-overlay: var(--e4);
  --shadow-lux: inset 0 1px 0 rgb(255 255 255 / 90%), var(--e4);
  --shadow-inset: inset 0 1px 0 rgb(255 255 255 / 58%);
  /* Active left-rail marker (nav/list "current" indicator). One token so the
     accent rail is a consistent 2px everywhere instead of hand-inlined at 2px/3px. */
  --shadow-rail-active: inset 2px 0 0 var(--clinical-accent);
  /* Mode-nav collapsed control: a surface lifted off the header. */
  --shadow-lift: 0 1px 2px rgb(12 24 34 / 8%), 0 2px 6px rgb(12 24 34 / 5%);
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
  /* Phone/sm header chrome inset; matches mode-home px-4. Referenced by both
     the layered .edge-glass-header base and the unlayered max-width:639px
     guard so the values cannot drift apart. lg overrides to 1.5rem. */
  --header-edge-pad: 1rem;
  /* Distance from `.mode-nav__bar`'s box edge to the first tab's INK: the
     bar's own `px-1` plus the slot's `px-3`. It happens to equal the base
     header gutter, which is why phone alignment was already correct. The mode
     nav subtracts it from its gutter and adds it back to its max-width so the
     ink — not the box — lands on the header's content edge at every width. */
  --mode-nav-ink-offset: 1rem;
  /* Borderless app-shell/header height (the min-h-14 bar). Page shells fill the
     viewport below it via calc(100dvh - var(--shell-header-h)); one token so the
     header height and those page-fill floors cannot silently drift apart. */
  --shell-header-h: 4rem;
  /* Server-stable default for the phone overlay header's content clearance.
     `usePhoneOverlayChromeReserve` refines this to the measured stack height in
     a layout effect, but the property must never be absent: the overlay header
     is out of flow, so an unset value paints the first content underneath the
     chrome and then shifts it down at hydration — the cold-load jump the
     overlay switch exists to remove.

     The top term must be `max(0.5rem, …)`, not the bare inset. An overlay
     header pads its top with `pt-[max(0.5rem,var(--safe-area-top))]`
     (master-search-header.tsx) while `--shell-header-h` covers the inner
     `min-h-14` bar plus its `pb-2`. Seeding the bare inset therefore
     under-reserves by `max(0, 0.5rem - safe-area-top)` — nothing on a notched
     iPhone, but a full 8px on any phone reporting no top inset (Android, and
     Playwright's default emulation), which the layout effect then corrects
     after paint. That is the same cold-load shift in miniature.

     Exact for routes without a `header-collapse-addon` row; addon routes
     refine by that row's height. */
  --phone-overlay-chrome-h: calc(max(0.5rem, var(--safe-area-top)) + var(--shell-header-h));
  /* Keep in sync with mobile-composer-reserve.ts (phone dock clearance). */
  --keyboard-height: 0px;
  --phone-dock-hidden-pad: 0rem;
  --phone-dock-differentials-compare-clearance: 12.5rem;
  --phone-dock-differentials-compare-compact-clearance: 12.25rem;
  /* Patient details is a single ~3rem row + 0.5rem gap above the pill, so it
     clears roughly 3.5rem less than the Compare bar. */
  --phone-dock-patient-details-clearance: 9rem;
  --phone-dock-patient-details-compact-clearance: 8.75rem;
  --patient-details-fab-gap: 0.5rem;
  --patient-details-fab-padding: 0.3125rem 0.5rem 0.3125rem 1rem;
  --patient-details-fab-count-size: 1.625rem;
  --patient-details-fab-count-padding: 0.375rem;
  /* Radius tokens are the single source of truth in @theme above (they also
     generate the rounded-* utilities); do not redefine them here or var() and
     the utilities drift apart. */
  /* Motion ladder — exact observed production timings (Wave 4 Arch).
     Phone-chrome hide=240ms / reveal=200ms must stay exact (search-chrome-behaviour). */
  --duration-instant: 100ms;
  --duration-fast: 120ms;
  --duration-quick: 150ms;
  --duration-base: 180ms;
  --duration-moderate: 200ms;
  --duration-slow: 240ms;
  --duration-deliberate: 300ms;
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);
  /* CSS keyword ease-out equivalent — do not conflate with chrome-reveal / soft.
     Named --ease-out-keyword (not --ease-out): Tailwind v4 owns --ease-out inside
     @layer theme for the ease-out utility and --default-transition-timing-function;
     an unlayered :root --ease-out would silently retarget every bare transition. */
  --ease-out-keyword: cubic-bezier(0, 0, 0.58, 1);
  /* Phone-chrome hide vs reveal: two tokens, never one (search-chrome-behaviour). */
  --ease-chrome-hide: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-chrome-reveal: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: light;
}

.dark {
  /* Dark neutral ramp (inverted): black-polish canvas to near-white ink. */
  --neutral-0: #060708;
  --neutral-50: #0b0d0f;
  --neutral-100: #101214;
  --neutral-200: #171a1d;
  --neutral-300: #23282c;
  --neutral-400: #3b454b;
  --neutral-500: #7c858f;
  --neutral-600: #a4adb7;
  --neutral-700: #cbd1d8;
  --neutral-800: #e5e8ec;
  --neutral-900: #f4f6f8;
  --neutral-950: #fbfcfd;

  /* Clinical accent (Clinical Sky), brightened for dark surfaces. Dark holds
     the same hue as light rather than drifting toward cyan-green, so the accent
     reads as one colour across themes. */
  --primary-50: #08203a;
  --primary-100: #0d2b48;
  --primary-200: #123556;
  --primary-300: #1c4f79;
  --primary-400: #3a80c0;
  --primary-500: #74bdf0;
  --primary-600: #92cdf5;
  --primary-700: #a9d8f8;
  --primary-800: #c4e5fb;
  --primary-900: #ddf0fd;

  /* Same ordered five-step surface scale as light, inverted. */
  --background: #060708;
  --app-shell: #090a0c;
  --surface: #101315;
  --surface-chrome: #0b0d0f;
  --surface-raised: #171b1e;
  --surface-subtle: #0d0f11;
  --surface-inset: #08090b;
  --surface-glass: rgb(6 7 8 / 78%);
  --surface-highlight: rgb(255 255 255 / 5%);
  --surface-lux: #1c2124;
  --surface-wash: #0a0c0e;
  --text: var(--neutral-900);
  --text-heading: var(--neutral-950);
  --text-muted: var(--neutral-600);
  --text-soft: var(--neutral-500);
  --decoration-soft: var(--neutral-500);
  --text-placeholder: var(--neutral-600);
  /* Per-theme values, not neutral-ramp aliases: tracking --neutral-300 left the
     dark border at ~1.35:1 against --surface, i.e. effectively invisible. */
  --border: #2b3136;
  --border-strong: #3b444b;
  --border-lux: rgba(255, 255, 255, 0.1);
  /* Dark halves both highlight rings — the exact values the retired
     `dark:ring-*` overrides carried. See the :root declarations. */
  --ring-highlight: color-mix(in oklab, var(--border-strong) 10%, transparent);
  --ring-glass: rgb(255 255 255 / 10%);

  --primary: var(--primary-500);
  --primary-strong: var(--primary-700);
  --primary-soft: #123556;
  --primary-contrast: #08203a;

  --command: #f5f7f7;
  --command-hover: #e6e9e8;
  --command-contrast: #060708;

  --clinical-accent: var(--primary-500);
  --clinical-accent-hover: var(--primary-600);
  --clinical-accent-active: var(--primary-700);
  --clinical-accent-strong: var(--primary-700);
  --clinical-accent-soft: var(--primary-soft);
  --clinical-accent-border: #235a7d;
  --clinical-accent-contrast: #082e4d;
  --search-band-badge-bg: color-mix(in oklab, var(--clinical-accent) 16%, transparent);

  --clinical-chat-sand: #2d2418;
  --clinical-chat-sand-border: #5a4427;
  --clinical-chat-sand-border-strong: #806034;
  --clinical-chat-document: var(--surface-inset);
  --clinical-chat-table-header: var(--surface-subtle);
  --clinical-chat-ready: var(--success);

  /* Identity anchors capped to match light, and their washes re-derived under
     the capped anchors — the old raw-Tailwind -soft/-border pairs were more
     saturated than the text sitting on them. */
  --type-document: #9db6dc;
  --type-document-soft: #1a2438;
  --type-document-border: #2b3d5e;
  --type-table: #93c7b3;
  --type-table-soft: #152820;
  --type-table-border: #2a4d3d;
  --type-search: #c3c9d4;
  --type-search-soft: #1e222a;
  --type-search-border: #3a4150;
  --type-source: #bdb0da;
  --type-source-soft: #241f33;
  --type-source-border: #3c3352;
  --type-service: #96c6d4;
  --type-service-soft: #16262c;
  --type-service-border: #2b4650;
  --type-form: #d6bd8a;
  --type-form-soft: #2b2317;
  --type-form-border: #4d4028;

  --info-text: #89c0f0;
  --info-bg: #122c4c;
  --info-border: #2c537f;
  --success-text: #7de0a3;
  --success-bg: #153f2a;
  --success-border: #24794f;
  --warning-text: #f2c45a;
  --warning-bg: #3d2f14;
  --warning-border: #725e23;
  --danger-text: #ff9ca4;
  --danger-bg: #401c24;
  --danger-border: #7f2e36;
  --danger-solid: #b42318;
  --danger-solid-hover: #d92d20;
  --danger-solid-active: #912018;
  --danger-solid-contrast: #ffffff;

  --info: var(--info-text);
  --info-soft: var(--info-bg);
  --success: var(--success-text);
  --success-soft: var(--success-bg);
  --warning: var(--warning-text);
  --warning-soft: var(--warning-bg);
  --danger: var(--danger-text);
  --danger-soft: var(--danger-bg);

  /* Categorical tone scale, brightened for dark surfaces (categorical only).
     Complete triads, chroma capped to match the --type-* identity set. */
  --tone-purple: #b0a0d8;
  --tone-purple-soft: #2a2540;
  --tone-purple-border: #3d3557;
  --tone-indigo: #9aa5dd;
  --tone-indigo-soft: #232842;
  --tone-indigo-border: #343b5a;
  --tone-rose: #d99cc8;
  --tone-rose-soft: #3a2434;
  --tone-rose-border: #52344a;
  --tone-slate: #9aa4b4;
  --tone-slate-soft: #22262d;
  --tone-slate-border: #333a44;

  --disabled: #626c7a;
  --focus: var(--clinical-accent);
  --overlay-backdrop: rgb(0 0 0 / 72%);
  --panel-gloss: color-mix(in srgb, var(--surface-lux) 82%, transparent);

  --glow-primary: 0 0 0 1px color-mix(in srgb, var(--clinical-accent) 45%, transparent), 0 8px 24px rgb(0 0 0 / 45%);
  --glow-soft: 0 0 0 1px color-mix(in srgb, var(--clinical-accent) 32%, transparent), 0 6px 16px rgb(0 0 0 / 42%);

  /* Same ladder as light. Dark lifts with a top highlight rather than more
     black — piling on opacity reads as a smudge, not as elevation. */
  --e0: none;
  --e1: inset 0 1px 0 rgb(255 255 255 / 4%), 0 1px 2px rgb(0 0 0 / 40%);
  --e2: inset 0 1px 0 rgb(255 255 255 / 5%), 0 4px 12px -2px rgb(0 0 0 / 45%);
  --e3: inset 0 1px 0 rgb(255 255 255 / 6%), 0 8px 20px -6px rgb(0 0 0 / 55%);
  --e4: inset 0 1px 0 rgb(255 255 255 / 7%), 0 20px 40px -12px rgb(0 0 0 / 62%);

  --shadow-card: var(--e2);
  --shadow-soft: var(--e2);
  --shadow-hover: var(--e3);
  --shadow-elevated: var(--e4);
  /* Floating overlay surfaces (menus, popovers). Aliased to the elevated tier
     because that is what the existing production popovers already use. */
  --shadow-overlay: var(--e4);
  --shadow-lux: var(--e4);
  --shadow-inset: inset 0 1px 0 rgb(255 255 255 / 4%);
  /* A drop shadow does not read on a near-black ground, so the lifted control
     is described by an inner top highlight instead. */
  --shadow-lift: inset 0 1px 0 rgb(255 255 255 / 7%), 0 2px 6px rgb(0 0 0 / 45%);
  color-scheme: dark;
}

/* Reset and base document styles */
* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  min-height: 100%;
  min-height: 100svh;
  min-height: 100dvh;
  background-color: var(--background);
  overflow-x: clip;
  overscroll-behavior-x: none;
  scroll-padding-top: calc(4rem + env(safe-area-inset-top));
}

/*
 * Interface density scales the rem baseline so every rem-based size shifts
 * together. "Comfortable" is the browser default (16px) and sets no attribute,
 * so the untouched default experience is unchanged. The attribute is applied on
 * <html> before first paint (layout.tsx inline script) and kept in sync by
 * useAppPreferences. The unlayered 16px mobile input floor above still wins for
 * form controls so iOS never zooms.
 */
html[data-density="compact"] {
  font-size: 15px;
}

html[data-density="spacious"] {
  font-size: 17px;
}

body {
  min-height: 100%;
  min-height: 100svh;
  min-height: 100dvh;
  background: var(--background);
  color: var(--text);
  font-family: var(--font-geist-sans), Arial, Helvetica, sans-serif;
  font-feature-settings:
    "liga" 1,
    "calt" 1,
    "ss01" 1;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-x: none;
}

/* Category accent delivery.
   ------------------------------------------------------------------
   A card names its category with `data-category-accent`, and reads the colour
   back through --cat-accent / --cat-soft / --cat-border. Three reasons this is
   an attribute→variable indirection rather than per-category utility classes:

   1. Tailwind's scanner only sees class strings that appear literally in the
      source, so `bg-[color:var(--type-${accent}-soft)]` silently produces no
      CSS. Every consumer here writes the literal `var(--cat-soft)` instead.
   2. Light, dark AND forced-colors come for free: each value aliases an
      existing triad that all three themes already remap, so a new category
      never needs a fourth declaration site to stay legible in high contrast.
   3. It replaces the inline `style={{ backgroundColor: theme.soft }}` the
      factsheet cards used, which bypassed the class contract entirely.

   Every accent below resolves to a NON-semantic triad. Nothing here may point
   at --danger / --warning / --success / --info: those belong to the six-tone
   badge system, where the colour is the meaning. A category is not a status.
   Held by tests/design-token-contract.test.ts. */
[data-category-accent="document"] {
  --cat-accent: var(--type-document);
  --cat-soft: var(--type-document-soft);
  --cat-border: var(--type-document-border);
}

[data-category-accent="table"] {
  --cat-accent: var(--type-table);
  --cat-soft: var(--type-table-soft);
  --cat-border: var(--type-table-border);
}

[data-category-accent="search"] {
  --cat-accent: var(--type-search);
  --cat-soft: var(--type-search-soft);
  --cat-border: var(--type-search-border);
}

[data-category-accent="source"] {
  --cat-accent: var(--type-source);
  --cat-soft: var(--type-source-soft);
  --cat-border: var(--type-source-border);
}

[data-category-accent="service"] {
  --cat-accent: var(--type-service);
  --cat-soft: var(--type-service-soft);
  --cat-border: var(--type-service-border);
}

[data-category-accent="form"] {
  --cat-accent: var(--type-form);
  --cat-soft: var(--type-form-soft);
  --cat-border: var(--type-form-border);
}

[data-category-accent="purple"] {
  --cat-accent: var(--tone-purple);
  --cat-soft: var(--tone-purple-soft);
  --cat-border: var(--tone-purple-border);
}

[data-category-accent="indigo"] {
  --cat-accent: var(--tone-indigo);
  --cat-soft: var(--tone-indigo-soft);
  --cat-border: var(--tone-indigo-border);
}

[data-category-accent="rose"] {
  --cat-accent: var(--tone-rose);
  --cat-soft: var(--tone-rose-soft);
  --cat-border: var(--tone-rose-border);
}

[data-category-accent="slate"] {
  --cat-accent: var(--tone-slate);
  --cat-soft: var(--tone-slate-soft);
  --cat-border: var(--tone-slate-border);
}

[data-category-accent="clinical"] {
  --cat-accent: var(--clinical-accent);
  --cat-soft: var(--clinical-accent-soft);
  --cat-border: var(--clinical-accent-border);
}

/* Fallback for a surface that opts into the card recipe without naming a
   category — the accent collapses to the product accent rather than to an
   unresolved variable, so an omitted attribute degrades to today's look. */
:root {
  --cat-accent: var(--clinical-accent);
  --cat-soft: var(--clinical-accent-soft);
  --cat-border: var(--clinical-accent-border);
}

@layer base {
  /* Interactive element defaults */
  button,
  input,
  textarea,
  select {
    font: inherit;
  }
}

/*
 * iOS Safari zooms the viewport when a focused form control renders below 16px.
 * This rule is intentionally unlayered so it wins over Tailwind's layered
 * text-* utilities, giving every control a 16px floor on small screens
 * (search field, scope filter, PDF page input) without per-call-site edits.
 */
@media (max-width: 640px) {
  input,
  select,
  textarea {
    font-size: 16px;
  }
}

button,
a,
summary,
input,
textarea,
select,
.touch-card {
  outline: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* One focus owner per interaction. Buttons and links use a single external
   outline; form fields draw the same outline inside their own box so scroll
   containers and sheets cannot clip it at an edge. Keeping these unlayered is
   intentional: it prevents component-level `focus:ring-*` utilities from
   stacking a second halo on top of the shared treatment. */
/* Deliberately outline-only: no companion box-shadow ring. The reviewed design
   system proposed adding a 2px `--surface` spacer shadow here, on the grounds
   that `--focus` IS the accent and the ring therefore sat accent-on-accent.
   That does not reproduce in this codebase — `outline-offset` paints OUTSIDE
   the border box, so the gap shows the ancestor's background (a surface), not
   the control's own accent fill. Adding the shadow only stacked a second
   affordance, which the rule above exists to prevent, and flattened the
   control's resting elevation while focused. See the "focus is singular"
   assertion in tests/ui-smoke.spec.ts. */
:where(button, a, summary, input[type="checkbox"], input[type="radio"], input[type="range"]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Controls that sit flush inside clipped sheets keep the shared focus outline
   inside their own border box so no edge of the ring is cut off. */
.focus-ring-contained:focus-visible {
  outline-offset: -2px;
}

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select):focus-visible {
  /* Hairline on the field edge, not an inset accent rectangle. The previous
     inset offset plus solid `--focus` read as a default browser ring and, on
     transparent inputs nested in a rounded search shell, drew a sharp box
     around the text while the icon sat outside it. */
  box-shadow: var(--shadow-inset);
  outline: 1px solid color-mix(in srgb, var(--clinical-accent) 32%, var(--border-strong));
  outline-offset: 0;
}

/* Standalone field recipe (`fieldControl`). Tailwind `outline-none` loses to
   the unlayered rule above; this is the real owner. Focus is a quiet border
   shift — no second outline. */
input.field-control:focus-visible,
textarea.field-control:focus-visible,
select.field-control:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--clinical-accent) 38%, var(--border-strong));
}

input.field-control[aria-invalid="true"]:focus-visible,
textarea.field-control[aria-invalid="true"]:focus-visible,
select.field-control[aria-invalid="true"]:focus-visible {
  border-color: var(--danger);
}

/* Nested search: the rounded shell owns focus. Inner `outline-none` utilities
   cannot suppress the shared field rule, which is why compare / filter /
   catalogue pickers grew a bright rectangle around the text. Border only —
   do not replace resting elevation on tools / calculator / document pills,
   the same failure the composer comment forbids. */
.search-shell:focus-within {
  border-color: color-mix(in srgb, var(--clinical-accent) 34%, var(--border-strong));
}

.search-shell-input:focus,
.search-shell-input:focus-visible {
  outline: none;
  box-shadow: none;
}

button,
a,
summary {
  transition-property: color, background-color, border-color, opacity, box-shadow, transform;
  transition-duration: var(--duration-fast);
  transition-timing-function: var(--ease-out-soft);
}

/* Tactile press only on button-like controls. Applying it to every `a` nudged
   inline body/citation links down 1px on tap, which reads oddly for text links. */
button:active,
summary:active {
  transform: translateY(1px);
}

summary::-webkit-details-marker {
  display: none;
}

::selection {
  background: var(--primary-soft);
  color: var(--primary-strong);
}

.dark ::selection {
  background: var(--primary-soft);
  color: #ecfeff;
}

/*
 * Header chrome — LAYERED. These classes live in @layer components so
 * Tailwind utilities on the same element win (the header/mode-pill was the
 * source of the recurring overlap/shadow bugs). Call-site shadow utilities
 * were reconciled to the class values (verified byte-identical via
 * scripts/capture-chrome-parity.ts). Responsive padding overrides are nested
 * here so the whole class stays in one layer.
 *
 * The COMPOSER PILL surface below is layered, while all composer-interior
 * chrome is owned by the unlayered semantic classes below. Recipe exports only
 * name those classes; they no longer duplicate size, state, or paint utilities.
 */
@layer components {
  .edge-glass-header {
    isolation: isolate;
    /* Uses --header-edge-pad (1rem) so phone icons align with mode-home px-4.
       Keep safe-area max() so notched devices never under-inset. The unlayered
       max-width:639px block below must also use this token — unlayered rules
       beat @layer components, so a literal there would reintroduce drift. */
    padding-left: max(var(--header-edge-pad), var(--safe-area-left));
    padding-right: max(var(--header-edge-pad), var(--safe-area-right));
    /* Wide layouts retain the glass treatment. Phones override this with a
       solid surface below: a translucent scrim extending past the bar veils
       mode-home titles instead of behaving like bounded chrome. */
    background: color-mix(in srgb, var(--surface) 72%, transparent);
    box-shadow: none;
  }

  .universal-header {
    background: color-mix(in srgb, var(--surface) 72%, transparent);
  }

  .modal-landscape-container {
    padding-left: max(1rem, var(--safe-area-left));
    padding-right: max(1rem, var(--safe-area-right));
  }

  .universal-header-mode-button {
    border-color: var(--border);
    background: var(--surface);
    box-shadow: var(--e1);
  }

  .universal-header-icon-control {
    border-color: var(--border);
    background: var(--surface);
    box-shadow: none;
  }

  .universal-header-icon-control:hover {
    border-color: var(--border-strong);
    background: var(--surface-subtle);
  }

  .dark .universal-header-mode-button {
    box-shadow: var(--e1);
  }

  .dark .universal-header-icon-control {
    box-shadow: none;
  }

  /* Desktop header padding (moved in from the shared @media blocks below so
   the whole .edge-glass-header class is layered together). Base/sm share
   --header-edge-pad. */
  @media (min-width: 1024px) {
    .edge-glass-header {
      padding-left: max(1.5rem, var(--safe-area-left));
      padding-right: max(1.5rem, var(--safe-area-right));
    }
  }

  /* InPageNavHeader portals into the collapse addon — a sibling of
     .edge-glass-header — so none of that gutter is inherited. Tokenize the
     phone inset here; sm+ keeps Tailwind sm:px-6 / lg:px-8, so this must not
     apply above 639px. The unlayered max-width:639px guard below repeats the
     same tokens so a later literal cannot pin the action pill to the bezel. */
  @media (max-width: 639px) {
    .inpage-nav-header {
      padding-left: max(var(--header-edge-pad), var(--safe-area-left));
      padding-right: max(var(--header-edge-pad), var(--safe-area-right));
    }
  }
}

/* Shared-home hero copy reserve.
 *
 * The mode toggle rewrites the title and subtitle in place, so the copy block
 * must already be as tall as the tallest copy any of the 15 modes can produce
 * or the composer below it jumps. That reserve used to sit on the heading and
 * the subtitle *individually* (`min-h-[2lh]` on each), which is why the pair
 * read as two unrelated lines: with a one-line title, half of each element's
 * unused reserve collected between them. Measured at 393px, the heading sat
 * 27.1px from its own subtitle while the medallion sat 6px away — the small
 * text was further from the large text than the group boundary above it.
 *
 * Reserving once, on the wrapping group, keeps the pair at its declared 4px
 * and moves the slack to the outside of the pair where it belongs.
 *
 * The bands are measured, not estimated — every title/subtitle pair in
 * src/lib/ui-copy.ts rendered in this hero across 320–440px:
 *   ≤322px    2 title lines + 2 subtitle lines ("Which specifier fits?")
 *   323–411   2 title lines + 1 subtitle line  ("What explains the pattern?")
 *   ≥412      1 + 1 — every mode fits on one line
 * A single flat reserve therefore had to assume the 320px worst case at every
 * phone width, which spent 20px of dead space at 393px and 49px at 430px for
 * no stability gain. tests/shared-home-empty-state.dom.test.tsx pins the band
 * structure so a copy edit that pushes a mode onto another line fails loudly
 * rather than silently reintroducing the jump. */
:root {
  --mode-home-copy-reserve: calc(2 * var(--text-hero) * var(--leading-display) + 0.25rem + 1.25rem);
}

@media (max-width: 322px) {
  :root {
    --mode-home-copy-reserve: calc(2 * var(--text-hero) * var(--leading-display) + 0.25rem + 2 * 1.25rem);
  }
}

@media (min-width: 412px) {
  :root {
    --mode-home-copy-reserve: calc(var(--text-hero) * var(--leading-display) + 0.25rem + 1.25rem);
  }
}

.mode-home-composer-slot {
  width: min(100%, clamp(19rem, 90vw, 52rem));
  max-width: calc(100vw - 1rem - var(--safe-area-left) - var(--safe-area-right));
  margin-inline: auto;
  overflow: visible;
}

.universal-home-search-edge {
  width: 100%;
}

.universal-top-search-edge {
  width: min(100%, clamp(19rem, 88vw, 52rem));
  max-width: calc(100vw - 1rem - var(--safe-area-left) - var(--safe-area-right));
}

.floating-composer-edge {
  left: max(0.75rem, var(--safe-area-left));
  right: max(0.75rem, var(--safe-area-right));
  bottom: max(0.75rem, var(--safe-area-bottom));
}

.answer-footer-search-edge {
  bottom: max(0.45rem, calc(var(--safe-area-bottom) + 0.35rem));
}

/* Composer pill surface — LAYERED. The form carries the semantic
 * chat-composer-shell-base class plus this contextual surface. Interior input
 * and button chrome stays unlayered in the single-owner block below. */
@layer components {
  .answer-footer-search-pill {
    min-height: 3.25rem;
    gap: 0.375rem;
    border: 1px solid color-mix(in srgb, var(--border-strong) 80%, transparent);
    background: color-mix(in srgb, var(--surface) 97%, transparent);
    padding-inline: 0.375rem;
    box-shadow:
      0 1px 2px rgb(16 24 40 / 4%),
      0 8px 24px rgb(16 24 40 / 8%);
    backdrop-filter: blur(18px) saturate(140%);
    transition:
      border-color 180ms var(--ease-out-soft),
      box-shadow 180ms var(--ease-out-soft),
      transform 180ms var(--ease-spring);
  }
}

/* Top progressive-blur scrim behind the glass header — the SINGLE source of the
   bar's frost. The <header> itself must NOT carry a backdrop-filter: per Filter
   Effects L2 an element with backdrop-filter forms a backdrop root, and these
   nested passes would then sample the header's own paint instead of the page
   (redundant in Chromium, historically inert in WebKit). With the bar left as a
   pure translucent tint, the three masked passes below sample the real page in
   every engine: strongest at the physical top edge (status-bar/notch band via
   safe-area-inset-top), still firm across the bar, then a short fade that
   reaches TRUE ZERO before content rests (~85% of the scrim) so no veil sits on
   the first line at rest — mirroring how the bottom dock zeroes its
   content-facing edge. Lives INSIDE <header> (first child) so it translates
   away with the header on scroll-hide. Unlayered on purpose, like the rest of
   the positioning chrome (see the layering note above).

   AUTHORING RULE for every backdrop-filter in this file: write ONLY the
   unprefixed property. The CSS pipeline auto-generates the -webkit- pair in
   the built client stylesheet (verified in the served chunk), which is what
   covers prefix-only Safari <= 17. Hand-writing the -webkit- duplicate in
   source is what made Lightning CSS drop the whole property group — the
   historical tint-only-glass bug — and a guard test now rejects hand-authored
   -webkit-backdrop-filter declarations. */
.edge-glass-header-backdrop {
  pointer-events: none;
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: -1;
  height: max(6.5rem, calc(var(--safe-area-top) + 5.5rem));
  overflow: hidden;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--background) 42%, transparent) 0%,
    color-mix(in srgb, var(--background) 32%, transparent) 12%,
    color-mix(in srgb, var(--background) 18%, transparent) 34%,
    color-mix(in srgb, var(--background) 8%, transparent) 64%,
    transparent 88%
  );
  backdrop-filter: blur(14px) saturate(135%);
  mask-image: linear-gradient(180deg, black 0%, black 64%, rgb(0 0 0 / 45%) 74%, transparent 86%);
  -webkit-mask-image: linear-gradient(180deg, black 0%, black 64%, rgb(0 0 0 / 45%) 74%, transparent 86%);
}

.edge-glass-header-backdrop::before,
.edge-glass-header-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.edge-glass-header-backdrop::before {
  backdrop-filter: blur(20px) saturate(135%);
  mask-image: linear-gradient(180deg, black 0%, black 45%, transparent 72%);
  -webkit-mask-image: linear-gradient(180deg, black 0%, black 45%, transparent 72%);
}

.edge-glass-header-backdrop::after {
  backdrop-filter: blur(26px) saturate(140%);
  mask-image: linear-gradient(180deg, black 0%, black 26%, transparent 48%);
  -webkit-mask-image: linear-gradient(180deg, black 0%, black 26%, transparent 48%);
}

.answer-footer-search-backdrop {
  pointer-events: none;
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 0;
  height: max(6.5rem, calc(var(--safe-area-bottom) + 5.25rem));
  background: linear-gradient(
    180deg,
    transparent 0%,
    color-mix(in srgb, var(--background) 10%, transparent) 26%,
    color-mix(in srgb, var(--background) 32%, transparent) 62%,
    color-mix(in srgb, var(--background) 46%, transparent) 100%
  );
  backdrop-filter: blur(14px) saturate(130%);
  mask-image: linear-gradient(180deg, transparent 0%, black 32%, black 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 32%, black 100%);
}

/* Phone dock: full-bleed footer with progressive blur scrim behind pill + chips. */
.answer-footer-search-dock {
  --footer-scrim-height: max(10rem, calc(var(--safe-area-bottom) + 8.5rem));
}

.answer-footer-search-dock[data-footer-variant="compact"] {
  --footer-scrim-height: max(7rem, calc(var(--safe-area-bottom) + 5.5rem));
}

/* In-flow above the search pill inside the phone dock so scroll-hide
   translateY moves the Compare bar with the composer (no viewport-fixed jump). */
.differentials-mobile-compare-fab {
  pointer-events: none;
  position: relative;
  z-index: 10;
  display: flex;
  width: 100%;
  justify-content: center;
  margin-bottom: 0.5rem;
}

.differentials-mobile-compare-fab__button {
  pointer-events: auto;
  display: inline-flex;
  min-height: 3.25rem;
  max-width: min(100%, 36rem);
  align-items: center;
  gap: 0.625rem;
  border-radius: 9999px;
  border: 1px solid color-mix(in srgb, var(--clinical-accent), white 14%);
  background:
    radial-gradient(
      circle at 82% 0%,
      color-mix(in srgb, var(--clinical-accent-contrast) 20%, transparent),
      transparent 34%
    ),
    linear-gradient(135deg, color-mix(in srgb, var(--clinical-accent), white 7%), var(--clinical-accent));
  padding: 0.375rem 0.625rem 0.375rem 1.25rem;
  color: var(--clinical-accent-contrast);
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  box-shadow:
    0 18px 42px rgb(0 0 0 / 24%),
    0 0 0 1px color-mix(in srgb, var(--clinical-accent-contrast) 10%, transparent) inset;
  touch-action: manipulation;
  transition:
    transform 160ms var(--ease-spring),
    background-color 160ms var(--ease-out-soft),
    box-shadow 160ms var(--ease-out-soft);
}

.differentials-mobile-compare-fab__button:active {
  transform: translateY(1px) scale(0.99);
  transition: transform 160ms var(--ease-spring);
}

.differentials-mobile-compare-fab__button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.differentials-mobile-compare-fab__button--empty {
  border-color: var(--border-strong);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  color: var(--text-muted);
  font-weight: 800;
}

/* Medication surfaces: Patient details sits above the search pill in the dock,
   the same in-flow trick as the Compare bar so scroll-hide moves both together.
   Deliberately one row shorter and quieter than Compare: Compare is the primary
   call to action on its surface, this is a persistent context control. */
.patient-details-fab {
  pointer-events: none;
  position: relative;
  z-index: var(--z-raised, 10);
  display: flex;
  width: 100%;
  justify-content: center;
  margin-bottom: var(--patient-details-fab-gap);
}

.patient-details-fab__button {
  pointer-events: auto;
  display: inline-flex;
  /* 3rem is --spacing-tap, the production tap floor. Never reduce below it. */
  min-height: 3rem;
  max-width: min(100%, 36rem);
  align-items: center;
  gap: var(--patient-details-fab-gap);
  border-radius: var(--radius-pill, 9999px);
  border: 1px solid var(--border-strong);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  padding: var(--patient-details-fab-padding);
  color: var(--text-heading);
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  box-shadow: var(--e3);
  touch-action: manipulation;
  transition:
    transform var(--duration-quick) var(--ease-spring),
    background-color var(--duration-quick) var(--ease-out-soft),
    border-color var(--duration-quick) var(--ease-out-soft),
    box-shadow var(--duration-quick) var(--ease-out-soft);
}

/* Populated profile: the control becomes the accent so "a patient is loaded"
   is legible at a glance without reading the count. */
.patient-details-fab__button--active {
  border-color: color-mix(in srgb, var(--clinical-accent), white 14%);
  background:
    radial-gradient(
      circle at 82% 0%,
      color-mix(in srgb, var(--clinical-accent-contrast) 18%, transparent),
      transparent 34%
    ),
    linear-gradient(135deg, color-mix(in srgb, var(--clinical-accent), white 7%), var(--clinical-accent));
  color: var(--clinical-accent-contrast);
}

.patient-details-fab__button:active {
  transform: translateY(1px) scale(0.99);
  transition: transform var(--duration-quick) var(--ease-spring);
}

.patient-details-fab__button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.patient-details-fab__count {
  display: grid;
  height: var(--patient-details-fab-count-size);
  min-width: var(--patient-details-fab-count-size);
  place-items: center;
  border-radius: var(--radius-pill, 9999px);
  background: color-mix(in srgb, var(--clinical-accent-contrast) 20%, transparent);
  padding-inline: var(--patient-details-fab-count-padding);
  font-size: 0.75rem;
  font-weight: 800;
}

/* Bottom-docked composer: hint row + upward dropdown grow above the pill. */
.answer-footer-search-edge {
  overflow: visible;
}

.answer-footer-search-edge .universal-command-surface,
.answer-footer-search-edge .universal-command-surface > .relative {
  overflow: visible;
}

.answer-footer-search-edge[data-command-open="true"] .answer-footer-search-backdrop {
  height: max(18rem, calc(var(--safe-area-bottom) + 16rem));
}

.answer-footer-search-dock[data-command-open="true"] {
  --footer-scrim-height: max(22rem, calc(var(--safe-area-bottom) + 20rem));
}

.answer-footer-search-dock[data-command-open="true"][data-footer-variant="compact"] {
  --footer-scrim-height: max(18rem, calc(var(--safe-area-bottom) + 16rem));
}

.answer-footer-search-edge .universal-command-dropdown {
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
}

.answer-footer-search-dock .answer-footer-search-backdrop {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  top: auto;
  z-index: 0;
  height: var(--footer-scrim-height);
  overflow: hidden;
  /* Localized glass only: tint around the pill, then return to true zero at
     the physical edge. A high terminal tint reads as an opaque safe-area bar
     on light pages even though color-mix technically contains transparency.
     The 78%/96% pair holds that tint through the safe-area padding band
     below the pill and only releases to zero in the last 4% — a page card
     mid-scroll there previously read fully crisp under the pill (search-bar
     overlap defect, 2026-08-06), because the old 78% -> 100% taper gave up
     more than a fifth of the scrim's height with no coverage at all. */
  background: linear-gradient(
    180deg,
    transparent 0%,
    color-mix(in srgb, var(--background) 8%, transparent) 30%,
    color-mix(in srgb, var(--background) 28%, transparent) 58%,
    color-mix(in srgb, var(--background) 18%, transparent) 78%,
    color-mix(in srgb, var(--background) 18%, transparent) 96%,
    transparent 100%
  );
  backdrop-filter: blur(2px) saturate(130%);
  mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgb(0 0 0 / 32%) 26%,
    black 50%,
    rgb(0 0 0 / 45%) 78%,
    rgb(0 0 0 / 45%) 96%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgb(0 0 0 / 32%) 26%,
    black 50%,
    rgb(0 0 0 / 45%) 78%,
    rgb(0 0 0 / 45%) 96%,
    transparent 100%
  );
  opacity: 1;
  visibility: visible;
  transition:
    opacity 180ms var(--ease-out-soft),
    visibility 0s linear;
}

.answer-footer-search-dock .answer-footer-search-backdrop::before,
.answer-footer-search-dock .answer-footer-search-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.answer-footer-search-dock .answer-footer-search-backdrop::before {
  backdrop-filter: blur(6px) saturate(125%);
  mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgb(0 0 0 / 30%) 24%,
    black 48%,
    rgb(0 0 0 / 40%) 72%,
    rgb(0 0 0 / 40%) 95%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgb(0 0 0 / 30%) 24%,
    black 48%,
    rgb(0 0 0 / 40%) 72%,
    rgb(0 0 0 / 40%) 95%,
    transparent 100%
  );
}

.answer-footer-search-dock .answer-footer-search-backdrop::after {
  backdrop-filter: blur(12px) saturate(130%);
  mask-image: linear-gradient(
    180deg,
    transparent 0%,
    transparent 46%,
    black 64%,
    rgb(0 0 0 / 35%) 80%,
    rgb(0 0 0 / 35%) 97%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0%,
    transparent 46%,
    black 64%,
    rgb(0 0 0 / 35%) 80%,
    rgb(0 0 0 / 35%) 97%,
    transparent 100%
  );
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .answer-footer-search-dock .answer-footer-search-backdrop,
  .answer-footer-search-dock .answer-footer-search-backdrop::before,
  .answer-footer-search-dock .answer-footer-search-backdrop::after {
    backdrop-filter: none;
  }

  .answer-footer-search-dock .answer-footer-search-backdrop {
    background: linear-gradient(
      180deg,
      transparent 0%,
      color-mix(in srgb, var(--background) 16%, transparent) 34%,
      color-mix(in srgb, var(--background) 38%, transparent) 62%,
      color-mix(in srgb, var(--background) 20%, transparent) 80%,
      color-mix(in srgb, var(--background) 20%, transparent) 96%,
      transparent 100%
    );
  }

  /* No blur available: the glass header goes opaque so text never sits on
     un-frosted scrolled content, and the top scrim swaps to a stronger tint. */
  .edge-glass-header-backdrop,
  .edge-glass-header-backdrop::before,
  .edge-glass-header-backdrop::after {
    backdrop-filter: none;
  }

  .edge-glass-header-backdrop {
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--background) 92%, transparent) 0%,
      color-mix(in srgb, var(--background) 78%, transparent) 40%,
      color-mix(in srgb, var(--background) 45%, transparent) 72%,
      transparent 100%
    );
  }

  /* Layered so call-site utilities keep winning (the header-chrome layering
     contract above); same-layer source order beats the translucent base. */
  @layer components {
    .edge-glass-header,
    .universal-header {
      background: var(--surface);
    }
  }
}

@media (prefers-reduced-transparency: reduce) {
  .answer-footer-search-dock .answer-footer-search-backdrop,
  .answer-footer-search-dock .answer-footer-search-backdrop::before,
  .answer-footer-search-dock .answer-footer-search-backdrop::after {
    backdrop-filter: none;
  }

  .answer-footer-search-dock .answer-footer-search-backdrop {
    background: linear-gradient(
      180deg,
      transparent 0%,
      color-mix(in srgb, var(--background) 24%, transparent) 34%,
      color-mix(in srgb, var(--background) 52%, transparent) 62%,
      color-mix(in srgb, var(--background) 32%, transparent) 80%,
      color-mix(in srgb, var(--background) 32%, transparent) 96%,
      transparent 100%
    );
  }

  /* Reduced transparency: same opaque-bar treatment as the no-blur fallback. */
  .edge-glass-header-backdrop,
  .edge-glass-header-backdrop::before,
  .edge-glass-header-backdrop::after {
    backdrop-filter: none;
  }

  .edge-glass-header-backdrop {
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--background) 94%, transparent) 0%,
      color-mix(in srgb, var(--background) 82%, transparent) 42%,
      color-mix(in srgb, var(--background) 50%, transparent) 74%,
      transparent 100%
    );
  }

  /* Layered so call-site utilities keep winning (the header-chrome layering
     contract above); the fallback only needs to beat the layered translucent
     base, which same-layer source order gives it. */
  @layer components {
    .edge-glass-header,
    .universal-header {
      background: var(--surface);
    }
  }
}

@layer components {
  .answer-footer-search-pill:hover {
    border-color: var(--border-strong);
    box-shadow:
      0 1px 2px rgb(16 24 40 / 5%),
      0 8px 20px rgb(16 24 40 / 9%),
      0 24px 56px rgb(16 24 40 / 14%);
  }

  .answer-footer-search-pill:focus-within {
    border-color: color-mix(in srgb, var(--clinical-accent) 38%, var(--border-strong));
    box-shadow:
      0 0 0 3px color-mix(in srgb, var(--clinical-accent) 16%, transparent),
      0 8px 20px rgb(16 24 40 / 8%),
      0 20px 48px rgb(16 24 40 / 12%);
  }
}

.answer-footer-search-pill-open {
  border-color: color-mix(in srgb, var(--clinical-accent) 38%, var(--border-strong));
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--clinical-accent) 10%, transparent),
    0 8px 20px rgb(16 24 40 / 8%),
    0 22px 52px rgb(16 24 40 / 14%);
}

.answer-footer-search-pill-open[data-menu-placement="up"] {
  border-radius: 999px;
}

.answer-footer-search-pill-open[data-menu-placement="down"] {
  border-radius: 999px;
}

.mode-action-surface {
  --mode-action-max-height: min(72dvh, 34rem);
  --mode-action-body-max-height: min(54dvh, 24rem);
  transform-origin: center bottom;
}

.mode-action-surface[data-placement="down"] {
  transform-origin: center top;
}

/* Single anchor caret, centred on the "+" trigger. Detached surfaces are anchored
   to the composer pill so a fixed offset works; integrated surfaces pass the exact
   trigger centre via --mode-action-caret-left (set inline from updatePlacement). */
.mode-action-surface[data-placement="up"]::after {
  content: "";
  position: absolute;
  bottom: -0.42rem;
  left: var(--mode-action-caret-left, 2.4rem);
  z-index: 2;
  width: 0.9rem;
  height: 0.9rem;
  transform: translateX(-50%) rotate(45deg);
  border: 1px solid color-mix(in srgb, var(--border-lux) 86%, transparent);
  border-left: 0;
  border-top: 0;
  border-bottom-right-radius: 0.18rem;
  background: var(--surface-raised);
  box-shadow: 5px 5px 14px rgb(15 37 48 / 6%);
}

.mode-action-surface[data-placement="down"]::before {
  content: "";
  position: absolute;
  top: -0.42rem;
  left: var(--mode-action-caret-left, 2.4rem);
  z-index: 2;
  width: 0.9rem;
  height: 0.9rem;
  transform: translateX(-50%) rotate(45deg);
  border: 1px solid color-mix(in srgb, var(--border-lux) 86%, transparent);
  border-right: 0;
  border-bottom: 0;
  border-top-left-radius: 0.18rem;
  background: var(--surface-raised);
  box-shadow: -5px -5px 14px rgb(15 37 48 / 6%);
}

.mode-action-panel {
  max-height: var(--mode-action-max-height);
  backdrop-filter: blur(18px) saturate(140%);
}

.mode-action-surface[data-placement="up"] .mode-action-panel {
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
}

.mode-action-surface[data-placement="down"] .mode-action-panel {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}

.mode-action-mode-option:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Cap scrolling only inside the anchored popover surface, which defines
   --mode-action-body-max-height. Sheet/dialog hosts leave the variable unset;
   applying max-height there would create a nested non-capping scroll region. */
.mode-action-surface .mode-action-body {
  max-height: var(--mode-action-body-max-height);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mode-action-mode-option {
  display: grid;
  min-height: 3.2rem;
  width: 100%;
  grid-template-columns: 2.1rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  padding: 0.45rem 0.55rem;
  text-align: left;
  color: var(--text-muted);
  transition:
    background-color 150ms var(--ease-out-soft),
    border-color 150ms var(--ease-out-soft),
    color 150ms var(--ease-out-soft);
}

.mode-action-mode-option:hover {
  border-color: var(--border);
  background: var(--surface-subtle);
  color: var(--text);
}

.mode-action-mode-option-active {
  border-color: var(--clinical-accent-border);
  background: var(--clinical-accent-soft);
  color: var(--text-heading);
}

.mode-action-mode-option-icon {
  display: grid;
  height: 2rem;
  width: 2rem;
  place-items: center;
  border: 1px solid var(--clinical-accent-border);
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--clinical-accent-soft) 72%, var(--surface-lux));
  color: var(--clinical-accent);
}

/* Composer primitives are intentionally unlayered because inputs/buttons are
   governed by the global element resets. Their exported TypeScript recipes are
   class handles only, making this block the single owner of chrome and states. */
/* The numbered source mark in the answer prose, and the `+N` after a capped
   cluster.

   These values are ONE interdependent set, which is why they live in a class
   rather than as scattered utilities. At the answer's 16px/1.66 prose they draw
   a 12x12px box lifted 5px: it spans 5->17px above the baseline, clearing the
   line above by ~2px without growing the line box, and the margins leave ~2.7px
   between two marks so "2" and "3" in a cluster cannot touch. Re-measure in a
   browser before changing any one of them.

   The size is `em`, not a named step, because the mark has to scale with the
   prose it annotates — the scale's floor (`--text-3xs`, 10px) is absolute and
   would also overrun the line at this rise. Keeping it here rather than as a
   `text-[…]` utility is the sanctioned form: `check:type-scale` guards the
   utility vocabulary, and unlayered component CSS is how this repo expresses a
   geometry that the scale cannot.

   Never set line-height to 0. An inline-block with zero line-height has a
   zero-height padding box, which collapsed the mark to a sliver the first time. */
/* The in-prose source mark's own metrics. Component metrics, not scale steps:
   they are em-based and mutually dependent — the box has to clear the prose
   without growing the line box — so they sit here rather than in @theme, where
   they would generate a `leading-mark` utility with one consumer and a stepped
   scale that reads as though the mark were a typographic role.

   Declared on :root because the mark is drawn from three places that are not
   nested: `.answer-source-mark` and `.answer-source-mark-overflow` below, and
   the cluster spacing in answer-source-mark.tsx.
     --answer-mark-leading    the mark box takes its own line and nothing more
     --answer-mark-gap-lead   first mark of a cluster, closer to the word
     --answer-mark-gap        every later mark, and the "+N" overflow count
     --answer-mark-gap-star   the partial-support glyph against its digit */
:root {
  --answer-mark-leading: 1;
  --answer-mark-gap-lead: 0.28em;
  --answer-mark-gap: 0.34em;
  --answer-mark-gap-star: 0.03em;
}

.answer-source-mark {
  position: relative;
  top: -0.625em;
  display: inline-block;
  min-width: 1.5em;
  padding: 0.15em 0.2em;
  border-radius: var(--radius-xs);
  border-width: 1px;
  border-style: solid;
  font-size: 0.5em;
  line-height: var(--answer-mark-leading);
  text-align: center;
  vertical-align: baseline;
}

/* The partial-support glyph. One glyph reads at this size; a dotted underline
   and a 1px bottom border were both tried under it and neither draws. */
.answer-source-mark-star {
  margin-left: var(--answer-mark-gap-star);
  font-size: 0.85em;
  line-height: var(--answer-mark-leading);
}

/* A statement, not a control: the sources it counts all sit on the rail below
   at full tap size. */
.answer-source-mark-overflow {
  position: relative;
  top: -0.625em;
  margin-left: var(--answer-mark-gap);
  font-size: 0.5em;
  line-height: var(--answer-mark-leading);
  vertical-align: baseline;
}

.chat-composer-shell-base {
  display: flex;
  align-items: center;
  border-width: 1px;
  border-style: solid;
  border-radius: 999px;
}

.chat-composer-shell-delta {
  min-height: 3.5rem;
  gap: 0.5rem;
  border-color: var(--border-strong);
  background: var(--surface);
  padding-inline: 0.5rem;
  box-shadow: var(--shadow-soft);
}

/* One focus owner. The retired `--shadow-focus` token painted a 3px accent
   halo ON TOP of the accent border swap — the companion ring `#261` forbids.
   Focus is a quiet border shift; resting `--shadow-soft` stays so the pill
   does not jump height. A second outline here is what made the composer look
   like a default browser ring. */
.chat-composer-shell-delta:focus-within {
  border-color: color-mix(in srgb, var(--clinical-accent) 38%, var(--border-strong));
  outline: none;
}

.chat-composer-input {
  min-width: 0;
  min-height: var(--spacing-tap);
  flex: 1 1 0%;
  border: 0;
  background: transparent;
  padding-inline: 0.5rem;
  color: var(--text);
  font-size: 1rem;
  font-weight: 500;
  outline: none;
}

.chat-composer-input::placeholder {
  color: var(--text-placeholder);
}

.chat-composer-icon-button,
.chat-send-button {
  display: grid;
  width: var(--spacing-tap);
  height: var(--spacing-tap);
  flex: none;
  place-items: center;
  border-radius: 999px;
  transition:
    background-color 150ms var(--ease-out-soft),
    color 150ms var(--ease-out-soft),
    box-shadow 150ms var(--ease-out-soft),
    transform 150ms var(--ease-spring);
}

.chat-composer-icon-button {
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  box-shadow: none;
}

.chat-composer-icon-button:hover:not(:disabled),
.chat-composer-icon-button[aria-expanded="true"] {
  background: var(--surface-subtle);
  color: var(--text);
}

.chat-send-button {
  border: 0;
  background: var(--clinical-accent);
  color: var(--clinical-accent-contrast);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--clinical-accent) 32%, transparent);
}

.chat-send-button:hover:not(:disabled) {
  background: var(--clinical-accent-hover);
  box-shadow: 0 5px 14px color-mix(in srgb, var(--clinical-accent) 38%, transparent);
}

.chat-send-button:active:not(:disabled) {
  transform: translateY(1px);
}

.chat-composer-icon-button:focus-visible,
.chat-send-button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.chat-composer-icon-button:disabled,
.chat-send-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Small-phone pin for the composer: hold a 44px tap target (and a 1.1rem glyph
   on the icon/send buttons) below 431px, where the base rules above would
   otherwise apply the 48px --spacing-tap knob to the input and the buttons.
   This is the design system's one sanctioned exception to the 48px floor
   (SPEC §4.10): the phone composer is an edge-to-edge dock whose height is
   part of the search-chrome contract, and growing the input plus three
   buttons by 4px each re-tunes the dock reserve and the phone CLS budget for
   no accessibility gain — 44px already clears WCAG 2.5.5. Single source of
   truth — do not re-add a second max-width:430px block for these. The
   mode-action popover only renders ≥1024px, so this holds no .mode-action-*
   overrides. */
@media (max-width: 430px) {
  .chat-composer-input {
    min-height: 2.75rem;
  }

  .chat-composer-icon-button,
  .chat-send-button {
    height: 2.75rem !important;
    width: 2.75rem !important;
    min-height: 2.75rem;
    min-width: 2.75rem;
  }

  /* 1.1rem was 17.6px: lucide draws on a 24-unit grid with a 2px stroke, so a
     fractional box lands every stroke on a sub-pixel boundary and the "+" and
     send glyphs render visibly soft. --spacing-icon-lg is 20px — integer, on
     the icon scale, and the same size these glyphs already use from 431px up.
     20px inside the 44px button leaves the pinned tap target and the dock
     height this block exists to protect untouched. */
  .chat-composer-icon-button svg,
  .chat-send-button svg {
    height: var(--spacing-icon-lg);
    width: var(--spacing-icon-lg);
  }
}
/* Mirrors the `motion-safe` variant: animate when the OS allows it, and also when
   the in-app Motion preference explicitly opts in over an OS reduce request. */
@media (prefers-reduced-motion: reduce) {
  html[data-motion="full"] .mode-action-surface[data-placement="up"] {
    animation: mode-action-fold-up 170ms var(--ease-out-soft) both;
  }

  html[data-motion="full"] .mode-action-surface[data-placement="down"] {
    animation: mode-action-fold-down 170ms var(--ease-out-soft) both;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .mode-action-surface[data-placement="up"] {
    animation: mode-action-fold-up 170ms var(--ease-out-soft) both;
  }

  .mode-action-surface[data-placement="down"] {
    animation: mode-action-fold-down 170ms var(--ease-out-soft) both;
  }
}

.answer-footer-search-input {
  appearance: none;
  padding-inline: 0.35rem;
  font-size: 16px;
  font-weight: 560;
  line-height: 1.2;
  letter-spacing: 0;
}

.answer-footer-search-input::-webkit-search-cancel-button,
.answer-footer-search-input::-webkit-search-decoration {
  appearance: none;
}

/* The universal composer form is the visible control and already owns its
   focus-within border + halo. Suppress the nested text field's global focus
   paint so the pill never renders competing or clipped concentric rings. */
.answer-footer-search-input:focus-visible {
  box-shadow: none;
  outline: none;
}

.answer-footer-search-input::placeholder {
  color: var(--text-placeholder);
  font-weight: 560;
  opacity: 1;
}

.answer-footer-search-divider {
  display: none;
  height: 2rem;
  width: 1px;
  flex: 0 0 auto;
  /* Hairline that fades at both ends rather than a hard bar — reads as a
     premium separator between the field and the send action. */
  background: linear-gradient(
    to bottom,
    transparent,
    color-mix(in srgb, var(--border-strong) 58%, transparent) 22%,
    color-mix(in srgb, var(--border-strong) 58%, transparent) 78%,
    transparent
  );
}

/* Idle/inactive send: a calm neutral chip, not a faded-teal button. The
   shared disabled opacity over the accent fill +
   colour glow read as muddy/half-broken on the empty hero. Unlayered so it
   beats that layered utility; the button turns accent the moment a query makes
   it actionable. */
.answer-footer-search-send:disabled {
  opacity: 1;
  background: var(--surface-subtle);
  color: var(--disabled);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border-strong) 42%, transparent);
}

.answer-footer-search-chip {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  padding-inline: 0.8rem;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  box-shadow: 0 2px 10px rgb(16 24 40 / 6%);
  backdrop-filter: blur(14px);
  transition:
    border-color 160ms var(--ease-out-soft),
    background-color 160ms var(--ease-out-soft),
    color 160ms var(--ease-out-soft);
}

.answer-footer-search-chip:hover {
  border-color: var(--clinical-accent-border);
  background: var(--surface);
  color: var(--text);
}

.answer-footer-search-chip svg {
  height: 0.875rem;
  width: 0.875rem;
  color: var(--clinical-accent);
}

.answer-suggestion-row {
  display: flex;
  min-height: 1.5rem;
  align-items: center;
  gap: 0.5rem;
  padding-inline: 0.125rem;
}

.answer-suggestion-row-scroll {
  min-width: 0;
  scrollbar-width: none;
}

/* Mobile-only trailing fade. Scoped to a max-width query (rather than an
   unconditional mask plus a min-width:640px reset) because Lightning CSS
   collapses a base rule whose only media override is the mask, dropping the
   gradient entirely — the sibling .answer-suggestion-chips-scroll survives only
   because its override also changes other properties. A single mobile-scoped
   rule leaves nothing for the compiler to merge away. */
@media (max-width: 639px) {
  /* Phone baseline: a full-width opaque header. Controls still respect the
     side safe areas, but no blur or tint extends below the actual bar. */
  .edge-glass-header,
  .universal-header {
    background: var(--surface);
    backdrop-filter: none;
  }

  .edge-glass-header-backdrop,
  .edge-glass-header-backdrop::before,
  .edge-glass-header-backdrop::after {
    display: none;
    background: none;
    backdrop-filter: none;
    mask-image: none;
    -webkit-mask-image: none;
  }

  .answer-suggestion-row-scroll {
    mask-image: linear-gradient(90deg, black calc(100% - 1rem), transparent);
    -webkit-mask-image: linear-gradient(90deg, black calc(100% - 1rem), transparent);
  }
}

.answer-suggestion-row-scroll::-webkit-scrollbar {
  display: none;
}

/* Medication results keep the dashboard's phone gutter so the search band,
   patient details, and result-card edges remain visibly complete. Content also
   honours device safe areas without expanding the workspace beyond its owner. */
@media (max-width: 639px) {
  .medication-results-inset {
    padding-left: max(1rem, var(--safe-area-left));
    padding-right: max(1rem, var(--safe-area-right));
  }

  .medication-patient-strip > summary,
  .medication-patient-strip > div {
    padding-left: max(0.75rem, var(--safe-area-left));
    padding-right: max(0.75rem, var(--safe-area-right));
  }
  .medication-mobile-result {
    padding-block: 0.75rem;
    padding-left: max(1rem, var(--safe-area-left));
    padding-right: max(1rem, var(--safe-area-right));
  }

  .medication-mobile-result[data-selected="true"] {
    border-color: var(--border);
    background: color-mix(in srgb, var(--clinical-accent-soft) 42%, var(--surface-raised));
    box-shadow: inset 3px 0 0 var(--clinical-accent);
  }

  /* The patient verdict owns the card edge, including on the selected row.
     These must sit AFTER the [data-selected] rule above: that rule is unlayered
     and pins border-color, so a Tailwind border utility loses to it and the top
     hit — the one most likely to be prescribed — would render its interaction
     warning with a neutral edge. Equal specificity, later in source, wins. */
  .medication-mobile-result[data-verdict="danger"] {
    border-color: var(--danger-border);
  }

  .medication-mobile-result[data-verdict="warning"] {
    border-color: var(--warning-border);
  }

  .medication-mobile-result[data-verdict="success"] {
    border-color: var(--success-border);
  }

  .medication-mobile-result[data-verdict="clinical"] {
    border-color: color-mix(in srgb, var(--clinical-accent) 40%, transparent);
  }

  .medication-mobile-result[data-verdict="info"] {
    border-color: var(--info-border);
  }

  .medication-mobile-result:focus-visible {
    outline-offset: -2px;
  }
}

/* Wide phones in landscape can cross the sm breakpoint while still exposing
   substantial left/right cutout insets. Preserve the normal tablet card gutter,
   then add only the safe-area remainder so text never sits beneath a notch. */
@media (min-width: 640px) and (max-width: 1023px) {
  .medication-results-inset {
    padding-left: max(0px, calc(var(--safe-area-left) - 1rem));
    padding-right: max(0px, calc(var(--safe-area-right) - 1rem));
  }

  .medication-patient-strip > summary,
  .medication-patient-strip > div,
  .medication-mobile-result {
    padding-left: max(0.75rem, calc(var(--safe-area-left) - 0.25rem));
    padding-right: max(0.75rem, calc(var(--safe-area-right) - 0.25rem));
  }
}

/* Answer-thread follow-ups: the label reads as an eyebrow above the chips so
   wrapped chip rows stay ragged-right without a floating side label. Children
   must stretch so the chip row wraps at the column edge instead of overflowing. */
.answer-suggestion-row-stacked {
  flex-direction: column;
  align-items: stretch;
  gap: 0.375rem;
}
.smart-search-rotating-text,
.smart-search-prompt-row {
  display: none;
}

.smart-search-phone-ticker {
  display: grid;
  width: 100%;
  --smart-search-phone-ticker-gap: 0.75rem;
  --smart-search-phone-ticker-inline-padding: 0.25rem;
  --smart-search-phone-ticker-vertical-padding: 0.375rem;

  min-height: var(--spacing-tap);
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--smart-search-phone-ticker-gap);
  overflow: hidden;
  border: 0;
  background: transparent;
  padding-block: var(--smart-search-phone-ticker-vertical-padding);
  padding-inline: var(--smart-search-phone-ticker-inline-padding);
  color: var(--text-heading);
  text-align: left;
  box-shadow: none;
}

.smart-search-phone-ticker-kicker {
  display: inline-flex;
  align-items: center;
  --smart-search-phone-ticker-kicker-gap: 0.25rem;
  gap: var(--smart-search-phone-ticker-kicker-gap);
  color: var(--clinical-accent);
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.smart-search-phone-ticker-query {
  min-width: 0;
  overflow: hidden;
  font-size: 0.75rem;
  font-weight: 700;
  --smart-search-phone-ticker-line-height: 1.1rem;
  line-height: var(--smart-search-phone-ticker-line-height);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.smart-search-phone-ticker-action {
  color: var(--text-muted);
  font-size: 0.625rem;
  font-weight: 700;
  white-space: nowrap;
}

.smart-search-phone-ticker:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

@media (min-width: 640px) {
  .smart-search-phone-ticker {
    display: none;
  }

  .smart-search-rotating-text {
    display: flex;
  }
  .smart-search-prompt-row {
    display: flex;
  }
}

/* BEGIN tablet mode-home composer geometry */
/* Across 640-1279px the settled one-line surface is 160px: rotating hint
   (24px), composer, gaps, and prompt rail. Pre-reserve that exact height in
   this bounded band. The portal host's pending/non-empty selectors remain the
   owner, so a hidden composer still reserves zero. At 1280px+ the existing
   88px default remains deliberately unchanged because measured CLS stays
   below 0.01. */
@media (min-width: 640px) and (max-width: 1279.98px) {
  :root {
    --spacing-mode-home-composer-wide: 10rem;
  }

  .smart-search-prompt-row .answer-suggestion-chips-scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    mask-image: linear-gradient(90deg, black calc(100% - 1rem), transparent);
    -webkit-mask-image: linear-gradient(90deg, black calc(100% - 1rem), transparent);
  }
}
/* END tablet mode-home composer geometry */

/* BEGIN sm+ hero home canvas alignment */
/* Mode homes optically centre a ~160px composer. A ~400px bottom-right
   install card overlaps that band at 640–1440px (Production UI `ui-pwa`).
   Top-align the canvas from first paint in that band so the composer sits
   above the card without restyling when the stack mounts. Do not apply at
   1920px+: extra viewport height already clears a centred composer, and
   top-aligning there shifted page content (~0.025 CLS, `ui-pwa` wide-desktop).
   A `body:has(.pwa-notice-stack)` canvas restyle caused 0.12 CLS. Phones stay
   centred. */
@media (min-width: 640px) and (max-width: 1919.98px) {
  #main-content[data-phone-footer-owner="hero"] [data-mode-home-canvas] {
    place-items: start center;
    align-content: start;
  }
}
/* END sm+ hero home canvas alignment */

.smart-search-rotating-text {
  min-height: 1.5rem;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding-inline: 0.25rem;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.smart-search-rotating-query {
  color: var(--clinical-accent);
}

.answer-suggestion-label {
  color: var(--text-muted);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.answer-suggestion-label-eyebrow {
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  line-height: 1rem;
  text-transform: uppercase;
}

.answer-suggestion-chips {
  display: flex;
  min-width: 0;
  gap: 0.4375rem;
}

.answer-suggestion-chips-wrap {
  flex-wrap: wrap;
}

.answer-suggestion-chips-scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  mask-image: linear-gradient(90deg, black calc(100% - 1rem), transparent);
  -webkit-mask-image: linear-gradient(90deg, black calc(100% - 1rem), transparent);
}

@media (min-width: 640px) {
  .answer-suggestion-chips-scroll {
    flex-wrap: wrap;
    overflow-x: visible;
    mask-image: none;
    -webkit-mask-image: none;
  }
}

.answer-suggestion-chips-scroll::-webkit-scrollbar {
  display: none;
}

.answer-suggestion-chip {
  display: inline-flex;
  max-width: min(100%, 18rem);
  min-height: 2rem;
  flex-shrink: 0;
  align-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: var(--shadow-inset);
  padding-inline: 0.75rem;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.25rem;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition:
    border-color 160ms var(--ease-out-soft),
    background-color 160ms var(--ease-out-soft),
    color 160ms var(--ease-out-soft);
}

.answer-suggestion-chip:hover:not(:disabled) {
  border-color: var(--clinical-accent-border);
  background: var(--clinical-accent-soft);
  color: var(--clinical-accent);
}

/* Touch devices: suggestion/follow-up chips are primary tap targets (the
   follow-ups sit directly under the composer and each fires a new search).
   Meet the --spacing-tap floor and widen the gap so neighbouring chips in the
   horizontal scroll row don't invite mis-taps. Fine-pointer (mouse) users keep
   the compact 32px chip — no desktop visual change. */
@media (pointer: coarse) {
  .answer-suggestion-chips {
    gap: 0.5rem;
  }

  .answer-suggestion-chip {
    min-height: var(--spacing-tap);
  }
}

.answer-suggestion-chip:disabled {
  cursor: not-allowed;
}

.answer-suggestion-chip-icon {
  width: 0.8125rem;
  height: 0.8125rem;
  flex-shrink: 0;
  margin-right: 0.3125rem;
  color: var(--decoration-soft);
}

.answer-suggestion-chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Home history is a quiet convenience rather than a second set of primary
   actions. Keep the shared chip behaviour and touch target, but use a compact
   rectangular treatment that takes up less visual and vertical space. */
.home-recent-searches {
  gap: calc(var(--spacing-icon-xs) / 2) var(--radius-md);
  padding-inline: 0;
}

.home-recent-searches .answer-suggestion-label {
  color: var(--text-heading);
  font-size: var(--text-3xs);
  font-weight: 650;
  letter-spacing: 0.025em;
}

.home-recent-searches .answer-suggestion-chips {
  justify-content: center;
  gap: calc(var(--spacing-icon-xs) / 2);
}

.home-recent-searches .answer-suggestion-chip {
  min-height: calc(var(--spacing-tap) * 7 / 12);
  border-color: color-mix(in srgb, var(--border) 58%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-inset) 42%, transparent);
  box-shadow: none;
  padding-inline: var(--radius-md);
  color: color-mix(in srgb, var(--text-muted) 90%, transparent);
  font-size: var(--text-2xs);
  font-weight: 550;
}

.home-recent-searches .answer-suggestion-chip-icon {
  width: var(--text-2xs);
  height: var(--text-2xs);
  margin-right: var(--radius-xs);
}

.home-recent-searches .answer-suggestion-chip:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--clinical-accent-border) 68%, transparent);
  background: color-mix(in srgb, var(--clinical-accent-soft) 52%, transparent);
}

@media (pointer: coarse) {
  .home-recent-searches .answer-suggestion-chip {
    min-height: var(--spacing-tap);
  }
}

@media (max-width: 639px) {
  .home-recent-searches {
    align-items: flex-start;
    flex-direction: column;
  }

  .home-recent-searches .answer-suggestion-chips {
    justify-content: flex-start;
  }
}

.answer-footer-search-edge .answer-suggestion-row {
  padding-inline: 0.25rem;
}

/* Phone answer dock: the "Try next" chip row sits directly above the pill with
   no flex-gap owner (showFooterSearchChips is false on phones), so this margin
   is the sole separator. It must stay positive — a negative value tucked the
   chips' rounded underside beneath the pill's top edge/focus glow, reading as a
   collision. Keep the gap just large enough to read as intentional without
   pushing the row up into the content that shows through the scrim above. */
.answer-footer-search-edge .answer-suggestion-row-composer-followups {
  margin-bottom: 0.4375rem;
}

@media (max-width: 639px) {
  .answer-footer-search-dock .answer-suggestion-chip {
    background: var(--surface);
  }
}

.dashboard-composer-edge {
  left: max(0.75rem, var(--safe-area-left));
  right: max(0.75rem, var(--safe-area-right));
}

.dashboard-composer-edge.answer-footer-search-edge {
  left: 50%;
  right: auto;
  width: min(calc(100vw - 8px - var(--safe-area-left) - var(--safe-area-right)), 400px);
  transform: translateX(-50%);
}

.document-mobile-search-edge {
  left: max(0.75rem, var(--safe-area-left));
  right: max(0.75rem, var(--safe-area-right));
  bottom: max(0.9rem, calc(var(--safe-area-bottom) + 0.75rem));
}

.document-mobile-search-edge.answer-footer-search-edge {
  bottom: max(1.45rem, calc(var(--safe-area-bottom) + 1rem));
}

@media (min-width: 640px) {
  .mode-home-composer-slot {
    width: min(100%, clamp(28rem, 50vw, 48rem));
    max-width: calc(100vw - 3rem - var(--safe-area-left) - var(--safe-area-right));
  }

  .universal-top-search-edge {
    width: min(100%, clamp(28rem, 74vw, 54rem));
    max-width: calc(100vw - 3rem - var(--safe-area-left) - var(--safe-area-right));
  }

  .floating-composer-edge {
    bottom: max(1rem, var(--safe-area-bottom));
  }

  .answer-footer-search-edge {
    bottom: max(0.75rem, calc(var(--safe-area-bottom) + 0.5rem));
  }

  .dashboard-composer-edge.answer-footer-search-edge {
    width: min(calc(100vw - 48px - var(--safe-area-left) - var(--safe-area-right)), 680px);
  }

  @layer components {
    .answer-footer-search-pill {
      min-height: 3.5rem;
      gap: 0.5rem;
      padding-inline: 0.5rem;
    }
  }

  .answer-footer-search-input {
    font-size: 18px;
  }

  .answer-footer-search-action,
  .answer-footer-search-send {
    height: 3rem;
    width: 3rem;
  }

  .answer-footer-search-divider {
    display: block;
  }

  .answer-footer-search-chip {
    min-height: 2.75rem;
    padding-inline: 0.9rem;
    font-size: 0.8125rem;
  }

  .document-mobile-search-edge {
    left: auto;
    right: auto;
    bottom: auto;
  }
}

@media (min-width: 1024px) {
  /* The document viewer is a two-column layout (main + 480px right rail). Keep
     the floating composer within the main column so it never overlaps the
     right-rail evidence/profile/tables text. Scoped to lg+, where the rail sits
     beside the main column. */
  .document-viewer-composer.floating-composer-edge {
    left: max(2rem, var(--safe-area-left));
    right: calc(max(0px, (100vw - var(--content-max-width)) / 2) + var(--rail-width) + 3.5rem + var(--safe-area-right));
  }
}

@media (max-width: 639px) {
  /* Unlayered on purpose: a prior max(0px, safe-area) here beat the layered
     inset and pinned new-chat to the phone bezel. Keep the tokenized phone
     value so unlayered media cannot reintroduce a 0px override or drift from
     the @layer components base. */
  .edge-glass-header {
    padding-left: max(var(--header-edge-pad), var(--safe-area-left));
    padding-right: max(var(--header-edge-pad), var(--safe-area-right));
  }

  .inpage-nav-header {
    padding-left: max(var(--header-edge-pad), var(--safe-area-left));
    padding-right: max(var(--header-edge-pad), var(--safe-area-right));
  }

  .dashboard-composer-edge.answer-footer-search-edge:not(.answer-footer-search-dock) {
    width: min(calc(100vw - 8px - var(--safe-area-left) - var(--safe-area-right)), 400px);
  }

  .document-mobile-search-edge:not(.answer-footer-search-dock) {
    left: max(0.375rem, var(--safe-area-left));
    right: max(0.375rem, var(--safe-area-right));
    bottom: max(0.5rem, calc(var(--safe-area-bottom) + 0.375rem));
  }

  .document-mobile-search-edge.answer-footer-search-edge:not(.answer-footer-search-dock) {
    left: 50%;
    right: auto;
    bottom: max(0.45rem, calc(var(--safe-area-bottom) + 0.35rem));
    width: min(calc(100vw - 8px - var(--safe-area-left) - var(--safe-area-right)), 400px);
    transform: translateX(-50%);
  }

  /* Compact search/result views: no chip row below the pill, so the pill
     itself hugs the bottom edge and the scrim shrinks to match. */
  .document-mobile-search-edge.answer-footer-search-edge.document-mobile-search-compact:not(
      .answer-footer-search-dock
    ) {
    bottom: max(0.4rem, calc(var(--safe-area-bottom) + 0.3rem));
  }

  .document-mobile-search-compact .answer-footer-search-backdrop {
    height: max(5rem, calc(var(--safe-area-bottom) + 4.4rem));
  }

  /* Differentials search results: compare action sits above the search pill in the dock.
     Heights track --phone-dock-differentials-compare-* (same as content reserve). */
  .answer-footer-search-dock[data-footer-addon="differentials-compare"] .answer-footer-search-backdrop {
    height: max(var(--phone-dock-differentials-compare-clearance), calc(var(--safe-area-bottom) + 11.25rem));
  }

  .answer-footer-search-dock.document-mobile-search-compact[data-footer-addon="differentials-compare"]
    .answer-footer-search-backdrop {
    height: max(var(--phone-dock-differentials-compare-compact-clearance), calc(var(--safe-area-bottom) + 11rem));
  }

  /* Medication surfaces: Patient details pill above the search pill in the dock.
     Heights track --phone-dock-patient-details-* (same as content reserve). */
  .answer-footer-search-dock[data-footer-addon="patient-details"] .answer-footer-search-backdrop {
    height: max(var(--phone-dock-patient-details-clearance), calc(var(--safe-area-bottom) + 7.75rem));
  }

  .answer-footer-search-dock.document-mobile-search-compact[data-footer-addon="patient-details"]
    .answer-footer-search-backdrop {
    height: max(var(--phone-dock-patient-details-compact-clearance), calc(var(--safe-area-bottom) + 7.5rem));
  }

  .document-mobile-search-pill {
    min-height: 3.6rem;
    border-color: var(--border-strong);
    background: var(--surface);
    padding-inline: 0.375rem;
    box-shadow:
      0 1px 2px rgb(16 24 40 / 5%),
      0 8px 22px rgb(16 24 40 / 8%);
  }

  /* Edge-to-edge phone dock: the form remains transparent while its localized
     child backdrop tints the pill and safe area. Never add a bottom offset. */
  .answer-footer-search-dock.answer-footer-search-edge,
  .answer-footer-search-dock.dashboard-composer-edge.answer-footer-search-edge,
  .answer-footer-search-dock.document-mobile-search-edge.answer-footer-search-edge {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    transform: translateY(calc(-1 * var(--keyboard-height, 0px)));
    padding-inline: max(0.75rem, var(--safe-area-left)) max(0.75rem, var(--safe-area-right));
    padding-top: 0.5rem;
    padding-bottom: max(0.5rem, var(--safe-area-bottom));
    background: transparent;
  }

  .answer-footer-search-dock.document-mobile-search-edge.answer-footer-search-edge.document-mobile-search-compact,
  .answer-footer-search-dock.dashboard-composer-edge.answer-footer-search-edge.document-mobile-search-compact,
  .answer-footer-search-dock.answer-footer-search-edge.document-mobile-search-compact {
    padding-bottom: max(0.45rem, var(--safe-area-bottom));
  }

  /* Guide Centre: the CTA stays above the Home Indicator while its dedicated
     glass tray paints through the complete safe-area region. The shared search
     dock deliberately fades to transparent at the physical edge; on this
     fullscreen white Sheet that exposed a separate white strip below the CTA. */
  .guide-tour-dock.answer-footer-search-dock.answer-footer-search-edge {
    padding-top: var(--spacing-icon-xs);
    padding-bottom: calc(var(--spacing-icon-xs) + var(--safe-area-bottom));
  }

  .guide-tour-dock.answer-footer-search-dock .answer-footer-search-backdrop {
    height: max(7.5rem, calc(var(--safe-area-bottom) + 6rem));
    background: linear-gradient(
      180deg,
      transparent 0%,
      color-mix(in srgb, var(--surface-raised) 24%, transparent) 28%,
      color-mix(in srgb, var(--surface-raised) 72%, transparent) 58%,
      color-mix(in srgb, var(--surface-raised) 88%, var(--clinical-accent-soft)) 82%,
      color-mix(in srgb, var(--surface-raised) 88%, var(--clinical-accent-soft)) 100%
    );
    mask-image: linear-gradient(180deg, transparent 0%, black 30%, black 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 30%, black 100%);
  }

  /* Must beat the edge-to-edge dock rule above (transform: none) so scroll-hide
     actually slides the bar off-screen once data-scroll-hidden is set.
     Use --safe-area-bottom (not env() alone) so Playwright/PWA inset simulation
     and the visible dock's padding-bottom clear the same distance — otherwise
     a white safe-area rail can peep after hide on simulated/notched phones. */
  .answer-footer-search-dock.answer-footer-search-edge[data-scroll-hidden="true"],
  .answer-footer-search-dock.document-mobile-search-edge.answer-footer-search-edge[data-scroll-hidden="true"],
  .answer-footer-search-dock.dashboard-composer-edge.answer-footer-search-edge[data-scroll-hidden="true"] {
    transform: translateY(calc(100% + var(--safe-area-bottom)));
    opacity: 0;
    pointer-events: none;
  }

  /* WebKit can retain a backdrop-filter compositor layer after its translated
     parent reaches opacity: 0. Fade the scrim with the dock, then make that
     paint layer non-rendering at the end of the hide transition. Visibility
     becomes visible immediately on reveal, so the reverse path stays smooth. */
  .answer-footer-search-dock[data-scroll-hidden="true"] .answer-footer-search-backdrop {
    opacity: 0;
    visibility: hidden;
    transition-delay: 0ms, 240ms;
  }

  /* Compare addon adds in-flow chrome above the pill; clear a little extra so
     the Compare bar does not leave a 1px/subpixel peep on the viewport edge. */
  .answer-footer-search-dock.document-mobile-search-edge.answer-footer-search-edge[data-footer-addon="differentials-compare"][data-scroll-hidden="true"] {
    transform: translateY(calc(100% + 0.75rem + var(--safe-area-bottom)));
  }

  /* Same extra clearance for the Patient details row, scaled to its shorter height. */
  .answer-footer-search-dock.dashboard-composer-edge.answer-footer-search-edge[data-footer-addon="patient-details"][data-scroll-hidden="true"] {
    transform: translateY(calc(100% + 0.5rem + var(--safe-area-bottom)));
  }

  /* Document viewer owns its floating composer (not the shared dock). Lift it
     with the same --keyboard-height signal so overlay/visual keyboards do not
     cover the focused input on document detail/source routes. */
  .document-viewer-composer.floating-composer-edge:not([data-scroll-hidden="true"]) {
    transform: translateY(calc(-1 * var(--keyboard-height, 0px)));
  }

  /* Document viewer bottom composer mirrors the dock's hide-on-scroll. Unlike
     the full-bleed dock it floats with a bottom gap (.floating-composer-edge,
     bottom: max(0.75rem, safe-area)), so the exit transform must also clear
     that gap. translateY-only: this form centres with mx-auto, not translateX. */
  .document-viewer-composer[data-scroll-hidden="true"] {
    transform: translateY(calc(100% + max(0.75rem, var(--safe-area-bottom))));
    opacity: 0;
    pointer-events: none;
  }

  .answer-footer-search-dock .answer-footer-search-backdrop {
    display: block;
    position: absolute;
  }

  .answer-footer-search-dock .answer-footer-search-pill {
    border-color: var(--border-strong);
    /* Matches the base (non-dock) pill's 97% — 88% left enough see-through
       that scrolled card text stayed legible behind the pill on real devices
       (search-bar overlap defect, 2026-08-06). backdrop-filter blur is a
       bonus frost on top, not the only thing hiding the text underneath. */
    background: color-mix(in srgb, var(--surface) 97%, transparent);
    box-shadow:
      0 -1px 0 color-mix(in srgb, var(--border) 60%, transparent),
      0 1px 3px rgb(16 24 40 / 5%);
  }

  .answer-footer-search-dock .answer-footer-search-chip {
    background: var(--surface);
    backdrop-filter: none;
  }

  .answer-footer-search-dock .answer-footer-search-pill:hover {
    box-shadow:
      0 -1px 0 color-mix(in srgb, var(--border-strong) 70%, transparent),
      0 2px 6px rgb(16 24 40 / 7%);
  }

  .answer-footer-search-dock .answer-footer-search-pill:focus-within {
    box-shadow:
      0 0 0 3px color-mix(in srgb, var(--clinical-accent) 16%, transparent),
      0 -1px 0 color-mix(in srgb, var(--border) 60%, transparent),
      0 2px 6px rgb(16 24 40 / 6%);
  }

  .answer-footer-search-dock .answer-footer-search-pill-open {
    box-shadow:
      0 0 0 3px color-mix(in srgb, var(--clinical-accent) 10%, transparent),
      0 -1px 0 color-mix(in srgb, var(--border) 60%, transparent),
      0 2px 8px rgb(16 24 40 / 8%);
  }
}

@media (max-width: 639px) and (prefers-reduced-motion: reduce) {
  .answer-footer-search-dock[data-scroll-hidden="true"] .answer-footer-search-backdrop {
    transition-delay: 0ms;
  }
}

@media (max-width: 639px) {
  html[data-motion="reduced"] .answer-footer-search-dock[data-scroll-hidden="true"] .answer-footer-search-backdrop {
    transition-delay: 0ms;
  }
}

/* Tablet rail range: the collapsed icon rail occupies the left edge from md
   until the full sidebar takes over at lg, so fixed composers must centre on
   the remaining content area instead of the viewport. Shells set
   --clinical-sidebar-width-md (5.25rem, or 0px when the sidebar is hidden). */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .dashboard-composer-edge {
    left: calc(var(--clinical-sidebar-width-md, 0px) + max(0.75rem, var(--safe-area-left)));
    right: max(0.75rem, var(--safe-area-right));
  }

  .dashboard-composer-edge.answer-footer-search-edge {
    left: calc(var(--clinical-sidebar-width-md, 0px) + (100vw - var(--clinical-sidebar-width-md, 0px)) / 2);
    right: auto;
    width: min(
      calc(100vw - var(--clinical-sidebar-width-md, 0px) - 48px - var(--safe-area-left) - var(--safe-area-right)),
      680px
    );
  }
}

@media (min-width: 1024px) {
  .mode-home-composer-slot {
    width: min(100%, clamp(28rem, 50vw, 48rem));
  }

  .universal-top-search-edge {
    width: min(100%, clamp(36rem, 56vw, 56rem));
  }

  .dashboard-composer-edge {
    left: calc(var(--clinical-sidebar-width, 20rem) + 2rem);
    right: max(2rem, var(--safe-area-right));
  }

  .dashboard-composer-edge.answer-footer-search-edge {
    left: calc(var(--clinical-sidebar-width, 20rem) + (100vw - var(--clinical-sidebar-width, 20rem)) / 2);
    right: auto;
    width: min(calc(100vw - var(--clinical-sidebar-width, 20rem) - 64px), 820px);
  }
}

/* Safe-area helpers for notches and home indicators */
@utility pt-safe {
  padding-top: env(safe-area-inset-top);
}

@utility pb-safe {
  padding-bottom: env(safe-area-inset-bottom);
}

@utility pb-safe-2 {
  padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
}

/* Global PWA notices sit above the phone composer and home indicator without
   taking page scroll ownership. Install is a compact surface, not a modal:
   central search stays usable and the wide-screen card remains lower-right. */
.pwa-notice-stack {
  --pwa-notice-bottom-gap: calc(max(0.75rem, var(--safe-area-bottom)) + 5rem);
  /* PWA-only geometry and typography roles. Keep the component's exact
     measured proportions while consuming the shared radius, spacing, and motion
     ladders wherever a matching step exists. */
  --pwa-notice-gap: var(--radius-lg);
  --pwa-card-radius: var(--radius-xl);
  --pwa-control-radius: var(--radius-md);
  --pwa-inset-xs: var(--radius-xs);
  --pwa-inset-sm: var(--radius-sm);
  --pwa-inset-md: var(--radius-md);
  --pwa-inset-lg: var(--radius-lg);
  --pwa-inset-xl: var(--spacing-icon-md);
  --pwa-grip-height: calc(var(--spacing-icon-sm) + var(--radius-xs));
  --pwa-grip-width: calc(var(--spacing-icon-xl) + var(--radius-lg));
  --pwa-grip-thickness: 0.1875rem;
  --pwa-header-min-height: calc(4 * var(--radius-xl));
  --pwa-row-min-height: calc(2 * var(--radius-xl) + 2 * var(--radius-xs));
  --pwa-row-padding-block: 0.4375rem;
  --pwa-line-height-control: 1;
  --pwa-line-height-tagline: 1.35rem;
  --pwa-line-height-copy: var(--spacing-icon-lg);
  --pwa-line-height-support: var(--pwa-grip-height);
  --pwa-motion-enter: 280ms;

  position: fixed;
  z-index: 95;
  left: max(0.5rem, var(--safe-area-left));
  right: max(0.5rem, var(--safe-area-right));
  bottom: var(--pwa-notice-bottom-gap);
  display: grid;
  gap: var(--pwa-notice-gap);
  pointer-events: none;
}

.pwa-notice-card {
  overflow: hidden;
  border: 1px solid var(--border-lux);
  border-radius: var(--pwa-card-radius);
  background: var(--surface-lux);
  box-shadow:
    0 18px 48px color-mix(in srgb, var(--text-heading) 11%, transparent),
    0 3px 10px color-mix(in srgb, var(--text-heading) 6%, transparent);
  animation: pwa-notice-in var(--pwa-motion-enter) cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

.pwa-lifecycle-card {
  padding: var(--pwa-inset-xl);
}

.pwa-connection-restored {
  justify-self: end;
  border-color: color-mix(in srgb, var(--success) 24%, var(--border-lux));
  border-radius: var(--radius-pill, 9999px);
  background: color-mix(in srgb, var(--success-soft) 88%, var(--surface-lux));
  padding: var(--pwa-inset-sm) var(--pwa-inset-lg) var(--pwa-inset-sm) calc(2 * var(--pwa-inset-xs));
  box-shadow: var(--e1);
}

.pwa-connection-restored > div > span {
  width: calc(2 * var(--pwa-inset-xl));
  height: calc(2 * var(--pwa-inset-xl));
  border-radius: var(--radius-pill, 9999px);
}

.pwa-install-sheet {
  max-height: calc(100dvh - var(--pwa-notice-bottom-gap) - 4.25rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.pwa-install-grip {
  display: flex;
  height: var(--pwa-grip-height);
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--clinical-accent-soft) 72%, var(--surface-lux));
}

.pwa-install-grip span {
  width: var(--pwa-grip-width);
  height: var(--pwa-grip-thickness);
  border-radius: var(--radius-pill, 9999px);
  background: color-mix(in srgb, var(--text-muted) 48%, transparent);
}

.pwa-install-header {
  display: flex;
  min-height: var(--pwa-header-min-height);
  align-items: center;
  justify-content: space-between;
  gap: var(--pwa-notice-gap);
  border-bottom: 1px solid color-mix(in srgb, var(--border-lux) 82%, transparent);
  background: color-mix(in srgb, var(--clinical-accent-soft) 72%, var(--surface-lux));
  padding: calc(2 * var(--pwa-inset-xs)) var(--pwa-inset-md) calc(2 * var(--pwa-inset-xs)) var(--pwa-inset-xl);
}

.pwa-install-mark {
  border-radius: var(--pwa-control-radius);
  filter: drop-shadow(0 2px 3px color-mix(in srgb, var(--clinical-accent) 18%, transparent));
}

.pwa-install-dismiss {
  display: inline-flex;
  min-height: var(--spacing-tap);
  flex: none;
  align-items: center;
  justify-content: center;
  gap: var(--pwa-inset-xs);
  border-radius: var(--pwa-control-radius);
  padding: 0 calc(2 * var(--pwa-inset-xs));
  color: var(--text-muted);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: var(--pwa-line-height-control);
  transition:
    color var(--duration-quick) ease,
    background-color var(--duration-quick) ease;
}

.pwa-install-dismiss:hover {
  background: color-mix(in srgb, var(--surface-lux) 72%, transparent);
  color: var(--text-heading);
}

.pwa-install-dismiss:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

.pwa-install-body {
  background: var(--surface-lux);
  padding: var(--spacing-icon-sm) var(--pwa-inset-xl) var(--pwa-inset-xl);
}

.pwa-install-compact-copy {
  display: none;
}

.pwa-install-tagline {
  color: var(--text-heading);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: var(--pwa-line-height-tagline);
}

.pwa-install-copy {
  margin-top: var(--pwa-inset-sm);
  color: var(--text-muted);
  font-size: 0.8125rem;
  line-height: var(--pwa-line-height-copy);
}

.pwa-install-support {
  margin-top: var(--pwa-inset-sm);
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: var(--pwa-line-height-support);
}

.pwa-install-benefits,
.pwa-install-steps {
  margin-top: var(--pwa-inset-lg);
  overflow: hidden;
  border: 1px solid var(--border-lux);
  border-radius: var(--pwa-control-radius);
  background: color-mix(in srgb, var(--clinical-accent-soft) 20%, var(--surface-lux));
}

.pwa-install-benefits li,
.pwa-install-steps li {
  display: flex;
  min-height: var(--pwa-row-min-height);
  align-items: center;
  gap: var(--pwa-inset-md);
  padding: var(--pwa-row-padding-block) var(--pwa-inset-lg);
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: var(--pwa-line-height-support);
}

.pwa-install-benefits li + li,
.pwa-install-steps li + li {
  border-top: 1px solid color-mix(in srgb, var(--border-lux) 80%, transparent);
}

.pwa-install-benefits svg,
.pwa-install-steps svg {
  flex: none;
  color: var(--clinical-accent);
}

.pwa-install-steps li {
  min-height: var(--spacing-tap);
  justify-content: space-between;
  font-size: 0.8125rem;
}

.pwa-install-actions {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: calc(2 * var(--pwa-inset-xs));
  margin-top: var(--pwa-inset-lg);
}

.pwa-install-actions-single {
  grid-template-columns: 1fr;
}

/* The in-flow phone home composer sits near the viewport centre. Keep the
   browser-native install prompt below it without moving page content: the full
   value proposition remains on larger and dock-owned surfaces, while the phone
   hero gets a concise, action-first card.

   Every rule below gates on ONE :has() only — the hero-composer ownership
   attribute on #main-content, which is a static per-route render prop (see
   heroOwnsPhoneComposer in global-search-shell.tsx) and never changes after a
   route's first paint. Compacting for the native install card itself uses a
   plain descendant combinator off .pwa-install-native-sheet, NOT a second
   :has(.pwa-install-native-sheet) existence check: .pwa-install-grip/-tagline/
   -copy/-support/-benefits/-header/-body/-compact-copy/-actions are always
   literal descendants of that card when it renders, in the same React commit
   and the same browser paint, so the descendant selector cannot observe a
   frame where the card exists without its compacted geometry. A second
   ancestor-level :has() re-checking a fact the DOM tree already guarantees
   was exactly the shape of bug fixed for .pwa-notice-stack's own bottom-gap
   rule below in PR #2219 (see useSettledNoticeSignature in pwa-lifecycle.tsx
   and tests/pwa-lifecycle.dom.test.tsx) — this mirrors that fix across the
   remaining eight rules in this block, which still carried the same
   two-:has() pattern after that PR landed. */
/* BEGIN post-hydration PWA main-content selector allowlist */
@media (max-width: 639.98px) {
  body:has(#main-content[data-phone-footer-owner="hero"]) .pwa-notice-stack {
    --pwa-notice-bottom-gap: max(0.5rem, var(--safe-area-bottom));
  }

  body:has(#main-content[data-phone-footer-owner="hero"]) .pwa-install-native-sheet .pwa-install-grip,
  body:has(#main-content[data-phone-footer-owner="hero"]) .pwa-install-native-sheet .pwa-install-tagline,
  body:has(#main-content[data-phone-footer-owner="hero"]) .pwa-install-native-sheet .pwa-install-copy,
  body:has(#main-content[data-phone-footer-owner="hero"]) .pwa-install-native-sheet .pwa-install-support,
  body:has(#main-content[data-phone-footer-owner="hero"]) .pwa-install-native-sheet .pwa-install-benefits {
    display: none;
  }

  body:has(#main-content[data-phone-footer-owner="hero"]) .pwa-install-native-sheet .pwa-install-header {
    min-height: 3.25rem;
    padding-block: calc(2 * var(--pwa-inset-xs));
  }

  body:has(#main-content[data-phone-footer-owner="hero"]) .pwa-install-native-sheet .pwa-install-body {
    padding: var(--pwa-inset-sm) var(--pwa-inset-xl) var(--pwa-inset-xl);
  }

  body:has(#main-content[data-phone-footer-owner="hero"]) .pwa-install-native-sheet .pwa-install-compact-copy {
    display: block;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: var(--pwa-line-height-support);
  }

  body:has(#main-content[data-phone-footer-owner="hero"]) .pwa-install-native-sheet .pwa-install-actions {
    margin-top: var(--pwa-inset-sm);
  }
}
/* END post-hydration PWA main-content selector allowlist */

.pwa-action {
  transition:
    border-color var(--duration-quick) ease,
    background-color var(--duration-quick) ease,
    color var(--duration-quick) ease,
    box-shadow var(--duration-quick) ease;
}

.pwa-action-primary {
  border: 1px solid var(--clinical-accent);
  background: var(--clinical-accent);
  color: var(--clinical-accent-contrast);
  box-shadow: var(--e1);
}

.pwa-action-primary:hover {
  border-color: var(--clinical-accent-hover);
  background: var(--clinical-accent-hover);
}

.pwa-action-secondary {
  border: 1px solid color-mix(in srgb, var(--clinical-accent) 58%, var(--border-lux));
  background: var(--surface-lux);
  color: var(--clinical-accent);
}

.pwa-action-secondary:hover {
  background: var(--clinical-accent-soft);
}

@keyframes pwa-notice-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (min-width: 640px) {
  .pwa-notice-stack {
    left: auto;
    right: max(1rem, var(--safe-area-right));
    bottom: max(1rem, var(--safe-area-bottom));
    width: min(27rem, calc(100vw - 2rem - var(--safe-area-left) - var(--safe-area-right)));
  }

  /* Submitted answer views own a fixed bottom composer. Keep the install
     surface in the opposite corner so neither control can obscure the other. */
  body:has(form.answer-footer-search-edge) .pwa-notice-stack {
    top: calc(4.25rem + max(0.75rem, var(--safe-area-top)));
    bottom: auto;
  }

  .pwa-install-grip {
    display: none;
  }
}

@media (display-mode: standalone) {
  .pwa-notice-stack {
    --pwa-notice-bottom-gap: calc(max(0.75rem, var(--safe-area-bottom)) + 5.5rem);
  }
}

@media (min-width: 1280px) {
  .pwa-notice-stack {
    right: max(1.5rem, var(--safe-area-right));
    bottom: max(1.5rem, var(--safe-area-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) .pwa-notice-card {
    animation: none;
  }
}

html[data-motion="reduced"] .pwa-notice-card {
  animation: none;
}

@media (forced-colors: active) {
  .pwa-notice-card,
  .pwa-install-benefits,
  .pwa-install-steps,
  .pwa-action,
  .pwa-install-dismiss {
    border-color: CanvasText;
  }

  .pwa-install-header,
  .pwa-install-body,
  .pwa-install-benefits,
  .pwa-install-steps,
  .pwa-action-secondary {
    background: Canvas;
  }
}

/* Tabular figures for data, counts, page numbers, byte sizes */
@utility nums {
  font-variant-numeric: tabular-nums;
}

/* …and by default wherever figures are inherently columnar: dose tables, code
   and clinical identifiers. Doses, counts and dates must not wobble between
   rows because a `1` is narrower than a `0`. `.nums` / `[data-numeric]` stay
   the explicit opt-in for prose runs that need the same treatment. */
code,
kbd,
samp,
th,
td,
.font-mono,
[data-numeric] {
  font-variant-numeric: tabular-nums;
}

@utility search-results-main {
  container-type: inline-size;
  container-name: search-results-main;
  min-width: 0;
}
@media (max-width: 1023px) {
}

/* ── Mode navigation ──────────────────────────────────────────────────────
   The bar carrying one mode's own pages. `ModeNavHeaderPortal` moves it into
   the universal header's collapse track, so it hides and reveals as one object
   with the header at every width and owns no scroll listener of its own.

   Two elements, and which one carries what is load-bearing: `.mode-nav-rail`
   is full-bleed and owns the paint plus the header's inline gutter, and the
   `.mode-nav` element inside it is capped to the header's own column and owns
   the container query. See the note above `@utility mode-nav` for why the
   query cannot live on the rail.

   Density is chosen by CONTAINER width in `rem` — never by device width, and
   never by runtime measurement. The unit is the mechanism: raising the browser
   or OS text size grows the root font, so a phone crosses a threshold exactly
   when its labels would stop fitting. Each declared label family has a
   calibrated profile: short Specifier labels can use space that Therapy's
   longer labels cannot, without either set changing under the user at runtime.

   The collapsed control is the DEFAULT and the bar is the enhancement, so
   anything unmeasured, unsupported or mid-load renders the one state that
   cannot overflow at any width or text size (WCAG 1.4.4 Resize Text, 1.4.10
   Reflow).

   Slots size to their CONTENT at every band, never to equal `1fr` tracks.
   Equal tracks make the widest slot set what every slot needs, and the label's
   `truncate` then hides the shortfall — silently, because nothing overflows and
   nothing fails. Measured in Chromium on 2026-07-29 against the Therapy set,
   that clipped at every phone width: 320px showed 15 of Compare's 56px, and
   430px was WORSE at three of four labels clipped, because crossing a band adds
   a slot to the same space. See ledger #113.

   The thresholds retain font-metric headroom rather than sitting on one local
   rasterisation. `ui-mode-nav-density.spec.ts` loads every consumer at every
   profile boundary and fails if a complete label clips, the bar scrolls, or a
   destination disappears. Adding or renaming a destination therefore requires
   deliberate profile calibration instead of inheriting an unsafe default.
   ───────────────────────────────────────────────────────────────────────── */

/* The centred column, and the ONLY container-query container. Measuring the
   full-bleed rail instead would report a width the slots do not have — on a
   1920px desktop it reads 1920px while the bar has 1312px — so density would
   be decided against a width that does not exist. This element carries no
   padding of its own, so its inline-size is unambiguous.

   80rem is the header row's own `max-w-7xl`; the ink offset is added back on
   both sides because the bar's first tab sits that far inside its box. Below
   `lg` the rail's gutter computes to zero, so the container is exactly the
   viewport and every calibrated profile reads the same available width on
   phone and tablet. */
@utility mode-nav {
  container-type: inline-size;
  container-name: mode-nav;
  min-width: 0;
  width: 100%;
  margin-inline: auto;
  max-width: calc(80rem + 2 * var(--mode-nav-ink-offset));
}

/* The rail is full-bleed so its bottom rule spans the viewport, exactly as
   `.secondary-navigation` does, while the capped column above puts the slots on
   the same centred rail as the header row — otherwise the first tab sits at the
   viewport edge on a desktop while the mode pill above it is centred.

   The addon slot the bar portals into is a SIBLING of `.edge-glass-header`, not
   a descendant, so none of the header's gutter is inherited. The bar already
   carries 1rem of ink offset of its own (the `<ul>`'s `px-1` plus the slot's
   `px-3`), which is exactly the base gutter and is why phone alignment was
   already right. The rail therefore contributes only what the header gutter has
   ABOVE that — nothing at base, 0.5rem from `lg` — so the ink follows the
   header without the container query losing width the density bands are
   calibrated against. The gutter reads `--header-edge-pad` rather than a
   literal for the reason stated on `.edge-glass-header`: a literal here is how
   the two drift apart. */
.mode-nav-rail {
  padding-left: calc(max(var(--header-edge-pad), var(--safe-area-left)) - var(--mode-nav-ink-offset));
  padding-right: calc(max(var(--header-edge-pad), var(--safe-area-right)) - var(--mode-nav-ink-offset));
}

@media (min-width: 1024px) {
  .mode-nav-rail {
    padding-left: calc(max(1.5rem, var(--safe-area-left)) - var(--mode-nav-ink-offset));
    padding-right: calc(max(1.5rem, var(--safe-area-right)) - var(--mode-nav-ink-offset));
  }
}

.mode-nav__bar {
  display: none;
}

.mode-nav__control {
  display: flex;
}

/* Which slots survive each band is decided in the component from the item
   COUNT alone — a static fact, never a measurement — and encoded as two
   attributes that CSS then switches on:
     `data-band="3|4|5"`  the narrowest band at which this destination appears
     `data-until="3|4"`   the widest band at which More still appears
   `data-density-profile` only changes the rem width at which a band becomes
   active; it never changes order or hides an item independently.
   Slots are never re-ordered, so the ones that stay do not move as the
   container narrows; the overflow only ever fills from the tail. */
.mode-nav__slot[data-band="4"],
.mode-nav__slot[data-band="5"] {
  display: none;
}

/* Which page you are on, when its own slot is not on screen.
   ------------------------------------------------------------------------
   `data-active-from` is the band at which the current page's slot appears, or
   `none` when it never gets one. Until the container reaches that band the
   page has no visible tab, so More carries its rule and its off-screen name;
   at and above it, the page's own `aria-current` tab does, and these turn off
   so nothing is marked or announced twice.

   This has to be CSS. The component knows which band would reveal the item and
   nothing else; the container query knows the band and nothing else. Deciding
   in the component alone can only ask "does this item have a band at all",
   which is silent for every page whose band the current width has not reached
   — five of Therapy's seven pages on a phone. */
.mode-nav__more-name {
  display: none;
}

.mode-nav__more[data-active-from] .mode-nav__more-name {
  display: inline;
}

.mode-nav__more[data-active-from] .mode-nav__ink {
  color: var(--text-heading);
}

.mode-nav__more[data-active-from] .mode-nav__rule {
  background-color: var(--clinical-accent);
}

/* Band 3 is every band, so a page that appears there is never carried here. */
.mode-nav__more[data-active-from="3"] .mode-nav__more-name {
  display: none;
}

.mode-nav__more[data-active-from="3"] .mode-nav__ink {
  color: var(--text-muted);
}

.mode-nav__more[data-active-from="3"] .mode-nav__rule {
  background-color: transparent;
}

@container mode-nav (min-width: 16rem) {
  .mode-nav[data-density-profile="two-item"] .mode-nav__control {
    display: none;
  }

  .mode-nav[data-density-profile="two-item"] .mode-nav__bar {
    display: flex;
  }
}

@container mode-nav (min-width: 17rem) {
  .mode-nav[data-density-profile="compact-four"] .mode-nav__control {
    display: none;
  }

  .mode-nav[data-density-profile="compact-four"] .mode-nav__bar {
    display: flex;
  }
}

@container mode-nav (min-width: 20rem) {
  .mode-nav[data-density-profile="balanced-four"] .mode-nav__control {
    display: none;
  }

  .mode-nav[data-density-profile="balanced-four"] .mode-nav__bar {
    display: flex;
  }
}

@container mode-nav (min-width: 22rem) {
  .mode-nav[data-density-profile="extended"] .mode-nav__control {
    display: none;
  }

  /* Content-sized and left-aligned at EVERY band, so the bar reads as a
     continuation of the header rather than columns stretched across it. */
  .mode-nav[data-density-profile="extended"] .mode-nav__bar {
    display: flex;
  }
}

@container mode-nav (min-width: 23rem) {
  .mode-nav[data-density-profile="compact-four"] .mode-nav__slot[data-band="4"] {
    display: flex;
  }

  .mode-nav[data-density-profile="compact-four"] .mode-nav__slot[data-until="3"] {
    display: none;
  }

  /* The page's own slot is on screen from here, so it owns the mark. */
  .mode-nav[data-density-profile="compact-four"] .mode-nav__more[data-active-from="4"] .mode-nav__more-name {
    display: none;
  }

  .mode-nav[data-density-profile="compact-four"] .mode-nav__more[data-active-from="4"] .mode-nav__ink {
    color: var(--text-muted);
  }

  .mode-nav[data-density-profile="compact-four"] .mode-nav__more[data-active-from="4"] .mode-nav__rule {
    background-color: transparent;
  }
}

@container mode-nav (min-width: 31rem) {
  .mode-nav[data-density-profile="balanced-four"] .mode-nav__slot[data-band="4"] {
    display: flex;
  }

  .mode-nav[data-density-profile="balanced-four"] .mode-nav__slot[data-until="3"] {
    display: none;
  }

  .mode-nav[data-density-profile="balanced-four"] .mode-nav__more[data-active-from="4"] .mode-nav__more-name {
    display: none;
  }

  .mode-nav[data-density-profile="balanced-four"] .mode-nav__more[data-active-from="4"] .mode-nav__ink {
    color: var(--text-muted);
  }

  .mode-nav[data-density-profile="balanced-four"] .mode-nav__more[data-active-from="4"] .mode-nav__rule {
    background-color: transparent;
  }
}

@container mode-nav (min-width: 33rem) {
  .mode-nav[data-density-profile="extended"] .mode-nav__slot[data-band="4"] {
    display: flex;
  }

  .mode-nav[data-density-profile="extended"] .mode-nav__slot[data-until="3"] {
    display: none;
  }

  .mode-nav[data-density-profile="extended"] .mode-nav__more[data-active-from="4"] .mode-nav__more-name {
    display: none;
  }

  .mode-nav[data-density-profile="extended"] .mode-nav__more[data-active-from="4"] .mode-nav__ink {
    color: var(--text-muted);
  }

  .mode-nav[data-density-profile="extended"] .mode-nav__more[data-active-from="4"] .mode-nav__rule {
    background-color: transparent;
  }
}

@container mode-nav (min-width: 42rem) {
  .mode-nav[data-density-profile="extended"] .mode-nav__slot[data-band="5"] {
    display: flex;
  }

  .mode-nav[data-density-profile="extended"] .mode-nav__slot[data-until="4"] {
    display: none;
  }

  .mode-nav[data-density-profile="extended"] .mode-nav__more[data-active-from="5"] .mode-nav__more-name {
    display: none;
  }

  .mode-nav[data-density-profile="extended"] .mode-nav__more[data-active-from="5"] .mode-nav__ink {
    color: var(--text-muted);
  }

  .mode-nav[data-density-profile="extended"] .mode-nav__more[data-active-from="5"] .mode-nav__rule {
    background-color: transparent;
  }
}

/* Motion keyframes (suppressed under prefers-reduced-motion below) */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes overlay-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes sheet-up {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes sheet-left {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes pop-in {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes dialog-rise {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes action-tray-in {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes mode-action-fold-up {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes mode-action-fold-down {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes shimmer {
  from {
    background-position: -150% 0;
  }
  to {
    background-position: 250% 0;
  }
}

/* Scroll the bright ECG strip like a cardiac monitor.
 *
 * The strip is two identical copies of the trace side by side inside a 200%-wide
 * HTML span, so translating it by exactly -50% lands copy 2 where copy 1 started
 * and the loop has no seam (the path starts at `M0 24` and ends at the same y).
 *
 * `transform` is the only animated property here on purpose. Mobile WebKit can
 * report animations on SVG path properties as running without repainting them,
 * especially in an installed PWA, and an earlier whole-line opacity pulse was
 * technically running but too subtle to read as motion on a phone hairline.
 * Translating a plain HTML layer is the same compositor-thread recipe that
 * `.animate-skeleton-shimmer::after` already uses reliably in this app. */
@keyframes answer-ecg-scroll {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/*
 * Helper classes with no same-property utility conflicts at any call site
 * live in @layer components so Tailwind utilities can override them.
 * Audited 2026-07-02 / 2026-07-08: the header chrome (edge-glass-header,
 * universal-header-*) and the composer pill surface (answer-footer-search-pill)
 * ARE layered. The semantic chat-composer-* classes and contextual composer
 * deltas stay UNLAYERED deliberately because <input>/<button> resets and the
 * positioning chrome (*-composer-edge,
 * *-search-edge/-dock/-backdrop, document-mobile-search-*) — layering those
 * changes rendered pixels. When adding a utility to an element carrying one of
 * those unlayered classes, check the class body first; the class wins.
 */
@layer components {
  /* `isolation` + `translateZ(0)` mirror .animate-skeleton-shimmer: they give the
     scrolling strip its own compositor layer so WebKit repaints it. The mask is
     static (never animated) and only softens the two clipped edges. */
  .answer-activity-trace {
    isolation: isolate;
    transform: translateZ(0);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  }

  .answer-activity-trace__sweep {
    animation: var(--animate-answer-ecg);
    will-change: transform;
  }

  .answer-activity-trace[data-density="compact"] .answer-activity-trace__sweep {
    animation: var(--animate-answer-ecg-compact);
  }

  .app-edge-backdrop {
    background: var(--background);
  }

  /*
   * Skip layout + paint for offscreen list cards while reserving their space
   * with an intrinsic-size estimate, so long result lists stay cheap to render
   * and scroll without virtualization. `auto` remembers each card's real size
   * after first paint; the 320px fallback only prevents scrollbar jump before
   * then. Degrades to normal rendering where content-visibility is unsupported.
   * Apply only to simple, non-focus-trapping cards (not elements measured for
   * sticky/container-query layout or opened via off-screen focus).
   */
  .content-auto {
    content-visibility: auto;
    contain-intrinsic-size: auto 320px;
  }

  .mobile-app-shell {
    min-height: 100svh;
    height: 100svh;
  }

  /*
   * Safari only collapses its browser chrome for document scrolling, so phone
   * browser tabs keep the shared shell in normal flow and let the document own
   * vertical scrolling. `overflow-x: clip` prevents horizontal spill without
   * turning `overflow-y: visible` into an implicit element scrollport.
   *
   * Installed iOS web apps do not have collapsible browser chrome and can
   * under-report svh/dvh. Their final override therefore uses the established
   * 100vh standalone workaround, still in normal flow, with a bounded inner
   * scroll surface. Controls alone consume safe-area padding; hidden chrome
   * never adds a content-facing reserve here.
   */
  @media (max-width: 639px) {
    .mobile-app-shell,
    .phone-viewport-shell {
      min-height: 100svh;
      height: auto;
    }

    .phone-viewport-shell {
      position: relative;
      inset: auto;
      width: 100%;
      overflow: visible;
    }

    .phone-viewport-frame {
      min-height: 100svh;
      height: auto;
      overflow: visible;
    }

    .phone-scroll-surface {
      overflow-x: clip;
      overflow-y: visible;
    }

    .phone-sticky-header-stack {
      position: sticky;
      top: 0;
      z-index: 30;
    }

    .phone-footer-layer {
      position: fixed;
    }

    .phone-overlay-header {
      position: fixed;
      inset-inline: 0;
      top: 0;
      width: 100%;
    }

    html:has([data-chrome-transitioning="true"]),
    html:has([data-reserve-transitioning="true"]),
    html:has([data-chrome-transitioning="true"]) body,
    html:has([data-reserve-transitioning="true"]) body,
    .phone-scroll-surface[data-chrome-transitioning="true"],
    .phone-scroll-surface[data-reserve-transitioning="true"],
    .phone-scroll-surface:has([data-reserve-transitioning="true"]) {
      overflow-anchor: none;
    }

    /* Browser tabs scroll the document, while installed PWAs scroll this
       surface. Focus targets therefore own their clearance via scroll-margin,
       which follows whichever ancestor is the active scroller. Keep the
       scroll-padding utilities on the surface as the standalone enhancement. */
    .phone-scroll-surface
      :where(
        a[href],
        button,
        input,
        select,
        textarea,
        [contenteditable="true"],
        [tabindex]:not([tabindex="-1"])
      ):focus {
      scroll-margin-block-start: calc(4.5rem + max(0.5rem, var(--safe-area-top)));
      scroll-margin-block-end: var(--phone-focus-bottom-clearance, var(--mobile-composer-reserve, 0rem));
    }
  }

  @media (max-width: 639px) and (display-mode: standalone) {
    .mobile-app-shell,
    .phone-viewport-shell {
      min-height: 100vh;
      height: 100vh;
      overflow: hidden;
    }

    .phone-viewport-frame {
      position: relative;
      min-height: 0;
      height: 100%;
      overflow: hidden;
    }

    .phone-scroll-surface {
      min-height: 0;
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior-y: contain;
      -webkit-overflow-scrolling: touch;
    }

    .phone-overlay-header {
      position: absolute;
    }

    .phone-sticky-header-stack {
      position: static;
    }

    .phone-sticky-header-stack.phone-overlay-header {
      position: absolute;
    }

    .phone-footer-layer {
      position: absolute;
    }
  }

  /* iOS Safari cannot put a plain document element in the browser fullscreen
     top layer, so DocumentFrame uses a fixed fallback. Remove every app-owned
     header/footer layer while that fallback is active: leaving the universal
     header visible above an otherwise fullscreen reader is both visually false
     and gives background controls pointer access. The document frame keeps its
     own compact toolbar and opaque surface, including safe-area padding. */
  html:has([data-document-frame][data-fullscreen-fallback="on"]),
  html:has([data-document-frame][data-fullscreen-fallback="on"]) body {
    overflow: hidden;
    overscroll-behavior: none;
  }

  html:has([data-document-frame][data-fullscreen-fallback="on"]) .phone-scroll-surface {
    overflow: hidden;
    overscroll-behavior: none;
  }

  html:has([data-document-frame][data-fullscreen-fallback="on"])
    :is(.phone-sticky-header-stack, .universal-header, [data-document-sticky-header], .document-viewer-composer) {
    visibility: hidden;
    pointer-events: none;
  }

  .mobile-popover-scroll {
    max-height: min(70svh, 28rem);
  }

  @supports (height: 100dvh) {
    @media (min-width: 640px) {
      .mobile-app-shell {
        min-height: 100dvh;
        height: 100dvh;
      }
    }

    .mobile-popover-scroll {
      max-height: min(70dvh, 28rem);
    }
  }

  /* Scroll and print helpers */
  .citation-link {
    position: relative;
  }

  .citation-link::after {
    content: "";
    position: absolute;
    top: -10px;
    bottom: -10px;
    left: -10px;
    right: -10px;
  }

  /* Premium skeleton shimmer: GPU translateX sweep on ::after (IMP-04).
     The highlight rides the compositor; the host keeps a solid fill so call sites
     only need background colour + this class. Entrance stagger can still use the
     host `animation` via .stagger-item without fighting the sweep. */
  .animate-skeleton-shimmer {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transform: translateZ(0);
  }

  .animate-skeleton-shimmer::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(
      100deg,
      transparent 20%,
      color-mix(in srgb, var(--surface-highlight) 55%, transparent) 50%,
      transparent 80%
    );
    will-change: transform;
    animation: shimmer-sweep 1.4s linear infinite;
    pointer-events: none;
  }

  /* Premium Double-Ring Focus style */
  .focus-ring-premium {
    outline: none;
  }
  .focus-ring-premium:focus-visible {
    outline: 2px solid var(--focus) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 25%, transparent) !important;
  }

  /* Underline-tab focus: an inset rounded ring that hugs the label instead of the
     default full-height box, which collides with the tablist border. */
  .focus-ring-tab {
    border-radius: var(--radius-md);
  }
  .focus-ring-tab:focus-visible {
    outline: 2px solid var(--focus) !important;
    outline-offset: -4px !important;
    box-shadow: none !important;
  }

  /* Source capsule: a compact visible face inside an invisible tap-sized target.
     Border/shadow/transform live here (component layer) so the face reads small
     while the hover, expanded, and focus chrome stay premium. Border colour is
     owned here — the face carries no border-colour utility — so these rules win
     without !important. */
  .source-capsule-face {
    border-color: var(--border);
    transition:
      border-color 150ms var(--ease-out-soft),
      box-shadow 150ms var(--ease-out-soft),
      transform 150ms var(--ease-spring);
  }

  .source-capsule-hit:hover .source-capsule-face {
    transform: translateY(-1px);
    border-color: var(--clinical-accent-border);
    box-shadow: var(--e1);
  }

  .source-capsule-hit[aria-expanded="true"] .source-capsule-face {
    border-color: var(--clinical-accent);
    box-shadow: var(--e1), var(--shadow-inset);
  }

  .source-capsule-hit[aria-expanded="true"]:hover .source-capsule-face {
    transform: translateY(-1px);
    border-color: var(--clinical-accent);
    box-shadow: var(--e1), var(--shadow-inset);
  }

  .source-capsule-hit:focus-visible .source-capsule-face {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 25%, transparent);
  }

  .polished-scroll {
    scrollbar-color: color-mix(in srgb, var(--border-strong) 65%, transparent) transparent;
    scrollbar-width: thin;
    transition: scrollbar-color 200ms ease;
  }

  .polished-scroll:hover,
  .polished-scroll:focus-within {
    scrollbar-color: color-mix(in srgb, var(--border-strong) 95%, var(--decoration-soft) 15%) transparent;
  }

  .polished-scroll::-webkit-scrollbar {
    height: 0.75rem;
    width: 0.75rem;
  }

  .polished-scroll::-webkit-scrollbar-track {
    background: transparent;
  }

  .polished-scroll::-webkit-scrollbar-corner {
    background: transparent;
  }

  .polished-scroll::-webkit-scrollbar-thumb {
    background-color: color-mix(in srgb, var(--border-strong) 60%, transparent);
    background-clip: padding-box;
    border: 3px solid transparent;
    border-radius: 999px;
    transition: background-color 150ms ease;
  }

  .polished-scroll:hover::-webkit-scrollbar-thumb {
    background-color: color-mix(in srgb, var(--border-strong) 90%, var(--decoration-soft) 15%);
  }

  .polished-scroll::-webkit-scrollbar-thumb:hover {
    background-color: color-mix(in srgb, var(--clinical-accent) 40%, var(--border-strong));
  }

  .polished-scroll::-webkit-scrollbar-thumb:active {
    background-color: color-mix(in srgb, var(--clinical-accent) 60%, var(--border-strong));
  }
}

/* Suppressing motion must not delete the status indicator. `opacity: 0` here used
   to hide the bright trace outright, so anyone with Reduce Motion on saw a dead
   panel while an answer was generating. At translateX(0) the first copy of the
   strip fills the box exactly, so simply stopping the animation leaves a correct,
   clearly visible static ECG. */
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) .answer-activity-trace__sweep {
    animation: none;
    opacity: 0.55;
  }
}

html[data-motion="reduced"] .answer-activity-trace__sweep {
  animation: none;
  opacity: 0.55;
}

/* IMP-04: Compositor-thread sweep used by .animate-skeleton-shimmer::after. */
@keyframes shimmer-sweep {
  100% {
    transform: translateX(100%);
  }
}

/* IMP-02: Staggered cascade entrance for search results and card grids.
   Apply .stagger-item to each list child and set --stagger-index via inline style
   or a :nth-child selector to sequence each card entrance at 35ms intervals.
   Reduced-motion guard stops the animation while keeping items fully visible. */
@keyframes cascade-fade-up {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.stagger-item {
  animation: cascade-fade-up var(--duration-moderate) var(--ease-out-soft) both;
  animation-delay: calc(var(--stagger-index, 0) * 35ms);
}

@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) .animate-skeleton-shimmer::after,
  html:not([data-motion="full"]) .stagger-item {
    animation: none !important;
  }
}

html[data-motion="reduced"] .animate-skeleton-shimmer::after,
html[data-motion="reduced"] .stagger-item {
  animation: none !important;
}

/* User preference and alternate output modes.
   `html:not([data-motion="full"])` is what lets the in-app Motion preference opt
   back in; without it this universal rule froze every animation on the page —
   including the answer-progress spinner — for anyone with OS Reduce Motion on. */
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) *,
  html:not([data-motion="full"]) *::before,
  html:not([data-motion="full"]) *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  html:not([data-motion="full"]) .source-capsule-hit:hover .source-capsule-face,
  html:not([data-motion="full"]) .source-capsule-hit[aria-expanded="true"]:hover .source-capsule-face {
    transform: none !important;
  }
}

/*
 * Explicit "Reduce motion" preference from the settings surface. Mirrors the
 * prefers-reduced-motion suppression above so users can opt in regardless of
 * their OS setting. The attribute is set on <html> before first paint by the
 * inline script in layout.tsx and kept in sync by useAppPreferences.
 */
html[data-motion="reduced"] *,
html[data-motion="reduced"] *::before,
html[data-motion="reduced"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
  transition-duration: 0.01ms !important;
}

html[data-motion="reduced"] .source-capsule-hit:hover .source-capsule-face,
html[data-motion="reduced"] .source-capsule-hit[aria-expanded="true"]:hover .source-capsule-face {
  transform: none !important;
}

@media (forced-colors: active) {
  :root,
  .dark {
    --background: Canvas;
    --app-shell: CanvasText;
    --surface: Canvas;
    --surface-raised: Canvas;
    --surface-subtle: Canvas;
    --surface-inset: Canvas;
    --text: CanvasText;
    --text-muted: CanvasText;
    --text-soft: CanvasText;
    --decoration-soft: GrayText;
    --text-placeholder: CanvasText;
    --border: ButtonBorder;
    --border-strong: ButtonText;
    --primary: LinkText;
    --primary-strong: LinkText;
    --primary-soft: Canvas;
    --primary-contrast: ButtonText;
    --surface-chrome: Canvas;
    /* Chromium paints a Canvas backplate behind every glyph run in
       forced-colors mode, so label/glyph tokens must never resolve to the
       Canvas/ButtonFace family — Canvas-on-Canvas glyphs vanish and solid
       buttons render blank label boxes. SVG icon strokes get no backplate at
       all, so the dark command fill also cannot survive: it would swallow
       ButtonText icons. Command controls therefore flatten to the native HCM
       button pairing (ButtonFace fill, ButtonText glyphs); accent fills keep
       their system colors and flip only their glyph tokens. */
    --command: ButtonFace;
    --command-hover: ButtonFace;
    --command-contrast: ButtonText;
    --clinical-accent: LinkText;
    --clinical-accent-hover: LinkText;
    --clinical-accent-active: LinkText;
    --clinical-accent-strong: LinkText;
    --clinical-accent-soft: Canvas;
    --clinical-accent-border: ButtonBorder;
    --clinical-accent-contrast: ButtonText;
    --search-band-badge-bg: Highlight;
    --info: LinkText;
    --info-soft: Canvas;
    --success: CanvasText;
    --success-soft: Canvas;
    --warning: CanvasText;
    --warning-soft: Canvas;
    --danger: Mark;
    --danger-soft: Canvas;
    --danger-solid: Mark;
    --danger-solid-hover: Mark;
    --danger-solid-active: Mark;
    /* Mark's palette-paired foreground — ButtonText is not guaranteed to
       contrast a Mark fill in arbitrary user schemes. */
    --danger-solid-contrast: MarkText;
    --tone-purple: CanvasText;
    --tone-purple-soft: Canvas;
    --tone-purple-border: ButtonBorder;
    --tone-indigo: CanvasText;
    --tone-indigo-soft: Canvas;
    --tone-indigo-border: ButtonBorder;
    --tone-rose: CanvasText;
    --tone-rose-soft: Canvas;
    --tone-rose-border: ButtonBorder;
    --tone-slate: CanvasText;
    --tone-slate-soft: Canvas;
    --tone-slate-border: ButtonBorder;
    --focus: Highlight;
    --surface-lux: Canvas;
    --surface-glass: Canvas;
    --surface-wash: Canvas;
    --panel-gloss: Canvas;
    --overlay-backdrop: CanvasText;
    --text-heading: CanvasText;
    --border-lux: ButtonBorder;
    --glow-primary: none;
    --glow-soft: none;
    /* Flatten the ladder itself, not only the role aliases, so a call site that
       reaches for a tier directly cannot reintroduce a shadow here. */
    --e1: none;
    --e2: none;
    --e3: none;
    --e4: none;
    --shadow-soft: none;
    --shadow-card: none;
    --shadow-hover: none;
    --shadow-elevated: none;
    --shadow-overlay: none;
    --shadow-lux: none;
    --shadow-inset: none;
    --shadow-rail-active: none;
  }

  button,
  a,
  summary,
  input,
  textarea,
  select {
    forced-color-adjust: auto;
  }

  /* Glass header: color-mix(Canvas, transparent) would thin system-color
     contrast, so force a solid Canvas bar and drop the scrim blur entirely.
     Deliberately UNLAYERED (unlike the other fallbacks): in forced-colors
     mode even call-site utilities must not restore a translucent bar. */
  .edge-glass-header,
  .universal-header {
    background: Canvas;
  }

  .edge-glass-header-backdrop,
  .edge-glass-header-backdrop::before,
  .edge-glass-header-backdrop::after {
    background: Canvas;
    backdrop-filter: none;
    mask-image: none;
    -webkit-mask-image: none;
  }

  /* Composer pill/divider/chip use color-mix(...transparent) for their border,
     fill, and separator, which thins system-color contrast exactly like the
     glass header — force them opaque too (unlayered, matching the header
     treatment above) so the composer boundary reads at full strength and its
     divider stays visible next to the header chrome right above it. */
  .answer-footer-search-pill,
  .answer-footer-search-chip {
    border: 1px solid ButtonBorder;
    background: Canvas;
    backdrop-filter: none;
    box-shadow: none;
  }

  .answer-footer-search-divider {
    background: ButtonBorder;
  }
}

/* =========================================================================
 * Print theme (SPEC §4.12) — four scoped blocks below:
 *   1) Global print reset + chrome hide
 *   2) Factsheet export isolation (html.factsheets-printing)
 *   3) Safety-plan tool ([data-print-hide] / [data-safety-plan-copy])
 *   4) Therapy Compass isolation (named @page + data-therapy-root)
 * Chrome must prefer [data-print-hide]; element-name selectors below are
 * transitional back-compat until every chrome owner is attribute-marked.
 * ========================================================================= */
@media print {
  html,
  body {
    min-width: 0;
    overflow: visible;
    background: #fff;
    color: #000;
  }

  /* Prefer attribute marking for new chrome (SPEC §4.12). */
  [data-print-hide] {
    display: none !important;
  }

  /* Transitional element-name chrome hide — do not extend this list. The viewer
     toolbar left it when DocumentFrame took ownership: that band carries
     `data-print-hide`, so the attribute rule above already covers it. */
  header,
  nav,
  button {
    display: none !important;
  }

  main,
  section,
  article,
  .source-print {
    overflow: visible !important;
    box-shadow: none !important;
  }

  details.source-print > summary {
    display: none !important;
  }

  details.source-print > :not(summary) {
    display: block !important;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  /* Flatten glass/elevation so print is ink-on-paper. */
  * {
    text-shadow: none !important;
  }
}

/* Patient factsheet print sheet.
 * The clean A4 sheet is hidden on screen. When the user hits Download PDF / Print,
 * the detail component toggles `factsheets-printing` on <html>; in print we then hide
 * every rendered element and reveal ONLY the print sheet, so the shell chrome
 * (sidebar, composer, action bar) never appears in the exported PDF. */
.factsheet-print-sheet {
  display: none;
}

@media print {
  /* Print only the portaled clean sheet. Removing every other <body> subtree from
   * layout flow (display:none — NOT visibility:hidden) means the full-height shell
   * chrome (sidebar <aside>, composer) and the tall screen article no longer
   * paginate into trailing blank PDF pages. The print sheet keeps normal static
   * flow inside its portal so it paginates correctly across pages. */
  html.factsheets-printing body > *:not(.factsheet-print-portal) {
    display: none !important;
  }

  html.factsheets-printing .factsheet-print-portal,
  html.factsheets-printing .factsheet-print-sheet {
    display: block !important;
  }
}

/* Caring Contacts workspace (/caring-contacts) print safeguard.
 * The transitional `header, nav, button { display: none }` rule above removes the
 * workspace header when printing, and the "fictional data only" marker lives in
 * it — so a printed page of invented patients would carry nothing saying they are
 * invented. That marker is a safeguard, not chrome. Restore it and only it,
 * scoped to its own attributes, the same way the safety-plan patient copy
 * restores its document header below. */
@media print {
  [data-synthetic-marker-host] {
    display: block !important;
    position: static !important;
  }

  [data-synthetic-marker] {
    display: inline-flex !important;
  }
}

/* Safety plan generator (/safety-plan) print export.
 * "Print / PDF" (and Cmd+P) should hand over the patient copy only, so the
 * builder/editor chrome is removed and the patient-copy document header — which
 * the global `header { display: none }` rule above would otherwise drop — is
 * restored. Scoped to the tool so no other route's print behaviour changes. */
@media print {
  .safety-plan-tool [data-print-hide] {
    display: none !important;
  }

  .safety-plan-tool [data-safety-plan-copy] {
    display: block !important;
    position: static !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .safety-plan-tool [data-safety-plan-copy] header {
    display: grid !important;
  }
}

/* Data-handling page (/privacy) print export.
 * The page is written to be filed in a governance pack, so a printed copy has to
 * carry the title, the fact summary and every section heading. The transitional
 * element-name rules above (`header`, `nav`, `button { display: none }`) would
 * drop all three, because this page's section headings are disclosure triggers
 * and its summary tiles are buttons. Chrome that genuinely should not print is
 * removed by `data-print-hide` / `print:hidden` instead, and the two-column
 * reading layout collapses to one column once the sticky index is gone.
 * Scoped to the route so no other page's print behaviour changes. */
@media print {
  .privacy-page header {
    display: block !important;
  }

  .privacy-page [data-print-keep] {
    display: flex !important;
  }

  .privacy-page [data-print-stack] {
    display: block !important;
  }
}

/* Phone reserve padding animates while the short-lived reserve-transition
   marker is active (hide and reveal). Mode/route flips of
   --mobile-composer-reserve (hero ↔ dock) must snap — those clear the marker
   immediately. DocumentViewer keeps its own Tailwind duration classes. */
@media (max-width: 639px) {
  #main-content[data-reserve-transitioning="true"] {
    will-change: padding-bottom;
    transition: padding-bottom var(--duration-slow) var(--ease-out-soft);
  }
  #main-content[data-reserve-transitioning="true"] [data-testid="mobile-composer-reserve-pad"] {
    will-change: padding-bottom;
    transition: padding-bottom var(--duration-slow) var(--ease-out-soft);
  }
  [data-testid="document-viewer-content"][data-reserve-transitioning="true"] {
    will-change: padding-bottom;
    transition: padding-bottom var(--duration-slow) var(--ease-out-soft);
  }
  /* A page-owned reserve changes scroll height below the current viewport.
     Suspend browser anchoring only for that transition so Chrome cannot turn
     the intended padding release into a synthetic upward scroll/reveal loop. */
  #main-content:has([data-reserve-owner][data-reserve-transitioning="true"]) {
    overflow-anchor: none;
  }
  [data-reserve-owner][data-reserve-transitioning="true"] {
    will-change: padding-bottom;
    transition: padding-bottom var(--duration-slow) var(--ease-out-soft);
  }
}

@media (max-width: 639px) and (prefers-reduced-motion: reduce) {
  #main-content[data-reserve-transitioning="true"],
  #main-content[data-reserve-transitioning="true"] [data-testid="mobile-composer-reserve-pad"],
  [data-testid="document-viewer-content"][data-reserve-transitioning="true"],
  [data-reserve-owner][data-reserve-transitioning="true"] {
    transition: none;
  }
}

/* Theme switch micro-interaction (Improvement 2.2) */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *:before,
html.theme-transitioning *:after {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke !important;
  transition-duration: var(--duration-moderate) !important;
  transition-timing-function: var(--ease-chrome-hide) !important;
}

@media (prefers-reduced-motion: reduce) {
  html.theme-transitioning,
  html.theme-transitioning *,
  html.theme-transitioning *:before,
  html.theme-transitioning *:after {
    transition: none !important;
  }
}

/* Windows High Contrast / Forced Colors Compatibility (Improvement 2.3).
   Token remap only — glass-header Canvas fills live in the earlier
   forced-colors block; do not blanket-reset [aria-selected="true"] or
   invent unused .surface-raised selectors with !important. */
@media (forced-colors: active) {
  :root,
  .dark {
    --border: CanvasText;
    --border-lux: CanvasText;
    --border-strong: CanvasText;
    --focus: Highlight;
  }
}

/* ─── SEARCH RESULTS BAND ──────────────────────────────────────────────────
   Weight comes down across this surface: nothing is bold. The one-line anatomy
   split the two apart rather than sharing a step — the figure carries 600 and
   the query 450, so the count leads and the query reads as its subject. They
   are separated by tabular numerals and a hairline rather than by shouting.
   (This said "the heaviest step is 580, and the query and the figure share it"
   until the redesign; both numbers changed and the sentence did not.)
   Expressed here as numeric
   `font-weight` on named classes rather than Tailwind arbitrary values because
   (a) that is the existing idiom in this file, and (b) `check:type-scale
   --strict` is a zero gate on arbitrary `text-[Npx]` utilities. Geist is a
   variable face, so these interpolate instead of snapping to 700. */
/* Deliberately UNLAYERED. Tailwind's utilities layer outranks @layer
   components regardless of selector specificity, and the band root also
   carries the `border` / `border-[color:var(--border)]` utilities — inside a
   layer these rules lose and the accent rail silently renders as a neutral
   1px border. Verify with computed styles, not class presence. */
/* The accent used to be the card's real border-top, drawn edge to edge. At 58px
   the band is a bar rather than a card lid, and a line across its whole width
   reads as a divider between the composer and the results instead of as the
   band's own mark. It moves inside the padding: 2 x 18px, level with the count.

   Drawn as a `border-left` on a zero-width box rather than as a background, for
   two reasons that are not stylistic. Forced colors drops backgrounds outright
   but maps border colour to CanvasText, and `border-left-style: double` is how
   the faulted state stays structural there — the same idiom the old border-top
   carried in the forced-colors block below, and the one high-contrast
   distinction that matters clinically. */
.search-band-lead {
  /* `display: block` so width/height apply even if this mark is ever moved out
     of a flex/grid formatting context. As a bare inline span those dimensions
     are ignored and the stroke collapses to nothing while class-presence
     assertions still pass. */
  display: block;
  box-sizing: content-box;
  width: 0;
  height: 1.125rem;
  border-left: 2px solid var(--clinical-accent);
  /* 2 + 4 = 6px, which is the faulted mark's own footprint, so the count does
     not shift sideways the moment a search degrades. */
  margin-right: 4px;
}
/* Keyed off the element rather than `.search-band[data-status=…] &`: a
   descendant selector would put `.search-band` back into the unlayered-visual
   inventory with a live component rule, and the style-contract registry would
   then require a second contract for a class that no longer paints anything. */
.search-band-lead[data-tone="warning"] {
  border-left: 6px double var(--warning);
  margin-right: 0;
}

/* The query sits after the count rather than leading the band, so it steps down
   to reading weight: it anchors the number without competing with it, and it is
   the part that truncates when the line runs out. */
.search-band-subject {
  font-size: 0.8125rem;
  font-weight: 450;
  letter-spacing: -0.006em;
}
/* Small enough to read as a label rather than a control, which is what stops a
   row of accent chips reading as a second bank of buttons. */
.search-band-shelf-label {
  font-size: 0.625rem;
  font-weight: 560;
  letter-spacing: 0.1em;
}
/* The count and its noun are the same size and differ only by weight, so the
   pair reads as one phrase rather than as a number with a caption. Tabular, so
   the line does not reflow as the digit count changes under a live region. */
.search-band-count {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.014em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
/* A zero is a real answer, but it is not news; it steps down in weight and
   colour rather than shouting a result that is not there. */
.search-band-count[data-zero="true"] {
  font-weight: 470;
  color: var(--text-muted);
}
.search-band-count-word {
  font-size: 0.9375rem;
  font-weight: 450;
  letter-spacing: -0.014em;
}
@media (min-width: 40rem) {
  .search-band-count,
  .search-band-count-word {
    font-size: 1rem;
  }
  .search-band-subject {
    font-size: 0.875rem;
  }
}
.search-band-fault {
  font-size: 0.84375rem;
  font-weight: 520;
}
.search-band-chip {
  font-size: 0.78125rem;
  font-weight: 470;
}
.search-band-chip[data-selected="true"] {
  font-weight: 540;
}
.search-band-sort-option {
  font-size: 0.78125rem;
  font-weight: 470;
}
.search-band-sort-option[aria-pressed="true"] {
  font-weight: 560;
}
.search-band-ghost {
  font-size: 0.78125rem;
  font-weight: 480;
}
/* A gradient hairline, so it fades out at both ends rather than butting into
   the vertical padding. Gradients are not forced-colors mapped; see below. */
.search-band-rule {
  background: linear-gradient(180deg, transparent, var(--border-strong) 50%, transparent);
}

/* MUST remain the last rules in this stylesheet. At equal specificity a later
   rule wins, so a forced-colors block placed earlier is silently overridden
   while still looking correct in review. Rendering (not reading) exposed three
   losses that colour alone was hiding. */
@media (forced-colors: active) {
  /* 1 — the lead mark survives as stroke count, not hue: --clinical-accent
     resolves to LinkText and --warning is not remapped by the token block at
     all, so "accent" and "warning" would paint the same mark. One stroke is a
     healthy search; two is a degraded one. */
  .search-band-lead {
    border-left-color: CanvasText;
    height: 1.25rem;
  }
  .search-band-lead[data-tone="warning"] {
    border-left: 6px double CanvasText;
  }
  /* 2 — a fault also doubles the card's own top edge. Structural, not
     chromatic, and deliberately redundant with the mark above: at 58px an 18px
     stroke is easy to miss, and this is the one distinction that matters
     clinically — without it a failed search is visually identical to a
     successful one. */
  .search-band[data-status="error"],
  .search-band[data-status="unauthorized"] {
    border-top-width: 4px;
    border-top-style: double;
  }
  /* 3 — the badged filter count is a colour-mixed tint, which forced colors
     drops entirely, leaving a bare digit against the control's own label. */
  .search-band-badge {
    background: Highlight;
    color: HighlightText;
    forced-color-adjust: none;
  }
  .search-band-fault {
    font-weight: 640;
  }
  /* 4 — selected sort/chip lose their fill, so carry them on the system's own
     selection pair. forced-color-adjust is required: Highlight resolves
     semi-transparent and Chromium otherwise paints a Canvas backplate straight
     over the label. */
  .search-band-chip[data-selected="true"],
  .search-band-sort-option[aria-pressed="true"] {
    background: Highlight;
    color: HighlightText;
    border-color: Highlight;
    box-shadow: none;
    forced-color-adjust: none;
  }
  .search-band-rule {
    background: CanvasText;
    opacity: 1;
  }
  /* --warning-border is not remapped by the token block above, so pin it here
     or the fault panel keeps a raw hex border under forced colors. */
  .search-band-fault-panel {
    border-color: CanvasText;
  }
}

/* =============================================================================
 * Therapy Compass residuals — irreducible rules that cannot become utilities.
 * Printable paper tokens and thin scrollbars. Everything else in the old
 * therapy-compass.css parallel system is token-backed Tailwind on the components.
 * ============================================================================= */

[data-therapy-paper] {
  /* Fixed print palette — deliberately NOT theme-reactive. Accent mirrors Clinical Sky. */
  --tc-paper-background: #ffffff;
  --tc-paper-ink: #0f1720;
  --tc-paper-body: #2b3444;
  --tc-paper-muted: #5b6472;
  --tc-paper-accent: #185c99;
  --tc-paper-accent-strong: #1d6fb8;
  --tc-paper-accent-background: #f4f7fb;
  --tc-paper-accent-border: #d7e3f0;
  --tc-paper-border: #d6dce5;
  --tc-paper-border-subtle: #e6e9ee;
  --tc-paper-warning: #8a5a12;
  --tc-paper-warning-background: #fbf6ee;
  --tc-paper-warning-border: #f0e2c8;
  --tc-paper-focus: #1d6fb8;
  --tc-paper-shadow: 0 2px 6px rgb(15 23 32 / 8%), 0 18px 42px rgb(15 23 32 / 10%);
  background: var(--tc-paper-background);
  color: var(--tc-paper-ink);
}

[data-therapy-paper] [contenteditable="true"]:focus-visible {
  outline-color: var(--tc-paper-focus);
}

@media (max-width: 640px) {
  [data-therapy-scroll-sm] {
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .therapy-pathway-list {
    border-right: 0 !important;
    border-bottom: 1px solid var(--border);
  }

  [data-therapy-paper] {
    padding: 28px 22px !important;
  }
}

@media print {
  @page shared-clinical-output {
    size: a4 portrait;
    margin: 14mm;
  }

  body:has([data-print-output]),
  body:has([data-therapy-root]) {
    background: #ffffff !important;
  }

  body:has([data-print-output]) * {
    visibility: hidden !important;
  }

  body:has([data-print-output]) [data-print-output],
  body:has([data-print-output]) [data-print-output] * {
    visibility: visible !important;
  }

  body:has([data-print-output]) [data-print-output] {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    page: shared-clinical-output;
  }

  body:has([data-print-output]) [data-print-hide],
  body:has([data-print-output]) [data-therapy-no-print] {
    display: none !important;
  }

  [data-print-provenance] {
    display: block !important;
    margin-top: 8mm;
    border-top: 1px solid var(--border);
    padding-top: var(--spacing-icon-xs);
    color: var(--text-muted);
    font-size: 9pt;
  }

  /*
   * Opt-in print capabilities, declared here beside the rules that decide what
   * prints at all. Each is inert until a `PrintOutput` or `PrintSection` asks
   * for it, so no existing printed document changes.
   */

  [data-print-break-inside="avoid"] {
    break-inside: avoid;
  }

  [data-print-break-before="page"] {
    break-before: page;
  }

  /*
   * Monochrome output. A greyscale printer flattens the tint that carried a
   * state on screen, so the tint is removed outright and the border and the
   * words carry it instead. Deliberately fixed ink rather than a token: this is
   * a paper palette and must not follow the reader's theme.
   */
  [data-print-monochrome],
  [data-print-monochrome] * {
    background-color: #ffffff !important;
    background-image: none !important;
    color: #000000 !important;
    border-color: #000000 !important;
  }

  [data-print-stamp],
  [data-print-confidential] {
    display: block !important;
    margin-top: var(--print-furniture-gap);
    color: var(--text-muted);
    font-size: 9pt;
  }
}

[data-print-provenance] {
  display: none;
}
.clinical-ask-workspace {
  margin: var(--spacing-icon-md) auto;
  max-width: 56rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--spacing-icon-md);
  background: var(--surface);
}
.clinical-ask-output-actions {
  display: flex;
  align-items: center;
  gap: calc(2 * var(--radius-xs));
}
.clinical-ask-output-actions {
  flex-wrap: wrap;
}
.clinical-ask-workspace button,
.clinical-ask-output-actions button {
  min-height: var(--spacing-tap);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--radius-md) var(--spacing-icon-sm);
}
.clinical-ask-field {
  display: grid;
  gap: var(--radius-sm);
  margin-block: var(--spacing-icon-xs);
}
.clinical-ask-field input {
  min-height: var(--spacing-tap);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding-inline: var(--spacing-icon-xs);
  background: var(--surface);
  color: var(--text);
}
.clinical-ask-context-item {
  border-block-end: 1px solid var(--border);
  padding-block: var(--spacing-icon-xs);
}
@media (prefers-reduced-motion: reduce) {
  .clinical-ask-workspace * {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}
@media (forced-colors: active) {
  .search-band,
  .clinical-ask-workspace,
  .clinical-ask-workspace button {
    border: 1px solid CanvasText;
  }

  /* Quiet default-mode focus is a border shift / color-mix outline. Forced
     colors remaps `--focus` to Highlight; restore that ring so keyboard users
     do not lose the only system-color affordance. Nested search inputs stay
     outline-none — their rounded shell (or composer pill) owns the ring. */
  .search-shell:focus-within,
  .chat-composer-shell-delta:focus-within {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }

  :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select):focus-visible,
  input.field-control:focus-visible,
  textarea.field-control:focus-visible,
  select.field-control:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }

  .search-shell-input:focus,
  .search-shell-input:focus-visible {
    outline: none;
  }
}

/* Print furniture. It exists for the paper and would only be noise on screen. */
[data-print-confidential],
[data-print-stamp] {
  display: none;
}