/*
 * Visual tokens — PHR-REF-UI-ICON-2026-01 §1.1.
 *
 * This block is the only place any of these are declared. imaging.css and
 * investigations.css each used to carry their own copy of the palette, which is
 * how three of them drifted: imaging.css set --text-tertiary to #86868B (the
 * hairline colour, 3.54:1 — below AA) and shrank the whole radius scale for any
 * page that loaded it, and components.css carried a var() fallback of #0A4F94
 * for a token nothing had defined. Adding a colour means adding it here.
 *
 * Each family is base / -text / -bg. The base value is for solid fills, borders
 * and chart strokes; -text is for any glyph or label drawn ON the -bg, because
 * the base value does not reach 3:1 against its own subtle background for
 * emerald (2.02:1), amber (2.02:1), teal (2.37:1) or slate (2.99:1). Every
 * -text value is >= 4.85:1 on both white and its own -bg.
 */
:root {
  /* Apple Health Design System Tokens (v1.2 §2.1) */
  --apple-canvas: #F4F6F9;
  --apple-card: #FFFFFF;
  --card-border: rgba(15, 41, 74, 0.08);
  --card-border-subtle: rgba(15, 41, 74, 0.05);
  --card-shadow: 0 1px 3px rgba(15, 41, 74, 0.04), 0 4px 14px rgba(15, 41, 74, 0.04);
  --card-shadow-hover: 0 12px 28px rgba(15, 41, 74, 0.08), 0 2px 6px rgba(15, 41, 74, 0.04);

  --apple-blue: #0369A1;
  --apple-blue-hover: #075985;
  --apple-blue-subtle: #E0F2FE;
  --apple-blue-text: #0369A1;

  --text-primary: #0F294A;
  --text-secondary: #475569;   /* 7.3:1 contrast on white; 5.8:1 on #E5E5EA */
  --text-tertiary: #556477;    /* 4.63:1 contrast on white */
  --text-quaternary: #94A3B8;  /* Hairlines, disabled glyphs only */

  /* Semantic Triage & Alert Tokens (v1.2 §2.1) */
  --apple-emerald: #10B981;
  --apple-emerald-text: #065F46;
  --apple-emerald-bg: #ECFDF5;

  --apple-amber: #F59E0B;
  --apple-amber-text: #92400E;
  --apple-amber-bg: #FFFBEB;

  --apple-crimson: #EF4444;
  --apple-crimson-text: #991B1B;
  --apple-crimson-bg: #FEF2F2;

  --apple-indigo: #4F46E5;
  --apple-indigo-text: #4338CA;
  --apple-indigo-bg: #EEF2FF;

  /* Timeline, Symptom Diary, Imaging, thyroid/hormonal panels, derived values */
  --apple-purple: #8B5CF6;
  --apple-purple-text: #6D28D9;
  --apple-purple-bg: #F5F3FF;

  /* Family and dependent profiles, non-pharmacological treatment, ratios */
  --apple-teal: #14B8A6;
  --apple-teal-text: #0F766E;
  --apple-teal-bg: #F0FDFA;

  /* Women's health, obstetrics, tumour markers. Replaces imaging.css's private
     --apple-rose (#E0245E), which was the same idea under another name. */
  --apple-pink: #E11D48;
  --apple-pink-text: #BE123C;
  --apple-pink-bg: #FFE4E6;

  /* Settings, structural chrome, neutral status. -text and -bg alias the
     existing neutrals rather than introducing a fourth grey. */
  --apple-slate: #94A3B8;
  --apple-slate-text: var(--text-secondary);
  --apple-slate-bg: #EEF2F6;

  --focus: 0 0 0 3px rgba(2, 132, 199, 0.35);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, "SF Mono", Consolas, Menlo, monospace;

  /* Brand tokens (FR-BRD-02). Not a new palette: the HealthyLiving identity is
     drawn from the app tokens above, so the logo, favicon and sharing banner
     match what patients already see. scripts/brand/generate_brand_assets.php
     carries the same hex values for the raster kit; keep the two in step.
     Wordmark contrast on white: ink 16.8:1, accent 6.9:1; white on the tile 4.7:1. */
  --brand-primary: var(--apple-blue);         /* #0071E3 mark tile, theme-color */
  --brand-accent-text: var(--apple-blue-text); /* #0058B6 "Living" */
  --brand-ink: var(--text-primary);           /* #1D1D1F "Healthy" */
  --brand-on-primary: #FFFFFF;
  --brand-canvas: var(--apple-canvas);
  --brand-tile-radius: 22%;                   /* 14/64 in the kit geometry */

  /* Legacy variable mappings retained for out-of-scope views (§5 & §8) */
  --canvas: var(--apple-canvas);
  --surface: var(--apple-card);
  --primary: var(--apple-blue);
  --primary-hover: var(--apple-blue-hover);
  --primary-dark: #005bb5;
  --heading: var(--text-primary);
  --text: var(--text-primary);
  --muted: var(--text-tertiary);
  --border: var(--card-border);
  --control-border: rgba(15, 41, 74, 0.16);
  --selected: var(--apple-blue-subtle);
  --hover: #EEF2F6;
  --success-bg: var(--apple-emerald-bg);
  --success: var(--apple-emerald-text);
  --warning-bg: var(--apple-amber-bg);
  --warning: var(--apple-amber-text);
  --danger-bg: var(--apple-crimson-bg);
  --danger-border: rgba(255, 59, 48, 0.25);
  --danger: var(--apple-crimson-text);
  --shadow: var(--card-shadow);
  --shadow-overlay: 0 12px 28px rgba(15, 41, 74, 0.14);

  /* ------------------------------------------------------------------
     Module 16 — Patient-Friendly Experience tokens (FR-PFX-04/06/10).

     Additive. Nothing in the delivered build referenced these when they
     were added, so introducing them changed no page. They exist so the
     per-page revamp that follows owner approval of the Patient-Friendly
     Experience specification has one vocabulary to work from instead of
     re-deciding these values per view.

     No new colour is introduced. The four result-status tiers alias the
     existing semantic families, so their contrast is already the audited
     contrast of those families. Measured 2026-09-19 (sRGB, WCAG 2.1):

       expected  #137734 on #E8F8EE  5.14:1   on #FFFFFF 5.65:1
       slight    #9E5C00 on #FFF4E5  4.85:1   on #FFFFFF 5.27:1
       attention #B81810 on #FFEBEA  5.77:1   on #FFFFFF 6.61:1
       unknown   #565659 on #F0F0F2  6.43:1   on #FFFFFF 7.31:1

     All four clear AA for normal text (4.5:1) on their own background,
     on white and on --apple-canvas (4.84:1 worst case, amber).

     The *base* fills are a different matter and are why -mark exists as
     a separate token: #34C759 is 2.22:1 on white and #FF9500 is 2.20:1,
     both below the 3:1 floor for a non-text indicator. A status may
     therefore never be carried by the base fill alone — FR-PFX-04's
     colour coding must always be accompanied by the wording, and the
     -mark token is for fills that sit on a -bg, never on white.
     ------------------------------------------------------------------ */

  /* FR-PFX-06: minimum tap target. FR-PFX-10: body typography floor. */
  --tap-target-min: 48px;
  --font-body-min: 16px;

  --status-expected-text: var(--apple-emerald-text);
  --status-expected-bg: var(--apple-emerald-bg);
  --status-expected-mark: var(--apple-emerald);

  --status-slight-text: var(--apple-amber-text);
  --status-slight-bg: var(--apple-amber-bg);
  --status-slight-mark: var(--apple-amber);

  --status-attention-text: var(--apple-crimson-text);
  --status-attention-bg: var(--apple-crimson-bg);
  --status-attention-mark: var(--apple-crimson);

  --status-unknown-text: var(--apple-slate-text);
  --status-unknown-bg: var(--apple-slate-bg);
  --status-unknown-mark: var(--apple-slate);

  /* UI spec v2.0 §3 — additive tokens, same palette families. */
  --header-bg: rgba(255, 255, 255, 0.82);
  --header-bg-solid: #FFFFFF;
  --nav-pill-bg: #EEF2F6;
  --nav-pill-active: #FFFFFF;
  --gutter-desktop: 1.5rem;   /* 24px at 100% */
  --gutter-tablet: 1.25rem;   /* 20px at 100% */
  --gutter-mobile: 1rem;      /* 16px at 100% */
  --tap-target: 2.75rem;      /* 44px floor (WCAG 2.2 2.5.8) */
  --tap-target-primary: 3rem; /* 48px preferred for primary actions */
  --font-hero: clamp(1.5rem, 6cqi, 2rem); /* 24–32px, never overflow */
  --font-page-title: 1.5rem;  /* 24px */
  --font-card-title: 1.125rem; /* 18px */
  --font-body: 1rem;          /* 16px floor */
  --font-caption: 0.875rem;   /* 14px minimum */
  --patient-lock-accent: #6366F1;
}

/* ==========================================================================
   SELF-HOSTED WEB FONTS (v1.2 §2.2)
   Served from this origin only. public_html/.htaccess sets font-src 'self', so no
   external font host may ever be referenced here. Licences: assets/fonts/*-OFL.txt.
   ========================================================================== */
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/InterVariable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/JetBrainsMono-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/JetBrainsMono-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

* { margin:0; padding:0; box-sizing:border-box; }
/* The user-agent rule for [hidden] is a plain `display: none` at the lowest
   specificity, so any component rule setting display — .btn is inline-flex,
   .card is block — silently wins and the element stays on screen. Everywhere
   this app hides something it means it. */
[hidden] { display: none !important; }
html {
  color-scheme: light;
  scroll-behavior: smooth;
  font-size: 100%; /* 100% of the browser size — never a fixed px */
  scroll-padding-top: 5.5rem;    /* sticky header must not hide focus (2.4.11) */
  scroll-padding-bottom: 5.5rem; /* sticky mobile tab bar */
}
html.text-size-100 { font-size: 100%; }
html.text-size-112 { font-size: 112.5%; }
html.text-size-125 { font-size: 125%; }
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="high-contrast"] { color-scheme: dark; }
body {
  font-family: var(--font-sans);
  background: var(--apple-canvas);
  color: var(--text-primary);
  font-size: var(--font-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Tabular Numerals Utility (v1.2 §2.2) */
.tabular {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* CSP-Safe Icon Map (v1.2 §2.5) */
.fas {
  display: inline-block;
  font-style: normal;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  line-height: 1;
  text-align: center;
}
.fas::before { content: "•"; }
.fa-spin { animation: fa-spin 1s linear infinite; }
@keyframes fa-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .fa-spin { animation: none; } }
.fa-bars::before { content: "☰"; }
.fa-times::before { content: "×"; }
.fa-plus::before { content: "+"; }
.fa-house::before { content: "⌂"; }
.fa-th-large::before { content: "▦"; }
.fa-notes-medical::before, .fa-file-medical::before { content: "✚"; }
.fa-heartbeat::before, .fa-heart-pulse::before, .fa-heart-circle-check::before { content: "♥"; }
.fa-allergies::before, .fa-circle-exclamation::before { content: "!"; }
.fa-flask::before { content: "⚗"; }
.fa-droplet::before { content: "◆"; }
.fa-x-ray::before { content: "▧"; }
.fa-calculator::before { content: "∑"; }
.fa-users::before { content: "●"; }
.fa-user-doctor::before { content: "⚕"; }
.fa-user-circle::before { content: "●"; }
.fa-print::before { content: "▣"; }
.fa-lock::before { content: "◆"; }
.fa-prescription-bottle::before { content: "▥"; }
.fa-credit-card::before { content: "▭"; }
.fa-comment-medical::before { content: "□"; }
.fa-gear::before { content: "⚙"; }
.fa-info-circle::before, .fa-circle-info::before { content: "i"; }
.fa-circle-question::before { content: "?"; }
.fa-arrow-right::before { content: "→"; }
.fa-arrow-left::before { content: "←"; }
.fa-arrow-down::before { content: "↓"; }
.fa-arrow-up::before { content: "↑"; }
.fa-arrow-trend-up::before { content: "↗"; }
.fa-arrow-trend-down::before { content: "↘"; }
.fa-sign-out-alt::before { content: "↪"; }
.fa-ellipsis::before { content: "…"; }
.fa-link::before { content: "↗"; }
.fa-check::before { content: "✓"; }
.fa-image::before, .fa-file-image::before { content: "▧"; }
.fa-file-lines::before, .fa-file::before { content: "≡"; }
.fa-file-pdf::before { content: "PDF"; font-size: .65em; }
.fa-keyboard::before { content: "⌨"; }
.fa-clock-rotate-left::before { content: "↺"; }
.fa-triangle-exclamation::before { content: "⚠"; }
.fa-pencil-alt::before, .fa-pencil::before { content: "✎"; }
.fa-book-medical::before { content: "▱"; }  /* not the medical cross: Health summary uses that */
/* Treatment module (medications and non-drug therapy). Anything not mapped
   here falls back to the "•" in .fas::before, which is why the trays and
   tables showed bullets where an icon was meant to be. */
.fa-pills::before { content: "◐"; }
.fa-capsules::before { content: "◑"; }
.fa-history::before { content: "↺"; }
.fa-clock::before { content: "◷"; }
.fa-bolt::before { content: "⚡"; }
.fa-tag::before { content: "◈"; }
.fa-trash-alt::before, .fa-trash-can::before { content: "⌧"; }
.fa-edit::before, .fa-pen::before, .fa-pen-alt::before { content: "✎"; }
.fa-utensils::before { content: "❖"; }
.fa-running::before, .fa-person-running::before { content: "»"; }
.fa-user-nurse::before, .fa-user-md::before, .fa-stethoscope::before { content: "⚕"; }
.fa-brain::before { content: "◉"; }
.fa-leaf::before { content: "❦"; }
.fa-lungs::before { content: "☁"; }
.fa-sync-alt::before, .fa-rotate-left::before { content: "↻"; }

/* Imaging modalities. These class names are seed data in
   ref_imaging_modalities.icon_class, so the chips are only ever as legible as
   this map — an unmapped modality showed the same "•" as every other one. */
.fa-wave-square::before { content: "∿"; }
.fa-layer-group::before { content: "▤"; }
.fa-magnet::before { content: "⊓"; }
.fa-ribbon::before { content: "✿"; }
.fa-bone::before { content: "❙"; }
.fa-radiation::before { content: "☢"; }
.fa-microscope::before { content: "⊚"; }
.fa-images::before { content: "▧"; }
.fa-arrows-alt-h::before, .fa-arrows-left-right::before, .fa-arrow-left-right::before { content: "↔"; }
.fa-cloud-upload-alt::before { content: "⇧"; }
.fa-download::before { content: "↓"; }

/* Investigations, imaging and profile controls. */
.fa-circle-check::before, .fa-check-circle::before { content: "✓"; }
.fa-flask-vial::before { content: "⚗"; }
.fa-columns::before { content: "▥"; }
.fa-paperclip::before { content: "❑"; }
.fa-magic::before, .fa-wand-magic-sparkles::before, .fa-sparkles::before { content: "✦"; }
.fa-floppy-disk::before { content: "◰"; }
.fa-weight::before, .fa-weight-scale::before { content: "⚖"; }
.fa-hourglass-half::before { content: "⧖"; }
.fa-circle::before { content: "○"; }
.fa-chart-line::before, .fa-chart-simple::before { content: "◹"; }
.fa-lightbulb::before { content: "☼"; }
.fa-plus-circle::before { content: "⊕"; }
.fa-hospital::before { content: "⊞"; }
.fa-user::before { content: "●"; }
.fa-male::before { content: "♂"; }
.fa-female::before { content: "♀"; }
.fa-dna::before { content: "≈"; }
.fa-folder-open::before { content: "▨"; }

/* Lifestyle record cards (app.js SPECS). These are rendered from a JS string,
   not a class attribute, which is how they escaped the icon audit and rendered
   as the "•" fallback. */
.fa-smoking::before { content: "▬"; }
.fa-wine-glass::before { content: "▽"; }
.fa-bed::before { content: "☾"; }

/* Health summary. */
.fa-tint::before { content: "◆"; }
.fa-shield-alt::before, .fa-shield-halved::before, .fa-shield::before { content: "⬢"; }
.fa-phone-alt::before { content: "☎"; }
.fa-exclamation-triangle::before { content: "⚠"; }
.fa-procedures::before { content: "✂"; }

/* Doctor View. "Ban" marks the drug-allergy band, where a bullet would read as
   an ordinary list item beside the one entry a prescriber must not miss. */
.fa-clipboard::before { content: "▤"; }
.fa-ban::before { content: "⊘"; }

/* ==========================================================================
   PHR-REF-UI-ICON-2026-01 — the rest of the named classes

   The reference is written against FontAwesome 6 Solid. This app does not load
   FontAwesome: the CSP forbids the CDN, and the whole `.fas` map above exists
   so an icon is one glyph in a font the device already has. Adopting the
   reference therefore means adopting its class names and its colour semantics,
   and rendering them the way this app renders every other icon.

   Some of these are approximations — a lotus flower and a metered-dose inhaler
   do not exist as monochrome glyphs. Each is the closest available shape that
   still reads as the right *kind* of thing, and none is a colour emoji, which
   would sit differently from every other icon on the page. Where the reference
   names two classes for one idea they share a rule rather than drifting apart.
   ========================================================================== */

/* Shell, header and universal actions (reference §2, §14). */
.fa-magnifying-glass::before { content: "⌕"; }
.fa-bell::before { content: "◔"; }
.fa-xmark::before { content: "×"; }
.fa-circle-user::before { content: "●"; }
.fa-arrow-right-from-bracket::before { content: "⇥"; }
.fa-arrow-right-arrow-left::before { content: "⇄"; }
.fa-arrows-rotate::before { content: "↻"; }
.fa-arrow-down-wide-short::before { content: "⇊"; }
.fa-filter::before { content: "▼"; }
.fa-minus::before { content: "−"; }
.fa-share-nodes::before { content: "⋔"; }
.fa-sliders::before { content: "≣"; }
.fa-table-columns::before { content: "▥"; }
.fa-star::before { content: "★"; }
.fa-file-excel::before { content: "▦"; }
.fa-receipt::before { content: "❒"; }
.fa-repeat::before { content: "↺"; }
.fa-stopwatch::before { content: "◷"; }
.fa-sun::before { content: "☀"; }
.fa-percent::before { content: "%"; }
.fa-divide::before { content: "÷"; }
.fa-flag-checkered::before { content: "⚑"; }

/* Demographics, identity and family (reference §4). */
.fa-id-card::before, .fa-address-card::before { content: "❐"; }
.fa-passport::before { content: "❒"; }
.fa-fingerprint::before { content: "◍"; }
.fa-signature::before { content: "✍"; }
.fa-cake-candles::before { content: "✳"; }
.fa-venus-mars::before { content: "⚥"; }
.fa-globe::before { content: "⊛"; }
.fa-hands-praying::before { content: "⋏"; }
.fa-briefcase::before { content: "▮"; }
.fa-ring::before { content: "◎"; }
.fa-envelope::before, .fa-envelope-circle-check::before { content: "✉"; }
.fa-phone::before { content: "☎"; }
.fa-phone-volume::before { content: "☏"; }
.fa-location-dot::before { content: "⌖"; }
.fa-map::before { content: "▩"; }
.fa-map-location-dot::before { content: "✜"; }
.fa-landmark::before { content: "⌸"; }
.fa-truck-medical::before { content: "⊹"; }
.fa-shield-heart::before { content: "⬣"; }
.fa-heart::before { content: "♥"; }
.fa-house-user::before { content: "⌂"; }
.fa-person::before { content: "●"; }
.fa-person-dress::before { content: "♀"; }
.fa-person-breastfeeding::before { content: "☙"; }
.fa-person-walking::before { content: "»"; }
.fa-person-walking-with-cane::before { content: "⌐"; }
.fa-child-reaching::before { content: "◦"; }
.fa-children::before { content: "∴"; }
.fa-hand-holding::before { content: "⌣"; }
.fa-hand-holding-hand::before { content: "⋈"; }
.fa-hand-dots::before { content: "▒"; }
.fa-hand-sparkles::before { content: "❈"; }
.fa-calendar-days::before { content: "▦"; }

/* Vitals and biometrics (reference §5.1). */
.fa-gauge-high::before, .fa-gauge::before { content: "◑"; }
.fa-ruler-vertical::before { content: "⌶"; }
.fa-ruler-combined::before { content: "⌐"; }
.fa-tape::before { content: "◠"; }
.fa-temperature-half::before { content: "⌡"; }
.fa-temperature-arrow-up::before { content: "⇡"; }
.fa-droplet-slash::before { content: "⊘"; }

/* Conditions, allergies, concerns, procedures, lifestyle (reference §5.2–5.6). */
.fa-circle-dot::before { content: "◉"; }
.fa-shield-check::before { content: "⬢"; }
.fa-shield-virus::before { content: "⬢"; }
.fa-seedling::before { content: "❦"; }
.fa-wheat-awn-circle-exclamation::before { content: "❋"; }
.fa-clipboard-question::before { content: "▤"; }
.fa-clipboard-list::before { content: "▤"; }
.fa-hospital-user::before { content: "⊞"; }
.fa-bed-pulse::before { content: "☰"; }
.fa-kit-medical::before { content: "✚"; }
.fa-tooth::before { content: "◘"; }
.fa-crutch::before { content: "⌐"; }
.fa-apple-whole::before { content: "❂"; }
.fa-spa::before { content: "✿"; }
.fa-water::before { content: "≋"; }
.fa-fire::before { content: "▲"; }

/* Symptom diary and severity faces (reference §5.7). */
.fa-head-side-virus::before { content: "◐"; }
.fa-head-side-cough::before { content: "◑"; }
.fa-face-smile::before { content: "☺"; }
.fa-face-meh::before { content: "☻"; }
.fa-face-frown-open::before { content: "☹"; }
.fa-wind::before { content: "≈"; }

/* Investigations (reference §6). */
.fa-vial::before { content: "▯"; }
.fa-atom::before { content: "⌾"; }
.fa-chart-pie::before { content: "◕"; }
.fa-circle-notch::before { content: "◜"; }

/* Imaging (reference §7). */
.fa-soundwave::before { content: "∿"; }
.fa-bars-staggered::before { content: "≢"; }
.fa-file-waveform::before { content: "≂"; }

/* Treatment and medications (reference §8). */
.fa-tablets::before { content: "◐"; }
.fa-capsule::before { content: "◑"; }
.fa-bottle-droplet::before { content: "▥"; }
.fa-syringe::before { content: "↳"; }
.fa-spray-can::before { content: "▤"; }
.fa-pump-soap::before { content: "▯"; }
.fa-eye-dropper::before { content: "▾"; }
.fa-prescription::before { content: "℞"; }
.fa-prescription-bottle-medical::before { content: "▥"; }
.fa-mouth::before { content: "◡"; }
.fa-dumbbell::before { content: "⊨"; }

/* Predictors and admin (reference §11, §13). */
.fa-cubes-stacked::before { content: "▩"; }
.fa-database::before { content: "⊟"; }
.fa-book-bookmark::before { content: "❏"; }
.fa-users-gear::before { content: "⚙"; }
.fa-user-shield::before { content: "⬢"; }
.fa-building-columns::before { content: "⌸"; }

/* Scalable Vector SVG Utilities */
.icon-svg {
  width: 1.1em;
  height: 1.1em;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  display: inline-block;
  vertical-align: -0.18em;
}
.icon-svg-sm { width: 14px; height: 14px; }
.icon-svg-md { width: 18px; height: 18px; }
.icon-svg-lg { width: 22px; height: 22px; }

/* Crisp Vector Logo Monogram.
   The tile is painted here, by the container class, and the SVG carries only
   the white mark — the same tile the text "H" used to sit in. Painting the
   tile a second time inside the artwork put a flat blue square on top of the
   gradient, which is what the first cut of this did. The tile is a solid
   --brand-primary since FR-BRD-02 (2026-10-07), matching the brand kit in
   /assets/brand/; the blue-to-indigo gradient is retired. */
/* Two-tone wordmark "HealthyLiving" set as live text beside the mark, so it
   stays crisp, translatable and readable by assistive technology. */
.brand-wordmark { font-weight: 700; letter-spacing: -0.02em; color: var(--brand-ink); white-space: nowrap; }
.brand-wordmark .brand-wordmark-accent { color: var(--brand-accent-text); }
.brand-logo-svg {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--brand-tile-radius);
  background: var(--brand-primary);
  color: var(--brand-on-primary);
  flex: 0 0 auto;
  box-shadow: 0 2px 6px rgba(0, 113, 227, 0.3);
}
.brand-mark {
  width: 60%;
  height: 60%;
  display: block;
}


/* Family profiles. */
.fa-user-plus::before { content: "✛"; }
.fa-child::before { content: "◦"; }
.fa-baby::before { content: "☺"; }
.fa-hands-holding-child::before { content: "♡"; }
.fa-id-badge::before { content: "❐"; }
.fa-crown::before { content: "★"; }
.fa-people-roof::before { content: "⁂"; }  /* not the house glyph: Overview sits three rows above it */

button, input, select, textarea { font: inherit; }
button { color: inherit; }
/* Text blue, not the brand blue: #0071E3 is 4.3:1 on the #F5F5F7 page panels,
   under WCAG AA's 4.5:1 for body text (axe, 2026-10-08). #0058B6 is 6.0:1. */
a { color: var(--apple-blue-text); text-underline-offset: 3px; }
a:hover { color: var(--apple-blue-hover); }
img, svg { max-width: 100%; }
h1, h2, h3, h4 { color: var(--text-primary); line-height: 1.25; text-wrap: balance; }
h1 { letter-spacing: -0.6px; }
h2, h3 { letter-spacing: -0.3px; }
p { text-wrap: pretty; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--focus);
}
::selection { background: var(--apple-blue-subtle); color: var(--text-primary); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #EEF1F0; }
::-webkit-scrollbar-thumb { background: #C8D1CC; border-radius: 8px; }

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  transform: translateY(-160%);
  z-index: 1000;
  background: var(--text-primary);
  color: #fff;
  padding: 12px 18px;
  border-radius: var(--radius-md);
  font-weight: 700;
}
.skip-link:focus { transform: none; color: #fff; }
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.text-muted { color: var(--text-tertiary); }
.text-small { font-size: 14px; }
.text-center { text-align: center; }
.fw-600 { font-weight: 600; }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mt-24 { margin-top: 24px; }
.mt-28 { margin-top: 28px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
/* Added for the Section 2 medical-background builder, which asked for spacing
   steps and display helpers this file did not yet define. */
.mt-2 { margin-top: 2px; }
.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: 4px; }
.mb-8 { margin-bottom: 8px; }
.d-block { display: block; }
.d-flex { display: flex; }
.text-bold { font-weight: 600; }
/* Used by the medication and investigation tables; previously written in
   markup with no rule behind them. */
.text-right { text-align: right; }
.text-danger { color: var(--danger, #B81810); }
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-center { display: flex; align-items: center; gap: 8px; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.hint { color: var(--text-secondary); font-size: 14px; line-height: 1.5; }
.action-link { color: var(--apple-blue-text); font-weight: 650; text-decoration: none; }
.action-link:hover { color: var(--apple-blue-hover); text-decoration: underline; }
.required-marker { color: var(--apple-crimson-text); }

.logo-icon {
  width: 36px;
  height: 36px;
  background: var(--brand-primary);
  border-radius: var(--brand-tile-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 19px;
  font-weight: 750;
  flex: 0 0 auto;
  box-shadow: 0 2px 6px rgba(0, 113, 227, 0.3);
}

/* >>> vector-icons: generated by scripts/generate_icon_css.py - do not edit by hand */
/*
 * Filled icons, self-hosted under /assets/icons/ and painted in currentColor
 * through a CSS mask (CSP: img-src 'self').
 *   clinical/  Health Icons (healthicons.org), MIT - clinical/LICENSE.txt
 *   ui/        Material Symbols Rounded (Google), Apache-2.0 - ui/LICENSE.txt
 * A class not listed here keeps its text character from the map above.
 */
.fa-heart { --hil-icon: url("/assets/icons/clinical/heart.svg"); }
.fa-heart-pulse, .fa-heartbeat { --hil-icon: url("/assets/icons/clinical/heartbeat.svg"); }
.fa-pills { --hil-icon: url("/assets/icons/clinical/pills.svg"); }
.fa-capsules { --hil-icon: url("/assets/icons/clinical/capsules.svg"); }
.fa-prescription-bottle, .fa-prescription-bottle-medical { --hil-icon: url("/assets/icons/clinical/medicine_bottle.svg"); }
.fa-syringe { --hil-icon: url("/assets/icons/clinical/syringe.svg"); }
.fa-flask, .fa-flask-vial, .fa-vial { --hil-icon: url("/assets/icons/clinical/test_tubes.svg"); }
.fa-microscope { --hil-icon: url("/assets/icons/clinical/microscope.svg"); }
.fa-notes-medical, .fa-file-medical { --hil-icon: url("/assets/icons/clinical/medical_records.svg"); }
.fa-book-medical { --hil-icon: url("/assets/icons/clinical/health_literacy.svg"); }
.fa-book, .fa-book-open { --hil-icon: url("/assets/icons/clinical/book.svg"); }
.fa-x-ray { --hil-icon: url("/assets/icons/clinical/xray.svg"); }
.fa-radiation, .fa-magnet { --hil-icon: url("/assets/icons/clinical/radiology.svg"); }
.fa-wave-square { --hil-icon: url("/assets/icons/clinical/ultrasound_scanner.svg"); }
.fa-ribbon { --hil-icon: url("/assets/icons/clinical/award_ribbon.svg"); }
.fa-bone { --hil-icon: url("/assets/icons/clinical/skeleton.svg"); }
.fa-layer-group { --hil-icon: url("/assets/icons/ui/layers.svg"); }
.fa-allergies { --hil-icon: url("/assets/icons/clinical/allergies.svg"); }
.fa-wheat-awn-circle-exclamation { --hil-icon: url("/assets/icons/clinical/gluten.svg"); }
.fa-droplet, .fa-tint { --hil-icon: url("/assets/icons/clinical/blood_drop.svg"); }
.fa-weight-scale { --hil-icon: url("/assets/icons/clinical/weight.svg"); }
.fa-ruler { --hil-icon: url("/assets/icons/clinical/height.svg"); }
.fa-gauge, .fa-gauge-high { --hil-icon: url("/assets/icons/clinical/risk_analysis.svg"); }
.fa-chart-line, .fa-arrow-up-right-dots { --hil-icon: url("/assets/icons/clinical/chart_line.svg"); }
.fa-chart-pie { --hil-icon: url("/assets/icons/clinical/chart_pie.svg"); }
.fa-lungs { --hil-icon: url("/assets/icons/clinical/lungs.svg"); }
.fa-brain { --hil-icon: url("/assets/icons/clinical/mental_health.svg"); }
.fa-dna { --hil-icon: url("/assets/icons/clinical/dna.svg"); }
.fa-head-side-virus { --hil-icon: url("/assets/icons/clinical/symptom.svg"); }
.fa-shield-virus { --hil-icon: url("/assets/icons/clinical/virus_shield.svg"); }
.fa-stethoscope { --hil-icon: url("/assets/icons/clinical/stethoscope.svg"); }
.fa-truck-medical { --hil-icon: url("/assets/icons/clinical/accident_and_emergency.svg"); }
.fa-kit-medical { --hil-icon: url("/assets/icons/clinical/bandage_adhesive.svg"); }
.fa-briefcase-medical { --hil-icon: url("/assets/icons/ui/medical_services.svg"); }
.fa-comment-medical, .fa-hand-holding-medical { --hil-icon: url("/assets/icons/clinical/medical_advice.svg"); }
.fa-hospital { --hil-icon: url("/assets/icons/clinical/hospital.svg"); }
.fa-hospital-user { --hil-icon: url("/assets/icons/clinical/outpatient.svg"); }
.fa-bed { --hil-icon: url("/assets/icons/clinical/sleepy.svg"); }
.fa-procedures { --hil-icon: url("/assets/icons/clinical/hospitalized.svg"); }
.fa-utensils { --hil-icon: url("/assets/icons/clinical/utensils.svg"); }
.fa-apple, .fa-apple-whole { --hil-icon: url("/assets/icons/clinical/fruits.svg"); }
.fa-leaf, .fa-seedling { --hil-icon: url("/assets/icons/clinical/vegetables.svg"); }
.fa-smoking { --hil-icon: url("/assets/icons/clinical/smoking.svg"); }
.fa-wine-glass { --hil-icon: url("/assets/icons/clinical/alcohol.svg"); }
.fa-spa { --hil-icon: url("/assets/icons/clinical/calm.svg"); }
.fa-running, .fa-person-running { --hil-icon: url("/assets/icons/clinical/running.svg"); }
.fa-person-walking { --hil-icon: url("/assets/icons/clinical/walking.svg"); }
.fa-user { --hil-icon: url("/assets/icons/clinical/user_profile.svg"); }
.fa-person { --hil-icon: url("/assets/icons/clinical/person.svg"); }
.fa-user-doctor, .fa-user-md { --hil-icon: url("/assets/icons/clinical/doctor.svg"); }
.fa-user-nurse { --hil-icon: url("/assets/icons/clinical/nurse.svg"); }
.fa-user-graduate { --hil-icon: url("/assets/icons/clinical/training_class.svg"); }
.fa-users, .fa-people-roof, .fa-users-rectangle { --hil-icon: url("/assets/icons/clinical/people.svg"); }
.fa-baby { --hil-icon: url("/assets/icons/clinical/baby.svg"); }
.fa-child, .fa-hands-holding-child { --hil-icon: url("/assets/icons/clinical/child_care.svg"); }
.fa-female { --hil-icon: url("/assets/icons/clinical/female.svg"); }
.fa-male { --hil-icon: url("/assets/icons/clinical/male.svg"); }
.fa-id-badge { --hil-icon: url("/assets/icons/clinical/insurance_card.svg"); }
.fa-user-plus { --hil-icon: url("/assets/icons/ui/person_add.svg"); }
.fa-user-check { --hil-icon: url("/assets/icons/ui/person_check.svg"); }
.fa-user-pen { --hil-icon: url("/assets/icons/ui/person_edit.svg"); }
.fa-user-shield { --hil-icon: url("/assets/icons/ui/admin_panel_settings.svg"); }
.fa-house, .fa-home, .fa-house-user { --hil-icon: url("/assets/icons/clinical/home.svg"); }
.fa-calendar, .fa-calendar-check, .fa-calendar-day, .fa-calendar-days { --hil-icon: url("/assets/icons/clinical/calendar.svg"); }
.fa-phone, .fa-phone-alt, .fa-phone-volume { --hil-icon: url("/assets/icons/clinical/phone.svg"); }
.fa-clipboard { --hil-icon: url("/assets/icons/clinical/health_worker_form.svg"); }
.fa-clipboard-question { --hil-icon: url("/assets/icons/clinical/question.svg"); }
.fa-folder, .fa-folder-open { --hil-icon: url("/assets/icons/clinical/ui_folder.svg"); }
.fa-file { --hil-icon: url("/assets/icons/ui/file.svg"); }
.fa-file-lines, .fa-file-csv { --hil-icon: url("/assets/icons/ui/description.svg"); }
.fa-file-image, .fa-image { --hil-icon: url("/assets/icons/ui/image.svg"); }
.fa-file-pdf { --hil-icon: url("/assets/icons/ui/picture_as_pdf.svg"); }
.fa-file-signature { --hil-icon: url("/assets/icons/ui/signature.svg"); }
.fa-file-invoice, .fa-receipt, .fa-money-bill-transfer { --hil-icon: url("/assets/icons/clinical/bills.svg"); }
.fa-credit-card { --hil-icon: url("/assets/icons/clinical/credit_card.svg"); }
.fa-coins { --hil-icon: url("/assets/icons/clinical/coins.svg"); }
.fa-certificate { --hil-icon: url("/assets/icons/clinical/certificate_paper.svg"); }
.fa-qrcode { --hil-icon: url("/assets/icons/clinical/qr_code.svg"); }
.fa-database { --hil-icon: url("/assets/icons/clinical/database.svg"); }
.fa-satellite-dish, .fa-google { --hil-icon: url("/assets/icons/clinical/health_data_sync.svg"); }
.fa-robot { --hil-icon: url("/assets/icons/clinical/artificial_intelligence.svg"); }
.fa-magic, .fa-wand-magic-sparkles, .fa-sparkles { --hil-icon: url("/assets/icons/clinical/magic_wand.svg"); }
.fa-comments, .fa-comment-dots { --hil-icon: url("/assets/icons/clinical/forum.svg"); }
.fa-bullhorn { --hil-icon: url("/assets/icons/clinical/megaphone.svg"); }
.fa-newspaper { --hil-icon: url("/assets/icons/ui/newspaper.svg"); }
.fa-check-circle, .fa-circle-check { --hil-icon: url("/assets/icons/clinical/yes.svg"); }
.fa-shield-check, .fa-shield, .fa-shield-alt, .fa-shield-halved { --hil-icon: url("/assets/icons/clinical/ui_secure.svg"); }
.fa-circle-xmark, .fa-times-circle { --hil-icon: url("/assets/icons/clinical/no.svg"); }
.fa-circle-info, .fa-info-circle { --hil-icon: url("/assets/icons/clinical/info.svg"); }
.fa-circle-question, .fa-question-circle { --hil-icon: url("/assets/icons/clinical/question_circle.svg"); }
.fa-exclamation { --hil-icon: url("/assets/icons/clinical/alert.svg"); }
.fa-triangle-exclamation, .fa-exclamation-triangle { --hil-icon: url("/assets/icons/clinical/alert_triangle.svg"); }
.fa-circle-exclamation, .fa-exclamation-circle { --hil-icon: url("/assets/icons/clinical/alert_circle.svg"); }
.fa-shield-heart { --hil-icon: url("/assets/icons/clinical/health_data_security.svg"); }
.fa-lock { --hil-icon: url("/assets/icons/ui/lock.svg"); }
.fa-bars { --hil-icon: url("/assets/icons/clinical/ui_menu.svg"); }
.fa-sliders { --hil-icon: url("/assets/icons/clinical/ui_preferences.svg"); }
.fa-gear, .fa-cog { --hil-icon: url("/assets/icons/clinical/ui_settings.svg"); }
.fa-magnifying-glass, .fa-search { --hil-icon: url("/assets/icons/clinical/magnifying_glass.svg"); }
.fa-magnifying-glass-plus { --hil-icon: url("/assets/icons/ui/zoom_in.svg"); }
.fa-magnifying-glass-minus { --hil-icon: url("/assets/icons/ui/zoom_out.svg"); }
.fa-arrow-left { --hil-icon: url("/assets/icons/ui/arrow_back.svg"); }
.fa-arrow-right { --hil-icon: url("/assets/icons/ui/arrow_forward.svg"); }
.fa-arrow-up { --hil-icon: url("/assets/icons/ui/arrow_upward.svg"); }
.fa-arrow-down { --hil-icon: url("/assets/icons/ui/arrow_downward.svg"); }
.fa-arrows-left-right, .fa-arrows-alt-h { --hil-icon: url("/assets/icons/ui/swap_horiz.svg"); }
.fa-chevron-down { --hil-icon: url("/assets/icons/ui/expand_more.svg"); }
.fa-chevron-right { --hil-icon: url("/assets/icons/ui/chevron_right.svg"); }
.fa-arrow-right-from-bracket, .fa-sign-out-alt { --hil-icon: url("/assets/icons/ui/logout.svg"); }
.fa-external-link-alt, .fa-arrow-up-right-from-square { --hil-icon: url("/assets/icons/ui/open_in_new.svg"); }
.fa-forward { --hil-icon: url("/assets/icons/ui/fast_forward.svg"); }
.fa-rotate-left { --hil-icon: url("/assets/icons/ui/undo.svg"); }
.fa-rotate-right { --hil-icon: url("/assets/icons/ui/redo.svg"); }
.fa-repeat { --hil-icon: url("/assets/icons/ui/repeat.svg"); }
.fa-compass { --hil-icon: url("/assets/icons/ui/explore.svg"); }
.fa-map-location-dot { --hil-icon: url("/assets/icons/ui/location_on.svg"); }
.fa-route { --hil-icon: url("/assets/icons/ui/route.svg"); }
.fa-sitemap { --hil-icon: url("/assets/icons/ui/account_tree.svg"); }
.fa-code { --hil-icon: url("/assets/icons/ui/code.svg"); }
.fa-key { --hil-icon: url("/assets/icons/ui/key.svg"); }
.fa-toggle-on { --hil-icon: url("/assets/icons/ui/toggle_on.svg"); }
.fa-plus { --hil-icon: url("/assets/icons/ui/add.svg"); }
.fa-plus-circle, .fa-circle-plus { --hil-icon: url("/assets/icons/ui/add_circle.svg"); }
.fa-minus { --hil-icon: url("/assets/icons/ui/remove.svg"); }
.fa-circle-minus, .fa-minus-circle { --hil-icon: url("/assets/icons/ui/remove_circle.svg"); }
.fa-check { --hil-icon: url("/assets/icons/ui/check.svg"); }
.fa-check-double { --hil-icon: url("/assets/icons/ui/done_all.svg"); }
.fa-xmark, .fa-times { --hil-icon: url("/assets/icons/ui/close.svg"); }
.fa-ban { --hil-icon: url("/assets/icons/ui/block.svg"); }
.fa-edit, .fa-pen, .fa-pen-alt, .fa-pen-to-square, .fa-pencil, .fa-pencil-alt { --hil-icon: url("/assets/icons/ui/edit.svg"); }
.fa-trash, .fa-trash-alt, .fa-trash-can { --hil-icon: url("/assets/icons/ui/delete.svg"); }
.fa-floppy-disk, .fa-save { --hil-icon: url("/assets/icons/ui/save.svg"); }
.fa-print { --hil-icon: url("/assets/icons/ui/print.svg"); }
.fa-download, .fa-file-arrow-down, .fa-file-import { --hil-icon: url("/assets/icons/ui/download.svg"); }
.fa-upload { --hil-icon: url("/assets/icons/ui/upload.svg"); }
.fa-cloud-upload-alt, .fa-cloud-arrow-up { --hil-icon: url("/assets/icons/ui/cloud_upload.svg"); }
.fa-file-arrow-up { --hil-icon: url("/assets/icons/ui/upload_file.svg"); }
.fa-link { --hil-icon: url("/assets/icons/ui/link.svg"); }
.fa-link-slash, .fa-unlink { --hil-icon: url("/assets/icons/ui/link_off.svg"); }
.fa-handshake-angle { --hil-icon: url("/assets/icons/ui/handshake.svg"); }
.fa-paperclip { --hil-icon: url("/assets/icons/ui/attach_file.svg"); }
.fa-eye { --hil-icon: url("/assets/icons/ui/visibility.svg"); }
.fa-paper-plane { --hil-icon: url("/assets/icons/ui/send.svg"); }
.fa-envelope, .fa-envelope-circle-check { --hil-icon: url("/assets/icons/ui/mail.svg"); }
.fa-inbox { --hil-icon: url("/assets/icons/ui/inbox.svg"); }
.fa-bell { --hil-icon: url("/assets/icons/ui/notifications.svg"); }
.fa-lightbulb { --hil-icon: url("/assets/icons/ui/lightbulb.svg"); }
.fa-bolt { --hil-icon: url("/assets/icons/ui/bolt.svg"); }
.fa-clock { --hil-icon: url("/assets/icons/ui/schedule.svg"); }
.fa-clock-rotate-left, .fa-history { --hil-icon: url("/assets/icons/ui/history.svg"); }
.fa-hourglass-half { --hil-icon: url("/assets/icons/ui/hourglass.svg"); }
.fa-person-digging { --hil-icon: url("/assets/icons/ui/construction.svg"); }
.fa-camera { --hil-icon: url("/assets/icons/ui/photo_camera.svg"); }
.fa-images { --hil-icon: url("/assets/icons/ui/photo_library.svg"); }
.fa-keyboard { --hil-icon: url("/assets/icons/ui/keyboard.svg"); }
.fa-calculator { --hil-icon: url("/assets/icons/ui/calculate.svg"); }
.fa-percent { --hil-icon: url("/assets/icons/ui/percent.svg"); }
.fa-ellipsis { --hil-icon: url("/assets/icons/ui/more_horiz.svg"); }
.fa-crown { --hil-icon: url("/assets/icons/ui/premium.svg"); }
.fa-ticket { --hil-icon: url("/assets/icons/ui/ticket.svg"); }
.fa-tag { --hil-icon: url("/assets/icons/ui/sell.svg"); }
.fa-infinity { --hil-icon: url("/assets/icons/ui/all_inclusive.svg"); }
.fa-box-open { --hil-icon: url("/assets/icons/ui/inventory.svg"); }
.fa-filter { --hil-icon: url("/assets/icons/ui/filter_list.svg"); }
.fa-columns, .fa-table-columns { --hil-icon: url("/assets/icons/ui/view_column.svg"); }
.fa-list, .fa-stream, .fa-bars-staggered { --hil-icon: url("/assets/icons/ui/list.svg"); }
.fa-clipboard-list, .fa-list-check { --hil-icon: url("/assets/icons/ui/checklist.svg"); }
.fa-bullseye { --hil-icon: url("/assets/icons/ui/target.svg"); }
.fa-circle-dot { --hil-icon: url("/assets/icons/ui/radio_checked.svg"); }
.fa-circle { --hil-icon: url("/assets/icons/ui/circle.svg"); }
.fa-circle-stop, .fa-stop-circle { --hil-icon: url("/assets/icons/ui/stop_circle.svg"); }
.fa-circle-notch, .fa-spinner { --hil-icon: url("/assets/icons/ui/progress_activity.svg"); }
:is(.fa-heart, .fa-heart-pulse, .fa-heartbeat, .fa-pills, .fa-capsules, .fa-prescription-bottle, .fa-prescription-bottle-medical, .fa-syringe, .fa-flask, .fa-flask-vial, .fa-vial, .fa-microscope, .fa-notes-medical, .fa-file-medical, .fa-book-medical, .fa-book, .fa-book-open, .fa-x-ray, .fa-radiation, .fa-magnet, .fa-wave-square, .fa-ribbon, .fa-bone, .fa-layer-group, .fa-allergies, .fa-wheat-awn-circle-exclamation, .fa-droplet, .fa-tint, .fa-weight-scale, .fa-ruler, .fa-gauge, .fa-gauge-high, .fa-chart-line, .fa-arrow-up-right-dots, .fa-chart-pie, .fa-lungs, .fa-brain, .fa-dna, .fa-head-side-virus, .fa-shield-virus, .fa-stethoscope, .fa-truck-medical, .fa-kit-medical, .fa-briefcase-medical, .fa-comment-medical, .fa-hand-holding-medical, .fa-hospital, .fa-hospital-user, .fa-bed, .fa-procedures, .fa-utensils, .fa-apple, .fa-apple-whole, .fa-leaf, .fa-seedling, .fa-smoking, .fa-wine-glass, .fa-spa, .fa-running, .fa-person-running, .fa-person-walking, .fa-user, .fa-person, .fa-user-doctor, .fa-user-md, .fa-user-nurse, .fa-user-graduate, .fa-users, .fa-people-roof, .fa-users-rectangle, .fa-baby, .fa-child, .fa-hands-holding-child, .fa-female, .fa-male, .fa-id-badge, .fa-user-plus, .fa-user-check, .fa-user-pen, .fa-user-shield, .fa-house, .fa-home, .fa-house-user, .fa-calendar, .fa-calendar-check, .fa-calendar-day, .fa-calendar-days, .fa-phone, .fa-phone-alt, .fa-phone-volume, .fa-clipboard, .fa-clipboard-question, .fa-folder, .fa-folder-open, .fa-file, .fa-file-lines, .fa-file-csv, .fa-file-image, .fa-file-pdf, .fa-file-signature, .fa-file-invoice, .fa-receipt, .fa-money-bill-transfer, .fa-credit-card, .fa-coins, .fa-certificate, .fa-qrcode, .fa-database, .fa-satellite-dish, .fa-google, .fa-robot, .fa-magic, .fa-wand-magic-sparkles, .fa-sparkles, .fa-comments, .fa-comment-dots, .fa-bullhorn, .fa-newspaper, .fa-check-circle, .fa-circle-check, .fa-shield-check, .fa-circle-xmark, .fa-times-circle, .fa-circle-info, .fa-info-circle, .fa-circle-question, .fa-question-circle, .fa-exclamation, .fa-triangle-exclamation, .fa-exclamation-triangle, .fa-circle-exclamation, .fa-exclamation-circle, .fa-shield, .fa-shield-alt, .fa-shield-halved, .fa-shield-heart, .fa-lock, .fa-bars, .fa-sliders, .fa-gear, .fa-cog, .fa-magnifying-glass, .fa-search, .fa-magnifying-glass-plus, .fa-magnifying-glass-minus, .fa-arrow-left, .fa-arrow-right, .fa-arrow-up, .fa-arrow-down, .fa-arrows-left-right, .fa-arrows-alt-h, .fa-chevron-down, .fa-chevron-right, .fa-arrow-right-from-bracket, .fa-sign-out-alt, .fa-external-link-alt, .fa-arrow-up-right-from-square, .fa-forward, .fa-rotate-left, .fa-rotate-right, .fa-repeat, .fa-compass, .fa-map-location-dot, .fa-route, .fa-sitemap, .fa-code, .fa-key, .fa-toggle-on, .fa-plus, .fa-plus-circle, .fa-circle-plus, .fa-minus, .fa-circle-minus, .fa-minus-circle, .fa-check, .fa-check-double, .fa-xmark, .fa-times, .fa-ban, .fa-edit, .fa-pen, .fa-pen-alt, .fa-pen-to-square, .fa-pencil, .fa-pencil-alt, .fa-trash, .fa-trash-alt, .fa-trash-can, .fa-floppy-disk, .fa-save, .fa-print, .fa-download, .fa-file-arrow-down, .fa-file-import, .fa-upload, .fa-cloud-upload-alt, .fa-cloud-arrow-up, .fa-file-arrow-up, .fa-link, .fa-link-slash, .fa-unlink, .fa-handshake-angle, .fa-paperclip, .fa-eye, .fa-paper-plane, .fa-envelope, .fa-envelope-circle-check, .fa-inbox, .fa-bell, .fa-lightbulb, .fa-bolt, .fa-clock, .fa-clock-rotate-left, .fa-history, .fa-hourglass-half, .fa-person-digging, .fa-camera, .fa-image, .fa-images, .fa-keyboard, .fa-calculator, .fa-percent, .fa-ellipsis, .fa-crown, .fa-ticket, .fa-tag, .fa-infinity, .fa-box-open, .fa-filter, .fa-columns, .fa-table-columns, .fa-list, .fa-stream, .fa-bars-staggered, .fa-clipboard-list, .fa-list-check, .fa-bullseye, .fa-circle-dot, .fa-circle, .fa-circle-stop, .fa-stop-circle, .fa-circle-notch, .fa-spinner)::before {
  content: "";
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.2em;
  background-color: currentColor;
  -webkit-mask: var(--hil-icon) center / contain no-repeat;
  mask: var(--hil-icon) center / contain no-repeat;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
@media (forced-colors: active) {
  :is(.fa-heart, .fa-heart-pulse, .fa-heartbeat, .fa-pills, .fa-capsules, .fa-prescription-bottle, .fa-prescription-bottle-medical, .fa-syringe, .fa-flask, .fa-flask-vial, .fa-vial, .fa-microscope, .fa-notes-medical, .fa-file-medical, .fa-book-medical, .fa-book, .fa-book-open, .fa-x-ray, .fa-radiation, .fa-magnet, .fa-wave-square, .fa-ribbon, .fa-bone, .fa-layer-group, .fa-allergies, .fa-wheat-awn-circle-exclamation, .fa-droplet, .fa-tint, .fa-weight-scale, .fa-ruler, .fa-gauge, .fa-gauge-high, .fa-chart-line, .fa-arrow-up-right-dots, .fa-chart-pie, .fa-lungs, .fa-brain, .fa-dna, .fa-head-side-virus, .fa-shield-virus, .fa-stethoscope, .fa-truck-medical, .fa-kit-medical, .fa-briefcase-medical, .fa-comment-medical, .fa-hand-holding-medical, .fa-hospital, .fa-hospital-user, .fa-bed, .fa-procedures, .fa-utensils, .fa-apple, .fa-apple-whole, .fa-leaf, .fa-seedling, .fa-smoking, .fa-wine-glass, .fa-spa, .fa-running, .fa-person-running, .fa-person-walking, .fa-user, .fa-person, .fa-user-doctor, .fa-user-md, .fa-user-nurse, .fa-user-graduate, .fa-users, .fa-people-roof, .fa-users-rectangle, .fa-baby, .fa-child, .fa-hands-holding-child, .fa-female, .fa-male, .fa-id-badge, .fa-user-plus, .fa-user-check, .fa-user-pen, .fa-user-shield, .fa-house, .fa-home, .fa-house-user, .fa-calendar, .fa-calendar-check, .fa-calendar-day, .fa-calendar-days, .fa-phone, .fa-phone-alt, .fa-phone-volume, .fa-clipboard, .fa-clipboard-question, .fa-folder, .fa-folder-open, .fa-file, .fa-file-lines, .fa-file-csv, .fa-file-image, .fa-file-pdf, .fa-file-signature, .fa-file-invoice, .fa-receipt, .fa-money-bill-transfer, .fa-credit-card, .fa-coins, .fa-certificate, .fa-qrcode, .fa-database, .fa-satellite-dish, .fa-google, .fa-robot, .fa-magic, .fa-wand-magic-sparkles, .fa-sparkles, .fa-comments, .fa-comment-dots, .fa-bullhorn, .fa-newspaper, .fa-check-circle, .fa-circle-check, .fa-shield-check, .fa-circle-xmark, .fa-times-circle, .fa-circle-info, .fa-info-circle, .fa-circle-question, .fa-question-circle, .fa-exclamation, .fa-triangle-exclamation, .fa-exclamation-triangle, .fa-circle-exclamation, .fa-exclamation-circle, .fa-shield, .fa-shield-alt, .fa-shield-halved, .fa-shield-heart, .fa-lock, .fa-bars, .fa-sliders, .fa-gear, .fa-cog, .fa-magnifying-glass, .fa-search, .fa-magnifying-glass-plus, .fa-magnifying-glass-minus, .fa-arrow-left, .fa-arrow-right, .fa-arrow-up, .fa-arrow-down, .fa-arrows-left-right, .fa-arrows-alt-h, .fa-chevron-down, .fa-chevron-right, .fa-arrow-right-from-bracket, .fa-sign-out-alt, .fa-external-link-alt, .fa-arrow-up-right-from-square, .fa-forward, .fa-rotate-left, .fa-rotate-right, .fa-repeat, .fa-compass, .fa-map-location-dot, .fa-route, .fa-sitemap, .fa-code, .fa-key, .fa-toggle-on, .fa-plus, .fa-plus-circle, .fa-circle-plus, .fa-minus, .fa-circle-minus, .fa-minus-circle, .fa-check, .fa-check-double, .fa-xmark, .fa-times, .fa-ban, .fa-edit, .fa-pen, .fa-pen-alt, .fa-pen-to-square, .fa-pencil, .fa-pencil-alt, .fa-trash, .fa-trash-alt, .fa-trash-can, .fa-floppy-disk, .fa-save, .fa-print, .fa-download, .fa-file-arrow-down, .fa-file-import, .fa-upload, .fa-cloud-upload-alt, .fa-cloud-arrow-up, .fa-file-arrow-up, .fa-link, .fa-link-slash, .fa-unlink, .fa-handshake-angle, .fa-paperclip, .fa-eye, .fa-paper-plane, .fa-envelope, .fa-envelope-circle-check, .fa-inbox, .fa-bell, .fa-lightbulb, .fa-bolt, .fa-clock, .fa-clock-rotate-left, .fa-history, .fa-hourglass-half, .fa-person-digging, .fa-camera, .fa-image, .fa-images, .fa-keyboard, .fa-calculator, .fa-percent, .fa-ellipsis, .fa-crown, .fa-ticket, .fa-tag, .fa-infinity, .fa-box-open, .fa-filter, .fa-columns, .fa-table-columns, .fa-list, .fa-stream, .fa-bars-staggered, .fa-clipboard-list, .fa-list-check, .fa-bullseye, .fa-circle-dot, .fa-circle, .fa-circle-stop, .fa-stop-circle, .fa-circle-notch, .fa-spinner)::before { forced-color-adjust: none; background-color: CanvasText; }
}
/* <<< vector-icons */

/* ==========================================================================
   UI spec v2.0 §3 — themes (same token names, remapped values)
   Clean Clinical Light is :root above. Saved data-theme wins over OS.
   With no data-theme, prefers-contrast then prefers-color-scheme apply.
   ========================================================================== */

/* Dark Mode — invert surfaces; keep semantic families, retuned for dark bg. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) { color-scheme: dark; }
  html:not([data-theme]) {
    --apple-canvas: #0B111A;
    --apple-card: #151F2E;
    --card-border: rgba(255, 255, 255, 0.12);
    --card-border-subtle: rgba(255, 255, 255, 0.07);
    --card-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    --card-shadow-hover: 0 12px 28px rgba(0, 0, 0, 0.45);
    --text-primary: #F1F5F9;
    --text-secondary: #CBD5E1;
    --text-tertiary: #94A3B8;
    --text-quaternary: #7C8BA1;
    --apple-blue: #0369A1; /* white text on this fill is >= 4.5:1 */
    --apple-blue-hover: #0284C7;
    --apple-blue-subtle: #0C2D44;
    --apple-blue-text: #7DD3FC;
    --apple-emerald-bg: #0B2A22;
    --apple-emerald-text: #6EE7B7;
    --apple-amber-bg: #33260B;
    --apple-amber-text: #FCD34D;
    --apple-crimson-bg: #3A1517;
    --apple-crimson-text: #FCA5A5;
    --apple-indigo-bg: #1E2246;
    --apple-indigo-text: #A5B4FC;
    --apple-purple-bg: #261C40;
    --apple-purple-text: #C4B5FD;
    --apple-teal-bg: #0C2B2A;
    --apple-teal-text: #5EEAD4;
    --apple-pink-bg: #3A1520;
    --apple-pink-text: #FDA4AF;
    --apple-slate-bg: #1C283B;
    --hover: #1C283B;
    --selected: #0C2D44;
    --control-border: rgba(255, 255, 255, 0.22);
    --header-bg: rgba(11, 17, 26, 0.86);
    --header-bg-solid: #0B111A;
    --nav-pill-bg: #1C283B;
    --nav-pill-active: #151F2E;
    --focus: 0 0 0 3px rgba(56, 189, 248, 0.5);
    --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.55);
    --brand-on-primary: #FFFFFF;
    --patient-lock-accent: #A5B4FC;
  }
}

/* High Contrast — pure black/white, 7:1 for body text (UI spec §3). */
@media (prefers-contrast: more) {
  html:not([data-theme]) { color-scheme: dark; }
  html:not([data-theme]) {
    --apple-canvas: #000000;
    --apple-card: #121212;
    --card-border: #FFFFFF;
    --card-border-subtle: #FFFFFF;
    --card-shadow: none;
    --card-shadow-hover: none;
    --text-primary: #FFFFFF;
    --text-secondary: #FFFFFF;
    --text-tertiary: #FFFFFF;
    --text-quaternary: #FFFFFF;
    --apple-blue: #075985; /* white text 7.6:1 */
    --apple-blue-hover: #0C4A6E;
    --apple-blue-subtle: #000000;
    --apple-blue-text: #7DD3FC;
    --apple-emerald: #6EE7B7;
    --apple-emerald-text: #86EFAC;
    --apple-emerald-bg: #000000;
    --apple-amber: #FCD34D;
    --apple-amber-text: #FDE68A;
    --apple-amber-bg: #000000;
    --apple-crimson: #FCA5A5;
    --apple-crimson-text: #FECACA;
    --apple-crimson-bg: #000000;
    --apple-indigo-text: #FFFFFF;
    --apple-indigo-bg: #000000;
    --apple-purple-text: #FFFFFF;
    --apple-purple-bg: #000000;
    --apple-teal-text: #FFFFFF;
    --apple-teal-bg: #000000;
    --apple-pink-text: #FFFFFF;
    --apple-pink-bg: #000000;
    --apple-slate-text: #FFFFFF;
    --apple-slate-bg: #000000;
    --hover: #1E1E1E;
    --selected: #1E1E1E;
    --control-border: #FFFFFF;
    --header-bg: #000000;
    --header-bg-solid: #000000;
    --nav-pill-bg: #000000;
    --nav-pill-active: #1E1E1E;
    --focus: 0 0 0 3px #FFD60A;
    --shadow-overlay: none;
    --brand-on-primary: #FFFFFF;
    --patient-lock-accent: #FFD60A;
  }
}

html[data-theme="dark"] {
  --apple-canvas: #0B111A;
  --apple-card: #151F2E;
  --card-border: rgba(255, 255, 255, 0.12);
  --card-border-subtle: rgba(255, 255, 255, 0.07);
  --card-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  --card-shadow-hover: 0 12px 28px rgba(0, 0, 0, 0.45);
  --text-primary: #F1F5F9;
  --text-secondary: #CBD5E1;
  --text-tertiary: #94A3B8;
  --text-quaternary: #7C8BA1;
  --apple-blue: #0369A1; /* white text on this fill is >= 4.5:1 */
  --apple-blue-hover: #0284C7;
  --apple-blue-subtle: #0C2D44;
  --apple-blue-text: #7DD3FC;
  --apple-emerald-bg: #0B2A22;
  --apple-emerald-text: #6EE7B7;
  --apple-amber-bg: #33260B;
  --apple-amber-text: #FCD34D;
  --apple-crimson-bg: #3A1517;
  --apple-crimson-text: #FCA5A5;
  --apple-indigo-bg: #1E2246;
  --apple-indigo-text: #A5B4FC;
  --apple-purple-bg: #261C40;
  --apple-purple-text: #C4B5FD;
  --apple-teal-bg: #0C2B2A;
  --apple-teal-text: #5EEAD4;
  --apple-pink-bg: #3A1520;
  --apple-pink-text: #FDA4AF;
  --apple-slate-bg: #1C283B;
  --hover: #1C283B;
  --selected: #0C2D44;
  --control-border: rgba(255, 255, 255, 0.22);
  --header-bg: rgba(11, 17, 26, 0.86);
  --header-bg-solid: #0B111A;
  --nav-pill-bg: #1C283B;
  --nav-pill-active: #151F2E;
  --focus: 0 0 0 3px rgba(56, 189, 248, 0.5);
  --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.55);
  --brand-on-primary: #FFFFFF;
  --patient-lock-accent: #A5B4FC;
}

html[data-theme="high-contrast"] {
  --apple-canvas: #000000;
  --apple-card: #121212;
  --card-border: #FFFFFF;
  --card-border-subtle: #FFFFFF;
  --card-shadow: none;
  --card-shadow-hover: none;
  --text-primary: #FFFFFF;
  --text-secondary: #FFFFFF;
  --text-tertiary: #FFFFFF;
  --text-quaternary: #FFFFFF;
  --apple-blue: #075985; /* white text 7.6:1 */
  --apple-blue-hover: #0C4A6E;
  --apple-blue-subtle: #000000;
  --apple-blue-text: #7DD3FC;
  --apple-emerald: #6EE7B7;
  --apple-emerald-text: #86EFAC;
  --apple-emerald-bg: #000000;
  --apple-amber: #FCD34D;
  --apple-amber-text: #FDE68A;
  --apple-amber-bg: #000000;
  --apple-crimson: #FCA5A5;
  --apple-crimson-text: #FECACA;
  --apple-crimson-bg: #000000;
  --apple-indigo-text: #FFFFFF;
  --apple-indigo-bg: #000000;
  --apple-purple-text: #FFFFFF;
  --apple-purple-bg: #000000;
  --apple-teal-text: #FFFFFF;
  --apple-teal-bg: #000000;
  --apple-pink-text: #FFFFFF;
  --apple-pink-bg: #000000;
  --apple-slate-text: #FFFFFF;
  --apple-slate-bg: #000000;
  --hover: #1E1E1E;
  --selected: #1E1E1E;
  --control-border: #FFFFFF;
  --header-bg: #000000;
  --header-bg-solid: #000000;
  --nav-pill-bg: #000000;
  --nav-pill-active: #1E1E1E;
  --focus: 0 0 0 3px #FFD60A;
  --shadow-overlay: none;
  --brand-on-primary: #FFFFFF;
  --patient-lock-accent: #FFD60A;
}

html[data-theme="light"] {
  /* Explicit light: same as :root, blocks OS dark from applying. */
}

@media (forced-colors: active) {
  :root {
    --apple-canvas: Canvas;
    --apple-card: Canvas;
    --text-primary: CanvasText;
    --text-secondary: CanvasText;
    --text-tertiary: CanvasText;
    --card-border: CanvasText;
    --apple-blue: LinkText;
    --apple-blue-text: LinkText;
    --header-bg: Canvas;
    --header-bg-solid: Canvas;
    --nav-pill-bg: Canvas;
    --nav-pill-active: Canvas;
    --focus: 0 0 0 3px Highlight;
  }
  .bento-card, .apple-header, .topbar, .mobile-nav, .patient-lock {
    border: 1px solid CanvasText;
    background: Canvas;
    color: CanvasText;
    forced-color-adjust: none;
  }
}

/* ==========================================================================
   UI spec v2.0 §3 — 12-column bento grid (breakpoints in em)
   Desktop ≥75em: 12 cols, 24px gutters.
   Tablet 48–74.99em: 6 cols, 20px gutters (12/8 → full, 6/4/3 → half).
   Mobile <48em: 1 col, 16px gutters.
   Cards: min-height only. Internals: container queries. Hero: clamp().
   ========================================================================== */

.bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter-mobile);
  width: 100%;
  min-width: 0;
}
.bento-card {
  min-height: 8rem;
  min-width: 0;
  background: var(--apple-card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--card-shadow);
  padding: 1.5rem;
  container-type: inline-size;
  container-name: card;
}
.bento-card[data-state="empty"] { min-height: 6rem; }
.bento-card[data-state="loading"] { min-height: 8rem; }
.bento-card[data-state="error"] { border-color: var(--apple-amber-text); }
.clinical-text {
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
  text-overflow: unset;
}

@media (min-width: 48em) {
  .bento {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--gutter-tablet);
  }
  .bento > [data-span="12"],
  .bento > [data-span="8"] { grid-column: span 6; }
  .bento > [data-span="6"],
  .bento > [data-span="4"],
  .bento > [data-span="3"] { grid-column: span 3; }
}

@media (min-width: 75em) {
  .bento {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--gutter-desktop);
  }
  .bento > [data-span="12"] { grid-column: span 12; }
  .bento > [data-span="8"] { grid-column: span 8; }
  .bento > [data-span="6"] { grid-column: span 6; }
  .bento > [data-span="4"] { grid-column: span 4; }
  .bento > [data-span="3"] { grid-column: span 3; }
}

@container card (max-width: 16rem) {
  .hero-metric { font-size: clamp(1.25rem, 8cqi, 1.75rem); }
}

/* ==========================================================================
   Health Icons (MIT, healthicons.org) — filled set, tinted by currentColor.
   Provenance: reference/vendor-graphics/README.md; notice ships beside the
   files as assets/icons/clinical/LICENSE.txt. Always aria-hidden: the visible
   text label carries the meaning.
   ========================================================================== */
.hi-icon {
  display: inline-block;
  flex: 0 0 auto;
  width: var(--hi-size, 1.5rem);
  height: var(--hi-size, 1.5rem);
  background-color: currentColor;
  -webkit-mask: var(--hi-src) center / contain no-repeat;
  mask: var(--hi-src) center / contain no-repeat;
}
.hi-calendar        { --hi-src: url("/assets/icons/clinical/calendar.svg"); }
.hi-medical-records { --hi-src: url("/assets/icons/clinical/medical_records.svg"); }
.hi-blood-pressure  { --hi-src: url("/assets/icons/clinical/blood_pressure.svg"); }
.hi-medicines       { --hi-src: url("/assets/icons/clinical/medicines.svg"); }
.hi-pills           { --hi-src: url("/assets/icons/clinical/pills.svg"); }
.hi-test-tubes      { --hi-src: url("/assets/icons/clinical/test_tubes.svg"); }
.hi-user-profile    { --hi-src: url("/assets/icons/clinical/user_profile.svg"); }
.hi-documents       { --hi-src: url("/assets/icons/clinical/documents_accepted.svg"); }
.hi-stethoscope     { --hi-src: url("/assets/icons/clinical/stethoscope.svg"); }
.hi-allergies       { --hi-src: url("/assets/icons/clinical/allergies.svg"); }
.hi-blood-drop      { --hi-src: url("/assets/icons/clinical/blood_drop.svg"); }
.hi-doctor          { --hi-src: url("/assets/icons/clinical/doctor.svg"); }
.hi-hospital        { --hi-src: url("/assets/icons/clinical/hospital.svg"); }
.hi-health-literacy { --hi-src: url("/assets/icons/clinical/health_literacy.svg"); }
.hi-outpatient      { --hi-src: url("/assets/icons/clinical/outpatient_department.svg"); }
.hi-prescription    { --hi-src: url("/assets/icons/clinical/prescription_document.svg"); }
.hi-heart           { --hi-src: url("/assets/icons/clinical/heart.svg"); }
.hi-microscope      { --hi-src: url("/assets/icons/clinical/microscope.svg"); }
.hi-alert-triangle  { --hi-src: url("/assets/icons/clinical/alert_triangle.svg"); }
.hi-alert-circle    { --hi-src: url("/assets/icons/clinical/alert_circle.svg"); }
.hi-info            { --hi-src: url("/assets/icons/clinical/info.svg"); }
.hi-yes             { --hi-src: url("/assets/icons/clinical/yes.svg"); }
.hi-question        { --hi-src: url("/assets/icons/clinical/question.svg"); }
.pfx-page-help > summary .hi-icon { --hi-size: 1.125rem; vertical-align: -0.2em; }
.hi-magic           { --hi-src: url("/assets/icons/clinical/magic_wand.svg"); }
.hi-chart-line      { --hi-src: url("/assets/icons/clinical/chart_line.svg"); }
.hi-running         { --hi-src: url("/assets/icons/clinical/running.svg"); }
.hi-walking         { --hi-src: url("/assets/icons/clinical/walking.svg"); }
.hi-hospitalized    { --hi-src: url("/assets/icons/clinical/hospitalized.svg"); }
.hi-shield          { --hi-src: url("/assets/icons/clinical/ui_secure.svg"); }
.hi-virus-shield    { --hi-src: url("/assets/icons/clinical/virus_shield.svg"); }
.hi-weight          { --hi-src: url("/assets/icons/clinical/weight.svg"); }
.hi-height          { --hi-src: url("/assets/icons/clinical/height.svg"); }
.hi-person          { --hi-src: url("/assets/icons/clinical/person.svg"); }
.hi-heartbeat       { --hi-src: url("/assets/icons/clinical/heartbeat.svg"); }
.hi-home            { --hi-src: url("/assets/icons/clinical/home.svg"); }
.hi-medicine-bottle { --hi-src: url("/assets/icons/clinical/medicine_bottle.svg"); }
.hi-dna             { --hi-src: url("/assets/icons/clinical/dna.svg"); }
.hi-people          { --hi-src: url("/assets/icons/clinical/people.svg"); }
.hi-phone           { --hi-src: url("/assets/icons/clinical/phone.svg"); }
.hi-xray            { --hi-src: url("/assets/icons/clinical/xray.svg"); }
.hi-syringe         { --hi-src: url("/assets/icons/clinical/syringe.svg"); }
.hi-smoking         { --hi-src: url("/assets/icons/clinical/smoking.svg"); }
.hi-alcohol         { --hi-src: url("/assets/icons/clinical/alcohol.svg"); }
.hi-sleepy          { --hi-src: url("/assets/icons/clinical/sleepy.svg"); }
.hi-utensils        { --hi-src: url("/assets/icons/clinical/utensils.svg"); }
.hi-mental-health   { --hi-src: url("/assets/icons/clinical/mental_health.svg"); }
.hi-gluten          { --hi-src: url("/assets/icons/clinical/gluten.svg"); }
.hi-lungs           { --hi-src: url("/assets/icons/clinical/lungs.svg"); }
.hi-symptom         { --hi-src: url("/assets/icons/clinical/symptom.svg"); }
.hi-medical-advice  { --hi-src: url("/assets/icons/clinical/medical_advice.svg"); }
.hi-search          { --hi-src: url("/assets/icons/clinical/magnifying_glass.svg"); }
.hi-add             { --hi-src: url("/assets/icons/ui/add.svg"); }
.hi-add-circle      { --hi-src: url("/assets/icons/ui/add_circle.svg"); }
.hi-check           { --hi-src: url("/assets/icons/ui/check.svg"); }
.hi-edit            { --hi-src: url("/assets/icons/ui/edit.svg"); }
.hi-print           { --hi-src: url("/assets/icons/ui/print.svg"); }
.hi-download        { --hi-src: url("/assets/icons/ui/download.svg"); }
.hi-target          { --hi-src: url("/assets/icons/ui/target.svg"); }
.hi-calculate       { --hi-src: url("/assets/icons/ui/calculate.svg"); }
.hi-schedule        { --hi-src: url("/assets/icons/ui/schedule.svg"); }
.hi-history         { --hi-src: url("/assets/icons/ui/history.svg"); }
.hi-lightbulb       { --hi-src: url("/assets/icons/ui/lightbulb.svg"); }
.hi-link            { --hi-src: url("/assets/icons/ui/link.svg"); }
.hi-hourglass       { --hi-src: url("/assets/icons/ui/hourglass.svg"); }
.hi-medical-services { --hi-src: url("/assets/icons/ui/medical_services.svg"); }
.hi-layers          { --hi-src: url("/assets/icons/ui/layers.svg"); }
.hi-radio-checked   { --hi-src: url("/assets/icons/ui/radio_checked.svg"); }
.hi-percent         { --hi-src: url("/assets/icons/ui/percent.svg"); }
.hi-chevron-right   { --hi-src: url("/assets/icons/ui/chevron_right.svg"); }
/* Inside a line of text (buttons, pills, notes, headings) the icon follows the
   text size; tiles and badges set their own --hi-size. */
:where(.btn, .type-pill, .mh2-pill, .filter-btn, .safety-alert, .tray-title, .derived-title,
       .myh-declared-title, .dash-disclaimer, .dash-h2, .card-header h3, .pfx-status, p, li, a) > .hi-icon {
  --hi-size: 1.15em;
  vertical-align: -0.2em;
}
:where(.mh2-kpi-ico, .dash-icon-tile, .calm-alert-icon, .mh2-banner-ico, .mh3-badge) > .hi-icon { --hi-size: 1.25rem; }
.pfx-empty-icon > .hi-icon { --hi-size: 2rem; }
@media (forced-colors: active) {
  .hi-icon { forced-color-adjust: none; background-color: CanvasText; }
}