/* ============================================================
   0PENRX design system
   One token set + shared components used across every view:
   Browse · Drug detail · Data Sources · Coupon Guide.
   ============================================================ */

/* ---- Fonts (self-hosted; no cross-origin Google Fonts request) ---- */
@font-face {
  font-family: 'Instrument Serif'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('fonts/instrument-serif-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Serif'; font-style: italic; font-weight: 400;
  font-display: swap; src: url('fonts/instrument-serif-italic-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans'; font-style: normal; font-weight: 300 600;
  font-display: swap; src: url('fonts/dm-sans-latin.woff2') format('woff2');
}

/* ---- Tokens ------------------------------------------------ */
:root, [data-theme="light"] {
  --bg:        #f4f9f8;
  --surface:   #ffffff;
  --surface-2: #eef6f5;
  --surface-3: #e2efed;
  --divider:   #d3e6e3;
  --border:    #bcdad6;
  --text:      #132e2b;
  --text-2:    #3d6b66;
  --text-3:    #47736d; /* WCAG 1.4.3: 5.33:1 on white, 4.52:1 on surface-3 (was #7aada8 at 2.5:1) */
  --primary:   #017a72;
  --primary-h: #015e57;
  --primary-l: #d6ecea;
  --accent:    #b83c00; /* 4.71:1 on accent-l (was #d94f0c at 3.42:1) */
  --accent-l:  #fce5d8;
  --gold:      #8a6400; /* 4.75:1 on gold-l (was #b78700 at 2.86:1) */
  --gold-l:    #fbf1cc;
  --good:      #0f6b2d; /* 5.49:1 on good-l (was #167a36 at 4.49:1) */
  --good-l:    #d6f0dd;
  --live:      #0b5cd0; /* 5.18:1 on live-l (was #0a6cf0 at 4.05:1) */
  --live-l:    #e2eefe;

  --shadow-sm: 0 1px 2px rgba(0,50,40,.06), 0 1px 3px rgba(0,50,40,.05);
  --shadow-md: 0 4px 14px rgba(0,50,40,.10);
  --shadow-lg: 0 18px 50px rgba(0,40,35,.20);

  --r-sm: .375rem; --r-md: .5rem; --r-lg: .75rem; --r-xl: 1rem; --r-full: 9999px;

  /* 4px-based spacing scale — every padding/gap/margin snaps to this. */
  --sp-1: .25rem; --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem;  --sp-10: 2.5rem; --sp-12: 3rem;
  --lh-tight: 1.3; --lh-normal: 1.6; --lh-loose: 1.8;

  --font-d: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-b: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-m: ui-monospace, 'SF Mono', 'Cascadia Code', monospace;

  --t-2xs: .62rem;
  --t-xs: clamp(.75rem, .72rem + .15vw, .82rem);
  --t-sm: clamp(.85rem, .8rem + .25vw, .95rem);
  --t-md: clamp(.98rem, .93rem + .25vw, 1.08rem);
  --t-lg: clamp(1.15rem, 1rem + .7vw, 1.45rem);
  --t-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  --t-hero: clamp(2.1rem, 1.2rem + 3vw, 3.5rem);

  --maxw: 1180px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --tr: 180ms var(--ease);
}

[data-theme="dark"] {
  --bg:        #0d1c1a;
  --surface:   #122120;
  --surface-2: #172b29;
  --surface-3: #1d3431;
  --divider:   #21413d;
  --border:    #2c4541;
  --text:      #d4e7e4;
  --text-2:    #7fb3ad;
  --text-3:    #6fa39c; /* WCAG 1.4.3: 5.23:1 on surface-2 (was #4a7d77 at 3.18:1) */
  --primary:   #34b9ae;
  --primary-h: #4cc8bd;
  --primary-l: #14302e;
  --accent:    #f0744a;
  --accent-l:  #2e1407;
  --gold:      #e0ad30;
  --gold-l:    #281d06;
  --good:      #45c067;
  --good-l:    #102a18;
  --live:      #5aa6ff;
  --live-l:    #0e2138;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,.42);
  --shadow-lg: 0 18px 50px rgba(0,0,0,.6);
}

/* WCAG 1.4.3: white on the dark theme's bright teal is 2.41:1; use dark text
   (7.26:1) on filled primary controls — the standard dark-mode pattern. */
[data-theme="dark"] .btn-pri,
[data-theme="dark"] .chip.on,
[data-theme="dark"] .copy-btn { color: #0d1c1a; }

/* ---- Reset ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; scroll-padding-top: 72px; /* WCAG 2.4.11: keep focused targets clear of the sticky header */ }
body {
  min-height: 100dvh; font-family: var(--font-b); font-size: var(--t-md);
  line-height: 1.6; color: var(--text); background: var(--bg);
  transition: background var(--tr), color var(--tr);
}
img, svg { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
::selection { background: var(--primary-l); color: var(--text); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--r-sm); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } html { scroll-behavior: auto !important; } }

/* Visually-hidden utility (screen-reader-only text) + skip link (WCAG 2.4.1). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 1rem; top: -100px; z-index: 300; background: var(--primary); color: #fff; font-weight: 600; padding: .6rem 1rem; border-radius: var(--r-md); transition: top .15s; }
.skip-link:focus { top: 1rem; }

/* ---- Privacy transparency notice (not a consent gate; never blocks content) -- */
.privacy-notice {
  position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%);
  z-index: 150; width: min(680px, calc(100% - 2rem));
  display: flex; align-items: center; gap: 1rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  padding: 1rem 1.15rem; animation: pn-in .25s ease-out;
}
@keyframes pn-in { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .privacy-notice { animation: none; } }
.pn-text { font-size: var(--t-sm); line-height: 1.55; color: var(--text-2); }
.pn-title { color: var(--text); font-weight: 700; }
.pn-text a { color: var(--primary); font-weight: 600; text-decoration: underline; }
.pn-ack { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 560px) {
  .privacy-notice { flex-direction: column; align-items: stretch; }
  .pn-ack { width: 100%; }
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 1.5rem; }
.mono { font-family: var(--font-m); }
[hidden] { display: none !important; }

/* ---- Header ------------------------------------------------ */
.hdr {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in oklab, var(--surface) 88%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--divider);
}
.hdr-in { max-width: var(--maxw); margin: 0 auto; padding: .6rem 1.5rem; display: flex; align-items: center; gap: 1rem; }
.logo { display: flex; align-items: center; gap: .55rem; font-family: var(--font-d); font-size: var(--t-lg); color: var(--primary); white-space: nowrap; }
.logo-txt { display: flex; flex-direction: column; line-height: 1.05; }
.logo-tag { font-family: var(--font-b); font-size: var(--t-xs); font-weight: 400; color: var(--text-3); white-space: nowrap; margin-top: 1px; }
.nav { display: flex; gap: .2rem; margin-left: .5rem; }
.ntab {
  padding: .38rem .85rem; border-radius: var(--r-md); font-size: var(--t-sm);
  font-weight: 500; color: var(--text-2); transition: background var(--tr), color var(--tr);
}
.ntab:hover { color: var(--text); background: var(--surface-2); }
.ntab.on { color: var(--primary-h); background: var(--primary-l); }
.hdr-r { display: flex; align-items: center; gap: .4rem; margin-left: auto; }

/* Persistent search for every page except the home page, which already leads with
   the full hero search — a second box there would just compete with it. This is a
   plain GET form to "/", so it needs no JS: the home page already reads ?q= on
   load. That keeps one search engine on the site instead of bolting a copy onto
   every page, and it still works with JS off. */
.hdr-search { position: relative; display: flex; align-items: center; }
.hdr-search-ico { position: absolute; left: .55rem; color: var(--text-3); pointer-events: none; }
.hdr-search-in {
  width: 190px; padding: .36rem .6rem .36rem 1.9rem;
  border: 1px solid var(--border); border-radius: var(--r-full);
  background: var(--surface-2); color: var(--text);
  font-family: var(--font-b); font-size: var(--t-sm);
}
.hdr-search-in::placeholder { color: var(--text-3); }
.hdr-search-in:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); }
@media (max-width: 900px) { .hdr-search-in { width: 132px; } }
.icon-btn {
  width: 36px; height: 36px; border-radius: var(--r-md); display: flex; align-items: center;
  justify-content: center; color: var(--text-2); border: 1px solid var(--border); transition: all var(--tr);
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }

/* ---- Hero -------------------------------------------------- */
.hero { padding: 3.25rem 1.5rem 1.25rem; text-align: center; max-width: 760px; margin: 0 auto; }
.hero h1 { font-family: var(--font-d); font-size: var(--t-hero); line-height: 1.08; margin-bottom: .6rem; letter-spacing: -.01em; }
.hero h1 em { color: var(--primary); font-style: italic; }
.hero p { font-size: var(--t-lg); color: var(--text-2); max-width: 54ch; margin: 0 auto .4rem; }
.hero .hero-sub { font-size: var(--t-md); color: var(--text-3); margin: 0 auto 1.75rem; }

/* ---- Search + autocomplete --------------------------------- */
.search { max-width: 640px; margin: 0 auto; position: relative; }
.search-in {
  width: 100%; padding: .95rem 1.25rem .95rem 3.25rem;
  border: 2px solid var(--primary); border-radius: var(--r-full);
  font-size: var(--t-lg); background: var(--surface); color: var(--text);
  box-shadow: var(--shadow-md); transition: box-shadow var(--tr);
}
.search-in:focus { outline: none; box-shadow: var(--shadow-lg), 0 0 0 4px color-mix(in oklab, var(--primary) 18%, transparent); }
.search-in:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.search-in::placeholder { color: var(--text-3); }
.search-ico { position: absolute; left: 1.15rem; top: 50%; transform: translateY(-50%); color: var(--primary); pointer-events: none; }
.search-clear { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); color: var(--text-3); width: 26px; height: 26px; border-radius: var(--r-full); display: none; align-items: center; justify-content: center; }
.search-clear:hover { background: var(--surface-2); color: var(--text); }
.search-clear.vis { display: flex; }

.sugg {
  position: absolute; top: calc(100% + .5rem); left: 0; right: 0; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  z-index: 60; max-height: 360px; overflow-y: auto; display: none; text-align: left;
}
.sugg.vis { display: block; }
.sugg-head { padding: .5rem .9rem; font-size: var(--t-xs); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); border-bottom: 1px solid var(--divider); }
.si { padding: .65rem .9rem; cursor: pointer; display: flex; align-items: center; gap: .7rem; transition: background var(--tr); border-bottom: 1px solid var(--divider); }
.si:last-child { border-bottom: none; }
.si:hover, .si.active { background: var(--surface-2); }
.si-main { flex: 1; min-width: 0; }
.si-name { font-weight: 600; font-size: var(--t-sm); }
.si-sub { font-size: var(--t-xs); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.si-price { font-weight: 700; color: var(--primary); font-size: var(--t-sm); white-space: nowrap; }

/* ---- Toolbar / filters ------------------------------------- */
/* Category filter — single-row horizontal scroll strip (all categories in one
   calm row; fades + arrows appear only where there is more to scroll). */
.filterstrip { max-width: var(--maxw); margin: 0 auto; padding: .55rem 1.5rem; display: flex; align-items: center; gap: .3rem; border-bottom: 1px solid var(--divider); }
.fs-track {
  display: flex; gap: .4rem; align-items: center; flex: 1; min-width: 0;
  overflow-x: auto; scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
  scroll-padding-inline: 1.5rem; /* keep focused/active chips clear of the fade edges */
  scrollbar-width: none; /* Firefox */
  /* fade both edges; JS drops the fade on whichever edge is fully scrolled */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 1.5rem, #000 calc(100% - 1.5rem), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 1.5rem, #000 calc(100% - 1.5rem), transparent 100%);
}
.fs-track::-webkit-scrollbar { display: none; } /* Chrome/Safari */
.fs-track.at-start { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent 100%); mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent 100%); }
.fs-track.at-end { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 1.5rem, #000 100%); mask-image: linear-gradient(to right, transparent 0, #000 1.5rem, #000 100%); }
.fs-track.at-start.at-end { -webkit-mask-image: none; mask-image: none; } /* fits with no scroll */
.fs-arrow {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: var(--r-full);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-2);
  font-size: 1.25rem; line-height: 1; cursor: pointer; transition: all var(--tr);
}
.fs-arrow:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-l); }
@media (prefers-reduced-motion: reduce) { .fs-track { scroll-behavior: auto; } }

.chip {
  flex: 0 0 auto; padding: .375rem .8rem; border-radius: var(--r-full); font-size: var(--t-sm); font-weight: 500;
  border: 1px solid transparent; background: var(--surface-2); color: var(--text-2); transition: all var(--tr); white-space: nowrap;
}
.chip:hover { background: var(--primary-l); color: var(--primary); }
.chip.on { background: var(--primary); border-color: var(--primary); color: #fff; }

/* Content-page utilities — replace repeated inline styles for a consistent system */
.drug-page.wide { max-width: 1000px; }
.price-note.good { border-left-color: var(--good); }
.cell-sub { color: var(--text-3); font-size: var(--t-xs); }
.inline-link { color: var(--primary); font-weight: 600; }
.inline-link:hover { text-decoration: underline; }
.note-sm { font-size: var(--t-sm); color: var(--text-2); line-height: 1.7; }
.src-list { font-size: var(--t-sm); color: var(--text-2); line-height: 1.8; padding-left: 1.1em; list-style: disc; }
.src-list li { margin-bottom: .25rem; }

.main { max-width: var(--maxw); margin: 0 auto; padding: var(--sp-6); }

/* ---- Section header (shared by all views) ------------------ */
/* Default: heading + description stack, left-aligned (no stranded heading). */
.sec-head { margin-bottom: var(--sp-5); }
/* Only when the head carries a controls cluster (e.g. the sort dropdown) does it
   become a two-column toolbar row. */
.sec-head:has(.sec-head-r) { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3); }
.sec-head h1, .sec-head h2 { font-family: var(--font-d); font-size: var(--t-xl); letter-spacing: -.01em; }
.sec-head.sub-head h2 { font-size: var(--t-lg); }
.mt-section { margin-top: var(--sp-8); }
.sec-head .sub { font-size: var(--t-sm); color: var(--text-2); max-width: 62ch; margin-top: var(--sp-2); }
.sec-head-r { display: flex; gap: .6rem; align-items: center; }
.count { font-size: var(--t-sm); color: var(--text-2); }
.select { padding: .38rem .8rem; border: 1px solid var(--border); border-radius: var(--r-md); font-size: var(--t-sm); background: var(--surface); color: var(--text); }

/* ---- Card grid + drug card --------------------------------- */
/* Exactly two equal columns side by side; equal heights come from the grid row
   stretch + the card's flex column (foot pinned to the bottom). Collapses to a
   single column on small screens. */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
@media (max-width: 600px) { .grid { grid-template-columns: 1fr; } }
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl);
  padding: var(--sp-4); box-shadow: var(--shadow-sm); cursor: pointer;
  display: flex; flex-direction: column; gap: .6rem; transition: box-shadow var(--tr), transform var(--tr), border-color var(--tr);
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--primary); }
.card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.card-name { font-family: var(--font-d); font-size: var(--t-lg); line-height: 1.18; }
/* The name is a real link to /drugs/<slug>/ for crawlers; visually unchanged
   (the SPA intercepts the click and opens the detail panel instead). */
.card-name-link { color: inherit; text-decoration: none; }
.card-gen { font-size: var(--t-xs); color: var(--text-2); margin-top: .12rem; }
.card-co { font-size: var(--t-xs); color: var(--text-3); }
/* A caveat that changes what the price MEANS (program closed, shortage, intro
   pricing) sits directly under the price as its own badge — deliberately not an
   italic aside, which the eye skips on a dense card. Gold = read this before you
   trust the number; grey = the product itself is gone. */
.card-flag { margin-top: .4rem; }
.flag { display: inline-block; padding: .16rem .5rem; border-radius: var(--r-full); font-size: var(--t-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; background: var(--gold-l); color: var(--gold); }
.flag-discontinued { background: var(--surface-3); color: var(--text-2); }

.badge { flex-shrink: 0; padding: .2rem .55rem; border-radius: var(--r-full); font-size: var(--t-xs); font-weight: 700; }
.badge.hi { background: var(--good-l); color: var(--good); }
.badge.md { background: var(--gold-l); color: var(--gold); }
.badge.lo { background: var(--surface-3); color: var(--text-2); }
.price-row { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.price { font-size: var(--t-xl); font-weight: 700; color: var(--primary); line-height: 1; }
.price-was { font-size: var(--t-sm); color: var(--text-3); text-decoration: line-through; }
.price-lbl { font-size: var(--t-xs); color: var(--text-2); margin-top: .15rem; }
.tags { display: flex; gap: .3rem; flex-wrap: wrap; }
.tag { font-size: var(--t-xs); padding: .18rem .45rem; border-radius: var(--r-sm); font-weight: 500; background: var(--surface-2); color: var(--text-2); }
.tag.grx { background: #e0f0fb; color: #00467f; }
.tag.cpd { background: #d0f0ee; color: #006a62; }
.tag.mfr { background: #f0e8ff; color: #6000b0; }
[data-theme="dark"] .tag.grx { background: #08182a; color: #6bb0ec; }
[data-theme="dark"] .tag.cpd { background: #08201f; color: #3ab8b0; }
[data-theme="dark"] .tag.mfr { background: #190a2e; color: #c489ff; }
.card-foot { display: flex; gap: .4rem; margin-top: auto; padding-top: .15rem; flex-wrap: wrap; }
/* Compact buttons inside cards (still ≥24px targets per WCAG 2.5.8). */
.card-foot .btn { padding: .34rem .7rem; font-size: var(--t-xs); }
.btn { padding: .48rem .9rem; border-radius: var(--r-md); font-size: var(--t-sm); font-weight: 600; transition: all var(--tr); display: inline-flex; align-items: center; gap: .35rem; }
.btn-pri { background: var(--primary); color: #fff; }
.btn-pri:hover { background: var(--primary-h); }
.btn-sec { border: 1px solid var(--border); color: var(--text-2); }
.btn-sec:hover { border-color: var(--primary); color: var(--primary); }

/* ---- States: empty / error --------------------------------- */
.state { text-align: center; padding: 4rem 1.5rem; color: var(--text-2); }
.state svg { margin: 0 auto 1rem; color: var(--text-3); }
.state h3 { color: var(--text); margin-bottom: .4rem; font-family: var(--font-d); font-size: var(--t-lg); }
.state p { max-width: 62ch; margin: 0 auto; }
/* Low-cost program fallback links inside the search empty state. */
.empty-programs { display: block; margin-top: .8rem; font-size: var(--t-sm); }
.empty-programs a { color: var(--primary); font-weight: 600; text-decoration: underline; }
.spinner { width: 16px; height: 16px; border: 2px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; vertical-align: -2px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Detail drawer/modal ----------------------------------- */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 200; display: flex; align-items: flex-end; justify-content: center; opacity: 0; pointer-events: none; visibility: hidden; transition: opacity .2s, visibility 0s .2s; }
.overlay.open { opacity: 1; pointer-events: all; visibility: visible; transition: opacity .2s, visibility 0s 0s; }
@media (min-width: 640px) { .overlay { align-items: center; } }
.panel {
  background: var(--surface); border-radius: var(--r-xl) var(--r-xl) 0 0; padding: 2rem 1.5rem 1.5rem;
  max-width: 640px; width: 100%; max-height: 92dvh; overflow-y: auto; box-shadow: var(--shadow-lg);
  position: relative; transform: translateY(50px); transition: transform .26s var(--ease);
}
@media (min-width: 640px) { .panel { border-radius: var(--r-xl); transform: scale(.97) translateY(16px); } }
.overlay.open .panel { transform: translateY(0) scale(1); }
.panel-close { position: absolute; top: .9rem; right: .9rem; width: 32px; height: 32px; border-radius: var(--r-full); display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--text-2); }
.panel-close:hover { background: var(--surface-3); color: var(--text); }
.p-name { font-family: var(--font-d); font-size: var(--t-xl); margin-bottom: .2rem; padding-right: 2.5rem; line-height: 1.15; }
.p-sub { color: var(--text-2); font-size: var(--t-sm); margin-bottom: 1.1rem; }
.p-hero { background: var(--primary-l); border-radius: var(--r-lg); padding: 1.1rem 1.2rem; margin-bottom: 1.1rem; display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.p-big { font-family: var(--font-d); font-size: var(--t-hero); font-weight: 700; color: var(--primary); line-height: 1; }
.p-hero-sub { font-size: var(--t-xs); color: var(--primary); opacity: .85; }
.p-hero-vs { font-size: var(--t-sm); color: var(--text-2); }

/* sub-section label shared across panel + pages */
.label { font-size: var(--t-xs); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); margin: 1rem 0 .55rem; display: flex; align-items: center; gap: .5rem; }

/* a generic "where to fill" row */
.row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem .85rem; border: 1px solid var(--divider); border-radius: var(--r-lg); margin-bottom: .4rem; transition: border-color var(--tr); }
.row:hover { border-color: var(--primary); }
.row-l { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.row-name { font-weight: 600; font-size: var(--t-sm); }
.row-note { font-size: var(--t-xs); color: var(--text-2); }
.row-price { font-weight: 700; color: var(--primary); white-space: nowrap; }

/* ---- "Live data" block (sourced from public APIs) ---------- */
.live-badge { font-size: var(--t-xs); font-weight: 700; padding: .12rem .45rem; border-radius: var(--r-full); background: var(--live-l); color: var(--live); letter-spacing: .02em; text-transform: none; }
.live-box { border: 1px solid var(--divider); border-radius: var(--r-lg); padding: var(--sp-4); margin-bottom: var(--sp-2); background: var(--surface-2); }
.kv { display: grid; grid-template-columns: minmax(110px, auto) 1fr; gap: .3rem .9rem; font-size: var(--t-sm); }
.kv dt { color: var(--text-2); }
.kv dd { font-weight: 500; word-break: break-word; }
.src-link { font-size: var(--t-xs); color: var(--primary); display: inline-flex; align-items: center; gap: .25rem; margin-top: .6rem; }
.src-link:hover { text-decoration: underline; }
.live-note { font-size: var(--t-xs); color: var(--text-2); margin-top: .5rem; }
.live-err { font-size: var(--t-sm); color: var(--accent); }
/* Empty-result disclaimer: says WHY a live lookup returned nothing. Informational, not
   alarming — an empty result is the site refusing to guess, which is the point. The warn
   variant (a temporary connection failure) borrows the gold accent to read as "our side,
   transient", distinct from the neutral "no verified record" case. */
.live-disclaimer { display: flex; gap: .55rem; align-items: flex-start; font-size: var(--t-sm); line-height: var(--lh-normal); color: var(--text-2); }
.live-disclaimer .ico { flex: 0 0 auto; margin-top: .1rem; color: var(--primary); }
.live-disclaimer strong { color: var(--text); }
.live-disclaimer--warn .ico { color: var(--gold); }
.live-more { margin-top: .8rem; padding-top: .65rem; border-top: 1px solid var(--border); display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.live-more-lbl { font-size: var(--t-xs); color: var(--text-2); white-space: nowrap; }
.live-more-link { font-size: var(--t-xs); color: var(--primary); background: var(--surface-2); padding: .2rem .55rem; border-radius: 4px; text-decoration: none; white-space: nowrap; }
.live-more-link:hover { text-decoration: underline; }

/* ---- Coupon block ------------------------------------------ */
.coupon { background: var(--surface-2); border: 1px dashed var(--border); border-radius: var(--r-lg); padding: var(--sp-4); margin-top: var(--sp-4); }
.coupon-t { font-size: var(--t-md); font-weight: 700; color: var(--text); margin-bottom: .55rem; }
.coupon-stats { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .85rem; }
.stat-chip { font-size: var(--t-xs); font-weight: 500; color: var(--text-2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-full); padding: .2rem .6rem; }
.coupon-note { font-size: var(--t-sm); color: var(--text-2); margin-bottom: .7rem; }
.coupon-link { margin-top: .55rem; width: 100%; justify-content: center; }
.cfields { display: grid; grid-template-columns: repeat(2, 1fr); gap: .4rem; }
.cf { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: .5rem .75rem; }
.cf-l { font-size: var(--t-xs); color: var(--text-3); margin-bottom: .12rem; }
.cf-v { font-weight: 700; font-size: var(--t-sm); letter-spacing: .03em; font-family: var(--font-m); }
.cf-v.na { font-family: var(--font-b); font-weight: 400; font-style: italic; letter-spacing: 0; font-size: var(--t-xs); color: var(--text-3); }
.copy-btn { margin-top: .65rem; width: 100%; padding: .55rem; border-radius: var(--r-md); background: var(--primary); color: #fff; font-weight: 600; font-size: var(--t-sm); transition: background var(--tr); display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.copy-btn:hover { background: var(--primary-h); }
.ico { flex-shrink: 0; vertical-align: -.15em; }
.p-acts { display: flex; gap: .4rem; margin-top: .9rem; flex-wrap: wrap; }
/* Live-lookup cost hero: lead with the price actions, not clinical data. */
.p-hero-live { flex-direction: column; align-items: stretch; gap: .8rem; }
.p-acts-lead { margin-top: 0; }
.p-acts-lead .btn { flex: 1 1 140px; justify-content: center; padding: .6rem 1rem; }

.disclaimer-box { padding: var(--sp-4); background: var(--surface-3); border-radius: var(--r-lg); font-size: var(--t-sm); color: var(--text-2); line-height: var(--lh-loose); margin-top: var(--sp-5); }
.disclaimer-box strong { color: var(--text); }

/* ---- Data Sources page ------------------------------------- */
.panel-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-xl); padding: var(--sp-5); margin-bottom: var(--sp-5); }
.src-grid { display: flex; flex-direction: column; gap: var(--sp-4); }
.src-group { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)); gap: var(--sp-4); }
.src-group-label { font-size: var(--t-md); font-weight: 700; color: var(--text); margin-top: var(--sp-2); }
.src-group-label:first-child { margin-top: 0; }
.src-group-note { font-size: var(--t-xs); font-weight: 500; color: var(--text-3); }
.src-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: var(--sp-4); display: flex; flex-direction: column; gap: .45rem; transition: border-color var(--tr); }
.src-card:hover { border-color: var(--primary); }
.src-name { font-weight: 600; font-size: var(--t-sm); display: flex; align-items: center; gap: .5rem; }
.src-status { font-size: var(--t-xs); padding: .15rem .5rem; border-radius: var(--r-full); font-weight: 600; align-self: flex-start; }
.src-status.f { background: var(--good-l); color: var(--good); }
.src-status.k { background: var(--gold-l); color: var(--gold); }
.src-status.a { background: var(--accent-l); color: var(--accent); }
.src-desc { font-size: var(--t-xs); color: var(--text-2); line-height: 1.55; }
.src-url { font-size: var(--t-xs); color: var(--primary); word-break: break-all; }
.src-live { font-size: var(--t-xs); font-weight: 600; }
.src-live.ok { color: var(--good); }
.src-live.down { color: #b00020; font-weight: 700; }
[data-theme="dark"] .src-live.down { color: #ff8a80; }
.src-live.checking { color: var(--text-3); }

.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg); }
/* Fixed layout so every data column is equal-width instead of sizing to content
   (which made the columns visibly uneven); the row-header column is narrower. */
table.t { width: 100%; border-collapse: collapse; font-size: var(--t-sm); table-layout: fixed; }
table.t th:first-child, table.t td:first-child { width: 16%; }
table.t td { overflow-wrap: anywhere; }
/* Uniform cell rhythm: same padding, top-aligned, with vertical column dividers
   so a multi-column comparison reads as a grid instead of a wall of text. */
table.t th, table.t td { padding: .8rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--divider); }
table.t th:not(:first-child), table.t td:not(:first-child) { border-left: 1px solid var(--divider); }
/* Column headers: accented and heavier, anchored to the bottom of the header row. */
table.t thead th, table.t thead td { background: var(--surface-2); border-bottom: 2px solid var(--border); vertical-align: bottom; }
table.t thead th { font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--primary); }
/* Row-header spine: the left label column is a solid, distinct band. */
table.t tbody th { font-size: var(--t-sm); font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--text); background: var(--surface-2); }
/* Zebra striping on data cells so each row reads as its own band. */
table.t tbody tr:nth-child(even) td { background: color-mix(in oklab, var(--surface-2) 45%, transparent); }
table.t tbody tr:last-child th, table.t tbody tr:last-child td { border-bottom: none; }
table.t tbody tr:hover td { background: var(--surface-3); }
table.t a { color: var(--primary); font-weight: 600; }
table.t a:hover { text-decoration: underline; }
/* Key figures/terms wrapped in <strong> in a cell get full-weight emphasis. */
table.t td strong { color: var(--text); font-weight: 700; }

/* Answer-first cell: a bold lead token (a figure or Yes/No), then one muted
   detail line — so the eye catches the answer without reading the whole cell. */
.ans { display: block; font-weight: 700; font-size: 1.02rem; color: var(--text); line-height: 1.25; }
.ans-sub { display: block; font-size: var(--t-xs); color: var(--text-2); margin-top: .2rem; line-height: var(--lh-normal); }
/* Status pills encode valence so a row scans as a colour pattern, not grey words. */
.pill { display: inline-block; font-size: var(--t-xs); font-weight: 700; padding: .1rem .5rem; border-radius: var(--r-full); margin: 0 .45rem .12rem 0; }
.pill-yes { background: var(--good-l); color: var(--good); }
.pill-no { background: var(--surface-3); color: var(--text-3); }
.pill-part { background: var(--gold-l); color: var(--gold); }

/* Below 720px a 4-column comparison table gets too cramped to read (and clips), so
   stack each row into a self-contained card: the row-header question is the card
   title and every cell is labelled with its column via data-col. */
@media (max-width: 720px) {
  table.t, table.t tbody, table.t tr, table.t th, table.t td { display: block; }
  table.t th:first-child, table.t td:first-child { width: auto; }
  table.t thead { display: none; }
  table.t tbody tr { border: 1px solid var(--border); border-radius: var(--r-lg); margin-bottom: var(--sp-3); overflow: hidden; }
  table.t tbody tr:hover td { background: transparent; }
  table.t tbody tr:nth-child(even) td { background: transparent; }
  table.t tbody th { background: var(--surface-2); font-size: var(--t-md); padding: .65rem .9rem; border-bottom: 1px solid var(--divider); }
  table.t tbody td { border-left: none; border-bottom: 1px solid var(--divider); }
  table.t tbody tr td:last-child { border-bottom: none; }
  table.t tbody td::before { content: attr(data-col); display: block; font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: .04em; color: var(--primary); font-weight: 700; margin-bottom: .25rem; }
}

/* ---- User-state router ------------------------------------- */
/* A decision-first entry: the reader picks their situation and is sent to the
   right route (a section on this page or another page) before the comparison
   tables. Cards, not table cells, so it stays a nav pattern — no duplicated data. */
.router { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: var(--sp-3); margin: var(--sp-4) 0 var(--sp-5); }
.route-card { display: flex; flex-direction: column; padding: .8rem .95rem; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.route-card:hover { border-color: var(--primary); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.route-q { font-weight: 700; font-size: var(--t-sm); color: var(--text); }
.route-a { font-size: var(--t-xs); color: var(--text-2); margin-top: .3rem; line-height: var(--lh-normal); }
.route-go { font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: .04em; color: var(--primary); font-weight: 700; margin-top: .55rem; }

/* ---- Related-medication links (static drug pages) ----------- */
.rel-links { max-width: 720px; margin: var(--sp-6) auto 0; padding: 0 var(--sp-5); }
.rel-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
.rel-links li a { color: var(--primary); font-weight: 600; text-decoration: none; }
.rel-links li a:hover { text-decoration: underline; }
.rel-gen { font-size: var(--t-xs); color: var(--text-3); }

/* ---- Visible FAQ (details/summary; backs the FAQPage schema) - */
.faq details { border: 1px solid var(--border); border-radius: var(--r-lg); padding: .65rem .9rem; margin-bottom: var(--sp-2); background: var(--surface); }
.faq summary { font-weight: 700; font-size: var(--t-sm); cursor: pointer; color: var(--text); }
.faq details p { margin: .5rem 0 0; font-size: var(--t-sm); color: var(--text-2); line-height: var(--lh-normal); }

/* ---- Coupon Guide page ------------------------------------- */
.coupon-list { max-width: 640px; display: flex; flex-direction: column; gap: var(--sp-4); }

/* ---- Footer ------------------------------------------------ */
footer { margin-top: var(--sp-12); padding: var(--sp-8) var(--sp-6); background: var(--surface); border-top: 1px solid var(--divider); }
.foot { max-width: var(--maxw); margin: 0 auto; display: flex; flex-direction: column; gap: var(--sp-5); }
.foot-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.foot-brand { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.foot-logo { font-family: var(--font-d); font-size: var(--t-lg); color: var(--primary); }
.foot-tag { font-size: var(--t-sm); color: var(--text-3); }
.foot-links { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; font-size: var(--t-sm); }
.foot-links-l { color: var(--text-3); }
.foot-links a { color: var(--primary); }
.foot-links a:hover { text-decoration: underline; }
.foot-legal { border-top: 1px solid var(--divider); padding-top: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); max-width: 92ch; }
.foot-legal p { font-size: var(--t-xs); color: var(--text-3); line-height: var(--lh-normal); }
.foot-copy { font-size: var(--t-xs); color: var(--text-3); }

/* No-JS catalog fallback (inside <noscript>) — only ever shown when JavaScript
   is off; the JS app renders the interactive grid instead. Kept readable. */
.seo-catalog { margin-top: var(--sp-4); color: var(--text); }
.seo-catalog h2 { margin: 0 0 var(--sp-2); }
.seo-catalog p { color: var(--text-2); margin: 0 0 var(--sp-3); }
.seo-catalog ul { margin: 0; padding-left: 1.2em; line-height: 1.7; }
.seo-catalog li { margin-bottom: .25rem; }

/* Per-drug static page (/drugs/<slug>/) — the same detail content as the modal,
   rendered as a centered page card (no overlay, no transform). */
.drug-back { display: inline-block; margin: var(--sp-4) 0 0 var(--sp-4); color: var(--text-2); text-decoration: none; font-size: var(--t-sm); }
.drug-back:hover { color: var(--primary); }
.drug-page-wrap { display: flex; justify-content: center; padding: var(--sp-4) var(--sp-4) var(--sp-6); }
.drug-page { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 2rem 1.5rem 1.5rem; max-width: 640px; width: 100%; box-shadow: var(--shadow-lg); }


/* ============================================================
   DASHBOARD VIEW EXTENSION
   Dense operational UI: Linear + Vercel + NOC fusion.
   Uses only tokens defined in the root token set.
   No overrides of existing shared rules.
   ============================================================ */

/* ---- Dashboard full-bleed breakout -------------------------
   #view-dashboard sits inside .main which has max-width and
   padding. Negative margins let the db-layout span full width.
   ----------------------------------------------------------- */
#view-dashboard {
  margin-left: calc(-1 * var(--sp-6));
  margin-right: calc(-1 * var(--sp-6));
  margin-top: calc(-1 * var(--sp-6));
}

/* ---- Layout ------------------------------------------------ */
.db-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 0;
  min-height: calc(100dvh - 52px);
  align-items: start;
}

.db-sidebar {
  border-right: 1px solid var(--divider);
  background: var(--surface);
  position: sticky;
  top: 52px;
  max-height: calc(100dvh - 52px);
  overflow-y: auto;
  flex-shrink: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--divider) transparent;
}
.db-sidebar::-webkit-scrollbar { width: 4px; }
.db-sidebar::-webkit-scrollbar-track { background: transparent; }
.db-sidebar::-webkit-scrollbar-thumb { background: var(--divider); border-radius: 2px; }

.db-main {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}

/* ---- Section container (sidebar blocks) -------------------- */
.db-section {
  border-bottom: 1px solid var(--divider);
  padding: 12px 16px;
}
.db-section:last-child { border-bottom: none; }

/* ---- KPI rail ---------------------------------------------- */
.db-kpi-rail {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  gap: 1px;
  background: var(--divider);
  border-bottom: 1px solid var(--divider);
  scrollbar-width: none;
}
.db-kpi-rail::-webkit-scrollbar { display: none; }

.db-kpi {
  background: var(--surface);
  flex-shrink: 0;
  min-width: 130px;
  padding: 12px 16px;
  cursor: default;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.db-kpi-num {
  font-size: 22px;
  font-family: var(--font-m);
  font-variant-numeric: tabular-nums;
  color: var(--text);
  font-weight: 700;
  line-height: 1;
}

.db-kpi-lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-3);
  font-weight: 600;
  margin-top: 4px;
}

.db-kpi-delta {
  font-size: 11px;
  display: inline-block;
  margin-top: 2px;
  font-family: var(--font-m);
  font-variant-numeric: tabular-nums;
}
.db-kpi-delta.ok   { color: var(--good); }
.db-kpi-delta.warn { color: var(--gold); }
.db-kpi-delta.off  { color: var(--text-3); }

/* ---- Sidebar: section header ------------------------------- */
.db-sidebar-head {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-3);
  font-weight: 600;
  padding: 12px 16px 8px;
  border-bottom: 1px solid var(--divider);
}

/* ---- Sidebar: source rows ---------------------------------- */
.db-source-list { padding: 0; }

.db-source-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-bottom: 1px solid var(--divider);
  min-height: 36px;
}
.db-source-row:last-child { border-bottom: none; }

.db-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
.db-dot.ok       { background: var(--good); }
.db-dot.warn     { background: var(--gold); }
.db-dot.err      { background: var(--accent); }
.db-dot.off      { background: var(--text-3); }
.db-dot.checking { background: var(--text-3); animation: db-pulse 1s ease infinite; }

@keyframes db-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .3; }
}

.db-source-name {
  font-size: 12px;
  color: var(--text);
  flex: 1;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.db-latency {
  font-size: 11px;
  font-family: var(--font-m);
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
  white-space: nowrap;
  flex-shrink: 0;
}

.db-source-status-txt {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.4;
}
.db-source-status-txt.ok   { color: var(--good); }
.db-source-status-txt.warn { color: var(--gold); }
.db-source-status-txt.err  { color: var(--accent); }
.db-source-status-txt.off  { color: var(--text-3); }

/* ---- Main: header toolbar ---------------------------------- */
.db-main-head {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-3);
  font-weight: 600;
  padding: 8px 16px;
  border-bottom: 1px solid var(--divider);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--surface);
  min-height: 44px;
}

/* ---- Search input (dashboard) ------------------------------ */
.db-search {
  height: 28px;
  width: 240px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: 12px;
  font-family: var(--font-b);
  background: var(--bg);
  color: var(--text);
  outline: none;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  transition: border-color var(--tr), background var(--tr);
}
.db-search:focus { border-color: var(--primary); background: var(--surface); }
.db-search:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.db-search::placeholder { color: var(--text-3); }

.db-count-lbl {
  font-size: 11px;
  color: var(--text-3);
  white-space: nowrap;
  font-family: var(--font-m);
  font-variant-numeric: tabular-nums;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

/* ---- Drug catalog table ------------------------------------ */
.db-table-wrap { overflow-x: auto; flex: 1; }

.db-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.db-table thead tr {
  background: var(--surface-2);
  border-bottom: 2px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1;
}

.db-table th {
  padding: 7px 12px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-3);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  text-align: left;
  transition: color var(--tr);
  border-bottom: none;
}
.db-table th:hover { color: var(--text-2); }
.db-table th.sorted { color: var(--primary); }

.db-table th.r,
.db-table td.r { text-align: right; }

.db-table tbody tr {
  border-bottom: 1px solid var(--divider);
  cursor: pointer;
  transition: background 80ms;
}
.db-table tbody tr:last-child { border-bottom: none; }
.db-table tbody tr:hover td { background: var(--surface-2); }

.db-table td {
  padding: 7px 12px;
  vertical-align: middle;
  color: var(--text);
  border-radius: 0;
  white-space: nowrap;
}
.db-table td.name-cell,
.db-table td.gen-cell { white-space: normal; max-width: 200px; }
.db-table td.name-cell { font-weight: 500; font-size: 13px; }
.db-table td.gen-cell  { font-size: 12px; color: var(--text-2); }
.db-table td.mono      { font-family: var(--font-m); font-variant-numeric: tabular-nums; }
.db-table td.dim       { color: var(--text-3); font-size: 12px; }

.db-table .badge { border-radius: var(--r-sm); padding: .12rem .4rem; font-size: 11px; }

/* In the table: green = cash coupon (GoodRx), purple = Mfr program. Makes them immediately distinct. */
.db-table .tag.grx { color: var(--good); background: var(--good-l); }
.db-table .tag.mfr { color: #c489ff; background: #190a2e; }

.db-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--text-3);
  font-size: 13px;
}

.db-sort-arrow { font-size: 10px; opacity: .7; }

/* ---- Coverage mini-bars (sidebar) -------------------------- */
.db-cov-section { padding: 8px 0 4px; }

.db-cov-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
}
.db-cov-row:last-child { margin-bottom: 0; }

.db-cov-lbl {
  font-size: 11px;
  color: var(--text-2);
  width: 110px;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.db-cov-bar-wrap {
  flex: 1;
  height: 5px;
  background: var(--surface-3);
  border-radius: 3px;
  overflow: hidden;
}

.db-cov-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 3px;
  transition: width .5s ease;
}

.db-cov-num {
  font-size: 11px;
  font-family: var(--font-m);
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
  width: 24px;
  text-align: right;
  flex-shrink: 0;
}

/* ---- Responsive -------------------------------------------- */
@media (max-width: 900px) {
  .db-layout { grid-template-columns: 1fr; }
  .db-sidebar {
    border-right: none;
    border-bottom: 1px solid var(--divider);
    position: static;
    max-height: none;
    overflow-y: visible;
  }
  .db-search { width: 180px; }
}

@media (max-width: 600px) {
  #view-dashboard { margin-left: -1rem; margin-right: -1rem; margin-top: -1rem; }
  .db-table td.gen-cell,
  .db-table th[data-col='generic'] { display: none; }
  .db-search { width: 120px; }
}

/* ── Catalog status badges ─────────────────────────────────────────── */
.status-badge {
  display: inline-block;
  font: 600 10px/1 var(--font-m);
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--r-sm);
  margin: var(--sp-2) 0 var(--sp-3);
}
.status-limited  { background: #2a1a00; color: #f5a623; border: 1px solid #6b3f00; }
.status-archived { background: #1a0000; color: #e05050; border: 1px solid #5a1a1a; }

/* ── Price notes & eligibility warnings ─────────────────────────────── */
.price-note {
  font: 400 12px/1.5 var(--font-b);
  color: var(--text-3);
  margin: var(--sp-2) 0 var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-2);
  border-left: 2px solid var(--text-3);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.eligibility-warn {
  font: 500 12px/1.5 var(--font-b);
  color: #f5a623;
  background: #1c1200;
  border: 1px solid #6b3f00;
  border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-3);
  margin: var(--sp-2) 0 var(--sp-3);
}

/* ---- Responsive -------------------------------------------- */
@media (max-width: 720px) { .logo-tag { display: none; } }
@media (max-width: 600px) {
  /* Nav becomes a full-width horizontally-scrollable strip (not hidden), so every
     section stays reachable on phones — previously only the footer linked them. */
  .hdr-in { flex-wrap: wrap; padding: .55rem 1rem; }
  .nav {
    order: 3; width: 100%; margin-left: 0; gap: .3rem;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding-bottom: .1rem;
  }
  .nav::-webkit-scrollbar { display: none; }
  .ntab { flex: 0 0 auto; white-space: nowrap; }
  /* Row 1 is logo + hdr-r once .nav drops to its own strip, so let the search
     take whatever width is left rather than a fixed one that overflows at 360px. */
  .hdr-r { flex: 1; min-width: 0; }
  .hdr-search { flex: 1; min-width: 0; }
  .hdr-search-in { width: 100%; min-width: 0; }
  .hero { padding: 2rem 1rem 1rem; }
  .main, .wrap { padding-left: 1rem; padding-right: 1rem; }
  .cfields { grid-template-columns: 1fr 1fr; }
}