/* PepNationRX — CSS Bundle */
/* Generated: 2026-07-06T14:05:01.487Z */
/* DO NOT EDIT — run: node scripts/bundle-css.js */

/* ===== css/variables.css ===== */
/* ============================================================================
   PEPNATIONRX — DESIGN TOKENS  v3  (Premium Light)
   ----------------------------------------------------------------------------
   Inspired by: Ro, Hims, Sesame, PlushCare, GoodRx Care, Facebook design system.

   CORE PRINCIPLES
   ───────────────
   1. Depth through layered shadows — cards clearly float above the page.
   2. Neutral white surface, warm-grey canvas (#F0F2F5 modern social media).
   3. One strong accent (deep teal) used sparingly on CTAs and selection states.
   4. Bold, confident typography (Inter, tight line-height on headings).
   5. Generous but intentional spacing — not empty, purposeful.
   6. Micro-animations that feel physical, not cartoon.
   ============================================================================ */

:root {

  /* ==========================================================================
     1. BASE CONFIG
     ========================================================================== */
  --base-unit: 8px;
  --type-base: 1rem;        /* 16px */
  --radius-base: 10px;

  /* ==========================================================================
     2. RAW COLOUR PALETTE
     ========================================================================== */

  /* Canvas / structure — Facebook's #F0F2F5 warm grey hierarchy */
  --canvas-50:  hsl(220, 14%, 96%);   /* #F0F2F5 — page background     */
  --canvas-100: hsl(220, 12%, 92%);   /* #E4E6E9 — recessed surface     */
  --canvas-200: hsl(220, 10%, 87%);   /* #D8DADD — border / divider     */
  --canvas-300: hsl(220,  9%, 78%);   /* #BFC1C6 — strong border        */
  --canvas-400: hsl(220,  8%, 60%);   /* #93959A — muted text           */
  --canvas-500: hsl(220, 10%, 40%);   /* #5B5E66 — secondary text       */
  --canvas-600: hsl(220, 14%, 22%);   /* #2E323B — body / primary text  */
  --canvas-700: hsl(220, 16%, 12%);   /* #181B22 — near-black           */

  /* Pure white for surfaces */
  --white: #FFFFFF;

  /* Teal — Ro-inspired deep clinical teal, not neon */
  --teal-50:  hsl(174, 55%, 95%);   /* very light tint — selected bg  */
  --teal-100: hsl(174, 52%, 86%);   /* light tint — hover tint        */
  --teal-200: hsl(174, 58%, 72%);   /* medium tint — coupon hover     */
  --teal-300: hsl(174, 65%, 56%);   /* medium accent                  */
  --teal-400: hsl(174, 70%, 36%);   /* hover state                    */
  --teal-500: hsl(174, 75%, 30%);   /* ← PRIMARY — clinical, deep     */
  --teal-600: hsl(174, 78%, 24%);   /* pressed / active               */
  --teal-700: hsl(174, 80%, 18%);   /* very dark                      */

  /* Status colours (flat, no glow) */
  --green-100: hsl(142, 52%, 93%);
  --green-600: hsl(142, 60%, 32%);
  --amber-100: hsl(38,  88%, 93%);
  --amber-600: hsl(38,  80%, 36%);
  --red-100:   hsl(0,   68%, 94%);
  --red-600:   hsl(0,   62%, 40%);
  --blue-100:  hsl(214, 70%, 93%);
  --blue-600:  hsl(214, 68%, 40%);

  /* ==========================================================================
     3. SEMANTIC ROLES  (what components reference)
     ========================================================================== */

  /* Page canvas */
  --color-bg:              var(--canvas-50);
  --color-bg-canvas:       var(--canvas-50);
  --color-bg-recessed:     var(--canvas-100);

  /* Card / surface */
  --color-surface:          var(--white);
  --color-surface-raised:   var(--white);
  --color-surface-elevated: var(--white);
  --color-surface-recessed: var(--canvas-100);

  /* Borders */
  --color-border:        var(--canvas-200);
  --color-border-strong: var(--canvas-300);
  --color-divider:       var(--canvas-200);

  /* Text */
  --color-text-primary:   var(--canvas-600);
  --color-text-secondary: var(--canvas-500);
  --color-text-muted:     var(--canvas-400);
  --color-text-inverse:   var(--white);
  --color-text-brand:     var(--teal-500);

  /* Accent */
  --color-accent:        var(--teal-500);
  --color-accent-hover:  var(--teal-400);
  --color-accent-active: var(--teal-600);
  --color-accent-bg:     var(--teal-50);
  --color-accent-2:      var(--blue-600);

  /* Focus */
  --color-focus-ring: var(--teal-500);

  /* Legacy compat aliases (so old CSS still parses without crashing) */
  --grey-000: var(--white);
  --grey-050: var(--canvas-50);
  --grey-100: var(--canvas-100);
  --grey-150: var(--canvas-200);
  --grey-200: var(--canvas-300);
  --grey-300: var(--canvas-400);
  --grey-400: var(--canvas-500);
  --grey-500: var(--canvas-500);
  --grey-600: var(--canvas-600);
  --grey-700: var(--canvas-700);

  /* ==========================================================================
     4. ELEVATION  (the key to "premium depth")
     ───────────────────────────────────────────
     Ro uses: box-shadow: 0 4px 16px rgba(0,0,0,.10)
     Facebook uses: box-shadow: 0 1px 2px rgba(0,0,0,.20)
     Hims uses: box-shadow: 0 2px 8px rgba(0,0,0,.12), 0 8px 24px rgba(0,0,0,.08)
     ========================================================================== */
  --elev-0: none;

  /* Hairline lift — nav items, badges */
  --elev-1:
    0 1px 2px  rgba(0, 0, 0, 0.08);

  /* Default card — clearly separated from canvas */
  --elev-2:
    0 1px 3px  rgba(0, 0, 0, 0.06),
    0 4px 12px rgba(0, 0, 0, 0.08);

  /* Hover card — tangible lift */
  --elev-3:
    0 2px 6px  rgba(0, 0, 0, 0.08),
    0 8px 24px rgba(0, 0, 0, 0.10);

  /* Modal / drawer */
  --elev-4:
    0 4px 12px rgba(0, 0, 0, 0.10),
    0 16px 40px rgba(0, 0, 0, 0.12);

  /* Overlay */
  --elev-5:
    0 8px 24px rgba(0, 0, 0, 0.12),
    0 24px 56px rgba(0, 0, 0, 0.14);

  /* Keep legacy names so nothing breaks */
  --elev-6: var(--elev-5);


  /* ==========================================================================
     5. SPACING  (8px grid)
     ========================================================================== */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ==========================================================================
     6. TYPOGRAPHY
     ========================================================================== */
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;

  --text-xs:  0.75rem;    /* 12px */
  --text-sm:  0.875rem;   /* 14px */
  --text-md:  1rem;       /* 16px */
  --text-lg:  1.125rem;   /* 18px */
  --text-xl:  1.25rem;    /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 1.875rem;   /* 30px */
  --text-4xl: 2.25rem;    /* 36px */
  --text-5xl: 3rem;       /* 48px */

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;

  --leading-tight:  1.15;
  --leading-snug:   1.35;
  --leading-base:   1.60;
  --tracking-wide:  0.06em;
  --tracking-wider: 0.10em;

  /* ==========================================================================
     7. BORDER RADIUS
     ========================================================================== */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-pill: 999px;

  /* ==========================================================================
     8. MOTION
     ========================================================================== */
  --ease-standard:  cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-out:       cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in-out:    cubic-bezier(0.4, 0.0, 0.6, 1);
  --duration-fast:  140ms;
  --duration-base:  220ms;
  --duration-slow:  380ms;

  /* ==========================================================================
     9. LAYOUT
     ========================================================================== */
  --layout-max-width: 1200px;
  --layout-gutter:    clamp(16px, 4vw, 40px);
  --nav-height: 68px;

  /* ==========================================================================
     10. Z-INDEX
     ========================================================================== */
  --z-base:    0;
  --z-raised:  10;
  --z-sticky:  100;
  --z-overlay: 1000;
  --z-modal:   1100;
  --z-toast:   1200;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 1ms;
    --duration-base: 1ms;
    --duration-slow: 1ms;
  }
}

/* ===== css/base/global.css ===== */
/* ============================================================================
   PEPNATIONRX — GLOBAL BASE  v4  (Mobile-first, Facebook-style shrink)
   ============================================================================ */

/* Prevent ALL horizontal overflow — kills scroll on every page */
html {
  font-size: 100%; /* prevents iOS text-size-adjust issues */
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  /* Smooth anchor scrolling across the whole app */
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
  /* Prevent accidental pull-to-refresh while still allowing normal vertical scroll */
  overscroll-behavior-y: contain;
}

/* Remove grey tap-flash on every tappable element (Android Chrome) */
a, button, [role="button"], label, input, select, textarea {
  -webkit-tap-highlight-color: transparent;
}

/* Eliminate 300ms tap delay on all interactive elements */
a, button, [role="button"], [tabindex], label {
  touch-action: manipulation;
}

/* Page canvas — full-bleed route outlet wrapper */
.pnrx-page {
  min-height: calc(100vh - var(--nav-height));
  background: var(--color-bg);
  padding: var(--space-7) var(--layout-gutter) var(--space-8);
}

/* Centered content column */
.pnrx-container {
  width: 100%;
  max-width: var(--layout-max-width);
  margin-inline: auto;
}

/* Section block (for alternating rhythm) */
.pnrx-section {
  padding: var(--space-8) var(--layout-gutter);
}

.pnrx-section--white {
  background: var(--white);
}

.pnrx-section--canvas {
  background: var(--color-bg);
}

/* Section heading block */
.pnrx-section__head {
  text-align: center;
  margin-bottom: var(--space-7);
}

.pnrx-section__eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--teal-500);
  margin-bottom: var(--space-3);
}

.pnrx-section__title {
  font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
  font-weight: var(--weight-bold);
  color: var(--canvas-700);
  letter-spacing: -0.025em;
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-3);
}

.pnrx-section__sub {
  font-size: var(--text-lg);
  color: var(--canvas-400);
  max-width: 54ch;
  margin-inline: auto;
  line-height: var(--leading-base);
}

/* ── Shared card styles ──────────────────────────────────────────────────── */
.pnrx-card {
  background: var(--white);
  border: 1px solid var(--canvas-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-2);
  padding: var(--space-5);
  transition:
    box-shadow  var(--duration-base) var(--ease-standard),
    transform   var(--duration-base) var(--ease-standard);
}

.pnrx-card--hoverable:hover {
  box-shadow: var(--elev-3);
  transform: translateY(-2px);
}

/* ── Shared button styles ────────────────────────────────────────────────── */
.pnrx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 12px var(--space-6);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  /* Minimum touch target (WCAG 2.5.5) */
  min-height: 44px;
  transition:
    background  var(--duration-fast) var(--ease-standard),
    box-shadow  var(--duration-fast) var(--ease-standard),
    transform   var(--duration-fast) var(--ease-standard),
    color       var(--duration-fast) var(--ease-standard);
}

.pnrx-btn--primary {
  background: var(--teal-500);
  color: var(--white) !important;
}

.pnrx-btn--primary:hover {
  background: var(--teal-400);
  box-shadow: 0 4px 14px rgba(22, 160, 140, 0.32);
  transform: translateY(-1px);
  text-decoration: none;
  color: var(--white) !important;
}

.pnrx-btn--primary:active {
  background: var(--teal-600);
  box-shadow: none;
  transform: translateY(0);
}

.pnrx-btn--ghost {
  background: transparent;
  color: var(--canvas-600);
  border: 1.5px solid var(--canvas-200);
}

.pnrx-btn--ghost:hover {
  background: var(--canvas-100);
  border-color: var(--canvas-300);
  color: var(--canvas-700);
  text-decoration: none;
}

/* ── Trust bar ───────────────────────────────────────────────────────────── */
.pnrx-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-6);
  padding: var(--space-5) var(--layout-gutter);
  background: var(--white);
  border-top: 1px solid var(--canvas-200);
  border-bottom: 1px solid var(--canvas-200);
}

.pnrx-trust__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.pnrx-trust__number {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--canvas-700);
  line-height: 1;
}

.pnrx-trust__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--canvas-400);
  text-align: center;
  white-space: nowrap;
}

.pnrx-trust__divider {
  width: 1px;
  height: 40px;
  background: var(--canvas-200);
  flex-shrink: 0;
}

/* ── Status badge ─────────────────────────────────────────────────────────── */
.pnrx-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-pill);
}

.pnrx-badge--success { background: var(--green-100); color: var(--green-600); }
.pnrx-badge--warning { background: var(--amber-100); color: var(--amber-600); }
.pnrx-badge--danger  { background: var(--red-100);   color: var(--red-600);   }
.pnrx-badge--info    { background: var(--blue-100);  color: var(--blue-600);  }
.pnrx-badge--neutral { background: var(--canvas-100);color: var(--canvas-500);}

/* ── Pricing block ───────────────────────────────────────────────────────── */
.pnrx-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.pnrx-price__amount {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--teal-500);
  line-height: 1;
}

.pnrx-price__period {
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  color: var(--canvas-400);
}

.pnrx-price__note {
  display: block;
  font-size: var(--text-xs);
  color: var(--canvas-400);
  margin-top: var(--space-1);
  line-height: var(--leading-base);
}

/* ── Form skeleton (shared across auth, checkout, triage) ────────────────── */
.pnrx-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--space-4);
}

.pnrx-field__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--canvas-600);
}

.pnrx-field__input,
.pnrx-field__select,
.pnrx-field__textarea {
  width: 100%;
  padding: 12px var(--space-4);
  font-family: var(--font-sans);
  /* 16px minimum to prevent iOS auto-zoom on focus */
  font-size: max(var(--text-md), 16px);
  color: var(--canvas-700);
  background: var(--white);
  border: 1.5px solid var(--canvas-200);
  border-radius: var(--radius-md);
  outline: none;
  transition:
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow   var(--duration-fast) var(--ease-standard);
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}

.pnrx-field__input::placeholder,
.pnrx-field__textarea::placeholder {
  color: var(--canvas-300);
}

.pnrx-field__input:focus,
.pnrx-field__select:focus,
.pnrx-field__textarea:focus {
  border-color: var(--teal-500);
  box-shadow: 0 0 0 3px rgba(22, 160, 140, 0.14);
}

.pnrx-field__hint {
  font-size: var(--text-xs);
  color: var(--canvas-400);
  line-height: var(--leading-base);
}

/* ── Loading spinner ─────────────────────────────────────────────────────── */
@keyframes pnrx-spin {
  to { transform: rotate(360deg); }
}

.pnrx-spinner {
  display: inline-block;
  width: 28px;
  height: 28px;
  border: 3px solid var(--canvas-200);
  border-top-color: var(--teal-500);
  border-radius: 50%;
  animation: pnrx-spin 0.7s linear infinite;
}

.pnrx-spinner--sm {
  width: 16px;
  height: 16px;
  border-width: 2px;
}

/* ── Divider ─────────────────────────────────────────────────────────────── */
.pnrx-divider {
  height: 1px;
  background: var(--canvas-200);
  border: none;
  margin: var(--space-5) 0;
}

/* ==========================================================================
   MOBILE OVERRIDES — Facebook-style fluid shrink
   All breakpoints use max-width (desktop-first component base).
   ========================================================================== */

@media (max-width: 640px) {
  .pnrx-page {
    padding: var(--space-5) var(--space-4) var(--space-7);
  }

  .pnrx-section {
    padding: var(--space-6) var(--space-4);
  }

  .pnrx-section__head {
    margin-bottom: var(--space-5);
  }

  .pnrx-section__sub {
    font-size: var(--text-md);
  }

  .pnrx-trust__divider { display: none; }
  .pnrx-trust { gap: var(--space-4); }
  .pnrx-trust__number { font-size: var(--text-xl); }
}

@media (max-width: 480px) {
  /* Full-width CTAs on small phones — Facebook's core mobile pattern */
  .pnrx-btn {
    width: 100%;
    justify-content: center;
  }

  /* Hero CTA uses its own class — also goes full-width on phones */
  .pnrx-hero__cta {
    display: block;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }

  /* Catalog plan CTA */
  .pnrx-catalog__cta {
    width: 100%;
    box-sizing: border-box;
  }

  /* Trust bar: 2×2 grid on phones */
  .pnrx-trust {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    padding: var(--space-4);
  }

  .pnrx-section__title {
    font-size: clamp(var(--text-xl), 6vw, var(--text-3xl));
  }

  /* Clear space for the fixed install-prompt banner at bottom */
  /* Only when the banner is actually present in the DOM */
  pnrx-install-prompt:not([hidden]) ~ * .pnrx-page,
  pnrx-install-prompt:not([hidden]) ~ * .pnrx-auth,
  pnrx-install-prompt:not([hidden]) ~ * .pnrx-hero {
    padding-bottom: calc(var(--space-8) + 80px);
  }
}

/* ============================================================================
   Phase 31K — keyboard accessibility baseline.
   --------------------------------------------------------------------------
   A visible focus ring on every interactive element when the user is
   navigating by keyboard. We use :focus-visible so the ring does not appear
   on mouse clicks (which historically generated negative UX feedback). The
   component stylesheets that already declare their own :focus-visible win
   via the cascade — this is a baseline that catches everything else
   (buttons, links, summary, [tabindex], inputs).
   ========================================================================== */
:focus-visible {
  outline: 2px solid var(--pnrx-color-accent, #16a08c);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Don't double-ring on inputs that already have a custom focus treatment;
   they declare their own :focus-visible. */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline-offset: 2px;
}

/* ===== css/components/app-shell.css ===== */
/* ============================================================================
   PEPNATIONRX -- APP SHELL  v3  (Premium)
   Header: white, 68px tall, strong shadow -- like Ro / Hims.
   Footer: minimal, muted. Outlet: proper canvas background.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

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

pnrx-app-shell {
  display: block;
  min-height: 100vh;
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.pnrx-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* Phase 14: respect iOS notch / Android display cutouts when the app
     is installed as a PWA. The viewport meta uses viewport-fit=cover
     so env(safe-area-inset-*) resolves to non-zero values on notched
     devices. */
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

/* -- Header --------------------------------------------------------------- */
.pnrx-shell__header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: 0 var(--layout-gutter);
  /* Phase 14: extend the header into the status-bar area on iOS PWA. */
  padding-top: env(safe-area-inset-top, 0px);
  height: calc(var(--nav-height) + env(safe-area-inset-top, 0px));
  background: var(--white);
  border-bottom: 1px solid var(--canvas-200);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.05),
    0 4px 12px rgba(0, 0, 0, 0.06);
}

.pnrx-shell__brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
  gap: var(--space-2);
}

.pnrx-shell__logo {
  display: block;
  height: 42px;
  width: auto;
  object-fit: contain;
}

.pnrx-shell__nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: 1;
  justify-content: flex-end;
}

.pnrx-shell__link {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--canvas-500);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition:
    color var(--duration-fast) var(--ease-standard),
    background var(--duration-fast) var(--ease-standard);
  white-space: nowrap;
}

.pnrx-shell__link:hover {
  color: var(--canvas-700);
  background: var(--canvas-100);
}

.pnrx-shell__signout {
  display: inline-flex;
  align-items: center;
  padding: 9px var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--teal-500);
  background: transparent;
  border: 1.5px solid var(--teal-500);
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}

.pnrx-shell__signout:hover {
  background: var(--teal-50);
}

/* -- Route outlet --------------------------------------------------------- */
.pnrx-shell__outlet {
  flex: 1 1 auto;
  width: 100%;
}

.pnrx-shell__notice {
  padding: var(--space-9) var(--space-5);
  text-align: center;
  color: var(--color-text-secondary);
  font-size: var(--text-lg);
}

/* -- Footer --------------------------------------------------------------- */
.pnrx-shell__footer {
  padding: var(--space-5) var(--layout-gutter);
  /* Phase 14: avoid colliding with the iOS home indicator when installed. */
  padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
  background: var(--white);
  border-top: 1px solid var(--canvas-200);
  margin-top: auto;
}

.pnrx-shell__legal {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--canvas-400);
  text-align: center;
  line-height: 1.65;
}

.pnrx-shell__legal--links {
  margin-top: var(--space-2);
}

.pnrx-shell__legal-link {
  color: var(--canvas-400);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--duration-fast), border-color var(--duration-fast);
}

.pnrx-shell__legal-link:hover {
  color: var(--teal-500);
  border-bottom-color: var(--teal-100);
}

/* -- Legal page ----------------------------------------------------------- */
.pnrx-shell__legal-page {
  max-width: 720px;
  margin: var(--space-7) auto;
  padding: 0 var(--layout-gutter) var(--space-7);
}

.pnrx-shell__legal-page-title {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--canvas-700);
  margin: 0 0 var(--space-5);
  line-height: var(--leading-tight);
}

.pnrx-shell__legal-page-body {
  font-size: var(--text-md);
  line-height: var(--leading-base);
  color: var(--canvas-500);
}

/* -- Hamburger ------------------------------------------------------------ */
.pnrx-shell__hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: var(--canvas-600);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard);
}

.pnrx-shell__hamburger:hover {
  background: var(--canvas-100);
}

@media (max-width: 768px) {
  .pnrx-shell__hamburger {
    display: flex;
  }

  .pnrx-shell__nav {
    display: none;
    position: absolute;
    top: calc(var(--nav-height) + env(safe-area-inset-top, 0px));
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--white);
    border-bottom: 1px solid var(--canvas-200);
    box-shadow: var(--elev-3);
    padding: var(--space-3) var(--space-4);
    gap: var(--space-1);
    z-index: var(--z-overlay);
  }

  .pnrx-shell__nav.is-open {
    display: flex;
  }

  .pnrx-shell__link {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
  }

  .pnrx-shell__signout {
    margin-top: var(--space-2);
    text-align: center;
    justify-content: center;
  }

  .pnrx-shell__header {
    position: relative;
  }
}

/* -- PWA standalone-mode tweaks ------------------------------------------- */
@media (display-mode: standalone) {
  /* Disable text selection on the brand element so it feels native. */
  .pnrx-shell__brand {
    -webkit-user-select: none;
    user-select: none;
  }
  /* Slightly stronger header shadow to imply a top app bar. */
  .pnrx-shell__header {
    box-shadow:
      0 1px 3px rgba(0, 0, 0, 0.08),
      0 6px 16px rgba(0, 0, 0, 0.08);
  }
}

/* ==========================================================================
   APP SHELL — Mobile extended (Facebook-style shrink)
   ========================================================================== */

@media (max-width: 640px) {
  /* Keep header sticky at top on mobile (override the 768px relative rule) */
  .pnrx-shell__header {
    position: sticky !important;
    top: 0;
    padding: 0 var(--space-4);
    padding-top: env(safe-area-inset-top, 0px);
  }

  /* Logo: slightly smaller on mobile */
  .pnrx-shell__logo {
    height: 34px;
  }

  /* Footer: tighter on mobile */
  .pnrx-shell__footer {
    padding: var(--space-4) var(--space-4);
    padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  }

  /* Legal links: stack on mobile */
  .pnrx-shell__legal--links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2) var(--space-4);
  }

  /* Legal page: full-bleed on mobile */
  .pnrx-shell__legal-page {
    margin: var(--space-5) 0;
    padding: 0 var(--space-4) var(--space-6);
  }

  .pnrx-shell__legal-page-title {
    font-size: var(--text-2xl);
  }
}

/* Hamburger threshold: lower to 640px to match other mobile breakpoints */
@media (max-width: 640px) {
  .pnrx-shell__hamburger {
    display: flex;
  }

  .pnrx-shell__nav {
    display: none;
    position: fixed;
    top: calc(60px + env(safe-area-inset-top, 0px));
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--white);
    border-bottom: 1px solid var(--canvas-200);
    box-shadow: var(--elev-4);
    padding: var(--space-3) var(--space-4);
    gap: var(--space-1);
    z-index: var(--z-overlay);
  }

  .pnrx-shell__nav.is-open {
    display: flex;
  }

  .pnrx-shell__link {
    padding: var(--space-3) var(--space-4);
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .pnrx-shell__signout {
    margin-top: var(--space-2);
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }
}

/* ============================================================================
   Phase 22D.2 (restored 2026-05-30) — Messages nav unread badge.
   --------------------------------------------------------------------------
   The badge is appended inside the Messages anchor with the attribute
   data-messages-badge. It is hidden by default via the `hidden` attribute
   (a built-in HTML4 standard); _refreshUnreadBadge flips it on when the
   patient has unread clinician messages.
   ========================================================================== */
.pnrx-shell__badge[data-messages-badge] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5em;
  height: 1.5em;
  padding: 0 0.4em;
  margin-left: 0.5em;
  font-size: 0.75em;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
  background: #e53935;
  border-radius: 999px;
  vertical-align: middle;
  letter-spacing: 0;
  text-transform: none;
}

.pnrx-shell__badge[hidden] {
  display: none;
}

/* ===== css/components/auth.css ===== */
/* ============================================================================
   PEPNATIONRX — AUTH COMPONENT  v3  (Premium)
   ─────────────────────────────────────────────
   Facebook-style login card: centered on canvas, white card with strong
   shadow, teal primary CTA. Matches Ro, Sesame, PlushCare login flows.
   ============================================================================ */

pnrx-auth {
  display: block;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

.pnrx-auth {
  min-height: calc(100vh - var(--nav-height));
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-7) var(--layout-gutter) var(--space-8);
  background: var(--color-bg);
}

/* The card */
.pnrx-auth__card {
  width: 100%;
  max-width: 460px;
  background: var(--white);
  border: 1px solid var(--canvas-200);
  border-radius: var(--radius-xl);
  box-shadow: var(--elev-3);
  padding: var(--space-7) var(--space-6);
}

/* Heading */
.pnrx-auth__title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--canvas-700);
  margin: 0 0 var(--space-2);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}

.pnrx-auth__sub {
  font-size: var(--text-sm);
  color: var(--canvas-400);
  margin: 0 0 var(--space-6);
  line-height: var(--leading-base);
}

/* Two-column grid for name fields */
.pnrx-auth__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

@media (min-width: 480px) {
  .pnrx-auth__row {
    grid-template-columns: 1fr 1fr;
  }
}

/* Field */
.pnrx-auth__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--space-4);
}

.pnrx-auth__field label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--canvas-600);
}

.pnrx-auth__field input {
  width: 100%;
  padding: 12px var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  color: var(--canvas-700);
  background: var(--white);
  border: 1.5px solid var(--canvas-200);
  border-radius: var(--radius-md);
  outline: none;
  transition:
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow   var(--duration-fast) var(--ease-standard);
  box-sizing: border-box;
}

.pnrx-auth__field input::placeholder {
  color: var(--canvas-300);
}

.pnrx-auth__field input:focus {
  border-color: var(--teal-500);
  box-shadow: 0 0 0 3px rgba(22, 160, 140, 0.14);
}

.pnrx-auth__hint {
  font-size: var(--text-xs);
  color: var(--canvas-400);
  margin: calc(var(--space-2) * -1) 0 var(--space-3);
  line-height: var(--leading-base);
}

/* Acknowledgements block */
.pnrx-auth__acks {
  margin: var(--space-4) 0;
  padding: var(--space-4);
  background: var(--canvas-100);
  border: 1px solid var(--canvas-200);
  border-radius: var(--radius-md);
}

.pnrx-auth__acks-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--canvas-600);
  margin: 0 0 var(--space-3);
}

.pnrx-auth__ack {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  line-height: var(--leading-base);
  color: var(--canvas-500);
  cursor: pointer;
}

.pnrx-auth__ack:last-child { margin-bottom: 0; }

.pnrx-auth__ack input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--teal-500);
  cursor: pointer;
}

/* Error message */
.pnrx-auth__error {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--red-600);
  background: var(--red-100);
  border: 1px solid hsl(0, 50%, 85%);
  border-radius: var(--radius-md);
  line-height: var(--leading-base);
}

/* Primary CTA */
.pnrx-auth__cta {
  width: 100%;
  margin-top: var(--space-3);
  padding: 14px var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--white);
  background: var(--teal-500);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    background  var(--duration-fast) var(--ease-standard),
    box-shadow  var(--duration-fast) var(--ease-standard),
    transform   var(--duration-fast) var(--ease-standard);
}

.pnrx-auth__cta:hover:not(:disabled) {
  background: var(--teal-400);
  box-shadow: 0 4px 14px rgba(22, 160, 140, 0.32);
  transform: translateY(-1px);
}

.pnrx-auth__cta:active:not(:disabled) {
  background: var(--teal-600);
  box-shadow: none;
  transform: translateY(0);
}

.pnrx-auth__cta:disabled {
  background: var(--canvas-200);
  color: var(--canvas-400);
  cursor: not-allowed;
}

/* Mode switch */
.pnrx-auth__switch {
  margin: var(--space-5) 0 0;
  font-size: var(--text-sm);
  color: var(--canvas-400);
  text-align: center;
}

.pnrx-auth__link {
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--teal-500);
  background: transparent;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pnrx-auth__link:hover { color: var(--teal-400); }

/* ── Trust signals ───────────────────────────────────────────────────────── */
.pnrx-auth__trust {
  display: flex;
  justify-content: center;
  gap: var(--space-6);
  margin-top: var(--space-5);
  flex-wrap: wrap;
}

.pnrx-auth__trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--canvas-400);
  white-space: nowrap;
}

.pnrx-auth__trust-item svg {
  color: var(--teal-500);
  flex-shrink: 0;
}

/* ── State select dropdown ───────────────────────────────────────────────── */
.pnrx-auth__select {
  width: 100%;
  padding: 12px var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  color: var(--canvas-700);
  background: var(--white);
  border: 1.5px solid var(--canvas-200);
  border-radius: var(--radius-md);
  outline: none;
  cursor: pointer;
  transition:
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow   var(--duration-fast) var(--ease-standard);
  box-sizing: border-box;
}

.pnrx-auth__select:focus {
  border-color: var(--teal-500);
  box-shadow: 0 0 0 3px rgba(22, 160, 140, 0.14);
}

/* ── Inline spinner (small, for buttons) ─────────────────────────────────── */
.pnrx-spinner--sm {
  width: 16px;
  height: 16px;
  border-width: 2px;
  vertical-align: middle;
  margin-right: var(--space-2);
}


/* ==========================================================================
   AUTH — Mobile (Facebook-style shrink)
   ========================================================================== */

/* ── Core layout fix: stack card + trust vertically on ALL mobile ───────── */
/* The .pnrx-auth flex container has card + trust as SIBLINGS.               */
/* Without flex-direction:column they render side by side and overflow.      */
@media (max-width: 860px) {
  .pnrx-auth {
    flex-direction: column;
    align-items: center;
    padding: var(--space-5) var(--space-4) var(--space-7);
    gap: var(--space-5);
  }

  .pnrx-auth__card {
    width: 100%;
    max-width: 480px;
  }

  /* Trust badges: row of 3 items, centered, with wrapping */
  .pnrx-auth__trust {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
    max-width: 480px;
  }
}

@media (max-width: 640px) {
  .pnrx-auth {
    padding: var(--space-4) var(--space-4) var(--space-6);
    gap: var(--space-4);
  }

  .pnrx-auth__card {
    padding: var(--space-5) var(--space-4);
    border-radius: var(--radius-lg);
  }
}

@media (max-width: 480px) {
  .pnrx-auth {
    padding: var(--space-3) 0 var(--space-6);
  }

  .pnrx-auth__card {
    border-radius: 0;
    border-left: none;
    border-right: none;
    box-shadow: none;
    max-width: 100%;
  }

  /* Stack name row to single column */
  .pnrx-auth__row {
    grid-template-columns: 1fr !important;
  }

  .pnrx-auth__cta {
    min-height: 48px;
  }

  /* Trust: 2-column grid, full-bleed */
  .pnrx-auth__trust {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    padding: 0 var(--space-4);
    justify-items: center;
    max-width: 100%;
  }
}

/* ===== css/components/catalog.css ===== */
/* ============================================================================
   PEPNATIONRX — CATALOG COMPONENT  v3  (Premium)
   ────────────────────────────────────
   Treatment / protocol storefront. Full styling for ALL three screens:
   Hub (hero + trust + category grid), Category (treatment cards), Treatment
   (detail page with plan selector, tags, CTA).
   ============================================================================ */

/* ── Outer page wrapper ─────────────────────────────────────────── */
.pnrx-catalog {
  background: var(--color-bg);
  min-height: calc(100vh - var(--nav-height));
  font-family: var(--font-sans);
}

/* ── Page header ──────────────────────────────────────────────────── */
.pnrx-catalog__head {
  text-align: center;
  margin-bottom: var(--space-6);
  max-width: var(--layout-max-width);
  margin-inline: auto;
  padding: 0 var(--layout-gutter);
}

.pnrx-catalog__title {
  font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
  font-weight: var(--weight-bold);
  color: var(--canvas-700);
  margin: 0 0 var(--space-2);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}

.pnrx-catalog__sub {
  font-size: var(--text-md);
  color: var(--canvas-400);
  margin: 0 auto;
  max-width: 54ch;
  line-height: var(--leading-base);
}

/* ── Sub-section heading ────────────────────────────────────────────── */
.pnrx-catalog__subhead {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--canvas-700);
  margin: 0 0 var(--space-4);
  max-width: var(--layout-max-width);
  margin-inline: auto;
  padding: 0 var(--layout-gutter);
}

/* ── Hero section ───────────────────────────────────────────────────── */
.pnrx-hero {
  background: linear-gradient(135deg, hsl(174, 55%, 97%) 0%, var(--white) 60%);
  padding: clamp(48px, 8vw, 96px) var(--layout-gutter);
  margin-bottom: 0;
  border-bottom: 1px solid var(--canvas-200);
}

.pnrx-hero__content {
  max-width: var(--layout-max-width);
  margin-inline: auto;
}

.pnrx-hero__eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-500);
  margin-bottom: var(--space-4);
}

.pnrx-hero__h1 {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.08;
  color: var(--canvas-700);
  margin: 0 0 var(--space-5);
  letter-spacing: -0.03em;
}

.pnrx-hero__sub {
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--canvas-400);
  margin: 0 0 var(--space-6);
  max-width: 480px;
}

.pnrx-hero__cta {
  display: inline-flex;
  align-items: center;
  padding: 14px 32px;
  background: var(--teal-500);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  transition:
    background var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    transform  var(--duration-fast) var(--ease-standard);
}

.pnrx-hero__cta:hover {
  background: var(--teal-400);
  box-shadow: 0 4px 14px rgba(22, 160, 140, 0.32);
  transform: translateY(-1px);
  text-decoration: none;
  color: var(--white);
}

/* ── Audience toggle bar (All / Men / Women) ───────────────────────────── */
.pnrx-catalog__toggles {
  display: flex;
  justify-content: center;
  gap: var(--space-1);
  background: var(--canvas-100);
  border: 1px solid var(--canvas-200);
  border-radius: var(--radius-pill);
  padding: var(--space-1);
  width: fit-content;
  margin: 0 auto var(--space-6);
}

/* Toggle button — JS outputs class "pnrx-catalog__toggle" with ".is-active" */
.pnrx-catalog__toggle,
.pnrx-catalog__toggle-btn {
  padding: var(--space-2) var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--canvas-400);
  background: transparent;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition:
    background  var(--duration-fast) var(--ease-standard),
    color       var(--duration-fast) var(--ease-standard),
    box-shadow  var(--duration-fast) var(--ease-standard);
}

.pnrx-catalog__toggle:hover,
.pnrx-catalog__toggle-btn:hover {
  color: var(--canvas-700);
}

/* Active state */
.pnrx-catalog__toggle.is-active,
.pnrx-catalog__toggle-btn[aria-selected="true"],
.pnrx-catalog__toggle-btn.active {
  background: var(--white);
  color: var(--teal-500);
  font-weight: var(--weight-semibold);
  box-shadow: var(--elev-1);
}

/* ── Category grid section wrapper ────────────────────────────────────── */
.pnrx-catalog__section {
  padding: var(--space-7) var(--layout-gutter);
}

/* ── Auto-fit grid of cards ───────────────────────────────────────────── */
.pnrx-catalog__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-4);
  max-width: var(--layout-max-width);
  margin-inline: auto;
  padding: 0 var(--layout-gutter);
}

/* ── Card (used for both categories and treatments) ──────────────────────── */
.pnrx-catalog__card {
  background: var(--white);
  border: 1.5px solid var(--canvas-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-2);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
  transition:
    box-shadow    var(--duration-base) var(--ease-standard),
    transform     var(--duration-base) var(--ease-standard),
    border-color  var(--duration-base) var(--ease-standard);
}

.pnrx-catalog__card:hover {
  box-shadow: var(--elev-3);
  transform: translateY(-3px);
  border-color: var(--teal-400);
}

.pnrx-catalog__card:focus-visible {
  outline: 3px solid var(--teal-500);
  outline-offset: 2px;
}

/* Selected state */
.pnrx-catalog__card--selected {
  border-color: var(--teal-500);
  box-shadow:
    var(--elev-2),
    0 0 0 3px rgba(22, 160, 140, 0.14);
}

/* ---- Card icon ---- */
.pnrx-catalog__card-icon {
  width: 48px;
  height: 48px;
  background: var(--teal-50);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: var(--space-2);
  border: 1px solid var(--teal-100);
  color: var(--teal-500);
}

/* ---- Card name ---- */
.pnrx-catalog__card-title,
.pnrx-catalog__card-name {
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  margin: 0;
  line-height: var(--leading-snug);
}

/* ---- Card tagline ---- */
.pnrx-catalog__card-text,
.pnrx-catalog__card-tagline {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
  flex: 1;
  line-height: var(--leading-base);
}

/* ---- Card price ---- */
.pnrx-catalog__card-price {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--teal-500);
  margin: 0;
}

/* ---- Card CTA button ---- */
.pnrx-catalog__card-cta {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--white);
  background: var(--teal-500);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  margin-top: auto;
  transition:
    background  var(--duration-fast) var(--ease-standard),
    box-shadow  var(--duration-fast) var(--ease-standard);
}

.pnrx-catalog__card-cta:hover {
  background: var(--teal-400);
  box-shadow: var(--elev-2);
}

.pnrx-catalog__card-cta:active {
  background: var(--teal-600);
  box-shadow: none;
}

/* ── Back button ───────────────────────────────────────────────────── */
.pnrx-catalog__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--canvas-500);
  background: transparent;
  border: 1.5px solid var(--canvas-200);
  border-radius: var(--radius-md);
  cursor: pointer;
  margin-bottom: var(--space-4);
  transition:
    background    var(--duration-fast) var(--ease-standard),
    border-color  var(--duration-fast) var(--ease-standard),
    color         var(--duration-fast) var(--ease-standard);
}

.pnrx-catalog__back::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-right: 2px;
}

.pnrx-catalog__back:hover {
  background: var(--canvas-100);
  border-color: var(--canvas-300);
  color: var(--canvas-700);
}

/* ── Tag / badge pills ───────────────────────────────────────────────── */
.pnrx-catalog__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  justify-content: center;
}

.pnrx-catalog__tag {
  display: inline-flex;
  align-items: center;
  padding: 4px var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-pill);
  background: var(--canvas-100);
  color: var(--canvas-500);
  white-space: nowrap;
}

.pnrx-catalog__tag--soon {
  background: var(--amber-100);
  color: var(--amber-600);
}

.pnrx-catalog__badge {
  display: inline-flex;
  align-items: center;
  padding: 3px var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.pnrx-catalog__badge--soon {
  background: var(--amber-100);
  color: var(--amber-600);
}

/* HSA / FSA Eligible. Uses the brand teal so it reads as a positive cue
   (reimbursable) rather than a warning. Same shape and size as other
   badges so the row layout does not shift. */
.pnrx-catalog__badge--hsa,
.pnrx-catalog__tag--hsa {
  background: var(--teal-50);
  color: var(--teal-700);
  border: 1px solid var(--teal-100);
}

/* Legacy pill (from v1) */
.pnrx-catalog__pill {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-pill);
  background: var(--canvas-100);
  color: var(--canvas-500);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* ── Plan selector cards ────────────────────────────────────────────── */
.pnrx-catalog__plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  max-width: var(--layout-max-width);
  margin-inline: auto;
  padding: 0 var(--layout-gutter);
}

.pnrx-catalog__plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  background: var(--white);
  border: 1.5px solid var(--canvas-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-1);
  cursor: pointer;
  font-family: var(--font-sans);
  text-align: left;
  transition:
    border-color  var(--duration-fast) var(--ease-standard),
    box-shadow    var(--duration-fast) var(--ease-standard),
    background    var(--duration-fast) var(--ease-standard);
}

.pnrx-catalog__plan:hover {
  border-color: var(--teal-400);
  box-shadow: var(--elev-2);
}

/* Selected plan */
.pnrx-catalog__plan.is-selected {
  border-color: var(--teal-500);
  background: var(--teal-50);
  box-shadow:
    var(--elev-2),
    0 0 0 3px rgba(22, 160, 140, 0.12);
}

.pnrx-catalog__plan.is-selected::after {
  content: '';
  position: absolute;
  top: 12px;
  right: 14px;
  width: 20px;
  height: 20px;
  background: var(--teal-500);
  border-radius: var(--radius-pill);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px;
}

.pnrx-catalog__plan-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--canvas-700);
}

.pnrx-catalog__plan-price {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--teal-500);
}

.pnrx-catalog__plan-total {
  font-size: var(--text-xs);
  color: var(--canvas-400);
}

/* ── Treatment detail footer (CTA area) ─────────────────────────────────── */
.pnrx-catalog__foot {
  max-width: var(--layout-max-width);
  margin-inline: auto;
  padding: var(--space-5) var(--layout-gutter) 0;
}

/* Primary CTA ("Start Online Consultation" / "Coming Soon") */
.pnrx-catalog__cta {
  display: block;
  width: 100%;
  max-width: 400px;
  padding: 14px var(--space-6);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--white);
  background: var(--teal-500);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: center;
  letter-spacing: 0.01em;
  transition:
    background  var(--duration-fast) var(--ease-standard),
    box-shadow  var(--duration-fast) var(--ease-standard),
    transform   var(--duration-fast) var(--ease-standard);
}

.pnrx-catalog__cta:hover:not(:disabled) {
  background: var(--teal-400);
  box-shadow: 0 4px 14px rgba(22, 160, 140, 0.32);
  transform: translateY(-1px);
}

.pnrx-catalog__cta:active:not(:disabled) {
  background: var(--teal-600);
  box-shadow: none;
  transform: translateY(0);
}

.pnrx-catalog__cta:disabled {
  background: var(--canvas-200);
  color: var(--canvas-400);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ── Legal disclaimer text ──────────────────────────────────────────────── */
.pnrx-catalog__legal {
  max-width: var(--layout-max-width);
  margin-inline: auto;
  padding: var(--space-5) var(--layout-gutter) 0;
  font-size: 0.8125rem;
  color: var(--canvas-400);
  line-height: var(--leading-base);
}

.pnrx-catalog__legal--compound {
  font-style: italic;
  margin-bottom: var(--space-3);
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .pnrx-catalog__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
  }

  .pnrx-catalog__plans {
    grid-template-columns: 1fr;
  }

  .pnrx-hero__h1 {
    font-size: 2rem;
  }
}

@media (max-width: 400px) {
  .pnrx-catalog__grid {
    grid-template-columns: 1fr;
  }
}

.pnrx-catalog__card-row { display: flex; align-items: center; gap: var(--space-2); }

/* Phase 21A.1 outcome-guarantee badge on storefront cards. */
.pnrx-catalog__badge--guarantee {
  background: rgba(0, 196, 188, 0.18);
  color: var(--color-primary, #00c4bc);
  border: 1px solid var(--color-primary-muted, #1a8580);
  text-decoration: none;
}
.pnrx-catalog__badge--guarantee:hover {
  background: rgba(0, 196, 188, 0.28);
}

/* ==========================================================================
   CATALOG — Mobile extended (Facebook-style shrink)
   ========================================================================== */

@media (max-width: 640px) {
  /* Hero section */
  .pnrx-hero {
    padding: var(--space-7) var(--space-4) var(--space-8);
    text-align: center;
  }

  .pnrx-hero__h1 {
    font-size: clamp(1.75rem, 7vw, 2.25rem);
  }

  .pnrx-hero__sub {
    font-size: var(--text-md);
  }

  /* Hero CTA: center and stretch on mobile */
  .pnrx-hero__cta {
    display: block;
    width: 100%;
    max-width: 100%;
    text-align: center;
    box-sizing: border-box;
  }

  /* Treatment detail head: tighten padding */
  .pnrx-catalog__head {
    padding: 0 var(--space-4);
    margin-bottom: var(--space-4);
  }

  .pnrx-catalog__title {
    font-size: var(--text-2xl);
  }
}

@media (max-width: 480px) {
  /* Category grid: 1 column on very small phones */
  .pnrx-catalog__grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-3);
  }

  /* Plan cards: single column */
  .pnrx-catalog__plans {
    grid-template-columns: 1fr !important;
  }

  /* CTA button: full-width */
  .pnrx-catalog__cta {
    max-width: 100%;
    min-height: 48px;
  }

  /* Back button: full-width */
  .pnrx-catalog__back {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }

  /* Card row badges: wrap */
  .pnrx-catalog__card-row {
    flex-wrap: wrap;
  }
}

/* ===== css/components/triage-form.css ===== */
/* ============================================================================
   PEPNATIONRX — TRIAGE FORM  v3  (Premium)
   ─────────────────────────────────────────
   The clinical intake form. Inspired by Ro's intake flow:
   — White centered card, clear progress indicator
   — Protocol selection: icon bubbles + bold names + blurb + arrow
   — Question options: full-width pill rows, teal on selected
   — Navigation: ghost back, solid teal next
   ============================================================================ */

/* ── Custom element host ─────────────────────────────────────────────────── */
pnrx-triage-form {
  display: block;
  width: 100%;
  font-family: var(--font-sans);
}

/* ── Page wrapper — fills full viewport ─────────────────────────────────── */
.pnrx-triage-page {
  min-height: calc(100vh - var(--nav-height));
  width: 100%;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-6) var(--layout-gutter) var(--space-8);
}

/* ── Outer panel — full width, fills viewport ─────────────────────────────── */
.pnrx-triage {
  width: 100%;
  max-width: 960px;
  background: var(--white);
  border: 1px solid var(--canvas-200);
  border-radius: var(--radius-xl);
  box-shadow: var(--elev-3);
  padding: var(--space-7) clamp(var(--space-5), 5vw, var(--space-8));
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.pnrx-triage__head {
  margin-bottom: var(--space-6);
  text-align: center;
}

.pnrx-triage__title {
  font-size: clamp(var(--text-2xl), 4vw, var(--text-3xl));
  font-weight: var(--weight-bold);
  color: var(--canvas-700);
  margin: 0 0 var(--space-2);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}

.pnrx-triage__subhead {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--canvas-600);
  margin: 0 0 var(--space-1);
}

.pnrx-triage__sub {
  font-size: var(--text-sm);
  color: var(--canvas-400);
  margin: var(--space-2) auto 0;
  max-width: 46ch;
  line-height: var(--leading-base);
}

/* ── Progress bar ─────────────────────────────────────────────────────────── */
.pnrx-triage__progress {
  width: 100%;
  height: 5px;
  background: var(--canvas-100);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-bottom: var(--space-3);
}

.pnrx-triage__progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--teal-400), var(--teal-500));
  border-radius: var(--radius-pill);
  transition: width var(--duration-base) var(--ease-out);
}

/* Step counter text */
.pnrx-triage__step {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--canvas-400);
  text-align: right;
  margin-bottom: var(--space-6);
}

/* ── Protocol selection grid — 3 columns on desktop ─────────────────────── */
.pnrx-triage__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

/* ---- Individual protocol card ---- */
.pnrx-triage__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-4) var(--space-5);
  background: var(--white);
  border: 1.5px solid var(--canvas-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-1);
  cursor: pointer;
  text-align: left;
  transition:
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow   var(--duration-fast) var(--ease-standard),
    transform    var(--duration-fast) var(--ease-standard),
    background   var(--duration-fast) var(--ease-standard);
}

.pnrx-triage__card:hover {
  border-color: var(--teal-400);
  box-shadow: var(--elev-3);
  transform: translateY(-2px);
}

.pnrx-triage__card:focus-visible {
  outline: 3px solid var(--teal-500);
  outline-offset: 2px;
}

/* Selected state */
.pnrx-triage__card.is-selected,
.pnrx-triage__card--selected {
  border-color: var(--teal-500);
  background: var(--teal-50);
  box-shadow:
    var(--elev-2),
    0 0 0 3px rgba(22, 160, 140, 0.12);
  transform: translateY(-2px);
}

/* Check indicator — appears top-right when selected */
.pnrx-triage__card.is-selected::after,
.pnrx-triage__card--selected::after {
  content: '✓';
  position: absolute;
  top: 12px;
  right: 14px;
  width: 22px;
  height: 22px;
  background: var(--teal-500);
  color: var(--white);
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: var(--weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Protocol icon — SVG in a teal bubble */
.pnrx-triage__card-icon {
  width: 48px;
  height: 48px;
  background: var(--teal-50);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: var(--space-2);
  border: 1px solid var(--teal-100);
  color: var(--teal-500);
}

/* Protocol name */
.pnrx-triage__card-title,
.pnrx-triage__card-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--canvas-700);
  margin: 0;
  line-height: var(--leading-snug);
}

/* Protocol blurb */
.pnrx-triage__card-blurb,
.pnrx-triage__card-desc {
  font-size: var(--text-xs);
  color: var(--canvas-400);
  margin: 0;
  line-height: var(--leading-base);
}

/* ── Question block ──────────────────────────────────────────────────────── */
.pnrx-triage__question {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

/* Question prompt */
.pnrx-triage__prompt,
.pnrx-triage__question-text {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--canvas-700);
  margin: 0;
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
}

/* Help / guidance text */
.pnrx-triage__help {
  font-size: var(--text-sm);
  color: var(--canvas-400);
  margin: calc(var(--space-2) * -1) 0 0;
  line-height: var(--leading-base);
}

.pnrx-triage__optional {
  display: inline-block;
  padding: 2px 8px;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--canvas-400);
  background: var(--canvas-100);
  border-radius: var(--radius-pill);
  margin-left: var(--space-2);
  vertical-align: middle;
}

/* ── Answer options ──────────────────────────────────────────────────────── */
/*
   Full-width pill rows — same pattern as Ro's intake.
   Default: white bg, grey border. Hover: grey-100 bg.
   Selected: teal-50 bg, teal border, teal label weight.
*/
.pnrx-triage__options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.pnrx-triage__option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--white);
  border: 1.5px solid var(--canvas-200);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    border-color var(--duration-fast) var(--ease-standard),
    background   var(--duration-fast) var(--ease-standard),
    box-shadow   var(--duration-fast) var(--ease-standard);
}

.pnrx-triage__option:hover {
  border-color: var(--canvas-300);
  background: var(--canvas-100);
}

.pnrx-triage__option input[type="radio"],
.pnrx-triage__option input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--teal-500);
  cursor: pointer;
}

.pnrx-triage__option-text {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--canvas-600);
  line-height: var(--leading-snug);
}

/* Selected option */
.pnrx-triage__option--selected,
.pnrx-triage__option.is-selected {
  border-color: var(--teal-500);
  background: var(--teal-50);
  box-shadow: 0 0 0 3px rgba(22, 160, 140, 0.10);
}

.pnrx-triage__option--selected .pnrx-triage__option-text,
.pnrx-triage__option.is-selected .pnrx-triage__option-text {
  color: var(--teal-600);
  font-weight: var(--weight-semibold);
}

/* ── Text / number inputs ─────────────────────────────────────────────────── */
.pnrx-triage__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.pnrx-triage__field label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--canvas-500);
}

.pnrx-triage__field input,
.pnrx-triage__field textarea {
  width: 100%;
  padding: 12px var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  color: var(--canvas-700);
  background: var(--white);
  border: 1.5px solid var(--canvas-200);
  border-radius: var(--radius-md);
  outline: none;
  resize: vertical;
  transition:
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow   var(--duration-fast) var(--ease-standard);
  box-sizing: border-box;
}

.pnrx-triage__field input::placeholder,
.pnrx-triage__field textarea::placeholder {
  color: var(--canvas-300);
}

.pnrx-triage__field input:focus,
.pnrx-triage__field textarea:focus {
  border-color: var(--teal-500);
  box-shadow: 0 0 0 3px rgba(22, 160, 140, 0.14);
}

/* ── Navigation row ──────────────────────────────────────────────────────── */
.pnrx-triage__foot,
.pnrx-triage__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--canvas-200);
}

/* Ghost "Back" button */
.pnrx-triage__back,
.pnrx-triage__btn--ghost {
  padding: 11px var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--canvas-500);
  background: transparent;
  border: 1.5px solid var(--canvas-200);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    background      var(--duration-fast) var(--ease-standard),
    border-color    var(--duration-fast) var(--ease-standard),
    color           var(--duration-fast) var(--ease-standard);
}

.pnrx-triage__back:hover,
.pnrx-triage__btn--ghost:hover {
  background: var(--canvas-100);
  border-color: var(--canvas-300);
  color: var(--canvas-700);
}

/* Primary "Continue" button — matches competitor CTAs exactly */
.pnrx-triage__next,
.pnrx-triage__btn--primary {
  padding: 12px var(--space-7);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--white);
  background: var(--teal-500);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  letter-spacing: 0.01em;
  transition:
    background   var(--duration-fast) var(--ease-standard),
    box-shadow   var(--duration-fast) var(--ease-standard),
    transform    var(--duration-fast) var(--ease-standard);
}

.pnrx-triage__next:hover:not(:disabled),
.pnrx-triage__btn--primary:hover:not(:disabled) {
  background: var(--teal-400);
  box-shadow: 0 4px 14px rgba(22, 160, 140, 0.32);
  transform: translateY(-1px);
}

.pnrx-triage__next:active:not(:disabled),
.pnrx-triage__btn--primary:active:not(:disabled) {
  background: var(--teal-600);
  box-shadow: none;
  transform: translateY(0);
}

.pnrx-triage__next:disabled,
.pnrx-triage__btn--primary:disabled {
  background: var(--canvas-200);
  color: var(--canvas-400);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ── Legal notice inside form ─────────────────────────────────────────────── */
.pnrx-triage__legal {
  margin: var(--space-5) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--canvas-200);
  font-size: 0.8125rem;
  color: var(--canvas-400);
  line-height: var(--leading-base);
  text-align: center;
}

/* ── Disqualified state ───────────────────────────────────────────────────── */
.pnrx-triage__disqualified {
  background: var(--red-100);
  border: 1.5px solid hsl(0, 50%, 85%);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: center;
  color: var(--red-600);
  font-size: var(--text-md);
  line-height: var(--leading-base);
}

/* ── Submitted state ──────────────────────────────────────────────────────── */
.pnrx-triage__success {
  background: var(--teal-50);
  border: 1.5px solid var(--teal-100);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: center;
  color: var(--teal-600);
  font-size: var(--text-md);
  line-height: var(--leading-base);
}

/* ── End-screen shared ────────────────────────────────────────────────────── */
.pnrx-triage__end {
  text-align: center;
  padding: var(--space-6) 0 var(--space-3);
}

.pnrx-triage__end .pnrx-triage__title {
  margin-top: var(--space-3);
}

/* Icon bubble on end screens */
.pnrx-triage__end-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-2);
}

.pnrx-triage__end-icon--done {
  background: var(--teal-50);
  color: var(--teal-500);
  border: 1.5px solid var(--teal-100);
}

.pnrx-triage__end-icon--stop {
  background: var(--red-100);
  color: var(--red-600);
  border: 1.5px solid hsl(0, 50%, 85%);
}

/* Action buttons row on end screens */
.pnrx-triage__end-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
  flex-wrap: wrap;
}

.pnrx-triage__end-actions .pnrx-triage__btn--primary {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

/* ── End-screen variants ─────────────────────────────────────────────────── */
.pnrx-triage__end--done {
  border-top: 3px solid var(--teal-100);
}

.pnrx-triage__end--stop {
  border-top: 3px solid var(--red-600);
}

/* ── Inline validation error ─────────────────────────────────────────────── */
.pnrx-triage__error {
  font-size: var(--text-xs);
  color: var(--red-600);
  margin: var(--space-1) 0 0;
  min-height: 1.2em;
  line-height: var(--leading-snug);
}

/* ── Triage flags list (review screen) ───────────────────────────────────── */
.pnrx-triage__flags {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: disc inside;
  margin: var(--space-3) 0 var(--space-4);
  padding: 0;
  font-size: var(--text-sm);
  color: var(--canvas-600);
}

/* ── Number input ─────────────────────────────────────────────────────────── */
.pnrx-triage__number {
  width: 100%;
  max-width: 200px;
  padding: 12px var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  color: var(--canvas-700);
  background: var(--white);
  border: 1.5px solid var(--canvas-200);
  border-radius: var(--radius-md);
  outline: none;
  text-align: right;
  transition:
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow   var(--duration-fast) var(--ease-standard);
  box-sizing: border-box;
  -moz-appearance: textfield;
}

.pnrx-triage__number::-webkit-inner-spin-button,
.pnrx-triage__number::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.pnrx-triage__number:focus {
  border-color: var(--teal-500);
  box-shadow: 0 0 0 3px rgba(22, 160, 140, 0.14);
}

/* ── Multi-select option variant ─────────────────────────────────────────── */
.pnrx-triage__option--multi {
  /* Inherits base .pnrx-triage__option styling; declared for selector parity */
}

/* ── Boolean row layout (yes / no side-by-side) ──────────────────────────── */
.pnrx-triage__options--row {
  flex-direction: row;
}

.pnrx-triage__end--done { border-top: 4px solid var(--teal-100); }
.pnrx-triage__end--stop { border-top: 4px solid var(--red-500); }
.pnrx-triage__error { display: block; font-size: var(--text-xs); color: var(--red-600); margin-top: var(--space-1); }
.pnrx-triage__flags { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); }
.pnrx-triage__number {
  max-width: 200px; text-align: right; width: 100%; padding: 12px 16px;
  background: var(--white); border: 1px solid var(--canvas-300); border-radius: var(--radius-md);
  font-family: var(--font-sans); font-size: var(--text-md); color: var(--canvas-700);
  transition: border var(--duration-fast) var(--ease-standard);
}
.pnrx-triage__number:focus { outline: none; border-color: var(--teal-500); }
.pnrx-triage__review { padding: var(--space-4) 0; }
.pnrx-triage__review-row { display: flex; flex-direction: column; padding: var(--space-3) 0; border-bottom: 1px solid var(--canvas-200); }
.pnrx-triage__review-row:last-child { border-bottom: none; }
.pnrx-triage__review-q { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--canvas-700); margin-bottom: var(--space-1); }
.pnrx-triage__review-a { font-size: var(--text-sm); font-weight: var(--weight-regular); color: var(--canvas-600); }
.pnrx-triage__riskcard { background: var(--white); border: 1px solid var(--canvas-200); border-radius: var(--radius-lg); padding: var(--space-4); margin-bottom: var(--space-5); box-shadow: var(--elev-1); }
.pnrx-triage__risk-label { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--canvas-400); text-transform: uppercase; letter-spacing: var(--tracking-wide); margin-bottom: var(--space-1); display: block; }
.pnrx-triage__risk-value { font-size: var(--text-lg); font-weight: var(--weight-bold); }
.pnrx-triage__riskcard--low .pnrx-triage__risk-value { color: var(--green-600); }
.pnrx-triage__riskcard--moderate .pnrx-triage__risk-value { color: var(--amber-600); }
.pnrx-triage__riskcard--high .pnrx-triage__risk-value { color: var(--red-600); }
.pnrx-triage__text { width: 100%; padding: 12px 16px; background: var(--white); border: 1px solid var(--canvas-300); border-radius: var(--radius-md); font-family: var(--font-sans); font-size: var(--text-md); color: var(--canvas-700); resize: vertical; min-height: 100px; }
.pnrx-triage__text:focus { outline: none; border-color: var(--teal-500); }
.pnrx-triage__unit { font-size: var(--text-sm); color: var(--canvas-400); margin-left: var(--space-2); }

/* ── Review screen ───────────────────────────────────────────────────────── */
.pnrx-triage__review {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: var(--space-5);
}

.pnrx-triage__review-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--canvas-200);
}

.pnrx-triage__review-row:last-child {
  border-bottom: none;
}

.pnrx-triage__review-q {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--canvas-700);
  line-height: var(--leading-snug);
}

.pnrx-triage__review-a {
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  color: var(--canvas-600);
  line-height: var(--leading-base);
}

/* ── Risk card (review screen) ───────────────────────────────────────────── */
.pnrx-triage__riskcard {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--canvas-200);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-5);
}

.pnrx-triage__riskcard--low {
  border-color: var(--green-600);
  background: var(--green-100);
}

.pnrx-triage__riskcard--moderate {
  border-color: var(--amber-600);
  background: var(--amber-100);
}

.pnrx-triage__riskcard--high {
  border-color: var(--red-600);
  background: var(--red-100);
}

.pnrx-triage__risk-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--canvas-400);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.pnrx-triage__risk-value {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
}

.pnrx-triage__riskcard--low .pnrx-triage__risk-value {
  color: var(--green-600);
}

.pnrx-triage__riskcard--moderate .pnrx-triage__risk-value {
  color: var(--amber-600);
}

.pnrx-triage__riskcard--high .pnrx-triage__risk-value {
  color: var(--red-600);
}

/* ── Textarea input ──────────────────────────────────────────────────────── */
.pnrx-triage__text {
  width: 100%;
  padding: 12px var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  color: var(--canvas-700);
  background: var(--white);
  border: 1.5px solid var(--canvas-200);
  border-radius: var(--radius-md);
  outline: none;
  resize: vertical;
  transition:
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow   var(--duration-fast) var(--ease-standard);
  box-sizing: border-box;
}

.pnrx-triage__text:focus {
  border-color: var(--teal-500);
  box-shadow: 0 0 0 3px rgba(22, 160, 140, 0.14);
}

/* ── Unit label beside number inputs ─────────────────────────────────────── */
.pnrx-triage__unit {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--canvas-400);
  margin-left: var(--space-2);
  white-space: nowrap;
  align-self: center;
}

/* ── Step transition animation ────────────────────────────────────────────── */
@keyframes triage-slide-in {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.pnrx-triage__question,
.pnrx-triage__grid,
.pnrx-triage__end {
  animation: triage-slide-in var(--duration-base) var(--ease-out) both;
}

@media (prefers-reduced-motion: reduce) {
  .pnrx-triage__question,
  .pnrx-triage__grid,
  .pnrx-triage__end {
    animation: none;
  }
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .pnrx-triage {
    padding: var(--space-5) var(--space-4) var(--space-6);
    border-radius: var(--radius-lg);
    border-left: none;
    border-right: none;
    border-radius: 0;
    box-shadow: none;
  }

  .pnrx-triage-page {
    padding: 0 0 var(--space-8);
  }

  .pnrx-triage__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
  }

  .pnrx-triage__foot,
  .pnrx-triage__nav {
    flex-direction: column-reverse;
  }

  .pnrx-triage__next,
  .pnrx-triage__btn--primary,
  .pnrx-triage__back,
  .pnrx-triage__btn--ghost {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

@media (max-width: 400px) {
  .pnrx-triage__grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   TRIAGE FORM — Mobile extended (Facebook-style shrink)
   ========================================================================== */

@media (max-width: 480px) {
  /* Protocol grid: 1 card per row on very small phones */
  .pnrx-triage__grid {
    grid-template-columns: 1fr !important;
  }

  /* Number input: full-width (no 200px cap) */
  .pnrx-triage__number {
    max-width: 100% !important;
    width: 100% !important;
    text-align: left;
  }

  /* Boolean row: stack yes/no on small screens */
  .pnrx-triage__options--row {
    flex-direction: column;
  }

  /* Options: ensure 44px min touch target */
  .pnrx-triage__option {
    min-height: 48px;
  }

  /* Triage title: slightly smaller */
  .pnrx-triage__title {
    font-size: clamp(var(--text-xl), 6vw, var(--text-2xl));
  }
  
  /* Prompt text: fluid */
  .pnrx-triage__prompt,
  .pnrx-triage__question-text {
    font-size: var(--text-lg);
  }
}

/* ============================================================================
   Phase 33F — visible inline error banner when the intake save fails.
   --------------------------------------------------------------------------
   Distinct from the generic toast: this stays on the review screen so the
   user can see what went wrong + retry without re-answering questions.
   ========================================================================== */
.pnrx-triage__error-banner {
  margin: var(--pnrx-space-md, 16px) 0;
  padding: var(--pnrx-space-md, 16px);
  border-radius: var(--pnrx-radius-md, 8px);
  background: #fef2f2;
  color: #7f1d1d;
  border: 1px solid #fecaca;
}

.pnrx-triage__error-banner strong {
  display: block;
  margin-bottom: 6px;
  font-size: 15px;
}

.pnrx-triage__error-banner p {
  margin: 0 0 12px 0;
  font-size: 14px;
  line-height: 1.45;
}

/* ===== css/components/checkout.css ===== */
/* ============================================================================
   PEPNATIONRX — CHECKOUT  v3  (Premium)
   Two-column layout: form left, order summary sidebar right.
   White sections on canvas bg — Ro / PlushCare checkout style.
   ============================================================================ */

pnrx-checkout {
  display: block;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

.pnrx-checkout {
  min-height: calc(100vh - var(--nav-height));
  background: var(--color-bg);
  padding: var(--space-7) var(--layout-gutter) var(--space-8);
}

.pnrx-checkout__title {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--canvas-700);
  margin: 0 0 var(--space-6);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  max-width: var(--layout-max-width);
  margin-inline: auto;
  padding-bottom: var(--space-6);
}

.pnrx-checkout__empty {
  padding: var(--space-9) var(--space-5);
  text-align: center;
  color: var(--canvas-400);
  font-size: var(--text-lg);
}

/* ── Two-column layout ───────────────────────────────────────────────────── */
.pnrx-checkout__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  max-width: var(--layout-max-width);
  margin-inline: auto;
}

@media (min-width: 860px) {
  .pnrx-checkout__layout {
    grid-template-columns: 1.65fr 1fr;
    align-items: start;
  }
}

.pnrx-checkout__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* ── Section card ─────────────────────────────────────────────────────────── */
.pnrx-checkout__section {
  background: var(--white);
  border: 1px solid var(--canvas-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-2);
  padding: var(--space-6);
}

.pnrx-checkout__subhead {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--canvas-700);
  margin: 0 0 var(--space-4);
  line-height: var(--leading-tight);
}

.pnrx-checkout__hint {
  font-size: var(--text-sm);
  color: var(--canvas-400);
  margin: calc(var(--space-2) * -1) 0 var(--space-4);
  line-height: var(--leading-base);
}

/* ── Form fields ─────────────────────────────────────────────────────────── */
.pnrx-checkout__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--space-4);
}

.pnrx-checkout__field label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--canvas-600);
}

.pnrx-checkout__field input,
.pnrx-checkout__field select {
  width: 100%;
  padding: 12px var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  color: var(--canvas-700);
  background: var(--white);
  border: 1.5px solid var(--canvas-200);
  border-radius: var(--radius-md);
  outline: none;
  transition:
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow   var(--duration-fast) var(--ease-standard);
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}

.pnrx-checkout__field input::placeholder { color: var(--canvas-300); }

.pnrx-checkout__field input:focus,
.pnrx-checkout__field select:focus {
  border-color: var(--teal-500);
  box-shadow: 0 0 0 3px rgba(22, 160, 140, 0.14);
}

/* Two-column field grid */
.pnrx-checkout__field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

/* ── Order summary sidebar ───────────────────────────────────────────────── */
.pnrx-checkout__summary {
  background: var(--white);
  border: 1px solid var(--canvas-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-2);
  padding: var(--space-6);
  position: sticky;
  top: calc(var(--nav-height) + var(--space-4));
}

.pnrx-checkout__summary-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--canvas-700);
  margin: 0 0 var(--space-5);
}

.pnrx-checkout__summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
  color: var(--canvas-500);
  border-bottom: 1px solid var(--canvas-200);
}

.pnrx-checkout__summary-row:last-of-type {
  border-bottom: none;
}

.pnrx-checkout__summary-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-4) 0 0;
  margin-top: var(--space-2);
  border-top: 2px solid var(--canvas-200);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--canvas-700);
}

/* ── Primary CTA ─────────────────────────────────────────────────────────── */
.pnrx-checkout__cta {
  width: 100%;
  margin-top: var(--space-4);
  padding: 14px var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--white);
  background: var(--teal-500);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  letter-spacing: 0.01em;
  transition:
    background  var(--duration-fast) var(--ease-standard),
    box-shadow  var(--duration-fast) var(--ease-standard),
    transform   var(--duration-fast) var(--ease-standard);
}

.pnrx-checkout__cta:hover:not(:disabled) {
  background: var(--teal-400);
  box-shadow: 0 4px 14px rgba(22, 160, 140, 0.32);
  transform: translateY(-1px);
}

.pnrx-checkout__cta:active:not(:disabled) {
  background: var(--teal-600);
  box-shadow: none;
  transform: translateY(0);
}

.pnrx-checkout__cta:disabled {
  background: var(--canvas-200);
  color: var(--canvas-400);
  cursor: not-allowed;
}

.pnrx-checkout__legal {
  margin-top: var(--space-3);
  font-size: 0.8125rem;
  color: var(--canvas-400);
  line-height: var(--leading-base);
  text-align: center;
}

/* ── Note (billing cadence info) ─────────────────────────────────────────── */
.pnrx-checkout__note {
  font-size: var(--text-xs);
  color: var(--canvas-400);
  margin: 0 0 var(--space-3);
  line-height: var(--leading-base);
}

/* ── Trust badges ─────────────────────────────────────────────────────────── */
.pnrx-checkout__trust {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  margin: var(--space-3) 0;
  flex-wrap: wrap;
}

.pnrx-checkout__trust-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--canvas-400);
  white-space: nowrap;
}

.pnrx-checkout__trust-item svg {
  color: var(--teal-500);
  flex-shrink: 0;
}

/* ── Success state ─────────────────────────────────────────────────────────── */
.pnrx-checkout__success {
  background: var(--white);
  border: 1.5px solid var(--teal-100);
  border-radius: var(--radius-xl);
  box-shadow: var(--elev-3);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
}

.pnrx-checkout__success h2 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--teal-600);
  margin: 0 0 var(--space-4);
  letter-spacing: -0.02em;
}

.pnrx-checkout__success p {
  max-width: 44ch;
  margin: 0 auto var(--space-3);
  color: var(--canvas-500);
  font-size: var(--text-md);
  line-height: var(--leading-base);
}

.pnrx-checkout__ref {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--canvas-400);
  margin-top: var(--space-4);
  padding: var(--space-2) var(--space-4);
  background: var(--canvas-100);
  border-radius: var(--radius-md);
  display: inline-block;
}

.pnrx-checkout__consent { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); background: var(--canvas-50); border: 1px solid var(--canvas-200); border-radius: var(--radius-md); margin-bottom: var(--space-4); }
.pnrx-checkout__error { background: var(--red-100); color: var(--red-600); padding: var(--space-3); border-radius: var(--radius-md); font-size: var(--text-sm); margin-bottom: var(--space-4); }
.pnrx-checkout__field-error { margin: 2px 0 0; font-size: var(--text-xs); color: var(--red-600); }
.pnrx-checkout__field--state { min-width: 120px; }
.pnrx-checkout__field--zip { max-width: 160px; }
.pnrx-checkout__select {
  width: 100%;
  padding: 12px var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  color: var(--canvas-700);
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2393959A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center;
  border: 1.5px solid var(--canvas-200);
  border-radius: var(--radius-md);
  outline: none;
  cursor: pointer;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  transition:
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow   var(--duration-fast) var(--ease-standard);
}
.pnrx-checkout__select:focus {
  border-color: var(--teal-500);
  box-shadow: 0 0 0 3px rgba(22, 160, 140, 0.14);
}
.pnrx-checkout__line { display: flex; justify-content: space-between; padding: var(--space-2) 0; font-size: var(--text-sm); color: var(--canvas-600); }
.pnrx-checkout__line--total { border-top: 1px solid var(--canvas-200); margin-top: var(--space-3); padding-top: var(--space-3); font-weight: var(--weight-bold); font-size: var(--text-md); color: var(--canvas-700); }
.pnrx-checkout__row { display: flex; gap: var(--space-3); margin-bottom: var(--space-4); }

/* ── Coupon code ──────────────────────────────────────────────────────────── */
.pnrx-checkout__coupon {
  padding: var(--space-3) 0;
}

.pnrx-checkout__coupon-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--canvas-600);
  margin-bottom: var(--space-2);
}

.pnrx-checkout__coupon-row {
  display: flex;
  gap: var(--space-2);
}

.pnrx-checkout__coupon-row input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--canvas-700);
  background: var(--white);
  border: 1.5px solid var(--canvas-200);
  border-radius: var(--radius-md);
  text-transform: uppercase;
}

.pnrx-checkout__coupon-row input::placeholder {
  color: var(--canvas-300);
  text-transform: none;
}

.pnrx-checkout__coupon-row input:focus {
  outline: none;
  border-color: var(--teal-500);
}

.pnrx-checkout__coupon-apply {
  flex: 0 0 auto;
  padding: 10px var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--teal-600);
  background: var(--teal-100);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard);
}

.pnrx-checkout__coupon-apply:hover:not(:disabled) {
  background: var(--teal-200);
}

.pnrx-checkout__coupon-apply:disabled {
  color: var(--canvas-400);
  background: var(--canvas-200);
  cursor: not-allowed;
}

.pnrx-checkout__coupon-msg {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  color: var(--red-600);
  line-height: var(--leading-base);
}

.pnrx-checkout__coupon-remove {
  margin: var(--space-1) 0 var(--space-2);
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--canvas-400);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
}

.pnrx-checkout__coupon-remove:hover {
  color: var(--canvas-600);
}

.pnrx-checkout__line--discount {
  color: var(--teal-600);
  font-weight: var(--weight-semibold);
}

/* ==========================================================================
   CHECKOUT — Mobile (Facebook-style shrink)
   ========================================================================== */

@media (max-width: 640px) {
  .pnrx-checkout {
    padding: var(--space-4) var(--space-4) var(--space-7);
  }

  .pnrx-checkout__title {
    font-size: var(--text-2xl);
    padding-bottom: var(--space-4);
  }

  .pnrx-checkout__section {
    padding: var(--space-4);
  }

  /* Summary: no sticky on mobile — flows inline below form */
  .pnrx-checkout__summary {
    position: static;
  }
}

@media (max-width: 480px) {
  /* State + ZIP row: stack to single column on small phones */
  .pnrx-checkout__row {
    flex-direction: column;
  }

  /* Remove fixed min/max widths on state and zip fields */
  .pnrx-checkout__field--state {
    min-width: 0 !important;
    width: 100%;
  }

  .pnrx-checkout__field--zip {
    max-width: 100% !important;
    width: 100%;
  }

  /* Trust items: wrap to 2-column grid */
  .pnrx-checkout__trust {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    justify-items: center;
  }

  .pnrx-checkout__cta {
    min-height: 48px;
    font-size: var(--text-lg);
  }

  /* Success card: remove fixed max-width, let it fill mobile width */
  .pnrx-checkout__success {
    max-width: 100%;
    padding: var(--space-6) var(--space-4);
  }

  /* Prevent field-row (2-col) from overflowing */
  .pnrx-checkout__field-row {
    grid-template-columns: 1fr;
  }
}

/* ===== css/components/dashboard.css ===== */
/* ============================================================================
   PEPNATIONRX — DASHBOARD  v3  (Premium)
   Stat cards, section cards, status pills — GoodRx Care / Sesame style.
   ============================================================================ */

pnrx-patient-dashboard,
pnrx-affiliate-dashboard {
  display: block;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

.pnrx-dash {
  max-width: 860px;
  margin: 0 auto;
  padding: var(--space-7) var(--layout-gutter);
}

/* ── Loading / error ─────────────────────────────────────────────────── */
.pnrx-dash__state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-9) var(--space-5);
  text-align: center;
}

.pnrx-dash__state-text {
  font-size: var(--text-lg);
  color: var(--canvas-500);
  margin: 0;
}

.pnrx-dash__state--error .pnrx-dash__state-text {
  color: var(--red-600);
}

/* Solid teal button */
.pnrx-dash__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 11px var(--space-6);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--white);
  background: var(--teal-500);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    background  var(--duration-fast) var(--ease-standard),
    box-shadow  var(--duration-fast) var(--ease-standard),
    transform   var(--duration-fast) var(--ease-standard);
}

.pnrx-dash__btn:hover {
  background: var(--teal-400);
  box-shadow: 0 4px 14px rgba(22, 160, 140, 0.30);
  transform: translateY(-1px);
}

.pnrx-dash__btn:active {
  background: var(--teal-600);
  box-shadow: none;
  transform: translateY(0);
}

.pnrx-dash__btn:focus-visible {
  outline: 3px solid var(--teal-500);
  outline-offset: 2px;
}

/* ── Page header ──────────────────────────────────────────────────── */
.pnrx-dash__head {
  margin-bottom: var(--space-6);
}

.pnrx-dash__title {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--canvas-700);
  margin: 0 0 var(--space-2);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}

.pnrx-dash__sub {
  font-size: var(--text-md);
  color: var(--canvas-400);
  margin: 0;
  line-height: var(--leading-base);
}

/* ── Stat cards grid ─────────────────────────────────────────────────── */
.pnrx-dash__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.pnrx-dash__stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-5) var(--space-4);
  background: var(--white);
  border: 1px solid var(--canvas-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-2);
}

/* Big teal stat number */
.pnrx-dash__stat-value {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--teal-500);
  line-height: 1;
}

.pnrx-dash__stat-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--canvas-400);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* Stat card icon */
.pnrx-dash__stat-icon {
  color: var(--teal-400);
  margin-bottom: var(--space-2);
  opacity: 0.7;
}

/* ── Quick-action bar ─────────────────────────────────────────────────── */
.pnrx-dash__actions {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.pnrx-dash__action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--teal-500);
  background: var(--white);
  border: 1.5px solid var(--teal-100);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition:
    background   var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow   var(--duration-fast) var(--ease-standard);
}

.pnrx-dash__action:hover {
  background: var(--teal-50);
  border-color: var(--teal-400);
  box-shadow: var(--elev-1);
}

/* ── Skeleton loading animation ─────────────────────────────────────────── */
@keyframes skel-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.pnrx-dash__skeleton {
  padding: var(--space-7) 0;
}

.pnrx-dash__skel {
  background: linear-gradient(
    90deg,
    var(--canvas-100) 25%,
    var(--canvas-200) 50%,
    var(--canvas-100) 75%
  );
  background-size: 200% 100%;
  animation: skel-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
}

.pnrx-dash__skel--heading {
  width: 260px;
  height: 28px;
  margin-bottom: var(--space-3);
}

.pnrx-dash__skel--sub {
  width: 360px;
  height: 16px;
  margin-bottom: var(--space-6);
}

.pnrx-dash__skel--value {
  width: 80px;
  height: 32px;
  margin-bottom: var(--space-2);
}

.pnrx-dash__skel--label {
  width: 100px;
  height: 12px;
}

.pnrx-dash__stat--skel {
  padding: var(--space-5) var(--space-4);
}

.pnrx-dash__skel-card {
  background: var(--white);
  border: 1px solid var(--canvas-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-1);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}

.pnrx-dash__skel--title {
  width: 180px;
  height: 20px;
  margin-bottom: var(--space-4);
}

.pnrx-dash__skel--row {
  width: 100%;
  height: 14px;
  margin-bottom: var(--space-3);
}

/* ── Section card ─────────────────────────────────────────────────────── */
.pnrx-dash__card {
  background: var(--white);
  border: 1px solid var(--canvas-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-2);
  padding: var(--space-5) var(--space-5) var(--space-4);
  margin-bottom: var(--space-5);
}

.pnrx-dash__card-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--canvas-700);
  margin: 0 0 var(--space-5);
  line-height: var(--leading-tight);
}

/* ── Row list inside cards ──────────────────────────────────────────────── */
.pnrx-dash__list {
  display: flex;
  flex-direction: column;
}

.pnrx-dash__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--canvas-200);
}

.pnrx-dash__row:last-child { border-bottom: none; }

.pnrx-dash__row-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.pnrx-dash__row-primary {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--canvas-700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pnrx-dash__row-secondary {
  font-size: var(--text-xs);
  color: var(--canvas-400);
}

/* Subscription rows carry inline self-service controls. The main column grows
   so the status pill and the action buttons cluster together at the right. */
.pnrx-dash__row--sub .pnrx-dash__row-main {
  flex: 1 1 auto;
}

.pnrx-dash__row-actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* Compact button variant for inline row actions. */
.pnrx-dash__btn--sm {
  padding: 6px var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

/* Destructive variant: a bordered ghost button so a cancel never looks like
   the default action. */
.pnrx-dash__btn--danger {
  color: var(--rose-600, #be123c);
  background: transparent;
  border: 1.5px solid var(--rose-300, #fda4af);
}

.pnrx-dash__btn--danger:hover {
  background: var(--rose-50, #fff1f2);
  box-shadow: none;
  transform: translateY(-1px);
}

.pnrx-dash__btn--danger:active {
  background: var(--rose-100, #ffe4e6);
  transform: translateY(0);
}

.pnrx-dash__btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Inline Issue Superbill control. Smaller than the primary action so the
   billing row stays compact, and aligned to the right of the row meta. */
.pnrx-dash__btn--inline {
  padding: 4px var(--space-3);
  font-size: var(--text-xs);
  margin-left: var(--space-3);
}

.pnrx-dash__row-action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.pnrx-dash__row-error {
  font-size: var(--text-xs);
  color: var(--red-600);
}

/* The mounted <pnrx-superbills> card pads itself, but the wrapping section
   should not double the padding on top of the element's own header. */
.pnrx-dash__card--bills {
  padding: 0;
}
.pnrx-dash__card--bills > pnrx-superbills {
  display: block;
}

.pnrx-dash__empty {
  font-size: var(--text-sm);
  color: var(--canvas-400);
  margin: 0;
  padding: var(--space-3) 0;
}

/* ── Status pills ─────────────────────────────────────────────────────── */
.pnrx-dash__pill {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 3px var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.pnrx-dash__pill--good {
  background: var(--green-100);
  color: var(--green-600);
}

.pnrx-dash__pill--warn {
  background: var(--amber-100);
  color: var(--amber-600);
}

.pnrx-dash__pill--neutral {
  background: var(--canvas-100);
  color: var(--canvas-500);
}

/* ── Referral link box ─────────────────────────────────────────────────── */
.pnrx-dash__referral {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  padding: var(--space-5);
  background: var(--teal-50);
  border: 1.5px solid var(--teal-100);
  border-radius: var(--radius-lg);
}

.pnrx-dash__referral-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--teal-500);
}

.pnrx-dash__referral-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.pnrx-dash__referral-code {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--canvas-700);
  white-space: nowrap;
}

.pnrx-dash__copy {
  flex-shrink: 0;
  padding: 8px var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--teal-500);
  background: var(--white);
  border: 1.5px solid var(--teal-200, var(--teal-100));
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    background    var(--duration-fast) var(--ease-standard),
    border-color  var(--duration-fast) var(--ease-standard);
}

.pnrx-dash__copy:hover {
  background: var(--teal-50);
  border-color: var(--teal-400);
}

/* ── Legal footnote ────────────────────────────────────────────────────── */
.pnrx-dash__legal {
  margin: var(--space-5) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--canvas-200);
  font-size: 0.8125rem;
  color: var(--canvas-400);
  line-height: var(--leading-base);
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 540px) {
  .pnrx-dash__row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
}

/* ==========================================================================
   DASHBOARD — Mobile (Facebook-style shrink)
   ========================================================================== */

@media (max-width: 640px) {
  .pnrx-dash {
    padding: var(--space-5) var(--space-4) var(--space-7);
  }

  .pnrx-dash__title {
    font-size: var(--text-2xl);
  }

  .pnrx-dash__actions {
    flex-direction: column;
  }

  .pnrx-dash__action {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }
}

@media (max-width: 480px) {
  /* Skeleton shimmer widths: let them be fluid */
  .pnrx-dash__skel--heading {
    width: 70%;
  }

  .pnrx-dash__skel--sub {
    width: 90%;
  }

  /* Stat cards: 2 per row on small phones */
  .pnrx-dash__stats {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
  }

  .pnrx-dash__stat-value {
    font-size: var(--text-2xl);
  }

  /* Referral row: stack the link and copy button */
  .pnrx-dash__referral-row {
    flex-direction: column;
    align-items: stretch;
  }

  .pnrx-dash__copy {
    min-height: 44px;
    text-align: center;
  }

  /* Row actions: stack vertically */
  .pnrx-dash__row-actions {
    flex-wrap: wrap;
    gap: var(--space-2);
  }
}

@media (max-width: 360px) {
  /* Single column stat grid on very small phones */
  .pnrx-dash__stats {
    grid-template-columns: 1fr;
  }
}

/* ===== css/components/messages.css ===== */
/* ============================================================================
   PEPNATIONRX - SECURE MESSAGING
   The patient care-team conversation: bubbles, composer, states.
   ============================================================================ */

pnrx-message-thread {
  display: block;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

.pnrx-msg {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-7) var(--layout-gutter);
}

/* -- Header ------------------------------------------------------------------ */
.pnrx-msg__head {
  margin-bottom: var(--space-5);
}

.pnrx-msg__title {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--canvas-700);
  margin: 0 0 var(--space-2);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}

.pnrx-msg__sub {
  font-size: var(--text-md);
  color: var(--canvas-400);
  margin: 0;
  line-height: var(--leading-base);
}

/* -- States ------------------------------------------------------------------ */
.pnrx-msg__notice {
  font-size: var(--text-md);
  color: var(--canvas-500);
  text-align: center;
  padding: var(--space-7) var(--space-4);
  margin: 0;
}

.pnrx-msg__state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.pnrx-msg__state--error .pnrx-msg__notice {
  color: var(--red-600);
}

.pnrx-msg__empty {
  font-size: var(--text-sm);
  color: var(--canvas-400);
  text-align: center;
  padding: var(--space-6) var(--space-4);
  margin: 0;
}

/* -- Message list ------------------------------------------------------------ */
.pnrx-msg__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--white);
  border: 1px solid var(--canvas-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-2);
  margin-bottom: var(--space-5);
}

/* -- Bubbles ----------------------------------------------------------------- */
.pnrx-msg__bubble {
  max-width: 80%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
}

/* The patient's own messages: teal, right-aligned. */
.pnrx-msg__bubble--mine {
  align-self: flex-end;
  background: var(--teal-500);
}

.pnrx-msg__bubble--mine .pnrx-msg__sender,
.pnrx-msg__bubble--mine .pnrx-msg__when,
.pnrx-msg__bubble--mine .pnrx-msg__body {
  color: var(--white);
}

/* Care-team messages: light canvas, left-aligned. */
.pnrx-msg__bubble--them {
  align-self: flex-start;
  background: var(--canvas-100);
  border: 1px solid var(--canvas-200);
}

.pnrx-msg__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: 3px;
}

.pnrx-msg__sender {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--canvas-700);
}

.pnrx-msg__when {
  font-size: var(--text-xs);
  color: var(--canvas-400);
}

.pnrx-msg__body {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-base);
  color: var(--canvas-700);
  white-space: pre-wrap;
  word-break: break-word;
}

/* -- Composer ---------------------------------------------------------------- */
.pnrx-msg__composer {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--white);
  border: 1px solid var(--canvas-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-2);
}

.pnrx-msg__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--canvas-500);
}

.pnrx-msg__textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-base);
  color: var(--canvas-700);
  padding: var(--space-3);
  background: var(--canvas-50, var(--white));
  border: 1.5px solid var(--canvas-200);
  border-radius: var(--radius-md);
  resize: vertical;
  min-height: 84px;
}

.pnrx-msg__textarea:focus {
  outline: none;
  border-color: var(--teal-400);
}

.pnrx-msg__textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* -- Button ------------------------------------------------------------------ */
.pnrx-msg__btn {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  padding: 10px var(--space-6);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--white);
  background: var(--teal-500);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

.pnrx-msg__btn:hover {
  background: var(--teal-400);
  box-shadow: 0 4px 14px rgba(22, 160, 140, 0.30);
}

.pnrx-msg__btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

/* -- Responsive -------------------------------------------------------------- */
@media (max-width: 540px) {
  .pnrx-msg__bubble {
    max-width: 92%;
  }
}

/* ==========================================================================
   MESSAGES — Mobile (Facebook-style shrink)
   ========================================================================== */

@media (max-width: 640px) {
  .pnrx-msg {
    padding: var(--space-4) var(--space-3) var(--space-7);
  }
}

@media (max-width: 480px) {
  /* Message bubbles: wider on small screens */
  .pnrx-msg__bubble {
    max-width: 92% !important;
  }

  /* Compose area: tighter gap */
  .pnrx-msg__composer {
    gap: var(--space-2);
  }

  /* Compose textarea: prevent iOS zoom */
  .pnrx-msg__textarea {
    font-size: 16px;
  }

  /* Send button: WCAG 44px tap target */
  .pnrx-msg__btn {
    min-width: 44px;
    min-height: 44px;
    padding: 10px var(--space-4);
  }
}

/* ============================================================================
   Phase 23: Presence badge + Video Call overlay
   ============================================================================ */

/* ── Presence badge ─────────────────────────────────────────────────────────── */
.pnrx-msg__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.pnrx-presence {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-text-muted, #8b9cb0);
  padding: 2px 10px;
  border-radius: 9999px;
  background: var(--color-surface-alt, rgba(255,255,255,0.06));
  transition: color 0.3s, background 0.3s;
}

.pnrx-presence__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-text-muted, #8b9cb0);
  transition: background 0.3s;
  flex-shrink: 0;
}

.pnrx-presence--online .pnrx-presence__dot {
  background: #22c55e;    /* green-500 */
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25);
  animation: pnrx-pulse 2s infinite;
}

.pnrx-presence--online {
  color: #22c55e;
}

@keyframes pnrx-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25); }
  50%       { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.1); }
}

/* ── Video call button (in thread header) ───────────────────────────────────── */
.pnrx-msg__call-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
  min-height: 40px;
}

.pnrx-msg__call-btn:hover  { opacity: 0.9; transform: translateY(-1px); }
.pnrx-msg__call-btn:active { transform: translateY(0); }

/* ── Real-time message append animation ─────────────────────────────────────── */
@keyframes pnrx-msg-slide-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.pnrx-msg__bubble--new {
  animation: pnrx-msg-slide-in 0.25s ease-out forwards;
}

/* ── Incoming call notification ─────────────────────────────────────────────── */
.pnrx-call-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  background: rgba(17, 24, 39, 0.97);
  border: 1px solid rgba(99, 102, 241, 0.4);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  backdrop-filter: blur(12px);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 500;
  animation: pnrx-msg-slide-in 0.3s ease-out;
  max-width: calc(100vw - 48px);
}

.pnrx-call-toast__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  animation: pnrx-pulse 1.5s infinite;
}

.pnrx-call-toast__actions {
  display: flex;
  gap: 10px;
}

.pnrx-call-toast__btn {
  padding: 8px 18px;
  border: none;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
  min-height: 40px;
}

.pnrx-call-toast__btn--accept {
  background: #22c55e;
  color: #fff;
}

.pnrx-call-toast__btn--decline {
  background: rgba(255,255,255,0.1);
  color: #e5e7eb;
}

.pnrx-call-toast__btn:hover { opacity: 0.85; }

/* ── Video call overlay ─────────────────────────────────────────────────────── */
.pnrx-video-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.pnrx-video {
  width: 100%;
  max-width: 960px;
  background: #111827;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(99, 102, 241, 0.2);
  box-shadow: 0 40px 120px rgba(0,0,0,0.6);
}

.pnrx-video__grid {
  position: relative;
  background: #0d1117;
  aspect-ratio: 16/9;
  display: flex;
}

.pnrx-video__pane {
  position: relative;
  overflow: hidden;
}

.pnrx-video__pane--remote {
  flex: 1;
  background: #111827;
}

.pnrx-video__pane--local {
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: 180px;
  aspect-ratio: 4/3;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid rgba(99, 102, 241, 0.5);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  z-index: 10;
}

.pnrx-video__pane video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pnrx-video__label {
  position: absolute;
  bottom: 8px;
  left: 10px;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
  background: rgba(0,0,0,0.5);
  padding: 2px 8px;
  border-radius: 6px;
  backdrop-filter: blur(4px);
  z-index: 5;
}

.pnrx-video__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 20px;
  background: #111827;
}

.pnrx-video__ctrl {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}

.pnrx-video__ctrl:hover  { background: rgba(255,255,255,0.18); transform: scale(1.05); }
.pnrx-video__ctrl:active { transform: scale(0.97); }

.pnrx-video__ctrl--end {
  background: #ef4444;
  width: 60px;
  height: 60px;
}

.pnrx-video__ctrl--end:hover { background: #dc2626; }

.pnrx-video__loading,
.pnrx-video__error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  color: #9ca3af;
  gap: 16px;
  text-align: center;
}

.pnrx-video__spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(99, 102, 241, 0.2);
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: pnrx-spin 0.8s linear infinite;
}

@keyframes pnrx-spin {
  to { transform: rotate(360deg); }
}

/* ── Mobile: full-screen video ──────────────────────────────────────────────── */
@media (max-width: 640px) {
  .pnrx-video-overlay {
    padding: 0;
    align-items: flex-end;
  }

  .pnrx-video {
    border-radius: 20px 20px 0 0;
    max-width: 100%;
    width: 100%;
  }

  .pnrx-video__pane--local {
    width: 100px;
    bottom: 10px;
    right: 10px;
  }

  .pnrx-msg__call-btn {
    padding: 8px 12px;
    font-size: 0.8rem;
  }

  .pnrx-call-toast {
    bottom: 80px;
    flex-wrap: wrap;
    padding: 14px 16px;
    gap: 12px;
  }
}

/* ===== css/components/insurance.css ===== */
/* ============================================================================
   PEPNATIONRX - INSURANCE ELIGIBILITY AND CONCIERGE
   Policy list, add-policy form, coverage check, and eligibility results.
   ============================================================================ */

pnrx-insurance-checker {
  display: block;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

.pnrx-ins {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-7) var(--layout-gutter);
}

/* -- Header ------------------------------------------------------------------ */
.pnrx-ins__head {
  margin-bottom: var(--space-5);
}

.pnrx-ins__title {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--canvas-700);
  margin: 0 0 var(--space-2);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}

.pnrx-ins__sub {
  font-size: var(--text-md);
  color: var(--canvas-400);
  margin: 0;
  line-height: var(--leading-base);
}

/* -- States ------------------------------------------------------------------ */
.pnrx-ins__notice {
  font-size: var(--text-md);
  color: var(--canvas-500);
  text-align: center;
  padding: var(--space-7) var(--space-4);
  margin: 0;
}

.pnrx-ins__state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.pnrx-ins__state--error .pnrx-ins__notice {
  color: var(--red-600);
}

.pnrx-ins__empty {
  font-size: var(--text-sm);
  color: var(--canvas-400);
  padding: var(--space-3) 0;
  margin: 0;
}

/* -- Cards ------------------------------------------------------------------- */
.pnrx-ins__card {
  background: var(--white);
  border: 1px solid var(--canvas-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-2);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}

.pnrx-ins__card-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--canvas-700);
  margin: 0 0 var(--space-4);
  line-height: var(--leading-tight);
}

/* -- Policy rows ------------------------------------------------------------- */
.pnrx-ins__list {
  display: flex;
  flex-direction: column;
}

.pnrx-ins__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--canvas-200);
}

.pnrx-ins__row:last-child { border-bottom: none; }

.pnrx-ins__row-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.pnrx-ins__row-primary {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--canvas-700);
}

.pnrx-ins__row-secondary {
  font-size: var(--text-xs);
  color: var(--canvas-400);
}

/* -- Forms ------------------------------------------------------------------- */
.pnrx-ins__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--canvas-200);
}

.pnrx-ins__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.pnrx-ins__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--canvas-500);
}

.pnrx-ins__input {
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--canvas-700);
  padding: 9px var(--space-3);
  background: var(--white);
  border: 1.5px solid var(--canvas-200);
  border-radius: var(--radius-md);
}

.pnrx-ins__input:focus {
  outline: none;
  border-color: var(--teal-400);
}

/* -- Buttons ----------------------------------------------------------------- */
.pnrx-ins__btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: 10px var(--space-6);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--white);
  background: var(--teal-500);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

.pnrx-ins__btn:hover {
  background: var(--teal-400);
  box-shadow: 0 4px 14px rgba(22, 160, 140, 0.30);
}

.pnrx-ins__btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

/* Ghost variant for the secondary concierge action. */
.pnrx-ins__btn--ghost {
  margin-top: var(--space-3);
  color: var(--teal-500);
  background: transparent;
  border: 1.5px solid var(--teal-100);
}

.pnrx-ins__btn--ghost:hover {
  background: var(--teal-50);
  border-color: var(--teal-400);
  box-shadow: none;
}

/* -- Eligibility result rows ------------------------------------------------- */
.pnrx-ins__check {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--canvas-200);
}

.pnrx-ins__check:last-child { border-bottom: none; }

.pnrx-ins__check-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.pnrx-ins__summary {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-base);
  color: var(--canvas-600);
}

.pnrx-ins__cost {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--canvas-700);
}

.pnrx-ins__concierge-state {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--teal-500);
}

/* -- Status pills ------------------------------------------------------------ */
.pnrx-ins__pill {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 3px var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.pnrx-ins__pill--good {
  background: var(--green-100);
  color: var(--green-600);
}

.pnrx-ins__pill--warn {
  background: var(--amber-100);
  color: var(--amber-600);
}

.pnrx-ins__pill--neutral {
  background: var(--canvas-100);
  color: var(--canvas-500);
}

/* ==========================================================================
   INSURANCE — Mobile (Facebook-style shrink)
   ========================================================================== */

@media (max-width: 640px) {
  .pnrx-ins {
    padding: var(--space-5) var(--space-4) var(--space-7);
  }
}

@media (max-width: 480px) {
  /* Policy rows: wrap label+pill on small screens */
  .pnrx-ins__row {
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  /* Row primary: full-width so pill drops below */
  .pnrx-ins__row-main {
    min-width: 0;
    flex: 1 1 100%;
  }

  /* Pill: stays inline after row-main wraps */
  .pnrx-ins__pill {
    flex-shrink: 0;
  }

  /* Form buttons: full-width */
  .pnrx-ins__btn {
    width: 100%;
    align-self: stretch;
    justify-content: center;
    min-height: 44px;
  }

  /* Insurance input: prevent iOS zoom */
  .pnrx-ins__input {
    font-size: 16px;
  }
}

/* ===== css/components/outcomes.css ===== */
/* ============================================================================
   pnrx-outcomes - Phase 21A outcome dashboard styling.
   Mirrors the labs aesthetic: teal accent on dark surfaces,
   metric chips for status, and a responsive grid for cards.
   ============================================================================ */

.pnrx-outcomes {
  display: flex;
  flex-direction: column;
  gap: var(--space-6, 1.5rem);
  padding: var(--space-4, 1rem);
  color: var(--color-text, #ffffff);
}

.pnrx-outcomes__header h1 {
  font-size: var(--font-size-2xl, 1.75rem);
  margin: 0 0 var(--space-2, 0.5rem) 0;
}

.pnrx-outcomes__header p {
  margin: 0;
  color: var(--color-text-muted, #a8b4c0);
}

.pnrx-outcomes__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 0.75rem);
}

.pnrx-outcomes__section h2 {
  font-size: var(--font-size-lg, 1.25rem);
  margin: 0;
}

.pnrx-outcomes__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4, 1rem);
}

.pnrx-outcomes__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 0.75rem);
  padding: var(--space-4, 1rem);
  background: var(--color-surface-1, #0f1923);
  border: 1px solid var(--color-border, #1d2d3e);
  border-radius: var(--radius-lg, 0.75rem);
}

.pnrx-outcomes__card--offer {
  border-color: var(--color-primary-muted, #1a8580);
}

.pnrx-outcomes__card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-2, 0.5rem);
}

.pnrx-outcomes__card-header h3 {
  margin: 0;
  font-size: var(--font-size-md, 1.05rem);
  line-height: 1.3;
}

.pnrx-outcomes__status {
  font-size: var(--font-size-xs, 0.75rem);
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-surface-2, #162230);
  color: var(--color-text-muted, #a8b4c0);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.pnrx-outcomes__status--measuring,
.pnrx-outcomes__status--pending {
  background: rgba(0, 196, 188, 0.12);
  color: var(--color-primary, #00c4bc);
}
.pnrx-outcomes__status--qualified,
.pnrx-outcomes__status--eligible_redemption {
  background: rgba(0, 196, 188, 0.2);
  color: var(--color-primary, #00c4bc);
}
.pnrx-outcomes__status--redeemed {
  background: rgba(0, 196, 188, 0.08);
  color: var(--color-primary-muted, #1a8580);
}
.pnrx-outcomes__status--expired,
.pnrx-outcomes__status--cancelled {
  background: rgba(229, 62, 62, 0.12);
  color: var(--color-danger, #e53e3e);
}

.pnrx-outcomes__chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-surface-2, #162230);
  color: var(--color-text-muted, #a8b4c0);
  font-size: var(--font-size-xs, 0.75rem);
}
.pnrx-outcomes__chip--reward {
  background: rgba(0, 196, 188, 0.12);
  color: var(--color-primary, #00c4bc);
}

.pnrx-outcomes__description {
  margin: 0;
  color: var(--color-text-muted, #a8b4c0);
  font-size: var(--font-size-sm, 0.875rem);
  line-height: 1.5;
}

.pnrx-outcomes__fine-print {
  margin: 0;
  color: var(--color-text-faint, #808a94);
  font-size: var(--font-size-xs, 0.75rem);
  line-height: 1.4;
}

.pnrx-outcomes__details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2, 0.5rem);
  margin: 0;
}

.pnrx-outcomes__details > div {
  display: flex;
  flex-direction: column;
}

.pnrx-outcomes__details dt {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-muted, #a8b4c0);
}

.pnrx-outcomes__details dd {
  margin: 0;
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text, #ffffff);
}

.pnrx-outcomes__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
}

.pnrx-outcomes__log-form,
.pnrx-outcomes__enroll-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 0.25rem);
}

.pnrx-outcomes__log-form label,
.pnrx-outcomes__enroll-form label {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-muted, #a8b4c0);
}

.pnrx-outcomes__log-row {
  display: flex;
  gap: var(--space-2, 0.5rem);
  align-items: stretch;
}

.pnrx-outcomes__log-row input {
  flex: 1;
  padding: 0.5rem 0.75rem;
  background: var(--color-surface-2, #162230);
  border: 1px solid var(--color-border, #1d2d3e);
  border-radius: var(--radius-md, 0.5rem);
  color: var(--color-text, #ffffff);
  font-size: var(--font-size-sm, 0.875rem);
}

.pnrx-outcomes__button {
  padding: 0.5rem 0.875rem;
  border-radius: var(--radius-md, 0.5rem);
  border: 1px solid var(--color-border, #1d2d3e);
  background: var(--color-surface-2, #162230);
  color: var(--color-text, #ffffff);
  cursor: pointer;
  font-size: var(--font-size-sm, 0.875rem);
}
.pnrx-outcomes__button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
.pnrx-outcomes__button--primary {
  background: var(--color-primary, #00c4bc);
  color: var(--color-surface-0, #050a0f);
  border-color: var(--color-primary, #00c4bc);
}
.pnrx-outcomes__button--ghost {
  background: transparent;
  color: var(--color-text-muted, #a8b4c0);
  border-color: transparent;
}

.pnrx-outcomes__empty {
  margin: 0;
  color: var(--color-text-muted, #a8b4c0);
}

.pnrx-outcomes__loading {
  margin: 0;
  color: var(--color-text-muted, #a8b4c0);
}

.pnrx-outcomes__error {
  margin: 0;
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  background: rgba(229, 62, 62, 0.1);
  border: 1px solid rgba(229, 62, 62, 0.4);
  border-radius: var(--radius-md, 0.5rem);
  color: var(--color-danger, #e53e3e);
  font-size: var(--font-size-sm, 0.875rem);
}

.pnrx-outcomes__closed summary {
  cursor: pointer;
  color: var(--color-text-muted, #a8b4c0);
  font-size: var(--font-size-sm, 0.875rem);
}

.pnrx-outcomes__closed-list {
  margin: var(--space-3, 0.75rem) 0 0 0;
  padding-left: var(--space-5, 1.25rem);
  color: var(--color-text-muted, #a8b4c0);
  font-size: var(--font-size-sm, 0.875rem);
}

.pnrx-outcomes__ledger table {
  width: 100%;
  border-collapse: collapse;
}

.pnrx-outcomes__ledger th,
.pnrx-outcomes__ledger td {
  padding: var(--space-2, 0.5rem);
  text-align: left;
  border-bottom: 1px solid var(--color-border, #1d2d3e);
  font-size: var(--font-size-sm, 0.875rem);
}

.pnrx-outcomes__ledger th {
  color: var(--color-text-muted, #a8b4c0);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--font-size-xs, 0.75rem);
}

/* Phase 21A.1 patient-dashboard tile (rendered by pnrx-patient-dashboard). */
.pnrx-dash__tile--outcome {
  padding: var(--space-4, 1rem);
  background: var(--color-surface-1, #0f1923);
  border: 1px solid var(--color-primary-muted, #1a8580);
  border-radius: var(--radius-lg, 0.75rem);
  margin-bottom: var(--space-4, 1rem);
}
.pnrx-dash__tile--outcome h3 {
  margin: 0 0 var(--space-2, 0.5rem) 0;
  color: var(--color-primary, #00c4bc);
  font-size: var(--font-size-md, 1.05rem);
}
.pnrx-dash__tile-headline {
  margin: 0 0 var(--space-2, 0.5rem) 0;
  color: var(--color-text, #ffffff);
  font-size: var(--font-size-sm, 0.875rem);
}
.pnrx-dash__tile-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: var(--space-2, 0.5rem);
  margin: 0 0 var(--space-3, 0.75rem) 0;
}
.pnrx-dash__tile-meta dt {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-muted, #a8b4c0);
}
.pnrx-dash__tile-meta dd {
  margin: 0;
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text, #ffffff);
}

/* ==========================================================================
   OUTCOMES — Mobile (Facebook-style shrink)
   ========================================================================== */

@media (max-width: 640px) {
  .pnrx-outcomes {
    padding: var(--space-5) var(--space-4) var(--space-7);
  }
}

@media (max-width: 480px) {
  /* Outcome cards: single column */
  .pnrx-outcomes__grid {
    grid-template-columns: 1fr !important;
  }

  /* Card details: stack 2-col grid to 1 column */
  .pnrx-outcomes__details {
    grid-template-columns: 1fr;
  }

  /* Card header: wrap chip below title */
  .pnrx-outcomes__card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  /* Log row: stack input + button vertically */
  .pnrx-outcomes__log-row {
    flex-direction: column;
  }

  /* Buttons: full-width on phones */
  .pnrx-outcomes__button {
    width: 100%;
    min-height: 44px;
    text-align: center;
    justify-content: center;
  }

  /* Log input: prevent iOS zoom */
  .pnrx-outcomes__log-row input {
    font-size: 16px;
  }
}

/* ===== css/components/timeline.css ===== */
.pnrx-tl { display:flex; flex-direction:column; gap:var(--space-4,1rem); padding:var(--space-4,1rem); color:var(--color-text,#fff); }
.pnrx-tl__head h1 { margin:0 0 var(--space-2,0.5rem) 0; }
.pnrx-tl__head p { margin:0; color:var(--color-text-muted,#a8b4c0); }
.pnrx-tl__list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:var(--space-2,0.5rem); }
.pnrx-tl__row { display:grid; grid-template-columns:120px 110px 1fr; align-items:center; gap:var(--space-3,0.75rem); padding:var(--space-3,0.75rem); background:var(--color-surface-1,#0f1923); border:1px solid var(--color-border,#1d2d3e); border-radius:var(--radius-md,0.5rem); }
.pnrx-tl__date { font-size:var(--font-size-sm,0.875rem); color:var(--color-text-muted,#a8b4c0); }
.pnrx-tl__chip { font-size:var(--font-size-xs,0.75rem); text-transform:uppercase; letter-spacing:0.05em; color:var(--color-primary,#00c4bc); }
.pnrx-tl__summary { font-size:var(--font-size-sm,0.875rem); }
.pnrx-tl__btn { padding:0.5rem 0.875rem; border-radius:var(--radius-md,0.5rem); border:1px solid var(--color-border,#1d2d3e); background:var(--color-surface-2,#162230); color:var(--color-text,#fff); cursor:pointer; font-size:var(--font-size-sm,0.875rem); }
.pnrx-tl__error { margin:0; padding:var(--space-3,0.75rem) var(--space-4,1rem); background:rgba(229,62,62,0.1); border:1px solid rgba(229,62,62,0.4); border-radius:var(--radius-md,0.5rem); color:var(--color-danger,#e53e3e); }
.pnrx-tl__empty { margin:0; color:var(--color-text-muted,#a8b4c0); }

/* ===== css/components/admin.css ===== */
/* ============================================================================
   PEPNATIONRX - ADMIN DASHBOARD  v3  (Premium)
   ============================================================================ */

pnrx-admin-dashboard {
  display: block;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

.pnrx-admin {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-7) var(--layout-gutter);
}

/* Page header */
.pnrx-admin__head {
  margin-bottom: var(--space-6);
}

.pnrx-admin__title {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--canvas-700);
  margin: 0 0 var(--space-2);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}

.pnrx-admin__sub {
  font-size: var(--text-sm);
  color: var(--canvas-400);
  margin: 0;
}

/* States */
.pnrx-admin__state {
  padding: var(--space-8) var(--space-5);
  text-align: center;
}

.pnrx-admin__state-text {
  font-size: var(--text-lg);
  color: var(--canvas-500);
  margin: 0 0 var(--space-5);
}

.pnrx-admin__state--error .pnrx-admin__state-text {
  color: var(--red-600);
}

/* Teal button */
.pnrx-admin__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 11px var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--white);
  background: var(--teal-500);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease-standard),
    box-shadow  var(--duration-fast) var(--ease-standard),
    transform   var(--duration-fast) var(--ease-standard);
}

.pnrx-admin__btn:hover {
  background: var(--teal-400);
  box-shadow: 0 4px 14px rgba(22, 160, 140, 0.30);
  transform: translateY(-1px);
}

.pnrx-admin__btn:focus-visible {
  outline: 3px solid var(--teal-500);
  outline-offset: 2px;
}

/* Stats grid */
.pnrx-admin__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.pnrx-admin__stat {
  background: var(--white);
  border: 1px solid var(--canvas-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-2);
  padding: var(--space-5) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.pnrx-admin__stat-value {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--teal-500);
  line-height: 1;
}

.pnrx-admin__stat-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--canvas-400);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* Section card */
.pnrx-admin__card {
  background: var(--white);
  border: 1px solid var(--canvas-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-2);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
  overflow: hidden;
}

.pnrx-admin__card-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--canvas-700);
  margin: 0 0 var(--space-4);
}

/* Data table */
.pnrx-admin__table-wrap {
  overflow-x: auto;
  margin: 0 calc(var(--space-5) * -1);
}

.pnrx-admin__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.pnrx-admin__table thead tr {
  background: var(--canvas-100);
  border-bottom: 2px solid var(--canvas-200);
}

.pnrx-admin__table th {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--canvas-500);
  text-align: left;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
}

.pnrx-admin__table td {
  padding: var(--space-3) var(--space-4);
  color: var(--canvas-600);
  border-bottom: 1px solid var(--canvas-200);
  vertical-align: middle;
}

.pnrx-admin__table tr:last-child td { border-bottom: none; }

.pnrx-admin__table tr:hover td {
  background: var(--canvas-100);
}

/* Row list (non-table) */
.pnrx-admin__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--canvas-200);
}

.pnrx-admin__row:last-child { border-bottom: none; }

.pnrx-admin__row-primary {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--canvas-700);
}

.pnrx-admin__row-secondary {
  font-size: var(--text-xs);
  color: var(--canvas-400);
}

/* Status pills */
.pnrx-admin__pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.pnrx-admin__pill--active {
  background: var(--green-100);
  color: var(--green-600);
}

.pnrx-admin__pill--blocked {
  background: var(--red-100);
  color: var(--red-600);
}

.pnrx-admin__pill--pending {
  background: var(--amber-100);
  color: var(--amber-600);
}

.pnrx-admin__empty { text-align: center; color: var(--canvas-400); padding: var(--space-6) var(--space-4); font-size: var(--text-md); }
.pnrx-admin__num { text-align: right; font-variant-numeric: tabular-nums; }
.pnrx-admin__section { background: var(--white); border: 1px solid var(--canvas-200); border-radius: var(--radius-lg); box-shadow: var(--elev-2); padding: var(--space-5); margin-bottom: var(--space-6); }
.pnrx-admin__section-title { font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--canvas-700); margin: 0 0 var(--space-4); }
.pnrx-admin__tag { display: inline-block; padding: 2px 6px; font-size: 10px; font-weight: var(--weight-bold); text-transform: uppercase; border-radius: var(--radius-pill); background: var(--red-100); color: var(--red-600); margin-left: var(--space-2); }
.pnrx-admin__tag--good { background: var(--teal-100); color: var(--teal-600); }

/* Coupon panel */
.pnrx-admin__coupon-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.pnrx-admin__coupon-form input,
.pnrx-admin__coupon-form select {
  flex: 1 1 130px;
  min-width: 0;
  padding: 8px var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--canvas-700);
  background: var(--white);
  border: 1.5px solid var(--canvas-200);
  border-radius: var(--radius-md);
}

.pnrx-admin__coupon-form input:focus,
.pnrx-admin__coupon-form select:focus {
  outline: none;
  border-color: var(--teal-500);
}

.pnrx-admin__coupon-form .pnrx-admin__btn {
  flex: 0 0 auto;
}

.pnrx-admin__btn--sm {
  padding: 4px var(--space-3);
  font-size: var(--text-xs);
}

.pnrx-admin__coupon-notice {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  color: var(--teal-600);
}

.pnrx-admin__coupon-error {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  color: var(--red-600);
}

/* Visit work queue (Phase 9) */
.pnrx-admin__visit-when {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--canvas-700);
}

.pnrx-admin__visit-reason {
  font-size: var(--text-xs);
  color: var(--canvas-500);
  margin-top: 4px;
  max-width: 240px;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: var(--leading-base);
}

.pnrx-admin__table input[type="text"],
.pnrx-admin__table input[type="datetime-local"],
.pnrx-admin__table select {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  padding: 6px var(--space-2);
  border: 1px solid var(--canvas-200);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--canvas-700);
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.pnrx-admin__table input[type="text"]:focus,
.pnrx-admin__table input[type="datetime-local"]:focus,
.pnrx-admin__table select:focus {
  outline: none;
  border-color: var(--teal-500);
}

/* Phase 21A.1 admin Outcomes section. */
.pnrx-admin__outcomes-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-3, 0.75rem);
}
.pnrx-admin__outcomes-table th,
.pnrx-admin__outcomes-table td {
  padding: var(--space-2, 0.5rem);
  text-align: left;
  border-bottom: 1px solid var(--color-border, #1d2d3e);
  font-size: var(--font-size-sm, 0.875rem);
}
.pnrx-admin__outcomes-table th {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-muted, #a8b4c0);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pnrx-admin__outcomes-actions {
  display: flex;
  gap: var(--space-2, 0.5rem);
}
.pnrx-admin__outcomes-actions button {
  padding: 0.25rem 0.5rem;
  font-size: var(--font-size-xs, 0.75rem);
  border-radius: var(--radius-md, 0.5rem);
  background: var(--color-surface-2, #162230);
  color: var(--color-text, #ffffff);
  border: 1px solid var(--color-border, #1d2d3e);
  cursor: pointer;
}
.pnrx-admin__outcomes-actions button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
.pnrx-admin__outcomes-actions button.pnrx-admin__outcomes-action--primary {
  background: var(--color-primary, #00c4bc);
  color: var(--color-surface-0, #050a0f);
  border-color: var(--color-primary, #00c4bc);
}

/* Phase 22A.2 clinical intake review queue. */
.pnrx-admin__intakes-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-3, 0.75rem);
}
.pnrx-admin__intakes-table th,
.pnrx-admin__intakes-table td {
  padding: var(--space-2, 0.5rem);
  text-align: left;
  border-bottom: 1px solid var(--color-border, #1d2d3e);
  font-size: var(--font-size-sm, 0.875rem);
}
.pnrx-admin__intakes-table th {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-muted, #a8b4c0);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pnrx-admin__intake-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 0.5rem);
}
.pnrx-admin__intake-actions button {
  padding: 0.25rem 0.5rem;
  font-size: var(--font-size-xs, 0.75rem);
  border-radius: var(--radius-md, 0.5rem);
  background: var(--color-surface-2, #162230);
  color: var(--color-text, #ffffff);
  border: 1px solid var(--color-border, #1d2d3e);
  cursor: pointer;
}
.pnrx-admin__intake-actions button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
.pnrx-admin__intake-action--primary {
  background: var(--color-primary, #00c4bc) !important;
  color: var(--color-surface-0, #050a0f) !important;
  border-color: var(--color-primary, #00c4bc) !important;
}

/* ==========================================================================
   ADMIN — Mobile (Facebook-style shrink)
   ========================================================================== */

@media (max-width: 640px) {
  .pnrx-admin {
    padding: var(--space-5) var(--space-4) var(--space-7);
  }
}

@media (max-width: 480px) {
  /* Filter selects: full-width stacked */
  .pnrx-admin select,
  .pnrx-admin input[type="text"],
  .pnrx-admin input[type="search"],
  .pnrx-admin input[type="datetime-local"] {
    max-width: 100% !important;
    width: 100% !important;
    font-size: 16px; /* prevent iOS zoom */
  }

  /* Admin stat grid: 2-col on phones */
  .pnrx-admin__stats {
    grid-template-columns: 1fr 1fr;
  }

  /* Intake action button rows: wrap and stack */
  .pnrx-admin__intake-actions,
  .pnrx-admin__outcomes-actions {
    flex-direction: column;
    width: 100%;
  }

  .pnrx-admin__intake-actions > *,
  .pnrx-admin__outcomes-actions > * {
    width: 100%;
    min-height: 44px;
    text-align: center;
    justify-content: center;
  }

  /* Admin tables: horizontal scroll on mobile */
  .pnrx-admin__table-wrap,
  .pnrx-admin__intakes-table,
  .pnrx-admin__outcomes-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    display: block;
    width: 100%;
  }
}

@media (max-width: 360px) {
  .pnrx-admin__stats {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   Phase 34C — Refill Request Review Queue
   --------------------------------------------------------------------------
   Compact table that lives below the intake review queue. Reuses the
   existing .pnrx-admin__table base; only the per-row note textarea and
   the action buttons need extra styling.
   ========================================================================== */

.pnrx-admin__refill-note {
  width: 100%;
  min-width: 240px;
  padding: 6px 8px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.4;
  border: 1px solid var(--pnrx-color-border, #d1d5db);
  border-radius: 4px;
  resize: vertical;
  background: var(--pnrx-color-surface, #ffffff);
  color: var(--pnrx-color-text, #111827);
}

.pnrx-admin__refill-note:focus {
  outline: 2px solid var(--pnrx-color-accent, #16a08c);
  outline-offset: 1px;
}

.pnrx-admin__refill-actions {
  display: flex;
  gap: 8px;
  white-space: nowrap;
}

.pnrx-admin__refill-actions .pnrx-admin__btn--primary {
  background: var(--pnrx-color-accent, #16a08c);
  color: #ffffff;
}

.pnrx-admin__refill-actions .pnrx-admin__btn--danger {
  background: #b91c1c;
  color: #ffffff;
}

.pnrx-admin__refill-actions .pnrx-admin__btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ===== css/components/care-team.css ===== */
/* ============================================================================
   PEPNATIONRX - CARE TEAM  (Phase 8)
   The patient dashboard's "Your Care Team" surface and the standalone
   provider profile page at /providers/:id.
   ============================================================================ */

pnrx-care-team,
pnrx-provider-profile {
  display: block;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

/* -- Dashboard card -------------------------------------------------- */
.pnrx-care {
  padding: var(--space-5);
}

.pnrx-care__head {
  margin-bottom: var(--space-4);
}

.pnrx-care__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-1);
  color: var(--canvas-700);
}

.pnrx-care__sub {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--canvas-500);
  line-height: 1.5;
}

.pnrx-care__notice {
  font-size: var(--text-sm);
  color: var(--canvas-500);
  margin: 0;
  padding: var(--space-4) 0;
}

.pnrx-care__state--error .pnrx-care__notice {
  color: var(--red-600);
}

.pnrx-care__btn {
  appearance: none;
  background: var(--teal-500);
  color: #fff;
  border: none;
  border-radius: var(--radius-base, 6px);
  padding: var(--space-2) var(--space-4);
  font: inherit;
  font-weight: var(--weight-semibold);
  cursor: pointer;
}
.pnrx-care__btn:hover { background: var(--teal-600); }

/* -- List of providers ----------------------------------------------- */
.pnrx-care__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-4);
}

.pnrx-care__item {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--canvas-200);
  border-radius: var(--radius-base, 8px);
  background: #fff;
}

.pnrx-care__avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--canvas-100);
  display: block;
}
.pnrx-care__avatar--placeholder {
  background: linear-gradient(135deg, var(--teal-100), var(--teal-200));
}

.pnrx-care__item-body { min-width: 0; }

.pnrx-care__name {
  margin: 0 0 var(--space-1);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--canvas-700);
}

.pnrx-care__cred {
  margin: 0 0 var(--space-3);
  font-size: var(--text-xs);
  color: var(--canvas-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pnrx-care__meta {
  margin: 0 0 var(--space-3);
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px var(--space-3);
  font-size: var(--text-sm);
}
.pnrx-care__meta dt {
  color: var(--canvas-500);
  font-weight: var(--weight-medium);
}
.pnrx-care__meta dd {
  margin: 0;
  color: var(--canvas-700);
}

.pnrx-care__link {
  display: inline-flex;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--teal-500);
  text-decoration: none;
}
.pnrx-care__link:hover {
  text-decoration: underline;
}

/* -- Standalone profile page (/providers/:id) ------------------------ */
.pnrx-provider {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-7) var(--layout-gutter);
}

.pnrx-provider__head {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--space-5);
  align-items: center;
  margin-bottom: var(--space-7);
}

.pnrx-provider__avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--canvas-100);
  display: block;
}
.pnrx-provider__avatar--placeholder {
  background: linear-gradient(135deg, var(--teal-100), var(--teal-200));
}

.pnrx-provider__name {
  margin: 0 0 var(--space-1);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
  color: var(--canvas-700);
}

.pnrx-provider__cred {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--canvas-500);
  font-weight: var(--weight-medium);
}

.pnrx-provider__npi {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--canvas-400);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.pnrx-provider__section {
  border-top: 1px solid var(--canvas-200);
  padding: var(--space-5) 0;
}

.pnrx-provider__heading {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--canvas-500);
  margin: 0 0 var(--space-3);
  font-weight: var(--weight-semibold);
}

.pnrx-provider__bio {
  margin: 0;
  font-size: var(--text-base);
  color: var(--canvas-700);
  line-height: 1.6;
}

.pnrx-provider__facts {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}
.pnrx-provider__facts dt {
  color: var(--canvas-500);
  font-weight: var(--weight-medium);
}
.pnrx-provider__facts dd {
  margin: 0;
  color: var(--canvas-700);
}

.pnrx-provider__foot {
  border-top: 1px solid var(--canvas-200);
  padding-top: var(--space-5);
  margin-top: var(--space-7);
}

.pnrx-provider__legal {
  font-size: var(--text-xs);
  color: var(--canvas-400);
  line-height: 1.5;
  margin: 0;
}

.pnrx-provider__notice {
  font-size: var(--text-base);
  color: var(--canvas-500);
  margin: 0;
  padding: var(--space-9) 0;
  text-align: center;
}

.pnrx-provider--error .pnrx-provider__notice {
  color: var(--red-600);
}

.pnrx-provider__btn {
  appearance: none;
  background: var(--teal-500);
  color: #fff;
  border: none;
  border-radius: var(--radius-base, 6px);
  padding: var(--space-2) var(--space-5);
  font: inherit;
  font-weight: var(--weight-semibold);
  cursor: pointer;
  display: block;
  margin: 0 auto;
}
.pnrx-provider__btn:hover { background: var(--teal-600); }

.pnrx-provider__link {
  display: inline-flex;
  margin-top: var(--space-3);
  color: var(--teal-500);
  text-decoration: none;
  font-weight: var(--weight-semibold);
}
.pnrx-provider__link:hover { text-decoration: underline; }

/* -- Dashboard slot wrapper for <pnrx-care-team> --------------------- */
.pnrx-dash__card--care {
  padding: 0;
}
.pnrx-dash__card--care > pnrx-care-team {
  display: block;
}

/* ==========================================================================
   CARE TEAM — Mobile (Facebook-style shrink)
   ========================================================================== */

@media (max-width: 640px) {
  .pnrx-care {
    padding: var(--space-5) var(--space-4);
  }
}

@media (max-width: 480px) {
  /* Provider list item: avatar stacks above body on small phones */
  .pnrx-care__item {
    grid-template-columns: 1fr;
    text-align: center;
  }

  /* Avatar: center and shrink */
  .pnrx-care__avatar {
    width: 64px;
    height: 64px;
    margin: 0 auto;
  }

  /* Meta dt/dd: full-width stacked */
  .pnrx-care__meta {
    grid-template-columns: 1fr;
    text-align: left;
  }

  /* Action button: full-width */
  .pnrx-care__btn {
    width: 100%;
    min-height: 44px;
  }

  /* Standalone profile head: stack avatar above name */
  .pnrx-provider__head {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .pnrx-provider__avatar {
    width: 80px;
    height: 80px;
    margin: 0 auto;
  }

  /* Provider facts: stack label/value */
  .pnrx-provider__facts {
    grid-template-columns: 1fr;
  }
}

/* ===== css/components/visits.css ===== */
/* ============================================================================
   PEPNATIONRX - VIDEO VISITS  (Phase 9)
   The patient surface for requesting a visit and joining a scheduled visit.
   Mounted at /visits. The request form lives at the top, the list of past
   and upcoming visits below it.
   ============================================================================ */

pnrx-visits {
  display: block;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

.pnrx-visits {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-7) var(--layout-gutter);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* -- Header ------------------------------------------------------------------ */
.pnrx-visits__head {
  text-align: center;
  margin-bottom: var(--space-2);
}

.pnrx-visits__title {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--canvas-700);
  margin: 0 0 var(--space-2);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}

.pnrx-visits__sub {
  font-size: var(--text-md);
  color: var(--canvas-400);
  margin: 0;
  line-height: var(--leading-base);
}

/* -- Card -------------------------------------------------------------------- */
.pnrx-visits__card {
  background: var(--white);
  border: 1px solid var(--canvas-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-2);
  padding: var(--space-6) var(--space-5);
}

.pnrx-visits__card--form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.pnrx-visits__card--error .pnrx-visits__notice {
  color: var(--red-600);
}

.pnrx-visits__heading {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--canvas-700);
  margin: 0 0 var(--space-3);
  letter-spacing: -0.01em;
}

.pnrx-visits__notice {
  font-size: var(--text-md);
  color: var(--canvas-500);
  margin: 0;
  text-align: center;
  padding: var(--space-3) 0;
  line-height: var(--leading-base);
}

/* -- Request form ------------------------------------------------------------ */
.pnrx-visits__label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--canvas-700);
  margin: var(--space-3) 0 var(--space-2);
}

.pnrx-visits__textarea {
  width: 100%;
  min-height: 96px;
  padding: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  color: var(--canvas-700);
  background: var(--white);
  border: 1px solid var(--canvas-200);
  border-radius: var(--radius-md);
  resize: vertical;
  line-height: var(--leading-base);
  transition: border-color var(--duration-fast) var(--ease-standard);
}

.pnrx-visits__textarea:focus {
  outline: none;
  border-color: var(--teal-500);
  box-shadow: 0 0 0 3px rgba(22, 160, 140, 0.18);
}

.pnrx-visits__form-error {
  font-size: var(--text-sm);
  color: var(--red-600);
  margin: var(--space-2) 0 0;
}

.pnrx-visits__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-3);
  padding: 12px var(--space-6);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--white);
  background: var(--teal-500);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

.pnrx-visits__btn:hover {
  background: var(--teal-400);
  box-shadow: 0 4px 14px rgba(22, 160, 140, 0.30);
}

.pnrx-visits__btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

/* -- List of visits ---------------------------------------------------------- */
.pnrx-visits__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.pnrx-visits__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--canvas-50, #f7f8fa);
  border: 1px solid var(--canvas-200);
  border-radius: var(--radius-md);
}

.pnrx-visits__item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.pnrx-visits__when {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--canvas-700);
  line-height: var(--leading-tight);
}

.pnrx-visits__reason {
  font-size: var(--text-sm);
  color: var(--canvas-500);
  margin: 0;
  line-height: var(--leading-base);
  white-space: pre-wrap;
  word-break: break-word;
}

/* -- Status pill ------------------------------------------------------------- */
.pnrx-visits__status {
  display: inline-flex;
  align-items: center;
  padding: 3px var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-pill);
  background: var(--canvas-100);
  color: var(--canvas-700);
  white-space: nowrap;
}

.pnrx-visits__status--requested {
  background: var(--canvas-100);
  color: var(--canvas-700);
}

.pnrx-visits__status--scheduled {
  background: var(--teal-50);
  color: var(--teal-700, var(--teal-500));
}

.pnrx-visits__status--in_progress {
  background: var(--amber-100, #fef3c7);
  color: var(--amber-700, #b45309);
}

.pnrx-visits__status--completed {
  background: var(--green-100);
  color: var(--green-600);
}

.pnrx-visits__status--cancelled,
.pnrx-visits__status--no_show {
  background: var(--rose-100, #ffe4e6);
  color: var(--rose-600, #be123c);
}

/* -- Join button ------------------------------------------------------------- */
.pnrx-visits__join {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  margin-top: var(--space-2);
  padding: 10px var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--white);
  background: var(--teal-500);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition:
    background var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

.pnrx-visits__join:hover {
  background: var(--teal-400);
  box-shadow: 0 4px 14px rgba(22, 160, 140, 0.30);
}

/* -- Mobile ------------------------------------------------------------------ */
@media (max-width: 480px) {
  .pnrx-visits {
    padding: var(--space-5) var(--space-4);
  }

  .pnrx-visits__title {
    font-size: var(--text-2xl);
  }

  .pnrx-visits__card {
    padding: var(--space-5) var(--space-4);
  }
}

/* ==========================================================================
   VISITS — Mobile (Facebook-style shrink)
   ========================================================================== */

@media (max-width: 640px) {
  .pnrx-visits {
    padding: var(--space-5) var(--space-4) var(--space-7);
  }
}

@media (max-width: 480px) {
  /* Visit request button: full-width on phones */
  .pnrx-visits__btn {
    width: 100%;
    min-height: 44px;
  }

  /* Join button: full-width instead of align-self:flex-start */
  .pnrx-visits__join {
    width: 100%;
    align-self: stretch;
    justify-content: center;
  }

  /* Item header: wrap status badge below date */
  .pnrx-visits__item-head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  /* Textarea: prevent iOS auto-zoom */
  .pnrx-visits__textarea {
    font-size: 16px;
  }

  /* Select: prevent iOS auto-zoom */
  .pnrx-visits__select {
    font-size: 16px;
  }
}

/* ===== css/components/labs.css ===== */
/* ============================================================================
   PEPNATIONRX - LAB RESULTS  (Phase 10)
   The patient surface for reviewing lab orders and their result rows.
   Mounted at /labs. Read-only - admins create orders; patients only
   expand orders to see individual analyte values.
   ============================================================================ */

pnrx-labs {
  display: block;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

.pnrx-labs {
  max-width: 880px;
  margin: 0 auto;
  padding: var(--space-7) var(--layout-gutter);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* -- Header ------------------------------------------------------------------ */
.pnrx-labs__head {
  text-align: center;
  margin-bottom: var(--space-2);
}

.pnrx-labs__title {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--canvas-700);
  margin: 0 0 var(--space-2);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}

.pnrx-labs__sub {
  font-size: var(--text-md);
  color: var(--canvas-400);
  margin: 0;
  line-height: var(--leading-base);
}

/* -- Card -------------------------------------------------------------------- */
.pnrx-labs__card {
  background: var(--white);
  border: 1px solid var(--canvas-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-2);
  padding: var(--space-6) var(--space-5);
}

.pnrx-labs__card--error .pnrx-labs__notice {
  color: var(--red-600);
}

.pnrx-labs__heading {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--canvas-700);
  margin: 0 0 var(--space-3);
  letter-spacing: -0.01em;
}

.pnrx-labs__notice {
  font-size: var(--text-md);
  color: var(--canvas-500);
  margin: 0;
  text-align: center;
  padding: var(--space-3) 0;
  line-height: var(--leading-base);
}

.pnrx-labs__notice--error {
  color: var(--red-600);
}

/* -- List of orders ---------------------------------------------------------- */
.pnrx-labs__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.pnrx-labs__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--canvas-50, #f7f8fa);
  border: 1px solid var(--canvas-200);
  border-radius: var(--radius-md);
}

.pnrx-labs__item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.pnrx-labs__panel-name {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--canvas-700);
  line-height: var(--leading-tight);
}

.pnrx-labs__meta {
  font-size: var(--text-sm);
  color: var(--canvas-500);
  margin: 0;
  line-height: var(--leading-base);
}

.pnrx-labs__reason {
  font-size: var(--text-sm);
  color: var(--canvas-700);
  margin: var(--space-2) 0 0;
  line-height: var(--leading-base);
  white-space: pre-wrap;
  word-break: break-word;
}

/* -- Status pill ------------------------------------------------------------- */
.pnrx-labs__status {
  display: inline-flex;
  align-items: center;
  padding: 3px var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-pill);
  background: var(--canvas-100);
  color: var(--canvas-700);
  white-space: nowrap;
}

.pnrx-labs__status--requested {
  background: var(--canvas-100);
  color: var(--canvas-700);
}

.pnrx-labs__status--collected,
.pnrx-labs__status--processing {
  background: var(--amber-100, #fef3c7);
  color: var(--amber-700, #b45309);
}

.pnrx-labs__status--resulted {
  background: var(--green-100);
  color: var(--green-600);
}

.pnrx-labs__status--cancelled {
  background: var(--canvas-200);
  color: var(--canvas-500);
}

.pnrx-labs__status--abnormal_flagged {
  background: var(--rose-100, #ffe4e6);
  color: var(--rose-600, #be123c);
}

/* -- Expand button ----------------------------------------------------------- */
.pnrx-labs__expand-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  margin-top: var(--space-2);
  padding: 8px var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--white);
  background: var(--teal-500);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

.pnrx-labs__expand-btn:hover {
  background: var(--teal-400);
  box-shadow: 0 4px 14px rgba(22, 160, 140, 0.30);
}

/* -- Results table ----------------------------------------------------------- */
.pnrx-labs__results-table {
  width: 100%;
  margin-top: var(--space-3);
  border-collapse: collapse;
  font-size: var(--text-sm);
  background: var(--white);
  border: 1px solid var(--canvas-200);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.pnrx-labs__results-table th,
.pnrx-labs__results-table td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--canvas-200);
  color: var(--canvas-700);
  line-height: var(--leading-base);
}

.pnrx-labs__results-table thead {
  background: var(--canvas-50, #f7f8fa);
}

.pnrx-labs__results-table th {
  font-weight: var(--weight-bold);
  color: var(--canvas-500);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pnrx-labs__results-table tr:last-child td {
  border-bottom: none;
}

.pnrx-labs__results-row--abnormal td {
  background: var(--rose-50, #fff1f2);
  color: var(--rose-600, #be123c);
  font-weight: var(--weight-semibold);
}

/* -- Mobile ------------------------------------------------------------------ */
@media (max-width: 600px) {
  .pnrx-labs {
    padding: var(--space-5) var(--space-4);
  }

  .pnrx-labs__title {
    font-size: var(--text-2xl);
  }

  .pnrx-labs__card {
    padding: var(--space-5) var(--space-4);
  }

  .pnrx-labs__results-table {
    font-size: var(--text-xs);
  }

  .pnrx-labs__results-table th,
  .pnrx-labs__results-table td {
    padding: var(--space-2);
  }
}

/* ==========================================================================
   LABS — Mobile (Facebook-style shrink)
   ========================================================================== */

@media (max-width: 640px) {
  .pnrx-labs {
    padding: var(--space-5) var(--space-4) var(--space-7);
  }
}

@media (max-width: 480px) {
  /* Order item header: wrap status badge below name */
  .pnrx-labs__item-head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  /* Meta text: smaller on phones */
  .pnrx-labs__meta {
    font-size: var(--text-xs);
  }

  /* Table: horizontal scroll wrapper on the table itself */
  .pnrx-labs__results-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Expand button: full-width on phones */
  .pnrx-labs__expand-btn {
    width: 100%;
    align-self: stretch;
    justify-content: center;
  }
}

/* ===== css/components/urgent.css ===== */
/* ============================================================================
   PEPNATIONRX - URGENT CARE  (Phase 11)
   The patient surface for submitting an acute/urgent concern and following
   triage. Mounted at /urgent. The 911 callout sits between the header and
   the concern form so it is impossible to miss.
   ============================================================================ */

pnrx-urgent {
  display: block;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

.pnrx-urgent {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-7) var(--layout-gutter);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* -- Header ------------------------------------------------------------------ */
.pnrx-urgent__head {
  text-align: center;
  margin-bottom: var(--space-2);
}

.pnrx-urgent__title {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--canvas-700);
  margin: 0 0 var(--space-2);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}

.pnrx-urgent__sub {
  font-size: var(--text-md);
  color: var(--canvas-400);
  margin: 0;
  line-height: var(--leading-base);
}

/* -- 911 callout ------------------------------------------------------------- */
.pnrx-urgent__ed-warning {
  background: var(--rose-100, #ffe4e6);
  color: var(--rose-700, #9f1239);
  border: 1px solid var(--rose-300, #fda4af);
  border-left: 4px solid var(--rose-600, #be123c);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-md);
  line-height: var(--leading-base);
}

.pnrx-urgent__ed-warning strong {
  display: block;
  margin-bottom: var(--space-2);
  font-weight: var(--weight-bold);
}

/* -- Card -------------------------------------------------------------------- */
.pnrx-urgent__card {
  background: var(--white);
  border: 1px solid var(--canvas-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-2);
  padding: var(--space-6) var(--space-5);
}

.pnrx-urgent__card--form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.pnrx-urgent__card--error .pnrx-urgent__notice {
  color: var(--red-600);
}

.pnrx-urgent__heading {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--canvas-700);
  margin: 0 0 var(--space-3);
  letter-spacing: -0.01em;
}

.pnrx-urgent__notice {
  font-size: var(--text-md);
  color: var(--canvas-500);
  margin: 0;
  text-align: center;
  padding: var(--space-3) 0;
  line-height: var(--leading-base);
}

/* -- Concern form ------------------------------------------------------------ */
.pnrx-urgent__label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--canvas-700);
  margin: var(--space-3) 0 var(--space-2);
}

.pnrx-urgent__textarea {
  width: 100%;
  min-height: 120px;
  padding: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  color: var(--canvas-700);
  background: var(--white);
  border: 1px solid var(--canvas-200);
  border-radius: var(--radius-md);
  resize: vertical;
  line-height: var(--leading-base);
  transition: border-color var(--duration-fast) var(--ease-standard);
}

.pnrx-urgent__textarea:focus {
  outline: none;
  border-color: var(--teal-500);
  box-shadow: 0 0 0 3px rgba(22, 160, 140, 0.18);
}

.pnrx-urgent__form-error {
  font-size: var(--text-sm);
  color: var(--red-600);
  margin: var(--space-2) 0 0;
}

.pnrx-urgent__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-3);
  padding: 12px var(--space-6);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--white);
  background: var(--teal-500);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

.pnrx-urgent__btn:hover {
  background: var(--teal-400);
  box-shadow: 0 4px 14px rgba(22, 160, 140, 0.30);
}

.pnrx-urgent__btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

/* -- List of urgent visits --------------------------------------------------- */
.pnrx-urgent__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.pnrx-urgent__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--canvas-50, #f7f8fa);
  border: 1px solid var(--canvas-200);
  border-radius: var(--radius-md);
}

.pnrx-urgent__item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.pnrx-urgent__when {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--canvas-700);
  line-height: var(--leading-tight);
}

.pnrx-urgent__concern {
  font-size: var(--text-sm);
  color: var(--canvas-500);
  margin: 0;
  line-height: var(--leading-base);
  white-space: pre-wrap;
  word-break: break-word;
}

/* -- Status pill ------------------------------------------------------------- */
.pnrx-urgent__status {
  display: inline-flex;
  align-items: center;
  padding: 3px var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-pill);
  background: var(--canvas-100);
  color: var(--canvas-700);
  white-space: nowrap;
}

.pnrx-urgent__status--requested {
  background: var(--canvas-100);
  color: var(--canvas-700);
}

.pnrx-urgent__status--triaged {
  background: var(--teal-50);
  color: var(--teal-700, var(--teal-500));
}

.pnrx-urgent__status--in_progress {
  background: var(--amber-100, #fef3c7);
  color: var(--amber-700, #b45309);
}

.pnrx-urgent__status--completed {
  background: var(--green-100);
  color: var(--green-600);
}

.pnrx-urgent__status--escalated_ed {
  background: var(--rose-200, #fecdd3);
  color: var(--rose-700, #9f1239);
}

.pnrx-urgent__status--cancelled {
  background: var(--canvas-100);
  color: var(--canvas-500);
}

/* -- Urgency pill ------------------------------------------------------------ */
.pnrx-urgent__urgency {
  display: inline-flex;
  align-items: center;
  padding: 3px var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-pill);
  background: var(--canvas-100);
  color: var(--canvas-700);
  white-space: nowrap;
}

.pnrx-urgent__urgency--routine {
  background: var(--canvas-100);
  color: var(--canvas-700);
}

.pnrx-urgent__urgency--elevated {
  background: var(--teal-50);
  color: var(--teal-700, var(--teal-500));
}

.pnrx-urgent__urgency--urgent {
  background: var(--amber-100, #fef3c7);
  color: var(--amber-700, #b45309);
}

.pnrx-urgent__urgency--emergent {
  background: var(--rose-600, #be123c);
  color: var(--white);
}

/* -- Join button ------------------------------------------------------------- */
.pnrx-urgent__join {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  margin-top: var(--space-2);
  padding: 10px var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--white);
  background: var(--teal-500);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition:
    background var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

.pnrx-urgent__join:hover {
  background: var(--teal-400);
  box-shadow: 0 4px 14px rgba(22, 160, 140, 0.30);
}

/* -- Mobile ------------------------------------------------------------------ */
@media (max-width: 480px) {
  .pnrx-urgent {
    padding: var(--space-5) var(--space-4);
  }

  .pnrx-urgent__title {
    font-size: var(--text-2xl);
  }

  .pnrx-urgent__card {
    padding: var(--space-5) var(--space-4);
  }
}

/* ===== css/components/dependents.css ===== */
/* ============================================================================
   pnrx-dependents - Pediatric Care dependent profiles surface (Phase 12).
   Mirrors the .pnrx-labs structure so the component fits the existing
   patient-facing visual language without bespoke layout.
   ============================================================================ */

.pnrx-deps {
  display: flex;
  flex-direction: column;
  gap: var(--space-6, 1.5rem);
  padding: var(--space-6, 1.5rem) var(--space-4, 1rem);
  max-width: 760px;
  margin: 0 auto;
}

.pnrx-deps__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
}

.pnrx-deps__title {
  font-size: var(--font-size-2xl, 1.5rem);
  font-weight: 700;
  color: var(--color-text-primary, #111);
  margin: 0;
}

.pnrx-deps__sub {
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-secondary, #555);
  margin: 0;
}

.pnrx-deps__card {
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-lg, 0.75rem);
  padding: var(--space-5, 1.25rem);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.04));
}

.pnrx-deps__card--error {
  border-color: var(--color-danger, #c0392b);
  background: var(--color-danger-tint, #fdecea);
}

.pnrx-deps__heading {
  font-size: var(--font-size-lg, 1.125rem);
  font-weight: 600;
  margin: 0 0 var(--space-3, 0.75rem) 0;
  color: var(--color-text-primary, #111);
}

.pnrx-deps__notice {
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-secondary, #555);
  margin: 0;
}

.pnrx-deps__notice--error {
  color: var(--color-danger, #c0392b);
}

.pnrx-deps__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 1rem);
}

.pnrx-deps__item {
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-md, 0.5rem);
  padding: var(--space-4, 1rem);
  background: var(--color-surface-alt, #fafafa);
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
}

.pnrx-deps__item-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3, 0.75rem);
  flex-wrap: wrap;
}

.pnrx-deps__name {
  font-size: var(--font-size-base, 1rem);
  font-weight: 600;
  color: var(--color-text-primary, #111);
}

.pnrx-deps__relationship {
  font-size: var(--font-size-xs, 0.75rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--color-bg-muted, #f1f5f9);
  color: var(--color-text-secondary, #555);
  padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
  border-radius: var(--radius-sm, 0.25rem);
}

.pnrx-deps__age {
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-secondary, #555);
  margin: 0;
}

.pnrx-deps__notes {
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-primary, #111);
  margin: 0;
  white-space: pre-wrap;
}

.pnrx-deps__actions {
  display: flex;
  gap: var(--space-2, 0.5rem);
  flex-wrap: wrap;
}

.pnrx-deps__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 0.75rem);
}

.pnrx-deps__label {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 0.25rem);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 500;
  color: var(--color-text-primary, #111);
}

.pnrx-deps__input,
.pnrx-deps__select,
.pnrx-deps__textarea {
  font: inherit;
  width: 100%;
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-md, 0.5rem);
  background: var(--color-surface, #fff);
  color: var(--color-text-primary, #111);
}

.pnrx-deps__input:focus,
.pnrx-deps__select:focus,
.pnrx-deps__textarea:focus {
  outline: none;
  border-color: var(--color-accent, #16A08C);
  box-shadow: 0 0 0 3px var(--color-accent-tint, rgba(22, 160, 140, 0.2));
}

.pnrx-deps__textarea {
  resize: vertical;
  min-height: 2.5rem;
}

.pnrx-deps__btn {
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
  border: 1px solid var(--color-accent, #16A08C);
  background: var(--color-accent, #16A08C);
  color: #fff;
  border-radius: var(--radius-md, 0.5rem);
  transition: background-color 120ms ease, border-color 120ms ease;
}

.pnrx-deps__btn:hover {
  background: var(--color-accent-hover, #0f8576);
  border-color: var(--color-accent-hover, #0f8576);
}

.pnrx-deps__btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.pnrx-deps__btn--danger {
  background: transparent;
  color: var(--color-danger, #c0392b);
  border-color: var(--color-danger, #c0392b);
}

.pnrx-deps__btn--danger:hover {
  background: var(--color-danger, #c0392b);
  color: #fff;
}

/* Phase 12 J1: ghost button for the header Show/Hide Removed toggle and
   a small inline badge tagging soft-deleted dependent rows. */
.pnrx-deps__btn--ghost {
  background: transparent;
  color: var(--teal-700);
  border: 1px solid var(--teal-700);
  margin-top: var(--space-3);
}

.pnrx-deps__btn--ghost:hover {
  background: var(--teal-50);
}

.pnrx-deps__badge {
  display: inline-block;
  padding: 2px 8px;
  margin-left: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--gray-600);
  background: var(--gray-100);
  border-radius: var(--radius-pill);
}

/* ===== css/components/content-page.css ===== */
/* ============================================================================
   pnrx-content-page - Phase 13 marketing pages prose styling.
   ----------------------------------------------------------------------------
   Constrained-width article layout with clear heading hierarchy. Mirrors
   the other component card padding/spacing so the marketing routes feel
   visually consistent with the authenticated surface.
   ============================================================================ */

.pnrx-content {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-6, 1.5rem) var(--space-4, 1rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 1rem);
}

.pnrx-content--error {
  color: var(--color-danger, #c0392b);
}

.pnrx-content__title {
  font-size: var(--font-size-2xl, 1.75rem);
  font-weight: 700;
  margin: 0 0 var(--space-2, 0.5rem) 0;
  color: var(--color-text-primary, #111);
}

.pnrx-content__body {
  font-size: var(--font-size-base, 1rem);
  line-height: 1.6;
  color: var(--color-text-primary, #111);
}

.pnrx-content__body h2 {
  font-size: var(--font-size-xl, 1.375rem);
  font-weight: 600;
  margin: var(--space-5, 1.25rem) 0 var(--space-2, 0.5rem) 0;
}

.pnrx-content__body h3 {
  font-size: var(--font-size-lg, 1.125rem);
  font-weight: 600;
  margin: var(--space-4, 1rem) 0 var(--space-2, 0.5rem) 0;
}

.pnrx-content__body p {
  margin: 0 0 var(--space-3, 0.75rem) 0;
}

.pnrx-content__body strong {
  font-weight: 600;
}

.pnrx-content__body ul,
.pnrx-content__body ol {
  margin: 0 0 var(--space-3, 0.75rem) 0;
  padding-left: var(--space-5, 1.25rem);
}

.pnrx-content__notice {
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-secondary, #555);
  margin: 0;
}

/* ==========================================================================
   CONTENT PAGE — Mobile (Facebook-style shrink)
   ========================================================================== */

@media (max-width: 640px) {
  .pnrx-content-page,
  .pnrx-shell__legal-page {
    padding: var(--space-5) var(--space-4) var(--space-7);
    margin: 0;
  }

  .pnrx-shell__legal-page-title {
    font-size: var(--text-2xl);
  }
}

/* ===== css/components/toast.css ===== */
/* ============================================================================
   PEPNATIONRX — TOAST NOTIFICATIONS  v3  (Premium)
   White card, colored left border accent. No glows. Matches all 5 competitors.
   ============================================================================ */

.pnrx-toast-root {
  position: fixed;
  top: calc(var(--nav-height) + var(--space-4));
  right: var(--space-5);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 340px;
  max-width: calc(100vw - var(--space-8));
  pointer-events: none;
}

.pnrx-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--white);
  border: 1px solid var(--canvas-200);
  border-left: 4px solid var(--canvas-300);
  border-radius: var(--radius-md);
  box-shadow: var(--elev-4);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-base);
  color: var(--canvas-700);
  opacity: 0;
  transform: translateX(16px);
  transition:
    opacity   var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}

.pnrx-toast.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.pnrx-toast--success { border-left-color: var(--green-600); }
.pnrx-toast--error   { border-left-color: var(--red-600);   }
.pnrx-toast--info    { border-left-color: var(--teal-500);  }
.pnrx-toast--warning { border-left-color: var(--amber-600); }

/* ==========================================================================
   TOAST — Mobile (Facebook-style shrink)
   ========================================================================== */

@media (max-width: 640px) {
  /* Toasts: full-width pinned to bottom on mobile (above install prompt) */
  .pnrx-toast-root {
    left: var(--space-3);
    right: var(--space-3);
    /* Sit above the install-prompt banner (≈80px) + safe area */
    bottom: calc(80px + env(safe-area-inset-bottom, 0px) + var(--space-3));
    top: auto;
    width: auto;
    max-width: none;
  }

  .pnrx-toast {
    width: 100%;
    border-radius: var(--radius-lg);
    /* Slide up from bottom instead of from right */
    transform: translateY(16px);
  }

  .pnrx-toast.is-visible {
    transform: translateY(0);
  }
}

/* ===== css/components/install-prompt.css ===== */
/* ============================================================================
   PEPNATIONRX -- INSTALL PROMPT BANNER (Phase 14)
   Floating bottom banner with brand-aligned card aesthetic. Respects iOS
   safe-area-inset-bottom so it does not collide with the home indicator.
   ============================================================================ */

pnrx-install-prompt {
  display: block;
}

.pnrx-install {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--white, #ffffff);
  color: var(--canvas-700, #1f2a44);
  border: 1px solid var(--canvas-200, #e6eaf2);
  border-radius: 14px;
  box-shadow:
    0 12px 32px rgba(15, 23, 51, 0.18),
    0 2px 6px rgba(15, 23, 51, 0.08);
  max-width: 480px;
  margin: 0 auto;
  font-family: var(--font-sans, Inter, system-ui, -apple-system, sans-serif);
  animation: pnrx-install-slide-in 220ms ease-out;
  /* GPU layer for smooth 60fps animation */
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}


@keyframes pnrx-install-slide-in {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.pnrx-install__icon {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--teal-50, #e6f7f4);
  color: var(--teal-500, #16A08C);
  border-radius: 10px;
}

.pnrx-install__text {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  gap: 2px;
}

.pnrx-install__text strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--canvas-700, #1f2a44);
  line-height: 1.2;
}

.pnrx-install__text span {
  font-size: 12px;
  color: var(--canvas-500, #4f5b76);
  line-height: 1.3;
}

.pnrx-install__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.pnrx-install__cta {
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  background: var(--teal-500, #16A08C);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  transition: background 150ms ease;
}

.pnrx-install__cta:hover {
  background: var(--teal-600, #13917f);
}

.pnrx-install__hint {
  font-size: 12px;
  color: var(--canvas-600, #2c3a55);
  padding: 4px 8px;
  text-align: right;
}

.pnrx-install__dismiss {
  /* WCAG 2.5.5: minimum 44×44 touch target */
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--canvas-400, #8a96b0);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms ease, color 120ms ease;
  touch-action: manipulation;
  flex-shrink: 0;
}

.pnrx-install__dismiss:hover {
  background: var(--canvas-100, #f3f5fa);
  color: var(--canvas-700, #1f2a44);
}

@media (max-width: 380px) {
  .pnrx-install { gap: 8px; padding: 10px 12px; }
  .pnrx-install__text strong { font-size: 13px; }
  .pnrx-install__text span { font-size: 11px; }
  .pnrx-install__cta { padding: 7px 12px; font-size: 12px; }
  .pnrx-install__icon { flex-basis: 32px; width: 32px; height: 32px; }
}

@media (display-mode: standalone) {
  /* Already installed - never show the prompt regardless of state. */
  .pnrx-install { display: none !important; }
}

/* ===== css/components/family.css ===== */
/* PEPNATIONRX -- FAMILY ACCOUNT (Phase 16) */

.pnrx-family {
  max-width: 720px;
  margin: var(--space-7, 32px) auto;
  padding: 0 var(--layout-gutter, 16px) var(--space-7, 32px);
  font-family: var(--font-sans, Inter, system-ui, sans-serif);
  color: var(--canvas-700, #1f2a44);
}

.pnrx-family__header { margin-bottom: 24px; }
.pnrx-family__title { font-size: 28px; font-weight: 800; margin: 0 0 6px; letter-spacing: -0.4px; }
.pnrx-family__lede { font-size: 15px; line-height: 1.55; color: var(--canvas-500, #4f5b76); margin: 0; }

.pnrx-family__notice { padding: 24px; text-align: center; color: var(--canvas-500, #4f5b76); }

.pnrx-family__list { list-style: none; padding: 0; margin: 0 0 24px; }
.pnrx-family__row {
  display: grid;
  grid-template-columns: 1fr 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  background: var(--white, #fff);
  border: 1px solid var(--canvas-200, #e6eaf2);
  border-radius: 12px;
  margin-bottom: 8px;
}
.pnrx-family__row-name { font-weight: 600; font-size: 14px; }
.pnrx-family__row-meta { font-size: 13px; color: var(--canvas-500, #4f5b76); }
.pnrx-family__row-status {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  text-align: center;
}
.pnrx-family__row-status--accepted { background: var(--teal-50, #e6f7f4); color: var(--teal-600, #13917f); }
.pnrx-family__row-status--pending { background: #fff7e6; color: #b75d00; }
.pnrx-family__row-status--declined,
.pnrx-family__row-status--revoked { background: #fde8e8; color: #b91c1c; }
.pnrx-family__row-action {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  background: transparent;
  border: 1px solid var(--canvas-300, #c8d0df);
  color: var(--canvas-700, #1f2a44);
  border-radius: 6px;
  cursor: pointer;
}
.pnrx-family__row-action:hover { background: var(--canvas-100, #f3f5fa); }

.pnrx-family__form { display: grid; gap: 10px; margin-bottom: 16px; }
.pnrx-family__form--inline { padding: 16px; background: var(--white, #fff); border: 1px solid var(--canvas-200, #e6eaf2); border-radius: 12px; }
.pnrx-family__label { font-size: 13px; font-weight: 600; color: var(--canvas-600, #2c3a55); }
.pnrx-family__input {
  padding: 10px 12px;
  font-size: 14px;
  border: 1px solid var(--canvas-300, #c8d0df);
  border-radius: 8px;
  font-family: inherit;
}
.pnrx-family__input:focus { outline: none; border-color: var(--teal-500, #16A08C); box-shadow: 0 0 0 3px rgba(22,160,140,0.15); }

.pnrx-family__cta {
  display: inline-block;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  background: var(--teal-500, #16A08C);
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  justify-self: start;
  text-decoration: none;
  text-align: center;
}
.pnrx-family__cta:hover { background: var(--teal-600, #13917f); }
.pnrx-family__cta--secondary { background: transparent; color: var(--teal-500, #16A08C); border: 1.5px solid var(--teal-500, #16A08C); }
.pnrx-family__cta--secondary:hover { background: var(--teal-50, #e6f7f4); }

.pnrx-family__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }

.pnrx-family__danger {
  margin-top: 24px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  background: transparent;
  color: #b91c1c;
  border: 1px solid #f5c2c2;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
}
.pnrx-family__danger:hover { background: #fde8e8; }

.pnrx-family__details { margin-top: 16px; }
.pnrx-family__details summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--teal-500, #16A08C);
  padding: 8px 0;
}

@media (max-width: 600px) {
  .pnrx-family__row { grid-template-columns: 1fr auto; gap: 6px; }
  .pnrx-family__row-meta { grid-column: 1; font-size: 12px; }
  .pnrx-family__row-status { grid-column: 2; }
  .pnrx-family__row-action { grid-column: 1 / -1; justify-self: start; }
}

/* ===== css/components/family-accept.css ===== */
/* ============================================================================
   family-accept.css — Phase 31K
   ----------------------------------------------------------------------------
   Per-component styles for pnrx-family-accept. Bundled by scripts/bundle-css.js
   ahead of inline-component declarations. Component-specific BEM tokens are
   prefixed pnrx-*.

   Until each component lands a full design pass, the rules below are the
   shared shell tokens that keep the WC visually consistent with the rest
   of the dashboard rail. Component-specific overrides should be added
   below, not above, so the cascade resolves predictably.
   ========================================================================== */

.pnrx-family-accept {
  display: block;
  width: 100%;
  margin-block: var(--pnrx-space-md, 16px);
  color: var(--pnrx-color-text, #111827);
}

.pnrx-family-accept__card {
  background: var(--pnrx-color-surface, #ffffff);
  border: 1px solid var(--pnrx-color-border, #e5e7eb);
  border-radius: var(--pnrx-radius-md, 8px);
  padding: var(--pnrx-space-md, 16px);
  margin-block: var(--pnrx-space-sm, 12px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.pnrx-family-accept__heading {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 var(--pnrx-space-sm, 12px);
  color: var(--pnrx-color-text, #111827);
}

.pnrx-family-accept__notice {
  margin: 0;
  font-size: 14px;
  color: var(--pnrx-color-text-muted, #6b7280);
}

.pnrx-family-accept__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: var(--pnrx-radius-sm, 6px);
  background: var(--pnrx-color-accent, #16a08c);
  color: #ffffff;
  font-weight: 600;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 120ms ease;
}

.pnrx-family-accept__btn:hover {
  background: var(--pnrx-color-accent-strong, #0e7565);
}

.pnrx-family-accept__btn:disabled {
  background: var(--pnrx-color-border, #d1d5db);
  cursor: not-allowed;
}

.pnrx-family-accept__btn--ghost {
  background: transparent;
  color: var(--pnrx-color-text, #111827);
  border: 1px solid var(--pnrx-color-border, #d1d5db);
}

.pnrx-family-accept__btn--ghost:hover {
  background: var(--pnrx-color-surface-muted, #f3f4f6);
}

/* ===== css/components/provider-profile.css ===== */
/* ============================================================================
   provider-profile.css — Phase 31K
   ----------------------------------------------------------------------------
   Per-component styles for pnrx-provider-profile. Bundled by scripts/bundle-css.js
   ahead of inline-component declarations. Component-specific BEM tokens are
   prefixed pnrx-*.

   Until each component lands a full design pass, the rules below are the
   shared shell tokens that keep the WC visually consistent with the rest
   of the dashboard rail. Component-specific overrides should be added
   below, not above, so the cascade resolves predictably.
   ========================================================================== */

.pnrx-provider-profile {
  display: block;
  width: 100%;
  margin-block: var(--pnrx-space-md, 16px);
  color: var(--pnrx-color-text, #111827);
}

.pnrx-provider-profile__card {
  background: var(--pnrx-color-surface, #ffffff);
  border: 1px solid var(--pnrx-color-border, #e5e7eb);
  border-radius: var(--pnrx-radius-md, 8px);
  padding: var(--pnrx-space-md, 16px);
  margin-block: var(--pnrx-space-sm, 12px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.pnrx-provider-profile__heading {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 var(--pnrx-space-sm, 12px);
  color: var(--pnrx-color-text, #111827);
}

.pnrx-provider-profile__notice {
  margin: 0;
  font-size: 14px;
  color: var(--pnrx-color-text-muted, #6b7280);
}

.pnrx-provider-profile__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: var(--pnrx-radius-sm, 6px);
  background: var(--pnrx-color-accent, #16a08c);
  color: #ffffff;
  font-weight: 600;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 120ms ease;
}

.pnrx-provider-profile__btn:hover {
  background: var(--pnrx-color-accent-strong, #0e7565);
}

.pnrx-provider-profile__btn:disabled {
  background: var(--pnrx-color-border, #d1d5db);
  cursor: not-allowed;
}

.pnrx-provider-profile__btn--ghost {
  background: transparent;
  color: var(--pnrx-color-text, #111827);
  border: 1px solid var(--pnrx-color-border, #d1d5db);
}

.pnrx-provider-profile__btn--ghost:hover {
  background: var(--pnrx-color-surface-muted, #f3f4f6);
}

/* ===== css/components/superbills.css ===== */
/* ============================================================================
   superbills.css — Phase 31K
   ----------------------------------------------------------------------------
   Per-component styles for pnrx-superbills. Bundled by scripts/bundle-css.js
   ahead of inline-component declarations. Component-specific BEM tokens are
   prefixed pnrx-*.

   Until each component lands a full design pass, the rules below are the
   shared shell tokens that keep the WC visually consistent with the rest
   of the dashboard rail. Component-specific overrides should be added
   below, not above, so the cascade resolves predictably.
   ========================================================================== */

.pnrx-superbills {
  display: block;
  width: 100%;
  margin-block: var(--pnrx-space-md, 16px);
  color: var(--pnrx-color-text, #111827);
}

.pnrx-superbills__card {
  background: var(--pnrx-color-surface, #ffffff);
  border: 1px solid var(--pnrx-color-border, #e5e7eb);
  border-radius: var(--pnrx-radius-md, 8px);
  padding: var(--pnrx-space-md, 16px);
  margin-block: var(--pnrx-space-sm, 12px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.pnrx-superbills__heading {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 var(--pnrx-space-sm, 12px);
  color: var(--pnrx-color-text, #111827);
}

.pnrx-superbills__notice {
  margin: 0;
  font-size: 14px;
  color: var(--pnrx-color-text-muted, #6b7280);
}

.pnrx-superbills__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: var(--pnrx-radius-sm, 6px);
  background: var(--pnrx-color-accent, #16a08c);
  color: #ffffff;
  font-weight: 600;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 120ms ease;
}

.pnrx-superbills__btn:hover {
  background: var(--pnrx-color-accent-strong, #0e7565);
}

.pnrx-superbills__btn:disabled {
  background: var(--pnrx-color-border, #d1d5db);
  cursor: not-allowed;
}

.pnrx-superbills__btn--ghost {
  background: transparent;
  color: var(--pnrx-color-text, #111827);
  border: 1px solid var(--pnrx-color-border, #d1d5db);
}

.pnrx-superbills__btn--ghost:hover {
  background: var(--pnrx-color-surface-muted, #f3f4f6);
}

/* ===== css/components/notification-prefs.css ===== */
/* ============================================================================
   notification-prefs.css — Phase 31K
   ----------------------------------------------------------------------------
   Per-component styles for pnrx-notification-prefs. Bundled by scripts/bundle-css.js
   ahead of inline-component declarations. Component-specific BEM tokens are
   prefixed pnrx-*.

   Until each component lands a full design pass, the rules below are the
   shared shell tokens that keep the WC visually consistent with the rest
   of the dashboard rail. Component-specific overrides should be added
   below, not above, so the cascade resolves predictably.
   ========================================================================== */

.pnrx-notification-prefs {
  display: block;
  width: 100%;
  margin-block: var(--pnrx-space-md, 16px);
  color: var(--pnrx-color-text, #111827);
}

.pnrx-notification-prefs__card {
  background: var(--pnrx-color-surface, #ffffff);
  border: 1px solid var(--pnrx-color-border, #e5e7eb);
  border-radius: var(--pnrx-radius-md, 8px);
  padding: var(--pnrx-space-md, 16px);
  margin-block: var(--pnrx-space-sm, 12px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.pnrx-notification-prefs__heading {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 var(--pnrx-space-sm, 12px);
  color: var(--pnrx-color-text, #111827);
}

.pnrx-notification-prefs__notice {
  margin: 0;
  font-size: 14px;
  color: var(--pnrx-color-text-muted, #6b7280);
}

.pnrx-notification-prefs__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: var(--pnrx-radius-sm, 6px);
  background: var(--pnrx-color-accent, #16a08c);
  color: #ffffff;
  font-weight: 600;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 120ms ease;
}

.pnrx-notification-prefs__btn:hover {
  background: var(--pnrx-color-accent-strong, #0e7565);
}

.pnrx-notification-prefs__btn:disabled {
  background: var(--pnrx-color-border, #d1d5db);
  cursor: not-allowed;
}

.pnrx-notification-prefs__btn--ghost {
  background: transparent;
  color: var(--pnrx-color-text, #111827);
  border: 1px solid var(--pnrx-color-border, #d1d5db);
}

.pnrx-notification-prefs__btn--ghost:hover {
  background: var(--pnrx-color-surface-muted, #f3f4f6);
}

/* ===== css/components/refills.css ===== */
/* ============================================================================
   refills.css — Phase 31K
   ----------------------------------------------------------------------------
   Per-component styles for pnrx-refills. Bundled by scripts/bundle-css.js
   ahead of inline-component declarations. Component-specific BEM tokens are
   prefixed pnrx-*.

   Until each component lands a full design pass, the rules below are the
   shared shell tokens that keep the WC visually consistent with the rest
   of the dashboard rail. Component-specific overrides should be added
   below, not above, so the cascade resolves predictably.
   ========================================================================== */

.pnrx-refills {
  display: block;
  width: 100%;
  margin-block: var(--pnrx-space-md, 16px);
  color: var(--pnrx-color-text, #111827);
}

.pnrx-refills__card {
  background: var(--pnrx-color-surface, #ffffff);
  border: 1px solid var(--pnrx-color-border, #e5e7eb);
  border-radius: var(--pnrx-radius-md, 8px);
  padding: var(--pnrx-space-md, 16px);
  margin-block: var(--pnrx-space-sm, 12px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.pnrx-refills__heading {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 var(--pnrx-space-sm, 12px);
  color: var(--pnrx-color-text, #111827);
}

.pnrx-refills__notice {
  margin: 0;
  font-size: 14px;
  color: var(--pnrx-color-text-muted, #6b7280);
}

.pnrx-refills__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: var(--pnrx-radius-sm, 6px);
  background: var(--pnrx-color-accent, #16a08c);
  color: #ffffff;
  font-weight: 600;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 120ms ease;
}

.pnrx-refills__btn:hover {
  background: var(--pnrx-color-accent-strong, #0e7565);
}

.pnrx-refills__btn:disabled {
  background: var(--pnrx-color-border, #d1d5db);
  cursor: not-allowed;
}

.pnrx-refills__btn--ghost {
  background: transparent;
  color: var(--pnrx-color-text, #111827);
  border: 1px solid var(--pnrx-color-border, #d1d5db);
}

.pnrx-refills__btn--ghost:hover {
  background: var(--pnrx-color-surface-muted, #f3f4f6);
}