/* ── RESET & BASE ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --cream:     #FAF7F2;
  --warm-white:#FFFEF9;
  --ink:       #1A1612;
  --ink-soft:  #4A4540;
  --ink-muted: #8A8480;
  --teal:      #0D7377;
  --teal-light:#14A8A0;
  --teal-pale: #E8F5F5;
  --gold:      #C8963E;
  --gold-pale: #FDF3E3;
  --rose:      #C0484B;
  --rose-pale: #FDEAEA;
  --green:     #2D7A4F;
  --green-pale:#E8F5EE;
  --border:    #E8E4DC;
  --shadow-sm: 0 1px 3px rgba(26,22,18,0.06), 0 1px 2px rgba(26,22,18,0.04);
  --shadow-md: 0 4px 16px rgba(26,22,18,0.08), 0 2px 4px rgba(26,22,18,0.04);
  --shadow-lg: 0 20px 60px rgba(26,22,18,0.12), 0 8px 16px rgba(26,22,18,0.06);
  --radius:    12px;
  --radius-lg: 20px;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--cream);
  color: var(--ink);
  line-height: 1.6;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

.container { max-width: 1160px; margin: 0 auto; padding: 0 24px; }

/* Utility: replaces inline style="display:none" so pages can ship without
   'unsafe-inline' in the style-src CSP directive. JS toggles this class
   instead of setting the style attribute directly. */
.is-hidden { display: none !important; }

/* ── HEADER ───────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(250,247,242,0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  max-width: 1160px; margin: 0 auto; padding: 0 24px;
  height: 60px; display: flex; align-items: center; justify-content: space-between;
}
.logo {
  display: flex; align-items: center; gap: 8px;
  text-decoration: none; color: var(--ink);
}
.logo-mark { width: 24px; height: 24px; vertical-align: middle; border-radius: 6px; }
.logo-text { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1rem; }
.logo-tld { color: var(--teal); }
.header-nav { display: flex; align-items: center; gap: 24px; }
.header-nav a {
  text-decoration: none; color: var(--ink-soft); font-size: 0.875rem;
  font-weight: 400; transition: color 0.2s;
}
.header-nav a:hover { color: var(--teal); }
.nav-github {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--warm-white);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.nav-github:hover { border-color: var(--teal); box-shadow: var(--shadow-sm); }

/* ── HERO ─────────────────────────────────────────────────────────────────── */
.hero {
  position: relative; overflow: hidden;
  background: var(--warm-white);
  padding: 80px 24px 64px;
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.hero-bg-circles {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.circle {
  position: absolute; border-radius: 50%; opacity: 0.06;
}
.c1 { width: 600px; height: 600px; background: var(--teal); top: -200px; left: -100px; }
.c2 { width: 400px; height: 400px; background: var(--gold); top: -100px; right: -80px; }
.c3 { width: 300px; height: 300px; background: var(--teal); bottom: -150px; right: 30%; }

.hero-content { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }

.hero-badge {
  display: inline-block; margin-bottom: 24px;
  padding: 6px 16px; border-radius: 20px;
  background: var(--teal-pale); color: var(--teal);
  font-size: 0.78rem; font-weight: 500; letter-spacing: 0.04em;
  animation: fadeUp 0.5s ease both;
}
.hero-title {
  font-family: 'Fraunces', serif;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 800; line-height: 1.1;
  letter-spacing: -0.02em; color: var(--ink);
  margin-bottom: 20px;
  animation: fadeUp 0.5s 0.1s ease both;
}
.hero-title em { color: var(--teal); font-style: italic; font-weight: 300; }
.hero-sub {
  font-size: 1.05rem; color: var(--ink-soft); max-width: 580px; margin: 0 auto 36px;
  font-weight: 300; line-height: 1.7;
  animation: fadeUp 0.5s 0.2s ease both;
}

/* Search */
.search-wrap { animation: fadeUp 0.5s 0.3s ease both; }
.search-box {
  position: relative; max-width: 620px; margin: 0 auto;
  background: var(--warm-white); border: 2px solid var(--border);
  border-radius: 50px; display: flex; align-items: center;
  padding: 6px 6px 6px 20px;
  box-shadow: var(--shadow-md);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.search-box:focus-within {
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(13,115,119,0.1), var(--shadow-md);
}
.search-icon { color: var(--ink-muted); flex-shrink: 0; }
#searchInput {
  flex: 1; border: none; outline: none; background: transparent;
  font-family: 'DM Sans', sans-serif; font-size: 0.95rem;
  color: var(--ink); padding: 8px 12px;
}
#searchInput::placeholder { color: var(--ink-muted); }
.search-clear {
  display: none; border: none; background: var(--border);
  color: var(--ink-soft); width: 32px; height: 32px; border-radius: 50%;
  cursor: pointer; font-size: 0.75rem; flex-shrink: 0;
  transition: background 0.2s;
}
.search-clear:hover { background: var(--rose-pale); color: var(--rose); }
.search-clear.visible { display: flex; align-items: center; justify-content: center; }

/* Example searches under the search box */
.search-suggestions {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 6px; margin-top: 14px;
}
.try-label { font-size: 0.78rem; color: var(--ink-muted); }
.try-chip {
  padding: 4px 12px; border-radius: 16px; border: 1px solid var(--border);
  background: transparent; color: var(--ink-soft);
  font-family: 'DM Sans', sans-serif; font-size: 0.78rem;
  cursor: pointer; transition: all 0.15s;
}
.try-chip:hover { border-color: var(--teal); color: var(--teal); background: var(--teal-pale); }
.try-chip:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }

/* Frequently used at this clinic — Front Desk Mode only. Populated via JS
   from a localStorage usage log; hidden entirely (display:none, set inline
   by JS) outside Front Desk Mode or when no usage has been recorded yet.
   Extends the .try-chip visual pattern already used for "Try: Keytruda…". */
.frequent-shortcuts {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  margin-bottom: 14px; animation: fadeUp 0.3s ease both;
  /* fadeUp animates `transform`, which — even once the animation finishes
     at its identity end-state — silently creates a new stacking context
     for this element. Without an explicit position/z-index of its own,
     that trapped the .frequent-add-panel dropdown (z-index:150) behind
     .search-wrap, its later DOM sibling, no matter how high the panel's
     own z-index was set. Giving this element its own stacking context
     with an explicit z-index fixes it at the source. */
  position: relative; z-index: 5;
}
.frequent-label { font-size: 0.78rem; color: var(--ink-muted); margin-right: 2px; }
.frequent-chip {
  display: inline-flex; align-items: stretch; gap: 0;
  border: 1px solid var(--border); border-radius: 16px;
  background: var(--warm-white); overflow: hidden;
}
.frequent-chip.pinned { border-color: var(--gold); background: var(--gold-pale); }
.frequent-chip-main {
  padding: 4px 10px; border: none; background: transparent; color: var(--ink-soft);
  font-family: 'DM Sans', sans-serif; font-size: 0.78rem;
  cursor: pointer; transition: all 0.15s; min-height: 32px;
}
.frequent-chip-main:hover { color: var(--teal); }
.frequent-chip-pin, .frequent-chip-remove {
  padding: 4px 8px; border: none; border-left: 1px solid var(--border);
  background: transparent; color: var(--ink-muted); font-size: 0.75rem;
  cursor: pointer; transition: all 0.15s; min-width: 28px; min-height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
}
/* Pin icon color follows button color via currentColor — one shape, two
   states (see pinIconSvg() in js/app.js): hollow/gray until pinned, solid
   gold once pinned. */
.frequent-chip-pin.is-pinned { color: var(--gold); }
.frequent-chip-pin:hover { color: var(--gold); background: var(--gold-pale); }
.frequent-chip-remove:hover { color: var(--rose); background: var(--rose-pale); }
.frequent-chip-main:focus-visible,
.frequent-chip-pin:focus-visible,
.frequent-chip-remove:focus-visible { outline: 3px solid var(--teal); outline-offset: -2px; }
.frequent-clear-all {
  padding: 4px 12px; border-radius: 16px; border: 1px dashed var(--border);
  background: transparent; color: var(--ink-muted);
  font-family: 'DM Sans', sans-serif; font-size: 0.75rem;
  cursor: pointer; transition: all 0.15s; margin-left: 4px;
}
.frequent-clear-all:hover { border-color: var(--rose); color: var(--rose); }
.frequent-clear-all:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }

.frequent-empty { font-size: 0.78rem; color: var(--ink-muted); font-style: italic; }

/* Always-visible explanation of the gold highlight — appears once at least
   one shortcut is pinned, on its own line under the chip row. Not just a
   hover tooltip: front desk staff shouldn't have to discover this by
   hovering over a small icon. */
.frequent-legend {
  flex-basis: 100%; font-size: 0.72rem; color: var(--ink-muted);
  margin-top: 2px;
}

/* "+ Add" — lets front desk staff pin a drug to the shortcut row directly,
   without first printing/viewing it. Opens an inline search panel scoped
   to this control (see the outside-click handler in js/app.js). */
.frequent-add-wrap { position: relative; display: inline-flex; }
.frequent-add-btn {
  padding: 4px 12px; border-radius: 16px; border: 1px dashed var(--teal);
  background: var(--teal-pale); color: var(--teal);
  font-family: 'DM Sans', sans-serif; font-size: 0.75rem; font-weight: 500;
  cursor: pointer; transition: all 0.15s;
}
.frequent-add-btn:hover { background: var(--teal); color: white; }
.frequent-add-btn:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.frequent-add-panel {
  /* z-index high enough to clear .search-box's own stacking layer (a
     position:relative sibling lower in the hero) and the sticky header
     (z-index:100), but below the modal overlay (z-index:1000). */
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 150;
  width: 260px; background: var(--warm-white); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow-md); padding: 8px;
}
.frequent-add-input {
  width: 100%; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--cream); font-family: 'DM Sans', sans-serif; font-size: 0.85rem;
  min-height: 36px; box-sizing: border-box;
}
.frequent-add-input:focus { outline: none; border-color: var(--teal); }
.frequent-add-results { display: flex; flex-direction: column; margin-top: 6px; max-height: 220px; overflow-y: auto; }
.frequent-add-option {
  display: flex; align-items: baseline; gap: 6px; padding: 7px 8px; border: none;
  background: transparent; text-align: left; border-radius: 6px; cursor: pointer;
  font-family: 'DM Sans', sans-serif; font-size: 0.82rem; color: var(--ink-soft);
}
.frequent-add-option:hover { background: var(--teal-pale); color: var(--teal); }
.frequent-add-generic { font-size: 0.72rem; color: var(--ink-muted); }
.frequent-add-empty { font-size: 0.78rem; color: var(--ink-muted); padding: 6px 8px; display: block; }

/* Live result-count hint shown while typing — clicking it jumps to results */
.search-hint {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 12px;
  padding: 6px 16px; border-radius: 20px; border: none;
  background: var(--teal-pale); color: var(--teal);
  font-family: 'DM Sans', sans-serif; font-size: 0.82rem; font-weight: 500;
  cursor: pointer; transition: background 0.15s;
}
.search-hint:hover { background: var(--teal); color: white; }
.search-hint:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }

/* Stats */
.hero-stats {
  display: flex; align-items: center; justify-content: center;
  gap: 0; margin-top: 36px; flex-wrap: wrap;
  animation: fadeUp 0.5s 0.4s ease both;
}
.stat { text-align: center; padding: 0 28px; }
.stat-num {
  display: block; font-family: 'Fraunces', serif;
  font-size: 2rem; font-weight: 600; color: var(--teal); line-height: 1;
}
.stat-label { font-size: 0.75rem; color: var(--ink-muted); font-weight: 400; margin-top: 2px; display: block; }
.stat-div { width: 1px; height: 36px; background: var(--border); }

/* ── FILTERS ──────────────────────────────────────────────────────────────── */
.filters-section {
  background: var(--cream); padding: 20px 0 0;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 60px; z-index: 90;
}
.filters-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.filter-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.filter-group-right { gap: 20px; }
.filter-label { font-size: 0.78rem; color: var(--ink-muted); font-weight: 500; white-space: nowrap; }

.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip {
  padding: 5px 14px; border-radius: 20px; border: 1px solid var(--border);
  background: var(--warm-white); color: var(--ink-soft);
  font-size: 0.78rem; font-family: 'DM Sans', sans-serif;
  cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.chip:hover { border-color: var(--teal); color: var(--teal); }
.chip.active { background: var(--teal); border-color: var(--teal); color: #fff; font-weight: 500; }

/* Collapsed overflow chips — hidden until expanded */
.chip-overflow { display: none; }
.chips-expanded .chip-overflow { display: inline-flex; }

/* Expand / collapse toggle chip */
.chip-expand {
  border-style: dashed; gap: 4px;
  display: inline-flex; align-items: center;
}
.chip-expand .expand-chevron {
  font-size: 0.7rem; line-height: 1;
  transition: transform 0.2s ease;
  display: inline-block;
}
.chip-expand:hover { border-color: var(--teal); color: var(--teal); border-style: dashed; }

/* Toggle */
.toggle-wrap { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.toggle-wrap input { position: absolute; opacity: 0; width: 0; }
.toggle-track {
  width: 36px; height: 20px; border-radius: 10px;
  background: var(--border); position: relative; transition: background 0.2s; flex-shrink: 0;
}
.toggle-thumb {
  position: absolute; top: 3px; left: 3px;
  width: 14px; height: 14px; border-radius: 50%;
  background: white; transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
input:checked + .toggle-track { background: var(--teal); }
input:checked + .toggle-track .toggle-thumb { transform: translateX(16px); }
.toggle-label { font-size: 0.82rem; color: var(--ink-soft); white-space: nowrap; }

/* Sort dropdown */
.sort-wrap { display: flex; align-items: center; gap: 8px; }
.sort-select {
  padding: 6px 28px 6px 12px; border-radius: 20px;
  border: 1px solid var(--border); background: var(--warm-white);
  color: var(--ink-soft); font-family: 'DM Sans', sans-serif; font-size: 0.8rem;
  cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238A8480' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  transition: border-color 0.15s;
}
.sort-select:hover, .sort-select:focus { border-color: var(--teal); outline: none; }
.sort-select:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }

.results-meta {
  font-size: 0.78rem; color: var(--ink-muted);
  padding: 10px 0 12px; border-top: 1px solid var(--border); margin-top: 14px;
}

/* ── DRUG GRID ────────────────────────────────────────────────────────────── */
.drug-section { padding: 36px 0 64px; scroll-margin-top: 220px; }

.drug-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

.drug-card {
  background: var(--warm-white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 24px;
  cursor: pointer; transition: all 0.2s;
  animation: fadeUp 0.4s ease both;
  position: relative; overflow: hidden;
  content-visibility: auto;            /* skip layout/paint for offscreen cards */
  contain-intrinsic-size: auto 230px;
}

/* ── FRONT DESK MODE ──────────────────────────────────────────────────────── */
/* Denser layout for clinic staff. Scoped entirely under body.frontdesk-mode
   (toggled in js/app.js) so the default patient-facing view is completely
   unaffected — this is an additive layer, not a rewrite of the main view. */

/* Suppress patient-facing explanatory/marketing copy — front desk staff
   don't need the pitch, they need results fast. The About section itself
   stays visible (and reachable via the header nav link) in Front Desk
   Mode too — only the hero pitch copy is trimmed. */
.frontdesk-mode .hero-badge,
.frontdesk-mode .hero-sub {
  display: none;
}
.frontdesk-mode .hero { padding-top: 32px; padding-bottom: 28px; }
.frontdesk-mode .hero-title { font-size: clamp(1.6rem, 4vw, 2.2rem); margin-bottom: 20px; }

/* Larger search input + tap target — front desks are often on tablets,
   read from a few feet away, typed on by whoever's at the counter. */
.frontdesk-mode .search-box { padding: 8px 8px 8px 24px; border-width: 2px; }
.frontdesk-mode #searchInput { font-size: 1.05rem; padding: 12px 12px; min-height: 44px; }
.frontdesk-mode .search-clear { width: 40px; height: 40px; }

/* Dense, single-column result list instead of the card grid */
.frontdesk-mode .drug-grid {
  display: flex; flex-direction: column; gap: 0;
  border-top: 1px solid var(--border);
}

.frontdesk-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 16px; min-height: 56px;
  border-bottom: 1px solid var(--border);
  background: var(--warm-white);
  cursor: pointer; transition: background 0.15s;
  animation: fadeUp 0.3s ease both;
}
.frontdesk-row:hover { background: var(--cream); }
.frontdesk-row-main {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; flex: 1; min-width: 0;
}
.frontdesk-row-names { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.frontdesk-row-brand { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.05rem; }
.frontdesk-row-generic { font-size: 0.85rem; color: var(--ink-muted); }
.frontdesk-row-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.frontdesk-print-btn {
  flex-shrink: 0; min-height: 44px; min-width: 44px;
  padding: 8px 16px; border-radius: 20px; border: none;
  background: var(--teal); color: white;
  font-family: 'DM Sans', sans-serif; font-size: 0.85rem; font-weight: 500;
  cursor: pointer; transition: background 0.15s;
}
.frontdesk-print-btn:hover { background: var(--teal-light); }
.frontdesk-print-btn:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }

@media (max-width: 768px) {
  .frontdesk-row { flex-wrap: wrap; }
  .frontdesk-row-main { width: 100%; }
}

/* Loading skeleton — shown while drugs.json downloads */
.loading-state {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}
.skeleton-card {
  background: var(--warm-white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 24px; min-height: 200px;
}
.sk-line {
  height: 14px; border-radius: 6px; margin-bottom: 12px;
  background: linear-gradient(90deg, var(--border) 25%, var(--cream) 50%, var(--border) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease infinite;
}
.sk-title { width: 55%; height: 20px; }
.sk-sub   { width: 35%; }
.sk-body  { width: 90%; }
.sk-body.short { width: 65%; }
@keyframes shimmer {
  from { background-position: 200% 0; } to { background-position: -200% 0; }
}

/* Error state */
.error-state { text-align: center; padding: 64px 24px; }
.error-state h3 { font-family: 'Fraunces', serif; font-size: 1.3rem; margin: 12px 0 8px; }
.error-state p { color: var(--ink-muted); margin-bottom: 20px; }

/* Load more */
.load-more-wrap { display: flex; justify-content: center; margin-top: 32px; }
.btn-load-more {
  padding: 12px 32px; border-radius: 24px;
  border: 1px solid var(--teal); background: transparent; color: var(--teal);
  font-family: 'DM Sans', sans-serif; font-size: 0.875rem; font-weight: 500;
  cursor: pointer; transition: all 0.2s;
}
.btn-load-more:hover { background: var(--teal); color: white; }
.btn-load-more:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.drug-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--border); transition: background 0.2s;
}
.drug-card.has-pss::before { background: var(--teal); }
.drug-card.no-pss::before  { background: var(--border); }
.drug-card:hover {
  border-color: var(--teal); box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.card-names { flex: 1; min-width: 0; }
.card-brand {
  font-family: 'Fraunces', serif; font-size: 1.2rem; font-weight: 600;
  color: var(--ink); line-height: 1.2; margin-bottom: 2px;
}
.card-generic { font-size: 0.8rem; color: var(--ink-muted); font-style: italic; }

.pss-badge {
  flex-shrink: 0; padding: 4px 10px; border-radius: 20px;
  font-size: 0.72rem; font-weight: 500;
}
.pss-badge.yes { background: var(--green-pale); color: var(--green); }
.pss-badge.no  { background: var(--border); color: var(--ink-muted); }

.card-meta {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0;
}
.meta-tag {
  font-size: 0.72rem; padding: 3px 9px; border-radius: 6px;
  background: var(--cream); color: var(--ink-soft); border: 1px solid var(--border);
}
.meta-tag.biosimilar { background: var(--gold-pale); color: var(--gold); border-color: transparent; }
.meta-tag.orphan     { background: var(--rose-pale);  color: var(--rose);  border-color: transparent; }

.card-indication {
  font-size: 0.82rem; color: var(--ink-soft); line-height: 1.5;
  margin-bottom: 14px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.card-footer-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding-top: 14px; border-top: 1px solid var(--border);
}
.card-mfr { font-size: 0.75rem; color: var(--ink-muted); }
.card-features-preview { display: flex; gap: 4px; flex-wrap: wrap; }
.feat-pill {
  font-size: 0.68rem; padding: 2px 7px; border-radius: 4px;
  background: var(--teal-pale); color: var(--teal);
}
.card-cta {
  font-size: 0.78rem; color: var(--teal); font-weight: 500;
  display: flex; align-items: center; gap: 4px;
  white-space: nowrap; flex-shrink: 0;
}

/* ── EMPTY STATE ─────────────────────────────────────────────────────────── */
.empty-state { text-align: center; padding: 80px 24px; }
.empty-icon { font-size: 3rem; margin-bottom: 16px; }
.empty-state h3 { font-family: 'Fraunces', serif; font-size: 1.4rem; margin-bottom: 8px; }
.empty-state p { color: var(--ink-muted); margin-bottom: 24px; }
.btn-reset {
  padding: 10px 24px; border-radius: 24px; border: 1px solid var(--teal);
  background: transparent; color: var(--teal); cursor: pointer;
  font-family: 'DM Sans', sans-serif; font-size: 0.875rem; transition: all 0.2s;
}
.btn-reset:hover { background: var(--teal); color: white; }

/* ── MODAL ────────────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(26,22,18,0.5);
  backdrop-filter: blur(4px);
  display: none; align-items: center; justify-content: center;
  padding: 24px;
  animation: fadeIn 0.2s ease;
}
.modal-overlay.open { display: flex; }

.modal {
  background: var(--warm-white); border-radius: var(--radius-lg);
  max-width: 780px; width: 100%; max-height: 90vh;
  overflow-y: auto; position: relative;
  box-shadow: var(--shadow-lg);
  animation: slideUp 0.3s ease;
}
.modal-close {
  position: sticky; top: 16px; float: right; margin: 16px 16px 0 0;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--warm-white);
  cursor: pointer; color: var(--ink-soft); font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s; z-index: 10;
}
.modal-close:hover { background: var(--rose-pale); border-color: var(--rose); color: var(--rose); }

.modal-body { padding: 32px; clear: both; }

/* Modal — drug header */
.modal-drug-header { margin-bottom: 28px; }
.modal-brand {
  font-family: 'Fraunces', serif; font-size: 2rem; font-weight: 700;
  color: var(--ink); line-height: 1; margin-bottom: 4px;
}
.modal-generic { font-size: 0.95rem; color: var(--ink-muted); font-style: italic; margin-bottom: 12px; }
.modal-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.modal-indication { font-size: 0.9rem; color: var(--ink-soft); line-height: 1.6; margin-bottom: 8px; }
.modal-mfr { font-size: 0.82rem; color: var(--ink-muted); }
.modal-mfr a { color: var(--teal); text-decoration: none; }
.modal-body a { color: var(--teal); }

/* PSS program block */
/* Payer-narrowing selector — sits above the program list in the modal.
   Reuses the .sort-select visual language already established for the
   main search filters. */
.payer-selector-wrap {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.payer-selector-label { font-size: 0.78rem; color: var(--ink-muted); font-weight: 500; white-space: nowrap; }
.payer-select {
  padding: 6px 28px 6px 12px; border-radius: 20px;
  border: 1px solid var(--border); background: var(--warm-white);
  color: var(--ink-soft); font-family: 'DM Sans', sans-serif; font-size: 0.8rem;
  cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238A8480' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  transition: border-color 0.15s;
}
.payer-select:hover, .payer-select:focus { border-color: var(--teal); outline: none; }
.payer-select:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }

.pss-block {
  background: var(--cream); border-radius: var(--radius);
  padding: 24px; margin-bottom: 24px; border: 1px solid var(--border);
}
/* Deprioritized (not hidden) when it doesn't match the selected payer type */
.pss-block.payer-excluded { opacity: 0.55; }
.pss-block.payer-excluded:hover,
.pss-block.payer-excluded:focus-within { opacity: 0.85; }
.payer-exclusion-note {
  font-size: 0.75rem; color: var(--rose); background: var(--rose-pale);
  border-radius: 8px; padding: 6px 10px; margin-bottom: 12px;
}
.pss-block-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 20px;
}
.pss-program-name {
  font-family: 'Fraunces', serif; font-size: 1.2rem; font-weight: 600;
}
.pss-status-badge {
  flex-shrink: 0; padding: 5px 14px; border-radius: 20px;
  font-size: 0.78rem; font-weight: 600;
}
.pss-status-badge.yes { background: var(--green); color: white; }
.pss-status-badge.no  { background: var(--border); color: var(--ink-muted); }

/* Trust signals — freshness badge (data recency) + confidence chip (source
   reliability). Kept as two separate pills rather than merged into one
   score: a program can be recently re-checked but still low-confidence. */
.pss-trust-row {
  display: flex; flex-wrap: wrap; gap: 6px; margin: -10px 0 18px;
}
.freshness-badge {
  padding: 4px 10px; border-radius: 20px; font-size: 0.72rem; font-weight: 500;
  cursor: default;
}
.freshness-badge.freshness-high    { background: var(--green-pale); color: var(--green); }
.freshness-badge.freshness-review  { background: var(--gold-pale);  color: var(--gold); }
.freshness-badge.freshness-stale   { background: var(--rose-pale);  color: var(--rose); }
.freshness-badge.freshness-unknown { background: var(--border);     color: var(--ink-muted); }

.confidence-chip {
  padding: 4px 10px; border-radius: 20px; font-size: 0.72rem; font-weight: 500;
  background: var(--cream); color: var(--ink-soft); border: 1px solid var(--border);
}

.pss-quick-links {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px;
}
.quick-link {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 20px; border: 1px solid var(--border);
  background: var(--warm-white); color: var(--ink-soft);
  font-size: 0.78rem; text-decoration: none; transition: all 0.15s;
}
.quick-link:hover { border-color: var(--teal); color: var(--teal); box-shadow: var(--shadow-sm); }

/* Summary + expand */
.summary-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px;
}
.summary-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 8px; background: var(--warm-white);
  border: 1px solid var(--border);
}
.summary-item .s-icon { font-size: 0.9rem; flex-shrink: 0; }
.summary-item .s-text { font-size: 0.78rem; color: var(--ink-soft); }
.summary-item.available .s-text { color: var(--green); font-weight: 500; }

.expand-btn {
  display: flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer;
  color: var(--teal); font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem; font-weight: 500; padding: 0; margin-top: 8px;
  transition: opacity 0.15s;
}
.expand-btn:hover { opacity: 0.75; }
.expand-btn .chevron { transition: transform 0.25s; font-style: normal; }
.expand-btn.open .chevron { transform: rotate(180deg); }

.feature-details {
  margin-top: 16px; display: none;
  border-top: 1px solid var(--border); padding-top: 16px;
}
.feature-details.open { display: block; }

.feature-category { margin-bottom: 16px; }
.feat-cat-title {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-muted);
  margin-bottom: 8px;
}
.feat-row {
  display: grid; grid-template-columns: 18px 200px 1fr;
  column-gap: 10px; align-items: baseline;
  padding: 8px 0; border-bottom: 1px solid var(--border);
  font-size: 0.82rem;
}
.feat-row:last-child { border-bottom: none; }
.feat-avail { line-height: 1.5; }
.feat-avail.yes { color: var(--green); }
.feat-avail.no  { color: var(--rose); }
.feat-name { font-weight: 500; color: var(--ink); min-width: 0; }
.feat-detail { color: var(--ink-soft); min-width: 0; }
.feat-detail .feat-hours { font-size: 0.75rem; color: var(--ink-muted); }

.enroll-section { margin-top: 16px; }
.enroll-title {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-muted); margin-bottom: 8px;
}
.enroll-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.enroll-chip {
  padding: 5px 12px; border-radius: 6px; font-size: 0.75rem;
  background: var(--teal-pale); color: var(--teal);
  text-decoration: none; border: 1px solid transparent; transition: all 0.15s;
}
.enroll-chip:hover { border-color: var(--teal); }

/* Enrollment checklist — "What you'll need to enroll" */
.checklist-section {
  margin-top: 4px; margin-bottom: 4px;
  background: var(--warm-white); border: 1px solid var(--border);
  border-radius: 8px; padding: 14px 16px;
}
.checklist-items { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.checklist-item {
  display: grid; grid-template-columns: 16px 1fr auto;
  column-gap: 10px; align-items: baseline; font-size: 0.82rem;
}
.checklist-check { color: var(--green); line-height: 1.5; }
.checklist-text { color: var(--ink-soft); min-width: 0; }
.checklist-condition { font-size: 0.75rem; color: var(--ink-muted); font-style: italic; }
.checklist-who {
  flex-shrink: 0; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em;
  padding: 2px 8px; border-radius: 10px; white-space: nowrap;
  background: var(--teal-pale); color: var(--teal);
}
.checklist-who-prescriber { background: var(--gold-pale); color: var(--gold); }
.checklist-who-pharmacy   { background: var(--rose-pale);  color: var(--rose); }
.checklist-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.checklist-badge {
  padding: 4px 10px; border-radius: 6px; font-size: 0.72rem; font-weight: 500;
  background: var(--teal-pale); color: var(--teal);
}
.checklist-meta-line { font-size: 0.75rem; color: var(--ink-muted); }


/* Print handout trigger — sits in the modal header, one per drug */
.btn-print-handout {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 16px; padding: 9px 18px; border-radius: 24px;
  border: 1px solid var(--teal); background: var(--warm-white); color: var(--teal);
  font-family: 'DM Sans', sans-serif; font-size: 0.82rem; font-weight: 500;
  cursor: pointer; transition: all 0.2s;
}
.btn-print-handout:hover { background: var(--teal); color: white; }
.btn-print-handout:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }

/* No PSS block */
.no-pss-block {
  background: var(--cream); border-radius: var(--radius);
  padding: 28px; text-align: center; border: 1px dashed var(--border);
}
.no-pss-block h4 { font-family: 'Fraunces', serif; margin-bottom: 8px; }
.no-pss-block p { font-size: 0.85rem; color: var(--ink-muted); line-height: 1.6; }

/* ── ABOUT ────────────────────────────────────────────────────────────────── */
.about-section {
  background: var(--ink); color: white;
  padding: 80px 0;
  /* .filters-section is `position: sticky; top: 60px` with body as its
     containing block, so — unlike a normal in-flow section — it stays
     stuck to the top of the viewport for the ENTIRE rest of the page, not
     just while scrolling through the drug grid. That means by the time you
     scroll to #about, both the 60px site-header AND the ~153px filters bar
     are stacked and covering the top of the viewport (same reason
     .drug-section already uses 220px below). Without this, clicking the
     "About" nav link scrolled the section flush to the viewport top and
     that ~213px stack covered the "Why this exists" heading entirely. */
  scroll-margin-top: 220px;
}
.about-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start;
}
.about-text h2 {
  font-family: 'Fraunces', serif; font-size: 2rem; font-weight: 700;
  margin-bottom: 16px; color: white;
}
.about-text p {
  color: rgba(255,255,255,0.7); font-size: 0.9rem; line-height: 1.7; margin-bottom: 12px;
}
.btn-contribute {
  display: inline-block; margin-top: 12px;
  padding: 10px 24px; border-radius: 24px;
  background: var(--teal); color: white;
  text-decoration: none; font-size: 0.875rem; font-weight: 500;
  transition: opacity 0.2s;
}
.btn-contribute:hover { opacity: 0.85; }

.about-cards { display: flex; flex-direction: column; gap: 16px; }
.about-card {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius); padding: 20px;
}
.about-card-icon { font-size: 1.5rem; margin-bottom: 10px; }
.about-card h4 {
  font-family: 'Fraunces', serif; font-weight: 600; margin-bottom: 6px; color: white;
}
.about-card p { font-size: 0.82rem; color: rgba(255,255,255,0.6); line-height: 1.6; }

/* ── FOOTER ───────────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--ink); border-top: 1px solid rgba(255,255,255,0.08);
  padding: 32px 0;
}
.footer-inner { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.footer-logo { font-family: 'Fraunces', serif; color: white; font-size: 0.95rem; }
.footer-logo .logo-mark { width: 18px; height: 18px; vertical-align: middle; border-radius: 4px; }
.footer-disclaimer { font-size: 0.75rem; color: rgba(255,255,255,0.4); max-width: 680px; line-height: 1.6; }
.footer-links { display: flex; gap: 20px; }
.footer-links a { font-size: 0.78rem; color: rgba(255,255,255,0.5); text-decoration: none; transition: color 0.15s; }
.footer-links a:hover { color: var(--teal); }

/* ── ACCESSIBILITY ────────────────────────────────────────────────────────── */

/* Skip-to-content link — visible only on keyboard focus */
.skip-link {
  position: absolute; top: -100px; left: 16px;
  background: var(--teal); color: white;
  padding: 10px 20px; border-radius: var(--radius);
  font-size: 0.875rem; font-weight: 500; text-decoration: none;
  z-index: 9999; transition: top 0.2s;
}
.skip-link:focus { top: 16px; }

/* Global focus-visible rings for keyboard navigation */
.drug-card:focus-visible,
.chip:focus-visible,
.btn-reset:focus-visible,
.btn-contribute:focus-visible,
.expand-btn:focus-visible,
.quick-link:focus-visible,
.enroll-chip:focus-visible,
.modal-close:focus-visible,
.nav-github:focus-visible,
.header-nav a:focus-visible,
.footer-links a:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
}
.drug-card:focus-visible  { border-radius: var(--radius-lg); }
.chip:focus-visible,
.nav-github:focus-visible { border-radius: 20px; }
.modal-close:focus-visible { border-radius: 50%; }

/* Toggle — show ring on the visible track when underlying checkbox is focused */
.toggle-wrap input:focus-visible + .toggle-track {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
  border-radius: 10px;
}

/* Ensure minimum 44 × 44 px tap target for chips and toggles on touch devices */
@media (pointer: coarse) {
  /* Exclude .chip-overflow so the collapse/expand behaviour is not broken:
     display:none on .chip-overflow must never be overridden here */
  .chip:not(.chip-overflow) { min-height: 44px; display: inline-flex; align-items: center; }
  .chips-expanded .chip-overflow { min-height: 44px; display: inline-flex; align-items: center; }
  .toggle-track { width: 42px; height: 26px; }
  .toggle-thumb { width: 18px; height: 18px; top: 4px; left: 4px; }
  input:checked + .toggle-track .toggle-thumb { transform: translateX(16px); }
  .quick-link { min-height: 44px; }
  .modal-close { width: 44px; height: 44px; }
  .expand-btn { min-height: 44px; }
  .try-chip { min-height: 44px; }
  .search-hint { min-height: 44px; }
  .sort-select { min-height: 44px; }
  .btn-load-more { min-height: 44px; }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ── ANIMATIONS ───────────────────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── RESPONSIVE (≤ 768px) ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* General layout */
  .hero { padding: 56px 20px 48px; }
  .hero-title { font-size: 2rem; }
  .hero-sub { font-size: 0.95rem; }
  .hero-stats { gap: 0; }
  .stat { padding: 0 14px; }
  .stat-num { font-size: 1.5rem; }
  /* .filters-section switches to position:static below (not sticky), so
     only the 60px site-header needs to be cleared here. */
  .about-section { padding: 56px 0; scroll-margin-top: 76px; }
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .drug-grid { grid-template-columns: 1fr; }
  .loading-state { grid-template-columns: 1fr; }
  .drug-card { padding: 20px; }
  .filters-row { flex-direction: column; }

  /* Filters: don't pin on phones — the stacked block is too tall and would
     cover the results while scrolling */
  .filters-section { position: static; }
  .drug-section { scroll-margin-top: 70px; }

  /* Therapy chips: one horizontally swipeable row instead of 3+ wrapped rows */
  .filter-group { width: 100%; flex-wrap: nowrap; align-items: flex-start; flex-direction: column; gap: 8px; }
  .filter-group-right { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
  .filter-chips {
    width: 100%; flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding-bottom: 6px;
  }
  .filter-chips::-webkit-scrollbar { display: none; }
  .filter-chips .chip {
    flex-shrink: 0; min-height: 40px;
    display: inline-flex; align-items: center;
  }
  .filter-chips .chip-overflow { display: inline-flex; align-items: center; }
  .filter-chips .chip-expand { display: none; }

  /* Prevent iOS auto-zoom on focus (triggers below 16px) */
  #searchInput { font-size: 16px; }

  /* Header — reduce padding so logo never clips on medium phones */
  .header-inner { padding: 0 16px; }
  .header-nav { gap: 16px; }

  /* Modal — slide up from bottom as a bottom sheet */
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
    margin: 0;
  }
  .modal-body { padding: 16px; clear: both; }
  .modal-close {
    top: 12px;
    margin: 12px 12px 0 0;
  }

  /* Drug header — tighten font sizes */
  .modal-brand { font-size: 1.45rem; line-height: 1.25; }
  .modal-generic { font-size: 0.88rem; margin-bottom: 10px; }
  .modal-indication { font-size: 0.85rem; }

  /* PSS block */
  .pss-block { padding: 16px; }
  .pss-block-header { flex-direction: column; gap: 6px; }

  /* Summary grid — single column */
  .summary-grid { grid-template-columns: 1fr; }

  /* Feature rows — ✓ and name share the first line, detail sits below
     the name (never under the ✓ column) */
  .feat-row { grid-template-columns: 18px 1fr; row-gap: 2px; padding: 10px 0; }
  .feat-name { font-size: 0.88rem; }
  .feat-detail { grid-column: 2; font-size: 0.83rem; }

  /* Quick-link buttons — full width, comfortable tap targets */
  .pss-quick-links { flex-direction: column; gap: 8px; }
  .pss-quick-links a { width: 100%; text-align: center; justify-content: center; }
}

/* ── RESPONSIVE (≤ 480px — small phones) ─────────────────────────────────── */
@media (max-width: 480px) {
  /* Tighter container padding on small phones */
  .container { padding: 0 14px; }
  .header-inner { padding: 0 14px; }

  /* Hero */
  .hero { padding: 36px 14px 32px; }
  .hero-badge { font-size: 0.72rem; padding: 5px 12px; }
  .hero-sub { font-size: 0.9rem; margin-bottom: 28px; }

  /* Stats — hide dividers (they break when row wraps on tiny screens) */
  .stat-div { display: none; }
  .stat { padding: 0 10px; }
  .stat-num { font-size: 1.3rem; }
  .stat-label { font-size: 0.68rem; }

  /* Header — hide "Open Source" nav label; show only the GitHub icon */
  .nav-github-label { display: none; }
  .header-nav { gap: 12px; }

  /* The full wordmark + "Front Desk Mode" toggle label + "About" link need
     ~443px on one line (no wrap is declared on .header-inner), so on every
     phone width they were overflowing the header and getting pushed
     off-screen to the right — completely invisible and untappable, taking
     both the Front Desk Mode toggle and the About link with them. Trim the
     lowest-priority pixels instead of wrapping the header to two lines
     (which would upset the 60px sticky-header height assumed elsewhere,
     e.g. .about-section's scroll-margin-top). */
  .logo-tld { display: none; }
  .header-nav .toggle-label {
    /* Visually hidden, not display:none — the checkbox still needs this
       text in its accessible name for screen reader users. */
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }

  /* Cards */
  .drug-card { padding: 16px; }
  .card-brand { font-size: 1.1rem; }

  /* About */
  .about-section { padding: 44px 0; }
  .about-text h2 { font-size: 1.6rem; }

  /* Modal even tighter */
  .modal-body { padding: 14px; }
  .modal-brand { font-size: 1.3rem; }
  .pss-block { padding: 14px; }
}

/* ── PRINT HANDOUT (screen) ──────────────────────────────────────────────── */
/* #printArea is populated via JS and stays hidden on screen — it only
   appears inside the @media print block below. */
.print-area { display: none; }

/* ── PRINT STYLESHEET ────────────────────────────────────────────────────── */
/* Toner-friendly, chrome-free handout. Deliberately NOT styled like the
   website: plain font stack, black-on-white, no icon fonts/emoji (all print
   labels are plain text — see js/app.js "PRINT HANDOUT" section). */
@media print {
  @page { margin: 1.3cm; }

  /* Hide every top-level section of the site (header, hero, filters, drug
     grid, modal, about, footer) — only the print handout remains. Because
     these are direct children of <body>, hiding them also hides everything
     nested inside (nav, search, buttons, footer links, etc). */
  body > *:not(#printArea) { display: none !important; }

  html, body {
    background: #fff !important;
    color: #000 !important;
  }

  #printArea.print-area {
    display: block !important;
    position: static;
    max-width: 100%;
    margin: 0;
    padding: 0;
  }

  /* Base size is deliberately compact (not tiny) — the goal is one printed
     page per drug even when a program lists many available features, so
     the sheet is genuinely self-sufficient and cheap to keep as paper. */
  .print-doc {
    font-family: Arial, Helvetica, 'Liberation Sans', sans-serif;
    font-size: 9.5pt;
    line-height: 1.35;
    color: #000;
    background: #fff;
    max-width: 100%;
    margin: 0 auto;
  }

  .print-doc-header { margin-bottom: 5px; }
  .print-doc-header h1 {
    font-size: 15pt; font-weight: 700; margin-bottom: 2px;
  }
  .print-date { font-size: 8pt; color: #333; }
  .print-payer-note { font-size: 8pt; color: #333; font-style: italic; margin-top: 2px; }

  .print-disclaimer {
    font-size: 7.5pt; color: #333; line-height: 1.35;
    border-bottom: 1px solid #000; padding-bottom: 6px; margin-bottom: 10px;
  }

  /* Each program is a clearly separated, bordered block. break-inside
     (+ the legacy page-break-inside for older engines) keeps a single
     program from splitting across a page boundary — a break between two
     different programs is fine. */
  .print-program {
    border: 1px solid #000;
    border-radius: 0;
    padding: 8px 10px;
    margin-bottom: 8px;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .print-program-name {
    font-size: 11.5pt; font-weight: 700; margin-bottom: 4px;
    break-after: avoid; page-break-after: avoid;
  }
  .print-coverage { font-size: 8pt; font-weight: 400; color: #333; }

  .print-contact { margin-bottom: 4px; }
  .print-contact-line { font-size: 9pt; margin-bottom: 1px; }
  .print-submission { font-style: italic; }

  /* Key Services — every available feature for this program, pulled from
     the same database the site uses, condensed to two columns so a
     patient can read what's on offer without visiting the website. */
  .print-features {
    margin-top: 5px; border-top: 1px dashed #000; padding-top: 5px;
    column-count: 2; column-gap: 16px;
  }
  .print-feat-line {
    font-size: 8pt; line-height: 1.3; margin-bottom: 3px;
    break-inside: avoid; page-break-inside: avoid;
  }
  .print-feat-cat {
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em;
  }

  .print-checklist { margin-top: 5px; border-top: 1px dashed #000; padding-top: 5px; }
  .print-checklist-title {
    font-size: 8.5pt; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.03em; margin-bottom: 3px;
  }
  .print-checklist-items { list-style: disc; padding-left: 16px; margin-bottom: 3px; column-count: 2; column-gap: 16px; }
  .print-checklist-items li { font-size: 8.5pt; margin-bottom: 1px; break-inside: avoid; page-break-inside: avoid; }
  .print-who { font-weight: 700; }
  .print-meta-line { font-size: 8.5pt; margin-top: 2px; }

  /* Shared blank area at the very bottom for staff to hand-write on after
     printing — never a data-entry field captured by the site. */
  .print-patient-notes { margin-top: 10px; }
  .print-notes-label {
    font-size: 9pt; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.03em; margin-bottom: 6px;
  }
  .print-notes-line {
    border-bottom: 1px solid #000;
    height: 20px;
  }

  /* Belt-and-suspenders: explicitly strip anything that could otherwise leak
     through via fixed positioning or z-index in some print engines. */
  .site-header, .hero, .filters-section, .drug-section,
  .modal-overlay, .about-section, .site-footer { display: none !important; }
}