/* ===========================================================================
   POR 2026 — HIGH-FIDELITY: styles.css  (THE SINGLE SOURCE OF TRUTH)
   ---------------------------------------------------------------------------
   Consolidated from the former tokens + per-component files so there is ONE
   stylesheet per page — no cross-file drift, no cache mismatch between files.
   Edit THIS file (the old components/*.css are archived, not live).
   Order: font @imports · design tokens · components.
   =========================================================================== */

@import url('https://api.fontshare.com/v2/css?f%5B%5D=recia@300,400,500,600,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap');


/* ============================== TOKENS ============================== */
/* ===========================================================================
   POR 2026 — HIGH-FIDELITY DESIGN TOKENS
   ---------------------------------------------------------------------------
   Source of truth: the POR Figma file (Untitled UI PRO, adapted).
   Read live via the Figma connector. Names mirror the Figma variables (CSS-
   normalized) so every value traces 1:1 to a Figma variable — updating a
   variable in Figma is a one-line edit here.

   Reads so far:
     • Home + Sponsored-Drug section (node 19188:12183) — 2026-06-30
     • Typography specimen frame  (node 1023:36826)     — 2026-07-07
     • Colors specimen frame      (node 5225:371288)     — 2026-07-07

   Numeric variables (spacing/radius/size/line-height/width) are stored unitless
   in Figma; exposed here in px. Type styles (the composite Display/Text styles)
   are utility classes at the bottom.

   COMPLETENESS
     • TYPOGRAPHY — COMPLETE (Typography specimen). Full size/weight/line-height/
       tracking scale + three families (Recia, Inter, DM Mono).
     • COLOR — POR SYSTEM RAMPS COMPLETE (Colors specimen): Brand, Accent,
       Neutral (true-gray), Gray (blue-slate), + status (Red/Amber/Green) and
       Base. The full Untitled UI library (~26 Tailwind palettes) exists in Figma
       but is intentionally NOT mirrored here — only the palettes POR applies.
       Every value is exact from Figma — nothing guessed.
   =========================================================================== */

:root {

  /* ======================================================================
     1 · COLOR — PRIMITIVE RAMPS
     ====================================================================== */

  /* Brand (POR blue) */
  --color-brand-50:  #f7fafd;
  --color-brand-100: #dbe7f5;
  --color-brand-200: #b3c9e9;
  --color-brand-300: #8da9db;
  --color-brand-400: #4a7fd5;
  --color-brand-500: #1e5bb8;   /* POR brand blue */
  --color-brand-600: #194689;
  --color-brand-700: #13315c;
  --color-brand-800: #0f2b51;
  --color-brand-900: #0b2545;
  --color-brand-950: #091e38;

  /* Accent (POR green) */
  --color-accent-50:  #e8f8f0;
  --color-accent-100: #c7eedc;
  --color-accent-200: #a6e5c9;
  --color-accent-300: #69ddab;
  --color-accent-400: #26dc91;
  --color-accent-500: #12a96d;  /* POR accent green */
  --color-accent-600: #0f9a62;
  --color-accent-700: #0d8a57;
  --color-accent-800: #0b7a4d;
  --color-accent-900: #0a6942;
  --color-accent-950: #085938;

  /* Neutral — true gray (Untitled UI standard). Currently drives text/border/bg
     on the live Home + Drug screens. */
  --color-neutral-0:   #ffffff;
  --color-neutral-50:  #fafafa;
  --color-neutral-100: #f5f5f5;
  --color-neutral-200: #e5e5e5;
  --color-neutral-300: #d4d4d4;
  --color-neutral-400: #a3a3a3;
  --color-neutral-500: #737373;
  --color-neutral-600: #525252;
  --color-neutral-700: #404040;
  --color-neutral-800: #262626;
  --color-neutral-900: #171717;
  --color-neutral-950: #0a0a0a;

  /* Gray — POR blue-slate neutral (custom). Available in the file; not currently
     wired to the semantic text/UI tokens (see DECISION note below). */
  --color-gray-50:  #ffffff;
  --color-gray-100: #faf9fb;
  --color-gray-200: #f1f5f9;
  --color-gray-300: #dde5ee;
  --color-gray-400: #94a4ba;
  --color-gray-500: #64748b;
  --color-gray-600: #4a5a71;
  --color-gray-700: #334155;
  --color-gray-800: #1f2b42;
  --color-gray-900: #0f172a;
  --color-gray-950: #05070d;

  /* Status ramps — the library palettes POR uses for feedback states */
  /* Error — Red */
  --color-red-50:  #fef2f2;  --color-red-100: #fee2e2;  --color-red-200: #fecaca;
  --color-red-300: #fca5a5;  --color-red-400: #f87171;  --color-red-500: #ef4444;
  --color-red-600: #dc2626;  --color-red-700: #b91c1c;  --color-red-800: #991b1b;
  --color-red-900: #7f1d1d;  --color-red-950: #450a0a;
  /* Warning — Amber */
  --color-amber-50:  #fffbeb; --color-amber-100: #fef3c7; --color-amber-200: #fde68a;
  --color-amber-300: #fcd34d; --color-amber-400: #fbbf24; --color-amber-500: #f59e0b;
  --color-amber-600: #d97706; --color-amber-700: #b45309; --color-amber-800: #92400e;
  --color-amber-900: #78350f; --color-amber-950: #451a03;
  /* Success — Green (distinct from POR Accent green) */
  --color-green-50:  #f0fdf4; --color-green-100: #dcfce7; --color-green-200: #bbf7d0;
  --color-green-500: #22c55e; --color-green-600: #16a34a; --color-green-700: #15803d;
  /* Orange (utility) */
  --color-orange-400: #fb923c; --color-orange-500: #f97316;

  /* Base */
  --color-black:       #000000;
  --color-white:       #ffffff;
  --color-transparent: #ffffff00;

  /* ======================================================================
     2 · COLOR — SEMANTIC (role tokens; reference the primitives above)
     ====================================================================== */

  /* Text */
  --text-primary:          var(--color-neutral-900);  /* #171717 */
  --text-secondary:        var(--color-neutral-700);  /* #404040 */
  --text-tertiary:         var(--color-neutral-600);  /* #525252 */
  --text-quaternary:       var(--color-neutral-500);  /* #737373 */
  --text-placeholder:      var(--color-neutral-500);  /* #737373 */
  --text-white:            var(--color-white);
  --text-on-brand:         #ffffff;
  --text-brand-primary:    #0b2545;                   /* deep brand ink */
  --text-brand-secondary:  var(--color-accent-700);   /* #0d8a57 — 4.38:1 on white (AA Large only) */
  --text-link:             var(--color-accent-800);   /* #0b7a4d — 5.38:1 on white, passes WCAG AA for body text. Canonical inline text-link color. */

  /* Foreground (icons/graphics) */
  --fg-primary:            var(--color-neutral-900);  /* #171717 */
  --fg-quaternary:         var(--color-neutral-400);  /* #a3a3a3 */
  --fg-brand-primary-alt:  var(--color-brand-600);    /* #194689 */
  --icon-fg-brand:         var(--color-brand-600);    /* #194689 */
  --icon-fg-brand-on-brand:var(--color-brand-200);    /* #b3c9e9 */
  --icon-fg-accent:        var(--color-accent-500);   /* #12a96d — accent icons (non-primary buttons) */

  /* Background */
  --bg-primary:            #ffffff;
  --bg-primary-alt:        #ffffff;
  --bg-primary-hover:      var(--color-neutral-50);   /* #fafafa — Figma bg-primary_hover; the shared neutral HOVER surface (buttons, nav items, list rows) */
  --bg-secondary:          var(--color-neutral-50);   /* #fafafa */
  --bg-secondary-alt:      var(--color-neutral-50);
  --bg-primary-solid:      var(--color-neutral-950);  /* #0a0a0a — near-black (tooltips) */
  --bg-secondary-solid:    var(--color-brand-700);    /* #13315c */
  --bg-brand-solid:        var(--color-brand-600);    /* #194689 */
  --bg-brand-solid-hover:  var(--color-brand-700);    /* #13315c — button primary hover */
  --bg-brand-section-subtle:var(--color-brand-700);   /* #13315c */
  --bg-accent:             var(--color-accent-50);    /* #e8f8f0 */
  --bg-accent-alt:         var(--color-accent-50);
  --bg-accent-solid:       var(--color-accent-700);   /* #0d8a57 */

  /* Border */
  --border-primary:        var(--color-neutral-300);  /* #d4d4d4 */
  --border-secondary:      var(--color-neutral-200);  /* #e5e5e5 */
  --border-brand-alt:      var(--color-brand-600);    /* #194689 */

  /* Brand gradient (start → end) */
  --gradient-brand-start:  var(--color-brand-600);    /* #194689 */
  --gradient-brand-premid: var(--color-brand-300);    /* #8da9db */
  --gradient-brand-mid:    var(--color-brand-200);    /* #b3c9e9 */
  --gradient-brand-end:    #ffffff;

  /* Source-badge border gradient — horizontal: accent green (left) → brand blue (right).
     Figma stroke: utility-accent-500 → utility-brand-400. */
  --gradient-pub-badge-border:
      linear-gradient(to right, var(--color-accent-500), var(--color-brand-400));

  /* Active left-nav item — diagonal brand-blue → accent-green (Figma nav active). */
  --gradient-nav-active:
      linear-gradient(148.8deg, var(--color-brand-400) 4%, var(--color-accent-700) 108%);

  /* Home hero background — layered like the Figma Hero, tuned to match its RENDER
     (not the raw fill export). Two corrections vs a literal copy: (1) the brand
     base reads as a soft medium blue in Figma, not solid navy, so it's mixed
     ~60% toward white; (2) the diagonal wash fades to a transparent BLUE
     (rgba(140,180,233,0)) — NOT the CSS `transparent` (= transparent black),
     which muddies the midtones darker. Three layers: white bottom-fade, diagonal
     blue wash, soft brand-blue→white base. Tune the 60% to shift lighter/darker. */
  --gradient-hero:
      linear-gradient(180deg, rgba(255,255,255,0) 6.78%, #ffffff 100%),
      linear-gradient(238.57deg, rgba(79,141,218,0.5) 0.38%, rgba(140,180,233,0) 100%),
      linear-gradient(180deg, color-mix(in srgb, var(--color-brand-600) 60%, #ffffff) 21.3%, #ffffff 72.2%);

  /* Drug hero background — faithful to the Figma fill (node 19171-5838). The wash
     layer is `linear-gradient(~0deg, brand 0.12 @4.57%, white 0.12 @53.7%)`; at ~0deg
     the gradient runs BOTTOM→TOP, so the brand-blue tint sits at the BOTTOM (behind
     the Wavy-lines-drug graphic) and fades to white through the middle — the top half
     is white. That bottom tint is also what makes the white-50% wavy lines read. */
  --gradient-drughero:
      linear-gradient(180deg,
        #ffffff 0%,
        #ffffff 46%,
        color-mix(in srgb, var(--color-brand-600) 12%, #ffffff) 100%);

  /* Drug content region fade — Figma "All content" (node 19142:1287) brand-300 wash.
     Painted with background-attachment:fixed so it's TETHERED TO THE VIEWPORT BOTTOM
     (always visible while scrolling) and clipped to the content region so it rests
     just above the footer at the page bottom. brand-300 at the bottom edge → transparent
     ~42vh up. Sits behind the columns; the white middle column paints over it. */
  /* Shared page-bottom blue wash — reused by the drug page, article detail, and profile. */
  --gradient-page-bottom:
      linear-gradient(to top, var(--color-brand-300) 0%, transparent 30vh);

  /* Soft brand wash used by the marketing bands (Brands strip + Newsletter):
     white → brand-mid → white, top to bottom. */
  --gradient-brands:
      linear-gradient(180deg, var(--color-white) 6%, var(--color-brand-200) 95%, var(--color-white) 125%);

  /* Modal header flourish — a light two-layer brand wash for the top band of
     modals (inquiry, share). A faint diagonal brand tint in the top-left echoes
     the hero, over a gentle vertical tint that fades to white into the body.
     Kept low-intensity so the dark title + green eyebrow keep full contrast. */
  --gradient-modal-head:
      linear-gradient(135deg, color-mix(in srgb, var(--color-brand-300) 24%, transparent) 0%, transparent 62%),
      linear-gradient(180deg, color-mix(in srgb, var(--color-brand-600) 9%, #ffffff) 0%, #ffffff 100%);

  /* Status (semantic) — Untitled UI "utility" status colors */
  --error:   var(--color-red-500);    /* #ef4444 */
  --warning: var(--color-amber-500);  /* #f59e0b */
  --success: var(--color-green-500);  /* #22c55e */

  /* Form-validation (error) — ONE source for the invalid-input experience.
     Mirrors the Figma error scale; route all error UI through these, not raw red-*. */
  --text-error:       var(--color-red-600);    /* inline error-message text */
  --border-error:     var(--color-red-400);    /* invalid field border */
  --icon-error:       var(--color-red-500);     /* alert-circle in the message */
  --bg-error-subtle:  var(--color-red-50);      /* optional error summary / tint */
  --text-warning:     var(--color-amber-700);   /* warning text / lock badge label */
  --border-warning:   var(--color-amber-300);   /* warning chip border */
  --icon-warning:     var(--color-amber-500);   /* lock / warning icons (= --warning) */
  --bg-warning-subtle:var(--color-amber-50);    /* warning chip / tint */
  --focus-ring-error: 0 0 0 4px var(--color-red-100);  /* invalid field focus ring */

  /* DECISION (open): the semantic neutrals above resolve to the true-gray
     Neutral ramp — matching the live Home/Drug screens. A blue-slate Gray ramp
     also exists (--color-gray-*). If POR wants the cooler blue-slate character
     for text/borders/surfaces, repoint the --text-* / --border-* / --bg-*
     neutrals from --color-neutral-* to --color-gray-*. Flagged for Chris. */

  /* ======================================================================
     3 · SPACING SCALE (px)
     ====================================================================== */
  --spacing-none:      0;
  --spacing-minus-one: -1px;
  --spacing-xxs:       2px;
  --spacing-xs:        4px;
  --spacing-sm:        6px;
  --spacing-md:        8px;
  --spacing-lg:        12px;
  --spacing-xl:        16px;
  --spacing-2xl:       20px;
  --spacing-3xl:       24px;
  --spacing-4xl:       32px;
  --spacing-5xl:       40px;
  --spacing-6xl:       48px;
  --spacing-7xl:       64px;
  --spacing-8xl:       80px;
  --spacing-9xl:       96px;
  --spacing-10xl:      128px;

  /* ======================================================================
     4 · RADIUS SCALE (px)
     ====================================================================== */
  --radius-none: 0;
  --radius-xxs:  2px;
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  /* --radius-lg / 2xl / 4xl: TODO */
  --radius-xl:   12px;
  --radius-3xl:  20px;
  --radius-full: 9999px;

  /* ======================================================================
     5 · CONTAINER WIDTHS (px)  — max-widths for content containers
     ====================================================================== */
  --width-sm:            480px;
  --width-2xl:           1024px;
  --paragraph-max-width: 720px;   /* optimal reading measure for body copy */
  /* remaining width steps (xs/md/lg/xl/3xl…6xl) TODO */

  /* ======================================================================
     6 · TYPOGRAPHY PRIMITIVES
     ====================================================================== */
  --font-family-display: "Recia", Georgia, "Times New Roman", serif;
  --font-family-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-family-mono:    "DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --font-weight-light:    300;   /* Recia Light (display only) */
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --font-size-text-xxs:    10px;   /* micro-eyebrows + citation chips (below text-xs) */
  --font-size-text-xs:     12px;
  --font-size-text-sm:     14px;
  --font-size-text-md:     16px;
  --font-size-text-lg:     18px;
  --font-size-text-xl:     20px;
  --font-size-display-xs:  24px;
  --font-size-display-sm:  30px;
  --font-size-display-md:  36px;
  --font-size-display-lg:  48px;
  --font-size-display-xl:  60px;
  --font-size-display-2xl: 72px;

  --line-height-text-xs:    18px;
  --line-height-text-sm:    20px;
  --line-height-text-md:    24px;
  --line-height-text-lg:    28px;
  --line-height-text-xl:    30px;
  --line-height-display-xs: 32px;
  --line-height-display-sm: 38px;
  --line-height-display-md: 44px;
  --line-height-display-lg: 60px;
  --line-height-display-xl: 72px;
  --line-height-display-2xl:90px;

  /* Prose line-height — a UNITLESS reading ratio for long-form body copy. The
     px line-heights above are for fixed UI text; long-form needs a looser,
     size-independent measure. */
  --line-height-prose: 1.7;

  /* Letter-spacing (tracking) — small optical adjustments. The display type
     utilities hardcode -2px for big headings; this token covers the hairline
     tightening used on mid-size serif headings (e.g. article-body h2). */
  --letter-spacing-tight: -0.01em;

  /* ======================================================================
     7 · EFFECTS — SHADOWS & FOCUS RINGS
     ====================================================================== */
  /* Effect colors (Colors/Effects/Shadows/*) */
  --shadow-xs-color:                 #0000000d;  /* rgba(0,0,0,.05) */
  --shadow-skeuomorphic-inner:       #0000000d;  /* rgba(0,0,0,.05) */
  --shadow-skeuomorphic-inner-border:#0000002e;  /* rgba(0,0,0,.18) */
  /* Translucent top-highlight border on solid buttons
     (Figma: Gradient/skeuemorphic-gradient-border) */
  --gradient-skeuomorphic-border:    rgba(255,255,255,0.12);

  --shadow-xs: 0 1px 2px 0 var(--shadow-xs-color);
  /* Layer order matches Figma Dev Mode exactly: inner-border, inner, drop */
  --shadow-xs-skeuomorphic:
      inset 0 0 0 1px var(--shadow-skeuomorphic-inner-border),
      inset 0 -2px 0 0 var(--shadow-skeuomorphic-inner),
      0 1px 2px 0 var(--shadow-xs-color);
  --focus-ring-brand: 0 0 0 4px var(--color-brand-100);  /* Figma: spread 9 on Brand/100 */
  --focus-ring-gray:  0 0 0 4px var(--color-neutral-100); /* neutral focus (non-brand fields) */

  /* Elevation scale — Untitled UI standard (sm→overlay). The Figma file uses the
     Untitled UI shadow ramp; mirrored here so panels/menus/modals share one scale.
     Reconcile exact values if a Figma elevation spec lands. */
  --shadow-sm:      0 1px 3px 0 rgba(16,24,40,.10), 0 1px 2px -1px rgba(16,24,40,.10);
  --shadow-md:      0 4px 6px -1px rgba(16,24,40,.08), 0 2px 4px -2px rgba(16,24,40,.06);
  --shadow-lg:      0 12px 16px -4px rgba(16,24,40,.08), 0 4px 6px -2px rgba(16,24,40,.03);
  --shadow-overlay: 0 20px 24px -4px rgba(16,24,40,.10), 0 8px 8px -4px rgba(16,24,40,.04);

  /* Soft ACCENT GLOW (green halo) — a reusable interactive-surface effect, not
     card-specific. Two layers: a tight contact glow + a wide diffuse halo, built
     from the accent ramp via color-mix so it stays token-routed. Apply via the
     .hf-hover-glow utility (below) or reference directly. Dial intensity by editing
     the opacity %s here (higher % = more intense glow). */
  --glow-accent:
      0 4px 12px color-mix(in srgb, var(--color-accent-500) 18%, transparent),
      0 14px 34px color-mix(in srgb, var(--color-accent-400) 24%, transparent);

  /* White HALO (a `filter` value, not box-shadow) — lifts a graphic/mark off a
     colored surface where a same-hue glow wouldn't separate it (e.g. the brand
     logo on the hero gradient). drop-shadow follows the alpha shape. Layer 1 =
     white halo; layer 2 = faint brand-navy depth. Token-routed via color-mix;
     tune the white % to strengthen/soften. Reuse on any icon/mark over color. */
  --halo-white:
      drop-shadow(0 0 9px color-mix(in srgb, var(--color-white) 55%, transparent))
      drop-shadow(0 2px 10px color-mix(in srgb, var(--color-brand-900) 18%, transparent));

  /* ======================================================================
     8 · MOTION — durations & easing for transitions/animations
     Adjust these to soften or speed up hover/state fades globally.
     ====================================================================== */
  --duration-instant: 80ms;
  --duration-fast:    120ms;
  --duration-base:    200ms;   /* default hover/state fade */
  --duration-slow:    320ms;
  --duration-slower:  480ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);  /* smooth in-out — natural fade in/out */
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);     /* decelerate — good for enter/hover-in */
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);     /* accelerate — good for exit/hover-out */

  /* SHARED MOTION DEFAULT — every component's hover/state fade points here, so
     retiming the whole UI is a one-line change. Locked: Slow 320ms + Standard. */
  --motion-duration: var(--duration-slow);
  --motion-ease:     var(--ease-standard);
}

/* ===========================================================================
   EFFECT UTILITIES — opt-in classes that apply a token effect to any element.
   =========================================================================== */

/* Hover glow — soft accent halo + a small lift. Add to any interactive surface
   (cards, tiles, list rows, media thumbs, CTAs) to share one hover affordance.
   Border/color changes stay element-specific. Respects reduced-motion. */


@media (prefers-reduced-motion: reduce) {


}

/* ===========================================================================
   9 · TYPE STYLES  (the named composite Display/Text/Mono styles from Figma)
   Apply as a class: <h1 class="t-display-2xl">…</h1>
   Naming: base class = Regular; -med / -semi / -bold add weight.
   Line-heights & tracking are the exact Figma values (incl. its quirks).
   =========================================================================== */

/* --- Display — Recia ------------------------------------------------------ */
/* Display 2xl (72) */
.t-display-2xl        { font-family: var(--font-family-display); font-size: var(--font-size-display-2xl); font-weight: var(--font-weight-regular);  line-height: 1.1;                         letter-spacing: -2px; }
.t-display-2xl-med    { font-family: var(--font-family-display); font-size: var(--font-size-display-2xl); font-weight: var(--font-weight-medium);   line-height: var(--line-height-display-2xl); letter-spacing: -2px; }
.t-display-2xl-semi   { font-family: var(--font-family-display); font-size: var(--font-size-display-2xl); font-weight: var(--font-weight-semibold); line-height: 1.1;                         letter-spacing: -2px; }
.t-display-2xl-bold   { font-family: var(--font-family-display); font-size: var(--font-size-display-2xl); font-weight: var(--font-weight-bold);     line-height: var(--line-height-display-2xl); letter-spacing: -2px; }
/* Display xl (60) */
.t-display-xl         { font-family: var(--font-family-display); font-size: var(--font-size-display-xl); font-weight: var(--font-weight-regular);  line-height: var(--line-height-display-xl); letter-spacing: -2px; }
.t-display-xl-med     { font-family: var(--font-family-display); font-size: var(--font-size-display-xl); font-weight: var(--font-weight-medium);   line-height: var(--line-height-display-xl); letter-spacing: -2px; }
.t-display-xl-semi    { font-family: var(--font-family-display); font-size: var(--font-size-display-xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-display-xl); letter-spacing: -2px; }
.t-display-xl-bold    { font-family: var(--font-family-display); font-size: var(--font-size-display-xl); font-weight: var(--font-weight-bold);     line-height: var(--line-height-display-xl); letter-spacing: -2px; }
/* Display lg (48) */
.t-display-lg         { font-family: var(--font-family-display); font-size: var(--font-size-display-lg); font-weight: var(--font-weight-regular);  line-height: 1.1;                         letter-spacing: -2px; }
.t-display-lg-med     { font-family: var(--font-family-display); font-size: var(--font-size-display-lg); font-weight: var(--font-weight-medium);   line-height: var(--line-height-display-lg); letter-spacing: -2px; }
.t-display-lg-semi    { font-family: var(--font-family-display); font-size: var(--font-size-display-lg); font-weight: var(--font-weight-semibold); line-height: var(--line-height-display-lg); letter-spacing: -2px; }
.t-display-lg-bold    { font-family: var(--font-family-display); font-size: var(--font-size-display-lg); font-weight: var(--font-weight-bold);     line-height: var(--line-height-display-lg); letter-spacing: -2px; }
/* Display md (36) */
.t-display-md         { font-family: var(--font-family-display); font-size: var(--font-size-display-md); font-weight: var(--font-weight-regular);  line-height: var(--line-height-display-md); letter-spacing: -2px; }
.t-display-md-med     { font-family: var(--font-family-display); font-size: var(--font-size-display-md); font-weight: var(--font-weight-medium);   line-height: var(--line-height-display-md); letter-spacing: -2px; }
.t-display-md-semi    { font-family: var(--font-family-display); font-size: var(--font-size-display-md); font-weight: var(--font-weight-semibold); line-height: var(--line-height-display-md); letter-spacing: -2px; }
.t-display-md-bold    { font-family: var(--font-family-display); font-size: var(--font-size-display-md); font-weight: var(--font-weight-bold);     line-height: var(--line-height-display-md); letter-spacing: -2px; }
/* Display sm (30) */
.t-display-sm         { font-family: var(--font-family-display); font-size: var(--font-size-display-sm); font-weight: var(--font-weight-regular);  line-height: var(--line-height-display-sm); letter-spacing: 0; }
.t-display-sm-med     { font-family: var(--font-family-display); font-size: var(--font-size-display-sm); font-weight: var(--font-weight-medium);   line-height: var(--line-height-display-sm); letter-spacing: 0; }
.t-display-sm-semi    { font-family: var(--font-family-display); font-size: var(--font-size-display-sm); font-weight: var(--font-weight-semibold); line-height: var(--line-height-display-sm); letter-spacing: 0; }
.t-display-sm-bold    { font-family: var(--font-family-display); font-size: var(--font-size-display-sm); font-weight: var(--font-weight-bold);     line-height: var(--line-height-display-sm); letter-spacing: 0; }
/* Display xs (24) */
.t-display-xs         { font-family: var(--font-family-display); font-size: var(--font-size-display-xs); font-weight: var(--font-weight-regular);  line-height: var(--line-height-display-xs); letter-spacing: 0; }
.t-display-xs-med     { font-family: var(--font-family-display); font-size: var(--font-size-display-xs); font-weight: var(--font-weight-medium);   line-height: var(--line-height-display-xs); letter-spacing: 0; }
.t-display-xs-semi    { font-family: var(--font-family-display); font-size: var(--font-size-display-xs); font-weight: var(--font-weight-semibold); line-height: var(--line-height-display-xs); letter-spacing: 0; }
.t-display-xs-bold    { font-family: var(--font-family-display); font-size: var(--font-size-display-xs); font-weight: var(--font-weight-bold);     line-height: var(--line-height-display-xs); letter-spacing: 0; }

/* --- Text — Inter --------------------------------------------------------- */
/* Text xl (20) */
.t-text-xl            { font-family: var(--font-family-body); font-size: var(--font-size-text-xl); font-weight: var(--font-weight-regular);  line-height: var(--line-height-text-xl); letter-spacing: 0; }
.t-text-xl-med        { font-family: var(--font-family-body); font-size: var(--font-size-text-xl); font-weight: var(--font-weight-medium);   line-height: var(--line-height-text-lg); letter-spacing: 0; }
.t-text-xl-semi       { font-family: var(--font-family-body); font-size: var(--font-size-text-xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-text-xl); letter-spacing: 0; }
.t-text-xl-bold       { font-family: var(--font-family-body); font-size: var(--font-size-text-xl); font-weight: var(--font-weight-bold);     line-height: var(--line-height-text-lg); letter-spacing: -1px; }
/* Text lg (18) */
.t-text-lg            { font-family: var(--font-family-body); font-size: var(--font-size-text-lg); font-weight: var(--font-weight-regular);  line-height: var(--line-height-text-lg); letter-spacing: 0; }
.t-text-lg-med        { font-family: var(--font-family-body); font-size: var(--font-size-text-lg); font-weight: var(--font-weight-medium);   line-height: var(--line-height-text-md); letter-spacing: 0; }
.t-text-lg-semi       { font-family: var(--font-family-body); font-size: var(--font-size-text-lg); font-weight: var(--font-weight-semibold); line-height: var(--line-height-text-lg); letter-spacing: 0; }
.t-text-lg-bold       { font-family: var(--font-family-body); font-size: var(--font-size-text-lg); font-weight: var(--font-weight-bold);     line-height: var(--line-height-text-lg); letter-spacing: 0; }
/* Text md (16) */
.t-text-md            { font-family: var(--font-family-body); font-size: var(--font-size-text-md); font-weight: var(--font-weight-regular);  line-height: var(--line-height-text-md); letter-spacing: 0; }
.t-text-md-med        { font-family: var(--font-family-body); font-size: var(--font-size-text-md); font-weight: var(--font-weight-medium);   line-height: var(--line-height-text-md); letter-spacing: 0; }
.t-text-md-semi       { font-family: var(--font-family-body); font-size: var(--font-size-text-md); font-weight: var(--font-weight-semibold); line-height: var(--line-height-text-sm); letter-spacing: 0; }
.t-text-md-bold       { font-family: var(--font-family-body); font-size: var(--font-size-text-md); font-weight: var(--font-weight-bold);     line-height: var(--line-height-text-md); letter-spacing: 0; }
/* Text sm (14) */
.t-text-sm            { font-family: var(--font-family-body); font-size: var(--font-size-text-sm); font-weight: var(--font-weight-regular);  line-height: var(--line-height-text-xs); letter-spacing: 0; }
.t-text-sm-med        { font-family: var(--font-family-body); font-size: var(--font-size-text-sm); font-weight: var(--font-weight-medium);   line-height: var(--line-height-text-sm); letter-spacing: 0; }
.t-text-sm-semi       { font-family: var(--font-family-body); font-size: var(--font-size-text-sm); font-weight: var(--font-weight-semibold); line-height: var(--line-height-text-sm); letter-spacing: 0; }
.t-text-sm-bold       { font-family: var(--font-family-body); font-size: var(--font-size-text-sm); font-weight: var(--font-weight-bold);     line-height: var(--line-height-text-sm); letter-spacing: 0; }
/* Text xs (12) */
.t-text-xs            { font-family: var(--font-family-body); font-size: var(--font-size-text-xs); font-weight: var(--font-weight-regular);  line-height: var(--line-height-text-xs); letter-spacing: 0; }
.t-text-xs-med        { font-family: var(--font-family-body); font-size: var(--font-size-text-xs); font-weight: var(--font-weight-medium);   line-height: var(--line-height-text-xs); letter-spacing: 0; }
.t-text-xs-semi       { font-family: var(--font-family-body); font-size: var(--font-size-text-xs); font-weight: var(--font-weight-semibold); line-height: var(--line-height-text-xs); letter-spacing: -1px; }
.t-text-xs-bold       { font-family: var(--font-family-body); font-size: var(--font-size-text-xs); font-weight: var(--font-weight-bold);     line-height: var(--line-height-text-xs); letter-spacing: 0; }
/* NOTE: Figma's "Text xs/Bold" carries letterSpacing: 11 — almost certainly a
   source artifact (11px tracking on 12px text). Overridden to 0 here; confirm
   in Figma and update if intentional. */

/* --- Mono — DM Mono ------------------------------------------------------- */
.t-mono-lg            { font-family: var(--font-family-mono); font-size: var(--font-size-text-lg); font-weight: var(--font-weight-regular);  line-height: var(--line-height-text-md); letter-spacing: 0; }

/* ===========================================================================
   Text selection — a soft accent-green wash with crisp near-black text. On-brand
   (accent is POR's signature) and legible on both light and dark surfaces.
   =========================================================================== */
::selection      { background: var(--color-accent-200); color: var(--text-primary); }
::-moz-selection { background: var(--color-accent-200); color: var(--text-primary); }


/* ===========================================================================
   Text wrapping canon (2026-08-31) — progressive enhancement, ignored by
   browsers without support; no fallback needed.

   BALANCE — display/serif headings and modal titles: lines wrap to roughly
   equal length, killing widowed last words across the 7-step breakpoint scale
   and long clinical names. Engines cap balancing at ~6 lines — exactly
   headline territory. NOT applied to .hf-share__title (line-clamped via
   -webkit-box, where balance does not apply) or to card/row titles (short,
   usually single-line — .hf-card__title, sheet/rail/control labels).

   PRETTY — reading-flow body copy: the layout engine re-evaluates the last
   lines of the paragraph to avoid a lonely trailing word. Applied to prose,
   ledes, AI-answer/ailit bodies, article paragraphs, ISI prose, notes, and
   empty-state text. Not applied globally: metadata lines, labels, and
   truncated rows gain nothing from it.
   =========================================================================== */
.hf-hero__title,
.hf-section__title,
.hf-trust__title,
.hf-empty__title,
.hf-drughero__name,
.hf-article__title,
.hf-article-featured__title,
.hf-article-related__title,
.hf-article-sources__title,
.hf-magazine-promo__title,
.hf-authgate__title,
.hf-inquiry__title,
.hf-register__title,
.hf-prefmodal__title { text-wrap: balance; }

.hf-prose p,
.hf-prose li,
.hf-pagehero__lede,
.hf-empty__text,
.hf-ailit__body,
.hf-search__answer p,
.hf-article__body p,
.hf-isi__prose p,
.hf-perso-note { text-wrap: pretty; }


/* ===================== components/button.css ===================== */
/* ===========================================================================
   POR 2026 — HIGH-FIDELITY ATOM: Button (.hf-btn)
   ---------------------------------------------------------------------------
   Source: Figma Buttons component set — updated design (node 3287:427074).
   Reads (get_design_context): Primary/Secondary/Tertiary md Default, Primary
   md Hover, Primary sm/lg/xl Default, xs Primary Default. Values are exact from
   those reads; anything not yet read is marked DERIVED and flagged for QC.

   UPDATED DESIGN (2026-07-07): the skeuomorphic inner shadows were removed.
   Solid/white fill + border + a single soft drop shadow (--shadow-xs). Sizes are
   xs / sm / md / lg / xl (xs added; xs uses 16px icons, the rest 20px).

   Depends on tokens.css — references design tokens only (no raw palette hex).
   =========================================================================== */

/* ---- Base (defaults to md size, no hierarchy) --------------------------- */
.hf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  gap: var(--spacing-xs);                 /* 4px; lg/xl bump to 6px */
  padding: 10px 14px;                     /* md: py10 px14 (Figma raw) */
  border: 1px solid transparent;
  border-radius: var(--radius-md);        /* 8px */
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-text-sm);    /* 14px */
  line-height: var(--line-height-text-sm);/* 20px */
  letter-spacing: 0;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;

  /* Hover/state fade — SYSTEM DEFAULT: Slow (320ms) + Standard ease-in-out.
     Adjustable by setting --hf-btn-duration / --hf-btn-ease on the button OR any
     ancestor (they fall back to the motion tokens, so they aren't declared on
     .hf-btn itself — that would block the cascade). The same transition applies
     on hover-in AND hover-out, so it fades both ways.
       • speed up:  --hf-btn-duration: var(--duration-fast);
       • curve:     --hf-btn-ease: var(--ease-out); */
  transition:
      background-color var(--hf-btn-duration, var(--motion-duration)) var(--hf-btn-ease, var(--motion-ease)),
      box-shadow       var(--hf-btn-duration, var(--motion-duration)) var(--hf-btn-ease, var(--motion-ease)),
      border-color     var(--hf-btn-duration, var(--motion-duration)) var(--hf-btn-ease, var(--motion-ease)),
      color            var(--hf-btn-duration, var(--motion-duration)) var(--hf-btn-ease, var(--motion-ease));
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hf-btn { transition-duration: 0.01ms; }
}

/* Figma wraps the label with 2px side padding ("Text padding") */
.hf-btn__label { padding: 0 var(--spacing-xxs); }

/* Leading/trailing icon slots — 20px in every size.
   Icon color is DECOUPLED from the label: it defaults to the label color, but
   every non-primary hierarchy overrides it to accent green (see below). Icons
   use currentColor, so setting the slot's `color` recolors the glyph. */
.hf-btn__icon { flex: none; width: 20px; height: 20px; display: inline-flex; color: inherit; }
.hf-btn__icon svg,
.hf-btn__icon img { width: 100%; height: 100%; display: block; }

/* Accent icons on non-primary hierarchies (Figma: utility-accent-500 #12a96d) */
.hf-btn--secondary .hf-btn__icon,
.hf-btn--tertiary  .hf-btn__icon,
.hf-btn--link-color .hf-btn__icon,
.hf-btn--link-gray  .hf-btn__icon { color: var(--icon-fg-accent); }

/* ===== Sizes (padding + gap + label size) =============================== */
.hf-btn--xs { padding: var(--spacing-sm) 10px;           gap: var(--spacing-xs); font-size: var(--font-size-text-sm); }  /* 6 / 10 · 16px icons */
.hf-btn--xs .hf-btn__icon { width: 16px; height: 16px; }
.hf-btn--sm { padding: var(--spacing-md) var(--spacing-lg); gap: var(--spacing-xs); font-size: var(--font-size-text-sm); }  /* 8 / 12 */
.hf-btn--md { padding: 10px 14px;                            gap: var(--spacing-xs); font-size: var(--font-size-text-sm); }  /* 10 / 14 */
.hf-btn--lg { padding: 10px var(--spacing-xl);               gap: var(--spacing-sm); font-size: var(--font-size-text-md); }  /* 10 / 16 */
.hf-btn--xl { padding: var(--spacing-lg) 18px;               gap: var(--spacing-sm); font-size: var(--font-size-text-md); }  /* 12 / 18 */
.hf-btn--block { width: 100%; justify-content: center; }   /* full-width */

/* ===== Hierarchy: PRIMARY (brand-solid) ================================= */
.hf-btn--primary {
  color: var(--text-white);
  background: var(--bg-brand-solid);                      /* solid #194689 */
  border: 2px solid var(--gradient-skeuomorphic-border);  /* translucent top highlight */
  box-shadow: var(--shadow-xs);                           /* single soft drop shadow */
}
.hf-btn--primary:hover { background: var(--bg-brand-solid-hover); }  /* brand-700 #13315c */
.hf-btn--primary:focus-visible {
  outline: none;
  box-shadow: var(--shadow-xs), var(--focus-ring-brand);
}

/* ===== Hierarchy: SECONDARY (white + border) =========================== */
.hf-btn--secondary {
  color: var(--text-secondary);                      /* #404040 */
  background: var(--bg-primary);                      /* #ffffff */
  border: 1px solid var(--border-primary);           /* #d4d4d4 */
  box-shadow: var(--shadow-xs);                       /* single soft drop shadow */
}
.hf-btn--secondary:hover { background: var(--bg-primary-hover); }    /* Figma bg-primary_hover #fafafa */
.hf-btn--secondary:focus-visible {
  outline: none;
  box-shadow: var(--shadow-xs), var(--focus-ring-brand);
}

/* ===== Hierarchy: TERTIARY (ghost / text-only) ========================= */
.hf-btn--tertiary {
  color: var(--text-tertiary);                        /* #525252 */
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.hf-btn--tertiary:hover { background: var(--bg-primary-hover); color: var(--text-secondary); } /* Figma bg-primary_hover #fafafa */
.hf-btn--tertiary:focus-visible { outline: none; box-shadow: var(--focus-ring-brand); }

/* ===== Hierarchy: LINK color / gray (inline, no chrome) ================= */
/* Read from Figma (nodes 19194:13247 / 19194:13347): no bg/border/shadow, no
   horizontal padding; label + icon differ by variant, icons stay accent green. */
.hf-btn--link-color,
.hf-btn--link-gray {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
  gap: var(--spacing-xs);
}
.hf-btn--link-color { color: var(--text-brand-secondary); }          /* #0d8a57 (accent-700) */
.hf-btn--link-gray  { color: var(--text-tertiary); }                 /* #525252 */
.hf-btn--link-color:hover,
.hf-btn--link-gray:hover { text-decoration: underline; }
.hf-btn--link-color:focus-visible,
.hf-btn--link-gray:focus-visible { outline: none; box-shadow: var(--focus-ring-brand); border-radius: var(--radius-sm); }

/* ===== State: DISABLED ================================================== */
/* DERIVED — disabled variant not yet read; using reduced-emphasis convention. */
.hf-btn:disabled,
.hf-btn[aria-disabled="true"],
.hf-btn.is-disabled {
  cursor: not-allowed;
  opacity: .5;
  box-shadow: none;
  pointer-events: none;
}

/* ===== Icon-only (square, centered glyph) ============================== */
.hf-btn--icon-only { padding: 10px; }
.hf-btn--icon-only.hf-btn--xs { padding: var(--spacing-md); }   /* 32px square */
.hf-btn--icon-only.hf-btn--sm { padding: var(--spacing-md); }
.hf-btn--icon-only.hf-btn--lg { padding: 12px; }
.hf-btn--icon-only.hf-btn--xl { padding: 14px; }
.hf-btn--icon-only .hf-btn__label { display: none; }


/* ===================== components/badge.css ===================== */
/* ===========================================================================
   POR 2026 — HIGH-FIDELITY ATOM: Badge (.hf-badge)
   ---------------------------------------------------------------------------
   Source: Figma Badges component set (Components page, node 12:539).
   Reads (get_design_context): Pill color / Badge color / Badge modern (md),
   Brand + Success + Gray, dot variant. Values are exact from those reads.

   Structure (uniform across colors): tinted bg = {color}-50, border = {color}-200,
   text = {color}-700, dot = {color}-500. Label is Text sm/Medium (Inter 14/500).

   Three TYPES:
     • (default) Badge  — rounded-rect (radius-sm), px 8
     • --pill           — pill (radius-full), px 10
     • --modern         — white bg + border + soft shadow + gray text; the color
                          variant only tints the DOT (status-badge style)

   Colors: --brand · --gray · --success · --warning · --error
   Add a dot with a <span class="hf-badge__dot"></span> before the label.
   Depends on tokens.css — tokens only.
   =========================================================================== */

.hf-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);                        /* 6px (dot ↔ label) */
  box-sizing: border-box;
  padding: var(--spacing-xxs) var(--spacing-md); /* 2 / 8 (Badge default) */
  border: 1px solid var(--hf-badge-border, var(--border-secondary));
  border-radius: var(--radius-sm);               /* 6px */
  background: var(--hf-badge-bg, var(--bg-secondary));
  color: var(--hf-badge-text, var(--text-secondary));
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-medium);        /* 500 */
  font-size: var(--font-size-text-sm);           /* 14px */
  line-height: var(--line-height-text-sm);       /* 20px */
  white-space: nowrap;
}

/* Status dot — colored by the color modifier (--hf-badge-dot) */
.hf-badge__dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--hf-badge-dot, currentColor);
}

/* ===== Types ===========================================================
   One shape only: the radius-sm rounded-rect. The base set's --pill shape
   modifier was pruned (v3.50) — shape carried no semantics, and a second
   shape axis invites inconsistent use. */

/* Small size — SAME visual language as the default badge (tint + border + colored label),
   just reduced. Use for inline flags such as a "new"/"updated" marker beside a title.
   Combine with a colour modifier, e.g. `.hf-badge--success .hf-badge--sm`. */
.hf-badge--sm { padding: var(--spacing-xxs) var(--spacing-sm); font-size: var(--font-size-text-xs); line-height: var(--line-height-text-xs); gap: var(--spacing-xs); vertical-align: middle; }

/* ===== Colors (set bg-50 / border-200 / text-700 / dot-500) =============
   Only variants with an assigned product role exist: --brand (code-system /
   reference labels), --gray (quiet metadata + Following markers — NOT "Sponsored": sponsorship is the .hf-card__sponsor dot atom),
   --success (verification + new/updated flags), --featured (directory
   highlight). The Untitled UI base set also shipped --modern / --warning /
   --error; pruned (v3.49) — unused in any design, and unassigned variants
   invite inconsistent grabs. Warning-tinted needs are served by the
   purpose-built .hf-lock-badge. Reintroduce a variant only WITH a role. */
.hf-badge--brand {
  --hf-badge-bg: var(--color-brand-50);   --hf-badge-border: var(--color-brand-200);
  --hf-badge-text: var(--color-brand-700); --hf-badge-dot: var(--color-brand-500);
}
.hf-badge--gray {
  --hf-badge-bg: var(--color-neutral-50);  --hf-badge-border: var(--color-neutral-200);
  --hf-badge-text: var(--color-neutral-700); --hf-badge-dot: var(--color-neutral-500);
}
.hf-badge--success {
  --hf-badge-bg: var(--color-green-50);    --hf-badge-border: var(--color-green-200);
  --hf-badge-text: var(--color-green-700); --hf-badge-dot: var(--color-green-500);
}
/* Featured — gold/amber highlight (the "featured/premium" convention). Deliberately
   bold amber (100/300/800) so it reads as a highlight, apart from the brand-blue chrome. */
.hf-badge--featured {
  --hf-badge-bg: var(--color-amber-100);   --hf-badge-border: var(--color-amber-300);
  --hf-badge-text: var(--color-amber-800); --hf-badge-dot: var(--color-amber-500);
}

/* ===========================================================================
   POR-SPECIFIC BADGES (divergent from the Untitled UI base above)
   Read from the Home / Sponsored-Drug design (node 19188:12183).
   =========================================================================== */

/* Publisher / source stamp — "PUBMED", "FDB", "CLINICALTRIALS.GOV".
   3px gradient border (accent-green → brand-blue), transparent fill, DM Mono
   uppercase brand-blue text. The gradient ring is drawn by a masked ::before so
   it keeps the 4px radius AND the transparent fill on any background; the ring
   width (3px) is folded into the padding so the label geometry matches Figma. */
.hf-pub-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: calc(var(--spacing-xs) + 3px) calc(var(--spacing-md) + 3px);  /* 7 / 11 (incl. 3px ring) */
  border-radius: var(--radius-xs);                /* 4px */
  background: transparent;
  color: var(--color-brand-500);                  /* #1e5bb8 */
  font-family: var(--font-family-mono);           /* DM Mono */
  font-weight: var(--font-weight-medium);         /* 500 */
  font-size: var(--font-size-text-xs);            /* 12px */
  line-height: var(--line-height-text-xs);        /* 18px */
  letter-spacing: 1.32px;
  text-transform: uppercase;
  white-space: nowrap;
}
.hf-pub-badge::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 3px;                                   /* = ring width */
  box-sizing: border-box;
  background: var(--gradient-pub-badge-border);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* Entity-link badge — a linked drug/entity chip ("Humira", "Monjuvi").
   Accent-tinted, with a trailing arrow-up-right marking it as a link.
   Use on an <a>; the icon inherits the text color via currentColor. */
.hf-entity-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);                         /* 8px */
  box-sizing: border-box;
  padding: var(--spacing-xs) var(--spacing-md);   /* 4 / 8 */
  border: 1px solid var(--color-accent-200);      /* #a6e5c9 */
  border-radius: var(--radius-md);                /* 8px */
  background: var(--color-accent-50);             /* #e8f8f0 */
  color: var(--color-accent-700);                 /* #0d8a57 */
  font-family: var(--font-family-body);           /* Inter */
  font-weight: var(--font-weight-regular);        /* 400 */
  font-size: var(--font-size-text-sm);            /* 14px */
  line-height: var(--line-height-text-xs);        /* 18px */
  text-decoration: none;
  white-space: nowrap;
  transition:
      background-color var(--motion-duration) var(--motion-ease),
      border-color     var(--motion-duration) var(--motion-ease);
}
.hf-entity-badge:hover { background: var(--color-accent-100); border-color: var(--color-accent-300); }
.hf-entity-badge__icon { flex: none; width: 20px; height: 20px; display: inline-flex; }
.hf-entity-badge__icon svg { width: 100%; height: 100%; display: block; }
/* Toggle variant — a SELECTABLE chip (register "areas of interest", filters…).
   Off: the tinted chip with a plus. On: a filled accent chip with a check. */
.hf-entity-badge--toggle { cursor: pointer; font-family: var(--font-family-body); }
.hf-entity-badge--toggle .hf-entity-badge__icon { width: 16px; height: 16px; }
.hf-entity-badge--toggle.is-on { background: var(--color-accent-500); border-color: var(--color-accent-500); color: var(--text-white); }
.hf-entity-badge--toggle.is-on:hover { background: var(--color-accent-600); border-color: var(--color-accent-600); }

/* Optional muted timestamp inside the pill — e.g. "Recently viewed" chips carry
   "· 2 days ago" between the name and the arrow. Softer than the accent-700 name. */
.hf-entity-badge__time { color: color-mix(in srgb, var(--color-accent-700) 58%, transparent); }

/* ---------------------------------------------------------------------------
   Pill wrap (.hf-pillwrap) — a reusable wrapping collection of .hf-entity-badge
   pills that fills the space available. Used by BOTH the "Recently viewed" band
   and the signed-in briefing cards, so the two read as one system. Long pill
   names ellipsis-cap so a single long title can't hog a line.
   --------------------------------------------------------------------------- */
.hf-pillwrap { display: flex; flex-wrap: wrap; gap: var(--spacing-md); }   /* 8 */
.hf-pillwrap .hf-entity-badge > span:first-child {
  min-width: 0; max-width: 22ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}


/* ===================== components/input.css ===================== */
/* ===========================================================================
   POR 2026 — HIGH-FIDELITY ATOM: Input (text field)
   ---------------------------------------------------------------------------
   Foundational text field, grounded in the Untitled UI field conventions the
   Figma system inherits: 1px border, 8px radius, brand focus RING (not just a
   border-color change). Tokens only.

     .hf-input                      base field (md)
     .hf-input--sm / --lg           size variants
20px)

   The search overlay composes the same visual language in a larger, borderless
   "command input" treatment (see search.css).
   =========================================================================== */

.hf-input {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%;
  box-sizing: border-box;
  height: 40px;
  padding: var(--spacing-md) var(--spacing-lg);       /* 8 / 12 */
  font-family: var(--font-family-body);
  font-size: var(--font-size-text-md);
  line-height: var(--line-height-text-md);
  color: var(--text-primary);
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);            /* #d4d4d4 */
  border-radius: var(--radius-md);                    /* 8px */
  box-shadow: var(--shadow-xs);
  transition:
    border-color var(--motion-duration) var(--motion-ease),
    box-shadow   var(--motion-duration) var(--motion-ease);
}
.hf-input::placeholder { color: var(--text-placeholder); }
/* CANONICAL: the text a user TYPES (and its placeholder) is set in DM Mono — the
   homepage search set the precedent. Scoped to <input>/<textarea> so it out-specifies
   the class font-family AND leaves <select class="hf-input"> in the body font.
   ::placeholder inherits font-family, so placeholders follow to mono automatically. */
input.hf-input, textarea.hf-input { font-family: var(--font-family-mono); }
.hf-input:hover:not(:disabled):not(:focus) { border-color: var(--color-neutral-400); }
.hf-input:focus,
.hf-input:focus-visible {
  outline: none;
  border-color: var(--color-brand-300);
  box-shadow: var(--shadow-xs), var(--focus-ring-brand);
}
.hf-input:disabled {
  background: var(--bg-secondary);
  color: var(--text-quaternary);
  border-color: var(--border-secondary);
  box-shadow: none;
  cursor: not-allowed;
}

/* Sizes */
.hf-input--sm { height: 36px; padding: var(--spacing-sm) var(--spacing-lg); font-size: var(--font-size-text-sm); line-height: var(--line-height-text-sm); }
.hf-input--lg { height: 48px; padding: var(--spacing-lg) var(--spacing-xl); }

/* Brand variant — a brand-tinted field for the marketing bands (e.g. the
   newsletter signup): brand-200 border, standard brand focus RING. Radius is left
   at the base --radius-md so inputs match the buttons they sit beside. */
.hf-input--brand { border-color: var(--color-brand-200); }
.hf-input--brand:hover:not(:disabled):not(:focus) { border-color: var(--color-brand-300); }

/* Error */
.hf-input[aria-invalid="true"] { border-color: var(--border-error); }
.hf-input[aria-invalid="true"]:focus, .hf-input[aria-invalid="true"]:focus-visible { border-color: var(--color-red-500); box-shadow: var(--shadow-xs), var(--focus-ring-error); }

/* Leading-icon wrapper */
.hf-input-group { position: relative; display: block; }
.hf-input-group__icon {
  position: absolute; left: var(--spacing-lg); top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-quaternary);
  pointer-events: none;
}
.hf-input-group__icon svg { width: 20px; height: 20px; }
.hf-input-group .hf-input { padding-left: 42px; }
.hf-input-group .hf-input--sm { padding-left: 38px; }
/* Trailing clear ("X") affordance — mirror of the leading icon, but interactive. Render it
   only while the field has a value; the :has rule opens right padding so text clears it. */
.hf-input-group__clear {
  position: absolute; right: var(--spacing-sm); top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0;
  border: 0; border-radius: var(--radius-full); background: transparent;
  color: var(--text-quaternary); cursor: pointer;
  transition: background-color var(--motion-duration) var(--motion-ease), color var(--motion-duration) var(--motion-ease);
}
.hf-input-group__clear:hover { background: var(--bg-secondary); color: var(--text-secondary); }
.hf-input-group__clear svg { width: 16px; height: 16px; }
.hf-input-group:has(.hf-input-group__clear) .hf-input { padding-right: 40px; }
.hf-input-group__clear[hidden] { display: none; }   /* author display:inline-flex must yield to the hidden attribute (shown only when the field has text) */
/* type=search inputs render a NATIVE WebKit/Blink clear (×) that would double up next to
   our styled .hf-input-group__clear — suppress the native one so only the design-system clear shows. */
.hf-input[type="search"]::-webkit-search-cancel-button,
.hf-input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

/* ---- Icon "X" buttons: two DISTINCT canonical roles — do not conflate ----
   • .hf-input-group__clear (above) — NON-destructive: clears/resets an input. Neutral hover.
   • .hf-remove-btn (below)         — DESTRUCTIVE: removes an item from a collection (unsave,
                                      unfollow, remove row). Red/error hover signals the intent.
   (Dismissing a surface — modal / search overlay / toast — is a third, separate role handled by
    the component-scoped `.hf-*__close` buttons.) */
.hf-remove-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0;
  border: 0; border-radius: var(--radius-sm); background: none;
  color: var(--text-quaternary); cursor: pointer;
  transition: background-color var(--motion-duration) var(--motion-ease), color var(--motion-duration) var(--motion-ease);
}
.hf-remove-btn svg { width: 16px; height: 16px; }
.hf-remove-btn:hover { background: var(--bg-error-subtle); color: var(--text-error); }


/* ===================== components/searchbar.css ===================== */
/* ===========================================================================
   POR 2026 — HIGH-FIDELITY PATTERN: Search bar (.hf-searchbar)
   ---------------------------------------------------------------------------
   A reusable, self-contained search FIELD: a bordered bar (leading icon + input
   + optional Search button) plus an inline type-ahead dropdown anchored beneath
   it. Drop it into any template. Wire it to the shared engine two ways:
     • inline type-ahead — porSearch.mountInline(inputEl, dropdownEl, {within})
     • open the modal overlay instead — put data-open-search on the bar/input

   Structure:
     .hf-searchbar                 field wrapper (position:relative — anchors dd)
       .hf-searchbar__bar          the bordered row
         .hf-searchbar__icon       leading Lucide search icon
         .hf-searchbar__input      the <input>
         .hf-btn ...               optional Search button
       .hf-searchbar__dropdown     inline results (reuses .hf-search__* rows)

   Variant:
     .hf-searchbar--hero           the homepage centerpiece — 66px, 14px radius,
                                    a 9px brand-100 halo, DM Mono, bigger icon.

   Base = a calm in-page field (48px, brand focus ring). Tokens only.
   =========================================================================== */

.hf-searchbar { position: relative; width: 100%; max-width: 1000px; container-type: inline-size; z-index: 45; }
/* container-type creates a STACKING CONTEXT (layout containment) — without an
   explicit z-index the open dropdown lost to later page content painting in
   DOM order (v3.83 regression, caught by Chris). 45 sits above content and
   the sticky header (30), below the nav drawer (60) and modals (80). */

.hf-searchbar__bar {
  display: flex; align-items: center; gap: var(--spacing-lg);
  box-sizing: border-box; width: 100%;
  height: 48px;
  padding: 0 var(--spacing-sm) 0 var(--spacing-lg);   /* pr 6 / pl 12 */
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  cursor: text; text-align: left;
  transition: border-color var(--motion-duration) var(--motion-ease),
              box-shadow  var(--motion-duration) var(--motion-ease);
}
.hf-searchbar__bar:hover { border-color: var(--color-neutral-400); }
.hf-searchbar__bar:focus-within {
  outline: none;
  border-color: var(--color-brand-300);
  box-shadow: var(--focus-ring-brand);
}

.hf-searchbar__icon { flex: none; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; color: var(--text-quaternary); }
.hf-searchbar__icon svg { width: 20px; height: 20px; }

.hf-searchbar__input {
  flex: 1; min-width: 0;
  border: 0; outline: 0; background: transparent;
  font-family: var(--font-family-mono);           /* typed text + placeholder in DM Mono (canonical) */
  font-size: var(--font-size-text-md);
  line-height: var(--line-height-text-md);
  color: var(--text-primary);
  text-overflow: ellipsis;      /* truncate the long placeholder/value with … instead of a hard cut */
}
.hf-searchbar__input::placeholder { color: var(--text-placeholder); }
.hf-searchbar__bar .hf-btn { flex: none; }            /* optional Search button */

/* Inline type-ahead dropdown — reuses the search result vocabulary
   (.hf-search__section / __result) rendered by search.js. */
.hf-searchbar__dropdown {
  position: absolute; left: 0; right: 0; top: calc(100% + var(--spacing-md));
  z-index: 20;
  background: var(--bg-primary);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-overlay);
  max-height: 60vh; overflow-y: auto;
  text-align: left;
  display: none;
}
.hf-searchbar__dropdown.is-open { display: block; }

/* ===== Variant: --hero (homepage centerpiece) ========================== */
.hf-searchbar--hero .hf-searchbar__bar {
  height: 66px;
  padding: 0 var(--spacing-md) 0 var(--spacing-2xl);   /* pr 8 / pl 20 */
  border-color: var(--color-brand-200);                /* #b3c9e9 */
  border-radius: 14px;
  box-shadow: 0 0 0 9px var(--color-brand-100);        /* Figma focus-ring-brand-solid halo */
}
.hf-searchbar--hero .hf-searchbar__bar:hover { border-color: var(--color-brand-300); }
/* Focus "lights up" the bar: deeper border + the flat halo becomes a graduated
   two-tone ring (denser brand-200 inner band → brand-100 outer glow, expanded).
   Same halo idiom + motion transition, just intensified. */
.hf-searchbar--hero .hf-searchbar__bar:focus-within {
  border-color: var(--color-brand-500);
  box-shadow: 0 0 0 4px var(--color-brand-200), 0 0 0 12px var(--color-brand-100);
}
.hf-searchbar--hero .hf-searchbar__icon { width: 24px; height: 24px; }
.hf-searchbar--hero .hf-searchbar__icon svg { width: 24px; height: 24px; }
.hf-searchbar--hero .hf-searchbar__input { font-family: var(--font-family-mono); font-size: var(--font-size-text-lg); }  /* DM Mono */
.hf-searchbar--hero .hf-searchbar__dropdown { top: calc(100% + var(--spacing-xl)); }   /* clear the focus halo */

@media (max-width: 768px) {
  .hf-searchbar--hero .hf-searchbar__bar { height: 56px; box-shadow: 0 0 0 6px var(--color-brand-100); border-radius: var(--radius-xl); }
  .hf-searchbar--hero .hf-searchbar__bar:focus-within { box-shadow: 0 0 0 3px var(--color-brand-200), 0 0 0 8px var(--color-brand-100); }   /* proportional lit-up ring on mobile */
  .hf-searchbar--hero .hf-searchbar__input { font-size: var(--font-size-text-md); }
  .hf-searchbar--hero .hf-searchbar__bar .hf-btn { padding: var(--spacing-md) var(--spacing-lg); }
}

/* ===== Clear (×) button — canonical, injected by search.js after any search input.
   Shown only when the field has text (.is-visible). A borderless circular icon, so it
   never reads as the overlay's bordered close-square. Sits between input and the Search
   button (inline bar) or the close button (overlay). ===================== */
.hf-field-clear {
  flex: none; display: none;                     /* .is-visible flips to inline-flex */
  align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0;
  border: 0; border-radius: var(--radius-full);
  background: transparent; color: var(--text-quaternary);
  cursor: pointer;
  transition: background-color var(--motion-duration) var(--motion-ease),
              color var(--motion-duration) var(--motion-ease);
}
.hf-field-clear.is-visible { display: inline-flex; }
.hf-field-clear:hover { background: var(--bg-primary-hover); color: var(--text-secondary); }
.hf-field-clear:focus-visible { outline: none; box-shadow: var(--focus-ring-brand); }
.hf-field-clear svg { width: 16px; height: 16px; }
/* Larger fields (hero searchbar + the rail overlay) get a bigger tap target */
.hf-searchbar--hero .hf-field-clear,
.hf-search__input-wrap .hf-field-clear { width: 28px; height: 28px; }
.hf-searchbar--hero .hf-field-clear svg,
.hf-search__input-wrap .hf-field-clear svg { width: 18px; height: 18px; }


/* ===================== components/search.css ===================== */
/* ===========================================================================
   POR 2026 — HIGH-FIDELITY PATTERN: Search overlay (.hf-search)
   ---------------------------------------------------------------------------
   Global search modal triggered from the rail's Search item (any
   [data-open-search]). Behavior mirrors the wireframe's intelligent type-ahead
   (see search.js): tier-aware empty state, blended results, code detection, and
   an ambient answer panel. Re-skinned with our tokens; no Figma overlay frame
   exists, so this is wireframe-plasticity → Figma pixels (Rule 9).

   Composition: the input row is a large borderless "command input"; result rows
   reuse the Input/Badge vocabulary. Mode chips = .hf-badge; answer drug links =
   .hf-entity-badge. Full-screen ≤768px. Tokens only.
   =========================================================================== */

.hf-search[hidden] { display: none; }
body.hf-search-lock { overflow: hidden; }   /* lock page scroll behind the modal */
.hf-search {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 10vh;
}
.hf-search__backdrop {
  position: absolute; inset: 0;
  /* Brand-navy scrim (not flat gray) — ties the modal to the footer + hero. */
  background: color-mix(in srgb, var(--color-brand-900) 55%, transparent);
  animation: hfSearchFade var(--duration-fast) var(--ease-out);
}
.hf-search__panel {
  position: relative;
  width: 92%; max-width: 640px;
  background: var(--bg-primary);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-xl);                 /* 12px */
  box-shadow: var(--shadow-overlay);
  overflow: hidden;
  animation: hfSearchDrop var(--duration-base) var(--ease-out);
}
@keyframes hfSearchFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hfSearchDrop { from { transform: translateY(-12px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ----- Command input row ----------------------------------------------- */
.hf-search__input-wrap {
  display: flex; align-items: center; gap: var(--spacing-lg);
  padding: 0 var(--spacing-2xl);
  min-height: 64px;
  border-bottom: 1px solid var(--border-secondary);
}
.hf-search__icon { flex: none; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; color: var(--text-quaternary); }
.hf-search__icon svg { width: 22px; height: 22px; }
.hf-search__input {
  flex: 1; min-width: 0;
  border: 0; outline: 0; background: transparent;
  font-family: var(--font-family-mono);            /* typed text + placeholder in DM Mono (canonical) */
  font-size: var(--font-size-text-xl);             /* 20px command input */
  color: var(--text-primary);
}
.hf-search__input::placeholder { color: var(--text-placeholder); }
.hf-search__close {
  flex: none; width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color var(--motion-duration) var(--motion-ease), color var(--motion-duration) var(--motion-ease);
}
.hf-search__close:hover { background: var(--color-neutral-100); color: var(--text-primary); }
.hf-search__close svg { width: 16px; height: 16px; }

/* ----- Results dropdown ------------------------------------------------- */
.hf-search__dropdown { max-height: 60vh; overflow-y: auto; }

.hf-search__section { padding: var(--spacing-xl) var(--spacing-2xl); border-bottom: 1px solid var(--border-secondary); }
.hf-search__section:last-child { border-bottom: 0; }
.hf-search__section-head {
  display: flex; align-items: center; gap: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
  font-family: var(--font-family-body);
  font-size: var(--font-size-text-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-tertiary);
}

.hf-search__result {
  display: flex; align-items: center; gap: var(--spacing-lg);
  justify-content: space-between;
  padding: var(--spacing-md);
  margin: 0 calc(-1 * var(--spacing-md));
  border-radius: var(--radius-sm);
  text-decoration: none; color: inherit; cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard);
}
/* Hover + keyboard highlight: light ACCENT GREEN, matching the system's
   interactive hover language everywhere else (was neutral gray — Chris,
   2026-08-19). The trailing arrow turns accent too. */
.hf-search__result:hover,
.hf-search__result.is-kb { background: var(--color-accent-50); }
.hf-search__result:hover .hf-search__result-arrow,
.hf-search__result.is-kb .hf-search__result-arrow { color: var(--color-accent-600); }

/* "See all results for 'q'" — the persistent footer row of every non-empty
   type-ahead. Rows above navigate DIRECTLY to the entity (known-item search);
   this row is the visible affordance for Enter → the full results page, and
   the escape hatch when the suggestions aren't what the user meant. */
.hf-search__seeall {
  /* Base .hf-search__result is authored for use INSIDE a padded section
     (8px padding + negative side margins). This row sits at the dropdown
     root, so reset both and adopt the section rhythm: 20px sides to align
     with the section content, comfortable 12px vertical. */
  margin: 0;
  padding: var(--spacing-lg) var(--spacing-2xl);
  border-top: 1px solid var(--border-secondary);
  border-radius: 0 0 calc(var(--radius-xl) - 1px) calc(var(--radius-xl) - 1px);   /* hover tint follows the dropdown's rounding */
  color: var(--text-link);
  font-weight: var(--font-weight-medium);
}
.hf-search__seeall .hf-search__result-lead { color: var(--text-link); }
.hf-search__seeall .hf-search__result-name q { quotes: "\201C" "\201D"; font-style: normal; }
.hf-search__result-lead { flex: none; width: 18px; height: 18px; display: flex; color: var(--text-quaternary); }
.hf-search__result-lead svg { width: 18px; height: 18px; }
.hf-search__result-body { min-width: 0; flex: 1; }
.hf-search__result-name { font-size: var(--font-size-text-md); font-weight: var(--font-weight-medium); color: var(--text-primary); }
.hf-search__result-name .sub { color: var(--text-quaternary); font-weight: var(--font-weight-regular); }
.hf-search__result-meta { font-size: var(--font-size-text-sm); color: var(--text-quaternary); margin-top: 2px; }
.hf-search__result-arrow { flex: none; width: 18px; height: 18px; display: flex; color: var(--fg-quaternary); }
.hf-search__result-arrow svg { width: 18px; height: 18px; }

/* "Search all of POR for …" — the widen escape row */
.hf-search__result--widen .hf-search__result-name,
.hf-search__result--widen .hf-search__result-lead { color: var(--color-brand-600); }

/* ----- Loading + empty message ----------------------------------------- */
.hf-search__loading { display: flex; align-items: center; gap: var(--spacing-md); color: var(--text-tertiary); font-size: var(--font-size-text-sm); }
.hf-search__spinner { flex: none; width: 16px; height: 16px; border-radius: var(--radius-full); border: 2px solid var(--border-primary); border-top-color: var(--color-brand-500); animation: hfSpin .7s linear infinite; }
@keyframes hfSpin { to { transform: rotate(360deg); } }
/* The Lucide loader glyph spins wherever it appears in a loading note (finder
   "Searching/Filtering the full catalog…" states) — fixes the audit's frozen-
   spinner finding (M2). */
.hf-perso-note .lucide-loader { animation: hfSpin 1s linear infinite; }
/* ===== Focus-visible — gap coverage (QA pass 2, 2026-08-14) ===============
   The canonical ring (--focus-ring-brand) applied to the interactive atoms the
   census found relying on UA-default outlines: entity badges, tier seg, search
   overlay chrome + rows, pager, carousel dots, footer links, gate sign-in,
   header hamburger + rail toggle, register skip-link. */
.hf-entity-badge:focus-visible,
.hf-seg button:focus-visible,
.hf-search__result:focus-visible,
.hf-search__close:focus-visible,
.hf-pager__btn:focus-visible,
.hf-pager__page:focus-visible,
.hf-promo__dot:focus-visible,
.hf-footer a:focus-visible,
.hf-authgate__signin:focus-visible,
.hf-header__hamburger:focus-visible,
.hf-nav__toggle:focus-visible,
.hf-register__skip-link:focus-visible { outline: none; box-shadow: var(--focus-ring-brand); }
.hf-search__result:focus-visible { background: var(--bg-primary-hover); position: relative; z-index: 1; }   /* rows also take the kb tint */
.hf-search__input-wrap:focus-within { box-shadow: inset 0 0 0 2px var(--color-brand-300); border-radius: var(--radius-md); }   /* overlay field — parity with the searchbar's focus-within */

/* ===== Empty state — canonical atom (.hf-empty; audit v3.40 #13) ==========
   ONE empty state for the whole system, promoted from the profile's designed
   dashed panel (the other three constructions — perso-note+icon, inline-styled
   <td>, bespoke blocks — are retired). Anatomy: icon → __title → __text.
   .hf-empty--compact = popover/dropdown scale (search overlay): tighter,
   no dashed panel. .hf-perso-note goes back to ONE job: info/loading notes. */
/* Screen-reader-only text — a11y heading/label with no visual box */
.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; }

.hf-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--spacing-sm); padding: var(--spacing-7xl) var(--spacing-2xl); border: 1px dashed var(--border-primary); border-radius: var(--radius-xl); color: var(--text-tertiary); }
.hf-empty svg { width: 32px; height: 32px; color: var(--text-quaternary); }
.hf-empty__title { margin: var(--spacing-xs) 0 0; font-family: var(--font-family-display); font-size: var(--font-size-text-xl); font-weight: var(--font-weight-regular); color: var(--text-secondary); }
.hf-empty__text { margin: 0; max-width: 44ch; font-size: var(--font-size-text-sm); }
.hf-empty__action { margin: var(--spacing-lg) 0 0; }
.hf-empty--compact { padding: var(--spacing-2xl); border: 0; }
.hf-empty--compact svg { width: 24px; height: 24px; }
.hf-empty--compact .hf-empty__title { margin: 0; font-family: var(--font-family-body); font-size: var(--font-size-text-md); font-weight: var(--font-weight-semibold); }

/* ----- Ambient answer panel (question mode; deliberately un-branded) ---- */
/* Question-forming state — the type-ahead's invite while a question starter
   is being typed and nothing matches yet (never "No matches" mid-question) */
.hf-search__asking { display: flex; flex-direction: column; gap: var(--spacing-md); padding: var(--spacing-xl) var(--spacing-lg); }
.hf-search__asking-title { margin: 0; display: flex; align-items: center; gap: var(--spacing-sm); font-family: var(--font-family-display); font-size: var(--font-size-text-lg); font-weight: var(--font-weight-semibold); color: var(--text-primary); }
.hf-search__asking-title svg { width: 18px; height: 18px; color: var(--text-brand-secondary); }
.hf-search__asking-text { margin: 0; font-size: var(--font-size-text-md); color: var(--text-tertiary); }   /* full-width — no measure cap; fills the open panel */
.hf-search__asking-examples { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); margin-top: var(--spacing-xs); }

.hf-search__answer {
  background: var(--bg-secondary);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-md);
  padding: var(--spacing-2xl);
}
.hf-search__answer p { margin: 0 0 var(--spacing-lg); font-size: var(--font-size-text-md); line-height: var(--line-height-text-lg); color: var(--text-primary); }
/* Canonical citation-superscript chip — THE in-text footnote marker, everywhere a
   sup references a porCite source row (search answer, AI-literature body, article
   body). The chip's brand-100/brand-700 ink deliberately matches .hf-ailit__ref-num
   so the marker in the text and the pill in the source list read as one system. */
.hf-search__answer sup,
.hf-ailit__body sup,
.hf-article__body sup a { font-size: var(--font-size-text-xxs); color: var(--color-brand-700); background: var(--color-brand-100); padding: 1px 4px; border-radius: var(--radius-xxs); margin: 0 1px; font-weight: var(--font-weight-medium); text-decoration: none; }
.hf-article__body sup a:hover { background: var(--color-brand-200); }
.hf-search__answer-chips { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); margin-bottom: var(--spacing-lg); }
.hf-search__answer-sources { font-size: var(--font-size-text-sm); color: var(--text-tertiary); }
.hf-search__answer-sources strong { color: var(--text-secondary); font-weight: var(--font-weight-semibold); }
/* Canonical inline-link treatment (.hf-link values) — this selector outranks
   the class, so it must carry the same ink (was brand-blue; Chris, 2026-08-19) */
.hf-search__answer-sources a { color: var(--text-link); text-decoration: underline; margin-left: var(--spacing-md); }
.hf-search__answer-sources a:hover { text-decoration-color: var(--color-accent-400); }

/* ----- Responsive: full-screen search ≤768px --------------------------- */
@media (max-width: 768px) {
  .hf-search { padding-top: 0; align-items: stretch; }
  .hf-search__panel {
    width: 100%; max-width: 100%;
    border: 0; border-radius: 0; box-shadow: none;
    height: 100vh; height: 100dvh;
    display: flex; flex-direction: column;
    animation: none;
  }
  .hf-search__input-wrap { padding-top: env(safe-area-inset-top); }
  .hf-search__input { font-size: var(--font-size-text-lg); }
  .hf-search__dropdown { max-height: none; flex: 1; }
}


/* ===================== components/card.css ===================== */
/* ===========================================================================
   POR 2026 — HIGH-FIDELITY PATTERN: Card (.hf-card)
   ---------------------------------------------------------------------------
   BASE card component. Taxonomy: "Card" is the base; each usage is an INSTANCE
   via a --modifier. First instance: Card-Pub (.hf-card--pub) — the Home
   "Today's Intelligence" publication card. Source: Figma Card / Card-Pub
   (node 19087:386924). Future instances (Card-Drug, Card-Article, …) reuse this
   base + shared elements and add only what differs.

   Composes atoms: .hf-pub-badge + .hf-entity-badge (badge.css). Tokens only.

   Base surface + behavior:
     bg-secondary, radius-xl, 24px padding; flex column with justify-between so
     the meta row pins to the bottom; 1.5px accent border on hover/focus-within;
     whole-card link via the title's stretched ::after (entity chips sit above).

   RESPONSIVE: .hf-card-grid auto-fits 3-up (desktop) → 1-up (mobile); cards
   stretch to equal height per row.
   =========================================================================== */

/* ---- Base ---- */
.hf-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);                     /* 12px default flow gap */
  box-sizing: border-box;
  height: 100%;
  padding: var(--spacing-3xl);                /* 24px */
  background: var(--bg-secondary);            /* #fafafa */
  border: 1.5px solid transparent;            /* reserved so hover adds no layout shift */
  border-radius: var(--radius-xl);            /* 12px */
  color: inherit;
  transition:
    border-color var(--motion-duration) var(--motion-ease),
    box-shadow   var(--motion-duration) var(--motion-ease),
    transform    var(--motion-duration) var(--motion-ease);
}
/* Hover / focus — accent ring + soft green glow + a small lift for impact.
   All three Card instances (--pub / --device / --drug) inherit this from the base. */
.hf-card:hover,
.hf-card:focus-within {
  border-color: var(--color-accent-500);
  box-shadow: var(--glow-accent);           /* shared accent glow (tokens.css) */
  transform: translateY(-3px);
}
@media (prefers-reduced-motion: reduce) {
  .hf-card { transition: border-color var(--motion-duration) var(--motion-ease); }
  .hf-card:hover, .hf-card:focus-within { transform: none; }
}

/* ---- Shared elements ----
   align-items:flex-start so content-width children (e.g. the pub badge) hug
   instead of stretching to the column width. Full-width children set width:100%. */
.hf-card__top { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-lg); width: 100%; }        /* 12px */
.hf-card__titlewrap { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-xl); width: 100%; }  /* 16px */

.hf-card__title {
  margin: 0;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-bold);       /* 700 */
  font-size: var(--font-size-text-xl);        /* 20px */
  line-height: var(--line-height-text-lg);    /* 28px */
  letter-spacing: -0.2px;
  color: var(--text-primary);
}
.hf-card__title a { color: inherit; text-decoration: none; }
.hf-card__title a::after { content: ""; position: absolute; inset: 0; }   /* stretched whole-card link */
.hf-card__title a:focus-visible { outline: none; }

.hf-card__dek {
  margin: 0;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-text-md);        /* 16px */
  line-height: var(--line-height-text-md);    /* 24px */
  color: var(--text-tertiary);                /* #525252 */
}

.hf-card__bottom { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-md); width: 100%; }   /* 8px */
.hf-card__entities {
  position: relative; z-index: 1;             /* above the stretched card link */
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-lg);   /* 12px */
}
.hf-card__meta {
  display: flex; align-items: center; gap: var(--spacing-md);   /* 8px */
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-text-xs);        /* 12px */
  line-height: var(--line-height-text-xs);    /* 18px */
  color: var(--text-secondary);               /* #404040 */
}
.hf-card__meta-sep { color: var(--text-quaternary); }
/* Article "kind" — its own left-aligned line beneath the author/date stamp, set in the
   same byline typography (size/weight/color). */
.hf-card__kindmeta {
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-text-xs);        /* 12px */
  line-height: var(--line-height-text-xs);    /* 18px */
  color: var(--text-secondary);               /* #404040 */
}

/* ---- Instance: Card-Pub ---- */
/* Pub distributes top→bottom so the meta row pins to the card's bottom edge. */
.hf-card--pub { justify-content: space-between; gap: var(--spacing-4xl); container-type: inline-size; }
/* Narrow card (e.g. 2-up on a small viewport): the byline can't hold its horizontal
   line, so stack the meta segments and drop the bullet separators. Container-query'd on
   the card's own width, so it triggers by actual card size — not viewport. Tune the px. */
@container (max-width: 280px) {
  .hf-card__meta { flex-direction: column; align-items: flex-start; gap: var(--spacing-xs); }
  .hf-card__meta-sep { display: none; }
}

/* ---- Instance: Card-Device ---------------------------------------------- */
/* Adds an accent eyebrow (care type), a bordered product image, and a sponsor
   lead (orange dot + sponsor + SPONSORED). Axes: orientation (vertical default
   / .hf-card--horizontal), image (include/omit .hf-card__image), sponsored
   (include/omit .hf-card__sponsor). Flows top-down with the base 12px gap. */

/* Image slot — REAL product photos only (pattern-wide rule, Chris 2026-08-14):
   a device card either shows the actual image or has NO image element at all.
   No placeholder icons — same rule as the Row presentation. */
.hf-card__image {
  width: 100%;
  box-sizing: border-box;
  height: 250px;                              /* vertical image height */
  border: 1px solid var(--border-primary);    /* #d4d4d4 */
  border-radius: var(--radius-sm);            /* 6px */
  overflow: hidden;
  background: var(--bg-primary);
}
.hf-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* deviceside fills the card and pins the sponsor lead to the bottom when the
   card has extra height (so device cards fill available space cleanly). */
.hf-card__deviceside { display: flex; flex-direction: column; gap: var(--spacing-lg); width: 100%; flex: 1; justify-content: space-between; }   /* 12px */
.hf-card__devicebody { display: flex; flex-direction: column; gap: var(--spacing-xl); width: 100%; }   /* 16px */
.hf-card__eyebrowhead { display: flex; flex-direction: column; gap: var(--spacing-xs); width: 100%; }  /* 4px */

.hf-card__eyebrow {
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-semibold);   /* 600 */
  font-size: 11px;
  line-height: 16.5px;
  letter-spacing: 0.88px;
  text-transform: uppercase;
  color: var(--color-accent-500);             /* #12a96d */
}

.hf-card__sponsor { display: flex; align-items: flex-start; gap: var(--spacing-md); }   /* 8px */
.hf-card__sponsor-dot {
  flex: none; width: 12px; height: 12px; margin-top: 3px;
  border-radius: var(--radius-full);
  background: var(--color-orange-500);        /* #f97316 — sponsored marker */
}
.hf-card__sponsor-text {
  display: flex;
  flex-flow: row wrap;                        /* name + "Sponsored" flow on one line… */
  column-gap: var(--spacing-xs);              /* …4px apart — reads as a single word space at the 12px caps (6px read as a double space; Chris, 2026-08-14). Wraps only if too narrow */
  flex: 1; min-width: 0;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-text-xs);        /* 12px */
  line-height: var(--line-height-text-xs);    /* 18px */
  letter-spacing: 0.02em;
  text-transform: uppercase;                  /* SPONSOR NAME · SPONSORED */
  color: var(--color-gray-600);               /* #4a5a71 (blue-slate) */
  overflow-wrap: anywhere;                     /* let a very long name break rather than overflow */
}

/* Horizontal orientation — image left (175px), text/sponsor right */
.hf-card--horizontal { flex-direction: row; align-items: stretch; }
.hf-card--horizontal .hf-card__image { width: 175px; flex: none; height: auto; }
.hf-card--horizontal .hf-card__deviceside { flex: 1 0 0; min-width: 0; }

/* Responsive: horizontal collapses to stacked (image on top) on mobile —
   mirrors the wireframe .drug-spotlight behavior (single column at ≤640px). */
@media (max-width: 640px) {
  .hf-card--horizontal { flex-direction: column; }
  .hf-card--horizontal .hf-card__image { width: 100%; height: 250px; }
  .hf-card--horizontal .hf-card__deviceside { flex: 1; }
}

/* ---- Instance: Card-Drug ------------------------------------------------
   Source: Figma Card-Drug (node 19108:64445). A compact drug grid card:
   a 6px accent-400 top rule over a Recia display title, an indication eyebrow
   (gray tags separated by ·), an optional sponsor logo, a Text-md summary, and
   (sponsored) the shared sponsor lead. Reuses the base surface + hover border
   and .hf-card__sponsor. Axes: sponsored (include/omit logo + sponsor). */
.hf-card--drug { gap: var(--spacing-xl); }                  /* min gap between the pinned top + bottom groups */

/* Title block stays at the TOP; the summary + logo + sponsor lead are grouped
   into a foot pinned to the BOTTOM (margin-top:auto). So on an equal-height row,
   every card's lower content shares a baseline and the non-sponsored cards no
   longer leave an awkward gap under the title. */
.hf-card__drugfoot { margin-top: auto; display: flex; flex-direction: column; gap: var(--spacing-xl); width: 100%; }   /* 16px */

/* Title block: 6px green top rule, then title, then indication eyebrow */
.hf-card__drughead {
  display: flex; flex-direction: column; gap: var(--spacing-xs);   /* 4px */
  width: 100%;
  border-top: 6px solid var(--color-accent-400);           /* #26dc91 signature rule */
  padding-top: var(--spacing-xl);                          /* 16px */
  padding-bottom: var(--spacing-lg);                       /* 12px */
}
.hf-card--drug .hf-card__title {
  font-family: var(--font-family-display);                 /* Recia */
  font-weight: var(--font-weight-semibold);                /* 600 */
  font-size: var(--font-size-display-xs);                  /* 24px */
  line-height: var(--line-height-display-xs);              /* 32px */
  letter-spacing: 0;
}
/* =====================================================================
   UPPERCASE MICRO-LABEL POLICY (normalized 2026-08-27, Chris):
   CANONICAL: text-xs (12) · semibold · +0.06em · --text-tertiary or darker.
   Documented EXCEPTION families (keep their own ink/size):
     · badge/pill internals (.hf-pub-badge, .hf-mfr-card__tag, .hf-magcover__badge)
     · on-dark surfaces (.hf-footer__heading, .hf-actions__header, .hf-inpage-nav__title,
       .hf-table th, .hf-section--onbrand eyebrow)
     · brand-ink modal eyebrows (.hf-share/.hf-inquiry/.hf-prefmodal __eyebrow)
     · accent-green eyebrows (.hf-card__eyebrow, .hf-magazine-promo__eyebrow)
     · quiet ad attribution (.hf-drughero__banner-label, .hf-card__sponsor-text)
     · compact filter-panel controls + nav chrome + ISI header + A–Z letters.
   Everything else conforms. New labels: use the canonical recipe.
   ===================================================================== */
/* Drug-card eyebrow (class · indication · …). Canonical uppercase micro-label:
   the text-xs / semibold / body recipe of `.t-text-xs-semi`, uppercased and tracked
   OUT (+0.06em) to match the system's other uppercase micro-labels
   (`.hf-search__section-head` .06em; `.hf-card__eyebrow` ≈.08em). Previously carried
   a hardcoded, wrong-direction `-0.12px` — negative tracking on uppercase. */
.hf-card__indications {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-xs);   /* 4px */
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-semibold);                /* 600 */
  font-size: var(--font-size-text-xs);                     /* 12px */
  line-height: var(--line-height-text-xs);                 /* 18px */
  text-transform: uppercase; letter-spacing: 0.06em;       /* canonical uppercase-label tracking */
  color: var(--text-tertiary);                             /* #525252 */
}
.hf-card__indications .sep { color: var(--text-tertiary); }

/* Sponsor logo — a bare product wordmark image (unbordered), left-aligned */
.hf-card__druglogo { display: flex; align-items: center; height: 71px; }
.hf-card__druglogo img { max-width: 150px; max-height: 71px; width: auto; height: auto; object-fit: contain; display: block; }
/* CANONICAL — faux brand wordmark used where a drug/brand logo image is not yet available
   (featured cards, sponsored spotlights). Promoted from page-local copies (audit v3.40 #6);
   the 26px one-off on the indication landing was normalized to this 30px size. */
.faux-logo { font-family: var(--font-family-display); font-weight: var(--font-weight-bold); font-size: 30px; letter-spacing: -0.5px; color: var(--color-brand-700); }

/* ---- Instance: Card-Drug ROW — horizontal / landscape [NET-NEW variant] -----
   A dense, single-line drug card for a results LIST (vs the 2-up grid card).
   Title + generic on the left with a class/indication eyebrow beneath; the
   manufacturer and (if sponsored) the sponsor lead pin to the right. Tighter
   padding + a smaller title raise content density. Reuses the base .hf-card
   surface + hover, plus .hf-card__title, .hf-card__indications, .hf-card__sponsor.
   .hf-card--device-row is the DEVICE twin (same anatomy; the eyebrow carries
   CATEGORY · USE instead of CLASS · INDICATION) — used by the Diagnostics finder.
   Axes: sponsored (include/omit .hf-card__sponsor). ---- */
.hf-card--drug-row, .hf-card--device-row { flex-direction: row; align-items: center; gap: var(--spacing-2xl); padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-lg) var(--spacing-2xl); }
/* Green leading rule = the drug-card SIGNATURE, carried over from the grid card's
   6px accent-400 top rule and re-seated on the leading edge for the horizontal
   orientation (it marks "this row is a drug entity", not decoration). A ::before
   bar rather than a border, so it never fights the card's hover border. */
.hf-card--drug-row::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--color-accent-400);
  border-radius: var(--radius-xl) 0 0 var(--radius-xl);
}
.hf-card__rowmain { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-xs); }
.hf-card--drug-row .hf-card__title, .hf-card--device-row .hf-card__title {
  margin: 0; font-size: var(--font-size-text-lg); line-height: var(--line-height-text-lg);
}
.hf-card--drug-row .hf-card__title { font-family: var(--font-family-display); font-weight: var(--font-weight-semibold); letter-spacing: 0; }
/* Device titles are SANS across the whole family (base .hf-card__title voice) —
   the row keeps that, only stepping the size down to row scale. */
.hf-card--device-row .hf-card__title { font-family: var(--font-family-body); font-weight: var(--font-weight-bold); letter-spacing: -0.2px; }
.hf-card__rowgeneric { font-family: var(--font-family-body); font-weight: var(--font-weight-regular); font-size: var(--font-size-text-sm); color: var(--text-tertiary); }
.hf-card__rowaside { flex: none; display: flex; align-items: center; gap: var(--spacing-xl); text-align: right; }
.hf-card__rowmfr { font-size: var(--font-size-text-sm); color: var(--text-secondary); white-space: nowrap; }
/* Row cards center-align the sponsor lockup, so drop the dot's 3px flex-start
   nudge (authored to meet a text TOP in the vertical/horizontal cards) —
   otherwise the dot sits visibly below the text's centerline. Same principle
   as the .hf-article-featured__eyebrow override. */
.hf-card--drug-row .hf-card__sponsor, .hf-card--device-row .hf-card__sponsor { align-items: center; }
.hf-card--drug-row .hf-card__sponsor-dot, .hf-card--device-row .hf-card__sponsor-dot { margin-top: 0; }

/* DEVICE row — shares the row LAYOUT above but carries the Card-Device visual DNA
   instead of the drug signature: NO accent left rule; the family's INDEPENDENT
   image axis at row scale — products with an image carry the .hf-card__rowimg
   slot (bordered box), imageless products omit it entirely (same as Vertical /
   Horizontal; never an empty placeholder); the accent .hf-card__eyebrow ABOVE
   the title (via .hf-card__eyebrowhead); and the uses line in the device dek
   voice (sentence case) rather than the drug's caps indications.
   Used by the Diagnostics finder. */
.hf-card--device-row { padding-left: var(--spacing-xl); }   /* no accent rule → symmetric padding */
/* Image slot — REAL product photos only (Chris, 2026-08-14): a row either has
   an actual image or no slot at all; no placeholder icons. 72px. */
.hf-card--device-row .hf-card__rowimg {
  flex: none; width: 72px; height: 72px; box-sizing: border-box;
  border: 1px solid var(--border-primary); border-radius: var(--radius-md);
  background: var(--bg-primary);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.hf-card--device-row .hf-card__rowimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hf-card--device-row .hf-card__dek { font-size: var(--font-size-text-sm); line-height: var(--line-height-text-sm); }   /* dek voice, dense-row scale */
@media (max-width: 640px) {
  .hf-card--drug-row, .hf-card--device-row { flex-direction: column; align-items: flex-start; gap: var(--spacing-md); }
  .hf-card__rowaside { width: 100%; justify-content: flex-start; text-align: left; }
}
/* Single-column dense results list (vs the 2-up .hf-results-grid) */
.hf-results-list { display: flex; flex-direction: column; gap: var(--spacing-md); }

/* ===========================================================================
   INSTANCE: Card-List (.hf-card--list)
   ---------------------------------------------------------------------------
   A titled card holding a wrapping set of entity pills — the signed-in "morning
   briefing" groups. Reuses the base card SURFACE (bg, radius, padding, border) but
   is a CONTAINER of many links, not a single-link card, so it opts OUT of the
   whole-card hover lift/glow; each pill owns its own hover.

   Entries reuse the SHARED pattern: .hf-pillwrap of .hf-entity-badge pills (name +
   optional timestamp + arrow, badge.css). No per-entry description — the group
   heading supplies the verb, the pill the noun (+ when), detail lives on the
   destination. This scales to as many entries as fit and needs no authored copy.
   Update groups carry a timestamp; ranked groups ("Top in {focus}") omit it.

   Cold start: a group with no activity renders .hf-card__empty — a line + text
   link — instead of pills. (Specialty groups need the user's focus set first.)
   =========================================================================== */
.hf-card--list { gap: var(--spacing-md); }                 /* title ↔ pills */
.hf-card--list:hover, .hf-card--list:focus-within {        /* not a single-link card */
  border-color: transparent; box-shadow: none; transform: none;
}

.hf-card__grouptitle {
  margin: 0 0 var(--spacing-xs);
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-semibold);                /* 600 */
  font-size: var(--font-size-text-lg);                     /* 18 */
  line-height: var(--line-height-text-lg);
  color: var(--text-primary);
}

/* Empty / cold-start state for a group with no activity yet.
   Deliberately spare — a line of copy + a text link (.hf-btn--link-color) — so it
   reads as a null state that nudges the user to explore and save, not a feature. */
.hf-card__empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-md); padding-top: var(--spacing-xs); }
.hf-card__empty-text { margin: 0; font-size: var(--font-size-text-sm); line-height: var(--line-height-text-sm); color: var(--text-tertiary); }

/* ===========================================================================
   INSTANCE: Card-Article (editorial) — .hf-card--article
   ---------------------------------------------------------------------------
   Source: Figma Card-Article type=Article (node 19115:132190). A fixed-height
   editorial card: accent eyebrow (content type) + bold title at the TOP, a body
   summary that FILLS the middle and clips (soft bottom fade so the cut isn't
   harsh), and a date • read-time meta pinned to the BOTTOM. Reuses the base
   surface + hover, the accent .hf-card__eyebrow, .hf-card__title (whole-card
   link via ::after), and .hf-card__meta for the date row.
   =========================================================================== */
.hf-card--article { height: 400px; gap: var(--spacing-lg); }        /* Figma fixed editorial height; 12 flow gap */
.hf-card__arttop { display: flex; flex-direction: column; gap: var(--spacing-xs); width: 100%; }   /* 4 (eyebrow ↔ title) */
.hf-card__artsummary {
  flex: 1 1 0; min-height: 0; overflow: hidden;                      /* fill the middle, clip the overflow */
  margin: 0;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-text-xs);                              /* 12 */
  line-height: var(--line-height-text-xs);                          /* 18 */
  color: var(--text-secondary);                                     /* #404040 */
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent);
          mask-image: linear-gradient(180deg, #000 78%, transparent);
}

/* ===========================================================================
   INSTANCE: Card-Magazine — .hf-card--magazine
   ---------------------------------------------------------------------------
   Source: Figma Card-Article type=Magazine (node 19115:65348). A navy card: a
   cover image on a soft brand radial gradient fills the top, and below sit an
   accent eyebrow + WHITE title + cover line + date. Same fixed height as the
   article card so the two sit level in a row. Whole-card link via the base title.
   =========================================================================== */
.hf-card--magazine {
  height: 400px;
  padding: 0;                                                       /* cover bleeds to the top edges */
  gap: 0;
  background: var(--bg-secondary-solid);                            /* #13315c navy */
  overflow: hidden;                                                 /* clip cover to the card radius */
}
.hf-card__magcover {
  flex: 1 1 0; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  padding: var(--spacing-3xl);                                      /* 24 */
  background: radial-gradient(120% 130% at 12% 100%,
    var(--color-white) 0%, var(--color-brand-200) 32%,
    var(--color-brand-600) 68%, var(--color-brand-900) 100%);
}
.hf-card__magcover img { height: 100%; width: auto; max-width: 100%; object-fit: contain; display: block; box-shadow: 0 5px 9px color-mix(in srgb, var(--color-brand-900) 50%, transparent); }
.hf-card__magbody { flex: none; display: flex; flex-direction: column; gap: var(--spacing-lg); padding: var(--spacing-3xl); }   /* 12 / 24 */
.hf-card--magazine .hf-card__title { color: var(--color-white); }
.hf-card__magmeta {
  display: flex; flex-direction: column; gap: var(--spacing-md);    /* 8 */
  font-family: var(--font-family-body);
  font-size: var(--font-size-text-xs);                              /* 12 */
  line-height: var(--line-height-text-xs);
  color: var(--color-white);
}

/* ---- Responsive grid (3-up desktop → 1-up mobile) ---- */
.hf-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--spacing-3xl);                     /* 24px */
  align-items: stretch;
}
/* Compact variant — a tighter min track so small cards (e.g. Profile "Suggested for
   you") pack ~4-up; pairs with .hf-card--compact. */
.hf-card-grid--compact { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--spacing-lg); }

/* Compact card variant — a smaller, denser card for recommendation rails and other
   tight rows. Works on any type instance (--pub / --drug / --device). */
.hf-card--compact { padding: var(--spacing-xl); gap: var(--spacing-md); }
/* Compact cards use ONE uniform title treatment regardless of entity type (drug / article /
   device): the Recia display face at semibold, so a mixed "Suggested for you" grid reads
   consistently instead of the drug title (serif) looking bolder than the article title (sans). */
.hf-card--compact .hf-card__title { font-family: var(--font-family-display); font-weight: var(--font-weight-semibold); font-size: var(--font-size-text-md); line-height: var(--line-height-text-md); letter-spacing: -0.1px; }
.hf-card--compact .hf-card__eyebrow { margin-bottom: 2px; }


/* ===================== components/tabs.css ===================== */
/* ===========================================================================
   POR 2026 — HIGH-FIDELITY ATOM: Tabs (.hf-tabs / .hf-tab)
   ---------------------------------------------------------------------------
   Source: Figma Tabs component (Components page, node 43:0) — the "Button brand"
   horizontal style used on the Home "Today's Intelligence" module and the
   Profile page. Reads (get_design_context): Button brand Current True/False,
   Default + Hover (nodes 1117:180 / 1117:164 / 1117:176) and the Home instance.

   Behavior: ACTIVE and HOVER share the green-tint look (bg-accent-alt + green
   label); inactive is gray on transparent. The row carries one bottom hairline.
   Optional leading icon (16px) and count badge — text-only by default (Home);
   both are exercised on Profile.

   Size: sm (36px) built from the Home instance. md (44px) available via
   .hf-tabs--md (height only for now; confirm md padding/type when needed).
   Depends on tokens.css — tokens only.
   =========================================================================== */

/* ===========================================================================
   COUNT — the canonical little number pill (tabs · sub-tabs · resource total).
   Always brand-blue: the active tab's green fill already signals selection, so
   the count doesn't restate it. One definition; every consumer references it.
   =========================================================================== */
.hf-count {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  min-width: 20px; height: 20px;                      /* circular for 1–2 digits; grows to a capsule only at 3+ digits */
  padding: 0 var(--spacing-xxs);
  border-radius: var(--radius-full);
  background: var(--color-brand-50); border: 1px solid var(--color-brand-200);
  color: var(--color-brand-700);
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-medium);             /* 500 */
  font-size: var(--font-size-text-xs);                /* 12 */
  line-height: 1;
}

.hf-tabs {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);                         /* 8px between tabs */
  border-bottom: 1px solid var(--border-secondary);
  overflow-x: auto;                               /* scroll rather than wrap on narrow */
  scrollbar-width: none;
}
.hf-tabs::-webkit-scrollbar { display: none; }

.hf-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);                         /* 6px (icon / label / count) */
  flex: none;
  box-sizing: border-box;
  height: 36px;
  padding: var(--spacing-md) 10px;                /* 8 / 10 */
  border: 0;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;  /* top-rounded only */
  background: transparent;
  color: var(--text-quaternary);                  /* #737373 (inactive) */
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-semibold);       /* 600 */
  font-size: var(--font-size-text-sm);            /* 14px */
  line-height: var(--line-height-text-sm);        /* 20px */
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition:
      background-color var(--motion-duration) var(--motion-ease),
      color            var(--motion-duration) var(--motion-ease);
}

/* Optional leading icon (16px) */
.hf-tab__icon { flex: none; width: 16px; height: 16px; display: inline-flex; color: inherit; }
.hf-tab__icon svg { width: 100%; height: 100%; display: block; }

/* Count badge in a tab → the canonical .hf-count (always brand-blue). */

/* Active + hover share the green-tint treatment */
.hf-tab:hover,
.hf-tab.is-active,
.hf-tab[aria-selected="true"] {
  background: var(--bg-accent-alt);               /* #e8f8f0 */
  color: var(--color-accent-700);                 /* #0d8a57 */
}

.hf-tab:focus-visible { outline: none; box-shadow: var(--focus-ring-brand); }

/* Size: md (44px) */
.hf-tabs--md .hf-tab { height: 44px; }

/* ===========================================================================
   RESPONSIVE  (Figma for the pixels, wireframes for the plasticity)
   Desktop: the horizontal tab row. ≤768px (canonical mobile breakpoint): the row
   collapses into a full-width dropdown — Figma's mobile Tabs variant (a select
   styled like the input: white, border-primary, radius-md, shadow-xs, chevron).
   Wrap the row + the <select> in .hf-tabs-group; sync them with JS.
   =========================================================================== */

.hf-tabs__select { display: none; }

@media (max-width: 768px) {
  .hf-tabs-group .hf-tabs { display: none; }
  .hf-tabs__select {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: var(--spacing-md) 40px var(--spacing-md) var(--spacing-lg);  /* 8 / (right room for chevron) / 8 / 12 */
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    background-color: var(--bg-primary);
    box-shadow: var(--shadow-xs);
    color: var(--text-primary);
    font-family: var(--font-family-body);
    font-weight: var(--font-weight-medium);         /* Text sm/Medium */
    font-size: var(--font-size-text-sm);
    line-height: var(--line-height-text-sm);
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'><path d='M4 6l4 4 4-4' stroke='%23737373' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
  }
  .hf-tabs__select:focus-visible { outline: none; box-shadow: var(--shadow-xs), var(--focus-ring-brand); }
}

/* Optional: lock the tab bar under the 56px page header (Profile pattern) */
.hf-tabs-sticky {
  position: sticky;
  top: 56px;                    /* assumes the 56px page header */
  z-index: 30;
  background: var(--bg-primary);
}


/* ===================== components/wavy.css ===================== */
/* ===========================================================================
   POR 2026 — HIGH-FIDELITY UTILITY: Wavy background (.hf-wavy)
   ---------------------------------------------------------------------------
   The decorative flowing-lines graphic, extracted from the hero so any band can
   reuse ONE implementation. Drop it as the first child of a `position:relative;
   overflow:hidden` band, then raise the band's content above it (z-index:1).

     .hf-wavy            clip layer — absolute inset:0, clips the graphic to the band
       .hf-wavy__img     the graphic (centered, oversized so it bleeds past edges)
     .hf-wavy--top       anchor the graphic near the top  (hero: 45px down)
     .hf-wavy--bottom    anchor the graphic to the bottom (Browse band: lower half)

   Asset per context: Wavy_lines.svg (mono, light hero) vs Wavy_lines_colored.svg
   (colored lines, dark brand band). Tokens only.
   =========================================================================== */

.hf-wavy { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }

.hf-wavy__img {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 115%; min-width: 1200px; height: auto;
  pointer-events: none; user-select: none;
}

.hf-wavy--top    .hf-wavy__img { top: 45px; }
.hf-wavy--bottom .hf-wavy__img { bottom: 0; }


/* ===================== components/skeleton.css ===================== */
/* ===========================================================================
   POR 2026 — HIGH-FIDELITY UTILITY: Skeleton loading (.hf-skeleton)
   ---------------------------------------------------------------------------
   A shimmering placeholder block for content that's loading (e.g. the
   Intelligence tab cards while their "fetch" resolves). Compose blocks inside a
   card shell to mirror the real card's shape.

     .hf-skeleton            a shimmer block (size it inline or with a modifier)
       .hf-skeleton--line    title-height line (20px)
       .hf-skeleton--text    body-height line (13px)
     .hf-card--loading       a card in its loading state (no hover, tighter lines)

   Reduced-motion swaps the sweep for a gentle opacity pulse. Tokens only.
   =========================================================================== */

.hf-skeleton {
  display: block; position: relative; overflow: hidden;
  background: var(--border-secondary);                /* #e5e5e5 base */
  border-radius: var(--radius-sm);
}
.hf-skeleton--line { width: 100%; height: 20px; }
.hf-skeleton--text { width: 100%; height: 13px; }

.hf-skeleton::after {
  content: ""; position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg,
    transparent 0,
    color-mix(in srgb, var(--color-white) 65%, transparent) 50%,
    transparent 100%);
  animation: hf-skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes hf-skeleton-shimmer { to { transform: translateX(100%); } }

/* Card in its loading state — inert, no hover lift, tighter line stack.
   min-height ≈ a typical loaded intel card so the block barely shifts when the
   skeleton is swapped for real content. */
.hf-card--loading { pointer-events: none; min-height: 280px; }
.hf-card--loading:hover,
.hf-card--loading:focus-within { border-color: transparent; box-shadow: none; transform: none; }
.hf-card--loading .hf-card__titlewrap { gap: var(--spacing-sm); }

@media (prefers-reduced-motion: reduce) {
  .hf-skeleton::after { animation: none; }
  .hf-skeleton { animation: hf-skeleton-pulse 1.6s ease-in-out infinite; }
}
@keyframes hf-skeleton-pulse { 50% { opacity: 0.5; } }


/* ===================== components/shell.css ===================== */
/* ===========================================================================
   POR 2026 — HIGH-FIDELITY SHELL: app frame (.hf-shell)
   ---------------------------------------------------------------------------
   The navigational framing every template sits inside: a left icon RAIL + a
   56px top HEADER. Source: Figma Home — Header (19135:1089) + Navigation Left
   (19105:64242). Composes the Button atom for the header utility.

   RESPONSIVE (Rule 9 — wireframe plasticity, re-skinned with Figma tokens).
   The wireframe rail carries TWO behaviors; both are reproduced here:

     • DESKTOP  — expand / collapse. The rail toggles between 64px (icon-only,
                  the Figma default) and 240px (labeled). Persisted by the demo
                  JS via localStorage.  State: .hf-shell.is-nav-expanded
     • ≤768px   — full-screen overlay drawer, opened by a header hamburger.
                  Centered brand logo, hamburger morphs to ×, labeled items,
                  a "Personal" divider, and an auth-aware account zone pinned
                  to the bottom. Header utility hides; body scroll locks.
                  State: .hf-shell.is-nav-open

   Tokens only.
   =========================================================================== */

.hf-shell { display: flex; min-height: 100vh; background: var(--bg-primary); }
.hf-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hf-content { flex: 1; min-width: 0; }

/* ===== Left rail ======================================================== */
.hf-nav {
  flex: none;
  width: 64px;
  background: var(--bg-primary);
  border-right: 1px solid var(--border-primary);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 40;
  transition: width var(--duration-base) var(--ease-standard);   /* expand/collapse */
}

/* --- Rail top: the hamburger cell (aligns 1:1 with the 56px header) ----- */
.hf-nav__top {
  box-sizing: border-box;                             /* total height = 56px incl. both rules */
  height: 56px; flex: none;
  display: flex; align-items: center; justify-content: center;
  gap: var(--spacing-md);
  border-top: 1px solid var(--border-secondary);      /* the hamburger cell is the only ruled one */
  border-bottom: 1px solid var(--border-secondary);
  cursor: pointer;
  transition: background-color var(--motion-duration) var(--motion-ease);
}
.hf-nav__top:hover { background: var(--bg-primary-hover); }             /* neutral hover (Figma bg-primary_hover) */
.hf-nav__toggle {
  width: 32px; height: 32px; flex: none;
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-xs);
  background: var(--bg-primary);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color var(--motion-duration) var(--motion-ease);
}
.hf-nav__top:hover .hf-nav__toggle { border-color: var(--color-brand-200); }
.hf-nav__toggle svg { width: 16px; height: 16px; }
.hf-nav__toggle-close { display: none; }             /* × only appears inside the mobile drawer */

/* Brand block — only rendered inside the mobile drawer header */
.hf-nav__brand { display: none; }

/* --- Rail items --------------------------------------------------------- */
.hf-nav__items { flex: 1; display: flex; flex-direction: column; overflow-y: auto; }

.hf-nav__item {
  position: relative;
  height: 56px; flex: none;
  display: flex; align-items: center; justify-content: center;
  gap: var(--spacing-lg);
  /* no dividers between icon items (Figma) — only the hamburger cell is ruled */
  text-decoration: none;
  color: var(--text-secondary);
  transition: background-color var(--motion-duration) var(--motion-ease);
}
.hf-nav__icon {
  flex: none;
  width: 32px; height: 32px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-secondary);
  background: var(--bg-primary);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-xs);
  color: var(--icon-fg-brand);                    /* #194689 — brand-blue nav icons */
  transition: border-color var(--motion-duration) var(--motion-ease),
              box-shadow  var(--motion-duration) var(--motion-ease);
}
.hf-nav__icon svg { width: 16px; height: 16px; }
.hf-nav__label {
  display: none;                                  /* hidden on the collapsed icon rail */
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-text-sm);
  color: var(--text-secondary);
  white-space: nowrap;
}
/* Hover — a nav-scaled version of the CARD hover: a light accent tint on the cell,
   and the icon circle "lights up" with an accent border + a compact accent glow
   (the card glow, scaled to fit the rail — no vertical lift in a fixed nav list). */
.hf-nav__item:hover:not(.is-active) { background: var(--color-accent-50); }                 /* #e8f8f0 */
.hf-nav__item:hover:not(.is-active) .hf-nav__icon {
  border-color: var(--color-accent-500);                                                    /* #12a96d */
  box-shadow: 0 1px 4px color-mix(in srgb, var(--color-accent-500) 18%, transparent),
              0 4px 12px color-mix(in srgb, var(--color-accent-400) 26%, transparent);
}

/* Active item — full-cell blue→green gradient + translucent-brand icon circle */
.hf-nav__item.is-active { background: var(--gradient-nav-active); }
.hf-nav__item.is-active .hf-nav__icon { background: color-mix(in srgb, var(--color-brand-600) 70%, transparent); border-color: transparent; box-shadow: none; color: var(--text-white); }
.hf-nav__item.is-active .hf-nav__label { color: var(--text-white); }
.hf-nav__item:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--color-brand-300); }

/* Section sub-nav — the active top-level section auto-expands to its child destinations.
   Shown only when labels are visible (expanded desktop rail OR the mobile drawer); on the
   collapsed icon rail it stays hidden. Injected by nav-subnav.js off the active item's label.
   Sub-items indent to 64px so they line up under the parent label (16 pad + 32 icon + 16 gap). */
/* The children live in their OWN subtle gray container, inset from the rail edges, so the
   open section reads as a distinct group — clearly separate from the active (ON) parent's
   blue→green cell above and the plain rows below. Sub-labels are DM Mono (a quiet, technical
   register that differentiates a child destination from a top-level item). */
.hf-nav__sub {
  display: none; flex-direction: column; gap: 2px;
  margin: 0;                                                       /* full-bleed L/R + T/B — no inset */
  padding: var(--spacing-xs) 0;
  background: var(--bg-secondary);                                 /* the "very slight gray fill" — edge to edge */
}
.hf-shell.is-nav-expanded .hf-nav__sub,
.hf-shell.is-nav-open .hf-nav__sub { display: flex; }
.hf-nav__subitem {
  position: relative; display: flex; align-items: center; min-height: 34px;
  padding: var(--spacing-xs) var(--spacing-md) var(--spacing-xs) 64px;   /* 64 = parent-label indent (16 pad + 32 icon + 16 gap) — mono label lines up under the parent label */
  font-family: var(--font-family-mono); font-size: var(--font-size-text-sm); font-weight: var(--font-weight-regular);
  letter-spacing: -0.02em;
  color: var(--text-tertiary); text-decoration: none; white-space: nowrap; border-radius: var(--radius-sm);
  transition: background-color var(--motion-duration) var(--motion-ease), color var(--motion-duration) var(--motion-ease);
}
.hf-nav__subitem:hover { background: var(--color-accent-50); color: var(--text-primary); }
.hf-nav__subitem.is-current { color: var(--text-link); font-weight: var(--font-weight-medium); background: var(--color-accent-50); }

/* ==========================================================================
   Tooltip (.hf-tooltip) — REUSABLE. Figma Tooltip component (Supporting
   text=False). A brand-blue pill + a directional arrow + shadow-lg.
     .hf-tooltip                base (theme via --hf-tooltip-bg)
       .hf-tooltip__arrow       the triangle (points at the anchor)
       .hf-tooltip__label       the text pill
     Direction:  --left · --right (arrow beside) · --top · --bottom (arrow stacked)
     .hf-tooltip--floating      fixed-positioned + fade/slide on .is-visible
                                (JS anchors it — e.g. the collapsed rail).
   Markup: <div class="hf-tooltip hf-tooltip--left">
             <span class="hf-tooltip__arrow"></span>
             <span class="hf-tooltip__label">Label</span></div>
   ========================================================================== */
.hf-tooltip {
  --hf-tooltip-bg: var(--color-brand-500);       /* #1e5bb8 — swap here to re-theme */
  display: inline-flex;
  align-items: center;
  filter: drop-shadow(0 12px 12px rgba(16, 24, 40, 0.10)) drop-shadow(0 3px 4px rgba(16, 24, 40, 0.06));
}
.hf-tooltip__label {
  background: var(--hf-tooltip-bg);
  color: var(--text-white);
  font-family: var(--font-family-body);
  font-size: var(--font-size-text-xs);           /* 12 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-text-xs);       /* 18 */
  letter-spacing: -0.12px;
  padding: var(--spacing-md) var(--spacing-lg);  /* 8 / 12 */
  border-radius: var(--radius-md);               /* 8 */
  white-space: nowrap;
  text-align: center;
}
.hf-tooltip__arrow { flex: none; width: 0; height: 0; }
/* Arrow direction — the triangle points toward the anchored element. */
.hf-tooltip--left           { flex-direction: row; }
.hf-tooltip--left  .hf-tooltip__arrow  { border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 6px solid var(--hf-tooltip-bg); }
.hf-tooltip--right          { flex-direction: row-reverse; }
.hf-tooltip--right .hf-tooltip__arrow  { border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 6px solid var(--hf-tooltip-bg); }
.hf-tooltip--top            { flex-direction: column; }
.hf-tooltip--top   .hf-tooltip__arrow  { border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid var(--hf-tooltip-bg); }
.hf-tooltip--bottom         { flex-direction: column-reverse; }
.hf-tooltip--bottom .hf-tooltip__arrow { border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid var(--hf-tooltip-bg); }

/* Floating usage — a fixed element the JS anchors + toggles .is-visible on. */
.hf-tooltip--floating {
  position: fixed;
  z-index: 200;
  pointer-events: none;                          /* never intercept the cursor */
  opacity: 0;
  transition: opacity 120ms var(--motion-ease), transform 120ms var(--motion-ease);
}
/* Side-arrow floating (rail): vertically centered on the anchor, slides in. */
.hf-tooltip--floating.hf-tooltip--left  { transform: translateY(-50%) translateX(-4px); }
.hf-tooltip--floating.hf-tooltip--right { transform: translateY(-50%) translateX(4px); }
.hf-tooltip--floating.hf-tooltip--left.is-visible,
.hf-tooltip--floating.hf-tooltip--right.is-visible { opacity: 1; transform: translateY(-50%) translateX(0); }
@media (prefers-reduced-motion: reduce) {
  .hf-tooltip--floating { transition: opacity 120ms var(--motion-ease); }
  .hf-tooltip--floating.hf-tooltip--left,
  .hf-tooltip--floating.hf-tooltip--right { transform: translateY(-50%); }
}

/* --- Account zone: rendered only inside the mobile drawer (bottom-pinned) */
.hf-nav__account { display: none; }

/* ===== Desktop EXPANDED rail (.is-nav-expanded) ========================= */
/* Rail widens to 240px and item labels appear. The Figma collapsed rail is
   the default; this is the wireframe's expand behavior, re-skinned. */
.hf-shell.is-nav-expanded .hf-nav { width: 240px; }
.hf-shell.is-nav-expanded .hf-nav__top { justify-content: flex-start; padding: 0 var(--spacing-lg); }
.hf-shell.is-nav-expanded .hf-nav__item {
  justify-content: flex-start;
  padding: 0 var(--spacing-lg);
}
.hf-shell.is-nav-expanded .hf-nav__label { display: block; }

/* ===== Header ========================================================== */
.hf-header {
  box-sizing: border-box;                         /* keep total height = 56px incl. padding */
  position: sticky; top: 0; z-index: 30;
  height: 56px; flex: none;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--spacing-lg);
  padding: 8px var(--spacing-3xl);                /* py8 / px24 */
  background: var(--bg-primary);
  border-top: 1px solid var(--border-secondary);      /* matches the rail's top rule (Figma header border-t) */
  border-bottom: 1px solid var(--border-secondary);
}
/* ---------------------------------------------------------------------------
   PATTERN: Reading progress bar (.hf-readprogress)                    [NEW]
   A thin meter pinned to the header's bottom edge, spanning the full content
   canvas (the header sits inside .hf-main, so it already starts after the nav
   rail). The fill width is driven by page scroll in JS (0→100%), giving a live
   read of how far through the article the reader is. The header is position:
   sticky, which establishes the containing block for this absolute child.
   Reusable on any long-read template — attach inside .hf-header and set the
   fill width on scroll. --------------------------------------------------- */
.hf-readprogress { position: absolute; left: 0; right: 0; top: 100%; height: 4px; z-index: 1; background: transparent; pointer-events: none; }   /* top:100% seats it just BELOW the header's bottom border, still pinned to the sticky header */
.hf-readprogress__bar {
  display: block;                                   /* span is inline by default → width/height would be ignored */
  height: 100%; width: 0%;
  background: var(--color-accent-400);              /* light POR green — reads as a friendly, unobtrusive reading meter */
  transition: width 90ms linear;
  will-change: width;
}
.hf-header__left { display: flex; align-items: center; gap: var(--spacing-lg); min-width: 0; }
.hf-header__hamburger {
  display: none;                                  /* mobile only */
  width: 36px; height: 36px; flex: none;
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  align-items: center; justify-content: center;
  color: var(--text-secondary);
  cursor: pointer;
}
.hf-header__hamburger svg { width: 20px; height: 20px; }
.hf-header__logo { display: flex; align-items: center; text-decoration: none; min-width: 0; }
.hf-header__logo-img { display: block; width: auto; }
.hf-header__logo-img--full { height: 42px; }       /* horizontal wordmark — Figma lockup H=42 (Assets/Property 1=Dark.png) */
.hf-header__logo-img--mark { height: 28px; display: none; }  /* symbol only (mobile) */
.hf-header__utility { display: flex; align-items: center; gap: var(--spacing-sm); flex: none; }
/* Auth states — default = authenticated (My Profile); .is-anon = Sign in + Register */
.hf-auth { display: flex; align-items: center; gap: var(--spacing-sm); }
.hf-auth--anon { display: none; }
.hf-shell.is-anon .hf-auth--anon { display: flex; }
.hf-shell.is-anon .hf-auth--user { display: none; }

/* Personal zone (Profile item + its "Personal" divider) is signed-in only —
   the anonymous view has no profile, so it's removed entirely. */
.hf-shell.is-anon .hf-nav__personal { display: none !important; }

/* ---- Account menu ("My Profile" dropdown) --------------------------------
   Header (desktop) = a dropdown anchored under the trigger; drawer footer
   (mobile) = the same items rendered inline (.hf-menu__inline). Built by
   profile-menu.js. */
.hf-menu { position: relative; }

/* Authenticated trigger — initials-circle pill (wireframe treatment). A 28px echo of the
   panel avatar (.hf-menu__avatar) sits in a rounded pill; profile-menu.js keeps the
   initials in sync with IDENTITY so trigger + panel never drift. */
.hf-avatar-chip {
  box-sizing: border-box;
  display: inline-flex; align-items: center; gap: var(--spacing-sm);
  height: 38px; padding: 4px var(--spacing-lg) 4px 4px;   /* tighter left edge to hug the avatar */
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-full);
  background: var(--bg-primary);
  color: var(--text-secondary);
  font-family: var(--font-family-body); font-size: var(--font-size-text-sm); font-weight: var(--font-weight-medium); line-height: 1;
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}
.hf-avatar-chip:hover { background: var(--bg-secondary); }
.hf-avatar-chip[aria-expanded="true"] { background: var(--bg-secondary); }
.hf-avatar-chip:focus-visible { outline: none; box-shadow: var(--focus-ring-brand); }
.hf-avatar-chip__avatar {
  flex: none; width: 28px; height: 28px; border-radius: var(--radius-full);
  background: var(--gradient-nav-active); color: var(--text-white);   /* gradient avatar — consistent across chip / menu / hero */
  font-size: var(--font-size-text-xxs); font-weight: var(--font-weight-semibold); letter-spacing: 0.04em;
  display: inline-flex; align-items: center; justify-content: center;
}
.hf-avatar-chip__chevron { display: inline-flex; align-items: center; color: var(--text-tertiary); }
.hf-avatar-chip__chevron svg { width: 14px; height: 14px; }

.hf-menu__panel {
  position: absolute; top: calc(100% + var(--spacing-sm)); right: 0;
  min-width: 264px;
  background: var(--bg-primary);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-overlay);
  padding: var(--spacing-sm) 0;
  z-index: 70;
}
.hf-menu__panel[hidden] { display: none; }

.hf-menu__identity { display: grid; grid-template-columns: 40px 1fr; gap: var(--spacing-md); align-items: center; padding: var(--spacing-md) var(--spacing-lg); }
.hf-menu__avatar {
  width: 40px; height: 40px; border-radius: var(--radius-full);
  background: var(--gradient-nav-active); color: var(--text-white);   /* gradient avatar — consistent across chip / menu / hero */
  font-family: var(--font-family-body); font-size: var(--font-size-text-sm); font-weight: var(--font-weight-bold); letter-spacing: 0.04em;
  display: inline-flex; align-items: center; justify-content: center;
}
.hf-menu__id-text { min-width: 0; }
.hf-menu__name { margin: 0; font-family: var(--font-family-body); font-size: var(--font-size-text-sm); font-weight: var(--font-weight-semibold); line-height: 1.2; color: var(--text-primary); }
.hf-menu__meta { margin: 2px 0 0; font-family: var(--font-family-body); font-size: var(--font-size-text-xs); line-height: 1.2; color: var(--text-tertiary); }
.hf-menu__divider { height: 1px; background: var(--border-secondary); margin: var(--spacing-sm) 0; }

.hf-menu__item {
  display: flex; align-items: center; gap: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-lg);
  font-family: var(--font-family-body); font-size: var(--font-size-text-sm); font-weight: var(--font-weight-medium);
  color: var(--text-secondary); text-decoration: none;
  transition: background-color var(--motion-duration) var(--motion-ease);
}
.hf-menu__item i, .hf-menu__item svg { width: 16px; height: 16px; flex: none; color: var(--text-quaternary); }
.hf-menu__item:hover { background: var(--bg-primary-hover); color: var(--text-primary); }
.hf-menu__item:hover i, .hf-menu__item:hover svg { color: var(--text-secondary); }
.hf-menu__item:focus-visible { outline: none; background: var(--bg-primary-hover); box-shadow: inset 0 0 0 2px var(--color-brand-300); }
.hf-menu__item--destructive { color: var(--color-red-600); }
.hf-menu__item--destructive i, .hf-menu__item--destructive svg { color: var(--color-red-500); }
.hf-menu__item--destructive:hover { background: var(--color-red-50); color: var(--color-red-700); }
.hf-menu__item--destructive:hover i, .hf-menu__item--destructive:hover svg { color: var(--color-red-600); }

/* Backdrop element kept for API compatibility; full-screen drawer hides it */
.hf-nav-backdrop { display: none; }

/* Kill rail transitions WHILE the viewport is being resized. Otherwise dragging
   across the 768px breakpoint animates width/transform/opacity as the media query
   flips — the drawer appears to flash/slide in and out. Restored after resize
   settles, so click-driven expand/collapse + drawer slides still animate. */
.hf-shell.is-resizing .hf-nav { transition: none !important; }

/* Boot guard — on first paint the persisted expanded/collapsed rail state is
   applied by an inline script BEFORE render (so the rail never flashes collapsed
   then animates open on every navigation). During that boot window transitions
   are suppressed so the correct width snaps in; the class is removed after the
   first frame so user-driven expand/collapse still animates. */
.hf-shell.is-booting .hf-nav,
.hf-shell.is-booting .hf-nav * { transition: none !important; }

/* ===== Responsive: rail → full-screen labeled drawer (≤768px) ========== */
@media (max-width: 768px) {
  /* Rail becomes a full-viewport overlay, off-canvas until opened. */
  .hf-nav {
    position: fixed; top: 0; left: 0;
    width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh;
    border-right: 0;
    z-index: 60;
    /* Pure transform slide — no opacity fade. The closed drawer is already fully
       off-canvas at translateX(-100%), so a fade is redundant; and crossing the
       opacity 1.0 compositing boundary on a 100vw layer is what caused the icons
       to hitch/shift on close. A monotonic translateX can only move left → clean. */
    transform: translateX(-100%);
    transition: transform var(--duration-base) var(--ease-standard);
    box-shadow: none;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  /* Expanded-on-desktop width override must not shrink the mobile drawer. */
  .hf-shell.is-nav-expanded .hf-nav { width: 100vw; }
  .hf-shell.is-nav-open .hf-nav { transform: translateX(0); }
  body.hf-noscroll { overflow: hidden; }             /* scroll-lock behind the drawer */

  /* Drawer header: brand centers across the full width; hamburger morphs to ×. */
  .hf-nav__top {
    justify-content: flex-start;
    padding: 0 var(--spacing-lg);
    min-height: 56px; height: auto;
    position: relative;
  }
  .hf-nav__toggle { width: 40px; height: 40px; z-index: 1; }  /* above the centered brand */
  .hf-nav__toggle svg { width: 20px; height: 20px; }
  .hf-nav__toggle-menu { display: none; }
  .hf-nav__toggle-close { display: flex; }
  .hf-nav__brand {
    display: flex; align-items: center; justify-content: center;
    position: absolute; inset: 0;
    pointer-events: none;                            /* × stays tappable underneath */
  }
  .hf-nav__brand img { height: 26px; width: auto; display: block; }

  /* Items: left-aligned, labeled, roomier tap targets. */
  .hf-nav__item {
    justify-content: flex-start;
    padding: 0 var(--spacing-lg);
    height: 52px;
  }
  .hf-nav__label { display: block; font-size: var(--font-size-text-md); }

  /* "Personal" section divider before the Profile item. */
  .hf-nav__divider {
    display: block;
    margin: var(--spacing-md) var(--spacing-lg) var(--spacing-xs);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-secondary);
    font-family: var(--font-family-body);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-text-xs);
    letter-spacing: .04em; text-transform: uppercase;
    color: var(--text-quaternary);
  }

  /* Avoid two profile entries in the open drawer: the account footer below
     already provides "My Profile", so hide the standalone Profile nav item
     (and its "Personal" divider) on mobile. */
  .hf-nav__personal { display: none; }

  /* Account zone pinned to the bottom of the drawer (auth-aware). */
  .hf-nav__account {
    display: block; flex: none;
    margin-top: auto;
    padding: var(--spacing-lg);
    border-top: 1px solid var(--border-secondary);
  }
  .hf-nav__account-user, .hf-nav__account-anon { display: flex; flex-direction: column; gap: var(--spacing-sm); }
  .hf-nav__account-anon { display: none; }
  .hf-shell.is-anon .hf-nav__account-anon { display: flex; }
  .hf-shell.is-anon .hf-nav__account-user { display: none; }
  .hf-nav__account .hf-btn { width: 100%; justify-content: center; }
  /* Signed-in: the account menu is a COLLAPSIBLE in the drawer footer — a compact
     identity trigger that expands the items on tap, so it doesn't swamp the drawer. */
  .hf-menu__acct-trigger {
    display: flex; align-items: center; gap: var(--spacing-sm);
    width: 100%; padding: var(--spacing-sm) var(--spacing-xs);
    background: none; border: 0; border-radius: var(--radius-md);
    font: inherit; color: inherit; cursor: pointer; text-align: left;
  }
  .hf-menu__acct-trigger:hover { background: var(--bg-primary-hover); }
  .hf-menu__acct-trigger .hf-menu__identity { flex: 1; min-width: 0; padding: 0; }
  .hf-menu__chev { flex: none; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; color: var(--text-quaternary); transition: transform var(--motion-duration) var(--motion-ease); }
  .hf-menu__acct-trigger[aria-expanded="true"] .hf-menu__chev { transform: rotate(180deg); }
  .hf-menu__acct-items[hidden] { display: none; }
  .hf-menu__acct-items .hf-menu__item { padding: var(--spacing-md) var(--spacing-xs); border-radius: var(--radius-sm); }

  /* Header: hamburger appears, profile/utility cluster hides (lives in drawer). */
  .hf-header__hamburger { display: flex; }
  .hf-header__utility { display: none; }
}

/* Divider is drawer-only — never shows on the desktop rail (collapsed OR expanded). */
.hf-nav__divider { display: none; }


/* ===================== components/section.css ===================== */
/* ===========================================================================
   POR 2026 — HIGH-FIDELITY SCAFFOLD: Section (.hf-section)
   ---------------------------------------------------------------------------
   The shared chrome every homepage content block sits in: a max-width container
   with a standard header — accent eyebrow + Recia heading + optional "View all".
   Extracted from the Intelligence block so Intel, the personalized bands,
   Featured Drugs, etc. all reuse ONE header instead of reinventing it.

     .hf-section                 the outer band (white surface, vertical padding)
       .hf-section--ruled        adds a top hairline (Figma section rule)
       .hf-section__inner        centered container (max 1240) + column gap
         .hf-section__head       eyebrow/heading  ⇄  View-all (space-between)
           .hf-section__heading  eyebrow + title stack
             .hf-section__eyebrow  accent 20/600
             .hf-section__title    Recia display, clamps down on mobile
   Tokens only.
   =========================================================================== */

.hf-section { background: var(--bg-primary); padding: var(--spacing-7xl) 0; }   /* 64 top/bottom */
.hf-section--ruled { border-top: 1px solid var(--border-primary); }

.hf-section__inner {
  max-width: 1240px; margin: 0 auto;
  padding: 0 var(--spacing-4xl);                     /* 32 gutter */
  display: flex; flex-direction: column; gap: var(--spacing-3xl);   /* 24 */
}

.hf-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--spacing-xl); }
.hf-section__heading { display: flex; flex-direction: column; }
.hf-section__eyebrow {
  margin: 0;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-semibold);          /* 600 */
  font-size: var(--font-size-text-xl);               /* 20 */
  line-height: var(--line-height-text-xl);           /* 30 */
  color: var(--color-accent-500);                    /* #12a96d */
}
.hf-section__title {
  margin: 0;
  font-family: var(--font-family-display);           /* Recia */
  font-weight: var(--font-weight-regular);
  font-size: clamp(1.75rem, 2.5vw + 1rem, 2.25rem);  /* 28 → 36px */
  line-height: 1.2;
  letter-spacing: -0.72px;
  color: var(--text-primary);
}
.hf-section__head .hf-btn { flex: none; }            /* the View-all button */

/* ---- Variant: --onbrand -------------------------------------------------
   Dark brand band (for a wavy-background CTA section like Browse by Condition):
   brand-800 surface, white heading, and a WHITE UPPERCASE eyebrow (vs the light
   variant's accent eyebrow). Drop an .hf-wavy layer inside; the inner is already
   above it via z-index. Reusable for future dark bands. */
.hf-section--onbrand {
  position: relative; overflow: hidden;              /* clip the wavy layer to the band */
  background: var(--color-brand-800);                /* #0f2b51 */
  border-bottom: 1px solid color-mix(in srgb, var(--color-white) 12%, transparent);
}
.hf-section--onbrand .hf-section__inner { position: relative; z-index: 1; }   /* above .hf-wavy */
.hf-section--onbrand .hf-section__title { color: var(--color-white); }
.hf-section--onbrand .hf-section__eyebrow {
  color: var(--color-white);
  text-transform: uppercase;
  font-size: var(--font-size-text-md);               /* 16 */
  line-height: var(--line-height-text-md);
  font-weight: var(--font-weight-bold);              /* 700 */
  letter-spacing: 0.02em;
}

@media (max-width: 640px) {
  .hf-section { padding: var(--spacing-6xl) 0; }
  .hf-section__inner { padding: 0 var(--spacing-xl); }
  .hf-section__head { flex-direction: column; align-items: flex-start; gap: var(--spacing-lg); }
}


/* ===================== components/breadcrumb.css ===================== */
/* ===========================================================================
   POR 2026 — HIGH-FIDELITY ATOM: Breadcrumb (.hf-breadcrumb)  [GLOBAL]
   ---------------------------------------------------------------------------
   The one breadcrumb trail used across EVERY template (drug/device/directory/
   article/…). Source: Figma breadcrumb (Untitled UI "_Breadcrumb button base"
   crumbs + `slash-divider` 3479:462110). The separator is a SLASH "/", not a dot.

     .hf-breadcrumb            flex trail, DM Mono 14px medium, slight tracking
       a                       a crumb link — brand-green (--text-link), underline on hover
       .hf-breadcrumb__sep     the "/" slash divider (decorative, aria-hidden)
       .hf-breadcrumb__current the leaf / current page — dark "you are here", not a link

   Markup:
     <nav class="hf-breadcrumb" aria-label="Breadcrumb">
       <a href="…">Home</a><span class="hf-breadcrumb__sep" aria-hidden="true">/</span>
       <a href="…">Drugs</a><span class="hf-breadcrumb__sep" aria-hidden="true">/</span>
       <span class="hf-breadcrumb__current" aria-current="page">Libtayo</span>
     </nav>
   Tokens only.
   =========================================================================== */

.hf-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-xs);                         /* 4px between crumb and slash (Figma) */
  /* pull back the first crumb's pill padding so "Home" aligns to the content edge */
  margin: 0 0 0 calc(-1 * var(--spacing-md));
  font-family: var(--font-family-mono);           /* DM Mono — reads as system/wayfinding metadata, ties to source-badge/eyebrow mono voice */
  font-size: var(--font-size-text-sm);            /* 14 */
  line-height: var(--line-height-text-sm);        /* 20 */
  font-weight: var(--font-weight-medium);         /* DM Mono 500 */
  letter-spacing: 0.02em;                         /* very slight tracking */
}

/* Crumb link — part of the brand-green link family; underline on hover (rest is clean
   for the nav trail). Ancestors are the links; the leaf below is the dark "you are here". */
.hf-breadcrumb a {
  color: var(--text-link);                        /* accent-800 #0b7a4d — matches the canonical inline-link color, AA on white */
  text-decoration: none;
  padding: var(--spacing-xs) var(--spacing-md);   /* 4 / 8 — keeps the touch target + vertical rhythm */
  border-radius: var(--radius-sm);                /* 6 */
  transition:
      text-decoration-color var(--motion-duration) var(--motion-ease),
      color                 var(--motion-duration) var(--motion-ease);
}
.hf-breadcrumb a:hover { text-decoration: underline; text-decoration-color: var(--color-accent-400); }
.hf-breadcrumb a:focus-visible { outline: none; box-shadow: var(--focus-ring-brand); }

/* Slash divider "/" — quiet neutral, not interactive. */
.hf-breadcrumb__sep {
  flex: none;
  color: var(--color-neutral-400);                /* #a3a3a3 — a touch more presence than the old #d4d4d4 */
  user-select: none;
}

/* Leaf (current page) — dark "you are here", not a link (the ancestors carry the green). */
.hf-breadcrumb__current {
  padding: var(--spacing-xs) var(--spacing-md);   /* keep vertical rhythm with the links */
  color: var(--text-primary);                     /* neutral-900 — current location, distinct from the green ancestor links */
}


/* ===================== components/hero.css ===================== */
/* ===========================================================================
   POR 2026 — HIGH-FIDELITY PATTERN: Hero (.hf-hero)
   ---------------------------------------------------------------------------
   Source: Figma Hero (node 19165:3743). Taxonomy: "Hero" base + per-page
   instance. First instance: Hero-Home (.hf-hero--home).

   Composition (Figma pixels):
     • layered brand gradient background (--gradient-hero)
     • Wavy_lines graphic behind the copy (Assets/Wavy_lines.svg)
     • heading lockup: 92px logo-symbol + 6px white rule + Recia 72 title + sub
     • search bar: brand-200 border + 9px brand-100 halo, DM Mono placeholder,
       brand Search button (composes .hf-btn--primary)
     • suggestion chips: reuse the .hf-entity-badge atom (accent, arrow)

   Responsive (wireframe plasticity): ≤860px the lockup stacks + centers (logo
   on top, rule dropped, title clamps down); ≤768px the search bar shrinks
   (66→56px) and the button compacts, the placeholder truncates, chips wrap.
   Tokens only.
   =========================================================================== */

.hf-hero {
  position: relative;
  background: var(--gradient-hero);
  padding: var(--spacing-7xl) var(--spacing-6xl);    /* 64 / 48 (doubled L/R so content clears the edges) */
}

/* The wavy background is now the shared .hf-wavy utility (wavy.css); the hero
   markup uses `.hf-wavy .hf-wavy--top` + `.hf-wavy__img`. It clips the graphic to
   the hero WITHOUT clipping the inline search dropdown (which extends below). */

.hf-hero__inner {
  position: relative; z-index: 1;
  max-width: 1240px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--spacing-5xl);                           /* 40px between copy + search */
}

/* ---- Copy: logo + rule + heading ---- */
.hf-hero__copy { position: relative; display: flex; justify-content: center; width: 100%; }
.hf-hero__heading {
  display: flex; align-items: center; gap: var(--spacing-6xl);   /* 48px logo ↔ text */
}
.hf-hero__symbol { flex: none; width: 92px; height: 92px; display: block; }
.hf-hero__symbol img {
  width: 100%; height: 100%; display: block;
  filter: var(--halo-white);   /* white halo lifts the mark off the blue gradient (tokens.css) */
}

.hf-hero__textblock {
  display: flex; flex-direction: column; gap: var(--spacing-3xl);  /* 24px title ↔ sub */
  padding: var(--spacing-3xl) 0 var(--spacing-3xl) var(--spacing-4xl);  /* 24 / 32 left */
  border-left: 6px solid var(--color-white);
}
.hf-hero__title {
  margin: 0;
  font-family: var(--font-family-display);           /* Recia */
  font-weight: var(--font-weight-regular);           /* 400 */
  font-size: clamp(2.5rem, 4vw + 1.5rem, 4.5rem);    /* 40 → 72px fluid */
  line-height: 1.1;
  letter-spacing: -1.44px;
  color: var(--text-brand-primary);                  /* #0b2545 */
  max-width: 24ch;                                    /* wide enough for "Clinical intelligence," on one line */
}
/* Hero eyebrow — the page's H1 in the section-landing anatomy (SEO, 2026-08-27):
   names the site above the display headline; same voice as .hf-section__eyebrow */
.hf-hero__eyebrow { margin: 0 0 var(--spacing-sm); font-family: var(--font-family-body); font-size: var(--font-size-text-xl); font-weight: var(--font-weight-semibold); color: var(--color-white); }   /* matches .hf-section__eyebrow scale (20px); white because the blue wavy band fails accent-green contrast (Chris, 2026-08-27) */

.hf-hero__sub {
  margin: 0;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-regular);           /* was 700 — support line, not a heading (Chris, 2026-08-27) */
  font-size: var(--font-size-text-md);               /* 16px — one step below the 20px eyebrow; distinct on size + weight + color */
  line-height: var(--line-height-text-md);
  letter-spacing: -0.2px;
  color: var(--text-primary);
  max-width: 52ch;
}

/* ---- Search block: bar + chips ---- */
.hf-hero__search {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--spacing-3xl);                           /* 24px bar ↔ chips */
  width: 100%; max-width: 1062px;
  padding: var(--spacing-lg) 0;                      /* 12px */
}

/* The search bar itself is the reusable .hf-searchbar component (searchbar.css),
   composed in the hero markup as `.hf-searchbar hf-searchbar--hero`. Only the
   hero's own LAYOUT (the search column + chips) stays in this file. */

/* Tier-aware blocks — shown/hidden per the active tier via the `hidden` attr
   (JS toggles it). The :not([hidden]) guard restores the right display type. */
.hf-hero__tvar:not([hidden]) { display: flex; flex-direction: column; gap: var(--spacing-3xl); }

.hf-hero__chips { flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--spacing-md); }

/* CANONICAL home-hero modifier (adopted v4.05): "committed asymmetry" — the
   search + chips join the left text column, one alignment grammar; the support
   line is the input's real <label>. Live on home.html; anatomy demo on hero.html. */
/* The heading row is shrink-to-fit by default (no width — the textblock sizes
   to its widest child's INTRINSIC width, i.e. the headline). Open it up: fill
   the 1240 canvas, textblock flexes into the remainder (≈1062), and the
   searchbar's width:100% can finally reach its 1000px cap. (Chris, 2026-08-27) */
.hf-hero--asym .hf-hero__heading { width: 100%; }
.hf-hero--asym .hf-hero__textblock { flex: 1 1 auto; min-width: 0; }
.hf-hero--asym .hf-hero__search { align-items: flex-start; max-width: 1000px; gap: var(--spacing-xl); margin-top: var(--spacing-3xl); padding: 0; }   /* 1000 = the .hf-searchbar atom's canonical cap; lockup ≈1178 inside the 1240 canvas (headline keeps 2 lines via its hard <br>); 24px from headline (3xl); 16px internal rhythm (xl) */
.hf-hero--asym .hf-hero__chips { justify-content: flex-start; }
.hf-hero--asym .hf-hero__searchlabel { max-width: 52ch; cursor: pointer; }
.hf-hero__chips:not([hidden]) { display: flex; }
.hf-hero__chips-label {
  font-family: var(--font-family-body);
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-quaternary);
  margin-right: var(--spacing-xs);
}

/* ===== Responsive ====================================================== */
/* ≤860px — lockup stacks + centers: logo on top, white rule dropped, title clamps. */
@media (max-width: 860px) {
  .hf-hero { padding: var(--spacing-6xl) var(--spacing-4xl); }   /* 32px sides — 16 let the full-width searchbar kiss the rail (Chris, 2026-08-27) */
  .hf-hero__heading { flex-direction: column; gap: var(--spacing-xl); text-align: center; }
  .hf-hero__symbol { width: 64px; height: 64px; }
  .hf-hero__textblock {
    border-left: 0; padding: 0;
    align-items: center; gap: var(--spacing-xl);
  }
  .hf-hero__tvar { align-items: center; }
  .hf-hero__title { max-width: 18ch; }
  .hf-hero__sub { max-width: 46ch; }
  /* Adopted asym hero: the search unit centers with the stacked lockup */
  .hf-hero--asym .hf-hero__search { align-items: center; }
  .hf-hero--asym .hf-hero__chips { justify-content: center; }
  .hf-hero--asym .hf-hero__searchlabel { text-align: center; }
}
/* Searchbar submit collapses to an icon when the BAR is tight (Chris,
   2026-08-19). A container query, not a viewport breakpoint: the same bar
   lives in wide heroes and narrow columns, so its own width is the honest
   trigger (container queries are a sanctioned Standing-Rule-12 exception).
   aria-label="Search" keeps the accessible name through the swap. */
.hf-searchbar__btn-icon { display: none; width: 18px; height: 18px; }
@container (max-width: 440px) {
  .hf-searchbar__bar .hf-btn .hf-btn__label { display: none; }
  .hf-searchbar__bar .hf-btn .hf-searchbar__btn-icon { display: inline-flex; }
}
@media (max-width: 560px) {
  .hf-hero { padding-left: var(--spacing-3xl); padding-right: var(--spacing-3xl); }   /* 24px — phones keep more usable width */
}
/* Hero sub steps down with the viewport (Chris, 2026-08-19/27): 16 → 14 */
@media (max-width: 640px) {
  .hf-hero__sub { font-size: var(--font-size-text-sm); line-height: var(--line-height-text-sm); }
}
/* (The ≤768px search-bar shrink now lives with the --hero variant in searchbar.css.) */


/* ===================== components/drughero.css ===================== */
/* ===========================================================================
   POR 2026 — HIGH-FIDELITY PATTERN: Drug hero (.hf-drughero)
   ---------------------------------------------------------------------------
   The identity band at the top of a Drug detail template. Two variants share
   ONE band skeleton; only the identity slot + a few sponsor-only elements
   differ (source: Figma sponsored drug 19142-1104 + wireframe renderHero).

     .hf-drughero                     light band + bottom hairline
       .hf-drughero__inner            centered container (max 1240, matches sections)
         .hf-breadcrumb               trail atom (NEW — no hi-fi breadcrumb existed)
         .hf-drughero__row            identity (left) + optional banner (right)
           .hf-drughero__identity     the slot that differs by variant
             .hf-drughero__logo       SPONSORED only — sponsor logo lockup
             .hf-drughero__name       the drug name (H1)
             .hf-drughero__generic    generic / class / strength sub-line
           .hf-drughero__banner       optional 728×90 — REUSES .hf-leaderboard frame
         .hf-drughero__attribution    SPONSORED only — quiet sponsor + independence line
         .hf-drughero__chips          Indicated-for / Class / Sponsor chip strip

   Variants:
     .hf-drughero--sponsored   logo lockup ABOVE the generic; attribution line; Sponsor chips
     .hf-drughero--unbranded   no logo, no attribution; typography carries identity

   RESPONSIVE (mirrors the wireframe):
     desktop  identity left / banner right (grid 1fr 728px)
     ≤1024    single column; banner drops below identity (stays 728×90, scrolls)
     ≤768     identity type scales down; chip strip scrolls horizontally
   Save/bookmark deliberately lives in the page rail, not the hero (matches wireframe).
   Tokens only.
   =========================================================================== */

.hf-drughero {
  position: relative;                             /* anchor the .hf-wavy layer */
  overflow: hidden;                               /* clip the wavy graphic to the band */
  background: var(--gradient-drughero);           /* white top → faint blue-tint bottom, behind the wavy */
  /* Figma (node 19142:1287) — the content region carries an 11px brand-400 top accent.
     The hero is full-bleed, so we render that blue band as its bottom border (visually
     identical, and it spans edge-to-edge across every drug template). */
  border-bottom: 11px solid var(--color-brand-400);
  /* CANONICAL: 40px (--spacing-5xl) between the top bar and the breadcrumb — always. */
  padding: var(--spacing-5xl) 0;                     /* 40 top / 40 bottom */
}
.hf-drughero__inner {
  position: relative;                             /* sit above the wavy graphic */
  z-index: 1;
  max-width: 1240px;                              /* content-box (hi-fi default) → 1240 content, SAME as the shell */
  margin: 0 auto;
  padding: 0 var(--spacing-4xl);                  /* 32 gutter — matches the homepage sections + the drug shell */
}

/* ---- Entity-landing variant (indication / class / category landings) ----
   Same hero LAYOUT (identity + leaderboard row, wavy, follow), but the
   PAGE-HERO type voice so entity landings read consistently (Chris,
   2026-08-14 review — indication vs. category side-by-side): the accent
   .hf-section__eyebrow + regular-weight display-lg .hf-section__title
   replace the drug page's caps eyebrow + bold name, and the 11px brand
   band stays a DRUG/manufacturer-page signature — no border here. */
.hf-drughero--entity { border-bottom: 0; }
.hf-drughero--entity .hf-section__title { font-size: var(--font-size-display-lg); line-height: var(--line-height-display-lg); }
/* Reading measure on the description (Chris, 2026-08-14): cap the tagline at
   ~800px — the article reading measure, and what the category page's 64ch
   lede resolves to — so the line length holds on BOTH variants: unsponsored
   (single-column row, would otherwise run the full 1240) and sponsored
   (applies whenever the tagline column exceeds it; the ad keeps its slot). */
.hf-drughero--entity .hf-drughero__tagline { max-width: 800px; }
/* Banner-hero arrangement (Chris, 2026-08-14): beside the 728px leaderboard the
   description became a tall, skinny ~460px column with a void under the ad.
   Canonical arrangement: only the eyebrow + title share the row with the ad;
   the description (+ meta/follow) sits BELOW the row at the full reading
   measure. .hf-drughero__lead is that below-the-row block. */
.hf-drughero--entity .hf-drughero__lead { display: flex; flex-direction: column; gap: var(--spacing-lg); margin-top: var(--spacing-2xl); min-width: 0; }
@media (max-width: 768px) {
  .hf-drughero--entity .hf-section__title { font-size: var(--font-size-display-sm); line-height: var(--line-height-display-sm); }
}

/* Breadcrumb is a GLOBAL atom — see components/breadcrumb.css (slash "/" divider,
   brand-green leaf). Only its spacing WITHIN this band is set here. */
.hf-drughero .hf-breadcrumb { margin-bottom: var(--spacing-4xl); }

/* ----- Hero row: identity + optional banner ----------------------------- */
.hf-drughero__row {
  display: grid;
  container-type: inline-size;                      /* query the hero row's OWN width (drives the split identity below) */
  container-name: drughero-identity;
  /* Banner track = the FRAMED creative's real width: 728 creative + the 10px accent
     frame on EACH side (2×10 = 20) = 748. Reserving only 728 clipped the frame's right
     edge / forced a scrollbar. calc keeps it explicit and tied to the 728 spec. The
     two-column layout only runs >1024px (below that it collapses to one column and the
     .hf-drughero__banner wrap scrolls if the viewport is narrower than the creative). */
  grid-template-columns: minmax(0, 1fr) calc(728px + 20px);
  gap: var(--spacing-6xl);
  align-items: start;
}
.hf-drughero__row.is-no-banner { grid-template-columns: minmax(0, 1fr); }

/* ----- Identity slot ---------------------------------------------------- */
.hf-drughero__identity {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);                          /* 12 */
  min-width: 0;
}

/* Sponsored logo lockup — the sponsor-supplied brand asset, sitting ABOVE the
   typographic name (which is identical to the unbranded variant — sponsored just
   adds this logo). Transparent PNG sits directly on the band (no card). */
.hf-drughero__logo {
  align-self: flex-start;
  line-height: 0;                                  /* kill inline-img gap */
}
.hf-drughero__logo img {                           /* real sponsor asset */
  display: block;
  max-height: 64px;
  max-width: 320px;
  width: auto;
  height: auto;
}
/* Text-wordmark fallback — used only for a branded drug with NO logo asset. */



/* Drug name (H1) — the SAME typographic treatment for both variants. */
.hf-drughero__name {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: var(--font-size-display-md);          /* 36 */
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-display-md);
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.hf-drughero__name sup {
  font-size: 0.4em;
  font-weight: var(--font-weight-regular);
  vertical-align: super;
}
/* Generic / class / strength sub-line */
.hf-drughero__generic {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-text-lg);             /* 18 */
  line-height: var(--line-height-text-lg);
  color: var(--text-tertiary);
}

/* Split identity (SPONSORED) — logo LEFT, name RIGHT, side-by-side, so the hero
   stays compact instead of stacking the logo above the name. The name + generic
   live in .hf-drughero__namewrap so they group on the right; a thin divider
   separates the sponsor logo from the POR-rendered name. Wraps to stacked on
   narrow screens (the divider drops when it wraps). */
.hf-drughero__identity--split {
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-2xl);                         /* 20 between logo and name */
  flex-wrap: wrap;
}
.hf-drughero__identity--split .hf-drughero__logo { flex: none; }
.hf-drughero__namewrap {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);                          /* 4 between name and generic */
  min-width: 0;
  padding-left: var(--spacing-2xl);                /* 20 */
  border-left: 1px solid var(--border-secondary);  /* divider (logo | name) */
}
/* Once the hero is too narrow to hold the logo + drug name side by side, stack
   them and drop the divider. Tied to the component's own width (container query)
   so the divider never lingers on a wrapped line, whatever the name length. */
@container drughero-identity (max-width: 760px) {
  .hf-drughero__identity--split { flex-direction: column; align-items: flex-start; }
  .hf-drughero__namewrap { padding-left: 0; border-left: 0; }
}

/* ----- Optional 728×90 banner — REUSES the leaderboard creative frame ---- */
.hf-drughero__banner {
  overflow-x: auto;                                /* fixed creative; scroll to pan on narrow columns */
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--color-accent-300) transparent;
}
.hf-drughero__banner::-webkit-scrollbar { height: 8px; }
.hf-drughero__banner::-webkit-scrollbar-track { background: transparent; }
.hf-drughero__banner::-webkit-scrollbar-thumb { background: var(--color-accent-300); border-radius: var(--radius-full); }
/* The frame is display:block, so in a two-column hero it fits the fixed 748px banner track — but
   when the hero STACKS (narrative variants, ≤1440px) the banner goes full-width and a block frame
   would stretch, ballooning the green border around a 728px creative. Shrink-wrap it to the creative
   (728 + 2×10 frame = 748) in every layout; on a narrower column it stays 748 and the banner scrolls. */
.hf-drughero__banner .hf-leaderboard__frame { width: max-content; }
.hf-drughero__banner-label {
  margin: var(--spacing-sm) 0 0;
  font-size: var(--font-size-text-xs);             /* 12 */
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-quaternary);
}
/* 728×90 placeholder creative (stands in for the sponsor asset inside the frame) */
.hf-drughero__creative {
  width: 728px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-quaternary);
  background:
    linear-gradient(45deg, transparent 49%, var(--border-secondary) 49.5%, var(--border-secondary) 50.5%, transparent 51%),
    linear-gradient(-45deg, transparent 49%, var(--border-secondary) 49.5%, var(--border-secondary) 50.5%, transparent 51%),
    var(--bg-secondary);
}

/* ----- Sponsor attribution — quiet text line (sponsored only) ----------- */
.hf-drughero__attribution {
  margin: var(--spacing-3xl) 0 0;                     /* 24 (one step down from 32) */
  font-family: var(--font-family-body);
  font-size: var(--font-size-text-sm);
  line-height: var(--line-height-text-sm);
  color: var(--text-tertiary);
}
.hf-drughero__attribution strong { color: var(--text-secondary); font-weight: var(--font-weight-semibold); }
.hf-drughero__attribution span { color: var(--text-quaternary); margin-left: var(--spacing-md); }

/* ----- Chip strip — Indicated-for / Class / Sponsor (reuses .hf-entity-badge) */
/* Related-content module (SEO A2d) — small link cards: More from {Mfr} / Related Articles */
/* PARKED (2026-09-08, v4.47): unused — related content renders as discovery-rail
   modules on unbranded pages; sponsored pages are module-free (MLR). Retirement
   candidate with the drug-content.js `related` renderer. */
.hf-related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-lg); }
.hf-relcard { position: relative; display: flex; flex-direction: column; gap: var(--spacing-xs); padding: var(--spacing-xl); border: 1px solid var(--border-secondary); border-radius: var(--radius-lg); background: var(--bg-primary); text-decoration: none; transition: border-color var(--motion-duration) var(--motion-ease), background-color var(--motion-duration) var(--motion-ease); }
.hf-relcard:hover { border-color: var(--color-accent-500); background: var(--color-accent-50); }
.hf-relcard:focus-visible { outline: none; box-shadow: var(--focus-ring-brand); }
.hf-relcard__name { font-weight: var(--font-weight-semibold); font-size: var(--font-size-text-sm); color: var(--text-primary); padding-right: var(--spacing-3xl); }
.hf-relcard__meta { font-size: var(--font-size-text-xs); color: var(--text-tertiary); }
.hf-relcard__go { position: absolute; top: var(--spacing-lg); right: var(--spacing-lg); color: var(--fg-quaternary); }
.hf-relcard:hover .hf-relcard__go { color: var(--color-accent-600); }
.hf-relcard__go svg { width: 16px; height: 16px; }
@media (max-width: 860px) { .hf-related { grid-template-columns: 1fr; } }

/* Page provenance line (2026-09-08 — POR/SEO decision; dates item resolved for
   FDB + device pages): "Page updated {Month Year} · Source: …" in the SAME type
   voice as the branded page's legal sign-off lines (.hf-drugsec__legal-lines p —
   text-sm, quaternary). Two placements: base (under the hero chip strip) and
   --foot (end of the main content column, rendered by porDrugContent from
   cfg.provenance). Branded/sponsored drug pages do NOT carry it — their MLR
   legal lines are the page's dated identifier. BLOCK flow, no icon (v4.44:
   the history glyph added nothing) — plain text keeps the inline <time>
   flowing naturally. Replaces .hf-drughero__updated, which only ever
   shipped commented out (retired 2026-09-08). */
.hf-provenance { margin: var(--spacing-lg) 0 0; font-size: var(--font-size-text-sm); line-height: var(--line-height-text-xs); color: var(--text-quaternary); }
.hf-provenance--foot { margin: var(--spacing-2xl) 0 0; padding-bottom: var(--spacing-3xl); }   /* v4.45: the line is the main column's LAST child — bottom padding (24, the section rhythm) keeps it off the card's rounded bottom edge; a margin wouldn't paint the card background */

.hf-drughero__chips {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex-wrap: nowrap;
  overflow-x: auto;
  margin: var(--spacing-3xl) 0 0;                     /* 24 (one step down from 32) */
  padding-bottom: var(--spacing-xs);
  scrollbar-width: thin;
  scrollbar-color: var(--color-accent-300) transparent;
}
.hf-drughero__chips::-webkit-scrollbar { height: 8px; }
.hf-drughero__chips::-webkit-scrollbar-thumb { background: var(--color-accent-300); border-radius: var(--radius-full); }
.hf-drughero__chips .hf-entity-badge { flex: none; }        /* never shrink chips */

/* Edge fade — hints there's more offscreen when the strip overflows. Scroll-aware:
   drughero.js sets [data-overflow] to the side(s) with hidden content, so the fade
   shows only where there's more to scroll and disappears once you reach the end.
   The mask fades the container's content to reveal the band behind it (no extra DOM).
   Note: the mask is applied to the visible box, so it stays pinned to the edges while
   the content scrolls underneath. */
.hf-drughero__chips { --hf-chip-fade: var(--spacing-5xl); }   /* 40px fade zone */
.hf-drughero__chips[data-overflow~="right"]:not([data-overflow~="left"]) {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--hf-chip-fade)), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - var(--hf-chip-fade)), transparent);
}
.hf-drughero__chips[data-overflow~="left"]:not([data-overflow~="right"]) {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--hf-chip-fade));
          mask-image: linear-gradient(to right, transparent, #000 var(--hf-chip-fade));
}
.hf-drughero__chips[data-overflow~="left"][data-overflow~="right"] {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--hf-chip-fade), #000 calc(100% - var(--hf-chip-fade)), transparent);
          mask-image: linear-gradient(to right, transparent, #000 var(--hf-chip-fade), #000 calc(100% - var(--hf-chip-fade)), transparent);
}
.hf-drughero__chips-label {
  flex: none;
  font-size: var(--font-size-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--font-weight-semibold);
  color: var(--text-tertiary);
  white-space: nowrap;
}
.hf-drughero__chips-label:not(:first-child) { margin-left: var(--spacing-lg); }

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */
/* Banner drops below the identity (stays a fixed 728×90) until the hero is wide
   enough to hold BOTH without squeezing the title/description. The 728 creative +
   frame is a fixed 748px, and the hero inner caps at 1240 — so the identity only
   gets a comfortable ~380px once the viewport clears ~1300px; below that, stack. */
@media (max-width: 1300px) {
  .hf-drughero__row { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-4xl); }
}
/* NARRATIVE heroes (indication / category / manufacturer) carry a full .hf-drughero__tagline
   paragraph rather than the compact logo+name identity — beside the 728px ad the copy becomes
   a tall, skinny column. Stack them a step SOONER (≤1440px) so the paragraph gets full width;
   compact drug/device heroes keep the 1300px threshold above. :has() scopes it to tagline rows. */
@media (max-width: 1440px) {   /* off-scale: tagline-row stack point (see note above) */
  .hf-drughero__row:has(.hf-drughero__tagline) { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-4xl); }
}

/* Phone — scale the identity type down; tighten the band gutter. */
@media (max-width: 768px) {
  .hf-drughero { padding: var(--spacing-5xl) 0 var(--spacing-4xl); }
  .hf-drughero__inner { padding: 0 var(--spacing-xl); }
  .hf-drughero .hf-breadcrumb { margin-bottom: var(--spacing-3xl); }
  .hf-drughero__name { font-size: var(--font-size-display-sm); }   /* 30 */
  .hf-drughero__logo img { max-height: 52px; }
 /* 24 */
  .hf-drughero__generic { font-size: var(--font-size-text-md); }   /* 16 */
}


/* ===================== components/drugpage.css ===================== */
/* ===========================================================================
   POR 2026 — HIGH-FIDELITY: Drug template layout (.hf-drugpage)  [SKELETON]
   ---------------------------------------------------------------------------
   The structural shell for a Drug detail page, ported 1:1 from the wireframe
   (styles.css .drug-page__shell / .drug-rail / .drug-pi / .drug-aside +
   .drug-mobile-chrome). Both versions (Sponsored + Unbranded) share this shell;
   they differ ONLY in the right column:
       Sponsored  → .hf-isi         (Important Safety Information; special
                                      responsive behavior — see below)
       Unbranded  → .hf-drugpage__aside (discovery card stack; normal flow)

   COLUMN RATIO (desktop ≥1300px), from the wireframe:
       220px  ·  minmax(0,1fr)  ·  360px      gap 40 (--spacing-5xl)
       left rail   main content     right column (~30% intent)

   RESPONSIVE (the critical logic — matches the wireframe breakpoints):
     ≥1300      3-col. Left rail visible. Right column sticky.
     1100–1299  2-col (1fr · 360). Left rail hidden → sticky sub-header
                (.hf-drugpage__subhead: section picker + Actions) appears.
     ≤1099      1-col. SPONSORED ISI converts to a FIXED BOTTOM DRAWER
                (38vh, minimize→104px); page reserves bottom space so content
                clears it. UNBRANDED aside just cascades below main (no drawer).
     ≤768       ISI drawer → 35vh, full width (nav is off-canvas).

   Sticky offsets assume the shared shell: 56px header + 64px collapsed nav rail.
   This pass uses GREYED PLACEHOLDER blocks (.hf-ph) for not-yet-built patterns.
   Tokens only.
   =========================================================================== */

/* ---- Container + 3-column grid ---------------------------------------- */
/* Container: max-width 1240, plain CONTENT-BOX (the hi-fi default, same as the
   homepage sections) → 1240 content, the SAME as the drug hero (drughero.css uses
   identical geometry: max-width 1240, content-box, 32 gutter). Deliberately NOT
   box-sizing:border-box: keeping BOTH the hero and the shell on the plain default
   means the alignment can't break when only one of the two CSS files reloads from
   cache — which is exactly what bit us before. Internal spacing (grid gap, section
   padding) stays tight at 24 (--s-5) per the wireframe; only the CONTAINER gutter
   matches the hero's 32 so their content edges line up. */
.hf-drugpage {
  box-sizing: border-box;
  width: 100%;                                     /* FULL-BLEED: fills the content area edge-to-edge so its background
                                                      fade spans the whole width. Centering now lives on the shell
                                                      below (a full-bleed bg can't come from a max-width container). */
  /* Viewport-tethered bottom fade (see --gradient-page-bottom). `fixed` anchors it to the
     viewport bottom so it's always visible; clipped to this box so it stops at the footer. */
  background-image: var(--gradient-page-bottom);
  background-attachment: fixed;
  background-repeat: no-repeat;
}
.hf-drugpage__shell {
  box-sizing: border-box;                          /* padding counts INSIDE max-width so inner stays 1240 (no overflow) */
  max-width: calc(1240px + 2 * var(--spacing-4xl)); /* 1240 inner + 64 gutter — centering moved here from .hf-drugpage */
  margin: 0 auto;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 360px;   /* left rail · main · right (wireframe) */
  gap: var(--spacing-3xl);                          /* 24 (wireframe --s-5) */
  padding: var(--spacing-6xl) var(--spacing-4xl) var(--spacing-3xl); /* 48 top (Figma spacing-6xl) · 32 gutter · 24 bottom */
  align-items: start;
}

/* ---- Column 1: left rail (Actions + On-this-page anchor nav) ---------- */
.hf-drugpage__rail {
  position: sticky;
  top: calc(56px + var(--spacing-3xl));             /* header 56 + 24 buffer = 80 (wireframe) */
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);                           /* 16 between rail groups (wireframe --s-4) */
  align-self: start;
}

/* ---- Column 2: main content ------------------------------------------ */
.hf-drugpage__main { min-width: 0; background: var(--bg-primary); padding: 0 var(--spacing-3xl); border-bottom-left-radius: var(--radius-xl); border-bottom-right-radius: var(--radius-xl); }   /* white middle column over the page fade (Figma "M" frame: white, 24px side padding); rounded bottom so the panel reads as a card over the fade */
.hf-drugpage__main > section {
  padding: var(--spacing-3xl) 0;                    /* 24 (wireframe --s-5) */
  border-bottom: 1px solid var(--border-primary);
  scroll-margin-top: calc(56px + var(--spacing-3xl));  /* 80 — clear the sticky header on anchor-jump */
}
.hf-drugpage__main > section:first-child { padding-top: 0; }
.hf-drugpage__main > section:last-child { border-bottom: 0; }

/* ==========================================================================
   DRUG MAIN-COLUMN CONTENT PATTERNS (data-driven by drug-content.js)
   Figma Primary column 19142-1289. Authorable blocks: section heading,
   prose (paragraphs + bullets + PI link), resource container (files), legal.
   ========================================================================== */

/* ---- Section — the heading hugs its intro copy; the larger 32px gap is kept
   between distinct content blocks (prose ↔ resource container). Using margins
   (not a uniform flex gap) lets the two relationships differ. -------------- */
.hf-drugsec { display: flex; flex-direction: column; }
.hf-drugsec > * + * { margin-top: var(--spacing-4xl); }        /* 32 between content blocks */
.hf-drugsec__head + * { margin-top: var(--spacing-xl); }       /* 16 — heading sits close to its body copy */
.hf-drugsec__head + .hf-specs { margin-top: var(--spacing-3xl); }   /* 24 — a dense def-list reads as a content block, so it wants more room than prose */

/* ---- Section heading — Recia display-sm + accent diamond (Figma Heading) -- */
.hf-drugsec__head {
  display: flex; align-items: center; gap: var(--spacing-md);
  margin: 0;
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-display-sm);        /* 30 */
  line-height: var(--line-height-display-sm);    /* 38 */
  color: var(--text-primary);
}
.hf-drugsec__diamond {
  flex: none; width: 8px; height: 8px;
  background: var(--color-accent-400);           /* #26dc91 */
  border-radius: var(--radius-xxs);              /* 2 */
  transform: rotate(45deg);
}

/* ---- Prose — 16px paragraphs, optional bullets + PI link ----------------- */
/* Indent prose to align with the HEADING TEXT (past the diamond + its gap), not the diamond. */
.hf-prose { display: flex; flex-direction: column; gap: var(--spacing-lg); padding-left: calc(8px + var(--spacing-md)); }   /* 12 gap · 16 indent */
.hf-prose p { margin: 0; font-size: var(--font-size-text-md); line-height: var(--line-height-text-md); color: var(--text-primary); }
/* Bulleted list — accent DIAMOND markers (Figma 19145-1221), indented a further
   step from the paragraphs; each item may lead with a bold label. */
.hf-prose ul { margin: 0; padding-left: var(--spacing-3xl); list-style: none; display: flex; flex-direction: column; gap: var(--spacing-lg); }
.hf-prose li { position: relative; padding-left: calc(8px + var(--spacing-md)); font-size: var(--font-size-text-md); line-height: var(--line-height-text-md); color: var(--text-primary); }
.hf-prose ul li::before {
  content: ""; position: absolute; left: 1px; top: 9px;   /* smaller text bullet (6px) than the 8px section-heading diamond; top:9 centers it on the first text line */
  width: 6px; height: 6px; background: var(--color-accent-400); border-radius: var(--radius-xxs); transform: rotate(45deg);
}
/* Numbered list — the ordered-list sibling of the bulleted list. A filled accent circle
   carries the count (tabular figures; the pill widens for 2-digit numbers). Items may lead
   with a bold label, same as the bulleted list. */
.hf-prose ol { margin: 0; padding-left: var(--spacing-3xl); list-style: none; display: flex; flex-direction: column; gap: var(--spacing-lg); counter-reset: hf-ol; }
.hf-prose ol li { counter-increment: hf-ol; padding-left: var(--spacing-4xl); }
.hf-prose ol li::before {
  content: counter(hf-ol); position: absolute; left: 0; top: 1px;
  min-width: 20px; height: 20px; padding: 0 var(--spacing-sm); box-sizing: border-box;
  border-radius: var(--radius-full); background: var(--text-link); color: var(--text-white);
  font-size: var(--font-size-text-xs); font-weight: var(--font-weight-semibold); line-height: 20px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.hf-prose strong { font-weight: var(--font-weight-bold); }
/* A bold lead-in a step larger than body — e.g. "Dosage Forms and Strengths:". */
.hf-prose__lead { font-weight: var(--font-weight-bold); font-size: var(--font-size-text-lg); line-height: var(--line-height-text-lg); }
/* ==========================================================================
   CANONICAL inline text link — brand-green + underline. Use .hf-link for any
   link that sits in body copy / prose. Navigational & chrome links keep their
   own patterns (breadcrumb trail, on-page nav, card titles, dark footer, and
   the deliberately un-branded search-answer citations).
   ========================================================================== */
.hf-link { color: var(--text-link); text-decoration: underline; }
.hf-link:hover { text-decoration-color: var(--color-accent-400); }

/* Body-copy containers: BARE anchors inherit the canonical link treatment
   automatically (2026-08-27, Chris — the hub intro notes' links were rendering
   browser-default blue). Prefer class="hf-link" on new links; this rule is the
   safety net so no prose link can ever fall through to user-agent styling. */
.hf-perso-note a, .hf-prose a, .hf-empty__text a,
.hf-pagehero__lede a, .hf-article-sources__note a {
  color: var(--text-link); text-decoration: underline;
}
.hf-perso-note a:hover, .hf-prose a:hover, .hf-empty__text a:hover,
.hf-pagehero__lede a:hover, .hf-article-sources__note a:hover {
  text-decoration-color: var(--color-accent-400);
}

/* External-link modifier (SEO A7 canonical): any link leaving POR carries the
   external-link icon inline after the text, opens a new tab (target="_blank"
   rel="noopener"), and appends an .sr-only "(opens in new tab)" for AT.
   The icon rides the text as an inline svg so long titles wrap naturally. */
.hf-link--ext svg { display: inline-block; width: 13px; height: 13px; margin-left: 0.3em; vertical-align: -0.125em; }
.hf-prose__link { align-self: flex-start; color: var(--text-link); text-decoration: underline; font-size: var(--font-size-text-md); line-height: var(--line-height-text-md); }
.hf-prose__link:hover { text-decoration-color: var(--color-accent-400); }

/* ---- Data table — navy header + brand-tint zebra (biosimilars · dosing · codes) ----
   Header: brand-solid navy + white label, matching the resource container / in-page
   nav header language. Body: bold primary key column + secondary cells, zebra rows
   on brand-50 (even). Status/system cells reuse the Badge atom. Optional group
   sub-header row (lighter brand-100) + optional --linked hover. RESPONSIVE: horizontal scroll inside
   the table's own wrapper with a CSS-only scroll shadow (background-attachment:
   local) that appears ONLY when the table overflows — no JS, no column-hiding. */
.hf-table__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-md);
  background:
    linear-gradient(to right, var(--bg-primary) 30%, transparent) 0 0 / 40px 100% no-repeat,
    linear-gradient(to left,  var(--bg-primary) 30%, transparent) 100% 0 / 40px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--color-neutral-900) 12%, transparent), transparent) 0 0 / 16px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--color-neutral-900) 12%, transparent), transparent) 100% 0 / 16px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}
.hf-table { width: 100%; min-width: 30rem; border-collapse: collapse; background: var(--bg-primary); font-size: var(--font-size-text-sm); line-height: var(--line-height-text-sm); }
.hf-table th {
  text-align: left; padding: var(--spacing-md) var(--spacing-lg);
  background: var(--bg-brand-solid); color: var(--text-on-brand);   /* navy header (#194689) — system container language */
  font-size: var(--font-size-text-xs); font-weight: var(--font-weight-semibold);
  text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap;
}
.hf-table td { padding: var(--spacing-md) var(--spacing-lg); color: var(--text-secondary); vertical-align: top; }
.hf-table td:first-child { color: var(--text-primary); font-weight: var(--font-weight-semibold); }
/* Zebra striping — even data rows take a faint brand-50 tint (odd stay white) so the
   rows feel connected to the navy header; the stripes carry row separation (no dividers). */
.hf-table tbody tr:nth-child(even):not(.hf-table__group) td { background: var(--color-brand-50); }
/* Group sub-header row (e.g. codes grouped by indication) — a LIGHTER brand-100 tint
   (so it reads as a secondary header under the navy one), brand-700 label, brand-200
   top rule. Higher specificity than the bold first-column rule so its colspan cell wins. */
.hf-table tr.hf-table__group td { background: var(--color-brand-100); color: var(--color-brand-700); font-weight: var(--font-weight-semibold); font-size: var(--font-size-text-xs); text-transform: uppercase; letter-spacing: 0.04em; border-top: 1px solid var(--color-brand-200); }
.hf-table tr.hf-table__group:first-child td { border-top: 0; }
/* Linked tables (rows navigate) — accent-tint row hover, overrides the zebra fill. */
.hf-table--linked tbody tr:not(.hf-table__group) { cursor: pointer; }
.hf-table--linked tbody tr:not(.hf-table__group):hover td { background: var(--color-accent-50); }
/* Code cell — CANONICAL. A billing/diagnosis code is a monospace identifier, so it renders in the
   mono face (DM Mono) in the ink color, not the inline-link green (it's an identifier, not prose).
   Used in the Code Finder table + the "Top codes searched" table. NOT for the Conditions system,
   whose first column holds condition NAMES (prose) — those stay in the body face. */
.hf-codecell { font-family: var(--font-family-mono); font-weight: var(--font-weight-medium); white-space: nowrap; color: var(--text-primary); text-decoration: none; }
a.hf-codecell:hover { text-decoration: underline; }
/* Caption / source line under the table. */
.hf-table__caption { margin: var(--spacing-md) 0 0; font-size: var(--font-size-text-xs); color: var(--text-quaternary); }
/* Sortable variant — clickable column headers with a sort-direction chevron (used by the
   Profile saves/following tables; reusable on any .hf-table). Icons sit on the navy header. */
.hf-table--sortable th[data-sort-col] { cursor: pointer; user-select: none; }
.hf-table--sortable th[data-sort-col]:hover { background: color-mix(in srgb, var(--text-on-brand) 12%, var(--bg-brand-solid)); }
.hf-table__sort-i { width: 13px; height: 13px; vertical-align: middle; margin-left: 2px; opacity: 0.55; }
.hf-table__sort-i.is-active { opacity: 1; }

/* ---- In-content tabs — reuse the Tabs atom (.hf-tabs / .hf-tab, green-tint
   active + count badges). Panels render EXISTING blocks (prose, table…), so a tab
   can hold anything — a Fotivda dosing tab is the data table. Used for Dosing /
   Precautions, and the chrome the severity tabs build on. Switching: drug-content.js. */
.hf-drugsec__tabgroup { display: flex; flex-direction: column; gap: var(--spacing-xl); margin-left: calc(8px + var(--spacing-md)); }   /* align tab bar + panels with the prose text edge (past the heading diamond) */
.hf-drugsec__tabpanel { display: flex; flex-direction: column; gap: var(--spacing-lg); }
.hf-drugsec__tabpanel[hidden] { display: none; }
.hf-drugsec__tabpanel > .hf-prose { padding-left: 0; }   /* panel already indented by the tabgroup */

/* Top-level tables + stubs share the prose left edge too, so ALL main-column
   content (prose · table · tabs) aligns on one line with the heading text.
   (In-panel tables inherit the tabgroup's indent, so they're not matched here.) */
.hf-drugsec > .hf-table__scroll,
.hf-drugsec > .hf-table__caption,
.hf-drugsec > .hf-ph,
.hf-drugsec > .hf-rows,
.hf-drugsec > .hf-specs,
.hf-drugsec > .hf-ailit { margin-left: calc(8px + var(--spacing-md)); }

/* ---- AI-literature card — the drug "Today's intelligence" synthesis. Mirrors
   the search ambient-answer language (neutral surface, brand-pill citation sups),
   reusing the Badge atom for sources + entity-badge for brands. A sparkles header
   signals AI synthesis; each item is body → brand chips → sources + meta. */
.hf-ailit { background: var(--bg-secondary); border: 1px solid var(--border-secondary); border-radius: var(--radius-xl); padding: var(--spacing-xl); display: flex; flex-direction: column; gap: var(--spacing-xl); }
.hf-ailit__head { display: flex; align-items: center; gap: var(--spacing-sm); font-size: var(--font-size-text-xs); text-transform: uppercase; letter-spacing: 0.06em; font-weight: var(--font-weight-semibold); color: var(--text-tertiary); }
.hf-ailit__head svg { flex: none; width: 15px; height: 15px; color: var(--icon-fg-accent); }
.hf-ailit__item { display: flex; flex-direction: column; gap: var(--spacing-lg); }
.hf-ailit__item + .hf-ailit__item { border-top: 1px solid var(--border-secondary); padding-top: var(--spacing-xl); }
.hf-ailit__body { margin: 0; font-size: var(--font-size-text-md); line-height: var(--line-height-text-lg); color: var(--text-primary); }
/* .hf-ailit__body sup — styled by the canonical citation-chip rule near .hf-search__answer sup. */
.hf-ailit__chips { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); }
.hf-ailit__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-sm); }
/* Clickable citation superscript — opens the sources list + jumps to the ref. */
.hf-ailit__cite { cursor: pointer; }
.hf-ailit__cite:hover { background: var(--color-brand-200); }
.hf-ailit__cite:focus-visible { outline: none; box-shadow: var(--focus-ring-brand); }
/* Collapsible "N sources · when" disclosure. */
.hf-ailit__toggle { display: inline-flex; align-items: center; gap: var(--spacing-xs); padding: 0; background: none; border: 0; font-family: var(--font-family-body); font-size: var(--font-size-text-sm); font-weight: var(--font-weight-medium); color: var(--text-secondary); cursor: pointer; }
.hf-ailit__toggle svg { flex: none; width: 16px; height: 16px; transition: transform var(--motion-duration) var(--motion-ease); }
.hf-ailit__toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
.hf-ailit__toggle:hover { color: var(--text-primary); }
.hf-ailit__toggle:focus-visible { outline: none; box-shadow: var(--focus-ring-brand); border-radius: var(--radius-sm); }
.hf-ailit__when { color: var(--text-quaternary); font-weight: var(--font-weight-regular); }
/* Numbered reference list (the "how users see sources"). */
.hf-ailit__sources { list-style: none; margin: var(--spacing-md) 0 0; padding: var(--spacing-md) 0 0; border-top: 1px solid var(--border-secondary); display: flex; flex-direction: column; gap: var(--spacing-md); }
.hf-ailit__sources[hidden] { display: none; }
.hf-ailit__ref { display: flex; align-items: flex-start; gap: var(--spacing-md); font-size: var(--font-size-text-sm); line-height: var(--line-height-text-sm); }
.hf-ailit__ref-num { flex: none; width: 18px; height: 18px; margin-top: 1px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-xxs); background: var(--color-brand-100); color: var(--color-brand-700); font-size: var(--font-size-text-xxs); font-weight: var(--font-weight-medium); transition: background-color var(--motion-duration) var(--motion-ease), color var(--motion-duration) var(--motion-ease); }   /* radius matches the in-text citation chip — one shape for marker + row number */
.hf-ailit__ref-body { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: var(--spacing-md); }
.hf-ailit__ref-title { flex: 1; min-width: 0; color: var(--text-secondary); }
.hf-ailit__ref-cite { display: block; margin-top: 2px; font-size: var(--font-size-text-xs); color: var(--text-tertiary); }
.hf-ailit__ref.is-target .hf-ailit__ref-num { background: var(--color-accent-500); color: var(--text-white); }

/* Shared AI-callout sub-elements (used by the --quickread skin; available to any
   .hf-ailit instance): a bulleted summary and a small AI-attribution footnote. */
.hf-ailit__list { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: var(--spacing-sm); }
.hf-ailit__list li { font-size: var(--font-size-text-sm); line-height: var(--line-height-text-md); color: var(--text-secondary); }
.hf-ailit__note { display: flex; align-items: center; gap: var(--spacing-xs); margin: 0; font-size: var(--font-size-text-xs); color: var(--text-tertiary); }
.hf-ailit__note svg { flex: none; width: 13px; height: 13px; color: var(--icon-fg-accent); }

/* Skin: quick-read (article reading template). Same AI-callout base, accent-tinted
   with a left keyline. No header — just the takeaways + a small AI-attribution line. */
.hf-ailit--quickread { border-color: var(--color-accent-200); border-left: 4px solid var(--color-accent-400); background: var(--bg-accent); border-radius: var(--radius-md); padding: var(--spacing-xl) var(--spacing-2xl); gap: var(--spacing-md); margin: 0 0 var(--spacing-4xl); }

/* ---- Rows — structured lists inside the severity tabs (Interactions /
   Contraindications / Adverse reactions). Three shapes from one block:
   name-only lists (accent-diamond, multi-column for density), name+detail
   definition rows, and grouped lists (a label + its list). */
.hf-rows { display: flex; flex-direction: column; gap: var(--spacing-lg); }
.hf-rows--grouped { gap: var(--spacing-2xl); }
/* Name-only list — diamond markers; multi-column auto-fits (2-up wide, 1-up narrow). */
.hf-rows__list { margin: 0; padding: 0; list-style: none; }
.hf-rows__list--cols { column-width: 14rem; column-gap: var(--spacing-4xl); }
.hf-rows__li { position: relative; padding-left: calc(8px + var(--spacing-md)); margin-bottom: var(--spacing-md); font-size: var(--font-size-text-sm); line-height: var(--line-height-text-sm); color: var(--text-primary); break-inside: avoid; }   /* text-sm — matches the interaction detail lines */
.hf-rows__li:last-child { margin-bottom: 0; }
.hf-rows__li::before { content: ""; position: absolute; left: 1px; top: 7px; width: 6px; height: 6px; background: var(--color-accent-400); border-radius: var(--radius-xxs); transform: rotate(45deg); }   /* 6px text bullet, top:7 centers on the text-sm line */
/* Name + detail definition rows (interactions) — bold name over a detail paragraph. */
.hf-rows__row { padding: var(--spacing-md) 0; border-top: 1px solid var(--border-secondary); }
.hf-rows__row:first-child { border-top: 0; padding-top: 0; }
.hf-rows__name { margin: 0; font-size: var(--font-size-text-md); line-height: var(--line-height-text-md); font-weight: var(--font-weight-semibold); color: var(--text-primary); }
.hf-rows__detail { margin: var(--spacing-xs) 0 0; font-size: var(--font-size-text-sm); line-height: var(--line-height-text-sm); color: var(--text-secondary); }
/* Grouped list — an uppercase severity-frequency label over its list. */
.hf-rows__group { display: flex; flex-direction: column; gap: var(--spacing-md); }
.hf-rows__group-label { margin: 0; font-size: var(--font-size-text-sm); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); }

/* ---- Manufacturer sign-off (SPONSORED) — Figma 19145-5338 ----------------
   A thick 4px top rule + 64px of space, the SWAPPABLE manufacturer logo (200×22),
   then the copyright + med-legal compliance ID. The logo changes per sponsor. */
.hf-drugpage__main > section.hf-drugsec__legal {
  border-top: 4px solid var(--border-secondary);
  padding-top: var(--spacing-7xl);              /* 64 */
  display: flex; flex-direction: column; gap: var(--spacing-lg);   /* 12 — logo → text */
}
.hf-drugpage__main > section:has(+ .hf-drugsec__legal) { border-bottom: 0; }   /* drop the 1px divider directly above the sign-off */
.hf-drugsec__legal img { height: 22px; width: auto; align-self: flex-start; }
.hf-drugsec__legal-lines { display: flex; flex-direction: column; gap: var(--spacing-sm); }   /* 6 between lines */
.hf-drugsec__legal-lines p { margin: 0; font-size: var(--font-size-text-sm); line-height: var(--line-height-text-xs); color: var(--text-quaternary); }

/* ==========================================================================
   Resource container — collapsible box of files (Figma Resource Container
   19143-63531). Header states: solid navy (collapsed) / darker section-subtle
   (open). Count badge, hover "Share all", audience sub-tabs, file rows.
   ========================================================================== */
.hf-resources { display: flex; flex-direction: column; gap: var(--spacing-xl); }   /* stack of boxes */
.hf-resource { width: 100%; }
.hf-resource__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-lg);
  box-sizing: border-box; width: 100%;           /* keep padding + border INSIDE the container width */
  padding: var(--spacing-3xl);                   /* 24 */
  background: var(--bg-brand-solid);             /* #194689 (collapsed) */
  border: 1px solid var(--border-brand-alt);     /* #194689 */
  border-radius: var(--radius-xl);
  color: var(--text-white);
  transition: background-color var(--motion-duration) var(--motion-ease), border-radius var(--motion-duration) var(--motion-ease);
}
.hf-resource.is-open .hf-resource__head {
  background: var(--bg-brand-section-subtle);    /* #13315c (open) */
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
/* The toggle spans most of the header (button reset); Share is a sibling button. */
.hf-resource__head-l {
  display: flex; align-items: center; gap: var(--spacing-lg); min-width: 0; flex: 1;
  background: none; border: 0; padding: 0; font: inherit; color: var(--text-white);
  text-align: left; cursor: pointer;
}
.hf-resource__head-l:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-brand-300); border-radius: var(--radius-sm); }
.hf-resource__toggle { flex: none; width: 24px; height: 24px; display: inline-flex; color: var(--text-white); }
.hf-resource__toggle svg { width: 24px; height: 24px; }
.hf-resource__title { min-width: 0; font-size: var(--font-size-text-md); font-weight: var(--font-weight-semibold); line-height: var(--line-height-text-sm); color: var(--text-white); }
/* Resource header total count → the canonical .hf-count. */
/* Share all — the Button component (.hf-btn--secondary --xs); this class only adds
   the header hover/focus reveal + slide-in. */
.hf-resource__share {
  flex: none; opacity: 0; transform: translateX(4px);
  transition: opacity var(--motion-duration) var(--motion-ease), transform var(--motion-duration) var(--motion-ease), background-color var(--motion-duration) var(--motion-ease);
}
.hf-resource__head:hover .hf-resource__share,
.hf-resource__head:focus-within .hf-resource__share,
.hf-resource__share:focus-visible { opacity: 1; transform: translateX(0); }
@media (hover: none) { .hf-resource__share { opacity: 1; transform: none; } }   /* touch: always show */

/* Open body */
.hf-resource__body {
  display: none;
  box-sizing: border-box; width: 100%;           /* padding + border stay inside the width */
  padding: var(--spacing-3xl);
  background: var(--bg-primary);
  border: 1px solid var(--border-secondary); border-top: 0;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}
.hf-resource.is-open .hf-resource__body { display: block; }
/* Audience sub-tabs (shown only when >1 group) */
.hf-resource__tabs { display: flex; gap: var(--spacing-lg); border-bottom: 1px solid var(--border-secondary); margin-bottom: var(--spacing-xl); }
.hf-resource__tab {
  display: flex; align-items: center; gap: var(--spacing-sm);
  padding: 0 var(--spacing-xxs) var(--spacing-lg);
  background: none; border: 0; border-bottom: 2px solid transparent;
  cursor: pointer; font-family: var(--font-family-body);
  font-size: var(--font-size-text-sm); font-weight: var(--font-weight-semibold);
  color: var(--text-quaternary);
}
.hf-resource__tab.is-active { color: var(--text-brand-secondary); border-bottom-color: var(--color-brand-600); }
/* Resource sub-tab count → the canonical .hf-count (always brand-blue). */
/* File list + rows — a clickable main link + a hover-revealed Share button. */
.hf-resource__list { display: flex; flex-direction: column; }
.hf-resource__list[hidden] { display: none; }
.hf-resource__file {
  display: flex; align-items: center; gap: var(--spacing-lg);
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--border-secondary);
  transition: background-color var(--motion-duration) var(--motion-ease);
}
.hf-resource__file:last-child { border-bottom: 0; }
.hf-resource__file:hover { background: var(--bg-primary-hover); }
.hf-resource__file-main { display: flex; align-items: center; gap: var(--spacing-lg); flex: 1; min-width: 0; text-decoration: none; color: inherit; }
.hf-resource__file-main:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--color-brand-300); border-radius: var(--radius-sm); }
.hf-resource__thumb {
  position: relative;                            /* anchor the lock badge */
  flex: none; width: 120px; height: 80px;
  border: 1px solid var(--border-secondary); border-radius: var(--radius-xs);
  overflow: hidden; background: var(--bg-secondary);
  display: flex; align-items: center; justify-content: center; color: var(--text-quaternary);
}
.hf-resource__thumb img { width: 100%; height: 100%; object-fit: cover; }
.hf-resource__thumb svg { width: 28px; height: 28px; }
/* Lock badge — corner overlay, shown ONLY to anonymous users on locked files. */
.hf-resource__lock {
  position: absolute; right: 4px; bottom: 4px;
  display: none; width: 22px; height: 22px;
  align-items: center; justify-content: center;
  border-radius: var(--radius-full);
  background: var(--warning); color: var(--text-white);   /* amber warning, not black */
  box-shadow: var(--shadow-xs);
}
.hf-resource__lock svg { width: 12px; height: 12px; }
.hf-drugpage__main.is-anon .hf-resource__file[data-locked="true"] .hf-resource__lock { display: flex; }
.hf-resource__file-text { min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-sm); }
.hf-resource__file-title { font-size: var(--font-size-text-sm); line-height: var(--line-height-text-xs); color: var(--text-primary); }
/* Quiet corner timestamp — same voice as page provenance (xs quaternary) */
.hf-resource__file { position: relative; }
.hf-resource__file-updated { position: absolute; top: var(--spacing-md); right: var(--spacing-lg); font-size: var(--font-size-text-xs); color: var(--text-quaternary); }
@media (max-width: 640px) { .hf-resource__file-updated { display: none; } }   /* phones: rows too tight for a corner stamp */

/* One-line resource description (SEO A2) — visible even on gated rows */
.hf-resource__file-desc {
  display: block; font-size: var(--font-size-text-xs); color: var(--text-tertiary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 62ch;
  /* A button, not a span (2026-08-27): tap/click expands the clamp — touch parity
     for the native title tooltip. Reset the button chrome; keep the text look. */
  appearance: none; background: none; border: 0; padding: 0; margin: 0;
  font-family: var(--font-family-body); text-align: left; cursor: pointer; line-height: var(--line-height-text-xs);
}
.hf-resource__file-desc.is-expanded { white-space: normal; overflow: visible; text-overflow: clip; }

.hf-resource__file-meta { display: flex; align-items: center; gap: var(--spacing-xs); font-size: var(--font-size-text-sm); line-height: var(--line-height-text-xs); color: var(--text-quaternary); }
.hf-resource__file-meta svg { flex: none; width: 14px; height: 14px; }
/* Per-file Share button — the Button component (.hf-btn--secondary --xs); this
   class only adds the row-hover reveal. */
.hf-resource__file-share {
  flex: none; opacity: 0;
  transition: opacity var(--motion-duration) var(--motion-ease), background-color var(--motion-duration) var(--motion-ease);
}
.hf-resource__file:hover .hf-resource__file-share,
.hf-resource__file-share:focus-visible { opacity: 1; }
@media (hover: none) { .hf-resource__file-share { opacity: 1; } }   /* touch: always visible */
/* Locked files: for ANON users, swap Share → the "Register to View" CTA (the
   Button component .hf-btn--primary --xs), routing to the register flow.
   Signed-in users get Share instead. Hover-revealed like Share. */
.hf-resource__file-register {
  flex: none; display: none; opacity: 0;
  transition: opacity var(--motion-duration) var(--motion-ease), background-color var(--motion-duration) var(--motion-ease);
}
/* Deliberate deviation from the secondary button: the lock icon is WARNING (amber),
   not the usual accent green — it signals the gate. */
.hf-resource__file-register .hf-btn__icon { color: var(--icon-warning); }
.hf-drugpage__main.is-anon .hf-resource__file[data-locked="true"] .hf-resource__file-share { display: none; }
.hf-drugpage__main.is-anon .hf-resource__file[data-locked="true"] .hf-resource__file-register { display: inline-flex; }
.hf-resource__file:hover .hf-resource__file-register,
.hf-resource__file-register:focus-visible { opacity: 1; }
@media (hover: none) { .hf-resource__file-register { opacity: 1; } }   /* touch: always visible */

/* Responsive — tighten the file row on narrow columns/mobile. */
@media (max-width: 560px) {
  .hf-resource__head { padding: var(--spacing-xl); }
  .hf-resource__body { padding: var(--spacing-xl); }
  .hf-resource__thumb { width: 84px; height: 56px; }
  .hf-resource__file { gap: var(--spacing-md); }
  .hf-resource__file-share .hf-btn__label,
  .hf-resource__file-register .hf-btn__label { display: none; }   /* icon-only on small screens */
}

/* ==========================================================================
   Share resource modal — a METHOD PICKER (Figma / wireframe). Copy link is
   always available; Email / Print / Download are gated for anonymous users
   (a "Sign in" pill + a footnote). Reuses the .hf-modal shell.
   ========================================================================== */
.hf-share .hf-modal__panel { max-width: 460px; padding: 0; overflow: hidden; }
.hf-share__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spacing-lg); padding: var(--spacing-3xl) var(--spacing-3xl) var(--spacing-xl); background: var(--gradient-modal-head); border-bottom: 1px solid var(--border-primary); }
.hf-share__heading { min-width: 0; }
/* Purpose eyebrow — mirrors the inquiry modal header (eyebrow = purpose, title = subject). */
.hf-share__eyebrow { margin: 0 0 2px; font-size: var(--font-size-text-xs); text-transform: uppercase; letter-spacing: 0.08em; font-weight: var(--font-weight-semibold); color: var(--text-brand-secondary); }
.hf-share__title { margin: 0; font-family: var(--font-family-display); font-size: var(--font-size-display-xs); font-weight: var(--font-weight-medium); line-height: var(--line-height-display-xs); color: var(--text-primary);
  /* Long resource names clamp to two lines with an ellipsis (full name via title attr). */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.hf-share__close { flex: none; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; border-radius: var(--radius-md); color: var(--text-tertiary); cursor: pointer; transition: background-color var(--motion-duration) var(--motion-ease), color var(--motion-duration) var(--motion-ease); }
.hf-share__close:hover { background: var(--color-accent-50); color: var(--text-primary); }   /* accent-tint hover (borderless family) */
.hf-share__close:focus-visible { outline: none; box-shadow: var(--focus-ring-brand); }
.hf-share__close svg { width: 20px; height: 20px; }
.hf-share__options { display: flex; flex-direction: column; padding: var(--spacing-sm) var(--spacing-lg); }
.hf-share__option { display: flex; align-items: center; gap: var(--spacing-lg); width: 100%; padding: var(--spacing-lg); background: none; border: 0; border-radius: var(--radius-md); text-align: left; cursor: pointer; transition: background-color var(--motion-duration) var(--motion-ease); }
/* Unlocked hover mirrors the app-nav icon buttons: accent-50 row tint + the icon
   circle "lights up" (accent border + compact accent glow + accent-blue icon). */
.hf-share__option:not(.hf-share__option--locked):hover { background: var(--color-accent-50); }
.hf-share__option:not(.hf-share__option--locked):hover .hf-share__option-icon {
  border-color: var(--color-accent-500);
  color: var(--icon-fg-accent);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--color-accent-500) 18%, transparent),
              0 4px 12px color-mix(in srgb, var(--color-accent-400) 26%, transparent);
}
/* Locked options stay neutral — they route to the auth gate, not the action. */
.hf-share__option--locked:hover { background: var(--bg-primary-hover); }
.hf-share__option:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--color-brand-300); }
/* All method icons share ONE neutral color (Copy is no longer singled out green). */
.hf-share__option-icon { flex: none; width: 40px; height: 40px; border-radius: var(--radius-full); border: 1px solid var(--border-secondary); background: var(--bg-primary); display: flex; align-items: center; justify-content: center; color: var(--text-tertiary); box-shadow: var(--shadow-xs); transition: border-color var(--motion-duration) var(--motion-ease), box-shadow var(--motion-duration) var(--motion-ease), color var(--motion-duration) var(--motion-ease); }
.hf-share__option-icon svg { width: 18px; height: 18px; }
.hf-share__option-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hf-share__option-label { display: flex; align-items: center; gap: var(--spacing-sm); font-size: var(--font-size-text-md); font-weight: var(--font-weight-semibold); color: var(--text-primary); }
.hf-share__option-detail { font-size: var(--font-size-text-sm); line-height: var(--line-height-text-sm); color: var(--text-tertiary); }
/* Lock / "Sign in required" badge (REUSABLE PATTERN) — a warning-tinted chip
   with a lock icon, marking a gated action (share methods that need sign-in, a
   locked resource, etc.). All colours route through the warning tokens. */
.hf-lock-badge {
  display: inline-flex; align-items: center; gap: var(--spacing-xs);
  padding: var(--spacing-xxs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  background: var(--bg-warning-subtle); border: 1px solid var(--border-warning);
  color: var(--text-warning);
  font-size: var(--font-size-text-xs); font-weight: var(--font-weight-medium); line-height: var(--line-height-text-xs);
  white-space: nowrap;
}
.hf-lock-badge svg { width: 12px; height: 12px; }
.hf-lock-badge.is-nudge { animation: hf-lock-nudge 260ms var(--motion-ease); }
@keyframes hf-lock-nudge { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.12); background: var(--color-amber-100); border-color: var(--color-amber-400); } }
.hf-share__footnote { display: flex; align-items: flex-start; gap: var(--spacing-sm); margin: 0; padding: var(--spacing-md) var(--spacing-3xl) var(--spacing-3xl); font-size: var(--font-size-text-sm); line-height: var(--line-height-text-sm); color: var(--text-tertiary); }

/* ---- Video player modal (v4.49 — design round item 2) --------------------
   THE canonical player for video-type resource rows on drug + device pages —
   drug-content.js opens it instead of following the row's dead href. Reuses
   the .hf-modal shell AND the share modal's head grammar (.hf-share__head /
   __eyebrow / __title / __close — that head is the generic resource-modal
   head, not share-specific). The 16:9 stage is a prototype placeholder: dark
   surface, optional poster, centered play affordance, duration chip.
   Production swaps the stage contents for the real embed (Vimeo/native).
   NOT yet wired: manufacturer-page video rows (different renderer). */
.hf-videomodal .hf-modal__panel { max-width: 760px; width: 100%; padding: 0; overflow: hidden; }
.hf-videomodal__stage { position: relative; aspect-ratio: 16 / 9; background: var(--color-gray-950); display: flex; align-items: center; justify-content: center; }
.hf-videomodal__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.hf-videomodal__play { position: relative; z-index: 1; width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center; background: var(--color-white); border: 0; border-radius: var(--radius-full); color: var(--color-accent-800); cursor: pointer; box-shadow: var(--shadow-lg); transition: transform var(--motion-duration) var(--motion-ease); }
.hf-videomodal__play:hover { transform: scale(1.06); }
.hf-videomodal__play:focus-visible { outline: none; box-shadow: var(--focus-ring-brand); }
.hf-videomodal__play svg { width: 26px; height: 26px; margin-left: 3px; }   /* optical center for the triangle */
.hf-videomodal__length { position: absolute; left: var(--spacing-lg); bottom: var(--spacing-lg); padding: 2px var(--spacing-md); font-family: var(--font-family-mono); font-size: var(--font-size-text-xs); color: var(--color-white); background: color-mix(in srgb, var(--color-gray-950) 70%, transparent); border-radius: var(--radius-sm); }
.hf-videomodal__meta { margin: 0; padding: var(--spacing-xl) var(--spacing-3xl) var(--spacing-3xl); font-size: var(--font-size-text-sm); line-height: var(--line-height-text-sm); color: var(--text-tertiary); }
/* Locked stage (v4.52 — gate the file, not the text): anonymous users still get
   the modal (title + meta visible) but the stage locks — no play; lock glyph +
   Register CTA. Same row plays normally once signed in. */
.hf-videomodal__lockwrap { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--spacing-lg); }
.hf-videomodal__lock { width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center; background: var(--color-white); border-radius: var(--radius-full); color: var(--text-secondary); box-shadow: var(--shadow-lg); }
.hf-videomodal__lock svg { width: 24px; height: 24px; }
.hf-share__footnote svg { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--icon-fg-accent); }

/* ---- Column 3a: ISI panel (SPONSORED) -------------------------------- */
/* Desktop: sticky right-column panel, scrolls internally. Always visible =
   compliance. The minimize button is hidden here (only shows in drawer mode). */
.hf-isi {
  position: sticky;
  top: calc(56px + var(--spacing-3xl));
  align-self: start;
  /* Always FILL the sticky viewport area (not just fit content), so the scroll
     body expands and shows as much ISI as possible; the source line pins to the
     bottom. 96 = 80 top offset (56 header + 24) + 16 bottom breathing room. */
  height: calc(100vh - 96px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-primary);
  /* The ISI is the industry "black box" — thick, dark-bordered container. */
  border: 3px solid var(--text-brand-primary);
  border-radius: var(--radius-xl);
}
.hf-isi__head {
  flex: none;
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-lg);
  padding: var(--spacing-lg) var(--spacing-xl);
  background: var(--bg-secondary);
  border-bottom: 1.5px solid var(--border-primary);
}
.hf-isi__head-text { flex: 1; min-width: 0; }
.hf-isi__head h3 {
  margin: 0 0 var(--spacing-xs);
  font-family: var(--font-family-body);
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-primary);
}
.hf-isi__head p {
  margin: 0;
  font-size: var(--font-size-text-sm);
  line-height: var(--line-height-text-sm);
  color: var(--text-tertiary);
}
.hf-isi__head p a { color: var(--text-link); text-decoration: underline; }   /* canonical link */
.hf-isi__head p a:hover { text-decoration-color: var(--color-accent-400); }
/* Minimize button — drawer-mode only (revealed ≤1099px). */
.hf-isi__minimize {
  display: none;
  flex: none;
  width: 32px; height: 32px;
  align-items: center; justify-content: center;
  padding: 0;
  background: var(--bg-primary);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-md);
  color: var(--text-tertiary);
  cursor: pointer;
  transition: border-color var(--motion-duration) var(--motion-ease), background-color var(--motion-duration) var(--motion-ease), color var(--motion-duration) var(--motion-ease);
}
/* Match the sub-header picker/Actions hover (accent border + accent-50 tint). */
.hf-isi__minimize:hover { border-color: var(--color-accent-500); background: var(--color-accent-50); color: var(--text-primary); }
.hf-isi__minimize:focus-visible { outline: none; box-shadow: var(--focus-ring-brand); }
.hf-isi__minimize svg { width: 18px; height: 18px; transition: transform var(--motion-duration) var(--motion-ease); }
.hf-isi.is-minimized .hf-isi__minimize svg { transform: rotate(180deg); }
.hf-isi__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  scrollbar-width: thin;                                /* v4.49: joins the hero strips' scrollbar canon */
  scrollbar-color: var(--color-accent-300) transparent;
}
/* v4.49 (design round item 1): the ISI's VERTICAL scrollbar now matches the
   horizontal ones styled on the drug-hero chip strip + banner (thin, accent-300
   thumb, transparent track). One scrollbar voice wherever we style them. */
.hf-isi__body::-webkit-scrollbar { width: 8px; }
.hf-isi__body::-webkit-scrollbar-track { background: transparent; }
.hf-isi__body::-webkit-scrollbar-thumb { background: var(--color-accent-300); border-radius: var(--radius-full); }

/* ---- ISI body prose ------------------------------------------------------
   Faithful safety-information formatting rendered in the Physicians Office
   Resource design system. Structure mirrors the med-legal source: section
   subheads, bold run-in labels, bullets + nested bullets, italic descriptors,
   canonical links, and the repeated Prescribing-Information callout. Inline
   emphasis (strong / em / sup) is preserved from source; colors + fonts come
   from tokens only. */
.hf-isi__prose {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  font-size: var(--font-size-text-sm);
  line-height: var(--line-height-text-sm);
  color: var(--text-secondary);
}
.hf-isi__prose > :first-child { margin-top: 0; }
.hf-isi__prose p { margin: 0; }
.hf-isi__prose strong { font-weight: var(--font-weight-semibold); color: var(--text-primary); }
.hf-isi__prose em { font-style: italic; }
.hf-isi__prose sup { font-size: 0.7em; line-height: 0; vertical-align: super; }
/* Section subheads — "Warnings and Precautions", "Adverse Reactions", etc. */
.hf-isi__subhead {
  margin: var(--spacing-sm) 0 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-text-sm);
  color: var(--text-primary);
}
/* Hairline under the lead subhead, matching the live "Warnings and Precautions" rule. */
.hf-isi__rule { height: 0; margin: var(--spacing-xs) 0 var(--spacing-sm); border: 0; border-top: 1px solid var(--border-secondary); }
/* Bulleted lists (accent diamond) + nested (hollow neutral dot). */
.hf-isi__prose ul { margin: 0; padding-left: var(--spacing-xl); list-style: none; display: flex; flex-direction: column; gap: var(--spacing-sm); }
.hf-isi__prose li { position: relative; }
.hf-isi__prose li::before { content: ""; position: absolute; left: calc(-1 * var(--spacing-lg)); top: 0.5em; width: 5px; height: 5px; transform: rotate(45deg); background: var(--color-accent-500); }
.hf-isi__prose ul ul { margin-top: var(--spacing-sm); }
.hf-isi__prose ul ul li::before { top: 0.45em; width: 5px; height: 5px; transform: none; border-radius: var(--radius-full); background: var(--text-quaternary); }
/* Canonical inline link. */
.hf-isi__prose a { color: var(--text-link); text-decoration: underline; }
.hf-isi__prose a:hover { text-decoration-color: var(--color-accent-400); }
/* Repeated "click here for full Prescribing Information" callout. */
.hf-isi__pi { margin: 0; font-weight: var(--font-weight-semibold); color: var(--text-primary); }

/* ---- Column 3b: discovery aside (UNBRANDED) -------------------------- */
.hf-drugpage__aside {
  /* Normal-flow reference column — scrolls WITH the page (NOT pinned). Pinning it made
     the tall white middle column strand awkward empty space beside the stuck aside, so
     the right column now scrolls away naturally. (The left rail stays sticky.) */
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);                           /* 12 between aside cards (wireframe --s-3) */
}

/* ---- Discovery aside cards (UNBRANDED column 3) ----------------------
   The unbranded counterpart to the sponsored ISI: a stack of reference /
   discovery cards. One base card (.hf-discovery) with an uppercase title head
   and content variants — article list, indication chips, a label-update
   callout, a devices list, and the "why unbranded" note. Token-routed. */
.hf-discovery { background: var(--bg-primary); border: 1px solid var(--border-secondary); border-radius: var(--radius-xl); padding: var(--spacing-xl); display: flex; flex-direction: column; gap: var(--spacing-lg); }
.hf-discovery__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--spacing-md); }
.hf-discovery__title { margin: 0; font-size: var(--font-size-text-xs); text-transform: uppercase; letter-spacing: 0.06em; font-weight: var(--font-weight-semibold); color: var(--text-tertiary); }
.hf-discovery__link { font-size: var(--font-size-text-sm); color: var(--text-link); text-decoration: underline; white-space: nowrap; }
.hf-discovery__link:hover { text-decoration-color: var(--color-accent-400); }

/* Article list */
.hf-discovery__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.hf-discovery__item { padding: var(--spacing-md) 0; border-top: 1px solid var(--border-secondary); }
.hf-discovery__item:first-child { border-top: 0; padding-top: 0; }
.hf-discovery__item:last-child { padding-bottom: 0; }
.hf-discovery__item > a { display: block; font-size: var(--font-size-text-md); line-height: var(--line-height-text-md); font-weight: var(--font-weight-medium); color: var(--text-primary); text-decoration: none; }
.hf-discovery__item > a:hover { color: var(--text-link); }
.hf-discovery__meta { margin: var(--spacing-xs) 0 0; font-size: var(--font-size-text-xs); color: var(--text-quaternary); }

/* Indication chips */
.hf-discovery__chips { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); }

/* Devices list — small linked rows with a brand icon */
.hf-discovery__rows { display: flex; flex-direction: column; }
.hf-discovery__row { display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-md) 0; border-top: 1px solid var(--border-secondary); font-size: var(--font-size-text-sm); line-height: var(--line-height-text-sm); color: var(--text-secondary); text-decoration: none; transition: color var(--motion-duration) var(--motion-ease); }
.hf-discovery__row:first-child { border-top: 0; padding-top: 0; }
.hf-discovery__row:last-child { padding-bottom: 0; }
.hf-discovery__row:hover { color: var(--text-link); }
.hf-discovery__row-icon { flex: none; display: inline-flex; color: var(--icon-fg-brand); }
.hf-discovery__row-icon svg { width: 18px; height: 18px; }

/* ---- Product images — titleless product photos that LEAD the aside (unbranded
   drugs with photos). Wireframe treatment: a single stacked column of FULL-WIDTH
   cards, each a big 4:3 cover photo over an uppercase caption bar. Variable count
   (flex column stacks any number). */
.hf-productimg { display: flex; flex-direction: column; gap: var(--spacing-lg); }
.hf-productimg__item { margin: 0; border: 1px solid var(--border-secondary); border-radius: var(--radius-md); overflow: hidden; }
.hf-productimg__pic { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--bg-secondary); }
.hf-productimg__label { padding: var(--spacing-md); background: var(--bg-secondary); border-top: 1px solid var(--border-secondary); font-size: var(--font-size-text-xs); line-height: var(--line-height-text-xs); text-transform: uppercase; letter-spacing: 0.06em; font-weight: var(--font-weight-semibold); color: var(--text-secondary); text-align: center; }

/* ===========================================================================
   POR 2026 — HIGH-FIDELITY: DEVICE / DIAGNOSTIC PRODUCT DETAIL   [NET-NEW]
   ---------------------------------------------------------------------------
   The diagnostic product-detail template reuses the drug-detail architecture
   wholesale (shell, .hf-drughero, .hf-drugpage 3-col, .hf-actions rail,
   .hf-inpage-nav, .hf-prose, .hf-table, .hf-resource, .hf-inquiry modal,
   .hf-discovery / .hf-productimg right rail, .hf-viewas toggle). Only the
   pieces below are net-new to diagnostics:
     · rail-card spacing (multiple labelled .hf-actions cards now stack)
     · .hf-specs — Specifications / Regulatory label-value def-list
     · .hf-drughero--device — category eyebrow + tagline + "by manufacturer"
     · .hf-mfrcard — manufacturer card that closes the intelligence rail
   Token-routed throughout.
   ========================================================================== */

/* Rail now stacks MULTIPLE labelled action cards (Actions + Request-from-mfr /
   Sponsor Resources), so consecutive cards need a gap. */
.hf-actions + .hf-actions { margin-top: var(--spacing-xl); }

/* ---- Specifications / Regulatory def-list -------------------------------- */
.hf-specs { margin: 0; }
.hf-specs__row {
  display: flex; gap: var(--spacing-lg);
  padding: var(--spacing-md) 0;
  border-top: 1px solid var(--border-secondary);
}
.hf-specs__row:first-child { border-top: 0; padding-top: 0; }
.hf-specs dt {
  flex: none; width: 34%; max-width: 220px; margin: 0;
  font-family: var(--font-family-body); font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-text-sm); line-height: var(--line-height-text-sm);
  color: var(--text-secondary);
}
.hf-specs dd {
  flex: 1 1 auto; min-width: 0; margin: 0;
  font-size: var(--font-size-text-sm); line-height: var(--line-height-text-sm);
  color: var(--text-primary);
}
.hf-specs--regulatory dt { color: var(--text-tertiary); }   /* quieter — regulatory IDs are reference, not headline */
@media (max-width: 560px) {
  .hf-specs__row { flex-direction: column; gap: var(--spacing-xs); }
  .hf-specs dt { width: auto; max-width: none; }
}

/* ---- Device hero identity variant — category eyebrow + tagline + by-line -- */
/* .hf-drughero__category RETIRED (Chris, 2026-08-27): ONE eyebrow style system-wide —
   hero kickers use .hf-section__eyebrow (20px semibold accent, sentence case), matching
   the entity landings. The old small-caps voice is gone. */
.hf-drughero__tagline {
  margin: 0; font-family: var(--font-family-body);
  font-size: var(--font-size-text-lg); line-height: var(--line-height-text-lg);
  color: var(--text-tertiary);
}
.hf-drughero__by { margin: 0; font-size: var(--font-size-text-sm); color: var(--text-tertiary); }
.hf-drughero__by-link { color: var(--text-link); text-decoration: none; font-weight: var(--font-weight-medium); }
.hf-drughero__by-link:hover { text-decoration: underline; }

/* ---- Manufacturer card — closes the intelligence right rail -------------- */
.hf-mfrcard {
  display: flex; flex-direction: column; gap: var(--spacing-sm);
  border: 1px solid var(--border-secondary); border-radius: var(--radius-xl);
  background: var(--bg-secondary); padding: var(--spacing-xl);
}
.hf-mfrcard__eyebrow {
  margin: 0; font-size: var(--font-size-text-xs); text-transform: uppercase;
  letter-spacing: 0.06em; font-weight: var(--font-weight-semibold); color: var(--text-tertiary);
}
.hf-mfrcard__name {
  font-family: var(--font-family-display); font-size: var(--font-size-text-lg);
  font-weight: var(--font-weight-bold); color: var(--text-primary); text-decoration: none;
}
.hf-mfrcard__name:hover { color: var(--text-link); }
.hf-mfrcard__blurb { margin: 0; font-size: var(--font-size-text-sm); line-height: var(--line-height-text-sm); color: var(--text-tertiary); }
.hf-mfrcard__link {
  display: inline-flex; align-items: center; gap: var(--spacing-xs); margin-top: var(--spacing-xs);
  font-size: var(--font-size-text-sm); font-weight: var(--font-weight-medium);
  color: var(--text-link); text-decoration: none;
}
.hf-mfrcard__link:hover { text-decoration: underline; }
.hf-mfrcard__link svg { width: 15px; height: 15px; }

/* ===========================================================================
   POR 2026 — HIGH-FIDELITY: MANUFACTURER DETAIL   [NET-NEW]
   ---------------------------------------------------------------------------
   Reuses the drug/device entity-detail architecture (shell, .hf-drughero,
   .hf-drugpage 3-col, .hf-actions rail + inquiry modal, .hf-discovery rail,
   .hf-drugsec/.hf-prose for About, .hf-viewas). Net-new: the manufacturer hero
   facts strip and the PRODUCTS CATALOG (search + category chips + grouped
   product cards with a per-card resource expander). Token-routed throughout.
   ========================================================================== */

/* ---- Hero: company "basics" strip — runs FULL-WIDTH beneath the identity+banner
   row (a manufacturer carries more identity than a device, so the facts run
   horizontally across the open width instead of stacking in the narrow left column). */
.hf-mfrhero__basics {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--spacing-lg) var(--spacing-6xl);
  margin-top: var(--spacing-3xl);
  padding-top: var(--spacing-2xl);
  border-top: 1px solid var(--border-secondary);
}
.hf-mfrhero__facts {
  flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: var(--spacing-lg) var(--spacing-5xl); margin: 0;
}
.hf-mfrhero__fact { display: flex; flex-direction: column; gap: var(--spacing-sm); }   /* 6 — was a raw 2px; label-value pair needs air but must stay coupled (Chris, 2026-08-27) */
.hf-mfrhero__fact dt {
  /* Canonical uppercase micro-label recipe (see .hf-card__indications): text-xs /
     semibold / +0.06em / tertiary ink. Was a local variant — 10px, +0.08em, and the
     faint quaternary gray (Chris, 2026-08-27: too washed out). */
  margin: 0; font-family: var(--font-family-body); font-size: var(--font-size-text-xs);
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: var(--font-weight-semibold); color: var(--text-tertiary);
}
.hf-mfrhero__fact dd { margin: 0; font-size: var(--font-size-text-sm); line-height: var(--line-height-text-sm); color: var(--text-secondary); }
.hf-mfrhero__website {
  display: inline-flex; align-items: center; gap: var(--spacing-xs);
  font-size: var(--font-size-text-sm); font-weight: var(--font-weight-medium); color: var(--text-link); text-decoration: none;
}
.hf-mfrhero__website:hover { text-decoration: underline; }
.hf-mfrhero__website svg { width: 15px; height: 15px; }

/* ---- Products catalog ---------------------------------------------------- */
.hf-mfr-catalog__head { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-lg); flex-wrap: wrap; }
.hf-mfr-search {
  display: inline-flex; align-items: center; gap: var(--spacing-sm); min-width: 240px;
  padding: var(--spacing-sm) var(--spacing-md); border: 1px solid var(--border-primary);
  border-radius: var(--radius-md); background: var(--bg-primary); color: var(--text-tertiary);
  transition: border-color var(--motion-duration) var(--motion-ease), box-shadow var(--motion-duration) var(--motion-ease);
}
.hf-mfr-search:focus-within { border-color: var(--text-tertiary); box-shadow: var(--focus-ring-brand); }
.hf-mfr-search svg { flex: none; width: 16px; height: 16px; }
.hf-mfr-search input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; font-family: var(--font-family-body); font-size: var(--font-size-text-sm); color: var(--text-primary); }

/* Category filter chips — single-select; navy fill when active (system "selected"). */
.hf-catfilter { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); margin: var(--spacing-xl) 0 0 calc(8px + var(--spacing-md)); }   /* left = diamond-heading text indent, same as .hf-prose */
.hf-catchip {
  display: inline-flex; align-items: center; gap: var(--spacing-sm); box-sizing: border-box;
  padding: 6px var(--spacing-lg); border: 1px solid var(--border-primary); border-radius: var(--radius-full);
  background: var(--bg-primary); color: var(--text-secondary);
  font-family: var(--font-family-body); font-size: var(--font-size-text-sm); font-weight: var(--font-weight-medium);
  line-height: 1; white-space: nowrap; cursor: pointer;
  transition: background-color var(--motion-duration) var(--motion-ease), border-color var(--motion-duration) var(--motion-ease), color var(--motion-duration) var(--motion-ease);
}
.hf-catchip:hover { border-color: var(--text-tertiary); }
.hf-catchip.is-active { background: var(--bg-brand-solid); color: var(--text-white); border-color: var(--bg-brand-solid); }
.hf-catchip:focus-visible { outline: none; box-shadow: var(--focus-ring-brand); }
.hf-catchip__count { font-size: var(--font-size-text-xxs); font-weight: var(--font-weight-semibold); opacity: 0.75; }

.hf-mfr-results { margin: var(--spacing-xl) 0 0 calc(8px + var(--spacing-md)); font-size: var(--font-size-text-sm); color: var(--text-tertiary); }
.hf-mfr-results[hidden] { display: none; }

.hf-mfr-groups { display: flex; flex-direction: column; gap: var(--spacing-6xl); margin: var(--spacing-2xl) 0 0 calc(8px + var(--spacing-md)); }
.hf-mfr-catalog .hf-empty { margin-left: calc(8px + var(--spacing-md)); }   /* empty state joins the same alignment */
.hf-mfr-group[hidden] { display: none; }
.hf-mfr-group__title { display: flex; align-items: baseline; gap: var(--spacing-md); margin: 0 0 var(--spacing-xl); font-family: var(--font-family-body); font-size: var(--font-size-text-lg); font-weight: var(--font-weight-semibold); letter-spacing: -0.2px; color: var(--text-primary); }   /* sans (Chris, 2026-08-27): serif read off at this level — matches the sans card-title voice below it */
.hf-mfr-group__count { font-family: var(--font-family-body); font-size: var(--font-size-text-sm); font-weight: var(--font-weight-regular); color: var(--text-quaternary); }
.hf-mfr-group__cards { display: flex; flex-direction: column; gap: var(--spacing-lg); }
.hf-mfr-showmore {
  display: inline-flex; align-items: center; gap: var(--spacing-sm); margin: var(--spacing-lg) 0 0; padding: 0;
  background: none; border: 0; color: var(--text-link); font-family: var(--font-family-body);
  font-size: var(--font-size-text-sm); font-weight: var(--font-weight-medium); cursor: pointer;
}
.hf-mfr-showmore:hover { text-decoration: underline; }
.hf-mfr-showmore svg { width: 16px; height: 16px; }
.hf-mfr-showmore[hidden] { display: none; }

/* Product card — horizontal: icon thumb · body (name + fav + tags + blurb + diseases + resources). */
.hf-mfr-card {
  display: flex; gap: var(--spacing-xl); border: 1px solid var(--border-secondary); border-radius: var(--radius-xl);
  background: var(--bg-primary); padding: var(--spacing-xl);
  transition: border-color var(--motion-duration) var(--motion-ease), box-shadow var(--motion-duration) var(--motion-ease);
}
.hf-mfr-card:hover { border-color: var(--color-accent-500); box-shadow: var(--glow-accent); }
.hf-mfr-card[hidden] { display: none; }
.hf-mfr-card__thumb {
  flex: none; width: 88px; height: 88px; border-radius: var(--radius-md);
  border: 1px solid var(--border-secondary);
  display: flex; align-items: center; justify-content: center; text-decoration: none; overflow: hidden;
}
.hf-mfr-card__thumb svg { width: 24px; height: 24px; }
.hf-mfr-card__thumb--img { background: var(--color-white); }
.hf-mfr-card__thumb--img img { width: 100%; height: 100%; object-fit: contain; padding: var(--spacing-xs); }

/* CANONICAL no-image placeholder (Chris, 2026-08-27) — THE system fallback when
   a product/entity has no photo: quiet neutral surface + generic image glyph
   (nothing category-specific like the old beaker). Pair with any fixed-size
   thumb container; photo-or-nothing surfaces (device rows) stay photo-or-nothing. */
.hf-imgph { background: var(--bg-secondary); color: var(--text-quaternary); }
.hf-mfr-card__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-sm); }
.hf-mfr-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spacing-md); }
.hf-mfr-card__name { margin: 0; font-family: var(--font-family-body); font-size: var(--font-size-text-lg); font-weight: var(--font-weight-bold); letter-spacing: -0.2px; }
.hf-mfr-card__name a { color: var(--text-primary); text-decoration: none; }
.hf-mfr-card__name a:hover { color: var(--text-link); }
/* Favorite/save toggle — shared atom. `.hf-mfr-card__fav` (manufacturer cards) and
   `.hf-fav` (drug row cards, and anywhere a save control is needed) are driven by
   ONE rule set so they can't drift. Circular heart; `.is-on` = accent fill. */
.hf-mfr-card__fav,
.hf-fav {
  flex: none; width: 34px; height: 34px; border-radius: var(--radius-full);
  border: 1px solid var(--border-secondary); background: var(--bg-primary); color: var(--text-tertiary); cursor: pointer;
  position: relative; z-index: 1;             /* sit ABOVE the card's stretched-link ::after so the click reaches the button, not the drug link */
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color var(--motion-duration) var(--motion-ease), border-color var(--motion-duration) var(--motion-ease), color var(--motion-duration) var(--motion-ease);
}
.hf-mfr-card__fav:hover,
.hf-fav:hover { border-color: var(--text-tertiary); color: var(--text-secondary); }
.hf-mfr-card__fav:focus-visible,
.hf-fav:focus-visible { outline: none; box-shadow: var(--focus-ring-brand); }
.hf-mfr-card__fav svg,
.hf-fav svg { width: 17px; height: 17px; }
.hf-mfr-card__fav.is-on,
.hf-fav.is-on { background: var(--bg-accent); border-color: var(--color-accent-400); color: var(--color-accent-600); }
.hf-mfr-card__fav.is-on svg,
.hf-fav.is-on svg { fill: currentColor; }
.hf-mfr-card__tags { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); }
.hf-mfr-card__tag {
  font-size: var(--font-size-text-xxs); font-weight: var(--font-weight-medium); text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-tertiary); background: var(--bg-secondary); border: 1px solid var(--border-secondary);
  border-radius: var(--radius-sm); padding: 2px var(--spacing-sm);
}
.hf-mfr-card__tag--clia { color: var(--color-accent-800); background: var(--bg-accent); border-color: var(--color-accent-200); }
.hf-mfr-card__blurb { margin: 0; font-size: var(--font-size-text-sm); line-height: var(--line-height-text-md); color: var(--text-secondary); }
.hf-mfr-card__diseases { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); }
.hf-mfr-card__resources { margin-top: var(--spacing-sm); border-top: 1px solid var(--border-secondary); padding-top: var(--spacing-lg); }
.hf-mfr-card__res-label { margin: 0 0 var(--spacing-sm); font-size: var(--font-size-text-xs); text-transform: uppercase; letter-spacing: 0.06em; font-weight: var(--font-weight-semibold); color: var(--text-tertiary); }
.hf-mfr-card__res-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--spacing-md); }
.hf-mfr-card__res-item { display: flex; align-items: center; gap: var(--spacing-sm); font-size: var(--font-size-text-sm); }
.hf-mfr-card__res-item[hidden] { display: none; }   /* the class's display:flex would otherwise beat the UA [hidden] rule */
.hf-mfr-card__res-item svg { flex: none; width: 15px; height: 15px; color: var(--icon-fg-brand); }
.hf-mfr-card__res-link { color: var(--text-primary); text-decoration: none; }
.hf-mfr-card__res-link:hover { color: var(--text-link); text-decoration: underline; }
.hf-mfr-card__res-type { margin-left: auto; flex: none; font-size: var(--font-size-text-xxs); color: var(--text-quaternary); }
.hf-mfr-card__res-toggle {
  display: inline-flex; align-items: center; gap: var(--spacing-xs); margin-top: var(--spacing-md); padding: 0;
  background: none; border: 0; color: var(--text-link); font-family: var(--font-family-body);
  font-size: var(--font-size-text-sm); font-weight: var(--font-weight-medium); cursor: pointer;
}
.hf-mfr-card__res-toggle:hover { text-decoration: underline; }
.hf-mfr-card__res-toggle svg { width: 15px; height: 15px; transition: transform var(--motion-duration) var(--motion-ease); }
.hf-mfr-card__res-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* (Catalog empty state now uses the canonical .hf-empty atom; .hf-mfr-empty retired.) */
.hf-empty[hidden] { display: none; }   /* the catalog toggles its empty panel via [hidden] */

@media (max-width: 560px) {
  .hf-mfr-card { flex-direction: column; }
  .hf-mfr-card__thumb { width: 100%; height: 120px; }
}
/* Manufacturer sub-header carries only Actions (no anchor nav) → right-align it. */
.hf-drugpage__subhead--actions-only { justify-content: flex-end; }

/* ---- Mobile sub-header (replaces the left rail ≤1299px) --------------- */
.hf-drugpage__subhead { display: none; }           /* shown ≤1299 (see media) */

/* ---- Rail group + "On this page" anchor nav (chrome, not a pattern) --- */

/* ==========================================================================
   In-page nav — "On this page" (canonical navigational pattern)
   Figma: Menu-InPage (19145:1104). A self-contained card: navy header +
   stacked anchor rows with hairline dividers; the active row is an
   accent-green fill with a 3px accent left border. Behavior (smooth-scroll +
   scroll-spy) is shared with the mobile "Jump to section" sheet via
   [data-anchor] / .is-active in drugpage.js.
   ========================================================================== */
.hf-inpage-nav {
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-xl);          /* 12px */
  overflow: hidden;                          /* clip rows to the rounded corners */
  background: var(--bg-primary);
}
.hf-inpage-nav__title {
  margin: 0;
  background: var(--bg-brand-solid);         /* navy #194689 */
  color: var(--text-white);
  font-family: var(--font-family-body);
  font-size: var(--font-size-text-xxs);
  font-weight: var(--font-weight-medium);
  line-height: 15px;
  letter-spacing: 0.08em;                    /* ≈0.8px at 10px */
  text-transform: uppercase;
  padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-md);  /* 12 / 16 / 8 */
}
.hf-inpage-nav__list { display: flex; flex-direction: column; }
.hf-inpage-nav__list a {
  display: block;
  padding: var(--spacing-lg) var(--spacing-xl);      /* 12 / 16 */
  border-top: 1px solid var(--border-secondary);     /* hairline divider between rows */
  border-left: 3px solid transparent;                /* reserved accent gutter — no shift on active */
  color: var(--text-primary);                        /* #171717 */
  text-decoration: none;
  font-size: var(--font-size-text-xs);               /* 12px */
  line-height: var(--line-height-text-xs);           /* 18px */
  transition: background-color var(--motion-duration) var(--motion-ease),
              color var(--motion-duration) var(--motion-ease),
              border-color var(--motion-duration) var(--motion-ease);
}
.hf-inpage-nav__list a:hover:not(.is-active) { background: var(--bg-primary-hover); }
.hf-inpage-nav__list a:focus-visible { outline: none; box-shadow: var(--focus-ring-brand); position: relative; z-index: 1; }
.hf-inpage-nav__list a.is-active {
  background: var(--bg-accent);              /* #e8f8f0 */
  border-left-color: var(--color-accent-400);/* #26dc91 */
  font-weight: var(--font-weight-medium);
}

/* ---- Greyed placeholder block (skeleton stand-in for real patterns) --- */
.hf-ph {
  background: var(--bg-secondary);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: var(--spacing-lg);
  color: var(--text-quaternary);
  font-family: var(--font-family-body);
  font-size: var(--font-size-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
}

.hf-ph--card { min-height: 140px; }

/* Left-aligned action row (Actions list stand-in) */


/* Actions list wrapper + the "brand-configurable" hint under it. */


/* ---- Bottom sheet (opened by the sub-header section picker / Actions) --- */
.hf-sheet { position: fixed; inset: 0; z-index: 55; }   /* hidden via [hidden] */
.hf-sheet__backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--color-brand-900) 45%, transparent); }
.hf-sheet__panel {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  max-height: 70vh;
  overflow-y: auto;
  padding: var(--spacing-xl);
  background: var(--bg-primary);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: 0 -8px 24px color-mix(in srgb, var(--color-brand-900) 18%, transparent);
}
.hf-sheet__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--spacing-lg);
}
.hf-sheet__title { margin: 0; font-family: var(--font-family-body); font-size: var(--font-size-text-md); font-weight: var(--font-weight-semibold); color: var(--text-primary); }
.hf-sheet__close {
  width: 32px; height: 32px; flex: none; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-primary); border: 1px solid var(--border-secondary);
  border-radius: var(--radius-sm); color: var(--text-tertiary); cursor: pointer;
}
.hf-sheet__close:hover { background: var(--bg-primary-hover); color: var(--text-primary); }
.hf-sheet__close svg { width: 18px; height: 18px; }
.hf-sheet__list { display: flex; flex-direction: column; gap: var(--spacing-xs); }
.hf-sheet__list a {
  padding: var(--spacing-lg);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--text-secondary);
  font-size: var(--font-size-text-md);
}
.hf-sheet__list a:hover { background: var(--bg-primary-hover); color: var(--text-primary); }

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */

/* ---- 1100–1300px: drop the left rail, show the sub-header, 2-col grid -- */
@media (max-width: 1300px) {
  .hf-drugpage__rail { display: none; }
  .hf-drugpage__shell { grid-template-columns: minmax(0, 1fr) 360px; }

  .hf-drugpage__subhead {
    display: flex;
    position: sticky;
    top: 56px;                                      /* directly under the 56px header */
    z-index: 25;
    align-items: center;
    gap: var(--spacing-md);
    min-height: 56px;
    /* Horizontal gutter matches .hf-drugpage__shell (32px; 16px ≤768) — the
       subhead is a full-bleed child of .hf-drugpage, so without its own
       padding the pills sat flush against the nav rail (Chris, 2026-08-19). */
    padding: var(--spacing-md) var(--spacing-4xl);
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-primary);
  }
  .hf-drugpage__subhead-section,
  .hf-drugpage__subhead-actions {
    height: 40px;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: 0 var(--spacing-lg);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    font-family: var(--font-family-body);
    font-size: var(--font-size-text-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    cursor: pointer;
  }
  .hf-drugpage__subhead-section { flex: 0 1 auto; min-width: 0; max-width: 340px; background: var(--bg-secondary); }
  .hf-drugpage__subhead-section .hf-drugpage__subhead-current { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); font-weight: var(--font-weight-semibold); }
  .hf-drugpage__subhead-eyebrow { flex: none; font-size: var(--font-size-text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); font-weight: var(--font-weight-semibold); }
  .hf-drugpage__subhead-actions { flex: none; }
  .hf-drugpage__subhead-section:hover,
  .hf-drugpage__subhead-actions:hover { border-color: var(--color-accent-500); background: var(--color-accent-50); }

  .hf-drugpage__main > section { scroll-margin-top: 124px; }   /* header 56 + subhead 56 + buffer */
}

/* ---- ≤1099px: single column; SPONSORED ISI → fixed bottom drawer ------ */
@media (max-width: 1100px) {
  .hf-drugpage__shell { grid-template-columns: minmax(0, 1fr); }

  /* Unbranded aside cascades in normal flow (no sticky, no drawer). */
  .hf-drugpage__aside { position: static; }

  /* ISI becomes a fixed bottom drawer that stays above the scrolling page. */
  .hf-isi {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 64px;                                     /* clears the 64px collapsed nav rail */
    right: 0;
    height: 38vh;
    max-height: 38vh;
    margin: 0;
    z-index: 45;                                    /* above content/header, below mobile nav drawer (60) */
    /* Keep the "black box" identity in drawer mode — thick dark top + sides
       (bottom is docked to the viewport edge, so it stays open). */
    border-width: 3px 3px 0;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    box-shadow: 0 -8px 24px color-mix(in srgb, var(--color-brand-900) 14%, transparent);
    /* left animates in step with the rail expand/collapse (see expanded override). */
    transition: height var(--motion-duration) var(--motion-ease), left var(--duration-base) var(--ease-standard);
  }
  .hf-isi__minimize { display: inline-flex; }
  .hf-isi.is-minimized { height: 104px; }           /* just the head */
  .hf-isi.is-minimized .hf-isi__body { display: none; }

  /* Reserve bottom space so page content clears the drawer (SPONSORED only —
     the body carries .drug-isi on the sponsored page; minimize adds .is-isi-min). */
  body.drug-isi .hf-content { padding-bottom: 38vh; transition: padding-bottom var(--motion-duration) var(--motion-ease); }
  body.drug-isi.is-isi-min .hf-content { padding-bottom: 104px; }
}

/* When the rail is EXPANDED in drawer mode (769–1099px), it pushes the content
   narrower — so the fixed ISI drawer must follow, shifting its left edge from the
   64px collapsed rail to the 240px expanded rail (otherwise the drawer overlaps
   the rail, since it sits above it). ≤768px is off-canvas nav, handled below. */
@media (min-width: 769px) and (max-width: 1100px) {
  .hf-shell.is-nav-expanded .hf-isi { left: 240px; }
}

/* ---- ≤768px: ISI drawer shorter + full width (nav off-canvas) --------- */
@media (max-width: 768px) {
  .hf-drugpage__shell { padding-left: var(--spacing-xl); padding-right: var(--spacing-xl); }   /* 16 — match the hero's mobile gutter so edges align */
  .hf-drugpage__subhead { padding-left: var(--spacing-xl); padding-right: var(--spacing-xl); }   /* gutter tracks the shell */
  .hf-isi { left: 0; height: 35vh; max-height: 35vh; }
  body.drug-isi .hf-content { padding-bottom: 35vh; }
  body.drug-isi.is-isi-min .hf-content { padding-bottom: 104px; }
}


/* ===================== components/intel.css ===================== */
/* ===========================================================================
   POR 2026 — HIGH-FIDELITY MODULE: Intelligence block (.hf-intel)
   ---------------------------------------------------------------------------
   Homepage "The Latest Intelligence" section. Source: Figma Today's Intell
   (node 19165:3984) + the wireframe's tier states. A COMPOSITION of built
   pieces — it adds only the section chrome (header + layout) and wires the
   tier behavior; the tabs are the Tabs atom (.hf-tabs) and the cards are
   Card-Pub (.hf-card--pub) in the fluid .hf-card-grid.

   Tier-aware (wireframe): a sparkles personalization NOTE for cookied/signed-in,
   and the first tab leads with "For You" (signed-in) vs "All" (anon/cookied).
   Responsive: header stacks, tabs collapse to a dropdown ≤768px, cards 3→1.

   The section chrome (band, container, header) is the shared .hf-section scaffold
   (section.css) — the markup uses `class="hf-section hf-section--ruled hf-intel"`.
   This file only adds intel-specific bits: the note + the card-grid column cap.
   Tokens only.
   =========================================================================== */

/* ---- Personalization note (tier-conditional) ---- */
.hf-intel__note {
  /* no base `display` — so the `hidden` attr (JS-toggled per tier) can hide it;
     display is set only on :not([hidden]) below. */
  align-items: center; gap: var(--spacing-sm);
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-text-sm);               /* 14 */
  line-height: var(--line-height-text-sm);
  color: var(--text-tertiary);
}
.hf-intel__note:not([hidden]) { display: flex; }     /* shown only for its tier */
.hf-intel__note svg { flex: none; width: 16px; height: 16px; color: var(--color-accent-500); }

/* ---- Cards ---- */
/* Uses the shared .hf-card-grid (3-up → 1-up). Cap at 3 columns for this module. */
.hf-intel__cards { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
/* (band padding, container + header stacking are inherited from .hf-section) */

/* Real cards fade + rise in once the (faux) fetch resolves — see intel.js.
   fill: backwards (not both) so the intro applies BEFORE it runs but RELEASES the
   transform afterward — otherwise the finished animation would pin transform and
   override the base card's :hover lift. */
.hf-intel__cards.is-loaded > .hf-card:not(.hf-card--loading) {
  animation: hf-intel-cardin var(--motion-duration) var(--motion-ease) backwards;
}
@keyframes hf-intel-cardin {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hf-intel__cards.is-loaded > .hf-card { animation: none; }
}


/* ===================== components/bands.css ===================== */
/* ===========================================================================
   POR 2026 — HIGH-FIDELITY MODULES: Personalized bands
   ---------------------------------------------------------------------------
   The two tier-gated blocks that sit between the hero and the Intelligence
   block (wireframe "Block B.5"). Each is a whole-section band shown for ONE
   tier — anonymous sees neither:

     .hf-recent   (cookied)   "Recently viewed" — a wrapping row of accent
                              .hf-entity-badge pills (with a muted timestamp)
     .hf-foryou   (signedin)  "Your morning briefing" — a 3-up grid of the
                              .hf-card--list instance (empty-prompt on cold start)

   Both reuse the shared .hf-section scaffold (header/container); this file only
   adds the two content layouts. Tier gating is done on the <section> via a
   `hidden` attribute toggled by the page's View-as control (no base `display`,
   so `hidden` wins) — same pattern as the Intel note.
   Tokens only.
   =========================================================================== */

/* Whole-band tier gating: hidden unless its tier is active. */
.hf-band[hidden] { display: none; }
/* Top hairline (matches the other ruled sections) so the band reads as a
   distinct block below the hero. */
.hf-band { border-top: 1px solid var(--border-primary); }

/* ---- Recently viewed (cookied): row of accent entity-badge pills ----
   RECENCY RULES (the band is a glanceable "jump back in", not a full history):
     • Source: a per-page-deduped store, most-recent-first, rolling 30-day window,
       ~15 entries max. Revisiting a page re-sorts it to the front (one entry, not many),
       so a heavy single session can't flood the row.
     • Render CAP: only the first ~6 that fit one row are shown here; anything beyond
       overflows to Profile → History (Viewed filter) via the header "View all in History"
       link — the SAME store feeds both surfaces.
     • Long titles are ellipsis-capped so one long name can't dominate the row.
   The 30-day / count math + relative "when" ("2 days ago") are computed from the store
   at render; this file just constrains the presentation. */
/* The flex wrap, gap, and name ellipsis-cap come from the shared .hf-pillwrap
   (badge.css) — the markup is `class="hf-pillwrap hf-recent__chips"`. This adds
   only the Recently-viewed-specific one-row clip. */
.hf-recent__chips { overflow: hidden; }

/* ---- Your morning briefing (signed-in): 3-up grid of .hf-card--list ---- */
.hf-foryou__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-xl);                        /* 16 */
}
@media (max-width: 900px) { .hf-foryou__grid { grid-template-columns: 1fr; } }  /* off-scale: wireframe breakpoint */


/* ===================== components/featured.css ===================== */
/* ===========================================================================
   POR 2026 — HIGH-FIDELITY BLOCK: Featured Drugs (.hf-featured)
   ---------------------------------------------------------------------------
   Homepage "Featured Drugs" section. Source: Figma "Drugs" (node 19165:4297) —
   whose card row is literally labelled "Entries use the SHARED components".

   Almost pure COMPOSITION, nothing new invented:
     • section chrome  → the shared .hf-section scaffold (eyebrow "Featured Drugs"
       + Recia heading "Recent additions & updates." + "View all" button)
     • the cards       → the existing .hf-card--drug instance (card.css), mixing
       sponsored (accent rule + logo + sponsor lead) and unsponsored (title +
       taxonomy + summary) — the drug card already supports both
     • the grid        → the shared .hf-card-grid

   This file adds ONE thing: a grid tune so the drug tiles run 4-up on wide
   screens (the base .hf-card-grid is 300px-min → ~3-up). Everything else is
   inherited. Responsive + equal-height rows come from .hf-card-grid /
   .hf-card--drug (bottom-anchored foot) for free.

   Personalization (wireframe): when the user's specialty is known the surfaced
   drugs reorder specialty-first (a "Reordered for you" hint for cookied/signed-in,
   like the Intel note). Not in the Figma comp; wire when the homepage tier lands.
   Tokens only.
   =========================================================================== */

.hf-featured__cards { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }   /* 4-up → down */


/* ===================== components/leaderboard.css ===================== */
/* ===========================================================================
   POR 2026 — HIGH-FIDELITY BLOCK: Leaderboard (.hf-leaderboard)
   ---------------------------------------------------------------------------
   A REUSABLE full-width sponsored-banner block, dropped into the page flow
   wherever a leaderboard is needed — not a one-off homepage module. It can
   appear more than once and on templates beyond the homepage; the homepage
   simply places one instance (the "Leaderboard block") below the hero.
   Source: Figma "Leaderboard Ad" (node 19118:1669) — a `bg-accent` (#e8f8f0)
   band holding a fixed 728×90 creative inside a 10px accent-100 (#c7eedc) frame.

   RESPONSIVE: pharma ad creative is a FIXED pixel size and MUST NOT scale/distort,
   and there's NO ad program to serve an alternate size. So on viewports narrower
   than the creative the block SCROLLS horizontally — the user swipes (touch) or
   drags the scrollbar to pan the whole ad. `justify-content: safe center` keeps
   it centered when it fits and left-aligns it when it overflows, so the start of
   the creative (brand/logo) shows first and you scroll right toward the CTA.

     .hf-leaderboard            the accent band (full width)
       .hf-leaderboard__scroll  centers the slot; scrolls horizontally when it overflows
         .hf-leaderboard__slot  the framed creative, centered
           .hf-leaderboard__frame   10px accent-100 border (the click-through <a>)
             .hf-leaderboard__creative  the fixed-size placeholder graphic
   Tokens only.
   =========================================================================== */

.hf-leaderboard {
  background: var(--color-accent-50);            /* bg-accent #e8f8f0 */
  padding: var(--spacing-5xl) 0;                 /* 40 top/bottom (Figma py) */
  border-top: 1px solid var(--border-secondary); /* symmetric hairline — matches the border the adjacent section carries on the band's bottom edge */
}

.hf-leaderboard__scroll {
  overflow-x: auto;                              /* fixed creative — swipe/scroll to pan the whole ad */
  overscroll-behavior-x: contain;                /* keep the swipe in the ad, don't drag the page */
  -webkit-overflow-scrolling: touch;             /* momentum on iOS */
  display: flex; justify-content: safe center;   /* centered when it fits; scrollable from the start when not */
  padding: 0 var(--spacing-xl);                  /* 16 gutter */
  /* Scrollbar toned to the block (accent on the accent-50 band), not default gray. */
  scrollbar-width: thin;
  scrollbar-color: var(--color-accent-300) transparent;   /* Firefox: thumb / track */
}
/* WebKit/Blink scrollbar to match */
.hf-leaderboard__scroll::-webkit-scrollbar { height: 8px; }
.hf-leaderboard__scroll::-webkit-scrollbar-track { background: transparent; margin: 0 var(--spacing-xl); }
.hf-leaderboard__scroll::-webkit-scrollbar-thumb {
  background: var(--color-accent-300);
  border-radius: var(--radius-full);
}
.hf-leaderboard__scroll::-webkit-scrollbar-thumb:hover { background: var(--color-accent-400); }

.hf-leaderboard__slot { flex: none; }            /* fixed creative — never shrinks */

.hf-leaderboard__frame {
  display: block;
  border: 10px solid var(--color-accent-100);    /* #c7eedc, Figma 10px frame */
  background: var(--color-white);
  line-height: 0;                                /* kill inline-img gap */
  flex: none;
}
.hf-leaderboard__frame:focus-visible { outline: none; box-shadow: var(--focus-ring-brand); }

.hf-leaderboard__creative { display: block; }    /* renders at the asset's intrinsic px size */


/* ===================== components/browse.css ===================== */
/* ===========================================================================
   POR 2026 — HIGH-FIDELITY BLOCK: Browse by Condition (.hf-browse)
   ---------------------------------------------------------------------------
   Dark wayfinding band. Source: Figma "Start Links..." (node 19165:4544).
   Mostly COMPOSITION:
     • the band  → .hf-section + the --onbrand dark variant (section.css)
     • the wavy  → the shared .hf-wavy utility (wavy.css), Wavy_lines_colored.svg,
                   --bottom anchored (lower half, per Figma)
     • the chips → the existing .hf-entity-badge in a shared .hf-pillwrap

   NEW here (small, block-scoped): the two-column cluster — each column carries a
   5px accent-400 LEFT rule + an accent subheading + a chip wrap. We had a top-rule
   (Card-Drug) but no left-rule group, so this is the one new element.

   RESPONSIVE (wireframe): the 2-up column grid collapses to 1-up ≤768px; chips
   wrap within each column at every width.
   Tokens only.
   =========================================================================== */

.hf-browse__cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-4xl);                     /* 32 between columns */
}
@media (max-width: 768px) { .hf-browse__cols { grid-template-columns: 1fr; } }   /* wireframe 2→1 */

/* Left-rule column cluster */
.hf-browse__col {
  border-left: 5px solid var(--color-accent-400);   /* #26dc91 */
  padding-left: var(--spacing-3xl);            /* 24 */
  display: flex; flex-direction: column; gap: var(--spacing-lg);   /* 12 */
}
.hf-browse__col-title {
  margin: 0;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-semibold);    /* 600 */
  font-size: var(--font-size-text-xl);         /* 20 */
  line-height: var(--line-height-text-xl);
  color: var(--color-accent-400);
}


/* ===================== components/trust.css ===================== */
/* ===========================================================================
   POR 2026 — HIGH-FIDELITY BLOCK: Trust strip / Brands (.hf-trust)
   ---------------------------------------------------------------------------
   Homepage brand marquee. Source: Figma "Brands" (node 19165:5338) for the
   styling — a soft brand-gradient band holding a white rounded card with a Recia
   heading over a row of partner logos — combined with the WIREFRAME's marquee
   behavior (the Figma comp is a static row; the brief is a slow scroller).

   Behavior: logos scroll slowly RIGHT → LEFT so the row showcases the range of
   partner brands; each logo is a link to that brand's sponsored drug page. Hover
   pauses the scroll so a logo can be clicked. Reduced-motion stops the scroll and
   lets the user pan manually. Works at any width (the marquee is width-agnostic).

     .hf-trust            gradient band
       .hf-trust__card    white rounded card (clips the marquee)
         .hf-trust__head  centered Recia heading + divider
         .hf-trust__marquee   overflow clip / hover-pause / reduced-motion pan
           .hf-trust__track   the moving row (logo set duplicated for a seamless loop)
             .hf-trust__item  a logo LINK → sponsored drug page
   Seamless loop: the track holds the logo set TWICE and animates 0 → -50%; each
   item (incl. the last) carries an equal margin-right so the seam gap matches.
   Tokens only.
   =========================================================================== */

.hf-trust {
  /* Figma gradient: white → brand-mid (#b3c9e9 = brand-200) → white, top→bottom */
  background: var(--gradient-brands);
  padding: var(--spacing-8xl) var(--spacing-7xl);    /* 80 / 64 */
}

.hf-trust__card {
  max-width: 1240px; margin: 0 auto;
  background: var(--bg-primary);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-3xl);                  /* 20 */
  overflow: hidden;                                  /* clip marquee to the rounded card */
}

.hf-trust__head {
  padding: var(--spacing-4xl);                       /* 32 */
  border-bottom: 1px solid var(--border-secondary);
  text-align: center;
}
.hf-trust__title {
  margin: 0;
  font-family: var(--font-family-display);           /* Recia */
  font-weight: var(--font-weight-regular);
  font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem);     /* 24 → 36 */
  line-height: 1.2;
  letter-spacing: -0.72px;
  color: var(--text-primary);
}

/* ---- Marquee ---- */
.hf-trust__marquee { overflow: hidden; padding: var(--spacing-5xl) 0; }   /* 40 */
.hf-trust__track {
  display: flex; align-items: center; width: max-content;
  animation: hf-trust-scroll 60s linear infinite;    /* slow right → left */
}
.hf-trust__marquee:hover .hf-trust__track { animation-play-state: paused; }   /* pause so a logo can be clicked */

.hf-trust__item {
  flex: none; display: flex; align-items: center; justify-content: center;
  height: 72px;
  margin-right: var(--spacing-9xl);                  /* 96 — uniform gap, incl. the loop seam */
  transition: transform var(--motion-duration) var(--motion-ease);
}
.hf-trust__item:hover { transform: scale(1.04); }
.hf-trust__item:focus-visible { outline: none; box-shadow: var(--focus-ring-brand); border-radius: var(--radius-sm); }
.hf-trust__item img { max-height: 100%; max-width: 200px; width: auto; height: auto; display: block; }

@keyframes hf-trust-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Reduced motion — stop the scroll; let the user pan the row manually instead. */
@media (prefers-reduced-motion: reduce) {
  .hf-trust__track { animation: none; }
  .hf-trust__marquee { overflow-x: auto; }
}

/* ---- Small screens ---- */
@media (max-width: 768px) {
  .hf-trust { padding: var(--spacing-6xl) var(--spacing-xl); }   /* 48 / 16 */
  .hf-trust__head { padding: var(--spacing-2xl); }               /* 20 */
  .hf-trust__marquee { padding: var(--spacing-3xl) 0; }          /* 24 */
  .hf-trust__item { height: 48px; margin-right: var(--spacing-7xl); }   /* 64 */
  .hf-trust__item img { max-width: 150px; }
  .hf-trust__track { animation-duration: 45s; }
}


/* ===================== components/register.css ===================== */
/* ===========================================================================
   POR 2026 — HIGH-FIDELITY BLOCK: Push to Register (.hf-register)
   ---------------------------------------------------------------------------
   Conversion CTA shown to NON-REGISTERED users (anon / cookied). Source: Figma
   "Push to Register" (node 19165:3522). Two columns:
     • left  (.hf-register__copy): a 7px accent-500 LEFT rule + the shared accent
       eyebrow (.hf-section__eyebrow) + Recia heading (.hf-section__title) + the
       primary CTA (.hf-btn--primary "Create your free account") + a sign-in link
     • right (.hf-register__list): three benefit cards, each a gradient icon tile
       + a Recia display-xs benefit line on a bg-secondary card

   Reuses: .hf-btn--primary, .hf-section__eyebrow / __title, Lucide icons.
   New here: the block layout, the benefit card, and the brand→accent gradient
   icon tile. Responsive (wireframe): the columns stack ≤900px; benefits are
   already a single column, so the whole block becomes one column on mobile.
   Tokens only.
   =========================================================================== */

.hf-register {
  background: var(--bg-primary);
  border-top: 1px solid var(--border-secondary);
  border-bottom: 1px solid var(--border-secondary);
  padding: var(--spacing-7xl) 0;                     /* 64 */
}
.hf-register__inner {
  max-width: 1240px; margin: 0 auto;
  padding: 0 var(--spacing-4xl);                     /* 32 gutter */
  display: flex; gap: var(--spacing-7xl);            /* 64 between columns */
  align-items: stretch;
}

/* ---- Left: copy + CTA ---- */
.hf-register__copy {
  flex: 1 1 0;
  border-left: 7px solid var(--color-accent-500);    /* Figma accent rule */
  padding-left: var(--spacing-6xl);                  /* 48 */
  display: flex; flex-direction: column; justify-content: center; gap: var(--spacing-6xl);   /* 48 */
}
.hf-register__heading { display: flex; flex-direction: column; }   /* eyebrow + title */
.hf-register__cta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-lg); }   /* 12 */
.hf-register__signin {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-text-xs);               /* 12 */
  line-height: var(--line-height-text-xs);
  color: var(--text-primary);
}
.hf-register__signin a { color: var(--text-link); text-decoration: underline; }   /* canonical link */
.hf-register__signin a:hover { text-decoration-color: var(--color-accent-400); }

/* ---- Right: benefit list ---- */
.hf-register__list { flex: 1 1 0; display: flex; flex-direction: column; gap: var(--spacing-xl); }   /* 16 */
.hf-register__benefit {
  display: flex; align-items: flex-start; gap: var(--spacing-xl);   /* 16 */
  padding: var(--spacing-3xl);                       /* 24 */
  background: var(--bg-secondary);
  border-radius: var(--radius-xl);                   /* 12 */
}
.hf-register__icon {
  flex: none; width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);                   /* 6 */
  color: var(--color-white);
  background: linear-gradient(141deg, var(--color-brand-400) 4%, var(--color-accent-700) 108%);
}
.hf-register__icon svg { width: 24px; height: 24px; }
.hf-register__benefit-text {
  margin: 0;
  font-family: var(--font-family-display);           /* Recia */
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-display-xs);            /* 24 */
  line-height: var(--line-height-display-xs);        /* 32 */
  color: var(--text-primary);
}

/* ===== Responsive ===================================================== */
@media (max-width: 900px) {   /* off-scale: wireframe breakpoint (register two-col stack) */
  .hf-register__inner { flex-direction: column; gap: var(--spacing-5xl); }   /* 40 */
  .hf-register__copy { padding-left: var(--spacing-3xl); }                   /* 24 */
}
@media (max-width: 640px) {
  .hf-register { padding: var(--spacing-6xl) 0; }
  .hf-register__inner { padding: 0 var(--spacing-xl); }
  .hf-register__benefit-text { font-size: var(--font-size-text-xl); line-height: var(--line-height-text-xl); }   /* 20 */
}


/* ===================== components/promo.css ===================== */
/* ===========================================================================
   POR 2026 — HIGH-FIDELITY BLOCK: MDEscapes promo (.hf-promo)
   ---------------------------------------------------------------------------
   Cross-sell promo for the sister property MDEscapes. Source: Figma "Medscapes"
   (node 19165:5538), recolored to the POR accent green (was amber/orange —
   Chris, Aug 2026). A bg-secondary card with a bold 4px accent-400 border,
   image on the left and copy on the right:
     • accent eyebrow "Explore MDEscapes" + Recia display-lg heading + summary
     • an accent-green primary CTA ("Visit MDEscapes", external-link icon)

   Reuses .hf-btn--primary (recolored accent green, scoped here — the filled
   green convention from .hf-entity-badge--toggle.is-on) + Lucide icons; new
   bits are the block layout + the accent-bordered promo card. Responsive:
   image + copy stack ≤768px. Tokens only.
   =========================================================================== */

.hf-promo { background: var(--bg-primary); padding: var(--spacing-7xl) 0; }   /* 64 */
.hf-promo__inner { max-width: 1240px; margin: 0 auto; padding: 0 var(--spacing-4xl); }   /* 32 */

.hf-promo__card {
  display: flex; align-items: center; gap: var(--spacing-6xl);   /* 48 */
  background: var(--bg-secondary);
  border: 4px solid var(--color-accent-400);                     /* #26dc91 */
  border-radius: var(--radius-md);                               /* 8 */
  padding: var(--spacing-6xl);                                   /* 48 */
}

.hf-promo__image {
  flex: none; width: 544px; max-width: 46%;
  aspect-ratio: 544 / 369;
  border-radius: var(--radius-sm); overflow: hidden;
}
.hf-promo__image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Location carousel (crossfade; promo.js) ----------------------------
   The image slot as a carousel: absolutely-stacked <figure> slides that
   crossfade (.is-active), each with a location caption chip, plus dot
   indicators. The SLIDES themselves are data — edit the manifest at the
   top of promo.js (marked ★ EDIT HERE ★); markup is generated, so both
   pages update from one list. Auto-advance/pause also lives in promo.js.
   Tune the fade in ONE place below: --hf-promo-fade. */
.hf-promo__carousel {
  position: relative;
  --hf-promo-fade: 1200ms;   /* soft, unhurried photo crossfade (system tokens top out at 480ms — deliberate exception, documented) */
}
.hf-promo__slide {
  position: absolute; inset: 0; margin: 0;
  opacity: 0;
  transition: opacity var(--hf-promo-fade) var(--ease-standard);
}
.hf-promo__slide.is-active { opacity: 1; }
.hf-promo__loc {
  position: absolute; left: var(--spacing-lg); bottom: var(--spacing-lg);
  display: inline-flex; align-items: center; gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-neutral-900) 62%, transparent);
  color: var(--text-white);
  font-family: var(--font-family-body);
  font-size: var(--font-size-text-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.02em;
}
.hf-promo__loc svg { width: 12px; height: 12px; }
.hf-promo__dots {
  position: absolute; right: var(--spacing-lg); bottom: var(--spacing-lg);
  display: flex; gap: var(--spacing-sm);
}
.hf-promo__dot {
  width: 8px; height: 8px; padding: 0;
  border: 0; border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--text-white) 55%, transparent);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.hf-promo__dot:hover { background: color-mix(in srgb, var(--text-white) 80%, transparent); }
.hf-promo__dot.is-active { background: var(--text-white); }
@media (prefers-reduced-motion: reduce) {
  .hf-promo__slide { transition: none; }
}

.hf-promo__body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: var(--spacing-3xl); }   /* 24 */
.hf-promo__text { display: flex; flex-direction: column; gap: var(--spacing-lg); }   /* 12 */
.hf-promo__t { display: flex; flex-direction: column; gap: var(--spacing-sm); }      /* 6 (eyebrow ↔ heading) */

.hf-promo__eyebrow {
  margin: 0;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-text-xl);                          /* 20 */
  line-height: var(--line-height-text-xl);
  color: var(--color-accent-500);                               /* #12a96d — eyebrow convention */
}
.hf-promo__heading {
  margin: 0;
  font-family: var(--font-family-display);                      /* Recia */
  font-weight: var(--font-weight-regular);
  font-size: clamp(2rem, 4vw + 1rem, 3rem);                     /* 32 → 48 */
  line-height: 1.1;
  letter-spacing: -0.96px;
  color: var(--text-primary);
}
.hf-promo__summary {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-text-md);                          /* 16 */
  line-height: var(--line-height-text-md);                      /* 24 */
  color: var(--text-tertiary);                                  /* #525252 */
}
.hf-promo__summary strong { font-weight: var(--font-weight-bold); }

/* Accent-green recolor of the primary button — scoped to the promo so the shared
   .hf-btn--primary (brand blue) is untouched elsewhere. */
.hf-promo .hf-btn--primary { background: var(--color-accent-500); }
.hf-promo .hf-btn--primary:hover { background: var(--color-accent-600); }

/* ===== Responsive =====================================================
   Stack EARLY (≤1024px): side-by-side only holds up while the copy column is
   wide enough for the 48px heading. Below that we stack — image on top as a
   large full-width banner (drop the aspect lock for a fixed banner height),
   copy below — rather than squeezing a tiny image against tall wrapped text. */
@media (max-width: 1024px) {
  .hf-promo__card { flex-direction: column; align-items: stretch; gap: var(--spacing-4xl); }   /* 32 */
  .hf-promo__image { width: 100%; max-width: none; aspect-ratio: auto; height: 360px; }
}
@media (max-width: 640px) {
  .hf-promo { padding: var(--spacing-6xl) 0; }
  .hf-promo__inner { padding: 0 var(--spacing-xl); }
  .hf-promo__card { padding: var(--spacing-4xl); }        /* 32 */
  .hf-promo__image { height: 240px; }
}


/* ===================== components/newsletter.css ===================== */
/* ===========================================================================
   POR 2026 — HIGH-FIDELITY BLOCK: Newsletter signup (.hf-newsletter)
   ---------------------------------------------------------------------------
   Push to sign up for the weekly digest. Source: Figma "Newsleeter Signup"
   (node 19165:5568). A centered brand-gradient band (white → brand-200 → white,
   same as the Brands strip) with the wavy lines low in the frame, holding a
   white mail-icon tile, an accent eyebrow, a Recia heading, support copy, and a
   form (email input + Subscribe).

   Reuses: the Brands gradient, the shared .hf-wavy utility (bottom-anchored),
   the primary button (.hf-btn--primary), and the hero search bar's brand halo
   on the email field. New here: the block layout + the icon tile + the email
   field. Responsive: the form stacks (input over button) on narrow screens.
   Tokens only.
   =========================================================================== */

.hf-newsletter {
  position: relative; overflow: hidden;              /* clip the wavy layer */
  background: var(--gradient-brands);                 /* shared brand wash (tokens.css) */
  border-top: 1px solid var(--border-secondary);
  border-bottom: 1px solid var(--border-secondary);
  padding: var(--spacing-8xl) var(--spacing-4xl);    /* 80 / 32 */
}
.hf-newsletter__inner {
  position: relative; z-index: 1;                    /* above .hf-wavy */
  max-width: 640px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--spacing-lg);                            /* 12 */
}

.hf-newsletter__iconbox {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  background: var(--color-white);
  border-radius: var(--radius-sm);                   /* 6 */
  box-shadow: var(--shadow-sm);
  color: var(--color-accent-600);                    /* #0f9a62 mail glyph */
  margin-bottom: var(--spacing-xs);
}
.hf-newsletter__iconbox svg { width: 24px; height: 24px; }

.hf-newsletter__eyebrow {
  margin: 0;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-text-xl);               /* 20 */
  line-height: var(--line-height-text-xl);
  color: var(--color-accent-600);                    /* #0f9a62 */
}
.hf-newsletter__heading {
  margin: 0;
  font-family: var(--font-family-display);           /* Recia */
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-display-sm);            /* 30 */
  line-height: var(--line-height-display-sm);        /* 38 */
  color: var(--text-primary);
}
.hf-newsletter__support {
  margin: 0; max-width: 52ch;
  font-family: var(--font-family-body);
  font-size: var(--font-size-text-lg);               /* 18 */
  line-height: var(--line-height-text-lg);           /* 28 */
  color: var(--text-primary);
}

/* ---- Registration action ---- */
.hf-newsletter__form {
  display: flex; justify-content: center; gap: var(--spacing-2xl);            /* 20 */
  width: 100%; max-width: 480px;
  margin-top: var(--spacing-md);                     /* +8 */
}

/* ===== Responsive ===================================================== */
@media (max-width: 640px) {
  .hf-newsletter { padding: var(--spacing-6xl) var(--spacing-xl); }   /* 48 / 16 */
}
@media (max-width: 560px) {
  .hf-newsletter__form { flex-direction: column; align-items: center; gap: var(--spacing-xl); }
  .hf-newsletter__form .hf-btn { width: auto; }
}


/* ===================== components/footer.css ===================== */
/* ===========================================================================
   POR 2026 — HIGH-FIDELITY PATTERN: Global footer (.hf-footer)
   ---------------------------------------------------------------------------
   Omnipresent footer, defined ONCE and injected on every template by footer.js
   (single source of truth). Source: Figma Footer (node 19165:5761).

   Dark brand-700 surface with the blue-slate GRAY ramp for text. Desktop = a
   5-column grid (wide brand column + Reference / Look-up / Editorial / Company).
   Responsive (wireframe plasticity): 5 → 3 cols (brand full-width) ≤1099px →
   2 cols ≤768px. Sticky-footer: pins to the bottom of the content column on
   short pages. Tokens only (13px footer text is Figma-exact, kept as a literal).
   =========================================================================== */

/* ---- Consent banner (v4.51 — design round item 8) ------------------------
   THE canonical cookie/privacy notice — replaces the current site's green bar.
   Injected by shell.js on every shell page; dismissal remembered in
   localStorage ('por-hf-consent'). Quiet by design: white surface, one border,
   canonical buttons + link — a notice, not a takeover. Production wires
   Accept/Decline to consent mode; the prototype only remembers the choice. */
.hf-consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: var(--bg-primary); border-top: 1px solid var(--border-primary); }
.hf-consent--demo { position: static; border: 1px solid var(--border-primary); border-radius: var(--radius-lg); }   /* v4.52: pattern-library specimen — in-flow copy of the banner */
.hf-consent__inner { max-width: calc(1240px + 2 * var(--spacing-4xl)); margin: 0 auto; padding: var(--spacing-xl) var(--spacing-4xl); display: flex; align-items: center; gap: var(--spacing-3xl); }
.hf-consent__text { flex: 1; margin: 0; font-size: var(--font-size-text-sm); line-height: var(--line-height-text-sm); color: var(--text-secondary); }
.hf-consent__text strong { color: var(--text-primary); }
.hf-consent__actions { display: flex; gap: var(--spacing-md); flex: none; }
.hf-consent-settings { border: 0; background: none; padding: 0; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
.hf-consent-settings:hover { color: var(--text-link); }
@media (max-width: 768px) {
  .hf-consent__inner { flex-direction: column; align-items: stretch; gap: var(--spacing-lg); padding: var(--spacing-xl) var(--spacing-3xl); }
  .hf-consent__actions { justify-content: flex-end; }
}

.hf-footer {
  background: var(--bg-secondary-solid);        /* #13315c (brand-700) */
  color: var(--color-gray-300);
  padding: var(--spacing-7xl) var(--spacing-4xl) var(--spacing-3xl);   /* 64 / 32 / 24 */
}
.hf-footer__inner {
  max-width: 1240px; margin: 0 auto;
  display: flex; flex-direction: column; gap: var(--spacing-6xl);      /* 48 */
}

/* ---- Column grid ---- */
.hf-footer__cols {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;   /* brand(2fr) + 4 link groups */
  gap: var(--spacing-4xl);                        /* 32 */
}

/* Brand column */
.hf-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-lg); }   /* align-items:flex-start so the logo keeps its aspect (no cross-axis stretch) */
.hf-footer__logo { height: 42px; width: auto; display: block; }
.hf-footer__tagline {
  margin: 0; padding-left: var(--spacing-5xl);   /* 40 — aligns under the wordmark */
  font-size: 13px; line-height: 19.5px;
  color: var(--color-gray-400);                  /* #94a4ba */
  max-width: 42ch;
}

/* Link groups */
.hf-footer__col { display: flex; flex-direction: column; gap: var(--spacing-lg); }
.hf-footer__heading {
  margin: 0;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-bold);          /* 700 */
  font-size: var(--font-size-text-sm);           /* 14 */
  line-height: var(--line-height-text-sm);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-white);
}
.hf-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.hf-footer__list a {
  font-size: 13px; line-height: 19.5px;
  color: var(--color-gray-300);                  /* #dde5ee */
  text-decoration: underline;
  text-decoration-color: transparent;            /* underline hidden at rest… */
  text-underline-offset: 3px;
  transition: color var(--motion-duration) var(--motion-ease),
              text-decoration-color var(--motion-duration) var(--motion-ease);
}
.hf-footer__list a:hover { color: var(--color-white); text-decoration-color: var(--color-accent-400); }  /* accent-tinted underline fades in with the color */
.hf-footer__ext { display: inline-flex; width: 14px; height: 14px; vertical-align: -2px; margin-left: var(--spacing-xs); }
.hf-footer__ext svg { width: 14px; height: 14px; }

/* Copyright row */
.hf-footer__bottom {
  border-top: 1px solid var(--color-gray-700);   /* #334155 */
  padding-top: var(--spacing-xl);                /* ~17 */
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; color: var(--color-gray-500); /* #64748b */
}

/* Sticky footer — pin to the bottom of the content column on short pages. */
.hf-content:has(> .hf-footer) { display: flex; flex-direction: column; }
.hf-content > .hf-footer { margin-top: auto; }

/* ===== Responsive (wireframe: 5 → 3 → 2) =============================== */
@media (max-width: 1100px) {
  /* Brand banner + one aligned row of ALL FOUR link groups (3 cols orphaned
     COMPANY beside empty cells — Chris, 2026-08-19). The tagline KEEPS its
     40px indent at every width — it aligns under the "P" of the wordmark,
     past the logo symbol (Chris, 2026-08-19) — and widens to use the measure.
     2×2 below 768 — never an orphan. */
  .hf-footer__cols { grid-template-columns: repeat(4, 1fr); row-gap: var(--spacing-6xl); }
  .hf-footer__cols > .hf-footer__brand { grid-column: 1 / -1; }   /* brand on its own row */
  .hf-footer__tagline { max-width: 64ch; }
}
@media (max-width: 768px) {
  .hf-footer { padding: var(--spacing-6xl) var(--spacing-xl) var(--spacing-3xl); }
  .hf-footer__cols { grid-template-columns: repeat(2, 1fr); }
  .hf-footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--spacing-sm); }
}


/* ===================== drug actions (CTA menu) + auth modals ===================== */
/* Source: Figma "Menu-InPage" 19142-4885. The left-rail Actions card AND the mobile
   Actions bottom-sheet render from ONE data-driven config (drug-actions.js), so they
   never drift. Favorites is auth-gated; contact-type CTAs open the auth-aware inquiry
   modal (confirm/recap when signed-in, full form when signed-out). Tokens only. */

/* ---- The Actions card (desktop left rail) ---------------------------------- */
.hf-actions {
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--bg-primary);
}
.hf-actions__header {
  background: var(--bg-brand-solid);                 /* navy #194689 */
  color: var(--text-white);
  padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-md);
  font-family: var(--font-family-body);
  font-size: var(--font-size-text-xxs);              /* Figma micro-eyebrow (10px) */
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---- A single action row (SHARED by the card + the mobile sheet) ----------- */
.hf-actions__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);                            /* 12 */
  width: 100%;
  padding: var(--spacing-lg) var(--spacing-xl);      /* 12 / 16 */
  background: var(--bg-primary);
  border: 0;
  border-top: 1px solid var(--border-secondary);     /* divider between rows / under header */
  font-family: var(--font-family-body);
  text-align: left;
  text-decoration: none;
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color var(--motion-duration) var(--motion-ease);
}
.hf-actions__item:hover { background: var(--bg-primary-hover); }
.hf-actions__item:focus-visible { outline: none; box-shadow: var(--focus-ring-brand); }
.hf-actions__item-icon {
  flex: none;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-secondary);
  background: var(--bg-primary);
  color: var(--text-tertiary);
}
.hf-actions__item-icon svg { width: 16px; height: 16px; }
/* Favorites (primary), NOT yet saved — a soft accent TINT so it reads as an
   available action, not an "on" state (the solid fill is reserved for Saved). */
.hf-actions__item--primary .hf-actions__item-icon {
  background: var(--color-accent-50);            /* #e8f8f0 pale mint */
  border-color: var(--color-accent-100);         /* subtle definition on the tint */
  color: var(--color-accent-600);                /* #0f9a62 green outline heart */
}
.hf-actions__item-text { min-width: 0; display: flex; flex-direction: column; }
.hf-actions__item-label {
  font-size: var(--font-size-text-sm);               /* 14 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-text-sm);
  color: var(--text-primary);
}
.hf-actions__item-detail {
  font-size: var(--font-size-text-xs);               /* 12 */
  line-height: var(--line-height-text-xs);
  color: var(--text-quaternary);
}
/* Saved (favorited) — the heart FILLS IN (the universal "saved" tell), reinforced by
   the "Saved" label + aria-pressed + toast. A subtle one-time pop marks the moment. */
.hf-actions__item--primary.is-saved .hf-actions__item-icon {
  background: var(--color-accent-700);           /* solid green = "on" */
  border-color: transparent;
  color: var(--text-white);                      /* white filled heart */
}
.hf-actions__item.is-saved .hf-actions__item-icon svg { fill: currentColor; }
.hf-actions__item.is-saved .hf-actions__item-icon { animation: hf-fav-pop 260ms var(--motion-ease); }
@keyframes hf-fav-pop { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .hf-actions__item.is-saved .hf-actions__item-icon { animation: none; } }
.hf-actions__ext { margin-left: auto; flex: none; width: 16px; height: 16px; color: var(--text-quaternary); }

/* In the mobile Actions sheet, the rows sit on the plain surface (no card). */
.hf-sheet .hf-actions__item:first-child { border-top: 0; }

/* ---- Shared modal shell (auth-gate + inquiry) ----------------------------- */
.hf-modal { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: var(--spacing-xl); }
.hf-modal[hidden] { display: none; }                 /* author display must yield to hidden */
.hf-modal__backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--color-brand-900) 45%, transparent); }
.hf-modal__panel {
  position: relative;
  width: 100%;
  background: var(--bg-primary);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-overlay);
  max-height: 90vh;
  overflow-y: auto;
}
.hf-modal__close {
  position: absolute; top: var(--spacing-lg); right: var(--spacing-lg);
  width: 32px; height: 32px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-primary); border: 1px solid var(--border-secondary);
  border-radius: var(--radius-md); color: var(--text-tertiary); cursor: pointer;
  transition: border-color var(--motion-duration) var(--motion-ease), background-color var(--motion-duration) var(--motion-ease), color var(--motion-duration) var(--motion-ease);
}
/* Match the canonical icon-button hover (ISI minimize + sub-header pickers): accent border + accent-50 tint. */
.hf-modal__close:hover { border-color: var(--color-accent-500); background: var(--color-accent-50); color: var(--text-primary); }
.hf-modal__close:focus-visible { outline: none; box-shadow: var(--focus-ring-brand); }
.hf-modal__close svg { width: 18px; height: 18px; }

/* ---- Auth-gate (Favorites, signed-out) ------------------------------------ */
.hf-authgate .hf-modal__panel { max-width: 460px; padding: var(--spacing-6xl); text-align: center; }
.hf-authgate__icon {
  width: 48px; height: 48px; margin: 0 auto var(--spacing-xl);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full);
  background: var(--color-accent-50); color: var(--color-accent-700);
}
.hf-authgate__icon svg { width: 24px; height: 24px; }
.hf-authgate__title { margin: 0 0 var(--spacing-md); font-family: var(--font-family-display); font-size: var(--font-size-display-xs); font-weight: var(--font-weight-semibold); color: var(--text-primary); }
.hf-authgate__text { margin: 0 0 var(--spacing-2xl); font-size: var(--font-size-text-md); line-height: var(--line-height-text-md); color: var(--text-tertiary); }
.hf-authgate__actions { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-lg); }
.hf-authgate__signin { font-size: var(--font-size-text-sm); color: var(--text-tertiary); text-decoration: none; }
.hf-authgate__signin strong { color: var(--text-link); font-weight: var(--font-weight-semibold); text-decoration: underline; }   /* canonical link */

/* ---- Inquiry modal (auth-aware contact) ----------------------------------- */
.hf-inquiry .hf-modal__panel { max-width: 640px; display: flex; flex-direction: column; overflow: hidden; }
/* Long-form modal scroll model (Chris, 2026-08-19): header + footer PINNED,
   only the body scrolls. The scroll-aware shadow (background-attachment:
   local — same CSS-only technique as the data table's horizontal cue) shows
   at whichever edge has more content and vanishes when you reach it. */
.hf-inquiry__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spacing-lg); padding: var(--spacing-3xl) var(--spacing-3xl) var(--spacing-xl); background: var(--gradient-modal-head); border-bottom: 1px solid var(--border-primary); }
.hf-inquiry__eyebrow { margin: 0 0 2px; font-size: var(--font-size-text-xs); text-transform: uppercase; letter-spacing: 0.08em; font-weight: var(--font-weight-semibold); color: var(--text-brand-secondary); }
.hf-inquiry__title { margin: 0; font-family: var(--font-family-display); font-size: var(--font-size-display-xs); font-weight: var(--font-weight-semibold); color: var(--text-primary); }
.hf-inquiry__sub { margin: var(--spacing-xs) 0 0; font-size: var(--font-size-text-sm); color: var(--text-tertiary); }
.hf-inquiry__close { position: static; }
.hf-inquiry__body {
  padding: var(--spacing-3xl); display: flex; flex-direction: column; gap: var(--spacing-xl);
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  background:
    linear-gradient(var(--bg-primary) 30%, transparent) 0 0 / 100% 32px,
    linear-gradient(transparent, var(--bg-primary) 70%) 0 100% / 100% 32px,
    radial-gradient(farthest-side at 50% 0, color-mix(in srgb, var(--color-brand-900) 16%, transparent), transparent) 0 0 / 100% 14px,
    radial-gradient(farthest-side at 50% 100%, color-mix(in srgb, var(--color-brand-900) 16%, transparent), transparent) 0 100% / 100% 14px;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
}
.hf-inquiry__footer { flex: none; padding: var(--spacing-xl) var(--spacing-3xl) var(--spacing-3xl); display: flex; justify-content: flex-end; gap: var(--spacing-md); border-top: 1px solid var(--border-secondary); }
/* request-type picker */






/* fields */
.hf-inquiry__fields { display: flex; flex-direction: column; gap: var(--spacing-lg); }
.hf-inquiry__field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-lg); }
/* City / State / ZIP — city flexes, state + ZIP stay compact. */
.hf-inquiry__field-row--csz { grid-template-columns: 1fr 84px 108px; }
.hf-inquiry__field { display: flex; flex-direction: column; gap: var(--spacing-xs); font-size: var(--font-size-text-sm); color: var(--text-secondary); }
.hf-inquiry__field span em { font-style: normal; color: var(--text-quaternary); font-weight: var(--font-weight-regular); }
.hf-inquiry__field input, .hf-inquiry__field textarea, .hf-inquiry__field select {
  font-family: var(--font-family-body); font-size: var(--font-size-text-md); color: var(--text-primary);
  padding: var(--spacing-md) var(--spacing-lg); border: 1px solid var(--border-secondary); border-radius: var(--radius-md); background: var(--bg-primary);
}
.hf-inquiry__field input, .hf-inquiry__field textarea { font-family: var(--font-family-mono); }   /* typed text in DM Mono (canonical) — select stays body */
.hf-inquiry__field textarea { resize: vertical; min-height: calc(3 * var(--line-height-text-md)); }   /* grow taller only — never shrink below its initial 3 rows */
.hf-inquiry__field select { -webkit-appearance: none; appearance: none; padding-right: var(--spacing-3xl);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--spacing-md) center; cursor: pointer; }
.hf-inquiry__field input:focus-visible, .hf-inquiry__field textarea:focus-visible, .hf-inquiry__field select:focus-visible { outline: none; border-color: var(--color-brand-400); box-shadow: var(--focus-ring-brand); }
/* Invalid field — tied to aria-invalid so the visual + a11y state are one source. */
.hf-inquiry__field input[aria-invalid="true"], .hf-inquiry__field textarea[aria-invalid="true"] { border-color: var(--border-error); }
.hf-inquiry__field input[aria-invalid="true"]:focus-visible, .hf-inquiry__field textarea[aria-invalid="true"]:focus-visible { border-color: var(--color-red-500); box-shadow: var(--focus-ring-error); }
/* Inline error message (REUSABLE) — icon + text so it never relies on colour alone. */
.hf-field-error { display: flex; align-items: center; gap: var(--spacing-xs); margin-top: var(--spacing-xs); font-size: var(--font-size-text-xs); line-height: var(--line-height-text-xs); color: var(--text-error); }
.hf-field-error[hidden] { display: none; }   /* the author display:flex must yield to the hidden attribute (error is revealed by JS on submit) */
.hf-field-error svg { width: 14px; height: 14px; flex: none; }
.hf-inquiry__footnote { display: flex; align-items: center; gap: var(--spacing-sm); margin: 0; font-size: var(--font-size-text-xs); color: var(--text-quaternary); }
.hf-inquiry__footnote svg { width: 14px; height: 14px; flex: none; }
/* signed-in confirm / recap */
.hf-inquiry__lead { margin: 0; font-size: var(--font-size-text-md); line-height: var(--line-height-text-md); color: var(--text-secondary); }
.hf-inquiry__recap { border: 1px solid var(--border-secondary); border-radius: var(--radius-md); padding: var(--spacing-xl); background: var(--bg-secondary); }

.hf-inquiry__recap-list { list-style: none; margin: 0 0 var(--spacing-lg); padding: 0; display: flex; flex-direction: column; gap: var(--spacing-md); }
.hf-inquiry__recap-list li { display: flex; align-items: center; gap: var(--spacing-md); font-size: var(--font-size-text-sm); color: var(--text-primary); }
.hf-inquiry__recap-list svg { width: 16px; height: 16px; flex: none; color: var(--text-tertiary); }
.hf-inquiry__recap-head { display: flex; align-items: center; justify-content: flex-end; gap: var(--spacing-md); margin-bottom: var(--spacing-md); }

.hf-inquiry__recap-edit { display: inline-flex; align-items: center; gap: var(--spacing-xs); padding: 0; border: 0; background: none; font-family: var(--font-family-body); font-size: var(--font-size-text-sm); font-weight: var(--font-weight-medium); color: var(--color-brand-600); cursor: pointer; }
.hf-inquiry__recap-edit svg { width: 14px; height: 14px; }
/* success */
.hf-inquiry__success { text-align: center; padding: var(--spacing-2xl) 0; }
.hf-inquiry__success-icon { display: inline-flex; color: var(--color-accent-600); margin-bottom: var(--spacing-lg); }
.hf-inquiry__success-icon svg { width: 40px; height: 40px; }
.hf-inquiry__success-title { margin: 0 0 var(--spacing-md); font-family: var(--font-family-display); font-size: var(--font-size-display-xs); font-weight: var(--font-weight-semibold); color: var(--text-primary); }
.hf-inquiry__success-text { margin: 0; font-size: var(--font-size-text-md); line-height: var(--line-height-text-md); color: var(--text-tertiary); }

/* ---- Modals on small screens — the wider desktop panel needs tighter gutters
   and single-column form rows so nothing crams. ----------------------------- */
@media (max-width: 560px) {
  .hf-modal { padding: var(--spacing-md); }                 /* near-full-width panel */
  .hf-authgate .hf-modal__panel { padding: var(--spacing-4xl); }
  .hf-inquiry__header { padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-lg); }
  .hf-inquiry__body { padding: var(--spacing-xl); }
  .hf-inquiry__footer { padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-xl); }
    /* request types stack */
  .hf-inquiry__field-row { grid-template-columns: 1fr; }    /* form fields stack */
}

/* ---- Toast ---------------------------------------------------------------- */
.hf-toast {
  position: fixed; left: 50%; top: calc(56px + var(--spacing-xl)); bottom: auto; z-index: 1200;
  transform: translateX(-50%) translateY(-8px);
  background: var(--color-brand-900); color: var(--text-white);
  padding: var(--spacing-md) var(--spacing-xl); border-radius: var(--radius-full);
  font-size: var(--font-size-text-sm); box-shadow: var(--shadow-overlay);
  opacity: 0; pointer-events: none; transition: opacity var(--motion-duration) var(--motion-ease), transform var(--motion-duration) var(--motion-ease);
}
.hf-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- Floating "View as" review control (demo only) ------------------------ */
.hf-viewas { position: fixed; bottom: var(--spacing-2xl); right: var(--spacing-2xl); z-index: 50; display: flex; align-items: center; gap: var(--spacing-md); background: var(--bg-primary); border: 1px solid var(--border-secondary); border-radius: var(--radius-md); padding: var(--spacing-sm) var(--spacing-md); box-shadow: var(--shadow-md); }
.hf-viewas__label { font-size: var(--font-size-text-xs); color: var(--text-quaternary); }
.hf-seg { display: inline-flex; border: 1px solid var(--border-secondary); border-radius: var(--radius-sm); overflow: hidden; }
.hf-seg button { appearance: none; border: 0; border-right: 1px solid var(--border-secondary); background: var(--bg-primary); color: var(--text-secondary); font-family: var(--font-family-body); font-weight: var(--font-weight-medium); font-size: var(--font-size-text-sm); padding: var(--spacing-xs) var(--spacing-md); cursor: pointer; }
.hf-seg button:last-child { border-right: 0; }
.hf-seg button.on { background: var(--bg-brand-solid); color: var(--text-white); }
.hf-seg button:disabled { color: var(--text-quaternary); background: var(--bg-secondary); cursor: not-allowed; }   /* e.g. no distinct "cookied" state on this template */
@media (max-width: 768px) { .hf-viewas { bottom: var(--spacing-md); right: var(--spacing-md); } }   /* tuck into the corner on small screens (promoted from the page-local copies) */

/* ==========================================================================
   REGISTER FLOW — pre-auth journey (register-flow.html / register-flow.js).
   Ported from the wireframe; token-routed + reuses .hf-btn / .hf-input.
   ========================================================================== */
.hf-register-page {
  margin: 0; color: var(--text-primary); font-family: var(--font-family-body);
  -webkit-font-smoothing: antialiased; min-height: 100vh;
  /* Two fixed, viewport-anchored layers that frame the flow with subtle brand color:
       1. TOP — a soft brand wash under the header, fading out ~340px down (just past
          the top edge of the form card).
       2. BOTTOM — the drug-hero wash (white → faint brand tint) rising from the base. */
  background-color: var(--bg-secondary);
  background-image:
    linear-gradient(to bottom, color-mix(in srgb, var(--color-brand-600) 10%, transparent) 0, transparent 340px),
    var(--gradient-drughero);
  background-attachment: fixed, fixed;
  background-repeat: no-repeat, no-repeat;
}
/* ---- Auth chrome is LIGHT for the whole journey (Chris, 2026-08-14 —
   Phase 3 decision #3): sign-in + password-reset match the register flow and
   the rest of the product. The former deep-navy .hf-register-page--dark
   variant was pruned (unused variants invite drift; reintroduce only with an
   assigned role). ---- */

/* White wavy graphic locked to the bottom of the VIEWPORT, over the gradient but
   behind the content. Reuses the shared .hf-wavy utility inside a fixed wrapper. */
.hf-register__wavy { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.hf-register__topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-lg); padding: var(--spacing-xl) var(--spacing-4xl); background: var(--bg-primary); border-bottom: 1px solid var(--border-secondary); }
.hf-register__topbar-brand img { height: 42px; display: block; }   /* match canonical header lockup (.hf-header__logo-img--full, Figma H=42) */
.hf-register__topbar-signin { font-size: var(--font-size-text-sm); color: var(--text-tertiary); white-space: nowrap; }
.hf-register__topbar-signin a { color: var(--text-link); text-decoration: underline; }
.hf-register__canvas { max-width: 560px; margin: 0 auto; padding: var(--spacing-6xl) var(--spacing-3xl) var(--spacing-7xl); }

/* Progress stepper */
.hf-register__progress { list-style: none; display: flex; align-items: center; gap: var(--spacing-md); margin: 0 0 var(--spacing-4xl); padding: 0; }
.hf-register__pstep { display: flex; align-items: center; gap: var(--spacing-sm); color: var(--text-quaternary); font-size: var(--font-size-text-sm); font-weight: var(--font-weight-medium); }
.hf-register__pnum { flex: none; width: 24px; height: 24px; border-radius: var(--radius-full); border: 1px solid var(--border-primary); display: flex; align-items: center; justify-content: center; font-size: var(--font-size-text-xs); }
.hf-register__pnum svg { width: 14px; height: 14px; }
.hf-register__pstep.is-active { color: var(--text-primary); }
.hf-register__pstep.is-active .hf-register__pnum { background: var(--bg-brand-solid); border-color: transparent; color: var(--text-white); }
.hf-register__pstep.is-done { color: var(--text-brand-secondary); }
.hf-register__pstep.is-done .hf-register__pnum { background: var(--color-accent-500); border-color: transparent; color: var(--text-white); }
.hf-register__psep { flex: 1; height: 1px; background: var(--border-secondary); }
.hf-register__plabel { white-space: nowrap; }

/* Card + typography */
.hf-register__card { background: var(--bg-primary); border: 1px solid var(--border-secondary); border-radius: var(--radius-xl); padding: var(--spacing-6xl); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: var(--spacing-3xl); }
.hf-register__title { margin: 0; font-family: var(--font-family-display); font-weight: var(--font-weight-medium); font-size: var(--font-size-display-sm); line-height: var(--line-height-display-sm); color: var(--text-primary); }
.hf-register__lede { margin: 0; font-size: var(--font-size-text-md); line-height: var(--line-height-text-md); color: var(--text-tertiary); }
.hf-register__lede strong { color: var(--text-primary); font-weight: var(--font-weight-semibold); }   /* e.g. "free" emphasis */
.hf-register__alt { margin: 0; text-align: center; font-size: var(--font-size-text-sm); color: var(--text-quaternary); }
.hf-register__alt a { color: var(--text-link); text-decoration: underline; }

/* Benefits (welcome) */
.hf-register__benefits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--spacing-xl); }
.hf-register__benefits li { display: flex; gap: var(--spacing-lg); align-items: flex-start; }
.hf-register__benefit-icon { flex: none; width: 40px; height: 40px; border-radius: var(--radius-full); background: var(--color-accent-50); color: var(--color-accent-700); display: flex; align-items: center; justify-content: center; }
.hf-register__benefit-icon svg { width: 20px; height: 20px; }
.hf-register__benefits div { display: flex; flex-direction: column; gap: 2px; }
.hf-register__benefits strong { font-size: var(--font-size-text-md); font-weight: var(--font-weight-semibold); color: var(--text-primary); }
.hf-register__benefits span { font-size: var(--font-size-text-sm); line-height: var(--line-height-text-sm); color: var(--text-tertiary); }

/* Fields (reuse .hf-input) */
/* ===== Form field — canonical NEUTRAL atom (.hf-field; audit v3.40 #20) =====
   One labeled-field vocabulary for every form: label over control, optional
   hint, and a 2-up row. Promoted from the register flow — the register page's
   .hf-register__field* names are grouped here as aliases of the SAME rules
   (contact previously invented a third .cf__* vocabulary; retired). Use
   .hf-field on all new forms. */
.hf-field, .hf-register__field { display: flex; flex-direction: column; gap: var(--spacing-md); }
.hf-field__label, .hf-register__field-label { font-size: var(--font-size-text-sm); font-weight: var(--font-weight-medium); color: var(--text-secondary); }
.hf-field__label em, .hf-register__field-label em { font-style: normal; color: var(--text-quaternary); font-weight: var(--font-weight-regular); }
.hf-field__hint, .hf-register__field-hint { font-size: var(--font-size-text-sm); color: var(--text-quaternary); }
.hf-field-row, .hf-register__field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-lg); }
@media (max-width: 560px) { .hf-field-row { grid-template-columns: 1fr; } }
.hf-register__field-wrap { position: relative; }
.hf-register__field-wrap .hf-input { padding-right: 44px; }
.hf-register__reveal { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; color: var(--text-quaternary); cursor: pointer; }
.hf-register__reveal svg { width: 18px; height: 18px; }
/* Select variant of the Input atom */
select.hf-input { -webkit-appearance: none; appearance: none; padding-right: var(--spacing-3xl); cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--spacing-md) center; }

/* NPI confirm card */
.hf-register__confirm { display: flex; gap: var(--spacing-lg); padding: var(--spacing-2xl); border: 1px solid var(--border-secondary); border-radius: var(--radius-md); background: var(--bg-secondary); }
.hf-register__confirm-avatar { flex: none; width: 48px; height: 48px; border-radius: var(--radius-full); background: var(--bg-brand-solid); color: var(--text-white); display: flex; align-items: center; justify-content: center; font-weight: var(--font-weight-semibold); }
.hf-register__confirm-body { display: flex; flex-direction: column; gap: var(--spacing-md); }   /* 8 — space the info rows */
.hf-register__confirm-name { margin: 0; font-size: var(--font-size-text-md); font-weight: var(--font-weight-semibold); color: var(--text-primary); }
.hf-register__confirm-row { margin: 0; display: flex; align-items: center; gap: var(--spacing-sm); font-size: var(--font-size-text-sm); color: var(--text-tertiary); }
.hf-register__confirm-row svg { flex: none; width: 16px; height: 16px; color: var(--icon-fg-accent); }

/* Help + skip */
.hf-register__help { margin: 0; display: flex; align-items: center; gap: var(--spacing-sm); font-size: var(--font-size-text-sm); color: var(--text-tertiary); }
.hf-register__help svg { flex: none; width: 16px; height: 16px; }
.hf-register__help a { color: var(--text-link); text-decoration: underline; }
.hf-register__skip { margin: 0; text-align: center; }
.hf-register__skip-link { display: inline-flex; align-items: center; gap: var(--spacing-xs); background: none; border: 0; color: var(--text-link); font-family: var(--font-family-body); font-size: var(--font-size-text-sm); font-weight: var(--font-weight-semibold); text-decoration: underline; cursor: pointer; }
.hf-register__skip-link svg { width: 16px; height: 16px; }

/* Personalize — chips */
.hf-fieldset, .hf-register__fieldset { display: flex; flex-direction: column; gap: var(--spacing-xl); }   /* neutral alias — the .hf-field stack rhythm */
.hf-register__fieldset-head { display: flex; flex-direction: column; gap: var(--spacing-xs); }
/* Chips reuse the .hf-entity-badge--toggle pattern; this is just the wrapping row. */
.hf-register__chips { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); }

/* Account — toggle switch + preferences + checkbox */

.hf-register__rule { width: 100%; height: 0; margin: var(--spacing-xs) 0; border: 0; border-top: 1px solid var(--border-secondary); }   /* unlabeled group separator (account fields ↕ email-preference toggles) */

.hf-register__pref { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-lg); }
.hf-register__pref-copy { display: flex; flex-direction: column; gap: 2px; }
.hf-register__pref-label { font-size: var(--font-size-text-md); font-weight: var(--font-weight-medium); color: var(--text-primary); }
.hf-register__pref-helper { font-size: var(--font-size-text-sm); line-height: var(--line-height-text-sm); color: var(--text-tertiary); }
/* Canonical toggle switch atom — shared by the register opt-ins and the profile
   preferences. (Promoted from .hf-register__toggle; both now emit .hf-toggle.) */
.hf-toggle { flex: none; width: 44px; height: 24px; padding: 0; border: 0; border-radius: var(--radius-full); background: var(--color-neutral-300); position: relative; cursor: pointer; transition: background-color var(--motion-duration) var(--motion-ease); }
.hf-toggle__dot { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: var(--radius-full); background: var(--bg-primary); box-shadow: var(--shadow-xs); transition: transform var(--motion-duration) var(--motion-ease); }
.hf-toggle.is-on { background: var(--color-accent-500); }
.hf-toggle.is-on .hf-toggle__dot { transform: translateX(20px); }
.hf-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring-brand); }
.hf-register__checkbox { display: flex; align-items: flex-start; gap: var(--spacing-md); font-size: var(--font-size-text-sm); line-height: var(--line-height-text-sm); color: var(--text-secondary); }
.hf-register__checkbox input { flex: none; margin-top: 2px; width: 16px; height: 16px; accent-color: var(--color-brand-600); }
.hf-register__checkbox a { color: var(--text-link); text-decoration: underline; }

/* Actions row */
.hf-register__actions { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); }
.hf-register__actions--center { justify-content: center; }

/* Success step */
/* Crest — the round accent icon disc. Neutral name (.hf-crest); the register
   flow's .hf-register__crest is an alias (contact borrowed it cross-context). */
.hf-crest, .hf-register__crest { align-self: center; width: 64px; height: 64px; border-radius: var(--radius-full); background: var(--color-accent-50); color: var(--color-accent-700); display: flex; align-items: center; justify-content: center; }
.hf-crest svg, .hf-register__crest svg { width: 34px; height: 34px; }
.hf-register__nudge { display: flex; gap: var(--spacing-lg); padding: var(--spacing-lg); border-radius: var(--radius-md); background: var(--bg-warning-subtle); border: 1px solid var(--border-warning); }
.hf-register__nudge > svg, .hf-register__nudge > i { flex: none; width: 20px; height: 20px; color: var(--icon-warning); }
.hf-register__nudge-title { margin: 0 0 2px; font-size: var(--font-size-text-sm); font-weight: var(--font-weight-semibold); color: var(--text-primary); }
.hf-register__nudge-text { margin: 0; font-size: var(--font-size-text-sm); line-height: var(--line-height-text-sm); color: var(--text-tertiary); }
.hf-register__donecards { display: flex; flex-direction: column; gap: var(--spacing-md); }
.hf-register__donecard { display: flex; flex-direction: column; gap: var(--spacing-xs); padding: var(--spacing-lg) var(--spacing-xl); border: 1px solid var(--border-secondary); border-radius: var(--radius-md); text-decoration: none; transition: border-color var(--motion-duration) var(--motion-ease), box-shadow var(--motion-duration) var(--motion-ease); }
.hf-register__donecard:hover { border-color: var(--color-accent-500); box-shadow: var(--shadow-sm); }
.hf-register__donecard--primary { border-color: var(--color-brand-300); background: var(--color-brand-50); }
.hf-register__donecard-eyebrow { font-size: var(--font-size-text-xs); text-transform: uppercase; letter-spacing: 0.06em; font-weight: var(--font-weight-semibold); color: var(--text-tertiary); }
.hf-register__donecard-title { font-size: var(--font-size-text-md); font-weight: var(--font-weight-semibold); color: var(--text-primary); }
.hf-register__donecard-meta { font-size: var(--font-size-text-sm); color: var(--text-tertiary); }

/* Footer */
.hf-register__footer { max-width: 560px; margin: 0 auto; padding: var(--spacing-4xl) var(--spacing-3xl); text-align: center; display: flex; flex-direction: column; gap: var(--spacing-xs); font-size: var(--font-size-text-sm); color: var(--text-quaternary); }
.hf-register__footer p { margin: 0; }
.hf-register__footer a { color: var(--text-link); text-decoration: underline; }

/* The full "Physicians Office Resource" wordmark is wide; below tablet, drop the
   "Already have an account?" lead-in so it never crowds/clips the "Sign in" link. */
@media (max-width: 768px) {
  .hf-register__topbar-signin-pre { display: none; }
}

@media (max-width: 560px) {
  .hf-register__topbar { padding: var(--spacing-lg) var(--spacing-xl); gap: var(--spacing-md); }
  .hf-register__topbar-brand img { height: 34px; }        /* trim so wordmark + "Sign in" never collide on phones */
  .hf-register__canvas { padding: var(--spacing-4xl) var(--spacing-xl) var(--spacing-6xl); }
  .hf-register__card { padding: var(--spacing-3xl); }
  .hf-register__plabel { display: none; }
  .hf-register__field-row { grid-template-columns: 1fr; }
  .hf-register__actions { flex-direction: column-reverse; align-items: stretch; }
  .hf-register__actions .hf-btn { width: 100%; justify-content: center; }
}

/* ===========================================================================
   POR 2026 — HIGH-FIDELITY: Faceted Directory + Article Hub   [NET-NEW]
   ---------------------------------------------------------------------------
   The first hi-fi FACETED DIRECTORY shell (filter rail + results main), plus the
   article-hub-specific pieces. Reuses: .hf-card--pub (article cards), .hf-pub-badge
   (source), .hf-entity-badge (entity chips), .hf-count, .hf-newsletter, .hf-leaderboard,
   .hf-breadcrumb, footer.js, and the data-tier-show auth pattern. Net-new atoms below
   are the directory shell, .hf-facet-chip, .hf-listbar, .hf-pager, .hf-article-featured,
   .hf-magazine-promo, .hf-issuebar, .hf-pub-badge--magazine (POR issue stamp), and the
   quiet article-card kind + specialty-match TEXT labels (.hf-card__kindtext / __match).
   Token-routed. Reusable by future drug/diagnostics directories.
   ========================================================================== */

/* ---- Faceted directory: page container + 2-col shell (rail · results) ------ */
.hf-directory { box-sizing: border-box; width: 100%; max-width: calc(1240px + 2 * var(--spacing-4xl)); margin: 0 auto; padding: var(--spacing-6xl) var(--spacing-4xl) var(--spacing-8xl); }
.hf-directory__shell { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: var(--spacing-5xl); align-items: start; }
.hf-directory__leftcol { min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-3xl); }
.hf-directory__main { min-width: 0; }
@media (min-width: 861px) {
  /* Rail + magazine promo lock together and stay pinned while results scroll. */
  .hf-directory__leftcol { position: sticky; top: calc(56px + var(--spacing-3xl)); align-self: start; }
}

/* ---- Facet rail (refine) ---- */
.hf-facets { display: flex; flex-direction: column; gap: var(--spacing-3xl); }

/* ---- Filter panel (NET-NEW canonical pattern) — an ADDITIVE multi-select filter.
   Borrows the drug-page in-page-nav container: bordered rounded card, navy uppercase
   header, hairline-divided rows. Each row is a checkbox (square, no rounded corners,
   on the left); selecting fills it green + tints the row. Within a facet the checks are
   OR'd; across facets AND'd. "Nothing checked" = show everything, so there is no All row.
   Any directory (articles, drugs, diagnostics) can reuse it. ---- */
.hf-filter-panel {
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-xl);           /* 12px — matches .hf-inpage-nav */
  overflow: hidden;                          /* clip rows to the rounded corners */
  background: var(--bg-primary);
}
.hf-filter-panel__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md);
  background: var(--bg-brand-solid);         /* navy #194689 — same as the drug-nav header */
  color: var(--text-white);
  padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-md);
}
.hf-filter-panel__title {
  font-family: var(--font-family-body); font-size: var(--font-size-text-xxs); font-weight: var(--font-weight-medium);
  line-height: 15px; letter-spacing: 0.08em; text-transform: uppercase;
}
.hf-filter-panel__clear {
  background: transparent; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-family-body); font-size: var(--font-size-text-xxs); font-weight: var(--font-weight-medium);
  letter-spacing: 0.04em; text-transform: uppercase;
  color: color-mix(in srgb, var(--text-white) 66%, var(--bg-brand-solid));
  transition: color var(--motion-duration) var(--motion-ease);
}
.hf-filter-panel__clear:hover { color: var(--text-white); }
.hf-filter-panel__clear:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--text-white); border-radius: var(--radius-xs); }
.hf-filter-panel__clear[hidden] { display: none; }

.hf-filter-panel__label {
  margin: 0; padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-sm);
  font-family: var(--font-family-body); font-size: var(--font-size-text-xxs); font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary);
}
.hf-filter-panel__group + .hf-filter-panel__group .hf-filter-panel__label { border-top: 1px solid var(--border-secondary); }
.hf-filter-panel__rows { display: flex; flex-direction: column; }
/* Long facet lists (e.g. the Diagnostics finder's 75 categories / 450 companies)
   cap + scroll; the in-panel type-ahead is the primary way to find an option.
   320px ≈ eight rows — a component dimension, not a spacing token. */
.hf-filter-panel__rows--scroll { max-height: 320px; overflow-y: auto; }

/* One selectable option = a checkbox row. */
.hf-filter-row {
  display: flex; align-items: center; gap: var(--spacing-md);
  width: 100%; box-sizing: border-box; text-align: left;
  padding: var(--spacing-md) var(--spacing-xl);
  border: 0; border-top: 1px solid var(--border-secondary);
  background: transparent; cursor: pointer;
  font-family: var(--font-family-body); font-size: var(--font-size-text-xs); line-height: var(--line-height-text-xs);
  color: var(--text-primary);
  transition: background-color var(--motion-duration) var(--motion-ease);
}
.hf-filter-row:hover:not([aria-checked="true"]) { background: var(--bg-primary-hover); }
.hf-filter-row:focus-visible { outline: none; box-shadow: var(--focus-ring-brand); position: relative; z-index: 1; }
/* Square checkbox — simple 1px border, NO rounded corners. */
.hf-filter-row__box {
  flex: none; width: 16px; height: 16px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-primary); border-radius: 0;
  background: var(--bg-primary); color: var(--text-white);
  transition: background-color var(--motion-duration) var(--motion-ease), border-color var(--motion-duration) var(--motion-ease);
}
.hf-filter-row__box svg { width: 12px; height: 12px; opacity: 0; }
.hf-filter-row__label { flex: 1 1 auto; }
.hf-filter-row[aria-checked="true"] { background: var(--bg-accent); font-weight: var(--font-weight-medium); }
.hf-filter-row[aria-checked="true"] .hf-filter-row__box { background: var(--color-accent-500); border-color: var(--color-accent-500); }
.hf-filter-row[aria-checked="true"] .hf-filter-row__box svg { opacity: 1; }

/* ---- Filter panel: collapsible CATEGORY header (accordion) + per-panel
   type-ahead + per-option counts. OPT-IN via the .hf-filter-panel__toggle button
   markup — the simple <p class="hf-filter-panel__label"> form still works, so the
   Article Hub's short facets are untouched. The header carries a tinted background
   so the CATEGORY reads as a distinct band above the (white) facet rows. ---- */
.hf-filter-panel__toggle {
  display: flex; align-items: center; gap: var(--spacing-sm);
  width: 100%; box-sizing: border-box; text-align: left;
  padding: var(--spacing-md) var(--spacing-xl);
  border: 0; border-top: 1px solid var(--border-secondary);
  background: var(--bg-secondary);          /* #fafafa — tints the category apart from the white rows */
  cursor: pointer;
  transition: background-color var(--motion-duration) var(--motion-ease);
}
.hf-filter-panel__group:first-child .hf-filter-panel__toggle { border-top: 0; }
.hf-filter-panel__toggle:hover { background: var(--bg-primary-hover); }
.hf-filter-panel__toggle:focus-visible { outline: none; box-shadow: var(--focus-ring-brand); position: relative; z-index: 1; }
/* Reuse the label type inside the toggle, but drop its standalone padding. */
.hf-filter-panel__toggle .hf-filter-panel__label { padding: 0; }
/* Kill the group-divider border-top when the label is inside a toggle — the toggle
   already carries that border. Must out-specify the divider rule
   (`.hf-filter-panel__group + .hf-filter-panel__group .hf-filter-panel__label`,
   3 classes), or the hairline artifacts across every non-first category label. */
.hf-filter-panel__group + .hf-filter-panel__group .hf-filter-panel__toggle .hf-filter-panel__label { border-top: 0; }
.hf-filter-panel__selcount { flex: none; font-size: var(--font-size-text-xxs); font-weight: var(--font-weight-semibold); color: var(--color-brand-700); }
.hf-filter-panel__selcount[hidden] { display: none; }
.hf-filter-panel__chev { margin-left: auto; flex: none; display: inline-flex; color: var(--text-quaternary); transition: transform var(--motion-duration) var(--motion-ease); }
.hf-filter-panel__chev svg { width: 16px; height: 16px; }
.hf-filter-panel__group.is-collapsed .hf-filter-panel__chev { transform: rotate(-90deg); }
.hf-filter-panel__group.is-collapsed .hf-filter-panel__body { display: none; }

/* Per-panel type-ahead — filter the options within a long facet. Symmetric
   padding so the field sits evenly in the header band above the rows. Positioned
   so it can host the canonical trailing clear × (.hf-input-group__clear). */
.hf-filter-panel__search { position: relative; padding: var(--spacing-md) var(--spacing-xl); background: var(--bg-secondary); }   /* continues the controls band */
.hf-filter-panel__search-input {
  width: 100%; box-sizing: border-box; height: 36px; padding: 0 36px 0 var(--spacing-md);
  border: 1px solid var(--border-primary); border-radius: var(--radius-md);
  background: var(--bg-primary); font-family: var(--font-family-mono);   /* typed text + placeholder in DM Mono (canonical) */
  font-size: var(--font-size-text-sm); color: var(--text-primary);
}
.hf-filter-panel__search-input::placeholder { color: var(--text-quaternary); }
.hf-filter-panel__search-input:focus-visible { outline: none; border-color: var(--color-brand-300); box-shadow: var(--focus-ring-brand); }
/* The clear × sits inside the field — offset in past the panel's own side padding. */
.hf-filter-panel__search .hf-input-group__clear { right: calc(var(--spacing-xl) + var(--spacing-sm)); }
.hf-filter-panel__empty { padding: var(--spacing-sm) var(--spacing-xl) var(--spacing-md); font-size: var(--font-size-text-xs); color: var(--text-quaternary); }
.hf-filter-panel__empty[hidden] { display: none; }

/* Per-option count — a muted tally on the right of each row (shown only when > 0). */
.hf-filter-row__count { flex: none; margin-left: var(--spacing-sm); font-size: var(--font-size-text-xxs); color: var(--text-quaternary); font-variant-numeric: tabular-nums; }
.hf-filter-row__count[hidden] { display: none; }
.hf-filter-row[hidden] { display: none; }   /* type-ahead / tab hides non-matching options */

/* In-panel Featured / Other segmented tabs (e.g. Manufacturer: featured makers
   first, everything else under Other). Partitions the option rows; combines with
   the type-ahead. Reuses the .hf-tab language at panel scale. */
/* Open-state controls (tabs + type-ahead) share the category header's bg-secondary
   tint — the whole "controls band" reads as one zone, distinct from the white
   option rows below. (Canonical: applies to every .hf-filter-panel consumer.) */
.hf-filter-panel__tabs { display: flex; gap: var(--spacing-xs); padding: var(--spacing-md) var(--spacing-xl) var(--spacing-xs); background: var(--bg-secondary); }
.hf-filter-panel__tab {
  flex: 1 1 0; border: 1px solid var(--border-secondary); background: var(--bg-primary);
  border-radius: var(--radius-md); padding: var(--spacing-xs) var(--spacing-sm); cursor: pointer;
  font-family: var(--font-family-body); font-size: var(--font-size-text-xxs); font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-tertiary);
  transition: background-color var(--motion-duration) var(--motion-ease), color var(--motion-duration) var(--motion-ease), border-color var(--motion-duration) var(--motion-ease);
}
.hf-filter-panel__tab:hover { background: var(--bg-primary-hover); }
.hf-filter-panel__tab:focus-visible { outline: none; box-shadow: var(--focus-ring-brand); }
.hf-filter-panel__tab.is-active { background: var(--bg-brand-solid); border-color: var(--bg-brand-solid); color: var(--text-white); }

/* ---- Mobile "Filters" trigger bar + bottom-sheet chrome (hidden on desktop) -- */
.hf-directory__filterbar { display: none; }
/* Chrome comes from the canonical .hf-btn--secondary; only the icon size is local. */
.hf-directory__filters-btn svg { width: 16px; height: 16px; }
.hf-directory__filters-count {
  min-width: 20px; height: 20px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-brand-solid); color: var(--text-white); border-radius: var(--radius-full);
  font-size: var(--font-size-text-xxs); font-weight: var(--font-weight-semibold);
}
.hf-facets__handle, .hf-facets__sheethead, .hf-facets__sheetfoot { display: none; }
.hf-directory__backdrop { display: none; }

/* ---- Count + sort bar ---- */
.hf-listbar { display: flex; align-items: baseline; justify-content: space-between; gap: var(--spacing-lg); flex-wrap: wrap; margin: 0 0 var(--spacing-xl); }
.hf-listbar__count { margin: 0; font-family: var(--font-family-body); font-size: var(--font-size-text-sm); font-weight: var(--font-weight-semibold); color: var(--text-primary); }
.hf-listbar__count em { font-style: normal; font-weight: var(--font-weight-regular); color: var(--text-tertiary); }
.hf-sort { display: inline-flex; align-items: center; gap: var(--spacing-sm); font-size: var(--font-size-text-sm); color: var(--text-tertiary); }
.hf-sort select {
  font-family: var(--font-family-body); font-size: var(--font-size-text-sm); color: var(--text-primary);
  padding: var(--spacing-sm) var(--spacing-md); border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm); background: var(--bg-primary); cursor: pointer;
}
.hf-sort select:focus-visible { outline: none; box-shadow: var(--focus-ring-brand); }

/* ---- Results grid — 2-up cards, equal height, 1-up on narrow ---- */
.hf-results-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-xl); align-items: stretch; }
.hf-results-grid > .hf-card { height: 100%; }
@media (max-width: 640px) { .hf-results-grid { grid-template-columns: 1fr; } }

/* ---- Numbered pager (NET-NEW) — mirrors the directory pager: prev · pages · gap · total · next -- */
.hf-pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-xs); margin-top: var(--spacing-4xl); }
.hf-pager__btn, .hf-pager__page {
  min-width: 36px; height: 36px; padding: 0 var(--spacing-md);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-primary); border-radius: var(--radius-md);
  background: var(--bg-primary); color: var(--text-secondary);
  font-family: var(--font-family-body); font-size: var(--font-size-text-sm); cursor: pointer;
  transition: background-color var(--motion-duration) var(--motion-ease), border-color var(--motion-duration) var(--motion-ease);
}
.hf-pager__btn:hover:not([disabled]), .hf-pager__page:hover { background: var(--bg-secondary); color: var(--text-primary); border-color: var(--text-tertiary); }
.hf-pager__page.is-active { background: var(--bg-brand-solid); color: var(--text-white); border-color: var(--bg-brand-solid); font-weight: var(--font-weight-semibold); }
.hf-pager__btn[disabled] { opacity: 0.4; cursor: default; }
.hf-pager__gap { color: var(--text-quaternary); padding: 0 2px; }
.hf-pager__total { height: 36px; display: inline-flex; align-items: center; padding: 0 var(--spacing-sm); color: var(--text-tertiary); font-size: var(--font-size-text-sm); }

/* ===================== A–Z / entity-index (.hf-az) — canonical browse-index ==============
   Ported from the wireframe .section-az. A letter jump-strip + grouped columns; the column
   heading (.hf-az__col-letter) holds a LETTER (Manufacturer directory) OR a taxonomy family /
   specialty name (class / indication / category hubs). Rows use the .hf-dir-item atom. One
   consistent A–Z pattern across every index page — do not reinvent per page. Tokens only. */
.hf-az { margin-top: var(--spacing-2xl); }
/* Sticky under the 56px site header so the letter jump-nav stays on screen while the columns
   scroll (jump targets remain reachable without scrolling back up). Opaque bg hides rows
   passing beneath; z-index sits below the header (z-30). */
.hf-az__strip { position: sticky; top: 56px; z-index: 20; display: flex; flex-wrap: wrap; gap: var(--spacing-xs); padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); margin-bottom: var(--spacing-2xl); background: var(--bg-primary); border-bottom: 1px solid var(--border-secondary); }
/* A–Z jump letters — three token-routed states. JS emits: a letter with entries as
   <a class="…is-linked"> (jump link); an empty letter as <span class="…is-disabled" aria-disabled>.
   All colors route through variables.
   State names: is-linked = has a target · is-disabled = no entries.
   (No scroll-spy "current" state: the columns flow in a row-major grid, so vertical position
    can't resolve to a single letter — it would skip the row-siblings. The strip is a sticky
    jump-nav, not a position indicator.) */
.hf-az__letter { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 var(--spacing-xs); border: 1px solid transparent; border-radius: var(--radius-sm); font-family: var(--font-family-body); font-size: var(--font-size-text-sm); font-weight: var(--font-weight-bold); text-transform: uppercase; text-decoration: none; color: var(--text-secondary); transition: background var(--motion-duration) var(--motion-ease), border-color var(--motion-duration) var(--motion-ease), box-shadow var(--motion-duration) var(--motion-ease); }
/* Rest (has entries): small secondary-button box — white fill, light neutral border, ink letter. */
.hf-az__letter.is-linked { color: var(--text-primary); background: var(--bg-primary); border-color: var(--border-primary); }
/* Hover: canonical neutral hover — fill shifts to bg-primary-hover with a soft lift; border stays light (no ink border). */
.hf-az__letter.is-linked:hover { background: var(--bg-primary-hover); border-color: var(--border-primary); box-shadow: var(--shadow-xs); }
/* Keyboard focus: the shared brand focus ring used by buttons/tabs. */
.hf-az__letter.is-linked:focus-visible { outline: none; box-shadow: var(--focus-ring-brand); }
/* Disabled (no entries under this letter): muted, boxless, non-interactive. */
.hf-az__letter.is-disabled { color: var(--fg-quaternary); background: transparent; border-color: transparent; box-shadow: none; pointer-events: none; cursor: default; }
.hf-az__cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--spacing-3xl) var(--spacing-2xl); align-items: start; }
.hf-az__col { min-width: 0; scroll-margin-top: 120px; }   /* anchor-jump clears the 56px header + the sticky letter strip */
.hf-az__col-letter { display: block; font-family: var(--font-family-display); font-size: var(--font-size-text-xl); line-height: 1; font-weight: var(--font-weight-bold); color: var(--text-quaternary); margin-bottom: var(--spacing-md); }
.hf-az__col-letter--word { font-family: var(--font-family-body); font-size: var(--font-size-text-lg); line-height: var(--line-height-text-lg); font-weight: var(--font-weight-semibold); letter-spacing: -0.2px; color: var(--text-primary); }   /* phrase-sized group heading (Class hub families) — same voice as the mfr catalog group titles (v4.23); the bare serif letter treatment is for single A–Z glyphs */
.hf-az__col-list { list-style: none; margin: 0; padding: 0; }
.hf-az__col-list li { padding: 2px 0; }

/* Rich index row — name + optional meta + optional count pill (reused in .hf-az and flat lists) */
.hf-dir-item { display: flex; align-items: baseline; justify-content: space-between; gap: var(--spacing-sm); padding: var(--spacing-xs) 0; text-decoration: none; color: inherit; }
.hf-dir-item__body { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.hf-dir-item__name { font-size: var(--font-size-text-sm); line-height: var(--line-height-text-sm); font-weight: var(--font-weight-semibold); color: var(--text-link); }   /* just-text link → canonical --text-link */
.hf-dir-item:hover .hf-dir-item__name { text-decoration: underline; }
.hf-dir-item__meta { font-size: var(--font-size-text-xs); line-height: var(--line-height-text-xs); color: var(--text-tertiary); }


/* ---- Name-grouped hub variant (.hf-az--named) — the class / indication / category
   hubs whose column heading holds a SPECIALTY or PRODUCT-FAMILY NAME (not a single
   A–Z letter). The name reads as a GENERAL CONTENT HEADER (Recia display-xs, REGULAR
   weight — the .hf-section__title / .hf-article-related__title treatment, NOT the
   semibold card-title weight), rows carry a hairline divider for scanning, and each
   row's drug count uses the canonical .hf-count badge. The manufacturer A–Z
   (single-letter markers) is left untouched. ---- */
.hf-az--named .hf-az__col-letter {
  font-family: var(--font-family-display);
  font-size: var(--font-size-display-xs);            /* 24 */
  line-height: var(--line-height-display-xs);
  font-weight: var(--font-weight-regular);           /* general content header, not the semibold drug-card title */
  letter-spacing: 0;
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}
.hf-az--named .hf-az__col-list li { padding: 0; }
.hf-az--named .hf-az__col-list li + li { border-top: 1px solid var(--border-secondary); }   /* standard hairline between entries */
.hf-az--named .hf-dir-item { padding: var(--spacing-md) 0; align-items: center; }            /* center-align the name with its .hf-count badge */

/* Cross-link tile — icon · label + sub · arrow. The landing's "related classes / indications"
   rail (ported from wireframe .section-tile). Composes .hf-card surface + tokens. */
.hf-crosslink-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--spacing-lg); }
.hf-crosslink { display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-lg); border: 1px solid var(--border-secondary); border-radius: var(--radius-xl); background: var(--bg-primary); text-decoration: none; color: inherit; transition: border-color var(--motion-duration) var(--motion-ease), box-shadow var(--motion-duration) var(--motion-ease); }
.hf-crosslink:hover { border-color: var(--color-accent-500); box-shadow: var(--glow-accent); }
.hf-crosslink__icon { flex: none; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-full); background: var(--color-brand-50); color: var(--icon-fg-brand); }
.hf-crosslink__icon svg { width: 18px; height: 18px; }
.hf-crosslink__text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.hf-crosslink__label { font-size: var(--font-size-text-md); font-weight: var(--font-weight-semibold); color: var(--text-primary); }
.hf-crosslink__sub { font-size: var(--font-size-text-xs); color: var(--text-tertiary); }
.hf-crosslink__arrow { flex: none; margin-left: auto; color: var(--text-quaternary); display: inline-flex; }
.hf-crosslink__arrow svg { width: 18px; height: 18px; }

/* ---- Personalization note (hero) + match chip (card) ---- */
/* Block flow, NOT flex (2026-08-27, Chris): as a flex row, every bare text run,
   inline <a>, and trailing "." became its own flex item — at narrow widths the
   link collapsed into a one-word-per-line column (seen on the hub intro notes).
   Inline icon + normal paragraph flow wraps everything naturally. */
.hf-perso-note { display: block; margin: 0; font-size: var(--font-size-text-sm); line-height: var(--line-height-text-sm); color: var(--text-tertiary); }
.hf-perso-note svg { display: inline-block; vertical-align: -3px; margin-right: var(--spacing-sm); width: 16px; height: 16px; color: var(--icon-fg-brand); }
.hf-perso-note[hidden] { display: none; }

/* Hub toolbar search — a FILTER input, not a hero search bar: cap it at a
   comfortable reading/typing measure instead of the full 1240 content width
   (Chris, 2026-08-27). 640 sits between --width-sm (480, too cramped for the
   example-laden placeholders) and the hero searchbar's 1000 cap. */
.hf-input-group--capped { max-width: 640px; }
/* ---- POR magazine-issue stamp — the .hf-pub-badge source stamp, recolored GREEN
   (POR accent) with a solid ring + book icon so it reads as an OWNED magazine issue,
   not an external publication (which stays blue with the gradient ring). ---- */
.hf-pub-badge--magazine { color: var(--color-accent-800); gap: var(--spacing-xs); }
.hf-pub-badge--magazine::before { background: var(--color-accent-400); }   /* solid green ring (vs. the external gradient) */
.hf-pub-badge--magazine svg { flex: none; width: 12px; height: 12px; }

/* ---- Article-card top badges row (pub-badges only: external source OR POR issue) ---- */
.hf-card__badges { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-sm); width: 100%; }   /* above the stretched card link (matches .hf-card__entities) */

/* ---- Card header row: badges (left) + specialty-match tag (upper-right corner).
   Mirrors .hf-article-featured__head so the personalization signal sits in the same
   corner spot on both the featured showcase and the regular cards. ---- */
.hf-card__head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-sm) var(--spacing-md); width: 100%; }
.hf-card__head .hf-card__badges { width: auto; }                 /* shrink to content so the match tag can share the row */
.hf-card__head .hf-card__match { margin-left: auto; }            /* push the match into the upper-right corner (like the featured eyebrow) */

/* ---- Kind as quiet TEXT (above the byline) — replaces the noisy chips. The specialty
   match is accent + a small sparkle; it now lives in the card header (corner tag). ---- */

.hf-card__kindtext { font-family: var(--font-family-body); font-size: var(--font-size-text-xs); font-weight: var(--font-weight-medium); color: var(--text-tertiary); }
.hf-card__match { display: inline-flex; align-items: center; gap: var(--spacing-xs); font-size: var(--font-size-text-xs); font-weight: var(--font-weight-medium); color: var(--text-link); }
.hf-card__match svg { flex: none; width: 13px; height: 13px; }

/* ---- Featured article showcase (NET-NEW) — leads the results; tier-aware.
   Neutral by default (anon = editor's pick); --perso (cookied / signed-in) adds the
   accent border + tint so the personalized feature reads as obviously different. ---- */
.hf-article-featured[hidden] { display: none; }    /* author display:flex must yield to the hidden attribute (tier-gated bands) */
.hf-article-featured {
  position: relative;                              /* anchor the stretched whole-card link */
  display: flex; flex-direction: column; gap: var(--spacing-md);
  border: 1.5px solid var(--color-accent-200);
  border-radius: var(--radius-xl);
  /* Very subtle accent wash on ALL three tiers (subtler than accent-50). */
  background: color-mix(in srgb, var(--color-accent-50) 45%, var(--bg-primary));
  padding: var(--spacing-3xl); margin: 0 0 var(--spacing-3xl);
  transition:
    border-color var(--motion-duration) var(--motion-ease),
    box-shadow   var(--motion-duration) var(--motion-ease),
    transform    var(--motion-duration) var(--motion-ease);
}
/* Card-style hover — mirrors .hf-card (accent border + glow + lift). */
.hf-article-featured:hover,
.hf-article-featured:focus-within { border-color: var(--color-accent-500); box-shadow: var(--glow-accent); transform: translateY(-3px); }
/* Header row: badge (left) + promotion eyebrow pushed to the top-right corner. */
.hf-article-featured__head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-md) var(--spacing-lg); }
.hf-article-featured__eyebrow { display: flex; align-items: center; gap: var(--spacing-sm); margin: 0 0 0 auto; font-family: var(--font-family-body); font-size: var(--font-size-text-xs); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); }
.hf-article-featured__eyebrow svg { width: 15px; height: 15px; color: var(--text-tertiary); }
.hf-article-featured__eyebrow img { width: 16px; height: 16px; display: block; }   /* POR logo mark (Editor's Pick) */
/* The sponsor dot is authored for the .hf-card__sponsor lockup (flex-start + 3px nudge to
   meet a text top). Inside this eyebrow the flex is center-aligned, so drop the nudge and
   size the dot to the xs eyebrow text — otherwise it sits low and reads oversized. */
.hf-article-featured__eyebrow .hf-card__sponsor-dot { width: 8px; height: 8px; margin-top: 0; }
.hf-article-featured--perso .hf-article-featured__eyebrow { color: var(--text-link); }
.hf-article-featured--perso .hf-article-featured__eyebrow svg { color: var(--icon-fg-brand); }
.hf-article-featured__badges { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-sm); }   /* non-interactive → under the card link */
.hf-article-featured__title { margin: 0; font-family: var(--font-family-body); font-weight: var(--font-weight-bold); font-size: var(--font-size-display-xs); line-height: var(--line-height-display-xs); letter-spacing: -0.3px; color: var(--text-primary); }   /* sans-serif bold like the article cards (.hf-card__title), just larger for the lead. Fills the card width — no measure cap. */
.hf-article-featured__title a { color: inherit; text-decoration: none; }
.hf-article-featured__title a::after { content: ""; position: absolute; inset: 0; }   /* stretched whole-card link (hover+click, no button) */
.hf-article-featured__title a:focus-visible { outline: none; }
.hf-article-featured__summary { margin: 0; font-size: var(--font-size-text-md); line-height: var(--line-height-text-md); color: var(--text-secondary); }
.hf-article-featured__by { margin: 0; font-size: var(--font-size-text-sm); color: var(--text-tertiary); }

/* ---- Sponsored-drug lead variant (.hf-article-featured--logo) — a brand-logo
   COLUMN on the left beside the content on the right (mirrors the wireframe
   drug-spotlight lockup). This instance holds its OWN interactive links (title,
   resource chips, action buttons), so the whole-card stretched link is switched
   off here. Stacks logo-over-content on small viewports. ---- */
.hf-article-featured--logo { flex-direction: row; align-items: flex-start; gap: var(--spacing-3xl); }
.hf-article-featured__logo { flex: none; align-self: flex-start; line-height: 0; }
.hf-article-featured__logo img { display: block; width: auto; height: auto; max-width: 180px; max-height: 90px; }
.hf-article-featured--logo .hf-article-featured__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-md); }
.hf-article-featured--logo .hf-article-featured__title a::after { content: none; }   /* multiple links inside → no whole-card overlay */
@media (max-width: 640px) {
  .hf-article-featured--logo { flex-direction: column; gap: var(--spacing-lg); }
}

/* ---- Magazine promo (NET-NEW) — vertical rail card; sibling of the facet rail so
   it never enters the mobile filter sheet. Cover reuses the magazine radial gradient. -- */
.hf-magazine-promo { display: flex; flex-direction: column; gap: var(--spacing-lg); border: 1px solid var(--border-secondary); border-radius: var(--radius-xl); background: var(--bg-secondary); padding: var(--spacing-xl); }
/* The cover is a LINK (2nd click target alongside the button). The cover ART FLOATS —
   padded, with its own shadow — on a two-stop gradient sampled FROM the art. Color
   contract: the card reads --mag-c1 / --mag-c2. HOW they're set is pluggable:
     · production → precompute two hexes in the image pipeline, emit them inline
       (style="--mag-c1:…;--mag-c2:…") — zero runtime, no CORS, cache-friendly;
     · prototype  → mag-cover.js samples each image on load and sets the same two vars;
     · fallback   → the inline style on the element (per-asset), else the default below.
   Hover LIFTS the cover (no scale — keeps the cover text readable) + reveals a corner chip. */
.hf-magazine-promo__cover {
  position: relative; display: flex; align-items: center; justify-content: center;
  aspect-ratio: 3 / 4; border-radius: var(--radius-md); overflow: hidden;
  padding: var(--spacing-2xl);
  background: linear-gradient(160deg, var(--mag-c1, var(--color-brand-700)), var(--mag-c2, var(--color-brand-400)));
  transition: box-shadow var(--motion-duration) var(--motion-ease);
}
.hf-magazine-promo__cover img {
  max-width: 100%; max-height: 100%; width: auto; height: auto; display: block;
  border-radius: var(--radius-xs); box-shadow: var(--shadow-md);
  transition: transform var(--motion-duration) var(--motion-ease), box-shadow var(--motion-duration) var(--motion-ease);
}
.hf-magazine-promo__cover-icon {
  position: absolute; right: var(--spacing-md); bottom: var(--spacing-md); z-index: 1;
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full); background: var(--bg-primary); color: var(--color-accent-600);
  box-shadow: var(--shadow-sm);
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--motion-duration) var(--motion-ease), transform var(--motion-duration) var(--motion-ease);
}
.hf-magazine-promo__cover-icon svg { width: 17px; height: 17px; }
.hf-magazine-promo__cover:hover img { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.hf-magazine-promo__cover:hover .hf-magazine-promo__cover-icon,
.hf-magazine-promo__cover:focus-visible .hf-magazine-promo__cover-icon { opacity: 1; transform: none; }
.hf-magazine-promo__cover:focus-visible { outline: none; box-shadow: var(--focus-ring-brand); }
.hf-magazine-promo__eyebrow { margin: 0; font-family: var(--font-family-body); font-size: var(--font-size-text-xs); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-link); }
.hf-magazine-promo__title { margin: 0; font-family: var(--font-family-display); font-weight: var(--font-weight-regular); font-size: var(--font-size-text-xl); line-height: var(--line-height-text-xl); color: var(--text-primary); }
.hf-magazine-promo__lede { margin: 0; font-size: var(--font-size-text-sm); line-height: var(--line-height-text-sm); color: var(--text-tertiary); }
.hf-magazine-promo .hf-btn { width: 100%; }

/* ---- Magazine-issue deep-link banner (NET-NEW) — accent context strip ---- */
.hf-issuebar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-sm); margin: 0 0 var(--spacing-xl); padding: var(--spacing-md) var(--spacing-lg); background: var(--color-accent-50); border: 1px solid var(--color-accent-200); border-radius: var(--radius-md); font-size: var(--font-size-text-sm); color: var(--text-primary); }
.hf-issuebar svg { width: 15px; height: 15px; color: var(--icon-fg-brand); }
.hf-issuebar[hidden] { display: none; }
.hf-issuebar__clear { margin-left: auto; font-family: var(--font-family-body); font-size: var(--font-size-text-sm); font-weight: var(--font-weight-semibold); color: var(--text-primary); background: transparent; border: 0; cursor: pointer; text-decoration: underline; }

/* ---- Faceted directory — mobile (≤860): single column, filters become a bottom sheet -- */
@media (max-width: 860px) {
  .hf-directory__shell { grid-template-columns: 1fr; }
  .hf-directory__leftcol { order: 2; position: static; }           /* magazine promo drops below results */
  .hf-directory__main { order: 1; }
  .hf-directory__filterbar { display: flex; position: sticky; top: 56px; z-index: 30; background: var(--bg-primary); margin: 0 0 var(--spacing-lg); padding: var(--spacing-md) 0; border-bottom: 1px solid var(--border-secondary); }
  .hf-directory__backdrop { display: block; position: fixed; inset: 0; z-index: 55; background: color-mix(in srgb, var(--text-primary) 45%, transparent); opacity: 0; pointer-events: none; transition: opacity var(--motion-duration) var(--motion-ease); }
  .hf-directory__shell.is-filters-open .hf-directory__backdrop { opacity: 1; pointer-events: auto; }
  .hf-facets { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 60; max-height: 85vh; overflow: hidden; margin: 0; padding: var(--spacing-xl); gap: 0; background: var(--bg-primary); border-top-left-radius: var(--radius-3xl); border-top-right-radius: var(--radius-3xl); box-shadow: var(--shadow-overlay); transform: translateY(100%); transition: transform var(--motion-duration) var(--motion-ease); }
  .hf-directory__shell.is-filters-open .hf-facets { transform: translateY(0); }
  .hf-facets__handle { display: block; width: 36px; height: 4px; border-radius: var(--radius-full); background: var(--border-primary); margin: 0 auto var(--spacing-md); }
  .hf-facets__sheethead { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--spacing-md); border-bottom: 1px solid var(--border-secondary); }
  .hf-facets__sheettitle { font-family: var(--font-family-display); font-size: var(--font-size-text-xl); color: var(--text-primary); }
  .hf-facets__close { background: transparent; border: 0; cursor: pointer; padding: 6px; color: var(--text-tertiary); border-radius: var(--radius-sm); display: inline-flex; }
  .hf-facets__close svg { width: 20px; height: 20px; }
  .hf-facets__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: var(--spacing-3xl); padding: var(--spacing-xl) 0; }
  .hf-facets__sheetfoot { display: block; padding-top: var(--spacing-md); border-top: 1px solid var(--border-secondary); }
  .hf-facets__sheetfoot .hf-btn { width: 100%; }
  /* Inside the sheet, drop the panel's card chrome + navy header (the sheethead titles it). */
  .hf-filter-panel { border: 0; border-radius: 0; }
  .hf-filter-panel__head { display: none; }
  .hf-filter-panel__group:first-child .hf-filter-panel__label { padding-top: 0; }
  .hf-facets__clear {
    display: inline-flex; align-items: center; background: transparent; border: 0; cursor: pointer;
    padding: 6px; margin-left: auto; margin-right: var(--spacing-sm);
    font-family: var(--font-family-body); font-size: var(--font-size-text-sm); color: var(--text-link);
  }
  .hf-facets__clear[hidden] { display: none; }
}
@media (min-width: 861px) { .hf-facets__clear { display: none; } }
/* On desktop the scroll wrapper is transparent so facets are direct children of the rail. */
@media (min-width: 861px) { .hf-facets__scroll { display: contents; } }

/* ===========================================================================
   POR 2026 — HIGH-FIDELITY: ARTICLE DETAIL (reading page)   [NET-NEW]
   ---------------------------------------------------------------------------
   A centered single-column reading template (Editorial · AI Literature). Reuses
   the shell, .hf-breadcrumb, .hf-pub-badge, .hf-entity-badge, .hf-btn, and the
   .hf-card--pub article cards (related grid). Net-new: the reading column, the
   masthead, the compact sponsor slot, the body typography, and the sources list.
   The AI quick-read box is the shared .hf-ailit--quickread skin (see .hf-ailit).
   Token-routed.
   ========================================================================== */
/* White reading card floats over the page fade (below), so its bottom corners are
   rounded — matches the drug page's white "M" column over its own fade. */
.hf-article { width: 100%; max-width: 800px; margin: 0 auto var(--spacing-6xl); box-sizing: border-box; padding: var(--spacing-6xl) var(--spacing-4xl); background: var(--bg-primary); border-bottom-left-radius: var(--radius-xl); border-bottom-right-radius: var(--radius-xl); }   /* width:100% is REQUIRED: .hf-content is a flex column (footer child), where the auto side margins would otherwise shrink-to-fit the card to ~max-width and overflow narrow viewports. bottom padding hugs the last block; bottom margin opens a fade band so the card clears the footer */
/* Bottom page fade behind the reading card (shared page-bottom token): viewport-anchored
   brand wash rising ~30vh, so the card's rounded base reads as a panel lifted off the page.
   The profile page opts into the same wash via its .hf-profile-page wrapper. */
.hf-content:has(> .hf-article),
.hf-content:has(> .hf-profile-page) { background-image: var(--gradient-page-bottom); background-attachment: fixed; background-repeat: no-repeat; }
.hf-article .hf-breadcrumb { margin-bottom: var(--spacing-3xl); }
/* Truncate the trail to a single line — the last crumb (article title) can be very long. */
.hf-article .hf-breadcrumb { flex-wrap: nowrap; min-width: 0; }
.hf-article .hf-breadcrumb a,
.hf-article .hf-breadcrumb .hf-breadcrumb__sep { flex: none; }
.hf-article .hf-breadcrumb .hf-breadcrumb__current { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Compact sponsor slot ------------------------------------------------ */
.hf-article-sponsor { border: 1px solid var(--border-secondary); background: var(--bg-secondary); border-radius: var(--radius-xl); padding: var(--spacing-xl); margin: 0 0 var(--spacing-4xl); }   /* neutral surface — keeps the green out of the top of the page; the SPONSORED label + brand CTA carry the "ad" signal */
.hf-article-sponsor__tag { display: inline-block; margin: 0 0 var(--spacing-sm); font-size: var(--font-size-text-xs); text-transform: uppercase; letter-spacing: 0.06em; font-weight: var(--font-weight-semibold); color: var(--text-tertiary); }
.hf-article-sponsor__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-lg); flex-wrap: wrap; }
.hf-article-sponsor__text { min-width: 0; }
.hf-article-sponsor__brand { margin: 0; font-family: var(--font-family-display); font-size: var(--font-size-text-lg); font-weight: var(--font-weight-bold); color: var(--text-primary); }
.hf-article-sponsor__msg { margin: 2px 0 0; font-size: var(--font-size-text-sm); color: var(--text-secondary); }
.hf-article-sponsor__cta { flex: none; }

/* Sign-off — end-of-article block holding the byline detail + the sponsor, set below
   the body/sources like a print sign-off (moved out of the masthead). */
.hf-article-signoff { margin: var(--spacing-6xl) 0 0; padding-top: var(--spacing-3xl); border-top: 1px solid var(--border-secondary); display: flex; flex-direction: column; gap: var(--spacing-2xl); }
.hf-article-signoff .hf-article__meta { margin: 0; }
.hf-article-signoff .hf-article-sponsor { margin: 0; }

/* ---- Masthead ------------------------------------------------------------ */
.hf-article__head { display: flex; flex-direction: column; gap: var(--spacing-lg); margin: 0 0 var(--spacing-3xl); padding: 0 0 var(--spacing-3xl); border-bottom: 1px solid var(--border-secondary); }
.hf-article__kicker { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-sm); }   /* literature only — journal source badge + kind (editorial has no eyebrow) */
.hf-article__kind { display: inline-flex; align-items: center; gap: var(--spacing-xs); font-size: var(--font-size-text-xs); font-weight: var(--font-weight-medium); color: var(--text-tertiary); }
.hf-article__kind svg { width: 14px; height: 14px; }
.hf-article__kind--review { color: var(--color-accent-800); }
.hf-article__title { margin: 0; font-family: var(--font-family-display); font-weight: var(--font-weight-regular); font-size: var(--font-size-display-md); line-height: var(--line-height-display-md); letter-spacing: -0.02em; color: var(--text-primary); overflow-wrap: break-word; }
.hf-article__meta { margin: 0; font-size: var(--font-size-text-sm); color: var(--text-tertiary); }
.hf-article__meta strong { font-weight: var(--font-weight-semibold); color: var(--text-secondary); }
/* Masthead byline (author[s] · date · read time). Adapts to 1/2/N authors via
   article-detail.js; names are the semibold strongs, affiliation is lighter.
   Sits below the title on the header's standard gap, with a touch more breathing
   room above so the title and byline don't crowd. */
.hf-article__byline { margin-top: var(--spacing-xs); line-height: var(--line-height-text-md); }
.hf-article__affil { font-weight: var(--font-weight-regular); color: var(--text-tertiary); }
.hf-article__actions { display: flex; flex-wrap: wrap; gap: var(--spacing-md); }
.hf-article__entities { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-md) var(--spacing-sm); margin-top: var(--spacing-lg); }   /* extra top margin separates it from Save/Share; larger row-gap gives wrapped pills breathing room */
.hf-article__entities-label { font-size: var(--font-size-text-xs); text-transform: uppercase; letter-spacing: 0.06em; font-weight: var(--font-weight-semibold); color: var(--text-tertiary); margin-right: var(--spacing-xs); }

/* AI quick-read is now the .hf-ailit--quickread skin (consolidated into the one
   canonical AI-callout family — see the .hf-ailit block above). */

/* ---- Body typography ----------------------------------------------------- */
.hf-article__body { font-size: var(--font-size-text-md); line-height: var(--line-height-prose); color: var(--text-primary); }
.hf-article__body h2 { margin: var(--spacing-5xl) 0 var(--spacing-md); font-family: var(--font-family-display); font-weight: var(--font-weight-regular); font-size: var(--font-size-text-xl); line-height: var(--line-height-text-xl); letter-spacing: var(--letter-spacing-tight); color: var(--text-primary); }
/* "Summary" heading above the quick-read box — same type as the article-body h2,
   but no large top margin since it leads the box directly under the masthead. */
.hf-article__summary-title { margin: 0 0 var(--spacing-md); font-family: var(--font-family-display); font-weight: var(--font-weight-regular); font-size: var(--font-size-text-xl); line-height: var(--line-height-text-xl); letter-spacing: var(--letter-spacing-tight); color: var(--text-primary); }
.hf-article__body h3 { margin: var(--spacing-2xl) 0 var(--spacing-xs); font-family: var(--font-family-body); font-weight: var(--font-weight-bold); font-size: var(--font-size-text-md); line-height: var(--line-height-text-md); color: var(--text-primary); }
.hf-article__body p { margin: 0 0 var(--spacing-xl); }
.hf-article__body ul { margin: 0 0 var(--spacing-xl); padding-left: 1.2em; display: flex; flex-direction: column; gap: var(--spacing-xs); }
.hf-article__body sup { line-height: 0; }
/* sup a styling lives in the canonical citation-chip rule (see .hf-search__answer sup). */

/* ---- Sources ------------------------------------------------------------- */
.hf-article-sources { margin: var(--spacing-6xl) 0 0; padding: var(--spacing-2xl); border: 1px solid var(--border-secondary); border-radius: var(--radius-md); background: var(--bg-secondary); }
.hf-article-sources__title { margin: 0 0 var(--spacing-sm); font-family: var(--font-family-display); font-size: var(--font-size-text-xl); font-weight: var(--font-weight-regular); color: var(--text-primary); }
.hf-article-sources__note { display: flex; align-items: flex-start; gap: var(--spacing-xs); margin: 0 0 var(--spacing-lg); font-size: var(--font-size-text-sm); color: var(--text-tertiary); }
.hf-article-sources__note svg { flex: none; width: 14px; height: 14px; margin-top: 2px; color: var(--icon-fg-accent); }
/* The list is porCite rows (.hf-ailit__ref) — same grammar as the AI-answer refs.
   No browser numbers (pills carry them), no local link override (.hf-link is canon). */
.hf-article-sources__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--spacing-md); }

/* ---- Related grid (reuses .hf-card--pub) --------------------------------- */
.hf-article-related { margin: var(--spacing-7xl) 0 0; }
.hf-article-related__head { display: flex; align-items: baseline; gap: var(--spacing-md); margin: 0 0 var(--spacing-xl); }
.hf-article-related__title { margin: 0; font-family: var(--font-family-display); font-size: var(--font-size-display-xs); font-weight: var(--font-weight-regular); color: var(--text-primary); }
.hf-article-related__match { display: inline-flex; align-items: center; gap: var(--spacing-xs); font-size: var(--font-size-text-xs); font-weight: var(--font-weight-medium); color: var(--text-link); }
.hf-article-related__match svg { width: 13px; height: 13px; }
.hf-article-related__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-xl); align-items: stretch; }
.hf-article-related__grid > .hf-card { height: 100%; }
@media (max-width: 640px) { .hf-article-related__grid { grid-template-columns: 1fr; } }

/* ---- Article detail — mobile: tighter gutters + a step-down display title ------ */
@media (max-width: 768px) {
  .hf-article { padding: var(--spacing-5xl) var(--spacing-xl); }             /* 40 / 16 gutters */
  .hf-article__title { font-size: var(--font-size-display-sm); line-height: var(--line-height-display-sm); }   /* 36 → 30 */
}
@media (max-width: 640px) {
  .hf-article { padding: var(--spacing-4xl) var(--spacing-lg); }             /* 32 / 12 gutters */
  .hf-article__title { font-size: var(--font-size-display-xs); line-height: var(--line-height-display-xs); }   /* 30 → 24 */
  .hf-article-sponsor__inner { align-items: flex-start; }                    /* brand text over CTA, both left-aligned */
  .hf-article-sponsor__cta { width: 100%; justify-content: center; }         /* full-width CTA once it wraps below */
}

/* ===========================================================================
   POR 2026 — HIGH-FIDELITY: Basic page hero (.hf-pagehero)   [NET-NEW]
   ---------------------------------------------------------------------------
   A lightweight masthead for directory / hub / landing pages: breadcrumb +
   section eyebrow/title + lede + optional personalization note + an OPTIONAL
   leaderboard ad. Borrows the brand WASH + WAVY graphic from the drug hero so it
   doesn't read flat; the ad STACKS below the copy (left-aligned) — a leaderboard
   beside a full title+lede reads lopsided (that works only for the drug hero's
   compact logo+name identity). Reuses .hf-wavy, .hf-breadcrumb, .hf-section__eyebrow
   / __title, .hf-leaderboard__frame. Token-routed.
   ========================================================================== */
.hf-pagehero {
  position: relative; overflow: hidden;
  background: var(--gradient-drughero);              /* white → faint brand-blue wash */
  border-bottom: 1px solid var(--border-primary);
}
.hf-pagehero__inner {
  position: relative; z-index: 1; box-sizing: border-box;
  max-width: calc(1240px + 2 * var(--spacing-4xl)); margin: 0 auto;
  padding: var(--spacing-5xl) var(--spacing-4xl);
  display: flex; flex-direction: column;
  container-type: inline-size;   /* the copy+banner row stacks on the hero's OWN width (accounts for the nav rail), not the viewport */
}
/* Breadcrumb sits FULL-WIDTH above the row (same structure as the drug/device/mfr
   heroes) so it never shares the top line with the ad. */
.hf-pagehero__inner .hf-breadcrumb { margin-bottom: var(--spacing-4xl); }
@media (max-width: 768px) { .hf-pagehero__inner .hf-breadcrumb { margin-bottom: var(--spacing-3xl); } }   /* mobile parity with the drug hero */
/* The row: copy LEFT (narrower), 728×90 ad pinned upper-right. Collapses to one
   column ≤1024 (ad drops below the copy) — mirrors .hf-drughero__row. */
.hf-pagehero__row {
  display: grid; grid-template-columns: minmax(0, 1fr) calc(728px + 20px);
  gap: var(--spacing-6xl); align-items: start;
}
/* Stack copy above the ad when the hero itself is too narrow for a 728px banner + readable copy
   (~1100px container = 728 ad + gap + ~300 copy). Container-query'd so it fires when the nav
   rail narrows the content column even on a wide viewport. Viewport rule kept as a fallback. */
@container (max-width: 1100px) { .hf-pagehero__row { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-3xl); } }
@media (max-width: 1024px) { .hf-pagehero__row { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-3xl); } }
.hf-pagehero__body { display: flex; flex-direction: column; gap: var(--spacing-lg); min-width: 0; }
.hf-pagehero__lede { margin: 0; font-size: var(--font-size-text-md); line-height: var(--line-height-text-md); color: var(--text-tertiary); max-width: 64ch; }
/* Canonical banner-hero arrangement (see .hf-drughero--entity note): on hero
   rows that carry a leaderboard, the lede lives BELOW the row at full measure
   — never as a skinny column beside the ad. */
.hf-pagehero__row + .hf-pagehero__lede { margin-top: var(--spacing-2xl); }
.hf-pagehero__banner { display: flex; flex-direction: column; gap: var(--spacing-sm); align-items: flex-start; }
.hf-pagehero__banner-label { margin: 0; font-size: var(--font-size-text-xs); color: var(--text-quaternary); }
.hf-pagehero__creative { display: flex; align-items: center; justify-content: center; width: 728px; height: 90px; background: var(--bg-secondary); color: var(--text-quaternary); font-family: var(--font-family-mono); font-size: var(--font-size-text-sm); }
@media (max-width: 820px) { .hf-pagehero__banner { max-width: 100%; overflow-x: auto; } }   /* off-scale: 728px IAB leaderboard + gutters */

/* ===========================================================================
   POR 2026 — HIGH-FIDELITY: SECTION-LANDING variants   [NET-NEW · reuse-first]
   Two token-routed variants of EXISTING families power the /drugs/ and
   /products/ section landings — no standalone patterns:
   (1) .hf-pagehero--search — the section masthead trades the ad banner for a
       search bar + a "Popular:" chip row (reuses .hf-searchbar + .hf-entity-badge).
   (2) .hf-youband* — the tier-gated "You" band (anon prompt · cookied recent ·
       signed-in "For you" tabs), composed from .hf-section/.hf-band + .hf-tabs +
       .hf-count + .hf-entity-badge/.hf-pillwrap + .hf-perso-note. The only
       net-new bits are a light prompt card and the tab-panel display toggle.
   ========================================================================== */
/* (1) Section hero: search + popular chips region (stacks under the copy).
   Uses the canonical .hf-searchbar--hero (same as the homepage hero). overflow is
   set visible so the search dropdown + the searchbar's focus halo aren't clipped by
   .hf-pagehero's overflow:hidden — the wavy graphic stays clipped by its own .hf-wavy. */
.hf-pagehero--search { overflow: visible; }
.hf-pagehero--search .hf-pagehero__body { max-width: 780px; }
.hf-pagehero__search { display: flex; flex-direction: column; gap: var(--spacing-2xl); margin-top: var(--spacing-2xl); }
.hf-pagehero__search .hf-searchbar { max-width: 720px; }
.hf-pagehero__chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-sm); }
.hf-pagehero__chips-label { flex: none; font-size: var(--font-size-text-sm); font-weight: var(--font-weight-semibold); color: var(--text-tertiary); }
@media (max-width: 768px) { .hf-pagehero__search { margin-top: var(--spacing-xl); } }

/* (2) "You" band — anon prompt card */
.hf-youband__prompt { display: flex; align-items: center; gap: var(--spacing-lg) var(--spacing-2xl); flex-wrap: wrap; padding: var(--spacing-xl) var(--spacing-2xl); border: 1px solid var(--color-accent-200); border-radius: var(--radius-xl); background: color-mix(in srgb, var(--color-accent-50) 45%, var(--bg-primary)); }
.hf-youband__prompt-body { min-width: 0; flex: 1 1 320px; display: flex; flex-direction: column; gap: var(--spacing-xxs); }
.hf-youband__prompt-title { display: flex; align-items: center; gap: var(--spacing-sm); margin: 0; font-size: var(--font-size-text-md); font-weight: var(--font-weight-semibold); color: var(--text-primary); }
.hf-youband__prompt-title svg { width: 18px; height: 18px; color: var(--icon-fg-brand); }
.hf-youband__prompt-sub { margin: 0; font-size: var(--font-size-text-sm); line-height: var(--line-height-text-sm); color: var(--text-tertiary); }
/* (2) "You" band — signed-in "For you" tab panels */
.hf-youband__panels { margin-top: var(--spacing-xl); }
.hf-youband__panel[hidden] { display: none; }
/* Browse band — the "Browse all …" CTA + scale note stack */
.hf-browse-all { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-md); }

/* ===========================================================================
   Interior (app) heading scale — one tier BELOW the homepage marketing scale.
   The homepage keeps its big scale (hero 72 / section 36). Interior pages get:
     • page title  (the .hf-pagehero h1)  → display-lg  48 / 60   (mobile 36 / 44)
     • section head (.hf-section h2)       → display-sm  30 / 38
   Both are existing steps on the SAME display-token ladder (24·30·36·48·60·72) —
   no new sizes, no system break. Title targets the pagehero body, so every
   pagehero page gets a consistent page title; the smaller section head is gated to
   .hf-content--app (the section landings) so the homepage's 36 is untouched. The
   two selectors never overlap (pagehero body vs section/register heading), so
   there's no specificity tug-of-war. See the "Interior heading scale" playbook note.
   ========================================================================== */
.hf-pagehero__body .hf-section__title {
  font-size: var(--font-size-display-lg);
  line-height: var(--line-height-display-lg);
}
@media (max-width: 768px) {
  .hf-pagehero__body .hf-section__title { font-size: var(--font-size-display-md); line-height: var(--line-height-display-md); }
}
.hf-content--app .hf-section__heading .hf-section__title,
.hf-content--app .hf-register__heading .hf-section__title {
  font-size: var(--font-size-display-sm);
  line-height: var(--line-height-display-sm);
}

/* ===========================================================================
   POR 2026 — HIGH-FIDELITY: PROFILE (HCP dashboard)   [NET-NEW]
   ---------------------------------------------------------------------------
   Signed-in dashboard rendered by profile.js. A hero identity strip, a sticky
   tab bar with counts, then per-tab panels. Long lists (saves, following, news,
   updates, history) are sortable/searchable/filterable TABLES so the VETERAN
   state's dense data holds up. Reuses .hf-breadcrumb, .hf-badge, .hf-toast.
   Token-routed throughout.
   ========================================================================== */
.hf-profile { display: block; }

/* ---- Hero -------------------------------------------------------------- */
/* Full-bleed brand wash behind the identity — a real blue gradient (brand-200 → brand-50)
   that carries down THROUGH the tab bar (which is brand-50), so the band reads as one piece
   from the top of the hero to the panel edge. Content centered in an inner wrapper. */
.hf-profile__hero { position: relative; background: linear-gradient(180deg, var(--color-brand-200) 0%, var(--color-brand-50) 100%); }
.hf-profile__hero-inner { max-width: calc(1240px + 2 * var(--spacing-4xl)); margin: 0 auto; box-sizing: border-box; padding: var(--spacing-5xl) var(--spacing-4xl) var(--spacing-3xl); }   /* canonical 1240 content + 64 gutter — matches shell / directory / search */
.hf-profile__hero .hf-breadcrumb { margin-bottom: var(--spacing-xl); }
.hf-profile__hero-row { display: flex; align-items: center; gap: var(--spacing-2xl); flex-wrap: wrap; }
.hf-profile__avatar { flex: none; width: 72px; height: 72px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; background: var(--gradient-nav-active); color: var(--text-white); font-family: var(--font-family-body); font-size: var(--font-size-display-xs); font-weight: var(--font-weight-semibold); letter-spacing: 0.04em; }   /* sans + gradient — matches the header chip / menu avatars (scaled up) */
.hf-profile__id { min-width: 0; flex: 1; }
.hf-profile__name { margin: 0; font-family: var(--font-family-display); font-weight: var(--font-weight-regular); font-size: var(--font-size-display-sm); line-height: var(--line-height-display-sm); color: var(--text-primary); }
.hf-profile__specialty { margin: 2px 0 var(--spacing-sm); font-size: var(--font-size-text-md); color: var(--text-secondary); }
.hf-profile__hero-meta { display: flex; flex-wrap: wrap; gap: var(--spacing-lg); margin: 0; font-size: var(--font-size-text-sm); color: var(--text-tertiary); }
.hf-profile__hero-meta span { display: inline-flex; align-items: center; gap: var(--spacing-xs); }
.hf-profile__hero-meta svg { width: 15px; height: 15px; color: var(--text-quaternary); }
.hf-profile__badges { flex: none; }

/* ---- Sticky tab bar ---------------------------------------------------- */
.hf-profile__tabs-wrap { position: sticky; top: 56px; z-index: 20; background: var(--color-brand-50); border-bottom: 1px solid var(--border-secondary); }   /* brand-50 continues the hero band through the tabs (and stays on-brand when the bar sticks) */
.hf-profile__tabs { max-width: calc(1240px + 2 * var(--spacing-4xl)); margin: 0 auto; box-sizing: border-box; padding: 0 var(--spacing-4xl); display: flex; flex-wrap: wrap; gap: 0 var(--spacing-sm); }   /* WRAP on desktop/tablet so no tab is ever cut off; ≤768 collapses to a dropdown */
.hf-profile__tabs-trigger { display: none; }   /* desktop: the horizontal tab row is used directly */
.hf-profile__tab { display: inline-flex; align-items: center; gap: var(--spacing-sm); flex: none; padding: var(--spacing-lg) var(--spacing-md); border: 0; background: none; cursor: pointer; font-family: var(--font-family-body); font-size: var(--font-size-text-sm); font-weight: var(--font-weight-medium); color: var(--text-tertiary); border-bottom: 2px solid transparent; white-space: nowrap; transition: color var(--motion-duration) var(--motion-ease), border-color var(--motion-duration) var(--motion-ease); }
.hf-profile__tab svg { display: none; }   /* tab icons hidden for now (client may restore) — remove this rule + restore 16px to bring back */
.hf-profile__tab:hover { color: var(--text-secondary); }
.hf-profile__tab.is-active { color: var(--text-link); border-bottom-color: var(--color-accent-500); }
/* Tab count → the canonical .hf-count badge (brand pill), same as the Tabs atom. */

/* ================= DARK HEADER VARIANT — opt-in via .hf-profile-page--dark =================
   The default (light) hero is retained; adding the modifier to #profile-root swaps the hero +
   tab bar to the Browse-by-Condition dark band (brand-800 + the shared .hf-wavy graphic, white
   text). Everything below the tabs is unaffected. Toggle by editing the class in profile.html. */
.hf-profile-page--dark .hf-profile__hero { background: var(--color-brand-800); overflow: hidden; }   /* clip the wavy layer to the band */
.hf-profile-page--dark .hf-profile__hero-inner { position: relative; z-index: 1; }                   /* sit above .hf-wavy */
.hf-profile-page--dark .hf-profile__name { color: var(--text-white); }
.hf-profile-page--dark .hf-profile__specialty { color: color-mix(in srgb, var(--color-white) 82%, transparent); }
.hf-profile-page--dark .hf-profile__hero-meta { color: color-mix(in srgb, var(--color-white) 70%, transparent); }
.hf-profile-page--dark .hf-profile__hero-meta svg { color: color-mix(in srgb, var(--color-white) 58%, transparent); }
.hf-profile-page--dark .hf-profile__avatar { box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-white) 28%, transparent); }   /* subtle ring lifts the chip off navy */
/* Breadcrumb — white on-brand treatment (mirrors the light breadcrumb, inverted for dark) */
.hf-profile-page--dark .hf-profile__hero .hf-breadcrumb a,
.hf-profile-page--dark .hf-profile__hero .hf-breadcrumb__current { color: color-mix(in srgb, var(--color-white) 85%, transparent); }
.hf-profile-page--dark .hf-profile__hero .hf-breadcrumb a:hover { color: var(--text-white); }
.hf-profile-page--dark .hf-profile__hero .hf-breadcrumb__sep { color: color-mix(in srgb, var(--color-white) 40%, transparent); }
/* Tab bar — a solid navy bar continuing the hero band; white labels; brighter accent underline.
   (The wavy is a hero-only flourish: a second copy behind the tabs can't align across the
   sticky boundary, so the tab bar stays a clean solid navy.) Desktop row only; the ≤768
   collapsed dropdown keeps its clean white menu for legibility. */
@media (min-width: 769px) {
  .hf-profile-page--dark .hf-profile__tabs-wrap { background: var(--color-brand-800); border-bottom-color: color-mix(in srgb, var(--color-white) 14%, transparent); }
  .hf-profile-page--dark .hf-profile__tab { color: color-mix(in srgb, var(--color-white) 70%, transparent); }
  .hf-profile-page--dark .hf-profile__tab:hover { color: var(--text-white); }
  .hf-profile-page--dark .hf-profile__tab.is-active { color: var(--text-white); border-bottom-color: var(--color-accent-400); }
}

/* ---- Panel ------------------------------------------------------------- */
.hf-profile__panel { max-width: calc(1240px + 2 * var(--spacing-4xl)); margin: 0 auto; box-sizing: border-box; padding: var(--spacing-3xl) var(--spacing-4xl) var(--spacing-7xl); }
/* Saved content-type selector (Drugs / Devices / Articles) — reuses the Overview stat card
   as a 3-up selector with an ON state on the active type. */
.hf-profile__stats--select { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 var(--spacing-xl); }
.hf-profile__stat--select.is-active { background: var(--color-accent-500); border-color: var(--color-accent-600); box-shadow: var(--glow-accent); }
.hf-profile__stat--select.is-active:hover { background: var(--color-accent-600); border-color: var(--color-accent-700); }
.hf-profile__stat--select.is-active .hf-profile__stat-num,
.hf-profile__stat--select.is-active .hf-profile__stat-label,
.hf-profile__stat--select.is-active .hf-profile__stat-arrow { color: var(--text-white); }




/* ---- Overview: stats strip -------------------------------------------- */
.hf-profile__stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--spacing-lg); margin: 0 0 var(--spacing-3xl); }
/* Green pill-button treatment (like .hf-entity-badge) + a top-right arrow signalling nav. */
.hf-profile__stat { position: relative; display: flex; flex-direction: column; gap: var(--spacing-xs); padding: var(--spacing-xl); border: 1px solid var(--color-accent-200); border-radius: var(--radius-xl); background: var(--color-accent-50); cursor: pointer; text-align: left; transition: border-color var(--motion-duration) var(--motion-ease), background-color var(--motion-duration) var(--motion-ease), box-shadow var(--motion-duration) var(--motion-ease); }
.hf-profile__stat:hover { border-color: var(--color-accent-400); background: var(--color-accent-100); box-shadow: var(--glow-accent); }
.hf-profile__stat-arrow { position: absolute; top: var(--spacing-md); right: var(--spacing-md); display: inline-flex; color: var(--color-accent-500); }
.hf-profile__stat-arrow svg { width: 18px; height: 18px; }
.hf-profile__stat:hover .hf-profile__stat-arrow { color: var(--color-accent-700); }
.hf-profile__stat-num { font-family: var(--font-family-body); font-size: var(--font-size-display-xs); font-weight: var(--font-weight-bold); color: var(--color-accent-800); }
.hf-profile__stat-label { font-size: var(--font-size-text-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-accent-700); }

/* ---- Overview: card grid ---------------------------------------------- */
.hf-profile__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-xl); }
.hf-profile__card { border: 1px solid var(--border-secondary); border-radius: var(--radius-xl); background: var(--bg-primary); padding: var(--spacing-xl); display: flex; flex-direction: column; gap: var(--spacing-sm); }
.hf-profile__card--wide { grid-column: 1 / -1; }
.hf-profile__card > header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--spacing-md); margin-bottom: var(--spacing-lg); }
.hf-profile__card h2, .hf-profile__card h3 { margin: 0; font-family: var(--font-family-display); font-size: var(--font-size-text-lg); font-weight: var(--font-weight-regular); color: var(--text-primary); }
.hf-profile__ov-more { flex: none; font-size: var(--font-size-text-sm); color: var(--text-link); text-decoration: none; cursor: pointer; white-space: nowrap; }
.hf-profile__ov-more:hover { text-decoration: underline; }
.hf-profile__ov-sub { margin: 0 0 var(--spacing-xs); font-size: var(--font-size-text-sm); color: var(--text-tertiary); }
.hf-profile__ov-empty { margin: 0; padding: var(--spacing-md) 0; font-size: var(--font-size-text-sm); color: var(--text-tertiary); }
.hf-profile__ov-row { display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-sm) 0; border-top: 1px solid var(--border-secondary); text-decoration: none; color: inherit; }
.hf-profile__ov-row:first-of-type { border-top: 0; }
.hf-profile__ov-row .hf-profile__act-icon { width: 28px; height: 28px; }   /* slightly tighter circle for the compact preview rows */
.hf-profile__ov-row .hf-profile__act-icon svg { width: 15px; height: 15px; }
.hf-profile__ov-row p { margin: 0; font-size: var(--font-size-text-sm); line-height: var(--line-height-text-sm); font-weight: var(--font-weight-semibold); color: var(--text-primary); }
.hf-profile__ov-row span { font-size: var(--font-size-text-xs); color: var(--text-tertiary); }
.hf-profile__ov-row:hover p { color: var(--text-link); }

/* Overview: recommendations reuse the canonical .hf-card family (see .hf-card--compact);
   practice-hub pills reuse .hf-entity-badge. Only the hub-row layout is profile-local. */
.hf-profile__hub-row { display: flex; gap: var(--spacing-md); padding: var(--spacing-sm) 0; }
.hf-profile__hub-label { flex: none; width: 110px; font-size: var(--font-size-text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); padding-top: 6px; }
.hf-profile__hub-items { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); }   /* pills reuse the green .hf-entity-badge atom */

/* ---- Toolbar (search + chips) ----------------------------------------- */
/* Stack: search on top (full width), category chips below — so the chip row grows/wraps
   independently and never crowds the search as the number of categories changes. */
.hf-profile__toolbar { display: flex; flex-direction: column; align-items: stretch; gap: var(--spacing-lg); margin: 0 0 var(--spacing-3xl); }
.hf-profile__searchwrap { width: 100%; }   /* reuses the .hf-input-group + .hf-input atom */
.hf-profile__chips { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); }   /* chips themselves reuse the .hf-catchip atom */

/* Mobile filter sheet — ≤768 the category chip row collapses behind a "Filters" trigger into a
   bottom sheet (reuses the directory's canonical Filters-sheet chrome). Desktop: chips inline. */
.hf-profile__filters { display: contents; }              /* desktop: wrapper dissolves, chips flow inline */
.hf-profile__filters-btn { display: none; }              /* trigger + sheet chrome shown only ≤768 */
.hf-profile__filters-sheethead { display: none; }
.hf-profile__filters-backdrop { display: none; }
@media (max-width: 768px) {
  .hf-profile__filters-btn { display: inline-flex; align-self: flex-start; }   /* .hf-btn--secondary supplies the chrome — canonical light border + soft shadow */
  .hf-profile__filters-btn svg { width: 16px; height: 16px; }
  .hf-profile__filters-backdrop { display: block; position: fixed; inset: 0; z-index: 55; background: color-mix(in srgb, var(--text-primary) 45%, transparent); opacity: 0; pointer-events: none; transition: opacity var(--motion-duration) var(--motion-ease); }
  .hf-profile__filters { display: flex; flex-direction: column; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; max-height: 80vh; padding: var(--spacing-xl); background: var(--bg-primary); border-top-left-radius: var(--radius-3xl); border-top-right-radius: var(--radius-3xl); box-shadow: var(--shadow-overlay); transform: translateY(100%); transition: transform var(--motion-duration) var(--motion-ease); }
  .hf-profile__toolbar.is-filters-open .hf-profile__filters { transform: translateY(0); }
  .hf-profile__toolbar.is-filters-open .hf-profile__filters-backdrop { opacity: 1; pointer-events: auto; }
  .hf-profile__filters-sheethead { display: block; }
  .hf-profile__filters-handle { display: block; width: 36px; height: 4px; border-radius: var(--radius-full); background: var(--border-primary); margin: 0 auto var(--spacing-md); }
  .hf-profile__filters-headrow { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--spacing-md); border-bottom: 1px solid var(--border-secondary); margin-bottom: var(--spacing-lg); }
  .hf-profile__filters-title { font-family: var(--font-family-display); font-size: var(--font-size-text-xl); color: var(--text-primary); }
  .hf-profile__filters-close { background: transparent; border: 0; cursor: pointer; padding: 6px; color: var(--text-tertiary); border-radius: var(--radius-sm); display: inline-flex; }
  .hf-profile__filters-close svg { width: 20px; height: 20px; }
  .hf-profile__filters .hf-profile__chips { overflow-y: auto; overscroll-behavior: contain; }   /* scroll the chip list within the sheet */
}

/* ---- Table: uses the canonical .hf-table (+ .hf-table--sortable). Only the
   first-cell link, the ✕ row action, and a nowrap date cell are profile add-ons
   ("new"/"updated" flags reuse the canonical .hf-badge--success .hf-badge--sm). --------- */
.hf-profile__panel .hf-table td a { color: inherit; text-decoration: none; }
.hf-profile__panel .hf-table td a:hover { color: var(--text-link); text-decoration: underline; }
.hf-profile__cell-date { white-space: nowrap; }
.hf-profile__cell-actions { width: 44px; text-align: right; vertical-align: middle; }
/* Saved/Following row remove uses the canonical destructive .hf-remove-btn atom (see atoms). */
.hf-profile__table-empty { padding: var(--spacing-3xl) !important; text-align: center; color: var(--text-tertiary); font-weight: var(--font-weight-regular); }

/* ---- News list --------------------------------------------------------- */
.hf-profile__news { display: flex; flex-direction: column; background: var(--bg-primary); border: 1px solid var(--border-secondary); border-radius: var(--radius-xl); overflow: hidden; }   /* opaque panel so odd (non-zebra) rows don't reveal the page-bottom wash */
/* A Card-Pub rendered as a row: <article> is position:relative so the title's stretched link
   covers the whole row, while the topic .hf-entity-badge links (z-index:1 from the base) stay
   independently clickable — no nested anchors. Topic tags + meta reuse .hf-card__entities /
   .hf-card__meta. Title tuned down one step for list density. */
.hf-profile__news-item { position: relative; display: flex; align-items: flex-start; gap: var(--spacing-lg); padding: var(--spacing-xl); }
.hf-profile__news-item:nth-child(even) { background: var(--color-brand-50); }   /* zebra — matches the Saved/Following tables */
.hf-profile__news-item:hover { background: var(--color-accent-50); }
.hf-profile__news-body { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-sm); }
.hf-profile__news-body .hf-card__title { font-size: var(--font-size-text-md); line-height: var(--line-height-text-md); }   /* row-appropriate — matches the other tabs' entry titles */
.hf-profile__news-body .hf-card__dek { font-size: var(--font-size-text-sm); line-height: var(--line-height-text-sm); }
.hf-profile__news-chev { flex: none; width: 18px; height: 18px; color: var(--text-quaternary); align-self: center; position: relative; }

/* ---- Updates (What's New) --------------------------------------------- */
.hf-profile__updates { display: flex; flex-direction: column; background: var(--bg-primary); border: 1px solid var(--border-secondary); border-radius: var(--radius-xl); overflow: hidden; }   /* opaque panel so odd (non-zebra) rows don't reveal the page-bottom wash */
.hf-profile__update { display: flex; align-items: flex-start; gap: var(--spacing-lg); padding: var(--spacing-lg); text-decoration: none; color: inherit; }
.hf-profile__update:nth-child(even) { background: var(--color-brand-50); }   /* zebra */
.hf-profile__update:hover { background: var(--color-accent-50); }
/* Type is now the leading .hf-profile__act-icon circle (shared with History); the label
   is a canonical .hf-badge in the meta. */
.hf-profile__update-body { flex: 1; min-width: 0; }
.hf-profile__update-headline { margin: 0 0 2px; font-size: var(--font-size-text-md); color: var(--text-primary); }
.hf-profile__update-detail { margin: 0 0 var(--spacing-sm); font-size: var(--font-size-text-sm); line-height: var(--line-height-text-sm); color: var(--text-secondary); }
.hf-profile__update-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-sm); margin: 0; }
.hf-profile__update-metatext { font-size: var(--font-size-text-xs); color: var(--text-quaternary); }
.hf-profile__update-chev { flex: none; width: 18px; height: 18px; color: var(--text-quaternary); align-self: center; }
.hf-profile__update--recall .hf-profile__act-icon { background: var(--bg-error-subtle); color: var(--text-error); }   /* recall = destructive/error → semantic error tokens */
.hf-profile__update--recall { border-left: 3px solid var(--color-red-500); }

/* ---- History / activity ------------------------------------------------ */
.hf-profile__activity { display: flex; flex-direction: column; background: var(--bg-primary); border: 1px solid var(--border-secondary); border-radius: var(--radius-xl); overflow: hidden; }   /* opaque panel so odd (non-zebra) rows don't reveal the page-bottom wash */
.hf-profile__act-row { display: flex; align-items: center; gap: var(--spacing-lg); padding: var(--spacing-md) var(--spacing-lg); text-decoration: none; color: inherit; }
.hf-profile__act-row:nth-child(even) { background: var(--color-brand-50); }   /* zebra */
.hf-profile__act-row--link:hover { background: var(--color-accent-50); }
.hf-profile__act-icon { flex: none; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-full); background: var(--color-brand-50); color: var(--icon-fg-brand); }
.hf-profile__act-icon svg { width: 16px; height: 16px; }
.hf-profile__act-body { flex: 1; min-width: 0; }
.hf-profile__act-label { margin: 0; font-size: var(--font-size-text-sm); font-weight: var(--font-weight-medium); color: var(--text-primary); }
.hf-profile__act-detail { margin: 0; font-size: var(--font-size-text-xs); color: var(--text-tertiary); }
.hf-profile__act-when { flex: none; font-size: var(--font-size-text-xs); color: var(--text-quaternary); white-space: nowrap; }
.hf-profile__act-chev { flex: none; width: 16px; height: 16px; color: var(--text-quaternary); }

/* ---- Preferences ------------------------------------------------------- */
.hf-profile__pref-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-xl); }
.hf-profile__pref-block { border: 1px solid var(--border-secondary); border-radius: var(--radius-xl); background: var(--bg-primary); padding: var(--spacing-xl); }
.hf-profile__pref-block--full { grid-column: 1 / -1; }
.hf-profile__pref-block--danger { border-color: var(--color-red-200, var(--border-primary)); }
.hf-profile__pref-grouptitle { margin: 0 0 var(--spacing-lg); font-family: var(--font-family-display); font-size: var(--font-size-text-lg); font-weight: var(--font-weight-regular); color: var(--text-primary); }
.hf-profile__pref { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-lg); padding: var(--spacing-md) 0; border-top: 1px solid var(--border-secondary); }
.hf-profile__pref:first-of-type { border-top: 0; }
.hf-profile__pref-copy { display: flex; flex-direction: column; gap: 2px; }
.hf-profile__pref-label { font-size: var(--font-size-text-sm); font-weight: var(--font-weight-medium); color: var(--text-primary); }
.hf-profile__pref-helper { font-size: var(--font-size-text-xs); color: var(--text-tertiary); }
.hf-profile__pref-row { display: flex; align-items: center; gap: var(--spacing-lg); padding: var(--spacing-md) 0; border-top: 1px solid var(--border-secondary); }
.hf-profile__pref-row:first-of-type { border-top: 0; }
.hf-profile__pref-row--labeled .hf-profile__pref-rowlabel { flex: none; width: 96px; font-size: var(--font-size-text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); }
.hf-profile__pref-value { flex: 1; min-width: 0; font-size: var(--font-size-text-sm); color: var(--text-secondary); }
.hf-profile__pref-empty { color: var(--text-quaternary); font-style: italic; }
.hf-profile__pref-action { flex: none; padding: var(--spacing-xs) var(--spacing-md); border: 1px solid var(--border-primary); border-radius: var(--radius-md); background: var(--bg-primary); color: var(--text-secondary); font-family: var(--font-family-body); font-size: var(--font-size-text-sm); cursor: pointer; }
.hf-profile__pref-action:hover { border-color: var(--color-brand-400); color: var(--text-link); }
.hf-profile__pref-action--destructive { color: var(--color-red-600, var(--text-primary)); border-color: var(--color-red-200, var(--border-primary)); }
.hf-profile__pref-action--destructive:hover { background: var(--color-red-50, var(--bg-secondary)); border-color: var(--color-red-400, var(--border-primary)); color: var(--color-red-700, var(--text-primary)); }
.hf-profile__pref-actions { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); }
/* Identity ledger — inline row editing (hybrid edit model, v3.64).
   The Edit button swaps the row's value for .hf-input field(s) + Save/Cancel. */
.hf-profile__pref-row.is-editing { align-items: flex-start; }
.hf-profile__pref-row.is-editing .hf-profile__pref-rowlabel { padding-top: var(--spacing-md); }
.hf-profile__pref-edit { flex: 1; display: flex; align-items: center; gap: var(--spacing-md); flex-wrap: wrap; min-width: 0; }
.hf-profile__pref-edit .hf-input { flex: 1 1 160px; min-width: 0; }
.hf-profile__pref-editactions { display: flex; gap: var(--spacing-sm); flex: none; }
/* NPI-sourced fields: read-only annotation in the action slot (no button) */
.hf-profile__pref-locked { display: inline-flex; align-items: center; gap: var(--spacing-xs); flex: none; font-size: var(--font-size-text-xs); color: var(--text-quaternary); }
.hf-profile__pref-locked svg { width: 12px; height: 12px; }


/* Preference-picker modal (profile.js — Areas of interest; inquiry-modal rhythm) */
#hf-interests-modal .hf-modal__panel { max-width: 560px; display: flex; flex-direction: column; }
.hf-prefmodal__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spacing-lg); padding: var(--spacing-3xl) var(--spacing-3xl) var(--spacing-xl); background: var(--gradient-modal-head); border-bottom: 1px solid var(--border-primary); }
.hf-prefmodal__eyebrow { margin: 0 0 2px; font-size: var(--font-size-text-xs); text-transform: uppercase; letter-spacing: 0.08em; font-weight: var(--font-weight-semibold); color: var(--text-brand-secondary); }
.hf-prefmodal__title { margin: 0; font-family: var(--font-family-display); font-size: var(--font-size-display-xs); font-weight: var(--font-weight-semibold); color: var(--text-primary); }
.hf-prefmodal__sub { margin: var(--spacing-xs) 0 0; font-size: var(--font-size-text-sm); color: var(--text-tertiary); }
.hf-prefmodal__close { position: static; }
.hf-prefmodal__body { padding: var(--spacing-3xl); }
.hf-prefmodal__body .hf-field { margin-bottom: var(--spacing-lg); }
.hf-prefmodal__scroll {
  max-height: min(360px, 50vh); overflow-y: auto; display: flex; flex-direction: column; gap: var(--spacing-xl); padding-right: var(--spacing-xs);
  background:
    linear-gradient(var(--bg-primary) 30%, transparent) 0 0 / 100% 28px,
    linear-gradient(transparent, var(--bg-primary) 70%) 0 100% / 100% 28px,
    radial-gradient(farthest-side at 50% 0, color-mix(in srgb, var(--color-brand-900) 14%, transparent), transparent) 0 0 / 100% 12px,
    radial-gradient(farthest-side at 50% 100%, color-mix(in srgb, var(--color-brand-900) 14%, transparent), transparent) 0 100% / 100% 12px;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
}
/* Checkbox rows (canonical .hf-filter-row) in a hairline container; slightly
   larger type than the finder rails since this is the modal's primary control */
.hf-prefmodal__rows { border: 1px solid var(--border-secondary); border-radius: var(--radius-md); overflow: hidden; }
.hf-prefmodal__rows .hf-filter-row { font-size: var(--font-size-text-sm); line-height: var(--line-height-text-sm); }
.hf-prefmodal__rows .hf-filter-row:first-child { border-top: 0; }
.hf-prefmodal__scroll [hidden] { display: none !important; }
.hf-prefmodal__group { display: flex; flex-direction: column; gap: var(--spacing-sm); }
.hf-prefmodal__grouplabel { margin: 0; font-size: var(--font-size-text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); }
.hf-prefmodal__footer { padding: var(--spacing-xl) var(--spacing-3xl) var(--spacing-3xl); display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); }
.hf-prefmodal__count { font-size: var(--font-size-text-sm); color: var(--text-quaternary); }
.hf-prefmodal__actions { display: flex; gap: var(--spacing-md); }

.hf-profile__pref-note { display: flex; align-items: flex-start; gap: var(--spacing-xs); margin: var(--spacing-md) 0 0; font-size: var(--font-size-text-xs); color: var(--text-tertiary); }
.hf-profile__pref-note svg { flex: none; width: 14px; height: 14px; margin-top: 1px; color: var(--color-amber-500, var(--icon-fg-accent)); }
.hf-profile__chipset { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); }
/* Empty-state invitation (Areas of interest, cold profile) — warm, benefit-led,
   own line with room before the Add button */
/* Block-level action (Areas of interest): right-aligned like the ledger rows' Edit buttons */
.hf-profile__pref-blockaction { display: block; margin-top: var(--spacing-md); margin-left: auto; }
.hf-profile__pref-invite { margin: 0 0 var(--spacing-sm); max-width: 46ch; font-size: var(--font-size-text-sm); line-height: 1.5; color: var(--text-tertiary); }
/* Interests reuse the green .hf-entity-badge atom (no flat gray chip). */
/* Toggle switch: reuses the canonical .hf-toggle atom (no profile-specific rule). */

/* ---- Empty state ------------------------------------------------------- */
/* (Promoted to the canonical .hf-empty atom — see the Empty state section.) */

/* ---- Toast: Undo/close variant (extends .hf-toast) --------------------- */
.hf-toast--action { display: flex; align-items: center; gap: var(--spacing-md); pointer-events: auto; }
.hf-toast__icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 13px; height: 13px; padding-right: 5px; color: var(--color-accent-400); }
.hf-toast__icon svg { width: 13px; height: 13px; }
.hf-toast__msg { font-size: var(--font-size-text-sm); }
.hf-toast__action { border: 0; background: none; color: var(--color-accent-300); font-family: var(--font-family-body); font-weight: var(--font-weight-semibold); font-size: var(--font-size-text-sm); cursor: pointer; padding: 0 var(--spacing-xs); }
.hf-toast__action:hover { text-decoration: underline; }
.hf-toast__close { display: inline-flex; border: 0; background: none; color: var(--color-gray-300, var(--text-white)); cursor: pointer; padding: 0; opacity: 0.7; }
.hf-toast__close:hover { opacity: 1; }
.hf-toast__close svg { width: 16px; height: 16px; }

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 900px) {   /* off-scale: wireframe breakpoint (profile stats/pref grids) */
  .hf-profile__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hf-profile__pref-grid { grid-template-columns: 1fr; }   /* wireframe parity */
}
@media (max-width: 768px) {
  .hf-profile__hero-inner { padding: var(--spacing-3xl) var(--spacing-xl) var(--spacing-xl); }
  /* Header: stack avatar → identity → NPI badge, all left-aligned. */
  .hf-profile__hero-row { flex-direction: column; align-items: flex-start; gap: var(--spacing-lg); }
  .hf-profile__name { font-size: var(--font-size-display-xs); line-height: var(--line-height-display-xs); }
  /* Tabs collapse to a clean white dropdown (no brand tint): the trigger is the visible
     control; the list opens below it as a divided menu. Trigger + items share one type size. */
  .hf-profile__tabs-wrap { background: var(--bg-primary); border-top: 1px solid var(--border-secondary); }   /* border separates the collapsed tab control from the hero band above */
  .hf-profile__tabs-trigger { display: flex; align-items: center; gap: var(--spacing-md); width: 100%; box-sizing: border-box; padding: var(--spacing-lg) var(--spacing-xl); background: none; border: 0; font-family: var(--font-family-body); font-size: var(--font-size-text-md); font-weight: var(--font-weight-semibold); color: var(--text-primary); cursor: pointer; }
  .hf-profile__tabs-trigger > svg { width: 18px; height: 18px; color: var(--icon-fg-brand); }
  .hf-profile__tabs-chev { margin-left: auto; width: 18px; height: 18px; color: var(--text-tertiary); transition: transform var(--motion-duration) var(--motion-ease); }
  .hf-profile__tabs-wrap.is-open .hf-profile__tabs-chev { transform: rotate(180deg); }
  .hf-profile__tabs { display: none; flex-direction: column; gap: 0; max-width: none; padding: 0; }   /* no side padding → dividers run full-bleed */
  .hf-profile__tabs-wrap.is-open .hf-profile__tabs { display: flex; }
  .hf-profile__tab { width: 100%; justify-content: flex-start; gap: var(--spacing-md); padding: var(--spacing-lg) var(--spacing-xl); border-radius: 0; border-bottom: 0; border-top: 1px solid var(--border-secondary); font-size: var(--font-size-text-md); }   /* full-width divider; text inset via item padding */
  .hf-profile__tab.is-active { background: var(--bg-accent-alt); color: var(--color-accent-700); font-weight: var(--font-weight-semibold); }   /* light-green active row */
  .hf-profile__tab .hf-count { margin-left: auto; }
  .hf-profile__panel { padding: var(--spacing-2xl) var(--spacing-xl) var(--spacing-6xl); }
  .hf-profile__grid { grid-template-columns: 1fr; }
  .hf-profile__pref-grid { grid-template-columns: 1fr; }
  /* Labeled preference rows stack (label above value) so the fixed label column doesn't crowd */
  .hf-profile__pref-row--labeled { flex-wrap: wrap; row-gap: var(--spacing-xs); }
  .hf-profile__pref-row--labeled .hf-profile__pref-rowlabel { width: 100%; }
  /* Editing rows stack fully: the input(s) get the whole line, Save/Cancel drop
     to their own row beneath (right-aligned, modal-footer rhythm) — no more
     input squeezed against the buttons. */
  .hf-profile__pref-row.is-editing .hf-profile__pref-rowlabel { padding-top: 0; }
  .hf-profile__pref-edit { flex-direction: column; align-items: stretch; gap: var(--spacing-md); }
  .hf-profile__pref-edit .hf-input { flex: none; width: 100%; }
  .hf-profile__pref-editactions { justify-content: flex-end; }
  /* Action rows (Data & history, Delete account): stack the description above its buttons, left-
     aligned, instead of cramming buttons against a narrow wrapped description. */
  .hf-profile__pref-row:not(.hf-profile__pref-row--labeled) { flex-direction: column; align-items: flex-start; gap: var(--spacing-md); }
  .hf-profile__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hf-profile__update-chev { display: none; }
  .hf-profile__news-chev { display: none; }
  .hf-profile__hub-label { width: 100%; padding-top: 0; }
  .hf-profile__hub-row { flex-direction: column; gap: var(--spacing-xs); }
}
@media (max-width: 560px) {
  .hf-profile__stats { grid-template-columns: 1fr 1fr; }
  .hf-profile__name { font-size: var(--font-size-display-xs); line-height: var(--line-height-display-xs); }
}

/* ============================================================================
   MAGAZINE — issue-cover cards (archive grid + issue-page hero)
   A cover is a portrait tile: a token-routed brand gradient stands in for real
   cover art (only one real cover asset exists), with the issue label overlaid.
   The only net-new family for the /magazine/ archive + issue templates.
   ============================================================================ */
.hf-maggrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--spacing-2xl) var(--spacing-xl); }
.hf-magcard { display: flex; flex-direction: column; gap: var(--spacing-sm); text-decoration: none; color: inherit; }
.hf-magcover {
  position: relative; aspect-ratio: 3 / 4; border-radius: var(--radius-md); overflow: hidden;
  box-shadow: var(--shadow-md); display: flex; align-items: flex-end; padding: var(--spacing-lg);
  background: linear-gradient(150deg, var(--bg-brand-solid), color-mix(in srgb, var(--bg-brand-solid) 55%, #000));
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.hf-magcard:hover .hf-magcover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

.hf-magcover__badge {
  position: absolute; top: var(--spacing-md); left: var(--spacing-md);
  font-size: var(--font-size-text-xs); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-primary); background: var(--bg-primary); border-radius: var(--radius-xs); padding: 2px 8px;
}
.hf-magcard__title { font-size: var(--font-size-text-sm); font-weight: var(--font-weight-semibold); color: var(--text-primary); }

/* Real cover art fills the tile / viewer cover (over the gradient fallback, under the badge). */
.hf-magcover__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* Embedded-viewer loading veil — shown briefly while a new edition "loads" into the viewer. */
/* Structure — was split page-local/global (each half dead without the other);
   unified here (audit v3.40 #17). */
.mag-viewer { border: 1px solid var(--border-secondary); border-radius: var(--radius-xl); overflow: hidden; background: var(--bg-secondary); scroll-margin-top: var(--spacing-4xl); }
.mag-viewer__stage { position: relative; aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, var(--bg-brand-solid), color-mix(in srgb, var(--bg-brand-solid) 55%, #000)); }
.mag-viewer__hint { position: absolute; z-index: 2; pointer-events: none; bottom: var(--spacing-lg); right: var(--spacing-xl); display: flex; align-items: center; gap: var(--spacing-xs); font-size: var(--font-size-text-xs); color: color-mix(in srgb, var(--text-white) 78%, transparent); }
.mag-viewer__hint svg { width: 13px; height: 13px; }
.mag-viewer__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-lg); padding: var(--spacing-lg) var(--spacing-2xl); flex-wrap: wrap; }
.mag-viewer__meta { min-width: 0; }

.mag-viewer__ctas { display: flex; gap: var(--spacing-md); flex-wrap: wrap; }
.mag-viewer__loading { position: absolute; inset: 0; z-index: 3; display: none; align-items: center; justify-content: center; background: color-mix(in srgb, var(--bg-brand-solid) 74%, #000); }
.mag-viewer__loading.is-on { display: flex; }
.mag-viewer__spin { width: 34px; height: 34px; border-radius: var(--radius-full); border: 3px solid color-mix(in srgb, var(--text-white) 30%, transparent); border-top-color: var(--text-white); animation: hfSpin 0.7s linear infinite; }

/* The viewer IS the open issuu reader — the stage always shows the magazine open: a real
   issuu <iframe> when the issue carries an embed URL (data field `issuu`), otherwise a
   placeholder spread. The loading veil (z-index 3) covers it while a new edition loads. */
.mag-viewer__reader { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; padding: var(--spacing-2xl); }
.mag-viewer__reader iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mag-viewer__spread { display: flex; gap: 2px; height: 84%; box-shadow: var(--shadow-lg); border-radius: var(--radius-xs); overflow: hidden; }
.mag-viewer__spread img, .mag-viewer__spread div { height: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.mag-viewer__spread .mag-viewer__page--blank { background: var(--bg-primary); }

/* ================================================================
   PRINT — detail pages (drug · device · manufacturer)
   Chris, 2026-08-19: all detail templates get print support.
   Principles: chrome and interactive controls disappear; content
   flattens to one ink-on-paper column; tables never split mid-row;
   the ISI ALWAYS prints in full (regulatory); ad units are
   suppressed but sponsor ATTRIBUTION text is kept (default pending
   a business decision — flip by removing the leaderboard rules).
   ================================================================ */
@media print {
  @page { margin: 1.5cm; }

  /* ---- chrome + interactive: gone ---- */
  .hf-nav, .hf-header, .hf-footer, .hf-viewas,
  .hf-toast, .hf-modal, .hf-tooltip, .hf-readprogress,
  .hf-drugpage__subhead,                       /* mobile sheet triggers */
  .hf-drugpage__rail,                          /* actions + on-this-page rail */
  .hf-drugpage__aside,                         /* intel rail (device) */
  .hf-inpage-nav,
  .hf-btn, [data-fav], [data-favrow],
  .hf-isi__minimize { display: none !important; }

  /* ---- ad units suppressed; attribution stays ---- */
  .hf-leaderboard__frame, .hf-leaderboard__creative,
  .hf-drughero__banner { display: none !important; }

  /* ---- flatten the page ---- */
  body { background: #fff !important; }
  .hf-shell { display: block !important; }
  .hf-content { margin: 0 !important; padding: 0 !important; max-width: none !important; }
  .hf-drugpage__shell { display: block !important; }
  .hf-drugpage__main { width: auto !important; max-width: none !important; }
  * { box-shadow: none !important; text-shadow: none !important; }

  /* ---- ink colors: heroes lose their bands, text goes dark ---- */
  .hf-drughero, .hf-drughero--sponsored, .hf-drughero--entity {
    background: #fff !important; border: 0 !important;
    padding-left: 0 !important; padding-right: 0 !important;
  }
  .hf-drughero *, .hf-drugpage__main, .hf-drugpage__main * {
    color: #000 !important;
  }
  a { color: #000 !important; text-decoration: none; }
  /* External resource links keep their destination on paper */
  .hf-drugpage__main a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em; color: #444 !important; word-break: break-all;
  }

  /* ---- tables: keep rows whole, repeat headers ---- */
  .hf-table { border: 1px solid #999; }
  .hf-table thead { display: table-header-group; }
  .hf-table tr { break-inside: avoid; page-break-inside: avoid; }
  .hf-table th, .hf-table td { color: #000 !important; }

  /* ---- ISI prints IN FULL, in flow (regulatory) ---- */
  .hf-isi {
    position: static !important; height: auto !important; max-height: none !important;
    overflow: visible !important; box-shadow: none !important;
    border-top: 2px solid #000; margin-top: 24px;
    break-before: page;                        /* ISI starts on its own page */
  }
  .hf-isi.is-minimized { height: auto !important; }
  .hf-isi.is-minimized .hf-isi__body,
  .hf-isi__body { display: block !important; max-height: none !important; overflow: visible !important; }
  .hf-isi * { color: #000 !important; }

  /* ---- breadcrumbs: navigation, not content (Chris, 2026-08-19) ---- */
  .hf-breadcrumb { display: none !important; }

  /* ---- hero chip strip (Indicated for / Class / Sponsor): on screen it
     scrolls horizontally with a fade — on paper it WRAPS so every chip
     prints (Chris, 2026-08-19) ---- */
  .hf-drughero__chips {
    flex-wrap: wrap !important;
    overflow: visible !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
  }
  .hf-drughero__chips .hf-entity-badge { break-inside: avoid; border: 1px solid #999 !important; }

  /* ---- resources print IN FULL: every container open, every tab panel
     shown (Chris, 2026-08-19 — closed accordions must not hide files) ---- */
  .hf-resource__body { display: block !important; }
  .hf-resource__list[hidden] { display: flex !important; }
  .hf-resource__list + .hf-resource__list { border-top: 1px dashed #999; margin-top: 8px; padding-top: 8px; }
  .hf-resource__toggle { display: none !important; }   /* the +/- disc — meaningless on paper */
  /* The tab strip becomes a static legend of the groups that follow */
  .hf-resource__tabs { display: flex !important; gap: 12px; }
  .hf-resource__tab {
    border: 0 !important; background: none !important; padding: 0 !important;
    color: #000 !important; font-weight: 600;
  }
  .hf-resource__tab .hf-count { border: 1px solid #999; background: none !important; color: #000 !important; }

  /* ---- misc: cards keep their box but stay together ---- */
  /* Resources may now exceed a page when expanded — let the container flow,
     keep each file row whole instead */
  .hf-card, .hf-specs__group, .hf-specs__row, .hf-resource__file, .hf-resource__head { break-inside: avoid; }
}