/* ============================================================
   Medicue — Foundations
   Canonical source: medicue-design-skill / SKILL.md
   ------------------------------------------------------------
   This file consolidates:
   - Original Figma "Brand · Foundations" tokens (preserved)
   - All tokens from SKILL.md (added as aliases or first-class)
   - Sentiment-slider tokens (formalized addition)

   Rule: always reference tokens, never raw hex or pixel values.
   ============================================================ */


/* ============================================================
   FONTS
   ============================================================ */

/* Instrument Sans — upright + italic, variable (weight + width axes) */
@font-face {
  font-family: "Instrument Sans";
  src: url("./fonts/InstrumentSans-VariableFont_wdth_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("./fonts/InstrumentSans-Italic-VariableFont_wdth_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: italic;
  font-display: swap;
}

/* Instrument Serif — 400 upright + italic */
@font-face {
  font-family: "Instrument Serif";
  src: url("./fonts/InstrumentSerif-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("./fonts/InstrumentSerif-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ============================================================
   FONT AWESOME 6 PRO — self-hosted
   ------------------------------------------------------------
   We self-host two Pro weights: Regular (400) is the default
   product weight; Light (300) is used sparingly for hero /
   illustrative icons. Utility classes below let HTML files use
   the familiar `fa-regular` / `fa-light` / `fa-solid` prefixes
   without loading Font Awesome's full CSS.

   HTML files should link this file directly — no CDN needed:
     <link rel="stylesheet" href="medicue-foundations.css" />

   For `fa-solid` we fall back to the Regular face and let
   individual icons use their solid unicode (most glyphs have
   one shared codepoint; true solid variants should be added
   when the Solid weight file is uploaded).
   ============================================================ */

@font-face {
  font-family: "Font Awesome 6 Pro";
  src: url("./fonts/Font_Awesome_6_Pro-Regular-400.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Font Awesome 6 Pro";
  src: url("./fonts/Font_Awesome_6_Pro-Light-300.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: block;
}

.fa-regular, .fa-solid, .fa-light, .fa-thin,
.fa, [class^="fa-"], [class*=" fa-"] {
  font-family: "Font Awesome 6 Pro" !important;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
}
.fa-regular, .fa-solid { font-weight: 400; }
.fa-light              { font-weight: 300; }

/* NOTE: FA glyph-name → codepoint mappings live in
   fonts/fontawesome-icons.css. Link it AFTER this file in every
   HTML document so .fa-eye::before { content: "\f06e" } is set:

     <link rel="stylesheet" href="medicue-foundations.css" />
     <link rel="stylesheet" href="fonts/fontawesome-icons.css" />
*/


/* ============================================================
   COLORS — Primary palette
   ============================================================ */

:root {
  /* Brand core (canonical names from Figma) */
  --seriously-blue:       #13294B;   /* Pantone 2767 C — primary */
  --seriously-blue-alt:   #203153;   /* slight lift, text on papers */

  /* Neutral "papers" */
  --clinical-paper:       #FFFCF9;   /* lifted cards */
  --sand-paper:           #FFF6EA;   /* default background */
  --warm-paper:           #FFF9F5;   /* darker-section background */
  --pure-white:           #FFFFFF;

  /* Warm accents */
  --sand-beige:           #EDD0C2;   /* Figma name: Soft Clay */
  --sand-beige-soft:      #F6E3D6;
  --faded-sand:           #F8ECE4;   /* alias — SKILL name */

  /* Secondary palette — aligned with Figma "Brand · Foundations" */
  --scrub-green:          #31C3C3;   /* vivid teal — progress, active state, focus ring */
  --medical-green:        #A6E2E2;   /* soft mint — highlight / marker backgrounds */
  --natural-green:        #C7DBD3;   /* sage — natural semantic cards */
  --pulse-orange:         #F76C45;   /* optional accent — most screens use none; max one small graphic element (~2%); never text, never a button/CTA */
  --soft-clay:            #EDD0C2;   /* alias for --sand-beige (Figma "Soft Clay") */


  /* ----- SKILL.md token aliases -----
     Same values, SKILL naming for shorter spec references.
     Prefer the canonical names above in new code where clarity
     matters; aliases exist so SKILL examples paste in cleanly. */
  --navy:                 var(--seriously-blue);
  --teal:                 var(--scrub-green);      /* vivid #31C3C3 */
  --teal-lt:              var(--medical-green);    /* soft mint #A6E2E2 */
  --teal-sage:            var(--natural-green);    /* sage #C7DBD3 */
  --pulse:                var(--pulse-orange); /* @kind color */
  --warm:                 var(--warm-paper); /* @kind color */
  --sand:                 var(--faded-sand);
  --clinical:             var(--clinical-paper); /* @kind color */
  --clay-orange:          var(--sand-beige);   /* alias — older code uses this */
  --muted:                #3B5068;       /* SKILL secondary text */
  --border:               #E4D5CC;       /* SKILL divider color */
}


/* ============================================================
   COLORS — Status / Utility palette
   System feedback only. Never substitute brand colors for status.
   ============================================================ */

:root {
  /* Critical — errors, urgent warnings, contact-clinic alerts */
  --status-error-bg:      #FDA893;
  --status-error-fg:      #571A0B;   /* WCAG AAA: 7.2:1 on error bg */
  --status-critical-bg:   var(--status-error-bg);
  --status-critical-fg:   var(--status-error-fg);

  /* Warning — cautions, side effects to monitor */
  --status-pending-bg:    #F5ECB5;
  --status-pending-fg:    #6E4009;   /* WCAG AAA: 7.3:1 on pending bg */
  --status-warning-bg:    var(--status-pending-bg);
  --status-warning-fg:    var(--status-pending-fg);

  /* Success — completion, confirmed, good results */
  --status-success-bg:    #ACE2D9;
  --status-success-fg:    #0B4441;   /* WCAG AAA: 7.6:1 on success bg */

  /* Info / Active — informational, active states */
  --status-active-bg:     #BDD8EB;
  --status-active-fg:     #16307F;   /* WCAG AAA: 8.1:1 on active bg */
  --status-info-bg:       var(--status-active-bg);
  --status-info-fg:       var(--status-active-fg);

  /* System / AI — AI-generated content, automated messages */
  --status-ai-bg:         #DCD3EB;
  --status-ai-fg:         #5A1B8C;   /* WCAG AAA: 7.4:1 on AI bg */

  /* Default — neutral notices, general system messages */
  --status-default-bg:    #FFF6EA;
  --status-default-fg:    #203153;
}


/* ============================================================
   COLORS — Semantic card surfaces (PRODUCT)
   Cards communicate content type through background color.
   SKILL § PRODUCT Card system.
   ============================================================ */

.c-clinical { background: var(--clinical-paper); color: var(--seriously-blue); }
.c-natural  { background: var(--natural-green);  color: var(--seriously-blue); }
.c-clay     { background: var(--sand-beige);     color: var(--seriously-blue); }
.c-navy     { background: var(--seriously-blue); color: var(--sand-paper);    }

/* On any c-navy surface, cascade fg color appropriately */
.c-navy,
.c-navy * {
  --fg: var(--sand-paper);
  --fg-muted: rgba(255, 246, 234, 0.72);
  --fg-subtle: rgba(255, 246, 234, 0.70);  /* WCAG AAA: 7.4:1 on navy */
}


/* ============================================================
   COLORS — Semantic foreground / background
   ============================================================ */

:root {
  --bg:                   var(--sand-paper);       /* default */
  --bg-raised:            var(--clinical-paper);   /* cards */
  --bg-sunken:            var(--warm-paper);       /* sections behind cards */
  --bg-inverse:           var(--seriously-blue);

  --fg:                   var(--seriously-blue);
  --fg-muted:             rgba(19, 41, 75, 0.72);
  --fg-subtle:            rgba(19, 41, 75, 0.80);  /* WCAG AAA: 7.4:1 on sand paper */
  --fg-inverse:           var(--sand-paper);
  --fg-on-brand:          var(--sand-paper);

  /* Borders — two systems coexist:
     --border (SKILL, warm divider) is an opaque hex.
     --border-hair / --border-soft are transparent alphas for
     thin lines over patterned or colored surfaces. */
  --border-hair:          rgba(19, 41, 75, 0.14);
  --border-soft:          rgba(19, 41, 75, 0.28);

  --focus-ring:           var(--seriously-blue); /* @kind color */ /* navy: 13.6:1 on sand — meets WCAG 1.4.11 non-text contrast */
}

/* Dark surface helper — paints a section Navy */
.surface-dark,
.c-navy {
  --bg:                   var(--seriously-blue);
  --bg-raised:            #1B2D50;
  --bg-sunken:            #0E1E38;
  --fg:                   var(--sand-paper);
  --fg-muted:             rgba(255, 246, 234, 0.72);
  --fg-subtle:            rgba(255, 246, 234, 0.70);  /* WCAG AAA: 7.4:1 on navy */
  --border-hair:          rgba(255, 246, 234, 0.16);
  background: var(--bg);
  color: var(--fg);
}


/* ============================================================
   RADII
   Radii express brand personality. Defaults are generous and organic.
   Both the old "--radius-*" scale and SKILL "--r-*" tokens coexist.
   ============================================================ */

:root {
  /* Legacy scale (kept for compatibility) */
  --radius-xs:            4px;
  --radius-sm:            8px;
  --radius-md:            16px;
  --radius-lg:            24px;
  --radius-xl:            32px;
  --radius-pill:          999px;

  /* SKILL component-semantic radii — prefer in new code */
  --r-tag:                6px;    /* small meta tags */
  --r-chip:               12px;   /* answer chips */
  --r-input:              16px;   /* form fields */
  --r-image:              20px;   /* hero & content images */
  --r-card:               24px;   /* card corners */
  --r-btn:                100px;  /* pill-shaped buttons */
}


/* ============================================================
   SPACING
   4px grid with two intentional exceptions (7px, 14px) which
   support card-stack math and text rhythm. Do NOT round these.
   ============================================================ */

:root {
  /* Legacy 4pt scale */
  --space-0:              0; /* @kind spacing */
  --space-1:              4px;
  --space-2:              8px;
  --space-3:              12px;
  --space-4:              16px;
  --space-5:              20px;
  --space-6:              24px;
  --space-8:              32px;
  --space-10:             40px;
  --space-12:             48px;
  --space-16:             64px;
  --space-20:             80px;
  --space-24:             96px;

  /* SKILL named tokens — prefer in new code */
  --s-xs:                 4px;
  --s-sm:                 10px;
  --s-md:                 20px;
  --s-lg:                 32px;
  --s-xl:                 48px;
  --s-2xl:                64px;
  --s-3xl:                96px;

  /* Intentional exceptions */
  --s-7:                  7px;    /* card-stack strip offset */
  --s-14:                 14px;   /* text rhythm */
}


/* ============================================================
   ICONOGRAPHY sizing
   SKILL § Iconography. FA scales at any size — these are our
   canonical steps, snapped to the 4px grid (except 14px inline).
   ============================================================ */

:root {
  --icon-xs:              14px; /* @kind spacing */   /* inline with body text, meta */
  --icon-sm:              16px; /* @kind spacing */   /* form affix, small buttons */
  --icon-md:              20px; /* @kind spacing */   /* button leading/trailing, list bullets */
  --icon-lg:              24px; /* @kind spacing */   /* standalone actions, FAB, nav */
  --icon-xl:              32px; /* @kind spacing */   /* card header, empty-state illustration */
  --icon-2xl:             48px; /* @kind spacing */   /* hero, full-screen alert */

  /* Convention for custom medical icons (SKILL spec) */
  --icon-stroke:          1.5px; /* @kind spacing */
}


/* ============================================================
   TYPOGRAPHY
   Two fonts. One voice. Instrument Serif + Instrument Sans.
   Never use one without the other. See SKILL § Typography.
   ============================================================ */

:root {
  --font-serif:           "Instrument Serif", "Source Serif Pro", Georgia, serif;
  --font-sans:            "Instrument Sans", "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:            ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale — Figma canonical sizes */
  --text-xxs:             10px;
  --text-xs:              12px;
  --text-sm:              14px;
  --text-md:              16px;
  --text-lg:              18px;
  --text-xl:              21px;
  --text-2xl:             24px;
  --text-3xl:             32px;
  --text-display-sm:      48px;
  --text-display-md:      80px;
  --text-display-lg:      120px;
  --text-display-xl:      140px;

  /* Line heights */
  --lh-tight:             1; /* @kind font */
  --lh-snug:              1.15; /* @kind font */
  --lh-body:              1.45; /* @kind font */
  --lh-prose:             1.6; /* @kind font */

  /* Tracking */
  --tracking-display:     -0.03em; /* @kind font */
  --tracking-heading:     -0.01em; /* @kind font */
  --tracking-normal:      0; /* @kind font */
  --tracking-eyebrow:     0; /* @kind font */ /* eyebrows are sentence case, no letterspacing */
  --tracking-step:        0; /* @kind font */ /* step indicators are sentence case, no letterspacing */

  /* Card title (product card-stack) — overridable per white-label */
  --title-family:         var(--font-serif);
  --title-size:           34px;
  --title-tracking:       -0.03em; /* @kind font */
  --title-weight:         400; /* @kind font */
  --title-transform:      none; /* @kind font */
}

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


/* ---------- Editorial display (serif) ----------------------- */
/* Emotional emphasis, storytelling, marketing heroes. */
.t-editorial-xl, h1.editorial {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--text-display-xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
}
.t-editorial-lg              { font: 400 var(--text-display-lg)/var(--lh-tight) var(--font-serif); letter-spacing: var(--tracking-display); }
.t-editorial-md, h2.editorial{ font: 400 var(--text-display-md)/var(--lh-tight) var(--font-serif); letter-spacing: var(--tracking-display); }
.t-editorial-sm, h3.editorial{ font: 400 var(--text-display-sm)/var(--lh-tight) var(--font-serif); letter-spacing: var(--tracking-display); }


/* ---------- Card title (product) ---------------------------- */
/* The canonical patient-card title. Instrument Serif 34/400. */
.t-card-title {
  font-family: var(--title-family);
  font-weight: var(--title-weight);
  font-size: var(--title-size);
  line-height: var(--lh-snug);
  letter-spacing: var(--title-tracking);
  text-transform: var(--title-transform);
  color: var(--fg);
}

/* Editorial <em> — expressive, title-tier only, never for body emphasis */
.t-card-title em,
.t-editorial-xl em, .t-editorial-lg em, .t-editorial-md em, .t-editorial-sm em {
  font-style: italic;
}


/* ---------- Clinical display (sans headings) ---------------- */
.t-clinical-xl, h1 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-display-sm);   /* 48 */
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--fg);
}
.t-clinical-lg, h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-3xl);          /* 32 */
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-display);
}
.t-clinical-md, h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-2xl);          /* 24 */
  line-height: var(--lh-snug);
}
.t-clinical-sm, h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-lg);           /* 18 */
  line-height: var(--lh-snug);
}


/* ---------- Powerful heading (sans, clinical alt) ------------ */
/* SKILL: "Use when urgent, factual, data-heavy and serif feels too soft." */
.t-powerful {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 26px;            /* 22–28 per SKILL */
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-heading);
  color: var(--fg);
}


/* ---------- Overlines / eyebrows ----------------------------- */
/* Unified style — SKILL has several sizes depending on surface. */
h5, h6, .t-overline {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-sm);          /* 14px — legibility floor */          /* 12 */
  line-height: 1.2;
  letter-spacing: var(--tracking-eyebrow);   /* 0 — clean, no letterspacing */
  text-transform: none;                      /* sentence case, normal punctuation */
  color: var(--seriously-blue);              /* navy, not muted */
}
/* ---------- Highlight (marker) -------------------------------
   Wraps a word or two in a soft mint pill — Medicue's canonical
   way to emphasize a key word inside a headline. Use instead of
   colouring the word orange. Keeps text colour (navy / fg) and
   stays legible in serif italic and sans alike. Wraps cleanly
   across lines thanks to box-decoration-break. Keep to 1–3
   words; never a whole sentence. */
.t-highlight {
  /* Pale mint tint — soft enough to keep headline rhythm intact */
  background: color-mix(in oklab, var(--medical-green) 55%, var(--clinical-paper));
  color: inherit;
  padding: 0 0.08em;
  border-radius: 0.12em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Smaller variant for step indicators ("Steg 4 av 8") */
.t-step {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-sm);          /* 14px — legibility floor */
  line-height: 1.2;
  letter-spacing: 0;                 /* sentence case, friendly */
  text-transform: none;
  color: var(--seriously-blue);      /* 100% navy, not muted */
}
}


/* ---------- Body ---------------------------------------------- */
p, .t-body {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;                    /* product body per SKILL */
  line-height: var(--lh-body);
  color: var(--fg);
}
.t-body-lg { font-size: 17px; }
.t-body-sm { font-size: 13px; }

/* Lead paragraph — marketing/hero */
.t-lead {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 20px;
  line-height: var(--lh-body);
  color: var(--fg);
}


/* ---------- UI label ----------------------------------------- */
.t-label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-md);
  line-height: var(--lh-snug);
  color: var(--fg);
}
.t-label-bold {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-md);
  line-height: var(--lh-snug);
  color: var(--fg);
}

/* Question text (card-stack) — 15/700, tracking -0.015em */
.t-question {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15px;
  line-height: var(--lh-body);
  letter-spacing: -0.015em;
  color: var(--fg);
}


/* ---------- Meta / captions ---------------------------------- */
.t-meta {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-xs);
  line-height: var(--lh-body);
  color: var(--muted);
}

.t-micro {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-xxs);
  line-height: 1;
  color: var(--fg);
}


/* ---------- Button text (18/700) ----------------------------- */
.t-btn {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-lg);
  line-height: 21px;
  letter-spacing: 0;
}

code, pre, .t-mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}


/* ============================================================
   MOTION
   SKILL: "Always spring. Never linear. Never ease-in-out."
   ============================================================ */

:root {
  /* Primary tokens (SKILL names) */
  --spring:               cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --spring-bounce:        cubic-bezier(0.34, 1.4, 0.64, 1); /* @kind other */

  /* Aliases */
  --ease-brand:           var(--spring); /* @kind other */
  --ease-in-out:          cubic-bezier(0.6, 0, 0.4, 1); /* @kind other */

  /* Durations */
  --dur-fast:             120ms; /* @kind other */
  --dur-base:             200ms; /* @kind other */
  --dur-slow:             320ms; /* @kind other */

  /* Named per SKILL motion table */
  --dur-card-enter:       650ms; /* @kind other */   /* card entering from below */
  --dur-stack-adjust:     450ms; /* @kind other */   /* stack depth change */
  --dur-progress:         600ms; /* @kind other */   /* progress bar */
  --dur-check-circle:     700ms; /* @kind other */   /* completion check circle */
  --dur-check-path:       450ms; /* @kind other */   /* completion check path */
  --dur-fab:              300ms; /* @kind other */   /* FAB entry */
  --dur-modal:            350ms; /* @kind other */   /* modal open */
}

/* Default interactive transitions */
button, .btn, a.btn {
  transition:
    background-color var(--dur-base) var(--spring),
    color            var(--dur-base) var(--spring),
    transform        var(--dur-fast) var(--spring),
    box-shadow       var(--dur-base) var(--spring),
    border-color     var(--dur-base) var(--spring),
    opacity          var(--dur-base) var(--spring);
}
button:active, .btn:active {
  transform: translateY(1px) scale(0.99);
}

/* Reduced motion — SKILL mandate. Keep functional, drop decorative. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:    150ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:   150ms !important;
  }
}


/* ============================================================
   SHADOWS — restrained, flat UI
   ============================================================ */

:root {
  --shadow-xs:            0 1px 0 0 rgba(19,41,75,0.06);
  --shadow-sm:            0 2px 8px -2px rgba(19,41,75,0.10);
  --shadow-md:            0 8px 24px -8px rgba(19,41,75,0.18);
  --shadow-lg:            0 16px 40px -12px rgba(19,41,75,0.22);
  --shadow-card:          0 1px 0 0 rgba(19,41,75,0.06), 0 8px 24px -12px rgba(19,41,75,0.12);

  /* Button-specific (SKILL) */
  --shadow-btn-hover:     0 6px 18px rgba(19,41,75,0.24);
  --shadow-btn-active:    0 2px 6px rgba(19,41,75,0.24);
  --shadow-fab:           0 6px 20px rgba(19,41,75,0.28);
  --shadow-chip-selected: 0 4px 14px rgba(19,41,75,0.22);
}


/* ============================================================
   Z-INDEX
   Strict scale per SKILL § PRODUCT Z-index. Never introduce
   values outside this list — add to this file first.
   ============================================================ */

:root {
  --z-card-hidden:        0; /* @kind other */
  --z-card-stack:         1; /* @kind other */      /* 1–39 for stacked cards */
  --z-card-active:        40; /* @kind other */
  --z-fab:                50; /* @kind other */
  --z-fab-panel:          60; /* @kind other */
  --z-topbar:             100; /* @kind other */
  --z-modal:              200; /* @kind other */
  --z-demo-switcher:      300; /* @kind other */
  --z-toast:              400; /* @kind other */
  --z-emergency-alert:    999; /* @kind other */
}


/* ============================================================
   FOCUS
   Every interactive element has a visible focus state.
   SKILL mandate: never remove without replacing.
   ============================================================ */

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

/* White inner ring on light surfaces for added contrast */
.focus-with-halo:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--clinical-paper);
}


/* ============================================================
   ACCESSIBILITY — screen reader only
   ============================================================ */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}


/* ============================================================
   SENTIMENT SCALE — patient-reported outcomes
   Formalized addition to SKILL.md. Muted, perceptually matched,
   never traffic-light. See components/sentiment-tokens.css
   for the actual tokens and usage docs.
   ============================================================ */