/* ============================================================
   eCARA — styles
   Brand: deep navy + clinical white + tier-graded accents
   ============================================================ */

:root {
  --c-bg: #f5f7fb;
  --c-surface: #ffffff;
  --c-surface-2: #f0f3f8;
  --c-border: #d6dbe4;
  --c-border-strong: #aab3c2;
  /* eCARA brand palette (navy + teal). Rebrand of the Interaction Atlas blues:
     the primary/ink navy is eCARA #1B2A4A and the accent is eCARA teal-deep
     #1E7A73 (AA on light surfaces). --accent (tia_consumer.css) tracks --c-brand-2. */
  --c-text: #1b2a4a;
  --c-text-muted: #4b5567;
  --c-text-soft: #6b7280;
  --c-brand: #1b2a4a;
  --c-brand-2: #1e7a73;
  --c-brand-soft: #e6f4f2;
  --c-link: #1e7a73;

  --c-tier-1: #2e8b57;
  --c-tier-2: #c98a00;
  --c-tier-3: #d97706;
  --c-tier-4: #c2410c;
  --c-tier-5: #991b1b;
  --c-tier-6: #581c87;

  --c-tier-1-bg: #e8f5ee;
  --c-tier-2-bg: #fef5e0;
  --c-tier-3-bg: #fef0d8;
  --c-tier-4-bg: #fde2cf;
  --c-tier-5-bg: #fbd5d5;
  --c-tier-6-bg: #ede0fa;

  --c-emergency: #b91c1c;
  --c-emergency-strong: #7f1d1d;

  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;

  --shadow-sm: 0 1px 2px rgba(27,42,74,0.06);
  --shadow-md: 0 4px 12px rgba(27,42,74,0.08);
  --shadow-lg: 0 12px 28px rgba(27,42,74,0.14);

  --header-h: 60px;
  --nav-h: 60px;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
[hidden] { display: none !important; }
body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  padding-top: var(--header-h);
  padding-bottom: var(--nav-h);
  min-height: 100vh;
}

a { color: var(--c-link); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; cursor: pointer; }

/* ============================================================
   Header taskbar
============================================================ */
#taskbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  background: var(--c-brand);
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 10px;
  z-index: 50;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.tb-brand {
  background: transparent;
  border: 0;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px;
  border-radius: var(--r-md);
}
.tb-brand:hover { background: rgba(255,255,255,0.06); }
.tb-logo {
  font-size: 22px;
  font-weight: 700;
  background: rgba(255,255,255,0.12);
  border-radius: 50%;
  width: 34px; height: 34px;
  display: grid; place-items: center;
}
.tb-product {
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
}
.tb-edition {
  font-weight: 400;
  font-size: 11px;
  opacity: 0.75;
  margin-left: 4px;
}
#web-nav {
  display: none;
  margin-left: 12px;
  align-items: center;
  gap: 4px;
  flex: 1;
}
#web-nav a {
  color: rgba(255,255,255,0.84);
  padding: 8px 12px;
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}
#web-nav a:hover { background: rgba(255,255,255,0.08); color: #fff; }
#web-nav a.active { background: rgba(255,255,255,0.16); color: #fff; }

.tb-context { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.mode-toggle {
  display: flex;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  padding: 3px;
}
.mode-btn {
  background: transparent;
  border: 0;
  color: rgba(255,255,255,0.7);
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 999px;
  white-space: nowrap;
}
.mode-btn[aria-selected="true"] {
  background: #fff;
  color: var(--c-brand);
}
.mode-btn:not([aria-selected="true"]):hover { color: #fff; }

.tb-context-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--r-md);
  position: relative;
}
.tb-context-btn:hover { background: rgba(255,255,255,0.16); }
.tb-context-btn .ni { font-size: 14px; }
.tb-context-count {
  background: #c98a00;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  margin-left: 4px;
}
.tb-context-label { display: none; }

.tb-emergency {
  background: var(--c-emergency);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  padding: 8px 12px;
  border-radius: var(--r-md);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255,255,255,0.2);
}
.tb-emergency:hover { background: var(--c-emergency-strong); text-decoration: none; }

/* ============================================================
   Bottom navigation (mobile)
============================================================ */
#nav-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--nav-h);
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
  display: flex;
  z-index: 40;
}
.nav-btn {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--c-text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 11px;
  padding: 6px 4px;
}
.nav-btn .ni { font-size: 18px; }
.nav-btn.active { color: var(--c-brand-2); }
.nav-btn-emergency .ni { color: var(--c-emergency); }
.nav-btn-emergency.active { color: var(--c-emergency); }

/* ============================================================
   Main / app
============================================================ */
#app {
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 14px 28px;
}

.screen-header {
  margin: 0 0 16px;
}
.screen-header h1 {
  margin: 0 0 4px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.screen-header p {
  margin: 0;
  color: var(--c-text-muted);
  font-size: 14px;
}

/* ============================================================
   Page header — editorial pattern
   ------------------------------------------------------------
   Shared treatment used across DDI / Browse / Matrix / Resources
   / About / My Meds so every screen reads as a magazine page,
   not a text dump:

     [ MONO · UPPERCASE · EYEBROW ]
     Display title <em>with accent.</em>
     One-line dek (optional).

   The Daily Card and Atlas use their own variants (`.daily-header`
   `.atlas-header`) that follow the same formula but predate this
   shared class — left in place to avoid churn.
   ============================================================ */
.page-header {
  margin: 0 0 20px;
}
.page-eyebrow {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: 10px;
  display: inline-block;
}
.page-title {
  margin: 0;
  font-size: clamp(28px, 4.8vw, 40px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--c-brand);
}
.page-title em {
  font-style: italic;
  color: var(--c-text-soft);
  font-weight: 400;
}
.page-sub {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-text-muted);
  max-width: 62ch;
}

/* ============================================================
   Cards / panels
============================================================ */
.panel {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 16px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 14px;
}
.panel h2 {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 600;
}
.panel h3 {
  margin: 16px 0 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-brand);
}
.panel-body p { margin: 0 0 8px; }

/* ============================================================
   Inputs
============================================================ */
.search-input {
  width: 100%;
  padding: 12px 14px;
  font-size: 16px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  outline: none;
}
.search-input:focus { border-color: var(--c-brand-2); box-shadow: 0 0 0 3px rgba(31,78,121,0.16); }
select, input[type="number"], input[type="text"] {
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  padding: 7px 9px;
  font-size: 14px;
  background: var(--c-surface);
  color: var(--c-text);
}

/* ============================================================
   Drug list / cards
============================================================ */
.drug-list { list-style: none; margin: 0; padding: 0; }
.drug-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--c-border);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.drug-row:hover { background: var(--c-surface-2); }
.drug-row .name { font-weight: 600; }
.drug-row .meta { color: var(--c-text-muted); font-size: 12px; }
.drug-row .meta > * + *::before { content: "·"; margin: 0 6px; color: var(--c-text-soft); }

.group-badge {
  display: inline-block;
  background: var(--c-brand-soft);
  color: var(--c-brand);
  border: 1px solid #cdd9ea;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.chip {
  display: inline-block;
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 999px;
  background: var(--c-surface-2);
  color: var(--c-text-muted);
  border: 1px solid var(--c-border);
  margin: 2px 4px 2px 0;
  text-decoration: none;
}
.chip:hover { background: #e8edf3; text-decoration: none; }
.chip.chip-cyp { background: #fef9e7; border-color: #f1d97a; color: #6d5210; }
.chip.chip-transport { background: #e7f3fe; border-color: #9ec7f0; color: #0e3e6d; }
.chip.chip-risk { background: #fdecea; border-color: #f5b8b4; color: #7a1a14; }
.chip.chip-syndrome { background: #f4e7ff; border-color: #cba0f6; color: #4a1980; }

/* ============================================================
   Tier badge
============================================================ */
.tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 16px;
  font-weight: 700;
  border-radius: var(--r-md);
  border: 1px solid;
  white-space: nowrap;
}
.tier-1 { background: var(--c-tier-1-bg); color: var(--c-tier-1); border-color: #b6dec5; }
.tier-2 { background: var(--c-tier-2-bg); color: var(--c-tier-2); border-color: #f0d68a; }
.tier-3 { background: var(--c-tier-3-bg); color: var(--c-tier-3); border-color: #f4c389; }
.tier-4 { background: var(--c-tier-4-bg); color: var(--c-tier-4); border-color: #f3a979; }
.tier-5 { background: var(--c-tier-5-bg); color: var(--c-tier-5); border-color: #f0a39e; }
.tier-6 { background: var(--c-tier-6-bg); color: var(--c-tier-6); border-color: #c79bf2; }

/* ============================================================
   Detail screens
============================================================ */
.hero {
  background: linear-gradient(135deg, #1b2a4a 0%, #1f4e79 100%);
  color: #fff;
  border-radius: var(--r-lg);
  padding: 18px 20px;
  margin-bottom: 16px;
}
.hero h1 { margin: 0 0 4px; font-size: 26px; font-weight: 700; }
.hero .alias { opacity: 0.78; font-size: 13px; }
.hero .meta-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.hero .meta-line .pill {
  background: rgba(255,255,255,0.15);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.22);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}

.kv {
  display: grid;
  grid-template-columns: 180px 1fr;
  row-gap: 8px;
  column-gap: 14px;
  font-size: 14px;
}
.kv dt {
  color: var(--c-text-muted);
  font-weight: 500;
}
.kv dd { margin: 0; }
.kv-subtle dt { color: var(--c-text-soft); font-weight: 400; font-size: 13px; }

.body-copy {
  font-size: 15px;
  line-height: 1.55;
  white-space: pre-wrap;
}
.body-copy.clinician { font-size: 14px; }
.body-copy.carer { font-size: 15px; }
.body-copy.participant { font-size: 16px; line-height: 1.6; }

/* Section markers in mode-aware copy */
.body-copy strong, .body-copy h4 { color: var(--c-brand); }

/* ------------------------------------------------------------
   Sectioned consumer copy
   ------------------------------------------------------------
   drug.copy.*.full ships as one string with inline ALL-CAPS
   headings ("WHAT THIS MEDICINE DOES:\n…"). parseSectionedCopy()
   in drug_info.js splits it; this turns each heading into a
   small accent-barred eyebrow with its body as a real paragraph
   so the panel reads as structured content, not a text dump.
   ------------------------------------------------------------ */
.body-copy--sectioned {
  white-space: normal;          /* override .body-copy pre-wrap */
  display: flex; flex-direction: column; gap: 18px;
}
.copy-section-head {
  display: flex; align-items: center; gap: 8px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--c-brand-2);
  margin-bottom: 6px;
}
.copy-section-head::before {
  content: ""; flex-shrink: 0;
  width: 18px; height: 2px;
  background: var(--c-brand-2);
  border-radius: 1px;
}
.copy-section-body {
  margin: 0;
  font-size: 15px; line-height: 1.62;
  color: var(--c-text);
}

/* Safety-critical section — red-tinted callout so urgent-help info
   doesn't blend into the rest of the copy. */
.copy-section--urgent {
  background: rgba(185, 28, 28, 0.05);
  border: 1px solid rgba(185, 28, 28, 0.18);
  border-radius: 10px;
  padding: 14px 16px;
}
.copy-section--urgent .copy-section-head { color: var(--c-emergency); }
.copy-section--urgent .copy-section-head::before { background: var(--c-emergency); }

/* ============================================================
   DDI screen
============================================================ */
.ddi-grid {
  display: grid;
  grid-template-columns: 1fr 60px 1fr;
  gap: 10px;
  align-items: stretch;
}
.ddi-grid .vs {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  color: var(--c-text-soft);
}
.ddi-picker {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 12px;
}
.ddi-picker .label {
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text-muted);
  margin-bottom: 6px;
}
.ddi-picker .selected {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
}
.ddi-picker .selected.empty { color: var(--c-text-soft); font-weight: 500; }
.ddi-picker .clear-btn {
  background: transparent;
  border: 0;
  color: var(--c-link);
  font-size: 12px;
  padding: 0;
  text-decoration: underline;
}
.pair-result { margin-top: 14px; }
.pair-tier-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}
.pair-headline {
  font-size: 17px;
  font-weight: 600;
  margin: 4px 0 12px;
  color: var(--c-brand);
}
.pair-action {
  background: var(--c-surface-2);
  border-left: 4px solid var(--c-brand-2);
  padding: 12px 14px;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  margin: 12px 0;
  white-space: pre-wrap;
}
.pair-action.tier-5, .pair-action.tier-6 {
  background: var(--c-tier-5-bg);
  border-left-color: var(--c-tier-5);
}
.modifier-banner {
  background: #fef5e0;
  border: 1px solid #f0d68a;
  border-radius: var(--r-md);
  padding: 10px 12px;
  font-size: 13px;
  color: #6d5210;
  margin: 10px 0;
}
.modifier-banner ul { margin: 6px 0 0 18px; }

/* ============================================================
   Search dropdown / results
============================================================ */
.search-wrap { position: relative; margin-bottom: 14px; }
.search-results {
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  max-height: 360px;
  overflow-y: auto;
  z-index: 20;
  margin-top: 4px;
}

/* ============================================================
   Modal / sheet
============================================================ */
#modal-root.open { display: block; }
.modal-shade {
  position: fixed; inset: 0;
  background: rgba(27,42,74, 0.45);
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.modal-card {
  background: var(--c-surface);
  border-radius: var(--r-lg);
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  /* Flex column so the header + footer stay pinned and only the body scrolls —
     keeps the action buttons (Save / Apply) always visible on tall forms. */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.modal-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--c-border);
}
.modal-head h2 { margin: 0; font-size: 17px; }
.modal-close {
  background: transparent;
  border: 0;
  font-size: 24px;
  line-height: 1;
  color: var(--c-text-muted);
  padding: 4px 8px;
}
.modal-body { padding: 16px 18px; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.modal-foot {
  flex: 0 0 auto;
  padding: 12px 18px;
  border-top: 1px solid var(--c-border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.btn {
  display: inline-block;
  padding: 8px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-text);
  font-weight: 500;
  font-size: 14px;
}
.btn:hover { background: var(--c-surface-2); }
.btn-primary { background: var(--c-brand); color: #fff; border-color: var(--c-brand); }
.btn-primary:hover { background: #1a3554; }
.btn-emergency { background: var(--c-emergency); color: #fff; border-color: var(--c-emergency); }
.btn-emergency:hover { background: var(--c-emergency-strong); }

/* ============================================================
   Tabs
============================================================ */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--c-border);
  margin-bottom: 14px;
  overflow-x: auto;
}
.tab {
  background: transparent;
  border: 0;
  padding: 10px 14px;
  color: var(--c-text-muted);
  font-weight: 500;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.tab[aria-selected="true"] {
  color: var(--c-brand);
  border-bottom-color: var(--c-brand);
}

/* ============================================================
   PK timeline
============================================================ */
.pk-chart {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 14px;
}
.pk-chart svg { width: 100%; height: auto; display: block; }

/* ============================================================
   Loading
============================================================ */
.loading-shade {
  position: fixed; inset: 0;
  background: rgba(245,247,251,0.92);
  z-index: 100;
  display: flex; align-items: center; justify-content: center;
}
.loading-card {
  background: var(--c-surface);
  border-radius: var(--r-lg);
  padding: 24px 30px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: var(--shadow-lg);
}
.spinner {
  width: 24px; height: 24px;
  border: 3px solid var(--c-border);
  border-top-color: var(--c-brand-2);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   Toast
============================================================ */
#toast-root {
  position: fixed;
  bottom: calc(var(--nav-h) + 12px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast {
  background: var(--c-text);
  color: #fff;
  padding: 10px 14px;
  border-radius: var(--r-md);
  font-size: 14px;
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
}

/* ============================================================
   Emergency screen
============================================================ */
.emergency-banner {
  background: var(--c-emergency);
  color: #fff;
  padding: 16px;
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.emergency-banner .call-btn {
  background: #fff;
  color: var(--c-emergency);
  font-size: 22px;
  font-weight: 800;
  padding: 14px 22px;
  border-radius: var(--r-md);
  text-decoration: none;
  letter-spacing: 0.02em;
  border: 0;
}
.emergency-banner .desc { font-size: 14px; line-height: 1.4; }

.protocol-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-emergency);
  border-radius: var(--r-md);
  padding: 14px;
  margin-bottom: 12px;
  cursor: pointer;
}
.protocol-card:hover { background: var(--c-surface-2); }
.protocol-card h3 { margin: 0 0 4px; font-size: 16px; }
.protocol-card .threshold { font-size: 12px; color: var(--c-text-muted); }

/* ============================================================
   Helpers
============================================================ */
.muted { color: var(--c-text-muted); }
.small { font-size: 12px; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 6px; }
.mt-2 { margin-top: 12px; }
.mt-3 { margin-top: 18px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.row.between { justify-content: space-between; }
.tag-list { display: flex; flex-wrap: wrap; gap: 4px; }
.section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-brand);
  margin: 16px 0 6px;
}
.divider { height: 1px; background: var(--c-border); margin: 14px 0; }
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--c-text-soft);
}
.empty-state .big { font-size: 36px; margin-bottom: 8px; }

/* ============================================================
   References + DOIs
============================================================ */
.ref-list { font-family: var(--font-mono); font-size: 12px; }
.ref-list .ref { display: inline-block; margin-right: 8px; padding: 1px 6px; background: var(--c-surface-2); border-radius: var(--r-sm); }

.ref-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ref-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 6px 10px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  font-size: 13px;
}
.ref-id {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--c-brand);
  font-size: 12px;
  margin-right: auto;
}
.ref-link {
  order: 1;
  flex: 1 1 100%;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--c-link);
  word-break: break-all;
}
.ref-tag {
  font-size: 11px;
  font-weight: 500;
  color: var(--c-text-muted);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  padding: 2px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

.ref-grade {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid transparent;
  letter-spacing: 0.02em;
  cursor: help;
}
.ref-grade--ev01 { background: #d4edda; color: #155724; border-color: #c3e6cb; }
.ref-grade--ev02 { background: #dcedc8; color: #1b5e20; border-color: #c5e1a5; }
.ref-grade--ev03 { background: #e3f2fd; color: #0d47a1; border-color: #bbdefb; }
.ref-grade--ev04 { background: #fff8e1; color: #795548; border-color: #ffe082; }
.ref-grade--ev05 { background: #fff3e0; color: #6d4c1f; border-color: #ffcc80; }
.ref-grade--ev06 { background: #fce4ec; color: #880e4f; border-color: #f8bbd0; }
.ref-grade--ev07 { background: #f5f5f5; color: #616161; border-color: #e0e0e0; }
.ref-grade--unknown { background: var(--c-surface); color: var(--c-text-muted); border-color: var(--c-border); }

/* Severity-by-symptom table */
.severity-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.severity-table th, .severity-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--c-border);
  vertical-align: top;
}
.severity-table thead th {
  background: var(--c-surface-2);
  font-size: 12px;
  font-weight: 600;
  color: var(--c-text-muted);
}
.sev-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.sym-cell-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.sym-name {
  font-size: 14px;
  color: var(--c-text);
}
.sym-code {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--c-text-soft);
  background: var(--c-surface-2);
  padding: 1px 7px;
  border-radius: var(--r-sm);
}
.sev-pill.sev-low { background: var(--c-tier-1-bg); color: var(--c-tier-1); }
.sev-pill.sev-mid { background: var(--c-tier-3-bg); color: var(--c-tier-3); }
.sev-pill.sev-high { background: var(--c-tier-5-bg); color: var(--c-tier-5); }
.sev-pill.sev-em { background: var(--c-emergency); color: #fff; }

/* ============================================================
   Patient context drawer
============================================================ */
.context-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.context-form .field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.context-form label {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.context-form select, .context-form input {
  width: 100%;
}

/* ============================================================
   Cohort triage
============================================================ */
.cohort-counts {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.count-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 12px 16px;
  min-width: 110px;
  flex: 1 0 110px;
}
.count-num { font-size: 28px; font-weight: 700; line-height: 1; }
.count-label { font-size: 12px; font-weight: 600; color: var(--c-text-muted); margin-top: 4px; }

.cohort-filters {
  padding: 12px 14px;
  margin-bottom: 14px;
}
.filter-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}
.filter-row:last-child { margin-bottom: 0; }
.filter-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text-muted);
  min-width: 80px;
}

.triage-table-wrap {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  overflow: auto;
}
.triage-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.triage-table th, .triage-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--c-border);
  vertical-align: top;
}
.triage-table thead th {
  background: var(--c-surface-2);
  font-size: 12px;
  font-weight: 600;
  color: var(--c-text-muted);
  white-space: nowrap;
  position: sticky; top: 0;
}
.triage-table th.sortable { cursor: pointer; user-select: none; }
.triage-table th.sortable.active { color: var(--c-brand); }
.triage-table th.sortable:hover { color: var(--c-brand); }
.triage-row.band-urgent { background: linear-gradient(90deg, rgba(153,27,27,0.04), transparent 30%); }
.triage-row.band-caution { background: linear-gradient(90deg, rgba(194,65,12,0.03), transparent 30%); }
.triage-row.band-monitor { background: linear-gradient(90deg, rgba(217,119,6,0.03), transparent 30%); }
.triage-row:hover { background: var(--c-surface-2); }
.patient-link { text-decoration: none; color: inherit; display: block; }
.patient-link .name { font-weight: 600; }
.patient-link:hover .name { color: var(--c-link); }

.tier-mini, .assess-mini {
  display: inline-block;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
}
.tier-mini.tier-1 { background: var(--c-tier-1-bg); color: var(--c-tier-1); }
.tier-mini.tier-2 { background: var(--c-tier-2-bg); color: var(--c-tier-2); }
.tier-mini.tier-3 { background: var(--c-tier-3-bg); color: var(--c-tier-3); }
.tier-mini.tier-4 { background: var(--c-tier-4-bg); color: var(--c-tier-4); }
.tier-mini.tier-5 { background: var(--c-tier-5-bg); color: var(--c-tier-5); }
.tier-mini.tier-6 { background: var(--c-tier-6-bg); color: var(--c-tier-6); }

.assess-mini.assess-green { background: #e8f5ee; color: #2e8b57; }
.assess-mini.assess-amber { background: #fef5e0; color: #c98a00; }
.assess-mini.assess-orange { background: #fde2cf; color: #c2410c; }
.assess-mini.assess-yellow { background: #fef9e7; color: #6d5210; }
.assess-mini.assess-gray { background: var(--c-surface-2); color: var(--c-text-muted); }
.assess-mini.assess-muted { background: var(--c-surface-2); color: var(--c-text-soft); }

.assess-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.assess-pill.assess-green { background: #e8f5ee; color: #2e8b57; border: 1px solid #b6dec5; }
.assess-pill.assess-amber { background: #fef5e0; color: #c98a00; border: 1px solid #f0d68a; }
.assess-pill.assess-orange { background: #fde2cf; color: #c2410c; border: 1px solid #f3a979; }
.assess-pill.assess-yellow { background: #fef9e7; color: #6d5210; border: 1px solid #f1d97a; }
.assess-pill.assess-gray { background: var(--c-surface-2); color: var(--c-text-muted); border: 1px solid var(--c-border); }
.assess-pill.assess-muted { background: var(--c-surface-2); color: var(--c-text-soft); border: 1px solid var(--c-border); }

.band-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
}
.band-badge.band-urgent { background: var(--c-tier-5-bg); color: var(--c-tier-5); }
.band-badge.band-caution { background: var(--c-tier-4-bg); color: var(--c-tier-4); }
.band-badge.band-monitor { background: var(--c-tier-3-bg); color: var(--c-tier-3); }
.band-badge.band-ok { background: var(--c-tier-2-bg); color: var(--c-tier-2); }
.band-badge.band-clear { background: var(--c-surface-2); color: var(--c-text-muted); }

.band-urgent-pill { background: rgba(255,255,255,0.2) !important; border-color: rgba(255,255,255,0.3) !important; }

.ctx-flags { display: flex; flex-wrap: wrap; gap: 3px; }
.ctx-flag {
  display: inline-block;
  font-size: 12px;
  background: var(--c-surface-2);
  color: var(--c-text-muted);
  padding: 2px 8px;
  border-radius: 999px;
}

.btn-small { font-size: 12px; padding: 4px 10px; }

.matrix-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.matrix-row {
  border: 1px solid var(--c-border);
  border-left-width: 4px;
  border-radius: var(--r-md);
  padding: 10px 12px;
  background: var(--c-surface);
}
.matrix-row.tier-row-5, .matrix-row.tier-row-6 { border-left-color: var(--c-tier-5); background: rgba(153,27,27,0.02); }
.matrix-row.tier-row-4 { border-left-color: var(--c-tier-4); }
.matrix-row.tier-row-3 { border-left-color: var(--c-tier-3); }
.matrix-row.tier-row-2 { border-left-color: var(--c-tier-2); }
.matrix-row.tier-row-1 { border-left-color: var(--c-tier-1); }
.matrix-row-head { margin-bottom: 6px; flex-wrap: wrap; gap: 8px; }
.matrix-pair-name { font-weight: 600; }
.matrix-headline { font-size: 14px; color: var(--c-brand); margin-top: 4px; }
.matrix-modifier-banner {
  background: var(--c-tier-2-bg);
  border-radius: var(--r-sm);
  padding: 4px 8px;
  font-size: 12px;
  color: var(--c-tier-2);
  margin-top: 6px;
  display: inline-block;
}

/* ============================================================
   Clinician monograph (drug detail in clinician mode)
============================================================ */
.monograph-panel { padding: 0; overflow: hidden; }
.monograph-panel > h2 { padding: 18px 22px 0; margin: 0 0 4px; font-size: 18px; }

.monograph {
  font-size: 14px;
  line-height: 1.6;
}

.monograph-glance {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  background: linear-gradient(135deg, #1b2a4a 0%, #1f4e79 100%);
  color: #fff;
  margin: 14px 0 0;
}
.glance-item {
  flex: 1 0 auto;
  min-width: 110px;
  padding: 12px 18px;
  border-right: 1px solid rgba(255,255,255,0.14);
}
.glance-item:last-child { border-right: 0; }
.glance-key {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  opacity: 0.72;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.glance-val {
  font-size: 15px;
  font-weight: 600;
}

.monograph-section {
  border-top: 1px solid var(--c-border);
  padding: 18px 22px;
}
.monograph-section:first-of-type { border-top: 0; }
.monograph-title {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.monograph-subtitle {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-brand);
}
.monograph-prose {
  margin: 0 0 8px;
  color: var(--c-text);
}
.monograph-prose-soft {
  font-size: 13px;
  color: var(--c-text-muted);
}
.monograph-list {
  margin: 4px 0 0;
  padding-left: 22px;
}
.monograph-list li {
  margin-bottom: 4px;
  color: var(--c-text);
}
.monograph-list-numbered { list-style: decimal; }
.monograph-grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px 22px;
}
@media (min-width: 720px) {
  .monograph-grid-2 { grid-template-columns: 1fr 1fr; }
}

/* PK table inside monograph */
.pk-table-wrap { overflow-x: auto; }
.pk-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.pk-table th, .pk-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--c-border);
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}
.pk-table thead th {
  background: var(--c-surface-2);
  font-size: 11px;
  font-weight: 600;
  color: var(--c-text-muted);
}

/* Enzyme / transporter grid */
.et-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 720px) {
  .et-grid { grid-template-columns: 1fr 1fr; }
}
.et-cell {
  background: var(--c-surface-2);
  border-radius: var(--r-md);
  padding: 10px 12px;
}
.et-label {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin-bottom: 6px;
}
.et-role {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--c-brand);
}
.et-class {
  font-size: 11px;
  color: var(--c-text-muted);
}
.et-targets {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.et-target-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
  font-size: 13px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  padding: 4px 10px;
}
.et-target-code {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--c-brand);
  white-space: nowrap;
}
.et-target-full {
  flex: 1;
  color: var(--c-text);
}
.et-target-strength {
  font-size: 11px;
  font-weight: 600;
  color: var(--c-text-muted);
  background: var(--c-surface-2);
  padding: 1px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Special populations grid */
.pops-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
@media (min-width: 720px) {
  .pops-grid { grid-template-columns: 1fr 1fr; }
}
.pops-row {
  background: var(--c-surface-2);
  border-radius: var(--r-md);
  padding: 8px 12px;
}
.pops-key {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 4px;
}
.pops-key > span:first-child {
  font-weight: 600;
  font-size: 13px;
}
.pops-flag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
}
.pops-flag-low { background: var(--c-tier-1-bg); color: var(--c-tier-1); }
.pops-flag-mid { background: var(--c-tier-3-bg); color: var(--c-tier-3); }
.pops-flag-high { background: var(--c-tier-5-bg); color: var(--c-tier-5); }
.pops-notes {
  color: var(--c-text-muted);
  line-height: 1.45;
}

/* Safety ceilings */
.safety-row {
  background: var(--c-surface-2);
  border-radius: var(--r-md);
  padding: 10px 14px;
  margin-bottom: 8px;
}
.safety-row:last-child { margin-bottom: 0; }
.safety-route {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}
.safety-line {
  font-size: 13px;
  margin-bottom: 2px;
}
.safety-label {
  font-weight: 600;
  color: var(--c-text-muted);
  font-size: 12px;
}

/* ============================================================
   Profile-driven sections (curated class-pair content)
============================================================ */
.profile-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--c-brand-soft);
  color: var(--c-brand);
  border: 1px solid #cdd9ea;
  font-size: 12px;
  font-weight: 600;
}
.profile-mechanism {
  background: var(--c-surface-2);
  border-left: 3px solid var(--c-brand-2);
  padding: 10px 14px;
  margin-top: 8px;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-text);
}
.profile-list {
  margin: 4px 0 8px 0;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.55;
}
.profile-list li {
  margin-bottom: 4px;
}
.profile-thresholds li {
  font-weight: 500;
  color: var(--c-tier-5);
}

/* ============================================================
   Class-level interaction note (DDI fallback when no specific pair)
============================================================ */
.class-level-note {
  background: linear-gradient(180deg, #f4ebfc 0%, #f8f3fe 100%);
  border: 1px solid #d4b8f1;
  border-radius: var(--r-md);
  padding: 12px 14px;
  margin-bottom: 14px;
}
.class-level-headline {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.class-tag {
  display: inline-block;
  background: #fff;
  border: 1px solid #c9a4f0;
  color: #4a1980;
  padding: 5px 12px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
}
.class-vs {
  color: #4a1980;
  font-size: 18px;
  font-weight: 600;
  opacity: 0.7;
}
.class-level-subtitle {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #2a1640;
}

/* ============================================================
   Assessment-status banner (DDI screen)
============================================================ */
.assessment-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--r-md);
  font-size: 13px;
  margin-bottom: 12px;
  border: 1px solid;
}
.assessment-banner.assess-green { background: #e8f5ee; color: #2e8b57; border-color: #b6dec5; }
.assessment-banner.assess-amber { background: #fef5e0; color: #c98a00; border-color: #f0d68a; }
.assessment-banner.assess-orange { background: #fde2cf; color: #c2410c; border-color: #f3a979; }
.assessment-banner.assess-yellow { background: #fef9e7; color: #6d5210; border-color: #f1d97a; }
.assessment-banner.assess-gray { background: var(--c-surface-2); color: var(--c-text-muted); border-color: var(--c-border); }
.assessment-banner.assess-muted { background: var(--c-surface-2); color: var(--c-text-soft); border-color: var(--c-border); }
.assessment-banner .icon { font-size: 18px; }
.assessment-banner .body { flex: 1; }
.assessment-banner strong { display: block; font-size: 13px; }
.assessment-banner .small { font-size: 11px; opacity: 0.85; }

/* ============================================================
   Responsive
============================================================ */
@media (min-width: 720px) {
  body { padding-bottom: 18px; }
  #nav-bar { display: none; }
  #web-nav { display: flex; }
  .tb-context-label { display: inline; }
  .ddi-grid { gap: 14px; }
  .context-form { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 980px) {
  #app { padding: 22px 20px 28px; }
  .context-form { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 519px) {
  .tb-product .tb-edition { display: none; }
  .mode-btn { padding: 5px 8px; }
  .tb-emergency { padding: 6px 9px; }
}

/* ============================================================
   v2 — Sidebar nav, dashboard, motion system
   ============================================================ */
:root {
  --sidebar-w: 248px;
  --sidebar-w-collapsed: 64px;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 140ms;
  --t-base: 220ms;
  --t-slow: 360ms;
  --c-accent: oklch(72% 0.13 220);
  --c-accent-soft: oklch(96% 0.02 220);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---- Hide legacy nav surfaces (replaced by sidebar) ---- */
#web-nav { display: none !important; }
#nav-bar { display: none !important; }
body { padding-bottom: 0 !important; }

/* ---- Taskbar tweaks ---- */
#taskbar { padding-left: 8px; }
.tb-burger {
  background: transparent;
  border: 0;
  color: #fff;
  width: 38px;
  height: 38px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out);
}
.tb-burger:hover { background: rgba(255,255,255,0.1); }
.tb-burger:active { transform: scale(0.94); }
.tb-burger svg { width: 20px; height: 20px; }
.tb-burger .l { transition: transform var(--t-base) var(--ease-out), opacity var(--t-base) var(--ease-out); transform-origin: center; }

/* ---- Sidebar ---- */
#sidebar {
  position: fixed;
  top: var(--header-h);
  left: 0;
  bottom: 0;
  width: var(--sidebar-w);
  background: var(--c-surface);
  border-right: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  z-index: 45;
  transition: width var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
  overflow: hidden;
}
#sidebar.collapsed { width: var(--sidebar-w-collapsed); }

.sb-section { padding: 14px 10px 6px; }
.sb-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-soft);
  padding: 0 12px 8px;
  white-space: nowrap;
  opacity: 1;
  transition: opacity var(--t-fast) var(--ease-out);
}
#sidebar.collapsed .sb-section-label { opacity: 0; pointer-events: none; }

.sb-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.sb-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: var(--r-md);
  color: var(--c-text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: 0;
  background: transparent;
  width: 100%;
  text-align: left;
  position: relative;
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.sb-item:hover { background: var(--c-surface-2); text-decoration: none; }
.sb-item:active { transform: scale(0.98); }
.sb-item.active {
  background: var(--c-brand-soft);
  color: var(--c-brand);
}
.sb-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--c-brand);
  animation: sb-active-in var(--t-base) var(--ease-out);
}
@keyframes sb-active-in {
  from { transform: scaleY(0.4); opacity: 0; }
  to { transform: scaleY(1); opacity: 1; }
}
.sb-item .sb-icon {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  flex: 0 0 22px;
  color: var(--c-text-muted);
  transition: color var(--t-fast) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.sb-item .sb-icon svg { width: 18px; height: 18px; }
.sb-item:hover .sb-icon { color: var(--c-brand-2); }
.sb-item.active .sb-icon { color: var(--c-brand); }
.sb-item .sb-label {
  flex: 1;
  opacity: 1;
  transition: opacity var(--t-fast) var(--ease-out);
}
#sidebar.collapsed .sb-label { opacity: 0; pointer-events: none; }
#sidebar.collapsed .sb-item { justify-content: center; padding: 9px 0; gap: 0; }
.sb-item .sb-badge {
  margin-left: auto;
  background: var(--c-brand);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
}
#sidebar.collapsed .sb-badge { display: none; }

.sb-emergency {
  color: var(--c-emergency);
}
.sb-emergency .sb-icon { color: var(--c-emergency); }
.sb-emergency:hover { background: #fdecea; }

.sb-spacer { flex: 1; }
.sb-footer { padding: 8px 10px 14px; border-top: 1px solid var(--c-border); }
.sb-toggle {
  background: transparent;
  border: 1px solid var(--c-border);
  color: var(--c-text-muted);
  width: 100%;
  padding: 8px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.sb-toggle:hover { background: var(--c-surface-2); color: var(--c-text); }
.sb-toggle svg { width: 16px; height: 16px; transition: transform var(--t-base) var(--ease-out); }
#sidebar.collapsed .sb-toggle svg { transform: rotate(180deg); }
#sidebar.collapsed .sb-toggle-label { display: none; }
#sidebar.collapsed .sb-toggle { justify-content: center; }

/* tooltip for collapsed items */
#sidebar.collapsed .sb-item { position: relative; }
#sidebar.collapsed .sb-item:hover::after {
  content: attr(data-label);
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--c-brand);
  color: #fff;
  padding: 6px 10px;
  border-radius: var(--r-md);
  font-size: 12px;
  white-space: nowrap;
  z-index: 100;
  pointer-events: none;
  box-shadow: var(--shadow-md);
  animation: tooltip-in 140ms var(--ease-out);
}
@keyframes tooltip-in {
  from { opacity: 0; transform: translate(-4px, -50%); }
  to { opacity: 1; transform: translate(0, -50%); }
}

/* ---- Backdrop for mobile drawer ---- */
#sidebar-backdrop {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  background: rgba(27,42,74, 0.4);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  z-index: 44;
  transition: opacity var(--t-base) var(--ease-out);
}
body.sidebar-open #sidebar-backdrop { opacity: 1; pointer-events: auto; }

/* ---- Main app shift ---- */
#app {
  transition: margin-left var(--t-base) var(--ease-out), opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
#app.is-leaving { opacity: 0; transform: translateY(6px); }

/* ---- Desktop: sidebar always visible ---- */
@media (min-width: 880px) {
  #app { margin-left: var(--sidebar-w); }
  body.sidebar-collapsed #app { margin-left: var(--sidebar-w-collapsed); }
  #sidebar-backdrop { display: none; }
  .tb-burger { display: none; }
}

/* ---- Mobile: drawer ---- */
@media (max-width: 879px) {
  #sidebar {
    transform: translateX(-100%);
    width: 270px !important;
    box-shadow: var(--shadow-lg);
  }
  #sidebar .sb-label, #sidebar .sb-section-label, #sidebar .sb-toggle-label, #sidebar .sb-badge {
    opacity: 1 !important;
    pointer-events: auto !important;
    display: inline !important;
  }
  #sidebar .sb-item { justify-content: flex-start !important; padding: 9px 12px !important; gap: 12px !important; }
  #sidebar.collapsed { width: 270px !important; }
  #sidebar.collapsed .sb-toggle svg { transform: none; }
  body.sidebar-open #sidebar { transform: translateX(0); }
  .sb-footer { display: none; }
}

/* ============================================================
   Page transitions — cross-fade + stagger
============================================================ */
.fade-in {
  animation: fade-in var(--t-base) var(--ease-out) both;
}
@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.stagger > * {
  animation: stagger-in 360ms var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 50ms);
}
@keyframes stagger-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- Skeleton ---- */
.skeleton {
  background: linear-gradient(90deg,
    var(--c-surface-2) 0%,
    #e8eef6 50%,
    var(--c-surface-2) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s infinite linear;
  border-radius: var(--r-md);
  color: transparent !important;
}
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-row { height: 56px; margin-bottom: 8px; }
.skeleton-line { height: 12px; margin-bottom: 8px; }
.skeleton-line.w-50 { width: 50%; }
.skeleton-line.w-70 { width: 70%; }

/* ---- Micro-interactions ---- */
.tier-badge {
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.tier-badge:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow: var(--shadow-md);
}
.chip { transition: transform var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out); }
.chip:hover { transform: translateY(-1px); }

button, .btn, .nav-btn { transition: transform var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out); }
.btn:active, button:active:not(:disabled) { transform: scale(0.97); }

/* Modal/drawer slide-in animation (target existing modal classes) */
.modal-shade.open { animation: shade-in var(--t-base) var(--ease-out); }
.modal-card.open { animation: card-rise var(--t-slow) var(--ease-out); }
@keyframes shade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes card-rise {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============================================================
   Dashboard styles
============================================================ */
.dash-hero {
  background: linear-gradient(135deg, #1b2a4a 0%, #1f4e79 60%, #2a6fdb 120%);
  color: #fff;
  border-radius: var(--r-xl);
  padding: 22px 24px;
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
}
.dash-hero::before {
  content: "";
  position: absolute;
  top: -40%; right: -10%;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(255,255,255,0.14), transparent 60%);
  pointer-events: none;
}
.dash-hero h1 {
  margin: 0 0 4px;
  font-size: clamp(22px, 4vw, 30px);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.dash-hero .sub { opacity: 0.82; font-size: 14px; }

.dash-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 18px;
}
.dash-stat {
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--r-lg);
  padding: 12px 14px;
  backdrop-filter: blur(4px);
  transition: transform var(--t-base) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.dash-stat:hover { background: rgba(255,255,255,0.16); transform: translateY(-2px); }
.dash-stat .stat-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.78;
}
.dash-stat .stat-value {
  font-size: 26px;
  font-weight: 700;
  margin-top: 4px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.dash-stat .stat-meta { font-size: 12px; opacity: 0.82; margin-top: 2px; }

.dash-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0 18px;
}
.dash-actions .btn-primary {
  background: var(--c-brand-2);
  color: #fff;
  border: 0;
  padding: 10px 16px;
  font-weight: 600;
  border-radius: var(--r-md);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.dash-actions .btn-primary:hover { background: var(--c-brand); }
.dash-actions .btn-ghost {
  background: var(--c-surface);
  color: var(--c-brand);
  border: 1px solid var(--c-border);
  padding: 10px 14px;
  font-weight: 500;
  border-radius: var(--r-md);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.dash-actions .btn-ghost:hover { background: var(--c-brand-soft); border-color: #cdd9ea; }

.med-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.med-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.med-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: #c5cfe0; }
.med-card .med-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.med-card .med-name { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.med-card .med-class { font-size: 11px; color: var(--c-text-soft); text-transform: uppercase; letter-spacing: 0.06em; }
.med-card .med-dose {
  display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
  font-variant-numeric: tabular-nums;
}
.med-card .med-dose strong { font-size: 18px; color: var(--c-brand); }
.med-card .med-dose .unit { font-size: 13px; color: var(--c-text-muted); }
.med-card .med-schedule { font-size: 13px; color: var(--c-text-muted); display: flex; align-items: center; gap: 6px; }
.med-card .med-times {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.med-card .time-pill {
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--c-text-muted);
  font-variant-numeric: tabular-nums;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.med-card .time-pill.due {
  background: #fef0d8;
  color: #6d5210;
  border-color: #f1d97a;
  animation: time-pulse 2s ease-in-out infinite;
}
.med-card .time-pill.taken {
  background: #e8f5ee;
  color: #2e8b57;
  border-color: #b6dec5;
}
@keyframes time-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}
.med-card .med-notes {
  font-size: 13px;
  color: var(--c-text-muted);
  background: var(--c-surface-2);
  padding: 8px 10px;
  border-radius: var(--r-sm);
  border-left: 3px solid var(--c-border-strong);
  white-space: pre-wrap;
}
.med-card .med-warn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--r-md);
  font-size: 12px;
  font-weight: 600;
}
.med-card .med-warn.tier-1 { background: var(--c-tier-1-bg); color: var(--c-tier-1); }
.med-card .med-warn.tier-2 { background: var(--c-tier-2-bg); color: var(--c-tier-2); }
.med-card .med-warn.tier-3 { background: var(--c-tier-3-bg); color: var(--c-tier-3); }
.med-card .med-warn.tier-4 { background: var(--c-tier-4-bg); color: var(--c-tier-4); }
.med-card .med-warn.tier-5 { background: var(--c-tier-5-bg); color: var(--c-tier-5); }
.med-card .med-warn.tier-6 { background: var(--c-tier-6-bg); color: var(--c-tier-6); }
.med-card .med-actions { display: flex; gap: 6px; margin-top: auto; padding-top: 4px; }
.med-card .med-actions button {
  flex: 1;
  background: transparent;
  border: 1px solid var(--c-border);
  padding: 6px 8px;
  font-size: 12px;
  border-radius: var(--r-sm);
  color: var(--c-text-muted);
  cursor: pointer;
}
.med-card .med-actions button:hover { background: var(--c-surface-2); color: var(--c-text); }
.med-card .med-actions button.primary { background: var(--c-brand-2); color: #fff; border-color: var(--c-brand-2); }
.med-card .med-actions button.primary:hover { background: var(--c-brand); }
.med-card .med-actions button.danger:hover { background: #fdecea; color: #b91c1c; border-color: #f5b8b4; }

/* Empty state */
.dash-empty {
  text-align: center;
  padding: 48px 20px;
  background: var(--c-surface);
  border: 2px dashed var(--c-border);
  border-radius: var(--r-xl);
}
.dash-empty .glyph {
  width: 64px; height: 64px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--c-brand-soft);
  color: var(--c-brand);
  font-size: 28px;
}
.dash-empty h3 { margin: 0 0 4px; font-size: 18px; }
.dash-empty p { color: var(--c-text-muted); margin: 0 0 16px; }

/* Schedule timeline */
.timeline {
  position: relative;
  height: 80px;
  background: var(--c-surface-2);
  border-radius: var(--r-md);
  margin: 12px 0 6px;
  overflow: visible;
}
.timeline .hour-line {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--c-border);
}
.timeline .hour-label {
  position: absolute;
  bottom: -18px;
  transform: translateX(-50%);
  font-size: 10px;
  color: var(--c-text-soft);
  font-variant-numeric: tabular-nums;
}
.timeline .now-mark {
  position: absolute;
  top: -4px; bottom: -4px;
  width: 2px;
  background: var(--c-emergency);
  z-index: 5;
}
.timeline .now-mark::before {
  content: "";
  position: absolute;
  top: -2px; left: -3px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-emergency);
  animation: now-pulse 2s ease-in-out infinite;
}
@keyframes now-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.6; }
}
.timeline .dose-dot {
  position: absolute;
  top: 30px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--c-brand-2);
  border: 2px solid var(--c-surface);
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-out);
}
.timeline .dose-dot:hover { transform: translate(-50%, -50%) scale(1.4); }
.timeline .dose-dot.taken { background: var(--c-tier-1); }
.timeline .dose-label {
  position: absolute;
  top: 6px;
  transform: translateX(-50%);
  font-size: 10px;
  color: var(--c-text-muted);
  white-space: nowrap;
  pointer-events: none;
}

/* Interactions table on dashboard */
.dash-interactions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dash-int-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
  transition: background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.dash-int-row:hover { background: var(--c-surface-2); transform: translateX(2px); text-decoration: none; }
.dash-int-row .pair-text { flex: 1; font-size: 14px; font-weight: 500; }
.dash-int-row .pair-text .vs { color: var(--c-text-soft); margin: 0 6px; }
.dash-int-row .arrow { color: var(--c-text-soft); }

/* Form within modal for add med */
.form-grid { display: grid; gap: 12px; }
.form-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--c-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.form-grid input, .form-grid select { font-size: 14px; padding: 9px 11px; border-radius: var(--r-md); border: 1px solid var(--c-border); width: 100%; }
.form-grid input:focus, .form-grid select:focus { outline: 0; border-color: var(--c-brand-2); box-shadow: 0 0 0 3px rgba(31,78,121,0.16); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.times-edit { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.times-edit input[type="time"] { width: auto; flex: 0 0 auto; padding: 6px 8px; font-size: 13px; }
.times-edit .time-chip {
  background: var(--c-brand-soft);
  color: var(--c-brand);
  border: 1px solid #cdd9ea;
  padding: 4px 10px 4px 10px;
  border-radius: 999px;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}
.times-edit .time-chip button { background: transparent; border: 0; cursor: pointer; padding: 0; color: var(--c-brand); font-size: 14px; line-height: 1; }
.times-edit .add-time { background: transparent; border: 1px dashed var(--c-border-strong); padding: 4px 10px; border-radius: 999px; color: var(--c-text-muted); font-size: 12px; cursor: pointer; }

/* Sticky section headers */
.dash-section { margin-top: 18px; }
.dash-section .section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  position: sticky;
  top: var(--header-h);
  background: var(--c-bg);
  padding: 8px 0;
  z-index: 8;
}
.dash-section .section-head h2 { margin: 0; font-size: 17px; font-weight: 700; }
.dash-section .section-head .count { color: var(--c-text-muted); font-size: 13px; font-weight: 500; }

/* Make the existing search-results dropdown work inside our modal */
.modal-card .search-wrap { position: relative; }
.modal-card .search-results { max-height: 280px; overflow-y: auto; }

/* Soft scroll behaviour */
html { scroll-behavior: smooth; }
/* ============================================================
   Legal pages (/legal/disclaimer · /legal/terms · /legal/privacy)
   and the first-launch acceptance gate.
   Ported from the clinician edition, lightly adapted for the
   consumer-edition acceptance gate (which has two checkboxes:
   age and read-accept).
   ============================================================ */
.legal-panel { max-width: 760px; }
.legal-panel .lede {
  font-size: 16px;
  font-weight: 500;
  color: var(--c-brand);
  border-left: 3px solid var(--c-brand-2);
  padding-left: 12px;
  margin-bottom: 16px;
}
.legal-section { margin-top: 22px; }
.legal-section h2 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
}
.legal-section p {
  margin: 0 0 8px;
  line-height: 1.55;
}

.acceptance-body {
  max-width: 100%;
  font-size: 14px;
}
.acceptance-lede {
  font-size: 13px;
  color: var(--c-text-muted);
  margin: 0 0 14px;
}
.acceptance-block {
  background: var(--c-surface-2);
  border-left: 3px solid var(--c-brand-2);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 10px 14px;
  margin-bottom: 10px;
}
.acceptance-block h3 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-brand);
}
.acceptance-block p { margin: 0; font-size: 13px; line-height: 1.5; }
.acceptance-links {
  text-align: center;
  margin: 14px 0 12px;
  font-size: 13px;
}
.acceptance-links a { color: var(--c-link); text-decoration: underline; }
.acceptance-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px;
  background: var(--c-brand-soft);
  border: 1px solid #cdd9ea;
  border-radius: var(--r-md);
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
  margin-bottom: 8px;
}
.acceptance-checkbox input { margin-top: 3px; flex-shrink: 0; }

/* Larger modal for the acceptance gate */
.modal-shade .modal-card:has(.acceptance-body) { max-width: 720px; }

/* ============================================================
   View toggle — force desktop/web or mobile layout regardless
   of viewport. The user-facing toggle is a small chip in the
   taskbar (top-right cluster). State persists in localStorage
   under "tia.viewToggle.v1".
   ============================================================ */
.view-toggle {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.10);
  border-radius: var(--r-md);
  padding: 2px;
  gap: 2px;
  margin-right: 6px;
}
.view-toggle-btn {
  background: transparent;
  border: 0;
  color: #fff;
  opacity: 0.7;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: calc(var(--r-md) - 2px);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out), opacity var(--t-fast) var(--ease-out);
}
.view-toggle-btn:hover { opacity: 1; }
.view-toggle-btn.active {
  background: rgba(255, 255, 255, 0.20);
  opacity: 1;
}
@media (max-width: 600px) {
  /* On very narrow screens the toggle still renders but tightens up. */
  .view-toggle-btn { padding: 4px 7px; font-size: 11px; }
}

/* Force-web — desktop layout regardless of viewport.
   Sidebar persistent on the left, no burger, content shifted right. */
body.force-web #app { margin-left: var(--sidebar-w) !important; }
body.force-web.sidebar-collapsed #app { margin-left: var(--sidebar-w-collapsed) !important; }
body.force-web #sidebar { transform: none !important; width: var(--sidebar-w) !important; box-shadow: none !important; }
body.force-web #sidebar.collapsed { width: var(--sidebar-w-collapsed) !important; }
body.force-web .tb-burger { display: none !important; }
body.force-web #sidebar-backdrop { display: none !important; }
body.force-web .sb-footer { display: block !important; }
body.force-web #sidebar .sb-label,
body.force-web #sidebar .sb-section-label,
body.force-web #sidebar .sb-toggle-label {
  opacity: 1 !important;
  pointer-events: auto !important;
  display: inline !important;
}
body.force-web #sidebar.collapsed .sb-label,
body.force-web #sidebar.collapsed .sb-section-label,
body.force-web #sidebar.collapsed .sb-toggle-label {
  opacity: 0 !important;
  pointer-events: none !important;
}
body.force-web #sidebar.collapsed .sb-badge { display: none !important; }
body.force-web #sidebar.collapsed .sb-item { justify-content: center !important; padding: 9px 0 !important; gap: 0 !important; }

/* Force-mobile — mobile layout regardless of viewport.
   Sidebar becomes a slide-in drawer, burger button shows. Navigation
   lives entirely in the slide-in sidebar (the legacy bottom nav-bar
   is intentionally retired in the new design and stays hidden). */
body.force-mobile #app { margin-left: 0 !important; }
body.force-mobile #sidebar {
  transform: translateX(-100%);
  width: 270px !important;
  box-shadow: var(--shadow-lg);
}
body.force-mobile #sidebar .sb-label,
body.force-mobile #sidebar .sb-section-label,
body.force-mobile #sidebar .sb-toggle-label,
body.force-mobile #sidebar .sb-badge {
  opacity: 1 !important;
  pointer-events: auto !important;
  display: inline !important;
}
body.force-mobile #sidebar .sb-item {
  justify-content: flex-start !important;
  padding: 9px 12px !important;
  gap: 12px !important;
}
body.force-mobile #sidebar.collapsed { width: 270px !important; }
body.force-mobile #sidebar.collapsed .sb-toggle svg { transform: none; }
body.force-mobile.sidebar-open #sidebar { transform: translateX(0); }
body.force-mobile #sidebar-backdrop { display: block !important; }
body.force-mobile .tb-burger { display: grid !important; }
body.force-mobile .sb-footer { display: none; }

/* ============================================================
   Taskbar quick-access tools (Calc · Search · Recent)
   ============================================================ */
.tb-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 14px;
}
.tb-tool {
  background: rgba(255, 255, 255, 0.08);
  border: 0;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px 5px 8px;
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.tb-tool:hover { background: rgba(255, 255, 255, 0.16); }
.tb-tool:active { transform: scale(0.97); }
.tb-tool-icon {
  font-size: 15px;
  line-height: 1;
  width: 16px;
  text-align: center;
  opacity: 0.95;
}
.tb-tool-label { line-height: 1; }
.tb-tool-kbd {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 10.5px;
  font-weight: 600;
  margin-left: 2px;
  opacity: 0.85;
}
.tb-tool-caret { font-size: 10px; opacity: 0.7; margin-left: 1px; }

/* Hide labels on narrow viewports — icon-only chips. */
@media (max-width: 720px) {
  .tb-tool-label, .tb-tool-kbd { display: none; }
  .tb-tools { margin-left: 8px; gap: 4px; }
  .tb-tool { padding: 6px 7px; }
}

/* ---- Phone: declutter the header so nothing overflows off-screen. ----
   On phone widths the full desktop tool cluster (Calc · Recent · Actions ·
   Web/Mobile toggle · Context · Account) cannot fit beside the brand and was
   overflowing past the right edge — clipping the Emergency button and the
   right-hand controls entirely. Everything dropped here stays reachable:
   Account & Emergency live in the slide-in drawer, the Scenario screen has
   its own context editor, and Recent/Actions are convenience menus. We keep
   a minimal burger · brand · Search · Emergency header. */
@media (max-width: 600px) {
  #tb-calc,
  .tb-recent-wrap,            /* Recent + Quick-actions dropdowns */
  #view-toggle,
  .tb-context-btn,
  .tb-account { display: none !important; }
  .tb-tools { margin-left: 6px; }
  /* Let the brand title shrink/ellipsis instead of shoving the cluster off-screen. */
  .tb-brand { min-width: 0; overflow: hidden; }
  .tb-product { overflow: hidden; text-overflow: ellipsis; }
  .tb-emergency { flex: 0 0 auto; }
}

.tb-tool.tb-tool-primary {
  background: rgba(255, 255, 255, 0.20);
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.tb-tool.tb-tool-primary:hover { background: rgba(255, 255, 255, 0.30); }

.tb-recent-wrap { position: relative; }
.tb-recent-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 280px;
  max-width: 360px;
  background: var(--c-surface);
  color: var(--c-text);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  z-index: 60;
  animation: tooltip-in 140ms var(--ease-out);
}
.tb-recent-menu[hidden] { display: none !important; }
.tb-recent-item {
  background: transparent;
  border: 0;
  color: inherit;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 100%;
  padding: 7px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
  font: inherit;
  transition: background var(--t-fast) var(--ease-out);
}
.tb-recent-item:hover { background: var(--c-surface-2); }
.tb-recent-name { font-weight: 600; font-size: 13.5px; }
.tb-recent-sub { font-size: 11.5px; }
.tb-recent-empty { padding: 10px 12px; }

/* ---- Quick Actions dropdown menu ---- */
.tb-actions-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 280px;
  background: var(--c-surface);
  color: var(--c-text);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  z-index: 60;
  animation: tooltip-in 140ms var(--ease-out);
}
.tb-actions-menu[hidden] { display: none !important; }
.qa-group + .qa-group { margin-top: 4px; border-top: 1px solid var(--c-border); padding-top: 4px; }
.qa-group-label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  font-size: 10.5px;
  color: var(--c-text-soft);
  padding: 6px 10px 2px;
}
.qa-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  text-align: left;
  font: inherit;
  font-size: 13.5px;
  color: var(--c-text);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out);
}
.qa-item:hover { background: var(--c-brand-soft); color: var(--c-brand); }
.qa-item-icon {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  font-size: 15px;
  color: var(--c-brand-2);
  flex: 0 0 22px;
}
.qa-item:hover .qa-item-icon { color: var(--c-brand); }
.qa-item-label { flex: 1; font-weight: 500; }
.qa-item-kbd {
  background: var(--c-surface-2);
  color: var(--c-text-muted);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* ============================================================
   Dose calculator modal
   ============================================================ */
.calc-body { display: flex; flex-direction: column; gap: 14px; }
.calc-tabs {
  display: flex;
  gap: 4px;
  background: var(--c-surface-2);
  padding: 4px;
  border-radius: var(--r-md);
}
.calc-tab {
  flex: 1;
  background: transparent;
  border: 0;
  padding: 7px 10px;
  border-radius: calc(var(--r-md) - 2px);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text-muted);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.calc-tab:hover { color: var(--c-text); }
.calc-tab.active {
  background: var(--c-surface);
  color: var(--c-brand);
  box-shadow: var(--shadow-sm);
}
.calc-panel { min-height: 240px; }
.calc-form { display: flex; flex-direction: column; gap: 12px; }
.calc-field { display: flex; flex-direction: column; gap: 4px; }
.calc-label { font-size: 12px; font-weight: 600; color: var(--c-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.calc-input, .calc-form select {
  font: inherit;
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-text);
  min-width: 0;
}
.calc-input:focus, .calc-form select:focus {
  outline: 2px solid var(--c-brand-2);
  outline-offset: -1px;
  border-color: var(--c-brand-2);
}
.calc-row { display: flex; gap: 8px; align-items: center; }
.calc-row .calc-input { flex: 1; }
.calc-row .calc-input + select, .calc-row select { flex: 0 0 auto; min-width: 90px; }
.calc-row-conc { flex-wrap: wrap; }
.calc-row-conc .calc-input { flex: 1 1 80px; }
.calc-unit { font-size: 13px; color: var(--c-text-muted); }

.calc-out { margin-top: 4px; }
.calc-empty {
  padding: 14px 16px;
  background: var(--c-surface-2);
  border-radius: var(--r-md);
  text-align: center;
}
.calc-result {
  background: var(--c-brand-soft);
  border: 1px solid #cdd9ea;
  border-radius: var(--r-md);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.calc-result-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.calc-result-key { font-size: 12px; font-weight: 600; color: var(--c-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.calc-result-val { font-size: 20px; font-weight: 700; color: var(--c-brand); font-variant-numeric: tabular-nums; }
.calc-disclaimer { margin: 0; font-size: 11.5px; line-height: 1.4; }

/* ============================================================
   ⌘K Search palette
   ============================================================ */
.palette-body { display: flex; flex-direction: column; gap: 10px; }
.palette-input {
  font: inherit;
  font-size: 15px;
  padding: 10px 12px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  width: 100%;
}
.palette-input:focus {
  outline: 2px solid var(--c-brand-2);
  outline-offset: -1px;
  border-color: var(--c-brand-2);
}
.palette-results {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 320px;
  overflow-y: auto;
}
.palette-empty { padding: 14px 6px; }
.palette-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out);
}
.palette-item:hover, .palette-item.active { background: var(--c-brand-soft); }
.palette-item.active { color: var(--c-brand); }
.palette-name { font-weight: 600; }
.palette-sub { flex: 0 0 auto; }

/* Larger modal for search palette */
.modal-shade .modal-card:has(.palette-body) { max-width: 560px; }

/* ============================================================
   Browse Drugs — class colour tokens
   Every element with data-class-color="<name>" gets a --cc
   (strong) and --cc-bg (tinted background) it can drop into
   backgrounds / borders / text colour.
   ============================================================ */
[data-class-color="purple"]  { --cc: #7c3aed; --cc-bg: #ede0fa; }
[data-class-color="orange"]  { --cc: #c2410c; --cc-bg: #fde2cf; }
[data-class-color="red"]     { --cc: #991b1b; --cc-bg: #fbd5d5; }
[data-class-color="blue"]    { --cc: #1e40af; --cc-bg: #dbeafe; }
[data-class-color="indigo"]  { --cc: #4338ca; --cc-bg: #e0e7ff; }
[data-class-color="green"]   { --cc: #15803d; --cc-bg: #d1fae5; }
[data-class-color="teal"]    { --cc: #0f766e; --cc-bg: #ccfbf1; }
[data-class-color="pink"]    { --cc: #be185d; --cc-bg: #fce7f3; }
[data-class-color="cyan"]    { --cc: #0e7490; --cc-bg: #cffafe; }
[data-class-color="amber"]   { --cc: #b45309; --cc-bg: #fef3c7; }
[data-class-color="rose"]    { --cc: #9f1239; --cc-bg: #ffe4e6; }
[data-class-color="violet"]  { --cc: #6d28d9; --cc-bg: #ede9fe; }
[data-class-color="sky"]     { --cc: #0369a1; --cc-bg: #e0f2fe; }
[data-class-color="slate"]   { --cc: #334155; --cc-bg: #e2e8f0; }
[data-class-color="fuchsia"] { --cc: #86198f; --cc-bg: #fae8ff; }
[data-class-color="emerald"] { --cc: #047857; --cc-bg: #d1fae5; }
[data-class-color="lime"]    { --cc: #4d7c0f; --cc-bg: #ecfccb; }
[data-class-color="yellow"]  { --cc: #a16207; --cc-bg: #fef9c3; }
[data-class-color="gray"]    { --cc: #475569; --cc-bg: #f1f5f9; }

/* ============================================================
   Browse Drugs layout
   ============================================================ */
.browse-hero { margin-bottom: 12px; }
.browse-hero h1 {
  margin: 0 0 4px;
  font-size: clamp(24px, 3.4vw, 30px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--c-brand);
}
.browse-sub { margin: 0; color: var(--c-text-muted); font-size: 14px; max-width: 720px; }

/* Search + Scan-to-Add row. Flex so the search input flexes to fill and the
   scan button sits flush on the right. On narrow screens (< 480 px) the
   label hides, leaving just the camera glyph so the search input keeps room. */
.browse-search-wrap {
  margin: 14px 0;
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.browse-search {
  font: inherit;
  font-size: 15px;
  flex: 1; min-width: 0;
  padding: 11px 14px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.browse-search:focus {
  outline: none;
  border-color: var(--c-brand-2);
  box-shadow: 0 0 0 3px rgba(31, 78, 121, 0.12);
}
.browse-scan-btn {
  display: inline-flex; align-items: center; gap: 6px;
  flex-shrink: 0;
  padding: 0 14px;
  background: var(--c-surface);
  color: var(--c-brand);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.browse-scan-btn:hover {
  background: var(--c-brand-soft);
  border-color: var(--c-brand-2);
  color: var(--c-brand-2);
}
.browse-scan-btn:active { transform: scale(0.985); }
.browse-scan-btn:focus-visible {
  outline: 2px solid var(--c-brand-2);
  outline-offset: 2px;
}
@media (max-width: 480px) {
  .browse-scan-btn { padding: 0 12px; }
  .browse-scan-label { display: none; }
}

/* ---- Class filter dropdown ---- */
.class-filter {
  position: relative;
  margin-bottom: 14px;
  max-width: 340px;
}
.class-filter-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--r-md);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  color: var(--c-text);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: background var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
}
.class-filter-trigger:hover { border-color: var(--cc); }
.class-filter.open .class-filter-trigger {
  border-color: var(--cc);
  background: var(--cc-bg);
}
.class-filter-trigger:focus-visible {
  outline: 2px solid var(--c-brand-2);
  outline-offset: 2px;
}
.class-filter-current { flex: 1; min-width: 0; line-height: 1.2; }
.class-filter-caret {
  font-size: 10px;
  color: var(--c-text-muted);
  transition: transform var(--t-fast) var(--ease-out);
}
.class-filter.open .class-filter-caret { transform: rotate(180deg); }

.class-filter-menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
}
.class-filter-search {
  width: 100%;
  padding: 7px 10px;
  border-radius: var(--r-sm);
  border: 1px solid var(--c-border);
  background: var(--c-surface-2);
  color: var(--c-text);
  font: inherit;
  font-size: 13px;
}
.class-filter-search:focus-visible {
  outline: none;
  border-color: var(--c-brand-2);
}
.class-filter-options {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 320px;
  overflow-y: auto;
}
.class-filter-option {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 9px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--c-text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  transition: background var(--t-fast) var(--ease-out);
}
.class-filter-option:hover { background: var(--cc-bg); }
.class-filter-option.active {
  background: var(--cc-bg);
  color: var(--cc);
  font-weight: 600;
}
.class-filter-option-label { flex: 1; min-width: 0; line-height: 1.25; }
.class-filter-option .class-chip-count { margin-left: auto; }
.class-filter-empty { padding: 10px 9px; }
.class-chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--cc);
  flex: 0 0 8px;
}
.class-chip-label { line-height: 1.2; }
.class-chip-count {
  background: var(--c-surface-2);
  color: var(--c-text-muted);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  margin-left: 1px;
}
.class-chip.active .class-chip-count {
  background: rgba(255, 255, 255, 0.65);
  color: var(--cc);
}

/* Recent row */
.browse-recent { margin: 4px 0 12px; }
.browse-recent-label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  font-size: 10.5px;
  margin-bottom: 6px;
}
.browse-recent-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.recent-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 999px;
  padding: 4px 11px 4px 8px;
  font-size: 13px;
  color: var(--c-text);
  text-decoration: none;
  transition: background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.recent-pill:hover {
  background: var(--cc-bg);
  border-color: var(--cc);
  text-decoration: none;
  transform: translateY(-1px);
}

/* ---- Drug card grid ---- */
.drug-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
  margin-top: 6px;
}
.drug-card {
  position: relative;
  display: flex;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  overflow: hidden;
  color: var(--c-text);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
}
.drug-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--cc);
  text-decoration: none;
}
.drug-card-strip {
  flex: 0 0 5px;
  background: var(--cc);
}
.drug-card-body {
  flex: 1;
  padding: 11px 13px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.drug-card-name {
  font-weight: 600;
  font-size: 15px;
  line-height: 1.25;
  color: var(--c-brand);
  word-break: break-word;
}
.drug-card-aliases {
  font-size: 12px;
  line-height: 1.35;
  word-break: break-word;
}
.drug-card-foot {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}
.class-badge {
  background: var(--cc-bg);
  color: var(--cc);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.01em;
}
.subclass-badge {
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--c-surface-2);
  color: var(--c-text-muted);
}
.sched-pill {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--c-surface-2);
  color: var(--c-text-muted);
  letter-spacing: 0.04em;
}
.sched-pill.sched-restricted {
  background: #fbd5d5;
  color: #7a1a14;
}
.nti-pill {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  background: #fff2dc;
  color: #8a4a00;
  border: 1px solid #f5c98a;
  letter-spacing: 0.02em;
}
.browse-footer {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--c-border);
  font-size: 12.5px;
}

@media (max-width: 600px) {
  .drug-grid { grid-template-columns: 1fr; gap: 8px; }
  .class-filter { max-width: none; }
  .class-chip-count { font-size: 10.5px; padding: 1px 6px; }
}

/* ============================================================
   Dashboard — header, principle card, toolkit, crisis modal
   ============================================================ */
.dashboard-header { margin-bottom: 14px; }
.dashboard-date {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  font-size: 11px;
  margin-bottom: 2px;
}
.dashboard-header h1 {
  margin: 0 0 4px;
  font-size: clamp(24px, 3.6vw, 32px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--c-brand);
}
.dashboard-tagline {
  margin: 0;
  color: var(--c-text-muted);
  font-size: 14px;
  max-width: 720px;
}

/* ---- Principle of the day ---- */
.principle-card {
  display: flex;
  background: linear-gradient(135deg, #1b2a4a 0%, #1f4e79 60%, #2a6fdb 130%);
  color: #fff;
  border-radius: var(--r-lg);
  padding: 18px 18px 18px 6px;
  margin-bottom: 14px;
  overflow: hidden;
  position: relative;
}
.principle-card::after {
  content: "";
  position: absolute;
  top: -40%;
  right: -10%;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(255,255,255,0.10), transparent 60%);
  pointer-events: none;
}
.principle-side {
  flex: 0 0 64px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 4px;
}
.principle-glyph {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 84px;
  line-height: 0.8;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.22);
}
.principle-body { flex: 1; min-width: 0; position: relative; z-index: 1; }
.principle-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 4px;
}
.principle-quote {
  margin: 0 0 8px;
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.principle-text {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
  max-width: 620px;
}
.principle-cycle {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.principle-cycle:hover { background: rgba(255, 255, 255, 0.22); }
.principle-cycle:active { transform: scale(0.97); }

@media (max-width: 600px) {
  .principle-side { flex: 0 0 36px; }
  .principle-glyph { font-size: 60px; }
}

/* ---- Safety toolkit ---- */
.toolkit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.toolkit-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 13px 14px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--c-text);
  transition: transform var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
}
.toolkit-card:hover {
  transform: translateY(-2px);
  border-color: var(--cc);
  box-shadow: var(--shadow-md);
}
.toolkit-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  background: var(--cc-bg);
  color: var(--cc);
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 700;
  flex: 0 0 36px;
}
.toolkit-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.toolkit-title { font-weight: 600; font-size: 14.5px; color: var(--c-brand); }
.toolkit-blurb { font-size: 12.5px; line-height: 1.4; }
.toolkit-chev {
  align-self: center;
  color: var(--c-text-soft);
  font-size: 22px;
  font-weight: 400;
  margin-left: 4px;
  transition: color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.toolkit-card:hover .toolkit-chev { color: var(--cc); transform: translateX(2px); }

/* ---- Crisis lines modal ---- */
.crisis-body { display: flex; flex-direction: column; gap: 12px; }
.crisis-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.crisis-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--c-surface-2);
  border-radius: var(--r-md);
  border: 1px solid var(--c-border);
}
.crisis-meta { flex: 1; min-width: 0; }
.crisis-name { font-weight: 700; color: var(--c-brand); font-size: 14.5px; }
.crisis-note { font-size: 12px; line-height: 1.4; margin-top: 1px; }
.crisis-phone {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 16px;
  color: var(--c-brand);
  background: #fff;
  border: 1px solid var(--c-border);
  padding: 7px 12px;
  border-radius: var(--r-md);
  text-decoration: none;
  transition: background var(--t-fast) var(--ease-out);
}
.crisis-phone:hover {
  background: var(--c-brand-soft);
  text-decoration: none;
}

/* ============================================================
   Interaction matrix (/matrix)
   ============================================================ */
.matrix-controls {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.matrix-search {
  font: inherit;
  font-size: 14px;
  flex: 1 1 240px;
  min-width: 220px;
  padding: 9px 12px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
}
.matrix-search:focus {
  outline: none;
  border-color: var(--c-brand-2);
  box-shadow: 0 0 0 3px rgba(31, 78, 121, 0.12);
}
.matrix-legend {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.matrix-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.matrix-legend-swatch {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.matrix-legend-label { font-size: 12px; }

/* The grid lives in a scrollable wrapper so big tables don't blow out the
   layout. Sticky row + column headers keep orientation while scrolling. */
.matrix-wrap {
  overflow: auto;
  max-height: calc(100vh - var(--header-h) - 220px);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  position: relative;
}
.matrix-grid {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 11px;
  table-layout: fixed;
}

/* Corner cell + header cells */
.matrix-corner {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 5;
  background: var(--c-surface);
  border-right: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  width: 200px;
  height: 150px;
}
.matrix-col-head {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  border-right: 1px solid rgba(0, 0, 0, 0.04);
  height: 150px;
  width: 22px;
  min-width: 22px;
  vertical-align: bottom;
  padding: 0;
  cursor: default;
}
.matrix-col-head-inner {
  /* Rotate the label so vertical column headers stay readable. */
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  padding: 6px 4px;
  font-weight: 600;
  color: var(--c-text);
  height: 144px;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
  font-size: 11px;
}
.matrix-row-head {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--c-surface);
  border-right: 1px solid var(--c-border);
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  width: 200px;
  min-width: 200px;
  max-width: 200px;
  padding: 4px 8px 4px 10px;
  font-size: 11px;
  font-weight: 600;
  text-align: left;
  color: var(--c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Cells */
/* Tab strip — switches between Subclass / Drug class / Receptor matrix views.
 * Lives inside .browse-hero, above the search/legend row. */
.matrix-tabs {
  display: flex;
  gap: 4px;
  margin-top: 12px;
  border-bottom: 1px solid var(--c-border);
}
.matrix-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 16px;
  font: inherit;
  color: var(--c-text-muted);
  cursor: pointer;
  margin-bottom: -1px;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.matrix-tab:hover {
  color: var(--c-brand);
  background: var(--c-surface-2);
}
.matrix-tab.is-active {
  color: var(--c-brand);
  border-bottom-color: var(--c-brand);
  font-weight: 600;
}

.matrix-cell {
  width: 22px;
  height: 22px;
  min-width: 22px;
  max-width: 22px;
  padding: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.35);
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-out), filter var(--t-fast) var(--ease-out);
}
.matrix-cell:hover { transform: scale(1.4); filter: brightness(1.08); z-index: 4; position: relative; outline: 1px solid var(--c-brand); }

/* Score colours — pale-to-dark gradient so dangerous cells stand out. */
.matrix-score-1 { background: #e8f5ee; }                  /* low risk */
.matrix-score-2 { background: var(--c-tier-2-bg); }       /* caution */
.matrix-score-3 { background: var(--c-tier-3); }          /* moderate (orange) */
.matrix-score-4 { background: var(--c-tier-4); }          /* high (red-orange) */
.matrix-score-5 { background: var(--c-tier-5); }          /* dangerous (deep red) */
.matrix-score-same {
  background: repeating-linear-gradient(
    45deg,
    var(--c-surface-2),
    var(--c-surface-2) 4px,
    #e7ecf3 4px,
    #e7ecf3 8px
  );
  cursor: pointer;
}

/* Refs-backed cell — class-pair has anchor papers cited. Overlay a small
 * white ★ in the corner to flag academic backing. Pseudo-element overlay
 * keeps the cell-painting logic clean. */
.matrix-cell--has-refs {
  position: relative;
}
.matrix-cell--has-refs::after {
  content: "★";
  position: absolute;
  top: 1px;
  right: 2px;
  font-size: 9px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}
/* Legend swatch for the ★ marker — render a tier-3 colour with the star
 * overlaid so the legend's example matches grid cells. */
.matrix-legend-swatch--refs {
  background: var(--c-tier-3);
  position: relative;
}
.matrix-legend-swatch--refs::after {
  content: "★";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #ffffff;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.55);
}
/* Modal-score ★ marker — slightly larger, gold against the tier colour. */
.matrix-modal-score-star {
  margin-left: 8px;
  color: #ffd75a;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.55);
  font-size: 0.85em;
}

/* No-data cell — class-pair has no anchor papers. Renders white with a red ×
 * to make absence of evidence visually distinct from a low-risk tier-1 cell.
 * The × is drawn with linear-gradients so it scales cleanly with the swatch
 * (used both in the matrix grid at 22px and in the legend at the same size). */
.matrix-cell--no-data {
  background-color: #ffffff;
  background-image:
    linear-gradient(to top left,
      transparent 0%,
      transparent calc(50% - 1px),
      #c8302a calc(50% - 1px),
      #c8302a calc(50% + 1px),
      transparent calc(50% + 1px),
      transparent 100%),
    linear-gradient(to top right,
      transparent 0%,
      transparent calc(50% - 1px),
      #c8302a calc(50% - 1px),
      #c8302a calc(50% + 1px),
      transparent calc(50% + 1px),
      transparent 100%);
  cursor: pointer;
}
.matrix-cell--no-data:hover { filter: none; }

/* Modal-sized score block when there is no data — wider × stroke for legibility */
.matrix-modal-score--no-data {
  background-color: #ffffff !important;
  background-image:
    linear-gradient(to top left,
      transparent 0%,
      transparent calc(50% - 1.5px),
      rgba(200,48,42,0.18) calc(50% - 1.5px),
      rgba(200,48,42,0.18) calc(50% + 1.5px),
      transparent calc(50% + 1.5px),
      transparent 100%),
    linear-gradient(to top right,
      transparent 0%,
      transparent calc(50% - 1.5px),
      rgba(200,48,42,0.18) calc(50% - 1.5px),
      rgba(200,48,42,0.18) calc(50% + 1.5px),
      transparent calc(50% + 1.5px),
      transparent 100%);
  color: #c8302a !important;
  border: 1px solid #f5d9d7;
}

/* Crosshair on hover */
.matrix-grid .matrix-x-row,
.matrix-grid .matrix-x-col { box-shadow: inset 0 0 0 1px var(--c-brand-2); }
.matrix-row-head.matrix-x-row,
.matrix-col-head.matrix-x-col { background: var(--c-brand-soft); color: var(--c-brand); }

/* Search filter: dim non-matching headers + their rows/columns. */
.matrix-grid.matrix-filtered .matrix-row-head.matrix-dim,
.matrix-grid.matrix-filtered .matrix-col-head.matrix-dim { opacity: 0.35; }
.matrix-grid.matrix-filtered .matrix-row-head.matrix-match,
.matrix-grid.matrix-filtered .matrix-col-head.matrix-match {
  background: #fff7d6;
  color: var(--c-brand);
}
.matrix-grid.matrix-filtered tr:has(.matrix-row-head.matrix-dim) .matrix-cell { opacity: 0.25; }

/* Modal styling for the pair detail */
.matrix-modal-body { display: flex; flex-direction: column; gap: 14px; }
.matrix-modal-pair {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 16px;
}
.matrix-modal-sub {
  background: var(--c-brand-soft);
  color: var(--c-brand);
  font-weight: 700;
  padding: 5px 11px;
  border-radius: var(--r-md);
}
.matrix-modal-plus { font-size: 20px; color: var(--c-text-muted); font-weight: 300; }
.matrix-modal-score {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--r-md);
}
.matrix-modal-score.matrix-score-1,
.matrix-modal-score.matrix-score-2 { color: var(--c-text); }
.matrix-modal-score.matrix-score-3,
.matrix-modal-score.matrix-score-4,
.matrix-modal-score.matrix-score-5 { color: #fff; }
.matrix-modal-score-num {
  font-size: 36px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.matrix-modal-score-label {
  font-size: 17px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ============================================================
   Multi-drug DDI screen
   ============================================================ */
.ddi-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 10px 12px;
  background: var(--c-surface-2);
  border: 1px dashed var(--c-border);
  border-radius: var(--r-md);
  min-height: 46px;
  margin-bottom: 10px;
}
.ddi-chips-empty { padding: 2px 4px; }
.ddi-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 4px 10px;
  background: var(--c-surface);
  border: 1px solid var(--cc, var(--c-border));
  border-radius: 999px;
  font-size: 13px;
  color: var(--c-text);
}
.ddi-chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--cc, var(--c-text-soft));
  flex: 0 0 8px;
}
.ddi-chip-name { font-weight: 600; }
.ddi-chip-x {
  background: transparent;
  border: 0;
  color: var(--c-text-muted);
  width: 20px;
  height: 20px;
  border-radius: 999px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.ddi-chip-x:hover { background: var(--c-tier-5-bg); color: var(--c-tier-5); }

/* Add-drug search */
.ddi-add { position: relative; margin-bottom: 10px; }
.ddi-add-input {
  font: inherit;
  font-size: 14px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
}
.ddi-add-input:focus {
  outline: none;
  border-color: var(--c-brand-2);
  box-shadow: 0 0 0 3px rgba(31, 78, 121, 0.12);
}
.ddi-add-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  max-height: 300px;
  overflow-y: auto;
  z-index: 30;
  padding: 4px;
}
.ddi-add-dropdown[hidden] { display: none; }
.ddi-add-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  background: transparent;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: var(--r-sm);
  color: var(--c-text);
  transition: background var(--t-fast) var(--ease-out);
}
.ddi-add-row:hover { background: var(--c-brand-soft); }
.ddi-add-row-text { flex: 1; min-width: 0; }
.ddi-add-row-name { font-weight: 600; font-size: 13.5px; }
.ddi-add-row-meta { font-size: 11.5px; }
.ddi-add-row-plus {
  flex: 0 0 auto;
  font-size: 18px;
  color: var(--c-text-soft);
}
.ddi-add-row:hover .ddi-add-row-plus { color: var(--c-brand); }

/* Controls */
.ddi-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 6px 0 14px;
}
.ddi-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-size: 13px;
  color: var(--c-text-muted);
  cursor: pointer;
}
.ddi-toggle input { width: 14px; height: 14px; cursor: pointer; }

/* Summary */
.ddi-summary-box { margin-bottom: 12px; }
.ddi-summary {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}
.ddi-summary-stats {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.ddi-summary-stat { display: flex; flex-direction: column; gap: 1px; align-items: flex-start; }
.ddi-summary-num {
  font-size: 24px;
  font-weight: 800;
  color: var(--c-brand);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.ddi-summary-lbl {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  font-size: 10.5px;
  color: var(--c-text-soft);
}
.ddi-summary-top { gap: 4px; }
.ddi-summary-top .tier-badge { font-size: 11px; padding: 3px 9px; }
.ddi-summary-bars {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ddi-summary-bar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 4px;
  background: var(--c-surface-2);
  border-radius: 999px;
}
.ddi-summary-bar-badge { font-size: 10.5px; padding: 2px 7px; }
.ddi-summary-bar-count { font-size: 12px; color: var(--c-text-muted); }
.ddi-summary-lead { margin: 0; font-size: 14px; line-height: 1.45; color: var(--c-text); }
.ddi-summary-lead strong { color: var(--c-text); }
.ddi-summary-ctx {
  margin: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px;
  color: var(--c-text-muted);
}
.ddi-link-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: inherit;
  color: var(--c-brand);
  cursor: pointer;
  text-decoration: underline;
}

/* Combined-effect syndrome panel */
.ddi-syndrome-panel {
  margin-top: 12px;
  padding: 12px 14px;
  background: #fff8f4;
  border: 1px solid #f2c9b3;
  border-radius: var(--r-md);
}
.ddi-syndrome-title { margin: 0 0 2px; font-weight: 800; color: #7a3410; letter-spacing: 0.02em; }
.ddi-syndrome-intro { margin: 0 0 10px; }
.ddi-syndrome-cards { display: flex; flex-direction: column; gap: 8px; }
.ddi-syndrome-card {
  padding: 10px 12px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
}
.ddi-syndrome-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.ddi-syndrome-name { font-weight: 700; font-size: 14px; color: var(--c-text); }
.ddi-syndrome-count {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  color: #7a3410;
  background: #fdecdf;
  border-radius: 999px;
  padding: 2px 8px;
}
.ddi-syndrome-blurb { margin: 0 0 6px; line-height: 1.45; }
.ddi-syndrome-note { margin: 0 0 6px; color: #7a1a14; font-weight: 600; }
.ddi-syndrome-contribs { margin-bottom: 8px; }
.ddi-syndrome-links { display: flex; flex-wrap: wrap; gap: 6px; }

/* A/B comparison */
.ddi-compare { display: flex; flex-direction: column; gap: 12px; }
.ddi-compare-note { margin: 0; }
.ddi-compare-diff {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}
.ddi-compare-diff-label { font-weight: 700; color: var(--c-text-soft); margin-right: 2px; }
.ddi-diff-chip {
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  padding: 2px 9px;
  border: 1px solid transparent;
}
.ddi-diff-add { background: #e7f6ec; border-color: #aedcbf; color: #18602f; }
.ddi-diff-remove { background: #fdecea; border-color: #f5b8b4; color: #7a1a14; }
.ddi-compare-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}
.ddi-compare-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  min-width: 0;
}
.ddi-compare-col-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.ddi-compare-badge {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--c-brand);
}
.ddi-compare-col-b .ddi-compare-badge { color: #6b3fa0; }
.ddi-compare-pair { cursor: default; }
@media (max-width: 640px) {
  .ddi-compare-cols { grid-template-columns: 1fr; }
}

/* Pair list */
.ddi-pair-list { display: flex; flex-direction: column; gap: 6px; }
.ddi-pair-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  font: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
  transition: transform var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
}
.ddi-pair-row:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.ddi-pair-row.expanded { box-shadow: var(--shadow-md); transform: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-color: transparent; }
.ddi-pair-row.tier-3 { border-left: 4px solid var(--c-tier-3); }
.ddi-pair-row.tier-4 { border-left: 4px solid var(--c-tier-4); }
.ddi-pair-row.tier-5 { border-left: 4px solid var(--c-tier-5); }
.ddi-pair-row.tier-6 { border-left: 4px solid var(--c-tier-6); }
/* New pair rows fade + slide in as the scenario changes (P4 live matrix). */
@keyframes ddiPairEnter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ddi-pair-enter { animation: ddiPairEnter 240ms var(--ease-out) both; }
.ddi-pair-top-tag {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-text-soft);
  border: 1px solid var(--c-border);
  border-radius: 999px;
  padding: 2px 7px;
  margin-left: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .ddi-pair-enter { animation: none; }
}
.ddi-pair-badge { flex: 0 0 auto; font-size: 11.5px; padding: 4px 9px; }
.ddi-pair-meta { flex: 1; min-width: 0; }
.ddi-pair-names { font-size: 14.5px; font-weight: 600; color: var(--c-brand); }
.ddi-pair-plus { margin: 0 6px; color: var(--c-text-soft); font-weight: 400; }
.ddi-pair-headline { margin-top: 1px; line-height: 1.35; color: var(--c-text); }
.ddi-pair-action { margin-top: 1px; line-height: 1.35; }
.ddi-pair-chev { flex: 0 0 auto; font-size: 22px; color: var(--c-text-soft); margin-left: 4px; }

/* Expanded — pair card sits below the row with continuous border */
.ddi-pair-card { display: flex; flex-direction: column; }
.ddi-pair-card .panel {
  border: 1px solid var(--c-border);
  border-top: 0;
  border-radius: 0 0 var(--r-md) var(--r-md);
  margin: 0;
}

.ddi-needs-more {
  text-align: center;
  padding: 22px;
}
.ddi-needs-more h2 { margin: 0 0 6px; color: var(--c-brand); }

/* ============================================================
   Dashboard: About card · Stat tiles · Featured classes
   ============================================================ */

/* ---- About card ---- */
.about-card {
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  padding: 14px 16px;
  margin-bottom: 14px;
}
.about-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.about-title-block { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.about-badge {
  background: var(--c-brand-soft);
  color: var(--c-brand);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
}
.about-title { margin: 0; font-size: 16px; font-weight: 700; color: var(--c-brand); }
.about-toggle {
  background: transparent;
  border: 1px solid var(--c-border);
  color: var(--c-text-muted);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.about-toggle:hover { background: var(--c-surface-2); color: var(--c-text); }

.about-body {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  transition: max-height var(--t-base) var(--ease-out), opacity var(--t-fast) var(--ease-out);
  max-height: 1200px;
}
.about-body.collapsed { max-height: 0; opacity: 0; margin: 0; pointer-events: none; }

.about-lede { margin: 0; font-size: 14px; line-height: 1.55; color: var(--c-text); }
.about-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13.5px;
  line-height: 1.5;
}
.about-points li {
  background: var(--c-surface-2);
  padding: 8px 12px;
  border-radius: var(--r-sm);
  border-left: 3px solid var(--c-brand-2);
}
.about-cta-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.btn-ghost {
  background: transparent;
  border: 1px solid var(--c-border);
  color: var(--c-brand);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.btn-ghost:hover { background: var(--c-brand-soft); border-color: var(--c-brand-2); }

/* ---- Stat tiles ---- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.stat-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px 13px;
  background: var(--cc-bg);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--c-text);
  transition: transform var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
}
.stat-tile:hover {
  transform: translateY(-2px);
  border-color: var(--cc);
  box-shadow: var(--shadow-md);
}
.stat-tile-icon {
  font-size: 22px;
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.6);
  color: var(--cc);
  display: grid;
  place-items: center;
  flex: 0 0 36px;
}
.stat-tile-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.stat-tile-num {
  font-size: 22px;
  font-weight: 800;
  color: var(--cc);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat-tile-lbl {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---- Featured classes ---- */
.featured-classes { margin-bottom: 14px; }
.featured-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  gap: 10px;
  flex-wrap: wrap;
}
.featured-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--c-brand);
}
.featured-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 8px;
}
.featured-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--cc);
  border-radius: var(--r-md);
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--c-text);
  transition: transform var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out);
}
.featured-card:hover {
  background: var(--cc-bg);
  transform: translateY(-1px);
}
.featured-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--cc);
  flex: 0 0 10px;
}
.featured-text { flex: 1; min-width: 0; }
.featured-name { font-weight: 600; font-size: 13.5px; color: var(--c-brand); }
.featured-count { font-size: 11.5px; color: var(--c-text-muted); margin-top: 1px; }

/* ============================================================
   My Medications — tonight's session plan
   ============================================================ */
.mymeds-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.mymeds-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mymeds-add > span:first-child { font-size: 16px; font-weight: 700; }

/* Empty state */
.mymeds-empty {
  text-align: center;
  padding: 36px 20px;
  background: var(--c-surface);
  border: 1px dashed var(--c-border);
  border-radius: var(--r-md);
}
.mymeds-empty-glyph { font-size: 40px; margin-bottom: 6px; }
.mymeds-empty h2 { margin: 4px 0 6px; color: var(--c-brand); font-size: 18px; }
.mymeds-empty p { margin: 4px 0; line-height: 1.5; max-width: 480px; margin-left: auto; margin-right: auto; }

/* Stats */
.mymeds-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.mymeds-stat-tile {
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--cc-bg);
  border: 1px solid transparent;
}
.mymeds-stat-num {
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  color: var(--cc);
  font-variant-numeric: tabular-nums;
}
.mymeds-stat-lbl {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.mymeds-stat-sub {
  margin-top: 1px;
  font-size: 12px;
  font-weight: 700;
  color: var(--cc);
}

/* Warnings panel */
.mymeds-warnings {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-tier-4);
  border-radius: var(--r-md);
  padding: 12px 14px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mymeds-warnings-head { display: flex; align-items: center; gap: 8px; }
.mymeds-warnings-icon {
  font-size: 18px;
  color: var(--c-tier-4);
}
.mymeds-warnings-title { margin: 0; font-size: 14.5px; color: var(--c-brand); }
.mymeds-warning {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--c-surface-2);
  border-radius: var(--r-sm);
  color: var(--c-text);
  text-decoration: none;
  transition: background var(--t-fast) var(--ease-out);
}
.mymeds-warning:hover { background: var(--c-brand-soft); text-decoration: none; }
.mymeds-warning .tier-badge { flex: 0 0 auto; font-size: 11px; padding: 3px 8px; }
.mymeds-warning-body { flex: 1; min-width: 0; }
.mymeds-warning-pair { font-weight: 600; font-size: 13.5px; color: var(--c-brand); }
.mymeds-warning-mech { margin-top: 1px; line-height: 1.35; }
.mymeds-warning-chev { color: var(--c-text-soft); font-size: 18px; flex: 0 0 auto; }

/* Substance card */
.mymeds-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mymeds-card {
  display: flex;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: opacity var(--t-fast) var(--ease-out);
}
.mymeds-card.taken { opacity: 0.78; }
.mymeds-card-strip {
  flex: 0 0 5px;
  background: var(--cc);
}
.mymeds-card-body {
  flex: 1;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.mymeds-card-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.mymeds-card-titles { flex: 1; min-width: 0; }
.mymeds-card-name {
  font-weight: 700;
  font-size: 16px;
  color: var(--c-brand);
}
.mymeds-card.taken .mymeds-card-name { text-decoration: line-through; text-decoration-color: var(--c-text-soft); }
.mymeds-card-class { margin-top: 1px; }
.mymeds-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mymeds-meta-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 9px;
  background: var(--c-surface-2);
  border-radius: 999px;
  font-size: 12px;
}
.mymeds-meta-pill.is-taken {
  background: #d1fae5;
  color: #065f46;
}
.mymeds-meta-label {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 10px;
  font-weight: 700;
  color: var(--c-text-soft);
}
.mymeds-meta-pill.is-taken .mymeds-meta-label { color: #047857; }
.mymeds-meta-value { font-weight: 600; color: var(--c-text); }
.mymeds-meta-pill.is-taken .mymeds-meta-value { color: #065f46; }
.mymeds-card-notes {
  margin: 0;
  padding: 8px 10px;
  background: var(--c-surface-2);
  border-radius: var(--r-sm);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--c-text-muted);
}
.mymeds-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.mymeds-card-remove { color: var(--c-tier-5); }
.mymeds-card-remove:hover { background: #fbd5d5; border-color: var(--c-tier-5); }

/* ---- Add / Edit sheet ---- */
.mymeds-sheet { display: flex; flex-direction: column; gap: 12px; }
.mymeds-field { display: flex; flex-direction: column; gap: 4px; }
.mymeds-field-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.mymeds-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mymeds-field-input, .mymeds-field-textarea {
  font: inherit;
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  width: 100%;
}
.mymeds-field-input:focus, .mymeds-field-textarea:focus {
  outline: none;
  border-color: var(--c-brand-2);
  box-shadow: 0 0 0 3px rgba(31, 78, 121, 0.12);
}
.mymeds-field-textarea { resize: vertical; min-height: 56px; }

.mymeds-sheet-selected {
  padding: 10px 12px;
  background: var(--c-surface-2);
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: 14px;
  color: var(--c-brand);
}
.mymeds-sheet-selected.empty { color: var(--c-text-soft); font-weight: 500; font-style: italic; }
.mymeds-sheet-search-wrap { position: relative; margin-top: 6px; }
.mymeds-sheet-input {
  font: inherit;
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  width: 100%;
  background: var(--c-surface);
}
.mymeds-sheet-input:focus {
  outline: none;
  border-color: var(--c-brand-2);
  box-shadow: 0 0 0 3px rgba(31, 78, 121, 0.12);
}
.mymeds-sheet-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  max-height: 260px;
  overflow-y: auto;
  z-index: 30;
  padding: 4px;
}
.mymeds-sheet-dropdown[hidden] { display: none; }
.mymeds-sheet-empty { padding: 8px 10px; }
.mymeds-sheet-result {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  text-align: left;
  font: inherit;
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--c-text);
  transition: background var(--t-fast) var(--ease-out);
}
.mymeds-sheet-result:hover { background: var(--cc-bg); }
.mymeds-sheet-dot {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--cc);
}
.mymeds-sheet-result-text { flex: 1; min-width: 0; }
.mymeds-sheet-result-name { font-weight: 600; font-size: 13.5px; }
.mymeds-sheet-result-meta { font-size: 11.5px; margin-top: 1px; }

/* Larger modal for the substance sheet */
.modal-shade .modal-card:has(.mymeds-sheet) { max-width: 560px; }

/* ============================================================
   Trip log
   ============================================================ */
.trip-privacy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--c-brand-soft);
  border: 1px solid #cdd9ea;
  border-radius: var(--r-md);
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--c-brand);
  max-width: 720px;
}
.trip-privacy-icon { font-size: 14px; flex: 0 0 auto; }

.trip-list { display: flex; flex-direction: column; gap: 10px; }
.trip-card {
  display: flex;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
}
.trip-card:hover {
  transform: translateY(-2px);
  border-color: var(--cc);
  box-shadow: var(--shadow-md);
}
.trip-card-strip { flex: 0 0 5px; background: var(--cc); }
.trip-card-body {
  flex: 1;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.trip-card-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.trip-card-titles { flex: 1; min-width: 0; }
.trip-card-name {
  font-weight: 700;
  font-size: 16px;
  color: var(--c-brand);
}
.trip-card-meta { margin-top: 1px; }
.trip-rating {
  flex: 0 0 auto;
  font-size: 14px;
  color: #ca8a04;
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
}
.trip-card-notes {
  margin: 0;
  padding: 8px 10px;
  background: var(--c-surface-2);
  border-radius: var(--r-sm);
  font-size: 13px;
  line-height: 1.5;
  color: var(--c-text);
  font-style: italic;
}
.trip-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.trip-tag {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--c-surface-2);
  color: var(--c-text-muted);
  font-weight: 500;
}
.trip-tag-setting { background: #e0f2fe; color: #075985; }
.trip-tag-company { background: #ede9fe; color: #5b21b6; }
.trip-tag-mood    { background: var(--cc-bg); color: var(--cc); }
.trip-tag-more    { background: var(--c-surface); border: 1px solid var(--c-border); }

/* Trip detail modal */
.trip-detail { display: flex; flex-direction: column; gap: 14px; }
.trip-detail-head {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  flex-wrap: wrap;
}
.trip-detail-grid {
  display: grid;
  grid-template-columns: 110px 1fr;
  row-gap: 8px;
  column-gap: 14px;
  margin: 0;
}
.trip-def-row { display: contents; }
.trip-def-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-text-soft);
  align-self: baseline;
}
.trip-def-value { margin: 0; font-size: 14px; }
.trip-section {
  background: var(--c-surface-2);
  padding: 10px 12px;
  border-radius: var(--r-md);
}
.trip-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: 4px;
}
.trip-section-body {
  margin: 0;
  white-space: pre-wrap;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--c-text);
}
.trip-detail-remove { color: var(--c-tier-5); margin-right: auto; }
.trip-detail-remove:hover { background: #fbd5d5; border-color: var(--c-tier-5); }

/* Trip add/edit sheet */
.trip-sheet { gap: 14px; }
.trip-sheet-section {
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.trip-sheet-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-brand);
}
.trip-chiprow {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.trip-chip {
  background: var(--c-surface-2);
  border: 1px solid transparent;
  color: var(--c-text);
  font: inherit;
  font-size: 12.5px;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.trip-chip:hover { background: var(--c-brand-soft); }
.trip-chip.on {
  background: var(--c-brand-soft);
  border-color: var(--c-brand-2);
  color: var(--c-brand);
  font-weight: 600;
}
.trip-rating-edit {
  display: flex;
  gap: 4px;
}
.trip-star {
  background: transparent;
  border: 0;
  color: #d6dbe4;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
  transition: color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.trip-star:hover { color: #facc15; }
.trip-star.on { color: #eab308; }
.trip-star:active { transform: scale(1.1); }
.trip-use-custom .mymeds-sheet-dot { background: var(--c-text-soft); }

/* Larger modal for the trip sheet — it's a tall form */
.modal-shade .modal-card:has(.trip-sheet) { max-width: 620px; }

/* Reference example trips — editorial content, distinct from real cards */
.examples-section {
  margin-top: 22px;
  border-top: 1px dashed var(--c-border);
  padding-top: 14px;
}
.examples-head {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 10px 14px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out);
}
.examples-head:hover { background: var(--c-surface-2); }
.examples-head-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--c-brand);
}
.examples-head-blurb { margin-top: 2px; line-height: 1.4; }
.examples-head-chev {
  font-size: 18px;
  color: var(--c-text-soft);
  flex: 0 0 auto;
}
.examples-grid {
  display: none;
  margin-top: 10px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}
.examples-section.open .examples-grid { display: grid; }

.example-card {
  position: relative;
  display: flex;
  background: linear-gradient(180deg, #fff7d6 0%, var(--c-surface) 80%);
  border: 1px solid #f5d970;
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
}
.example-card:hover {
  transform: translateY(-2px);
  border-color: var(--cc);
  box-shadow: var(--shadow-md);
}
.example-card-strip {
  flex: 0 0 5px;
  background: var(--cc);
}
.example-card-body {
  flex: 1;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.example-card-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.example-card-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.example-card-badge {
  align-self: flex-start;
  background: #fef3c7;
  color: #92400e;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid #f5c98a;
}
.example-card-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--c-brand);
  line-height: 1.2;
}
.example-card-lesson {
  background: rgba(255, 255, 255, 0.6);
  padding: 7px 10px;
  border-radius: var(--r-sm);
  border-left: 3px solid #92400e;
  line-height: 1.4;
  color: var(--c-text);
  font-size: 12.5px;
  font-style: italic;
}

/* Example detail modal */
.example-detail-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #fef3c7;
  border-radius: var(--r-md);
  border: 1px solid #f5c98a;
  line-height: 1.4;
}
.example-detail-lesson {
  background: #fef3c7;
  border-left: 4px solid #92400e;
  border-radius: var(--r-md);
  padding: 12px 14px;
}
.example-detail-lesson-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #92400e;
  margin-bottom: 4px;
}
.example-detail-lesson-body {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-text);
}

/* Community share opt-in inside the trip sheet */
.trip-share-optin {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px;
  background: var(--c-brand-soft);
  border: 1px solid #cdd9ea;
  border-radius: var(--r-md);
  cursor: pointer;
}
.trip-share-optin input { margin-top: 3px; flex: 0 0 auto; width: 16px; height: 16px; }
.trip-share-title { font-weight: 600; color: var(--c-brand); font-size: 13.5px; }
.trip-share-blurb { margin-top: 2px; line-height: 1.45; }
.trip-share-already {
  padding: 10px 12px;
  background: var(--c-surface-2);
  border-radius: var(--r-md);
  font-style: italic;
}
.trip-shared-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #d1fae5;
  color: #065f46;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

/* ============================================================
   Community page
   ============================================================ */
.community-status { padding: 24px 6px; }
.community-section { margin-top: 14px; }
.community-section-title {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-brand);
  margin: 0 0 8px;
}
.community-bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.community-bar-row {
  display: grid;
  grid-template-columns: 180px 1fr 60px;
  gap: 10px;
  align-items: center;
  padding: 6px 10px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
}
.community-bar-link {
  text-decoration: none;
  color: inherit;
  display: block;
}
.community-bar-link:hover .community-bar-row { background: var(--cc-bg); border-color: var(--cc); }
.community-bar-label {
  font-weight: 600;
  font-size: 13px;
  color: var(--c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.community-bar-track {
  height: 8px;
  background: var(--c-surface-2);
  border-radius: 999px;
  overflow: hidden;
}
.community-bar-fill {
  height: 100%;
  background: var(--cc);
  border-radius: 999px;
  min-width: 4px;
}
.community-bar-count {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c-text-muted);
}
.community-rating-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}
.community-rating-card {
  background: var(--cc-bg);
  border-radius: var(--r-md);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.community-rating-group { font-weight: 700; font-size: 13.5px; color: var(--cc); }
.community-rating-stars {
  font-size: 16px;
  letter-spacing: 1px;
  color: #ca8a04;
}

@media (max-width: 600px) {
  .community-bar-row { grid-template-columns: 1fr 50px; }
  .community-bar-track { display: none; }
}

/* =============================================================
 * Atlas Map (substance plane) + Daily Card (home)
 * From the "Dashboard Redesign" mockups. Visual language adapted
 * to the existing tia-web tokens.
 * ============================================================= */

:root {
  --t0: #6fb88c;
  --t1: var(--c-tier-1);
  --t2: var(--c-tier-2);
  --t3: var(--c-tier-3);
  --t4: var(--c-tier-4);
  --t5: var(--c-tier-5);
}

/* ---------- Atlas screen ---------- */
.atlas-screen {
  display: flex; flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--c-surface);
}

.atlas-header {
  padding: 20px 24px 12px;
  border-bottom: 1px solid var(--c-border);
}
.atlas-header-titlerow {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 12px;
  flex-wrap: wrap;
}
.atlas-eyebrow {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--c-text-muted);
}
.atlas-title {
  font-size: 36px; font-weight: 400; line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--c-brand);
  margin: 4px 0 0;
}
.atlas-title em {
  font-style: italic; color: var(--c-text-soft); font-weight: 400;
}
.atlas-search {
  display: flex; align-items: center; gap: 8px;
  padding: 0 12px; height: 40px; width: min(320px, 100%);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 8px; color: var(--c-text-soft);
  font-size: 13px;
  box-shadow: 0 1px 2px rgba(27,42,74, 0.04);
}
.atlas-search-icon { font-size: 14px; }
.atlas-search-text { flex: 1; }
.atlas-search-kbd {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px; padding: 2px 6px;
  background: var(--c-surface-2); border-radius: 4px;
  color: var(--c-text-muted);
}
.atlas-chips {
  display: flex; gap: 6px; flex-wrap: wrap;
  /* On narrow viewports, switch to a horizontal scroll instead of wrapping
     to a third row that would push the map further down the page. */
  scrollbar-width: thin;
}
@media (max-width: 720px) {
  .atlas-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 0 -16px; padding: 0 16px 4px;
    -webkit-overflow-scrolling: touch;
  }
  .atlas-chip { flex-shrink: 0; }
}
.atlas-chip {
  padding: 6px 14px;
  background: var(--c-surface);
  color: var(--c-text-muted);
  border: 1px solid var(--c-border);
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.atlas-chip:hover { color: var(--c-brand); border-color: var(--c-brand-2); }
.atlas-chip.is-active {
  background: var(--c-brand);
  color: #fff;
  border-color: var(--c-brand);
}

/* Row that holds filter chips on the left + layout toggle on the right.
   Flexes the chips to consume available space; toggle stays its own width. */
.atlas-chips-row {
  display: flex; align-items: center; gap: 12px;
  justify-content: space-between;
}
.atlas-chips-row > .atlas-chips { flex: 1; min-width: 0; }

/* Layout-mode toggle — segmented control. "Bands" / "Spread". */
.atlas-layout-toggle {
  display: inline-flex;
  flex-shrink: 0;
  padding: 2px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: 999px;
}
.atlas-layout-opt {
  padding: 5px 12px;
  background: transparent;
  border: 0;
  border-radius: 999px;
  font: inherit; font-size: 12px; font-weight: 600;
  color: var(--c-text-muted);
  cursor: pointer;
  transition: background 120ms, color 120ms;
}
.atlas-layout-opt:hover { color: var(--c-brand); }
.atlas-layout-opt.is-active {
  background: var(--c-brand);
  color: #fff;
}
@media (max-width: 480px) {
  /* Below 480 px wrap toggle below the chips so neither truncates. */
  .atlas-chips-row { flex-wrap: wrap; }
  .atlas-layout-toggle { margin-left: auto; }
}

/* Spread layout — hide the axis poles + quadrant key. Drug positions no
   longer encode the stimulant/sedating / mind/body axes in spread mode,
   so the labels would be actively misleading. */
.atlas-canvas--spread .atlas-axis-pole,
.atlas-canvas--spread .atlas-crosshair-h,
.atlas-canvas--spread .atlas-crosshair-v { display: none; }
.atlas-quadrant-key--spread { display: none; }

/* Body — atlas takes the full available area. The horizontal info-bar
 * that used to sit below the map ("rail") now opens as a click-triggered
 * detail popup, so the map gets all the vertical room.
 *
 * Substances are positioned in 0..1 world coords, so giving the map more
 * height/width simply spreads them out — "more spacious" comes free with
 * the taller pane. */
.atlas-split {
  flex: 1; min-height: 0;
  display: flex;
  flex-direction: column;
}

.atlas-map-pane {
  position: relative;
  flex: 1;
  background: var(--c-surface-2);
  overflow: hidden;
  /* Responsive min-height: stays generous on desktop but collapses on
     short viewports (landscape phones, ~400 px tall) so the map doesn't
     force a giant vertical scroll past the address bar.
       clamp(MIN, IDEAL, MAX)
         MIN  380 px — smallest landscape phone still readable
         IDEAL 75 vh — most desktop / tablet / portrait phone
         MAX  1000 px — caps the pane on huge desktop monitors so the
                         0..1 world coords don't stretch to absurd ratios */
  min-height: clamp(380px, 75vh, 1000px);
}

/* Landscape phones (short height) — compact the editorial header above
   the map so the atlas itself gets more vertical real estate. */
@media (orientation: landscape) and (max-height: 540px) {
  .atlas-header { padding: 10px 16px 8px; }
  .atlas-header-titlerow { gap: 8px; margin-bottom: 6px; }
  .atlas-eyebrow { font-size: 10px; }
  .atlas-title   { font-size: 20px; line-height: 1.05; }
  .atlas-search  { display: none; }   /* search is a desktop affordance — already a no-op tile */
  .atlas-map-pane { min-height: clamp(280px, 78vh, 600px); }
}
.atlas-grid {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(27,42,74,0.12) 1px, transparent 1px);
  background-size: 24px 24px;
}
/* Axis labels live INSIDE .atlas-canvas so they pan/zoom with the data
 * (always label the correct direction in world space). z-index must beat
 * the nodes (z-index 3) so labels stay readable even when a substance
 * sits on top of them; without this the UP / DOWN poles disappeared
 * behind the dissociative band at y=50%. */
.atlas-axis-pole {
  position: absolute;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--c-text-muted);
  background: rgba(255,255,255,0.95);
  padding: 4px 9px;
  border: 1px solid var(--c-border);
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(27,42,74,0.06);
  pointer-events: none;
  white-space: nowrap;
  z-index: 4;
}
.atlas-axis-up     { left: 4px;     top: 50%; transform: translateY(-50%); }
.atlas-axis-down   { right: 4px;    top: 50%; transform: translateY(-50%); }
.atlas-axis-heady  { left: 50%;     top: 4px; transform: translateX(-50%); }
.atlas-axis-bodied { left: 50%;     bottom: 4px; transform: translateX(-50%); }

/* Crosshair lines also live inside the canvas. They span 100% so when the
 * canvas pans, the crosshair pans with the data — meaning the "centre of
 * the world" stays where it should. */
.atlas-crosshair-h, .atlas-crosshair-v {
  position: absolute; background: rgba(27,42,74,0.08);
  pointer-events: none;
  z-index: 1;
}
.atlas-crosshair-h { left: 0; right: 0; top: 50%; height: 1px; }
.atlas-crosshair-v { top: 0; bottom: 0; left: 50%; width: 1px; }

.atlas-edges {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; overflow: visible;
  /* SVG uses 0..100 viewBox stretched to fill the canvas. Higher z-index than
   * the grid/axes but lower than the nodes themselves so edges appear under
   * the circles — except along the route between them. */
  z-index: 2;
}
.atlas-node { z-index: 3; }

/* Transform canvas — the layer that gets pan/zoom CSS-transformed. Nodes and
 * edges live inside it; grid + axes + legend + chips stay outside so they
 * provide a fixed frame of reference. transform-origin must be 0,0 so the
 * (panX, panY, zoom) math in atlas.js maps cleanly.
 *
 * SIZED LARGER THAN ITS PANE. The 0..1 world coords stretch across a
 * 160% × 160% canvas (2.56× the area of the pane), so 388 substances get
 * proper pixel-spacing even when world-coord spacing has to stay tight.
 * Initial pan in atlas.js (-0.30 × paneSize) centres the canvas in the
 * pane so users see the middle on first load; pan/zoom reveal the edges. */
.atlas-canvas {
  position: absolute;
  width: 160%; height: 160%;
  top: 0; left: 0;
  transform-origin: 0 0;
  will-change: transform;
}

/* Map-pane cursor reflects drag affordance. */
.atlas-map-pane { cursor: grab; user-select: none; }
.atlas-map-pane.is-dragging { cursor: grabbing; }
.atlas-map-pane.is-dragging .atlas-node { cursor: grabbing; }

/* Zoom controls — fixed bottom-right, mirrors the design's plus/close cluster. */
.atlas-zoom-controls {
  position: absolute; right: 22px; bottom: 18px;
  display: flex; gap: 4px; padding: 4px;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(8px);
  border: 1px solid var(--c-border); border-radius: 999px;
  box-shadow: 0 1px 3px rgba(27,42,74,0.08);
  z-index: 5;
}
.atlas-zoom-btn {
  width: 32px; height: 32px;
  background: transparent; border: 0;
  border-radius: 50%;
  font: inherit; font-size: 18px; line-height: 1;
  color: var(--c-brand); cursor: pointer;
  display: grid; place-items: center;
  transition: background 120ms, color 120ms;
}
.atlas-zoom-btn:hover {
  background: var(--c-brand-soft);
}
.atlas-zoom-reset {
  font-size: 16px;
}

/* Node circle sized to 26px so the full 402-substance atlas has more
 * breathing room and group zones can spread further without collisions.
 * Letters become tiny hints; the hover tooltip remains the primary reveal
 * of substance name + class + blurb. atlas.js positions nodes with -13px
 * offset to match the half-width. */
.atlas-node {
  position: absolute;
  width: 26px; height: 26px;
  background: transparent; border: 0; padding: 0; cursor: pointer;
  animation: atlas-node-in 320ms cubic-bezier(.2,.6,.3,1) both;
  transition: opacity 200ms;
}
.atlas-node.is-dim { opacity: 0.18; }
.atlas-node-dot {
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--c-surface);
  border: 1.5px solid var(--node-tier);
  font-size: 11px; font-weight: 600;
  color: var(--c-brand);
  box-shadow: 0 1px 3px rgba(27,42,74,0.10);
  transition: transform 220ms, box-shadow 220ms, background 220ms, color 220ms;
}
.atlas-node:hover .atlas-node-dot { transform: scale(1.35); z-index: 2; }
.atlas-node.is-picked .atlas-node-dot {
  background: var(--node-tier);
  color: #fff;
  box-shadow: 0 6px 16px -4px var(--node-tier);
}
.atlas-node-label {
  position: absolute;
  top: 30px;            /* circle ends at 26 px; +4 px gap so label clears */
  left: 50%; transform: translateX(-50%);
  white-space: nowrap;
  font-size: 10px; font-weight: 600;
  color: var(--c-brand);
  /* Pill background so the label stays readable when it lands over the
     dot grid, other nodes, or an edge. */
  background: rgba(255, 255, 255, 0.92);
  padding: 1px 5px;
  border-radius: 4px;
  /* Every substance shows its name. Hover/picked labels float to the top
     so they aren't hidden behind a neighbour's pill when nodes cluster. */
  opacity: 1;
  transition: opacity 120ms;
  pointer-events: none;
}
.atlas-node:hover { z-index: 5; }
.atlas-node:hover .atlas-node-label,
.atlas-node.is-picked .atlas-node-label { z-index: 6; }
.atlas-node-pulse {
  position: absolute; inset: -6px; border-radius: 50%;
  background: radial-gradient(circle, var(--node-tier) 0%, transparent 70%);
  opacity: 0.28;
  animation: atlas-pulse 2.4s ease-out infinite;
  pointer-events: none;
}
.atlas-node-warn {
  position: absolute; top: -2px; right: -2px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #c0392b; color: #fff;
  font-size: 7px; font-weight: 800;
  display: grid; place-items: center;
  border: 1.5px solid var(--c-surface);
}
.atlas-node-new {
  /* Sits just ABOVE the circle, centred — out of the way of the dot itself
     and the always-visible label below. */
  position: absolute;
  bottom: 100%; left: 50%; transform: translateX(-50%);
  margin-bottom: 2px;
  padding: 1px 4px; font-size: 7px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: 0.06em;
  background: var(--c-brand); color: #fff; border-radius: 3px;
  white-space: nowrap;
}

.atlas-legend {
  position: absolute; left: 22px; bottom: 18px;
  display: flex; gap: 14px; align-items: center;
  padding: 8px 14px;
  background: rgba(255,255,255,0.90); backdrop-filter: blur(8px);
  border: 1px solid var(--c-border); border-radius: 8px;
  box-shadow: 0 1px 3px rgba(27,42,74,0.08);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.atlas-legend-label { font-size: 11px; color: var(--c-text-muted); letter-spacing: 0.06em; text-transform: uppercase; }
.atlas-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.atlas-legend-dot { width: 10px; height: 10px; border-radius: 5px; display: inline-block; }
.atlas-legend-tier { font-size: 10px; color: var(--c-text-muted); letter-spacing: 0.04em; }
/* Edge-bucket legend swatches: short coloured line segments matching the
 * stroke styles applied to the SVG edges (dashed for safe, solid for
 * caution, dashed thicker for danger). */
.atlas-legend-line {
  display: inline-block;
  width: 22px; height: 2px;
  border-radius: 2px;
}
.atlas-legend-line--safe    { background: var(--c-tier-1); height: 1px; opacity: 0.7; }
.atlas-legend-line--caution { background: var(--c-tier-2); height: 2px; }
.atlas-legend-line--danger  { background: var(--c-tier-5); height: 2.5px; }

.atlas-picked-tag {
  position: absolute; left: 22px; top: 12px;
  padding: 5px 10px;
  background: var(--c-brand); color: #fff;
  border-radius: 6px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  z-index: 5;
}

/* Hover tooltip — floats over the map pane (not the canvas) and shows the
 * key facts about the hovered substance without committing the right rail
 * to a new selection. */
.atlas-tooltip {
  position: absolute;
  min-width: 240px; max-width: 280px;
  padding: 10px 12px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  box-shadow: 0 6px 14px rgba(27,42,74, 0.15);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 120ms, transform 120ms;
  z-index: 10;
  font-family: inherit;
}
.atlas-tooltip.is-visible { opacity: 1; transform: translateY(0); }
.atlas-tooltip-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.atlas-tooltip-name {
  font-size: 16px; font-weight: 600;
  color: var(--c-brand);
}
.atlas-tooltip-meta {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 4px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px; color: var(--c-text-muted);
  letter-spacing: 0.06em;
}
.atlas-tooltip-cls { text-transform: capitalize; }
.atlas-tooltip-blurb {
  margin-top: 8px;
  font-size: 12.5px; line-height: 1.4;
  color: var(--c-brand);
}
.atlas-tooltip-hint {
  margin-top: 8px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px; color: var(--c-text-soft);
  letter-spacing: 0.04em;
}

/* Compass — fixed reference for which way is which on the plane, independent
 * of pan/zoom. Sits in the bottom-left, below the legend would be too tight
 * so we anchor top-right (out of the way of the picked-tag in top-left and
 * the legend in bottom-left). */
/* Quadrant key — 2×2 grid in the top-right of the map pane. Replaces the
 * old compass with a more readable per-quadrant explainer (arrow + name +
 * example substances). Anchored to mapPane (not the transformed canvas) so
 * it stays visible regardless of pan/zoom. */
.atlas-quadrant-key {
  position: absolute; right: 22px; top: 12px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  padding: 6px;
  background: rgba(255,255,255,0.94); backdrop-filter: blur(8px);
  border: 1px solid var(--c-border); border-radius: 10px;
  box-shadow: 0 1px 3px rgba(27,42,74,0.08);
  z-index: 5;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  max-width: 232px;
}
.atlas-quadrant-cell {
  padding: 5px 8px;
  border-radius: 6px;
  min-width: 102px;
}
.atlas-quadrant-cell:hover { background: var(--c-brand-soft); }
.atlas-quadrant-head {
  display: flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700;
  color: var(--c-brand);
  letter-spacing: 0.04em;
}
.atlas-quadrant-arrow {
  font-size: 12px; color: var(--c-brand-2);
  font-family: -apple-system, "Segoe UI", sans-serif;  /* arrows render better in system font */
}
.atlas-quadrant-label { text-transform: uppercase; }
.atlas-quadrant-eg {
  font-size: 9px; color: var(--c-text-soft);
  line-height: 1.35; margin-top: 1px;
  letter-spacing: 0.02em;
}

/* Mobile / narrow viewports — collapse the key into a single column so it
 * doesn't crowd the map. */
@media (max-width: 640px) {
  .atlas-quadrant-key {
    grid-template-columns: 1fr;
    max-width: 160px;
  }
}

/* ============================================================
 * Atlas detail modal — opens when a substance node is clicked.
 * Replaces the persistent rail-below-the-map so the atlas itself
 * gets all the vertical space. Pulls quick facts, common pairings
 * (grouped by risk bucket), and references into one popup.
 * ============================================================ */

/* Widen the underlying .modal-card when it contains atlas detail —
   default modal max-width is 600px which crowds the pairings list. */
.modal-shade .modal-card:has(.atlas-detail-body) { max-width: 720px; }

.atlas-detail-body {
  display: flex; flex-direction: column; gap: 18px;
}

/* Header row — avatar + name + class/tier badges */
.atlas-detail-head {
  display: flex; align-items: center; gap: 14px;
}
.atlas-detail-avatar {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 22px;
  flex-shrink: 0;
}
.atlas-detail-titlecol { flex: 1; min-width: 0; }
.atlas-detail-name {
  font-size: 22px; font-weight: 600; color: var(--c-brand);
  line-height: 1.15; margin-bottom: 4px;
}
.atlas-detail-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.atlas-detail-cls {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--c-text-muted); font-weight: 600;
}
.atlas-detail-tier-label {
  font-size: 11px; color: var(--c-text-soft); font-weight: 500;
}
.atlas-detail-flag {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  padding: 2px 6px; border-radius: 4px;
  text-transform: uppercase;
}
.atlas-detail-flag--new  { background: var(--c-brand-soft); color: var(--c-brand-2); }
.atlas-detail-flag--warn { background: var(--c-tier-5); color: #fff; }

/* "Also known as" pill row */
.atlas-detail-aka {
  display: flex; align-items: baseline; gap: 8px;
  padding: 8px 12px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  font-size: 13px;
}
.atlas-detail-aka-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--c-text-muted); font-weight: 700;
  flex-shrink: 0;
}
.atlas-detail-aka-list { color: var(--c-text); }

/* Plain-language blurb */
.atlas-detail-blurb {
  font-size: 15px; line-height: 1.5; color: var(--c-text);
  padding: 10px 0;
  border-top: 1px solid var(--c-border-soft, var(--c-border));
  border-bottom: 1px solid var(--c-border-soft, var(--c-border));
}

/* Quick-facts 2x2 grid */
.atlas-detail-facts {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.atlas-detail-fact {
  padding: 10px 12px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: 8px;
}
.atlas-detail-fact-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--c-text-muted); font-weight: 700; margin-bottom: 3px;
}
.atlas-detail-fact-value {
  font-size: 14px; font-weight: 600; color: var(--c-brand);
  line-height: 1.2;
}

/* Section labels (Common pairings, References, ...) */
.atlas-detail-section-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--c-text-muted); font-weight: 700;
}

/* Pairings list */
.atlas-detail-pairs { display: flex; flex-direction: column; gap: 8px; }
.atlas-detail-pair-list { display: flex; flex-direction: column; gap: 4px; }
.atlas-detail-pair-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  text-align: left; cursor: pointer;
  font: inherit; color: inherit;
  transition: background 120ms, border-color 120ms, transform 60ms;
}
.atlas-detail-pair-row:hover {
  background: var(--c-brand-soft);
  border-color: var(--c-brand-2);
}
.atlas-detail-pair-row:active { transform: scale(0.995); }
.atlas-detail-pair-row--dangerous { border-left: 3px solid var(--c-tier-5); }
.atlas-detail-pair-row--caution   { border-left: 3px solid var(--c-tier-2); }
.atlas-detail-pair-row--safe      { border-left: 3px solid var(--c-tier-1); }
.atlas-detail-pair-text { flex: 1; min-width: 0; }
.atlas-detail-pair-name { font-size: 13px; font-weight: 600; color: var(--c-brand); line-height: 1.2; }
.atlas-detail-pair-why  {
  font-size: 12px; color: var(--c-text-muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.atlas-detail-pair-refcount {
  font-size: 11px; color: var(--c-text-soft);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  flex-shrink: 0;
}
.atlas-detail-empty {
  font-size: 13px; color: var(--c-text-muted);
  padding: 12px;
  background: var(--c-surface-2);
  border-radius: 8px;
  text-align: center;
}

/* References list */
.atlas-detail-refs { display: flex; flex-direction: column; gap: 8px; }

/* Footer action buttons */
.atlas-detail-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  width: 100%;
}
.atlas-detail-btn {
  flex: 1; min-width: 130px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-brand);
  font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
.atlas-detail-btn:hover {
  background: var(--c-brand-soft);
  border-color: var(--c-brand-2);
}
.atlas-detail-btn--primary {
  background: var(--c-brand);
  color: #fff;
  border-color: var(--c-brand);
}
.atlas-detail-btn--primary:hover {
  background: var(--c-brand-2);
  border-color: var(--c-brand-2);
}

/* Narrow viewports — stack the facts grid + actions to single column */
@media (max-width: 540px) {
  .atlas-detail-facts { grid-template-columns: 1fr; }
  .atlas-detail-actions { flex-direction: column; }
  .atlas-detail-btn { flex: 0 0 auto; width: 100%; }
}

/* Rail — horizontal info bar below the map. Three columns: substance
 * summary / common pairings / references + CTA. Wraps to a stacked
 * single-column layout under 900 px. */
.atlas-rail {
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
  padding: 18px 24px;
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(280px, 1fr) minmax(220px, 320px);
  gap: 24px;
  max-height: 320px;
  align-items: start;
}
.atlas-rail-col {
  display: flex; flex-direction: column; gap: 10px;
  min-width: 0;
  max-height: 280px;
  overflow-y: auto;
}
.atlas-rail-col-pairings .atlas-risk-list { gap: 4px; }
.atlas-rail-col-refs .atlas-cta { margin-top: 10px; }
@media (max-width: 900px) {
  .atlas-rail {
    grid-template-columns: 1fr;
    max-height: 50vh;
    overflow-y: auto;
  }
  .atlas-rail-col {
    max-height: none;
    overflow-y: visible;
  }
}
.atlas-rail-empty {
  color: var(--c-text-muted); font-size: 13px; padding: 12px;
}
.atlas-rail-label {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px; color: var(--c-text-muted);
  letter-spacing: 0.12em; text-transform: uppercase;
}
.atlas-rail-titlerow {
  margin-top: 10px;
  display: flex; align-items: flex-start; gap: 14px;
}
.atlas-rail-avatar {
  width: 70px; height: 70px; border-radius: 18px;
  color: #fff;
  display: grid; place-items: center;
  font-size: 34px; font-weight: 500;
}
.atlas-rail-titlecol { flex: 1; min-width: 0; }
.atlas-rail-name {
  font-size: 28px; font-weight: 500;
  line-height: 1; letter-spacing: -0.02em;
  color: var(--c-brand);
}
.atlas-rail-cls {
  font-size: 12px; color: var(--c-text-muted);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  margin-top: 4px; text-transform: capitalize;
}
.atlas-rail-tier {
  margin-top: 8px; display: inline-flex; align-items: center; gap: 6px;
}
.atlas-tier-badge {
  display: inline-block; min-width: 28px; padding: 2px 6px;
  border-radius: 4px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px; font-weight: 700; color: #fff;
  text-align: center;
}
.atlas-tier-label {
  font-size: 12px; color: var(--c-text-muted);
}

.atlas-rail-blurb {
  padding: 12px 14px;
  background: var(--c-surface-2); border: 1px solid var(--c-border);
  border-radius: 8px;
}
.atlas-rail-blurb-text {
  margin-top: 6px;
  font-size: 14px; line-height: 1.5; color: var(--c-brand);
}

/* Bucket headings group the pairings list by danger level so safe pairs
 * are always visible (otherwise top-tier-desc slicing would crowd them
 * out). Colour echoes the bucket. */
.atlas-bucket-head {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-top: 10px;
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-block;
}
.atlas-bucket-head--dangerous { background: #fbe5e5; color: #991b1b; }
.atlas-bucket-head--caution   { background: #fef0d8; color: #7c4a00; }
.atlas-bucket-head--safe      { background: #e6f4ed; color: #1b5e20; }

.atlas-risk-list { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.atlas-risk-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px;
  background: var(--c-surface-2); border: 1px solid var(--c-border);
  border-radius: 6px;
}
/* Bucket-tinted left border so each pairing row is scannable by colour
 * even before reading the badge label. Mirrors the green / yellow / red
 * edge buckets on the map itself. */
.atlas-risk-row--safe      { border-left: 3px solid var(--c-tier-1); }
.atlas-risk-row--caution   { border-left: 3px solid var(--c-tier-2); }
.atlas-risk-row--dangerous { border-left: 3px solid var(--c-tier-5); background: #fdf3f3; }
.atlas-risk-text { flex: 1; min-width: 0; }
.atlas-risk-name { font-size: 13px; font-weight: 600; color: var(--c-brand); }
.atlas-risk-why { font-size: 12px; color: var(--c-text-muted); line-height: 1.3; }
.atlas-risk-chev { color: var(--c-text-soft); font-size: 18px; }
.atlas-risk-refcount {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px; color: var(--c-text-muted);
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: 4px;
  padding: 2px 5px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* References block on the substance card — minimal RFID-only chips.
 * Less visual weight than the full buildRefRow cards used elsewhere
 * (intentional — the atlas is a quick-look navigation view, not the
 * full reading surface). Clicking a chip opens the source URL; the
 * EV grade + source type live in the title tooltip. */
.atlas-rail-refs { display: flex; flex-direction: column; gap: 6px; }
.atlas-ref-chips {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 4px;
}
.atlas-ref-chip {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--c-brand);
  text-decoration: none;
  transition: background 120ms, border-color 120ms;
}
.atlas-ref-chip:hover {
  background: var(--c-brand-soft);
  border-color: var(--c-brand-2);
  text-decoration: none;
}
/* Tier-tinted left border by EV grade — keeps the chips minimal but
 * still encodes evidence strength at a glance. EV01 (highest) green,
 * down to EV07 (lowest) grey. */
.atlas-ref-chip--ev01 { border-left: 3px solid #2e8b57; }
.atlas-ref-chip--ev02 { border-left: 3px solid #4a9c6f; }
.atlas-ref-chip--ev03 { border-left: 3px solid #6aaa86; }
.atlas-ref-chip--ev04 { border-left: 3px solid #c98a00; }
.atlas-ref-chip--ev05 { border-left: 3px solid #c98a00; }
.atlas-ref-chip--ev06 { border-left: 3px solid #aab3c2; }
.atlas-ref-chip--ev07 { border-left: 3px solid #aab3c2; }

.atlas-cta {
  margin-top: auto;
  padding: 12px 16px;
  background: var(--c-brand); color: #fff;
  border: 0; border-radius: 8px;
  font-family: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: background 120ms;
}
.atlas-cta:hover { background: var(--c-brand-2); }

@keyframes atlas-pulse {
  0%   { transform: scale(0.8); opacity: 0.45; }
  100% { transform: scale(1.7); opacity: 0; }
}
@keyframes atlas-node-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Daily Card (home) ---------- */
.daily-screen {
  display: flex; flex-direction: column;
  height: 100%; min-height: 0;
  padding: 24px;
  gap: 16px;
  max-width: 880px; margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}
.daily-header { display: flex; flex-direction: column; gap: 6px; }
.daily-edition {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--c-text-muted);
}
.daily-title {
  font-size: 40px; font-weight: 400; line-height: 0.95;
  letter-spacing: -0.02em; margin: 0;
  color: var(--c-brand);
}
.daily-title em { font-style: italic; color: var(--c-text-soft); font-weight: 400; }

.daily-story {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  min-height: 200px;
  padding: 24px 26px 22px;
  transition: background 320ms;
  box-shadow: 0 6px 14px rgba(27,42,74, 0.10);
}
.daily-story-bg {
  position: absolute; right: -40px; top: -40px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 70%);
  pointer-events: none;
}
.daily-story-inner {
  position: relative;
  z-index: 1;            /* keep content above the decorative bg layer */
  max-width: 540px;
  /* Reserve a clear strip at the bottom of the card for the dot indicator
     + prev/next arrows (both absolutely positioned at bottom: 12-14px,
     30 px tall). Without this, the Source link + CTA — the last items in
     the content flow — render UNDER the arrows, which (z-index:2) then
     swallow every click. This padding pushes the links safely above. */
  padding-bottom: 44px;
}
.daily-story-tag {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  opacity: 0.75;
  animation: daily-fadeup 360ms ease-out;
}
.daily-story-title {
  font-size: 36px; font-weight: 400; line-height: 1;
  letter-spacing: -0.02em; margin: 10px 0 8px;
  animation: daily-fadeup 360ms 60ms ease-out both;
}
.daily-story-body {
  font-size: 14px; line-height: 1.5; opacity: 0.9;
  margin-bottom: 12px;
  animation: daily-fadeup 360ms 120ms ease-out both;
}
.daily-story-cta {
  /* Works for both <button> (internal route) and <a target="_blank">
     (external source). `display: inline-block` + `text-decoration: none`
     make the anchor variant look identical to the button variant. */
  display: inline-block;
  background: rgba(255,255,255,0.16); color: inherit;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 999px; padding: 6px 14px;
  font: inherit; font-size: 12px; font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 160ms, transform 80ms;
  animation: daily-fadeup 360ms 180ms ease-out both;
}
.daily-story-cta:hover { background: rgba(255,255,255,0.26); }
.daily-story-cta:active { transform: scale(0.97); }
.daily-story-cta:focus-visible {
  outline: 2px solid rgba(255,255,255,0.9);
  outline-offset: 2px;
}

/* Prev/Next arrows for the alert carousel. Positioned at the bottom-right
   of the card so they pair visually with the dots at bottom-left and don't
   overlap the title or body. Touch users get swipe gestures (see daily.js),
   so arrows are primarily a desktop affordance. */
.daily-story-nav {
  position: absolute;
  bottom: 12px;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.16);
  color: inherit;
  border: 1px solid rgba(255,255,255,0.32);
  font-size: 18px; line-height: 1;
  padding: 0;
  cursor: pointer;
  transition: background 120ms, transform 80ms;
  z-index: 2;
}
.daily-story-nav:hover { background: rgba(255,255,255,0.30); }
.daily-story-nav:active { transform: scale(0.92); }
.daily-story-nav:focus-visible {
  outline: 2px solid rgba(255,255,255,0.9);
  outline-offset: 2px;
}
.daily-story-nav--prev { right: 50px; }
.daily-story-nav--next { right: 14px; }

/* Source attribution — small inline link below the story body. Color inherits
   from the parent so it reads correctly on any story background. */
.daily-story-source {
  display: inline-block;
  margin-top: 10px;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: inherit; opacity: 0.72;
  text-decoration: none;
  padding-bottom: 1px;
  border-bottom: 1px solid currentColor;
  animation: daily-fadeup 360ms 140ms ease-out both;
}
.daily-story-source:hover, .daily-story-source:focus-visible { opacity: 1; }
.daily-story-dots {
  position: absolute; bottom: 14px; left: 26px;
  display: flex; gap: 5px;
}
.daily-story-dot {
  width: 6px; height: 6px; border-radius: 3px;
  background: rgba(255,255,255,0.40);
  border: 0; padding: 0; cursor: pointer;
  transition: width 180ms, background 160ms;
}
.daily-story-dot.is-active { width: 18px; background: rgba(255,255,255,0.95); }

@keyframes daily-fadeup {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.daily-pulse {
  padding: 16px 18px;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: 10px;
}
.daily-pulse-head {
  display: flex; align-items: baseline; justify-content: space-between;
}
.daily-label {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px; color: var(--c-text-muted);
  letter-spacing: 0.10em; text-transform: uppercase;
}
.daily-live {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px; color: var(--c-text-muted); letter-spacing: 0.06em;
  display: inline-flex; align-items: center; gap: 6px;
}
.daily-live-dot {
  width: 6px; height: 6px; border-radius: 3px;
  background: var(--c-tier-1);
  display: inline-block;
  animation: daily-blink 1.4s ease-in-out infinite;
}
@keyframes daily-blink { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }

.daily-pulse-figrow {
  display: flex; align-items: baseline; gap: 10px;
  margin: 6px 0 10px;
}
.daily-pulse-fig {
  font-size: 42px; font-weight: 400;
  letter-spacing: -0.02em; line-height: 1;
  color: var(--c-brand);
  font-variant-numeric: tabular-nums;
}
.daily-pulse-sub { font-size: 12px; color: var(--c-text-muted); }

.daily-pulse-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
.daily-combo {
  padding: 8px 10px;
  background: var(--c-surface-2); border: 1px solid var(--c-border);
  border-radius: 6px;
}
/* Button variant — used by the "Most looked up" substance grid so each card
   acts as a clickable link to /drug/:id. Inherits text + colour so the inner
   .daily-combo-name still gets its brand colour. */
.daily-combo--clickable {
  display: block; width: 100%; text-align: left;
  font: inherit; color: inherit; cursor: pointer;
  transition: background 120ms, border-color 120ms, transform 80ms;
}
.daily-combo--clickable:hover {
  background: var(--c-brand-soft);
  border-color: var(--c-brand-2);
}
.daily-combo--clickable:active { transform: scale(0.985); }
.daily-combo--clickable:focus-visible {
  outline: 2px solid var(--c-brand-2);
  outline-offset: 2px;
}
.daily-combo-meta {
  display: flex; align-items: center; gap: 6px; margin-bottom: 2px;
}
.daily-combo-dot {
  width: 7px; height: 7px; border-radius: 4px; display: inline-block;
}
.daily-combo-dot--t0 { background: var(--t0); }
.daily-combo-dot--t1 { background: var(--c-tier-1); }
.daily-combo-dot--t2 { background: var(--c-tier-2); }
.daily-combo-dot--t3 { background: var(--c-tier-3); }
.daily-combo-dot--t4 { background: var(--c-tier-4); }
.daily-combo-dot--t5 { background: var(--c-tier-5); }
.daily-combo-tier {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px; color: var(--c-text-muted); letter-spacing: 0.06em;
}
.daily-combo-name { font-size: 13px; font-weight: 600; color: var(--c-brand); line-height: 1.2; }

.daily-quick { margin-bottom: 8px; }
.daily-quick-rows { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.daily-quick-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: 10px; text-align: left; cursor: pointer;
  color: var(--c-brand);
  font: inherit; font-size: 14px; font-weight: 500;
  transition: background 120ms, border-color 120ms;
}
.daily-quick-row:hover {
  background: var(--c-brand-soft);
  border-color: var(--c-brand-2);
}
.daily-quick-icon { font-size: 18px; }
.daily-quick-label { flex: 1; }
.daily-quick-chev { color: var(--c-text-soft); font-size: 18px; }

/* Safety & resources — same row chrome as Quick, with a two-line text block
   (label + sub). Rendered as <a> rather than <button> so right-click and
   long-press menus work for external links. */
.daily-safety { margin-bottom: 16px; }
.daily-safety-rows {
  display: flex; flex-direction: column; gap: 6px; margin-top: 6px;
}
.daily-safety-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: 10px;
  text-decoration: none;
  color: var(--c-brand);
  font: inherit; font-size: 14px;
  transition: background 120ms, border-color 120ms;
}
.daily-safety-row:hover {
  background: var(--c-brand-soft);
  border-color: var(--c-brand-2);
}
.daily-safety-row:focus-visible {
  outline: 2px solid var(--c-brand-2);
  outline-offset: 2px;
}
.daily-safety-icon { font-size: 18px; }
.daily-safety-text { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.daily-safety-label { font-weight: 600; line-height: 1.2; }
.daily-safety-sub   { font-size: 12px; color: var(--c-text-muted); font-weight: 400; }
.daily-safety-ext   { color: var(--c-text-soft); font-size: 14px; }

@media (max-width: 600px) {
  .daily-screen { padding: 16px; }
  .daily-title { font-size: 32px; }
  .daily-story { padding: 20px 22px 20px; }
  .daily-story-title { font-size: 28px; }
  .daily-pulse-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Scan to Add — camera photo → Workers AI vision → drug match
   ============================================================ */
.scan-modal {
  display: flex; flex-direction: column; gap: 16px;
}

/* Stage 1 — pick a photo */
.scan-intro {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 8px;
  padding: 8px 0 4px;
}
.scan-icon { font-size: 40px; line-height: 1; }
.scan-headline {
  margin: 0;
  font-size: 22px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--c-brand);
}
.scan-hint {
  margin: 0;
  font-size: 13px; line-height: 1.55;
  color: var(--c-text-muted);
  max-width: 44ch;
}

/* Primary "take a photo" button — full width, prominent */
.scan-btn-primary {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  padding: 14px 16px;
  background: var(--c-brand);
  color: #fff;
  border: 1px solid var(--c-brand);
  border-radius: 12px;
  font: inherit; font-size: 15px; font-weight: 600;
  cursor: pointer;
  transition: background 120ms, transform 60ms;
}
.scan-btn-primary:hover { background: var(--c-brand-2); border-color: var(--c-brand-2); }
.scan-btn-primary:active { transform: scale(0.985); }

.scan-btn-secondary {
  display: block; width: 100%;
  padding: 10px 14px;
  background: var(--c-surface-2);
  color: var(--c-brand);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
.scan-btn-secondary:hover { background: var(--c-brand-soft); border-color: var(--c-brand-2); }

/* Stages 2+ — preview thumbnail of the photo the user just took */
.scan-preview {
  display: block; max-width: 100%;
  max-height: 220px;
  margin: 0 auto;
  border-radius: 10px;
  border: 1px solid var(--c-border);
  object-fit: contain;
  background: var(--c-surface-2);
}

/* Stage 2 — analyzing spinner */
.scan-status {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  background: var(--c-surface-2);
  border-radius: 10px;
}
.scan-spinner {
  width: 18px; height: 18px;
  border: 2px solid var(--c-border);
  border-top-color: var(--c-brand);
  border-radius: 50%;
  animation: scan-spin 700ms linear infinite;
  flex-shrink: 0;
}
@keyframes scan-spin { to { transform: rotate(360deg); } }
.scan-status-text { font-size: 14px; color: var(--c-text-muted); }

/* Stage 3 — what the model detected */
.scan-detected {
  display: flex; align-items: baseline; gap: 10px;
  padding: 10px 14px;
  background: var(--c-brand-soft);
  border: 1px solid var(--c-brand-2);
  border-radius: 10px;
}
.scan-detected-label {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--c-brand-2);
  flex-shrink: 0;
}
.scan-detected-name {
  font-size: 17px; font-weight: 600; color: var(--c-brand);
  word-break: break-word;
}

.scan-section-label {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--c-text-muted);
  margin-top: 4px;
}

/* Match list — clickable rows that add a drug to the stack on tap */
.scan-matches { display: flex; flex-direction: column; gap: 6px; }
.scan-match-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  text-align: left;
  font: inherit; color: inherit;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, transform 60ms;
}
.scan-match-row:hover {
  background: var(--c-brand-soft);
  border-color: var(--c-brand-2);
}
.scan-match-row:active { transform: scale(0.995); }
.scan-match-text { flex: 1; min-width: 0; }
.scan-match-name {
  font-size: 15px; font-weight: 600; color: var(--c-brand);
  line-height: 1.2;
}
.scan-match-group {
  font-size: 12px; color: var(--c-text-muted);
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.scan-match-add {
  font-size: 13px; font-weight: 600;
  color: var(--c-brand-2);
  flex-shrink: 0;
}

.scan-empty, .scan-error {
  padding: 14px 16px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  font-size: 13px; line-height: 1.5;
  color: var(--c-text-muted);
}
.scan-error {
  background: rgba(185, 28, 28, 0.05);
  border-color: rgba(185, 28, 28, 0.18);
  color: var(--c-text);
}
.scan-error-title {
  font-size: 14px; font-weight: 700;
  color: var(--c-emergency);
  margin-bottom: 4px;
}
.scan-error-detail { color: var(--c-text-muted); font-size: 13px; }

/* Scan-to-add button on My Meds — secondary visual weight (Add substance
   stays primary). */
.mymeds-scan {
  display: inline-flex; align-items: center; gap: 6px;
}

/* ============================================================
   AI tools usage panel — home-screen counters that show how many
   label scans + pill IDs have been done. Two stats per tool:
   the "this week" headline and the "all-time" footer total.
   Each card is a link to where the tool lives, so the stat
   doubles as a CTA.
   ============================================================ */
.daily-tools { margin-bottom: 16px; }
.daily-tools-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 6px;
}
.daily-tool-card {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  color: var(--c-brand);
  text-decoration: none;
  transition: background 120ms, border-color 120ms, transform 80ms;
}
.daily-tool-card:hover {
  background: var(--c-brand-soft);
  border-color: var(--c-brand-2);
}
.daily-tool-card:active { transform: scale(0.99); }
.daily-tool-icon {
  font-size: 28px; line-height: 1;
  flex-shrink: 0;
}
.daily-tool-stat {
  display: flex; align-items: baseline; gap: 6px;
  flex: 1; min-width: 0;
}
.daily-tool-stat-fig {
  font-size: 22px; font-weight: 600;
  color: var(--c-brand);
  font-variant-numeric: tabular-nums;
}
.daily-tool-stat-unit {
  font-size: 12px; font-weight: 500;
  color: var(--c-text-muted);
}
.daily-tool-stat-foot {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px; letter-spacing: 0.06em;
  color: var(--c-text-soft);
  flex-shrink: 0;
  margin-left: auto;
}
.daily-tool-stat-total { font-weight: 700; color: var(--c-text-muted); }

/* Stack on narrow viewports so the grid doesn't squish the numbers. */
@media (max-width: 540px) {
  .daily-tools-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Pill Identifier — standalone screen at /pill-id
   ------------------------------------------------------------
   Same upload→AI vision pipeline as Scan-to-Add, but the result
   surface is structured-features-first (imprint / colour / shape
   / scoring / size) with the matched medication shown as a
   "best guess" — the user verifies, the app doesn't claim.
   ============================================================ */
/* Scan / Identify Medication — unified page shell + mode toggle. Reuses the
   .scan-* and .pillid-* primitives for capture / results below. */
.scanid-screen {
  display: flex; flex-direction: column; gap: 18px;
}
.scanid-body {
  display: flex; flex-direction: column; gap: 18px;
}

/* Segmented control switching between Scan label and Identify a pill. */
.scanid-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 6px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
}
.scanid-toggle-btn {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.scanid-toggle-btn:hover { background: rgba(31, 78, 121, 0.06); }
.scanid-toggle-btn.is-active {
  background: var(--c-surface);
  border-color: var(--c-border-strong);
  box-shadow: var(--shadow-sm);
}
.scanid-toggle-icon { font-size: 22px; line-height: 1; flex-shrink: 0; }
.scanid-toggle-text { display: flex; flex-direction: column; min-width: 0; }
.scanid-toggle-label {
  font-size: 15px; font-weight: 700; color: var(--c-text);
}
.scanid-toggle-btn.is-active .scanid-toggle-label { color: var(--c-brand-2); }
.scanid-toggle-sub {
  font-size: 12px; color: var(--c-text-soft); margin-top: 1px;
}

/* Scan-label match row with two actions (Add to cabinet / Open). */
.scanid-match {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}
.scanid-match-text { flex: 1; min-width: 0; }
.scanid-match-actions { display: flex; gap: 8px; flex-shrink: 0; }
.scanid-match-btn {
  padding: 8px 12px;
  font-size: 13px; font-weight: 600;
  color: var(--c-brand-2);
  background: var(--c-surface);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.scanid-match-btn:hover { background: var(--c-brand-soft); }
.scanid-match-add {
  color: #fff;
  background: var(--c-brand-2);
  border-color: var(--c-brand-2);
}
.scanid-match-add:hover { background: var(--c-brand); border-color: var(--c-brand); }
@media (max-width: 560px) {
  .scanid-match { flex-direction: column; align-items: stretch; }
  .scanid-match-actions { width: 100%; }
  .scanid-match-btn { flex: 1; text-align: center; }
}

.pillid-screen {
  display: flex; flex-direction: column; gap: 18px;
}

/* Persistent red-tinted safety callout — pinned above the capture surface
   so the verify-with-pharmacist message is unavoidable. */
.pillid-safety {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px;
  background: rgba(185, 28, 28, 0.05);
  border: 1px solid rgba(185, 28, 28, 0.20);
  border-left: 4px solid var(--c-emergency);
  border-radius: 10px;
}
.pillid-safety-icon {
  font-size: 22px; line-height: 1;
  color: var(--c-emergency);
  flex-shrink: 0;
  padding-top: 2px;
}
.pillid-safety-body { flex: 1; min-width: 0; }
.pillid-safety-title {
  font-size: 14px; font-weight: 700;
  color: var(--c-emergency);
  letter-spacing: 0.02em;
}
.pillid-safety-detail {
  margin-top: 4px;
  font-size: 13px; line-height: 1.5;
  color: var(--c-text);
}

/* Stage container — children swapped by re-rendering with new state. */
.pillid-body {
  display: flex; flex-direction: column; gap: 14px;
}

/* Stage 1 — pick a photo */
.pillid-capture {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 12px;
  padding: 36px 24px;
  background: var(--c-surface);
  border: 1px dashed var(--c-border);
  border-radius: 14px;
}
.pillid-capture-icon {
  font-size: 56px; line-height: 1;
}
.pillid-capture-hint {
  margin: 0;
  font-size: 14px; line-height: 1.55;
  color: var(--c-text-muted);
  max-width: 48ch;
}

/* Photo preview thumbnail — used by analyzing / result / error stages */
.pillid-preview {
  display: block; max-width: 100%;
  max-height: 260px;
  margin: 0 auto;
  border-radius: 12px;
  border: 1px solid var(--c-border);
  object-fit: contain;
  background: var(--c-surface-2);
}

/* What we see — features panel */
.pillid-features {
  padding: 14px 16px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 12px;
}
.pillid-features-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 10px;
}
.pillid-features-label {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--c-text-muted);
}
.pillid-confidence {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--c-surface-2);
  color: var(--c-text-muted);
  border: 1px solid var(--c-border);
}
.pillid-confidence--low    { color: var(--c-emergency); background: rgba(185, 28, 28, 0.07); border-color: rgba(185, 28, 28, 0.20); }
.pillid-confidence--medium { color: #b45309; background: rgba(180, 83, 9, 0.07); border-color: rgba(180, 83, 9, 0.22); }
.pillid-confidence--high   { color: #15803d; background: rgba(21, 128, 61, 0.07); border-color: rgba(21, 128, 61, 0.22); }

.pillid-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}
.pillid-feature {
  padding: 10px 12px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: 8px;
}
.pillid-feature-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: 3px;
}
.pillid-feature-value {
  font-size: 14px; font-weight: 600;
  color: var(--c-brand);
  word-break: break-word;
}

/* Ambiguity banner — sits above the imprint-match list. Pill imprints can
   map to multiple medications (e.g. "D 5" = Diazepam OR Dextroamphetamine);
   this banner makes that ambiguity visible so the user knows to compare
   their pill against the brand / appearance / region of each candidate. */
.pillid-ambiguity-note {
  padding: 12px 14px;
  background: rgba(180, 83, 9, 0.06);
  border: 1px solid rgba(180, 83, 9, 0.25);
  border-left: 4px solid #b45309;
  border-radius: 10px;
}
.pillid-ambiguity-title {
  font-size: 13px; font-weight: 600; line-height: 1.5;
  color: var(--c-text);
}

/* Imprint match rows — extra meta (brand · appearance · region) below the
   drug name so users can disambiguate between multiple candidates. */
.pillid-imprint-row { padding: 12px 14px; }
.pillid-imprint-meta {
  display: flex; flex-wrap: wrap; gap: 4px 10px;
  margin-top: 4px;
  font-size: 12px;
  color: var(--c-text-muted);
}
.pillid-imprint-brand      { font-weight: 600; color: var(--c-brand); }
.pillid-imprint-appearance { font-style: italic; }
.pillid-imprint-region {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px; letter-spacing: 0.06em;
  padding: 1px 6px; border-radius: 3px;
  background: var(--c-surface-2); border: 1px solid var(--c-border);
  color: var(--c-text-muted);
}
.pillid-imprint-warning {
  display: flex; align-items: flex-start; gap: 6px;
  margin-top: 6px;
  padding: 6px 8px;
  background: rgba(185, 28, 28, 0.06);
  border-radius: 6px;
  font-size: 12px; line-height: 1.4;
  color: var(--c-text);
}
.pillid-imprint-warning-icon {
  color: var(--c-emergency); font-weight: 700;
  flex-shrink: 0;
}

/* AI suggestion box — now a SECONDARY signal, demoted relative to imprint
   matches. Still rendered when no imprint hit; carries a clear caveat. */
.pillid-suggestion {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 16px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 12px;
}
.pillid-suggestion-label {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--c-text-muted);
}
.pillid-suggestion-name {
  font-size: 17px; font-weight: 600;
  color: var(--c-brand);
  word-break: break-word;
}
.pillid-suggestion-caveat {
  font-size: 12px; line-height: 1.5;
  color: var(--c-text-muted);
  margin-top: 2px;
}

.pillid-section-label {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--c-text-muted);
  margin-top: 4px;
}

/* Fallback when structured extraction fails but the model returned prose —
   show the description verbatim with a note about manual verification. */
.pillid-prose {
  padding: 14px 16px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 12px;
}
.pillid-prose-text {
  margin: 6px 0 10px;
  font-size: 14px; line-height: 1.55;
  color: var(--c-text);
  white-space: pre-wrap;          /* preserve paragraph breaks the model emits */
}
.pillid-prose-hint {
  margin: 0;
  font-size: 12px; line-height: 1.5;
  color: var(--c-text-muted);
}

/* ============================================================
   Glossary tooltip — floating popover for chips with
   data-glossary="<raw_tag>". Renders category + title + body
   + (optional) why-it-matters. Driven by
   js/components/glossary_tooltip.js.
   ============================================================ */
.glossary-tooltip {
  position: fixed;
  top: -9999px; left: -9999px;   /* parked off-screen until shown */
  z-index: 100;                  /* above everything except modals */
  max-width: 360px;
  padding: 12px 14px;
  background: #ffffff;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  box-shadow: 0 12px 28px -8px rgba(27,42,74, 0.20),
              0 4px 8px -2px rgba(27,42,74, 0.10);
  font-size: 13px; line-height: 1.55;
  color: var(--c-text);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-2px);
  transition: opacity 120ms, transform 120ms;
}
.glossary-tooltip.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.glossary-tooltip-category {
  display: inline-block;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--c-brand-2);
  background: var(--c-brand-soft);
  padding: 2px 6px;
  border-radius: 4px;
  margin-bottom: 6px;
}
.glossary-tooltip-title {
  font-size: 14px; font-weight: 700;
  color: var(--c-brand);
  margin-bottom: 4px;
  line-height: 1.25;
}
.glossary-tooltip-body {
  margin: 0;
  color: var(--c-text);
}
.glossary-tooltip-why {
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--c-border);
  font-size: 12px;
  color: var(--c-text-muted);
}

/* Chip affordance — anything with data-glossary becomes a cursor:help
   target so users notice the hover-state semantics. */
[data-glossary] {
  cursor: help;
  outline: none;
}
[data-glossary]:focus-visible {
  box-shadow: 0 0 0 2px var(--c-brand-2);
  border-radius: inherit;
}

/* ============================================================
   The Compendium — drug classes by body system.
   Fully namespaced under .cmp (cmp- prefixed classes, tokens
   scoped to the wrapper) so it never collides with app styles.
   Display/mono fonts fall back to system stacks because the
   strict CSP (font-src 'self') blocks the prototype's Google
   Fonts; the serif + mono hierarchy is preserved.
   ============================================================ */
.cmp {
  /* ink — cool clinical navy/grey (matches app --c-text / --c-border scale) */
  --cmp-ink-950: #081a2e;
  --cmp-ink-900: #1b2a4a;
  --cmp-ink-800: #1f3a5a;
  --cmp-ink-700: #3d4a5e;
  --cmp-ink-500: #4b5567;
  --cmp-ink-400: #6b7280;
  --cmp-ink-300: #aab3c2;
  --cmp-ink-200: #d6dbe4;
  --cmp-ink-100: #e9edf3;
  --cmp-ink-50:  #f0f3f8;
  /* cool surfaces (white card on grey-blue page, matches app --c-surface / --c-bg) */
  --cmp-paper: #ffffff;
  --cmp-bone:  #f5f7fb;
  --cmp-ash:   #f0f3f8;
  /* type — system sans throughout (matches app --font-sans / --font-mono) */
  --cmp-f-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --cmp-f-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --cmp-f-mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
  /* themeable */
  --cmp-accent: #1f4e79;
  --cmp-feature: #1b2a4a;
  /* density */
  --cmp-row-pad-y: 12px;
  --cmp-name-size: 17px;

  font-family: var(--cmp-f-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--cmp-ink-900);
  background: var(--cmp-bone);
  margin: -16px;
}
.cmp *,
.cmp *::before,
.cmp *::after { box-sizing: border-box; }
.cmp button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
.cmp[data-density="compact"] { --cmp-row-pad-y: 9px; --cmp-name-size: 15px; }

/* ── Chrome strip (search + actions) ── */
.cmp-chrome {
  position: sticky; top: 0; z-index: 6;
  display: flex; align-items: center; gap: 20px;
  height: 52px; padding: 0 20px;
  background: color-mix(in oklch, var(--cmp-paper) 88%, transparent);
  backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid var(--cmp-ink-200);
}
.cmp-brand {
  display: flex; align-items: center; gap: 11px;
  font-family: var(--cmp-f-mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--cmp-ink-900); font-weight: 500; white-space: nowrap;
}
.cmp-brand svg { flex: none; }
.cmp-brand:hover { color: var(--cmp-accent); }
.cmp-search { flex: 1; max-width: 540px; margin: 0 auto; position: relative; display: flex; align-items: center; }
.cmp-search input {
  width: 100%; height: 36px; padding: 0 16px 0 40px;
  font: inherit; font-size: 13px; color: var(--cmp-ink-900);
  background: var(--cmp-paper);
  border: 1px solid var(--cmp-ink-200); border-radius: 9999px;
  outline: none; transition: border-color .14s, box-shadow .14s;
}
.cmp-search input::placeholder { color: var(--cmp-ink-400); }
.cmp-search input:focus {
  border-color: color-mix(in oklch, var(--cmp-accent) 55%, var(--cmp-ink-200));
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--cmp-accent) 12%, transparent);
}
.cmp-search .cmp-mag { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--cmp-ink-400); pointer-events: none; }
.cmp-chrome-actions { display: flex; align-items: center; gap: 4px; }
.cmp-tb-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--cmp-f-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--cmp-ink-500);
  padding: 7px 11px; border-radius: 8px; transition: color .14s, background .14s;
}
.cmp-tb-link:hover { color: var(--cmp-ink-900); background: var(--cmp-ink-100); }
.cmp-tb-link .cmp-gly { font-size: 13px; opacity: .8; }
.cmp-rd-badge {
  display: inline-grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 9999px; background: var(--cmp-accent); color: var(--cmp-paper);
  font-family: var(--cmp-f-mono); font-size: 9.5px; margin-left: 6px;
}

/* ── Layout ── */
.cmp-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); }
.cmp-sidebar {
  background: linear-gradient(180deg, color-mix(in oklch, var(--cmp-accent) 7%, var(--cmp-bone)), var(--cmp-bone) 55%);
  border-right: 1px solid var(--cmp-ink-200);
  padding: 22px 22px 44px; display: flex; flex-direction: column; gap: 22px;
}
.cmp-main { padding: 28px 36px 80px; max-width: 1080px; }

/* ── Home: figure-left layout, friendlier main + research feed ── */
.cmp-home-main { padding: 28px 36px 80px; max-width: 1080px; }
.cmp-home-stats { display: flex; gap: 6px 22px; flex-wrap: wrap; align-items: baseline; text-align: right; }
.cmp-home-stat {
  font-family: var(--cmp-f-mono); font-size: 10.5px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--cmp-ink-500); white-space: nowrap;
}
.cmp-home-stat b { font-size: 15px; color: var(--cmp-ink-900); margin-right: 4px; }

.cmp-home-explore { margin-top: 26px; }
.cmp-home-research { margin-top: 36px; }
.cmp-home-sec { display: flex; flex-direction: column; gap: 3px; margin-bottom: 16px; }
.cmp-home-sec-h {
  font-family: var(--cmp-f-display); font-weight: 700; font-size: 18px;
  letter-spacing: -0.01em; color: var(--cmp-ink-900);
}
.cmp-home-sec-sub { font-size: 13px; color: var(--cmp-ink-500); max-width: 560px; }

.cmp-home-condhits { margin: 0 0 16px; }
.cmp-home-condhits-h {
  display: block; font-family: var(--cmp-f-mono); font-size: 10.5px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--cmp-ink-500);
  margin-bottom: 8px;
}
.cmp-home-condchips { display: flex; flex-wrap: wrap; gap: 8px; }
.cmp-home-condchip {
  font: inherit; font-family: var(--cmp-f-display); font-size: 13px; font-weight: 600;
  padding: 7px 14px; border-radius: 9999px; cursor: pointer;
  color: var(--cmp-accent); background: color-mix(in oklch, var(--cmp-accent) 8%, transparent);
  border: 1px solid color-mix(in oklch, var(--cmp-accent) 26%, transparent);
  transition: background .15s, border-color .15s;
}
.cmp-home-condchip:hover { background: color-mix(in oklch, var(--cmp-accent) 15%, transparent); }

.cmp-home-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cmp-sys-card {
  display: flex; align-items: center; gap: 13px; text-align: left;
  padding: 13px 15px; border-radius: 13px; cursor: pointer;
  background: var(--cmp-paper); border: 1px solid var(--cmp-ink-200);
  transition: border-color .15s, box-shadow .15s, transform .05s;
}
.cmp-sys-card:hover {
  border-color: color-mix(in oklch, var(--tc) 55%, var(--cmp-ink-200));
  box-shadow: 0 4px 16px -8px color-mix(in oklch, var(--tc) 60%, transparent);
}
.cmp-sys-card:active { transform: translateY(1px); }
.cmp-sys-num {
  flex: none; width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--cmp-f-mono); font-size: 12px; font-weight: 600;
  color: var(--tc); background: var(--tbg);
}
.cmp-sys-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.cmp-sys-name {
  font-family: var(--cmp-f-display); font-weight: 700; font-size: 15px;
  letter-spacing: -0.01em; color: var(--cmp-ink-900);
}
.cmp-sys-meta { font-family: var(--cmp-f-mono); font-size: 10.5px; color: var(--cmp-ink-500); }
.cmp-sys-chev { flex: none; color: var(--cmp-ink-300); }
.cmp-sys-card:hover .cmp-sys-chev { color: var(--tc); }

/* Research feed cards */
.cmp-rsch-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cmp-rsch-card {
  display: flex; flex-direction: column; gap: 9px;
  padding: 15px 16px; border-radius: 14px;
  background: var(--cmp-paper); border: 1px solid var(--cmp-ink-200);
}
.cmp-rsch-cond {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font: inherit; text-align: left; cursor: pointer; width: 100%;
}
.cmp-rsch-cond-name {
  font-family: var(--cmp-f-display); font-weight: 700; font-size: 15.5px;
  letter-spacing: -0.01em; color: var(--cmp-ink-900);
}
.cmp-rsch-cond-go {
  flex: none; font-family: var(--cmp-f-mono); font-size: 10.5px; font-weight: 600;
  color: var(--cmp-accent); opacity: 0; transition: opacity .15s;
}
.cmp-rsch-card:hover .cmp-rsch-cond-go { opacity: 1; }
.cmp-rsch-evi { display: flex; align-items: center; gap: 8px; }
.cmp-rsch-badge { font-size: 13px; letter-spacing: 1px; color: #c98a00; }
.cmp-rsch-label {
  font-family: var(--cmp-f-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--cmp-ink-600);
}
.cmp-rsch-treat { font-size: 13px; color: var(--cmp-ink-600); line-height: 1.4; }
.cmp-rsch-treat b { color: var(--cmp-ink-900); }
.cmp-rsch-link {
  align-self: flex-start; margin-top: auto;
  font-family: var(--cmp-f-mono); font-size: 11px; font-weight: 600;
  color: var(--cmp-accent); text-decoration: none;
  padding-top: 2px; border-bottom: 1px solid transparent;
}
.cmp-rsch-link:hover { border-bottom-color: currentColor; }

@media (max-width: 860px) {
  .cmp-home-grid, .cmp-rsch-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .cmp-home-main { padding: 22px 18px 80px; }
}

/* ── Body figure ── */
.cmp-figure-wrap { position: relative; }
.cmp-figure-wrap svg { display: block; width: 100%; height: auto; overflow: visible; }
.cmp-fig-body { fill: color-mix(in oklch, var(--cmp-ink-300) 40%, var(--cmp-paper)); }
.cmp-fig-leader { stroke: var(--cmp-ink-300); stroke-width: 1; }
.cmp-fig-label { font-family: var(--cmp-f-display); font-size: 13px; font-weight: 500; fill: var(--cmp-ink-700); }
.cmp-fig-marker { cursor: pointer; }
.cmp-fig-marker .cmp-mk-ring { fill: var(--cmp-paper); stroke-width: 1.5; transition: r .2s; }
.cmp-fig-marker .cmp-mk-num { font-family: var(--cmp-f-mono); font-size: 11px; font-weight: 500; text-anchor: middle; dominant-baseline: central; }
.cmp-fig-marker:hover .cmp-mk-ring { filter: brightness(0.97); }
.cmp-fig-marker.active .cmp-mk-ring { stroke-width: 2.5; }
.cmp-fig-marker.active .cmp-mk-halo { opacity: 1; }
.cmp-mk-halo { opacity: 0; transition: opacity .2s; }

/* ── Index of systems ── */
.cmp-idx-label { font-family: var(--cmp-f-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cmp-ink-500); margin-bottom: 4px; }
.cmp-idx-list { display: flex; flex-direction: column; }
.cmp-idx-row {
  display: grid; grid-template-columns: 26px 1fr auto; align-items: baseline; gap: 10px;
  padding: 8px 8px; border-radius: 8px; text-align: left;
  border-top: 1px solid var(--cmp-ink-200); transition: background .14s, color .14s; width: 100%;
}
.cmp-idx-list .cmp-idx-row:first-child { border-top: 0; }
.cmp-idx-row .cmp-ix-num { font-family: var(--cmp-f-mono); font-size: 11px; color: var(--cmp-ink-400); }
.cmp-idx-row .cmp-ix-name { font-family: var(--cmp-f-display); font-weight: 600; font-size: 15px; letter-spacing: -0.01em; color: var(--cmp-ink-800); }
.cmp-idx-row .cmp-ix-count { font-family: var(--cmp-f-mono); font-size: 12px; color: var(--cmp-ink-400); }
.cmp-idx-row:hover { background: color-mix(in oklch, var(--cmp-accent) 6%, transparent); }
.cmp-idx-row.active { background: color-mix(in oklch, var(--cmp-accent) 11%, transparent); }
.cmp-idx-row.active .cmp-ix-name { color: var(--cmp-accent); }
.cmp-idx-row.active .cmp-ix-num, .cmp-idx-row.active .cmp-ix-count { color: color-mix(in oklch, var(--cmp-accent) 70%, var(--cmp-ink-500)); }

/* ── Nested problems & conditions (rail) ── */
.cmp-idx-group { display: flex; flex-direction: column; }
.cmp-cx-list { display: none; flex-direction: column; padding: 2px 0 8px 30px; }
.cmp-idx-group.open .cmp-cx-list { display: flex; }
.cmp-cx-row {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 8px;
  padding: 5px 8px; border-radius: 7px; text-align: left; width: 100%;
  transition: background .14s, color .14s;
}
.cmp-cx-row .cmp-cx-name { font-family: var(--cmp-f-display); font-size: 13px; color: var(--cmp-ink-600); }
.cmp-cx-row .cmp-cx-count { font-family: var(--cmp-f-mono); font-size: 11px; color: var(--cmp-ink-400); }
.cmp-cx-row:hover { background: color-mix(in oklch, var(--cmp-accent) 6%, transparent); }
.cmp-cx-row.active { background: color-mix(in oklch, var(--cmp-accent) 14%, transparent); }
.cmp-cx-row.active .cmp-cx-name { color: var(--cmp-accent); font-weight: 600; }
.cmp-cx-row.active .cmp-cx-count { color: color-mix(in oklch, var(--cmp-accent) 70%, var(--cmp-ink-500)); }

/* ── Condition chips (system page) ── */
.cmp-cond-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 18px; }
.cmp-cond-lbl { font-family: var(--cmp-f-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cmp-ink-500); margin-right: 2px; }
.cmp-cond-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--cmp-f-display); font-size: 13px; color: var(--cmp-ink-700);
  background: var(--cmp-paper); border: 1px solid var(--cmp-ink-200);
  padding: 5px 11px; border-radius: 999px; cursor: pointer; transition: background .14s, border-color .14s, color .14s;
}
.cmp-cond-chip .cmp-cc-n { font-family: var(--cmp-f-mono); font-size: 11px; color: var(--cmp-ink-400); }
.cmp-cond-chip:hover { border-color: var(--cmp-accent); }
.cmp-cond-chip.active { background: var(--cmp-accent); border-color: var(--cmp-accent); color: #fff; }
.cmp-cond-chip.active .cmp-cc-n { color: rgba(255, 255, 255, 0.8); }

/* ── Main header ── */
.cmp-crumb { font-family: var(--cmp-f-mono); font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--cmp-accent); margin-bottom: 10px; }
.cmp-head-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; }
.cmp-title { font-family: var(--cmp-f-display); font-weight: 700; font-size: 30px; line-height: 1.1; letter-spacing: -0.02em; margin: 0; color: var(--cmp-ink-900); max-width: 16ch; text-wrap: balance; }
.cmp-head-meta { font-family: var(--cmp-f-mono); font-size: 12px; line-height: 1.7; text-align: right; color: var(--cmp-ink-400); white-space: nowrap; letter-spacing: 0.04em; padding-top: 10px; }
.cmp-head-meta b { color: var(--cmp-ink-800); font-weight: 500; }
.cmp-rule { height: 1px; background: var(--cmp-ink-900); margin: 16px 0 22px; }
.cmp-lede-row { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; margin-bottom: 30px; }
.cmp-lede { font-family: var(--cmp-f-sans); font-size: 15px; line-height: 1.55; color: var(--cmp-ink-700); margin: 0; text-wrap: pretty; }

/* ── Featured card ── */
.cmp-feature { position: relative; overflow: hidden; background: var(--cmp-feature); color: var(--cmp-paper); border-radius: 14px; padding: 18px 20px; min-height: 150px; display: flex; flex-direction: column; box-shadow: 0 14px 32px -16px color-mix(in oklch, var(--cmp-feature) 70%, transparent); }
.cmp-fx-glyph { position: absolute; right: -10px; top: -12px; opacity: .16; pointer-events: none; }
.cmp-fx-eyebrow { font-family: var(--cmp-f-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in oklch, var(--cmp-paper) 72%, var(--cmp-feature)); margin-bottom: auto; }
.cmp-fx-name { font-family: var(--cmp-f-display); font-weight: 700; letter-spacing: -0.02em; font-size: 21px; line-height: 1.1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.cmp-fx-eg { font-family: var(--cmp-f-sans); font-size: 13px; color: color-mix(in oklch, var(--cmp-paper) 82%, var(--cmp-feature)); margin-top: 5px; }
.cmp-fx-meta { font-family: var(--cmp-f-mono); font-size: 11.5px; letter-spacing: 0.04em; color: color-mix(in oklch, var(--cmp-paper) 78%, var(--cmp-feature)); margin-top: 14px; }
.cmp-fx-link { font-family: var(--cmp-f-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cmp-paper); margin-top: 14px; display: inline-flex; gap: 7px; align-items: center; transition: gap .14s; }
.cmp-fx-link:hover { gap: 11px; }
.cmp-pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--cmp-f-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px; border-radius: 9999px; white-space: nowrap; }
.cmp-pill .cmp-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cmp-fx-name .cmp-pill { background: color-mix(in oklch, var(--cmp-paper) 16%, transparent); color: var(--cmp-paper); border: 1px solid color-mix(in oklch, var(--cmp-paper) 32%, transparent); }

/* ── Filters / sort ── */
.cmp-filters-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.cmp-flbl { font-family: var(--cmp-f-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cmp-ink-500); }
.cmp-showing { font-family: var(--cmp-f-mono); font-size: 11.5px; letter-spacing: 0.06em; color: var(--cmp-ink-400); white-space: nowrap; }
.cmp-sort-menu { position: relative; }
.cmp-showing-btn { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.cmp-showing-btn:hover { color: var(--cmp-ink-700); }
.cmp-sort-pop { position: absolute; right: 0; top: 28px; z-index: 8; background: var(--cmp-paper); border: 1px solid var(--cmp-ink-200); border-radius: 12px; box-shadow: 0 10px 28px -8px color-mix(in oklch, var(--cmp-ink-950) 30%, transparent); padding: 6px; min-width: 184px; display: none; }
.cmp-sort-pop.show { display: block; }
.cmp-sort-opt { display: flex; justify-content: space-between; align-items: center; width: 100%; font-family: var(--cmp-f-mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--cmp-ink-700); padding: 9px 12px; border-radius: 8px; text-align: left; }
.cmp-sort-opt:hover { background: var(--cmp-ink-100); }
.cmp-sort-opt.active { color: var(--cmp-accent); }
.cmp-chips { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.cmp-chip { display: inline-flex; align-items: center; gap: 8px; font-family: var(--cmp-f-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cmp-ink-700); padding: 7px 13px; border-radius: 9999px; border: 1px solid var(--cmp-ink-200); background: var(--cmp-paper); transition: all .14s; }
.cmp-chip:hover { border-color: var(--cmp-ink-300); }
.cmp-chip .cmp-cdot { width: 8px; height: 8px; border-radius: 50%; }
.cmp-chip[aria-pressed="true"] { background: var(--cmp-accent); color: var(--cmp-paper); border-color: var(--cmp-accent); }
.cmp-chip[aria-pressed="true"] .cmp-cdot { background: var(--cmp-paper) !important; }
.cmp-empty-list { padding: 60px 8px; color: var(--cmp-ink-400); font-family: var(--cmp-f-mono); font-size: 13px; letter-spacing: .04em; }

/* ── Entry list ── */
.cmp-entries { margin-top: 8px; }
.cmp-entry { display: flex; align-items: center; gap: 14px; padding: var(--cmp-row-pad-y) 6px; border-top: 1px solid var(--cmp-ink-200); text-align: left; width: 100%; transition: background .14s; cursor: pointer; }
.cmp-entry:hover { background: color-mix(in oklch, var(--cmp-accent) 5%, transparent); }
.cmp-e-num { flex: none; width: 26px; font-family: var(--cmp-f-mono); font-size: 12px; color: var(--cmp-ink-400); }
.cmp-e-ico { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; }
.cmp-e-main { flex: 1 1 auto; min-width: 0; }
.cmp-e-title { display: flex; align-items: baseline; gap: 13px; flex-wrap: wrap; }
.cmp-e-name { font-family: var(--cmp-f-display); font-weight: 600; letter-spacing: -0.01em; font-size: var(--cmp-name-size); line-height: 1.15; color: var(--cmp-ink-900); white-space: nowrap; }
.cmp-e-eg { font-family: var(--cmp-f-sans); font-size: 12.5px; color: var(--cmp-ink-500); white-space: nowrap; }
.cmp-e-meta { display: block; margin-top: 8px; font-family: var(--cmp-f-mono); font-size: 11.5px; letter-spacing: 0.03em; color: var(--cmp-ink-400); text-transform: uppercase; }
.cmp-e-meta .cmp-mech { color: var(--cmp-ink-700); }
.cmp-sep { opacity: .5; margin: 0 2px; }
.cmp-tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--cmp-f-mono); font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; padding: 3px 9px; border-radius: 9999px; border: 1px solid; white-space: nowrap; }
.cmp-tag .cmp-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cmp-tag.rx { color: var(--cmp-ink-700); border-color: color-mix(in oklch, var(--cmp-ink-700) 40%, var(--cmp-ink-200)); }
.cmp-tag.otc { color: #2e8b57; border-color: color-mix(in oklch, #2e8b57 45%, var(--cmp-ink-200)); }
.cmp-tag.ctrl { color: #991b1b; border-color: color-mix(in oklch, #991b1b 42%, var(--cmp-ink-200)); }
.cmp-e-grade { flex: none; display: flex; align-items: center; justify-content: flex-end; }
.cmp-grade { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; font-family: var(--cmp-f-sans); font-weight: 600; font-size: 13px; }
.cmp[data-badge="solid"] .cmp-grade { color: #fff; }
.cmp[data-badge="outline"] .cmp-grade { background: transparent !important; border: 1.5px solid; }
.cmp[data-badge="pill"] .cmp-grade { border-radius: 9999px; width: auto; padding: 0 13px; height: 30px; }
.cmp-e-chev { flex: none; width: 18px; color: var(--cmp-ink-300); display: grid; place-items: center; transition: color .14s, transform .14s; }
.cmp-entry:hover .cmp-e-chev { color: var(--cmp-accent); transform: translateX(2px); }
/* Risk band pill on the condition-filtered ranked-drug rows. */
.cmp-e-risk { flex: none; font-family: var(--cmp-f-mono); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; padding: 4px 11px; border-radius: 9999px; border: 1.5px solid; white-space: nowrap; font-weight: 600; }
.cmp-grade-none { color: var(--cmp-ink-300); border: 1.5px dashed color-mix(in oklch, var(--cmp-ink-300) 60%, transparent); background: transparent !important; }
.cmp-e-save { flex: none; width: 30px; height: 30px; display: grid; place-items: center; color: var(--cmp-ink-300); border-radius: 7px; }
.cmp-e-save:hover { color: var(--cmp-accent); background: color-mix(in oklch, var(--cmp-accent) 9%, transparent); }
.cmp-e-save[aria-pressed="true"] { color: var(--cmp-accent); }
.cmp-e-save[aria-pressed="true"] svg { fill: var(--cmp-accent); }

/* ── Drugs that act on this system (per-system drug index) ── */
#cmp-system-drugs:empty { display: none; }
.cmp-dg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 34px; padding-top: 22px; border-top: 2px solid var(--cmp-ink-200); }
.cmp-dg-title { font-family: var(--cmp-f-display); font-weight: 600; letter-spacing: -0.01em; font-size: 19px; color: var(--cmp-ink-900); }
.cmp-dg-count { font-family: var(--cmp-f-mono); font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cmp-ink-400); }
.cmp-dg-note { margin: 6px 0 16px; font-family: var(--cmp-f-sans); font-size: 12.5px; line-height: 1.5; color: var(--cmp-ink-500); max-width: 60ch; }
.cmp-dg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.cmp-dg-item { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--cmp-ink-200); border-radius: 10px; background: var(--cmp-paper, #fff); text-align: left; width: 100%; cursor: pointer; transition: border-color .14s, background .14s; }
.cmp-dg-item:hover { border-color: var(--cmp-accent); background: color-mix(in oklch, var(--cmp-accent) 5%, transparent); }
.cmp-dg-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; }
.cmp-dg-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cmp-dg-name { font-family: var(--cmp-f-sans); font-weight: 600; font-size: 13.5px; color: var(--cmp-ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-dg-sub { font-family: var(--cmp-f-sans); font-size: 11.5px; color: var(--cmp-ink-400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-dg-grade { flex: none; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-family: var(--cmp-f-sans); font-weight: 700; font-size: 11px; color: var(--g); border: 1.5px solid var(--g); }
.cmp-dg-grade-none { color: var(--cmp-ink-400); border-color: var(--cmp-ink-200); font-weight: 600; }

/* ── Condition view: specific drugs ranked least → most risk ── */
.cmp-dg-list { display: flex; flex-direction: column; gap: 6px; }
.cmp-dg-ranked { gap: 12px; padding: 10px 13px; }
.cmp-dg-rank { flex: none; width: 24px; font-family: var(--cmp-f-mono); font-size: 12px; font-weight: 600; color: var(--cmp-ink-400); text-align: right; }
.cmp-dg-ranked .cmp-dg-dot { width: 10px; height: 10px; }
.cmp-dg-risk { flex: none; font-family: var(--cmp-f-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; border: 1.5px solid currentColor; background: color-mix(in oklch, currentColor 9%, transparent); white-space: nowrap; }

/* ── Scrim + drawers ── */
.cmp-scrim { position: fixed; inset: 0; z-index: 1200; background: color-mix(in oklch, var(--cmp-ink-950, #1b2a4a) 44%, transparent); opacity: 0; pointer-events: none; transition: opacity .26s ease; }
.cmp-scrim.show { opacity: 1; pointer-events: auto; }
.cmp-drawer { position: fixed; top: 0; right: 0; z-index: 1300; height: 100vh; width: min(560px, 94vw); background: var(--cmp-paper, #fff); border-left: 1px solid var(--cmp-ink-200, #ddd); box-shadow: -30px 0 70px -24px color-mix(in oklch, var(--cmp-ink-950, #1b2a4a) 50%, transparent); transform: translateX(102%); transition: transform .36s cubic-bezier(.16, 1, .3, 1); display: flex; flex-direction: column; overflow: hidden; }
.cmp-drawer.show { transform: translateX(0); }
.cmp-drawer {
  --cmp-ink-950: #081a2e; --cmp-ink-900: #1b2a4a; --cmp-ink-800: #1f3a5a;
  --cmp-ink-700: #3d4a5e; --cmp-ink-500: #4b5567; --cmp-ink-400: #6b7280;
  --cmp-ink-300: #aab3c2; --cmp-ink-200: #d6dbe4; --cmp-ink-100: #e9edf3;
  --cmp-paper: #ffffff; --cmp-bone: #f5f7fb; --cmp-accent: #1f4e79;
  --cmp-f-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --cmp-f-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --cmp-f-mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
  font-family: var(--cmp-f-sans); color: var(--cmp-ink-900); font-size: 14px; line-height: 1.5;
}
.cmp-drawer * { box-sizing: border-box; }
.cmp-drawer button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
.cmp-drawer-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; border-bottom: 1px solid var(--cmp-ink-200); flex: none; }
.cmp-dt-eyebrow { font-family: var(--cmp-f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--cmp-accent); }
.cmp-drawer-close { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: var(--cmp-ink-500); flex: none; }
.cmp-drawer-close:hover { background: var(--cmp-ink-100); color: var(--cmp-ink-900); }
.cmp-drawer-body { overflow-y: auto; padding: 22px 24px 56px; flex: 1; }

/* ── Folio ── */
.cmp-fo-head { display: flex; align-items: flex-start; gap: 16px; }
.cmp-fo-ico { flex: none; width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; }
.cmp-fo-name { font-family: var(--cmp-f-display); font-weight: 700; letter-spacing: -0.02em; font-size: 21px; line-height: 1.12; color: var(--cmp-ink-900); margin: 0; }
.cmp-fo-eg { font-family: var(--cmp-f-sans); font-size: 13.5px; color: var(--cmp-ink-500); margin-top: 5px; }
.cmp-fo-tags { display: flex; gap: 10px; align-items: center; margin-top: 13px; flex-wrap: wrap; }
.cmp-fo-grade { width: 32px; height: 32px; border-radius: 7px; display: grid; place-items: center; font-weight: 600; font-size: 14px; color: #fff; }
.cmp-fo-count { font-family: var(--cmp-f-mono); font-size: 11px; letter-spacing: .04em; color: var(--cmp-ink-400); }
.cmp-fo-actions { display: flex; gap: 10px; margin-top: 20px; }
.cmp-fo-sec { margin-top: 22px; }
.cmp-fo-sec h4 { font-family: var(--cmp-f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--cmp-ink-500); margin: 0 0 13px; }
.cmp-fo-p { font-size: 14.5px; line-height: 1.6; color: var(--cmp-ink-800); margin: 0; text-wrap: pretty; }
.cmp-fo-drugs { display: flex; gap: 8px; flex-wrap: wrap; }
.cmp-fo-drug { font-family: var(--cmp-f-sans); font-size: 13px; color: var(--cmp-ink-800); background: var(--cmp-bone); border: 1px solid var(--cmp-ink-200); border-radius: 9999px; padding: 6px 13px; }
.cmp-fo-inter { display: flex; flex-direction: column; gap: 10px; }
.cmp-fo-irow { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; padding: 13px 16px; border-radius: 12px; background: var(--cmp-bone); border: 1px solid var(--cmp-ink-200); }
.cmp-fo-tier { font-family: var(--cmp-f-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: #fff; padding: 4px 10px; border-radius: 9999px; white-space: nowrap; }
.cmp-fo-iwith { font-weight: 600; font-size: 14px; color: var(--cmp-ink-900); }
.cmp-fo-inote { font-size: 13.5px; line-height: 1.5; color: var(--cmp-ink-700); margin-top: 3px; }
.cmp-fo-evi { display: flex; gap: 18px; align-items: center; padding: 16px 18px; border-radius: 12px; border: 1px solid var(--cmp-ink-200); background: var(--cmp-bone); }
.cmp-fo-evi .cmp-ev-grade { font-family: var(--cmp-f-display); font-weight: 700; letter-spacing: -0.02em; font-size: 26px; line-height: 1; }
.cmp-fo-disc { margin-top: 34px; font-family: var(--cmp-f-mono); font-size: 10.5px; line-height: 1.6; letter-spacing: .03em; color: var(--cmp-ink-400); text-transform: uppercase; border-top: 1px solid var(--cmp-ink-200); padding-top: 16px; }
.cmp-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--cmp-f-mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; padding: 11px 16px; border-radius: 9999px; border: 1px solid var(--cmp-ink-200); background: var(--cmp-paper); color: var(--cmp-ink-800); transition: all .14s; }
.cmp-btn:hover { border-color: var(--cmp-ink-300); }
.cmp-btn.primary, .cmp-btn[aria-pressed="true"] { background: var(--cmp-accent); color: var(--cmp-paper); border-color: var(--cmp-accent); }

/* ── Reading list ── */
.cmp-rd-empty { color: var(--cmp-ink-400); font-family: var(--cmp-f-mono); font-size: 13px; line-height: 1.6; padding: 34px 2px; }
.cmp-rd-row { display: flex; align-items: center; gap: 14px; padding: 14px 4px; border-top: 1px solid var(--cmp-ink-200); width: 100%; text-align: left; cursor: pointer; }
.cmp-rd-row:first-child { border-top: 0; }
.cmp-rd-row:hover { background: color-mix(in oklch, var(--cmp-accent) 5%, transparent); }
.cmp-rd-ico { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; }
.cmp-rd-name { font-family: var(--cmp-f-display); font-weight: 600; letter-spacing: -0.01em; font-size: 16px; color: var(--cmp-ink-900); }
.cmp-rd-sub { font-family: var(--cmp-f-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--cmp-ink-400); margin-top: 2px; }
.cmp-rd-x { margin-left: auto; flex: none; width: 30px; height: 30px; border-radius: 7px; display: grid; place-items: center; color: var(--cmp-ink-300); }
.cmp-rd-x:hover { color: #991b1b; background: color-mix(in oklch, #991b1b 8%, transparent); }

/* ── First-visit hint (home only) ── */
.cmp-hint { display: flex; align-items: center; gap: 14px; padding: 12px 16px; margin-bottom: 22px; border-radius: 12px; border: 1px solid color-mix(in oklch, var(--cmp-accent) 28%, var(--cmp-ink-200)); background: color-mix(in oklch, var(--cmp-accent) 7%, var(--cmp-paper)); }
.cmp-hint-ico { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--cmp-accent); color: var(--cmp-paper); font-family: var(--cmp-f-display); font-weight: 700; font-size: 16px; }
.cmp-hint-body { flex: 1 1 auto; min-width: 0; font-size: 13.5px; line-height: 1.5; color: var(--cmp-ink-800); }
.cmp-hint-body strong { color: var(--cmp-ink-900); font-weight: 600; }
.cmp-hint-cta { flex: none; font-family: var(--cmp-f-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--cmp-paper); background: var(--cmp-accent); padding: 8px 14px; border-radius: 9999px; transition: filter .14s; }
.cmp-hint-cta:hover { filter: brightness(1.08); }
.cmp-hint-x { flex: none; width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; color: var(--cmp-ink-400); }
.cmp-hint-x:hover { color: var(--cmp-ink-900); background: var(--cmp-ink-100); }

/* ── How-to-use guide drawer ── */
.cmp-guide-intro { font-size: 14.5px; line-height: 1.6; color: var(--cmp-ink-700); margin: 0 0 22px; text-wrap: pretty; }
.cmp-guide-steps { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; }
.cmp-guide-step { display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: start; }
.cmp-guide-num { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in oklch, var(--cmp-accent) 12%, var(--cmp-paper)); color: var(--cmp-accent); font-family: var(--cmp-f-display); font-weight: 700; font-size: 14px; }
.cmp-guide-st-h { font-weight: 600; font-size: 15px; color: var(--cmp-ink-900); margin: 4px 0 3px; }
.cmp-guide-st-p { font-size: 13.5px; line-height: 1.55; color: var(--cmp-ink-700); margin: 0; }
.cmp-guide-sec-h { font-family: var(--cmp-f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--cmp-ink-500); margin: 30px 0 13px; }
.cmp-guide-legend { display: flex; flex-direction: column; gap: 9px; }
.cmp-guide-lrow { display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: var(--cmp-ink-800); }
.cmp-guide-badge { flex: none; width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; font-family: var(--cmp-f-sans); font-weight: 600; font-size: 13px; color: #fff; }
.cmp-guide-dot { flex: none; width: 14px; height: 14px; border-radius: 50%; }
.cmp-guide-note { margin-top: 30px; padding: 14px 16px; border-radius: 12px; background: color-mix(in oklch, var(--cmp-emergency, #b91c1c) 7%, var(--cmp-paper)); border: 1px solid color-mix(in oklch, var(--cmp-emergency, #b91c1c) 28%, var(--cmp-ink-200)); font-size: 13px; line-height: 1.55; color: var(--cmp-ink-800); }
.cmp-guide-note strong { color: #991b1b; }

/* ── Responsive ── */
@media (max-width: 1080px) {
  .cmp-layout { grid-template-columns: 1fr; }
  .cmp-sidebar { flex-direction: row; flex-wrap: wrap; align-items: flex-start; border-right: 0; border-bottom: 1px solid var(--cmp-ink-200); }
  .cmp-figure-wrap { width: 240px; }
  .cmp-sidebar > div:last-child { flex: 1; min-width: 240px; }
  .cmp-lede-row { grid-template-columns: 1fr; }
  .cmp-title { font-size: 52px; }
  .cmp-main { padding: 32px 24px 100px; }
}
@media (max-width: 640px) {
  .cmp-chrome { gap: 12px; padding: 0 14px; }
  .cmp-chrome .cmp-brand span { display: none; }
  .cmp-tb-link { padding: 7px 8px; }
}
@media (max-width: 560px) {
  /* On phones the compendium chrome overflowed sideways: the three labelled
     action buttons (Guide · Surprise · Reading) plus brand + search exceed
     the viewport. Collapse the actions to icon-only (the glyph carries the
     affordance) so the search stays usable and nothing scrolls horizontally. */
  .cmp-chrome-actions { gap: 2px; }
  /* Selector must out-specify `.cmp button { font: inherit }` (0,1,1), so we
     qualify with the parent (0,2,0) to actually zero the label text. */
  .cmp-chrome-actions .cmp-tb-link { font-size: 0; gap: 0; padding: 7px; }
  .cmp-chrome-actions .cmp-tb-link .cmp-gly { font-size: 15px; opacity: 0.9; }
  .cmp-chrome-actions .cmp-tb-link .cmp-rd-badge { font-size: 9.5px; margin-left: 3px; }
  /* .cmp bleeds past #app via margin:-16px; #app pads 14px on phones, so -16
     over-pulls 2px each side and triggers a sliver of horizontal scroll.
     Match the padding exactly. */
  .cmp { margin-left: -14px; margin-right: -14px; }
}
@media (prefers-reduced-motion: reduce) {
  .cmp-drawer, .cmp-scrim, .cmp-fx-link, .cmp-entry, .cmp-e-chev, .cmp-mk-ring, .cmp-mk-halo { transition: none !important; }
}

/* ============================================================
   The Atlas — Treatment Guide
   Fully namespaced under .tg (tg- prefixed classes, tokens
   scoped to the wrapper). Reuses the app's cool-navy / system-
   sans design language (matches the .cmp Atlas block).
   ============================================================ */
.tg {
  --tg-ink-950: #081a2e; --tg-ink-900: #1b2a4a; --tg-ink-800: #1f3a5a;
  --tg-ink-700: #3d4a5e; --tg-ink-500: #4b5567; --tg-ink-400: #6b7280;
  --tg-ink-300: #aab3c2; --tg-ink-200: #d6dbe4; --tg-ink-100: #e9edf3; --tg-ink-50: #f0f3f8;
  --tg-paper: #ffffff; --tg-bone: #f5f7fb; --tg-ash: #f0f3f8;
  --tg-f-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --tg-f-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --tg-f-mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
  --tg-accent: #1f4e79; --tg-feature: #1b2a4a;
  --tg-row-pad-y: 12px;
  font-family: var(--tg-f-sans); font-size: 14px; line-height: 1.5;
  color: var(--tg-ink-900); background: var(--tg-bone); margin: -16px;
}
.tg *, .tg *::before, .tg *::after { box-sizing: border-box; }
.tg button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }

/* ── Chrome strip ── */
.tg-chrome { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: 20px; height: 52px; padding: 0 20px; background: color-mix(in oklch, var(--tg-paper) 88%, transparent); backdrop-filter: blur(16px) saturate(150%); border-bottom: 1px solid var(--tg-ink-200); }
.tg-brand { display: flex; align-items: center; gap: 11px; font-family: var(--tg-f-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tg-ink-900); font-weight: 500; white-space: nowrap; }
.tg-brand svg { flex: none; }
.tg-brand:hover { color: var(--tg-accent); }
.tg-search { flex: 1; max-width: 540px; margin: 0 auto; position: relative; display: flex; align-items: center; }
.tg-search input { width: 100%; height: 36px; padding: 0 16px 0 40px; font: inherit; font-size: 13px; color: var(--tg-ink-900); background: var(--tg-paper); border: 1px solid var(--tg-ink-200); border-radius: 9999px; outline: none; transition: border-color .14s, box-shadow .14s; }
.tg-search input::placeholder { color: var(--tg-ink-400); }
.tg-search input:focus { border-color: color-mix(in oklch, var(--tg-accent) 55%, var(--tg-ink-200)); box-shadow: 0 0 0 4px color-mix(in oklch, var(--tg-accent) 12%, transparent); }
.tg-search .tg-mag { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--tg-ink-400); pointer-events: none; }
.tg-chrome-actions { display: flex; align-items: center; gap: 4px; }
.tg-tb-link { display: inline-flex; align-items: center; gap: 7px; font-family: var(--tg-f-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tg-ink-500); padding: 7px 11px; border-radius: 8px; transition: color .14s, background .14s; }
.tg-tb-link:hover { color: var(--tg-ink-900); background: var(--tg-ink-100); }
.tg-tb-link .tg-gly { font-size: 13px; opacity: .8; }
.tg-rd-badge { display: inline-grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9999px; background: var(--tg-accent); color: var(--tg-paper); font-family: var(--tg-f-mono); font-size: 9.5px; margin-left: 6px; }

/* ── Layout ── */
.tg-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); }
.tg-sidebar { background: linear-gradient(180deg, color-mix(in oklch, var(--tg-accent) 7%, var(--tg-bone)), var(--tg-bone) 55%); border-right: 1px solid var(--tg-ink-200); padding: 22px 22px 44px; display: flex; flex-direction: column; gap: 22px; }
.tg-main { padding: 28px 36px 80px; max-width: 1080px; }

/* ── Body figure ── */
.tg-figure-wrap { position: relative; }
.tg-figure-wrap svg { display: block; width: 100%; height: auto; overflow: visible; }
.tg-fig-body { fill: color-mix(in oklch, var(--tg-ink-300) 40%, var(--tg-paper)); }
.tg-fig-leader { stroke: var(--tg-ink-300); stroke-width: 1; }
.tg-fig-label { font-family: var(--tg-f-display); font-size: 13px; font-weight: 500; fill: var(--tg-ink-700); }
.tg-fig-marker { cursor: pointer; }
.tg-fig-marker .tg-mk-ring { fill: var(--tg-paper); stroke-width: 1.5; transition: r .2s; }
.tg-fig-marker .tg-mk-num { font-family: var(--tg-f-mono); font-size: 11px; font-weight: 500; text-anchor: middle; dominant-baseline: central; }
.tg-fig-marker:hover .tg-mk-ring { filter: brightness(0.97); }
.tg-fig-marker.active .tg-mk-ring { stroke-width: 2.5; }
.tg-fig-marker.active .tg-mk-halo { opacity: 1; }
.tg-mk-halo { opacity: 0; transition: opacity .2s; }

/* ── Index of areas / conditions ── */
.tg-idx-label { font-family: var(--tg-f-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tg-ink-500); margin-bottom: 4px; }
.tg-idx-list { display: flex; flex-direction: column; }
.tg-idx-group { border-top: 1px solid var(--tg-ink-200); }
.tg-idx-list .tg-idx-group:first-child { border-top: 0; }
.tg-idx-row { display: grid; grid-template-columns: 26px 1fr auto; align-items: baseline; gap: 10px; padding: 8px 8px; border-radius: 8px; text-align: left; transition: background .14s, color .14s; width: 100%; }
.tg-idx-row .tg-ix-num { font-family: var(--tg-f-mono); font-size: 11px; color: var(--tg-ink-400); }
.tg-idx-row .tg-ix-name { font-family: var(--tg-f-display); font-weight: 600; font-size: 15px; letter-spacing: -0.01em; color: var(--tg-ink-800); }
.tg-idx-row .tg-ix-count { font-family: var(--tg-f-mono); font-size: 12px; color: var(--tg-ink-400); }
.tg-idx-row:hover { background: color-mix(in oklch, var(--tg-accent) 6%, transparent); }
.tg-idx-row.open .tg-ix-name { color: var(--tg-accent); }
.tg-idx-conds { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 8px 36px; }
.tg-idx-cond { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 7px; text-align: left; font-size: 13.5px; color: var(--tg-ink-700); transition: background .14s, color .14s; }
.tg-idx-cond:hover { background: color-mix(in oklch, var(--tg-accent) 6%, transparent); color: var(--tg-ink-900); }
.tg-idx-cond.active { background: color-mix(in oklch, var(--tg-accent) 11%, transparent); color: var(--tg-accent); font-weight: 600; }
.tg-idx-hero { font-family: var(--tg-f-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--tg-paper); background: var(--tg-accent); padding: 2px 6px; border-radius: 9999px; }

/* ── Your medicines ── */
.tg-meds { border-top: 1px solid var(--tg-ink-200); padding-top: 18px; }
.tg-meds-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.tg-meds-label { font-family: var(--tg-f-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tg-ink-500); }
.tg-meds-clear { font-family: var(--tg-f-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--tg-ink-400); }
.tg-meds-clear:hover { color: #991b1b; }
.tg-meds-note { font-size: 12px; line-height: 1.5; color: var(--tg-ink-500); margin: 0 0 10px; }
.tg-med-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
.tg-med-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--tg-ink-800); background: var(--tg-paper); border: 1px solid var(--tg-ink-200); border-radius: 9999px; padding: 4px 6px 4px 12px; }
.tg-med-x { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; color: var(--tg-ink-400); font-size: 11px; }
.tg-med-x:hover { color: #991b1b; background: color-mix(in oklch, #991b1b 9%, transparent); }
.tg-med-add input { width: 100%; height: 34px; padding: 0 14px; font: inherit; font-size: 13px; color: var(--tg-ink-900); background: var(--tg-paper); border: 1px solid var(--tg-ink-200); border-radius: 9px; outline: none; transition: border-color .14s, box-shadow .14s; }
.tg-med-add input:focus { border-color: color-mix(in oklch, var(--tg-accent) 55%, var(--tg-ink-200)); box-shadow: 0 0 0 4px color-mix(in oklch, var(--tg-accent) 12%, transparent); }

/* ── Main header ── */
.tg-crumb { font-family: var(--tg-f-mono); font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--tg-accent); margin-bottom: 10px; }
.tg-head-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; }
.tg-title { font-family: var(--tg-f-display); font-weight: 700; font-size: 30px; line-height: 1.1; letter-spacing: -0.02em; margin: 0; color: var(--tg-ink-900); max-width: 18ch; text-wrap: balance; }
.tg-head-meta { font-family: var(--tg-f-mono); font-size: 12px; line-height: 1.7; text-align: right; color: var(--tg-ink-400); white-space: nowrap; letter-spacing: 0.04em; padding-top: 8px; }
.tg-head-meta b { color: var(--tg-ink-800); font-weight: 500; }
.tg-aka { font-family: var(--tg-f-sans); font-size: 13.5px; color: var(--tg-ink-500); margin-top: 8px; }
.tg-rule { height: 1px; background: var(--tg-ink-900); margin: 16px 0 20px; }
.tg-lede { font-family: var(--tg-f-sans); font-size: 15px; line-height: 1.55; color: var(--tg-ink-700); margin: 0 0 18px; max-width: 70ch; text-wrap: pretty; }
.tg-ladder-note { display: block; font-size: 14px; line-height: 1.55; color: var(--tg-ink-800); background: color-mix(in oklch, var(--tg-accent) 6%, var(--tg-paper)); border: 1px solid color-mix(in oklch, var(--tg-accent) 22%, var(--tg-ink-200)); border-radius: 12px; padding: 13px 16px; margin-bottom: 18px; max-width: 80ch; }
.tg-ln-mark { font-family: var(--tg-f-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--tg-accent); margin-right: 8px; }

/* ── Personalise banner ── */
.tg-pbanner { display: flex; align-items: flex-start; gap: 14px; width: 100%; text-align: left; padding: 14px 16px; border-radius: 12px; margin-bottom: 22px; border: 1px dashed color-mix(in oklch, var(--tg-accent) 38%, var(--tg-ink-200)); background: var(--tg-paper); transition: background .14s, border-color .14s; }
.tg-pbanner:hover { background: color-mix(in oklch, var(--tg-accent) 5%, var(--tg-paper)); }
.tg-pbanner.on { border-style: solid; border-color: color-mix(in oklch, #2e8b57 40%, var(--tg-ink-200)); background: color-mix(in oklch, #2e8b57 7%, var(--tg-paper)); cursor: default; }
.tg-pb-ic { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--tg-accent); color: var(--tg-paper); font-size: 15px; }
.tg-pbanner.on .tg-pb-ic { background: #2e8b57; }
.tg-pbanner div { font-size: 13.5px; line-height: 1.5; color: var(--tg-ink-700); }
.tg-pbanner b { color: var(--tg-ink-900); font-weight: 600; }

/* ── Filters / sort ── */
.tg-filters-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.tg-flbl { font-family: var(--tg-f-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tg-ink-500); }
.tg-showing { font-family: var(--tg-f-mono); font-size: 11.5px; letter-spacing: 0.06em; color: var(--tg-ink-400); white-space: nowrap; }
.tg-sort-menu { position: relative; }
.tg-showing-btn { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.tg-showing-btn:hover { color: var(--tg-ink-700); }
.tg-sort-pop { position: absolute; right: 0; top: 28px; z-index: 8; background: var(--tg-paper); border: 1px solid var(--tg-ink-200); border-radius: 12px; box-shadow: 0 10px 28px -8px color-mix(in oklch, var(--tg-ink-950) 30%, transparent); padding: 6px; min-width: 200px; display: none; }
.tg-sort-pop.show { display: block; }
.tg-sort-opt { display: flex; justify-content: space-between; align-items: center; width: 100%; font-family: var(--tg-f-mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--tg-ink-700); padding: 9px 12px; border-radius: 8px; text-align: left; }
.tg-sort-opt:hover { background: var(--tg-ink-100); }
.tg-sort-opt.active { color: var(--tg-accent); }
.tg-empty { padding: 60px 8px; color: var(--tg-ink-400); font-family: var(--tg-f-mono); font-size: 13px; letter-spacing: .04em; }

/* ── Ladder groups ── */
.tg-results { margin-top: 4px; }
.tg-lgroup { margin-bottom: 22px; }
.tg-lgroup-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; padding: 0 6px; }
.tg-lg-name { font-family: var(--tg-f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--tg-ink-500); }
.tg-lg-count { font-family: var(--tg-f-mono); font-size: 10.5px; color: var(--tg-ink-400); }
.tg-lgroup-body { display: flex; flex-direction: column; }

/* ── Option row ── */
.tg-opt { display: flex; align-items: center; gap: 14px; padding: var(--tg-row-pad-y) 6px; border-top: 1px solid var(--tg-ink-200); text-align: left; width: 100%; transition: background .14s; cursor: pointer; }
.tg-lgroup-body .tg-opt:first-child { border-top: 0; }
.tg-opt:hover { background: color-mix(in oklch, var(--tg-accent) 5%, transparent); }
.tg-opt-rank { flex: none; width: 26px; font-family: var(--tg-f-mono); font-size: 12px; color: var(--tg-ink-400); align-self: flex-start; padding-top: 4px; }
.tg-opt-ico { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; align-self: flex-start; }
.tg-opt-main { flex: 1 1 auto; min-width: 0; }
.tg-opt-title { display: flex; align-items: baseline; gap: 13px; flex-wrap: wrap; }
.tg-opt-name { font-family: var(--tg-f-display); font-weight: 600; letter-spacing: -0.01em; font-size: 17px; line-height: 1.15; color: var(--tg-ink-900); }
.tg-opt-eg { font-family: var(--tg-f-sans); font-size: 12.5px; color: var(--tg-ink-500); }
.tg-opt-evi { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.5; color: var(--tg-ink-700); }
.tg-evi-mark { font-family: var(--tg-f-mono); font-size: 9.5px; letter-spacing: .1em; color: var(--tg-accent); margin-right: 6px; }
.tg-opt-strip { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.tg-fct { display: inline-flex; align-items: center; gap: 4px; font-family: var(--tg-f-mono); font-size: 11px; color: var(--tg-ink-500); cursor: help; }
.tg-fct-dot { width: 8px; height: 8px; border-radius: 50%; }
.tg-fct-l { font-size: 12px; }
.tg-clash-flag { display: inline-flex; align-items: center; font-family: var(--tg-f-mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: #991b1b; background: color-mix(in oklch, #991b1b 9%, transparent); border-radius: 9999px; padding: 3px 9px; margin-left: 2px; }
.tg-opt-right { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 7px; width: 110px; align-self: flex-start; padding-top: 4px; }
.tg-opt-band { display: inline-flex; align-items: center; gap: 6px; font-family: var(--tg-f-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.tg-band-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.tg-harm-meter { width: 100%; height: 5px; border-radius: 9999px; background: var(--tg-ink-100); overflow: hidden; }
.tg-harm-fill { display: block; height: 100%; border-radius: 9999px; transition: width .3s; }
.tg-opt-save { flex: none; width: 30px; height: 30px; display: grid; place-items: center; color: var(--tg-ink-300); border-radius: 7px; align-self: flex-start; }
.tg-opt-save:hover { color: var(--tg-accent); background: color-mix(in oklch, var(--tg-accent) 9%, transparent); }
.tg-opt-save[aria-pressed="true"] { color: var(--tg-accent); }
.tg-opt-save[aria-pressed="true"] svg { fill: var(--tg-accent); }

/* ── Availability tag ── */
.tg-tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--tg-f-mono); font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; padding: 3px 9px; border-radius: 9999px; border: 1px solid; white-space: nowrap; }
.tg-tag .tg-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tg-tag.rx { color: var(--tg-ink-700); border-color: color-mix(in oklch, var(--tg-ink-700) 40%, var(--tg-ink-200)); }
.tg-tag.otc { color: #2e8b57; border-color: color-mix(in oklch, #2e8b57 45%, var(--tg-ink-200)); }
.tg-tag.ctrl { color: #991b1b; border-color: color-mix(in oklch, #991b1b 42%, var(--tg-ink-200)); }

/* ── Home: condition cards ── */
.tg-home-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-bottom: 30px; }
.tg-cond-card { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 18px 18px 16px; border-radius: 14px; border: 1px solid var(--tg-ink-200); background: var(--tg-paper); transition: border-color .14s, box-shadow .14s, transform .14s; }
.tg-cond-card:hover { border-color: color-mix(in oklch, var(--tg-accent) 40%, var(--tg-ink-200)); box-shadow: 0 12px 28px -18px color-mix(in oklch, var(--tg-ink-950) 50%, transparent); transform: translateY(-1px); }
.tg-cond-card.hero { background: linear-gradient(180deg, color-mix(in oklch, var(--tg-accent) 6%, var(--tg-paper)), var(--tg-paper) 60%); }
.tg-cc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tg-cc-area { font-family: var(--tg-f-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--tg-accent); }
.tg-cc-deep { font-family: var(--tg-f-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--tg-paper); background: var(--tg-feature); padding: 2px 8px; border-radius: 9999px; }
.tg-cc-name { font-family: var(--tg-f-display); font-weight: 700; letter-spacing: -0.01em; font-size: 19px; color: var(--tg-ink-900); }
.tg-cc-aka { font-size: 12.5px; color: var(--tg-ink-500); }
.tg-cc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--tg-ink-100); }
.tg-cc-gentle { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--tg-ink-600, var(--tg-ink-700)); }
.tg-cc-gentle b { color: var(--tg-ink-900); font-weight: 600; }
.tg-cc-count { font-family: var(--tg-f-mono); font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--tg-ink-400); white-space: nowrap; }

.tg-foot-disc { margin-top: 30px; font-family: var(--tg-f-mono); font-size: 10.5px; line-height: 1.7; letter-spacing: .03em; color: var(--tg-ink-400); text-transform: uppercase; border-top: 1px solid var(--tg-ink-200); padding-top: 16px; max-width: 90ch; }

/* ── First-visit hint ── */
.tg-hint { display: flex; align-items: center; gap: 14px; padding: 12px 16px; margin-bottom: 22px; border-radius: 12px; border: 1px solid color-mix(in oklch, var(--tg-accent) 28%, var(--tg-ink-200)); background: color-mix(in oklch, var(--tg-accent) 7%, var(--tg-paper)); }
.tg-hint-ico { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--tg-accent); color: var(--tg-paper); font-family: var(--tg-f-display); font-weight: 700; font-size: 16px; }
.tg-hint-body { flex: 1 1 auto; min-width: 0; font-size: 13.5px; line-height: 1.5; color: var(--tg-ink-800); }
.tg-hint-body strong { color: var(--tg-ink-900); font-weight: 600; }
.tg-hint-cta { flex: none; font-family: var(--tg-f-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--tg-paper); background: var(--tg-accent); padding: 8px 14px; border-radius: 9999px; transition: filter .14s; }
.tg-hint-cta:hover { filter: brightness(1.08); }
.tg-hint-x { flex: none; width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; color: var(--tg-ink-400); }
.tg-hint-x:hover { color: var(--tg-ink-900); background: var(--tg-ink-100); }

/* ── Scrim + drawers ── */
.tg-scrim { position: fixed; inset: 0; z-index: 1200; background: color-mix(in oklch, var(--tg-ink-950, #1b2a4a) 44%, transparent); opacity: 0; pointer-events: none; transition: opacity .26s ease; }
.tg-scrim.show { opacity: 1; pointer-events: auto; }
.tg-drawer { position: fixed; top: 0; right: 0; z-index: 1300; height: 100vh; width: min(560px, 94vw); background: #fff; border-left: 1px solid #d6dbe4; box-shadow: -30px 0 70px -24px color-mix(in oklch, #1b2a4a 50%, transparent); transform: translateX(102%); transition: transform .36s cubic-bezier(.16, 1, .3, 1); display: flex; flex-direction: column; overflow: hidden;
  --tg-ink-950: #081a2e; --tg-ink-900: #1b2a4a; --tg-ink-800: #1f3a5a; --tg-ink-700: #3d4a5e; --tg-ink-500: #4b5567; --tg-ink-400: #6b7280; --tg-ink-300: #aab3c2; --tg-ink-200: #d6dbe4; --tg-ink-100: #e9edf3; --tg-paper: #ffffff; --tg-bone: #f5f7fb; --tg-accent: #1f4e79; --tg-feature: #1b2a4a;
  --tg-f-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --tg-f-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --tg-f-mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
  font-family: var(--tg-f-sans); color: var(--tg-ink-900); font-size: 14px; line-height: 1.5; }
.tg-drawer.show { transform: translateX(0); }
.tg-drawer * { box-sizing: border-box; }
.tg-drawer button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
.tg-drawer-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; border-bottom: 1px solid var(--tg-ink-200); flex: none; }
.tg-dt-eyebrow { font-family: var(--tg-f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--tg-accent); }
.tg-drawer-close { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: var(--tg-ink-500); flex: none; }
.tg-drawer-close:hover { background: var(--tg-ink-100); color: var(--tg-ink-900); }
.tg-drawer-body { overflow-y: auto; padding: 22px 24px 56px; flex: 1; }

/* ── Folio ── */
.tg-fo-head { display: flex; align-items: flex-start; gap: 16px; }
.tg-fo-ico { flex: none; width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; }
.tg-fo-name { font-family: var(--tg-f-display); font-weight: 700; letter-spacing: -0.02em; font-size: 21px; line-height: 1.12; color: var(--tg-ink-900); margin: 0; }
.tg-fo-eg { font-family: var(--tg-f-sans); font-size: 13.5px; color: var(--tg-ink-500); margin-top: 5px; }
.tg-fo-tags { display: flex; gap: 10px; align-items: center; margin-top: 13px; flex-wrap: wrap; }
.tg-fo-band { display: inline-flex; align-items: center; gap: 7px; font-family: var(--tg-f-mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: #fff; padding: 4px 11px; border-radius: 9999px; }
.tg-fo-actions { display: flex; gap: 10px; margin-top: 20px; }
.tg-fo-sec { margin-top: 22px; }
.tg-fo-sec h4 { font-family: var(--tg-f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--tg-ink-500); margin: 0 0 13px; }
.tg-fo-p { font-size: 14.5px; line-height: 1.6; color: var(--tg-ink-800); margin: 0; text-wrap: pretty; }
.tg-fo-evi { display: flex; gap: 18px; align-items: center; padding: 16px 18px; border-radius: 12px; border: 1px solid var(--tg-ink-200); background: var(--tg-bone); }
.tg-fo-evi .tg-ev-grade { font-family: var(--tg-f-display); font-weight: 700; letter-spacing: -0.02em; font-size: 26px; line-height: 1; }
.tg-ff-grid { display: flex; flex-direction: column; gap: 2px; }
.tg-ff-row { display: grid; grid-template-columns: 14px 1fr auto; gap: 12px; align-items: center; padding: 9px 4px; border-top: 1px solid var(--tg-ink-100); }
.tg-ff-grid .tg-ff-row:first-child { border-top: 0; }
.tg-ff-dot { width: 12px; height: 12px; border-radius: 50%; }
.tg-ff-name { font-size: 13.5px; color: var(--tg-ink-700); }
.tg-ff-val { font-size: 13px; font-weight: 600; color: var(--tg-ink-900); text-align: right; }
.tg-fo-inter { display: flex; flex-direction: column; gap: 10px; }
.tg-fo-irow { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; padding: 13px 16px; border-radius: 12px; background: var(--tg-bone); border: 1px solid var(--tg-ink-200); }
.tg-fo-tier { font-family: var(--tg-f-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: #fff; padding: 4px 10px; border-radius: 9999px; white-space: nowrap; }
.tg-fo-iwith { font-weight: 600; font-size: 14px; color: var(--tg-ink-900); }
.tg-fo-inote { font-size: 13.5px; line-height: 1.5; color: var(--tg-ink-700); margin-top: 3px; }
.tg-fo-inote.soft { padding: 13px 16px; border-radius: 12px; background: var(--tg-bone); border: 1px solid var(--tg-ink-200); margin-top: 0; }
.tg-refs { display: flex; flex-direction: column; gap: 8px; }
.tg-ref { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: baseline; font-size: 13px; color: var(--tg-ink-700); }
.tg-ref-n { font-family: var(--tg-f-mono); font-size: 11px; color: var(--tg-paper); background: var(--tg-accent); width: 20px; height: 20px; border-radius: 5px; display: grid; place-items: center; }
.tg-fo-disc { margin-top: 34px; font-family: var(--tg-f-mono); font-size: 10.5px; line-height: 1.6; letter-spacing: .03em; color: var(--tg-ink-400); text-transform: uppercase; border-top: 1px solid var(--tg-ink-200); padding-top: 16px; }

/* ── eCARA deep links ── */
.tg-atlas-link { color: var(--tg-accent); text-decoration: none; font-family: var(--tg-f-sans); }
.tg-atlas-link:hover { text-decoration: underline; }
.tg-fo-inote .tg-atlas-link { font-weight: 600; }
.tg-atlas-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.tg-atlas-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--tg-f-mono); font-size: 11.5px; letter-spacing: .04em; padding: 8px 13px; border-radius: 9999px; border: 1px solid var(--tg-ink-200); background: var(--tg-paper); color: var(--tg-accent); transition: border-color .14s, background .14s; }
.tg-atlas-chip:hover { text-decoration: none; border-color: var(--tg-accent); background: var(--tg-bone); }
.tg-atlas-arrow { font-size: 11px; opacity: .7; }
.tg-atlas-sys { display: inline-block; margin-top: 14px; font-family: var(--tg-f-mono); font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; }
.tg-cond-atlas { display: inline-block; margin-top: 10px; font-family: var(--tg-f-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }

/* ── Drug detail · Treats / used for (reverse cross-reference) ── */
.treats-panel .treats-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.treats-panel .treats-row { display: inline-flex; align-items: stretch; border: 1px solid var(--c-border); border-radius: 9999px; overflow: hidden; background: var(--c-surface); }
.treats-panel .treats-row:hover { border-color: var(--c-brand-2); }
.treats-panel .treats-chip { display: inline-flex; align-items: center; padding: 8px 14px; font-size: 13.5px; font-weight: 600; color: var(--c-brand-2); text-decoration: none; }
.treats-panel .treats-chip:hover { background: var(--c-brand-soft); }
.treats-panel .treats-sys { display: inline-flex; align-items: center; padding: 8px 12px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--c-text-soft); text-decoration: none; border-left: 1px solid var(--c-border); }
.treats-panel .treats-sys:hover { background: var(--c-surface-2); color: var(--c-brand-2); }
.tg-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--tg-f-mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; padding: 11px 16px; border-radius: 9999px; border: 1px solid var(--tg-ink-200); background: var(--tg-paper); color: var(--tg-ink-800); transition: all .14s; }
.tg-btn:hover { border-color: var(--tg-ink-300); }
.tg-btn.primary, .tg-btn[aria-pressed="true"] { background: var(--tg-accent); color: var(--tg-paper); border-color: var(--tg-accent); }

/* ── Saved list ── */
.tg-rd-empty { color: var(--tg-ink-400); font-family: var(--tg-f-mono); font-size: 13px; line-height: 1.6; padding: 34px 2px; }
.tg-rd-row { display: flex; align-items: center; gap: 14px; padding: 14px 4px; border-top: 1px solid var(--tg-ink-200); width: 100%; text-align: left; cursor: pointer; }
.tg-rd-row:first-child { border-top: 0; }
.tg-rd-row:hover { background: color-mix(in oklch, var(--tg-accent) 5%, transparent); }
.tg-rd-ico { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; }
.tg-rd-name { font-family: var(--tg-f-display); font-weight: 600; letter-spacing: -0.01em; font-size: 16px; color: var(--tg-ink-900); }
.tg-rd-sub { font-family: var(--tg-f-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--tg-ink-400); margin-top: 2px; }
.tg-rd-x { margin-left: auto; flex: none; width: 30px; height: 30px; border-radius: 7px; display: grid; place-items: center; color: var(--tg-ink-300); }
.tg-rd-x:hover { color: #991b1b; background: color-mix(in oklch, #991b1b 8%, transparent); }

/* ── Guide drawer ── */
.tg-guide-intro { font-size: 14.5px; line-height: 1.6; color: var(--tg-ink-700); margin: 0 0 22px; text-wrap: pretty; }
.tg-guide-steps { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; }
.tg-guide-step { display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: start; }
.tg-guide-num { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in oklch, var(--tg-accent) 12%, var(--tg-paper)); color: var(--tg-accent); font-family: var(--tg-f-display); font-weight: 700; font-size: 14px; }
.tg-guide-st-h { font-weight: 600; font-size: 15px; color: var(--tg-ink-900); margin: 4px 0 3px; }
.tg-guide-st-p { font-size: 13.5px; line-height: 1.55; color: var(--tg-ink-700); margin: 0; }
.tg-guide-sec-h { font-family: var(--tg-f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--tg-ink-500); margin: 30px 0 13px; }
.tg-guide-legend { display: flex; flex-direction: column; gap: 9px; }
.tg-guide-lrow { display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: var(--tg-ink-800); }
.tg-guide-dot { flex: none; width: 14px; height: 14px; border-radius: 50%; }
.tg-guide-note { margin-top: 30px; padding: 14px 16px; border-radius: 12px; background: color-mix(in oklch, #b91c1c 7%, var(--tg-paper)); border: 1px solid color-mix(in oklch, #b91c1c 28%, var(--tg-ink-200)); font-size: 13px; line-height: 1.55; color: var(--tg-ink-800); }
.tg-guide-note strong { color: #991b1b; }

/* ── Responsive ── */
@media (max-width: 1080px) {
  .tg-layout { grid-template-columns: 1fr; }
  .tg-sidebar { flex-direction: row; flex-wrap: wrap; align-items: flex-start; border-right: 0; border-bottom: 1px solid var(--tg-ink-200); }
  .tg-figure-wrap { width: 240px; }
  .tg-sidebar > div:nth-child(2) { flex: 1; min-width: 240px; }
  .tg-meds { flex-basis: 100%; }
  .tg-main { padding: 32px 24px 100px; }
}
@media (max-width: 640px) {
  .tg-chrome { gap: 12px; padding: 0 14px; }
  .tg-chrome .tg-brand span { display: none; }
  .tg-tb-link { padding: 7px 8px; }
  .tg-opt { flex-wrap: wrap; }
  .tg-opt-right { width: auto; flex-direction: row; align-items: center; }
  .tg-harm-meter { width: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  .tg-drawer, .tg-scrim, .tg-opt, .tg-mk-ring, .tg-mk-halo, .tg-harm-fill, .tg-cond-card { transition: none !important; }
}

/* ── Treatment Guide ladder embedded inside The Atlas ──────────────────────
   The standalone Treatment Guide page was folded into the Atlas condition view.
   `.tg` supplies the --tg-* tokens the ladder rules consume; `.tg-embed`
   neutralises the full-screen bleed (margin/background) so it sits cleanly in
   the Atlas main column. */
.tg-embed {
  margin: 0;
  background: transparent;
  font-size: 13px;
}
.cmp-ladder-host { margin-top: 4px; }
.tg-embed-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
}
.tg-embed-head-main { min-width: 0; }
.tg-embed-eyebrow {
  font-family: var(--tg-f-mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--tg-accent);
}
.tg-embed-title {
  font-family: var(--tg-f-display); font-size: 22px; font-weight: 700;
  letter-spacing: -0.02em; color: var(--tg-ink-900); margin: 3px 0 2px;
}
.tg-embed-aka { font-size: 13px; color: var(--tg-ink-500); margin: 0; }
.tg-embed-actions { display: flex; align-items: center; gap: 4px; flex: none; }
.tg-embed-meds {
  margin: 14px 0 4px; padding: 16px 18px; border: 1px solid var(--tg-ink-200);
  border-radius: 12px; background: var(--tg-bone);
}

/* "guide" markers on Atlas conditions that have a curated treatment ladder. */
.cmp-cc-guide, .cmp-cx-guide {
  display: inline-block; font-family: var(--cmp-f-mono, ui-monospace, monospace);
  font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff; background: #1f4e79; border-radius: 4px;
  padding: 1px 5px; vertical-align: middle;
}
.cmp-cx-guide { margin-left: 6px; }
.cmp-cond-chip.active .cmp-cc-guide { background: #163a5c; }

/* ════════════════════════════════════════════════════════════════════════
   Drug-detail "Atlas" layout (Nutrient-Atlas-style three-column shell)
   Namespaces: .dx-* (page shell + cards), .bi-* (shared body-index rail).
   Phase 1 = scaffold: left rail + main + right rail grid; later phases fill
   the main column header/affects and the right-rail dose/cautions cards.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Shell grid ── */
.dx-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 28px;
  align-items: start;
  max-width: 1040px;
  margin: 0 auto;
}
.dx-main { min-width: 0; }
.dx-rail-left, .dx-rail-right { position: sticky; top: 16px; }
.dx-rail-right { display: flex; flex-direction: column; gap: 16px; }

/* ── Right-rail cards ── */
.dx-card {
  border: 1px solid var(--c-border);
  border-radius: 14px;
  background: var(--c-surface);
  padding: 16px 16px 14px;
}
.dx-card-head {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-text-soft);
  margin-bottom: 12px;
}
.dx-glance { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 0; }
.dx-glance dt {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-text-soft);
  align-self: center;
}
.dx-glance dd { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--c-text); }

/* ── Shared body-index rail (.bi-*) ── */
.bi-rail { display: flex; flex-direction: column; gap: 18px; }
.bi-figure { width: 100%; }
.bi-figure svg { width: 100%; height: auto; display: block; }
.bi-fig-body * { fill: var(--c-surface-2); stroke: var(--c-border); stroke-width: 1; }
.bi-fig-leader { stroke: var(--c-border); stroke-width: 1; }
.bi-fig-label {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  fill: var(--c-text-soft);
}
.bi-fig-label.hot { fill: var(--c-text); font-weight: 700; }
.bi-fig-marker { cursor: pointer; }
.bi-mk-ring { fill: var(--c-surface); stroke-width: 1.8; transition: r .12s, stroke-width .12s; }
.bi-mk-num { font-family: var(--font-mono); font-size: 10px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.bi-fig-marker.hot .bi-mk-ring { stroke-width: 2.6; }
.bi-fig-marker.active .bi-mk-ring { stroke-width: 3; }
.bi-fig-marker:hover .bi-mk-ring { stroke-width: 2.8; }
.bi-fig-marker:focus { outline: none; }
.bi-fig-marker:focus .bi-mk-ring { stroke-dasharray: 2 2; }

.bi-idx-head {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-text-soft);
  margin-bottom: 8px;
}
.bi-idx-list { display: flex; flex-direction: column; }
.bi-idx-row {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 6px;
  border: 0;
  border-top: 1px solid var(--c-border);
  background: none;
  text-align: left;
  cursor: pointer;
  color: var(--c-text);
  transition: background .12s;
}
.bi-idx-row:first-child { border-top: 0; }
.bi-idx-row:hover { background: var(--c-surface-2); }
.bi-idx-row.active { background: var(--c-brand-soft); }
.bi-idx-row.hot .bi-ix-name { font-weight: 700; color: var(--c-brand-2); }
.bi-ix-num { font-family: var(--font-mono); font-size: 10px; color: var(--c-text-soft); }
.bi-ix-name { font-size: 13px; }
.bi-ix-count {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--c-text-soft);
  min-width: 20px;
  text-align: right;
}

/* ── Responsive collapse ── */
@media (max-width: 1080px) {
  .dx-shell { grid-template-columns: minmax(0, 1fr); }
  .dx-rail-right { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; position: static; }
  .dx-rail-right .dx-card { flex: 1 1 240px; }
}
@media (max-width: 760px) {
  .dx-shell { grid-template-columns: 1fr; }
  .dx-rail-left, .dx-rail-right { position: static; }
  .bi-rail { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
  .bi-figure { width: 200px; }
  .bi-idx { flex: 1; min-width: 240px; }
}

/* ── Atlas-style main column: header + lead sections (Phase 2) ── */
.dx-header {
  border: 1px solid var(--c-border);
  border-radius: 16px;
  background: var(--c-surface);
  padding: 18px 20px 16px;
  margin-bottom: 18px;
}
.dx-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--c-brand-2);
  text-decoration: none;
  margin-bottom: 14px;
  padding: 7px 14px 7px 11px;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  background: var(--c-surface);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.dx-back:hover {
  color: var(--c-brand-2);
  background: var(--c-surface-2, #eef2f7);
  border-color: var(--c-brand-2);
}
.dx-back:focus-visible {
  outline: 2px solid var(--c-brand-2);
  outline-offset: 2px;
}
.dx-head-row { display: flex; align-items: flex-start; gap: 14px; }
.dx-head-icon {
  flex: none;
  width: 46px; height: 46px;
  border-radius: 12px;
  display: grid; place-items: center;
}
.dx-head-titles { flex: 1; min-width: 0; }
.dx-head-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-text-soft);
  margin-bottom: 3px;
}
.dx-head-name { margin: 0; font-size: 27px; font-weight: 700; line-height: 1.1; color: var(--c-text); }
.dx-head-latin { font-style: italic; font-size: 12.5px; color: var(--c-text-soft); margin-top: 4px; word-break: break-word; }
.dx-head-aka { font-size: 13px; color: var(--c-text-muted); margin-top: 4px; }
.dx-head-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.dx-tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 9999px;
  background: var(--c-surface-2);
  color: var(--c-text-muted);
  border: 1px solid var(--c-border);
}
.dx-tag--warn { background: #fbd5d5; color: #7a1a14; border-color: #f0b4b4; }

/* Grade badge (headline) */
.dx-grade {
  flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 52px;
  padding: 7px 6px;
  border-radius: 11px;
  border: 1.5px solid;
  text-align: center;
}
.dx-grade-letter { font-family: var(--font-mono); font-size: 18px; font-weight: 800; line-height: 1; }
.dx-grade-cap { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .06em; text-transform: uppercase; margin-top: 3px; }
.dx-grade--a { color: #2e8b57; border-color: #2e8b57; background: #e8f5ee; }
.dx-grade--b { color: #1f4e79; border-color: #1f4e79; background: #e3ecf6; }
.dx-grade--c { color: #c98a00; border-color: #c98a00; background: #fef5e0; }
.dx-grade--d { color: #c2410c; border-color: #c2410c; background: #fde2cf; }
.dx-grade--none { color: var(--c-text-soft); border-color: var(--c-border); background: var(--c-surface-2); }

/* Lead callouts (Used for / Evidence overview) */
.dx-callout {
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-brand-2);
  border-radius: 12px;
  background: var(--c-surface);
  padding: 13px 16px;
  margin-bottom: 14px;
}
.dx-evidence { border-left-color: var(--c-text-soft); }
.dx-callout-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-text-soft);
  margin-bottom: 6px;
}
.dx-callout-body { margin: 0; font-size: 14px; line-height: 1.55; color: var(--c-text); }

/* Inline RF#### citation chips (also used by evidence.js inlineRefChips) */
.dx-ref-chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .02em;
  padding: 1px 7px;
  margin: 0 2px;
  border-radius: 9999px;
  background: var(--c-brand-soft);
  color: var(--c-brand-2);
  text-decoration: none;
  border: 1px solid transparent;
  vertical-align: baseline;
}
.dx-ref-chip:hover { border-color: var(--c-brand-2); }
.dx-ref-chip--dead { background: var(--c-surface-2); color: var(--c-text-soft); }

/* AFFECTS · N SYSTEMS list */
.dx-affects-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dx-affects-count {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-text-soft);
}
.dx-affects-list { display: flex; flex-direction: column; margin-top: 6px; }
.dx-affect-row {
  display: grid;
  grid-template-columns: 14px 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 11px 4px;
  border-top: 1px solid var(--c-border);
  text-decoration: none;
  color: var(--c-text);
  transition: background .12s;
}
.dx-affect-row:first-child { border-top: 0; }
.dx-affect-row:hover { background: var(--c-surface-2); }
.dx-affect-dot { width: 11px; height: 11px; border-radius: 50%; }
.dx-affect-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dx-affect-name { font-size: 14.5px; font-weight: 600; }
.dx-affect-sub { font-size: 12px; color: var(--c-text-soft); }
.dx-affect-grade {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  width: 22px; height: 22px;
  border-radius: 6px;
  display: grid; place-items: center;
  border: 1.5px solid;
}
.dx-affect-chev { color: var(--c-text-soft); font-size: 18px; line-height: 1; }

/* Uniform empty-state line — shown in any section/card with no data for this
   drug, so every drug page keeps an identical structure. */
.dx-nodata { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--c-text-soft); font-style: italic; }
.dx-callout-body.dx-nodata { font-size: 14px; }

/* ── "Detailed pharmacology data" disclosure ───────────────────────────────
   Folds the dense clinical tables (dose, PK, safety, special populations,
   enzymes, severity, plus pharmacology prose + risk chips) under one native
   <details>, so the consumer main column stays a clean read. */
.dx-details {
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: var(--shadow-sm);
  margin-bottom: 14px;
  overflow: hidden;
}
.dx-details-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.dx-details-summary::-webkit-details-marker { display: none; }
.dx-details-summary:hover { background: var(--c-surface-2); }
.dx-details-summary:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--c-brand-2);
}
.dx-details-title { font-size: 15px; font-weight: 600; color: var(--c-text); }
.dx-details-hint {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dx-details-chev {
  flex: 0 0 auto;
  color: var(--c-text-soft);
  font-size: 14px;
  line-height: 1;
  transition: transform .15s ease;
}
.dx-details[open] .dx-details-chev { transform: rotate(180deg); }
.dx-details-body {
  padding: 4px 16px 16px;
  border-top: 1px solid var(--c-border);
}
/* Panels inside the disclosure lose their own card chrome — the <details>
   wrapper is the card now, so they read as a flat stack of sections. */
.dx-details-body .panel {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 16px 0;
  margin-bottom: 0;
  border-top: 1px solid var(--c-border);
}
.dx-details-body .panel:first-child { border-top: 0; padding-top: 12px; }

/* ── Evidence & references panel head (grade badge + title + count) ──────── */
.dx-refs-panel-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.dx-refs-panel-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dx-refs-panel-titles h2 { margin: 0; }

/* ── Utility action cards: uniform 2×2 grid below the three-column shell ──── */
.dx-action-grid {
  max-width: 1180px;
  margin: 24px auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
.dx-action-grid .dx-card { display: flex; flex-direction: column; }
/* Push each card's primary button to the bottom so the 2×2 grid stays even
   regardless of how much note copy each card carries. */
.dx-action-grid .dx-card .dx-track-btn:last-child,
.dx-action-grid .dx-card .dx-seealso-list { margin-top: auto; }
@media (max-width: 760px) {
  .dx-action-grid { grid-template-columns: 1fr; }
}

/* ── Phase 3: right-rail cards ─────────────────────────────────────────── */
.dx-card-note { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--c-text-soft); }
.dx-card-fine { margin: 8px 0 0; font-size: 11px; line-height: 1.45; color: var(--c-text-soft); font-style: italic; }

/* Pharmacokinetics card */
.dx-card--pk { border-left: 3px solid #1f4e79; }
.dx-pk-body { margin-top: 8px; }
.dx-pk-figure {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  border-radius: 8px;
}
.dx-pk-figure .pk-chart {
  margin: 0;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.dx-pk-figure:hover .pk-chart { border-color: #1f4e79; box-shadow: 0 2px 10px rgba(31,78,121,0.18); }
.dx-pk-figure:focus-visible { outline: 2px solid #1f4e79; outline-offset: 2px; }
.dx-pk-expand {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(255,255,255,0.9);
  border: 1px solid var(--c-border);
  color: #1f4e79;
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease-out);
}
.dx-pk-expand svg { width: 14px; height: 14px; }
.dx-pk-figure:hover .dx-pk-expand,
.dx-pk-figure:focus-visible .dx-pk-expand { opacity: 1; }

/* Expanded PK chart modal */
.pk-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(27,42,74, 0.32);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease-out);
}
.pk-modal.is-open { opacity: 1; }
.pk-modal-panel {
  background: var(--c-surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  max-width: 840px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  padding: 20px 22px;
  transform: scale(0.94);
  transition: transform var(--t-slow) var(--ease-out);
}
.pk-modal.is-open .pk-modal-panel { transform: scale(1); }
.pk-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.pk-modal-title { margin: 0; font-size: 19px; font-weight: 800; color: var(--c-text); }
.pk-modal-close {
  background: transparent;
  border: 0;
  font-size: 26px;
  line-height: 1;
  color: var(--c-text-muted);
  padding: 2px 8px;
  cursor: pointer;
  border-radius: 6px;
}
.pk-modal-close:hover { background: var(--c-surface-2); color: var(--c-text); }
.pk-modal-chart .pk-chart {
  border: 1px solid var(--c-border);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}
.pk-modal-kv {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 18px;
  margin: 18px 0 0;
}
.pk-modal-kv dt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--c-text-soft);
  align-self: center;
}
.pk-modal-kv dd { margin: 0; font-size: 14px; color: var(--c-text); align-self: center; }
.pk-modal-fine { margin: 16px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--c-text-soft); font-style: italic; }
@media (max-width: 560px) {
  .pk-modal-kv { grid-template-columns: 1fr; gap: 2px 0; }
  .pk-modal-kv dd { margin-bottom: 8px; }
}
.dx-pk-timing { margin-top: 10px; }
.dx-pk-routes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.dx-pk-route {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 9999px;
  background: var(--c-surface-2);
  color: var(--c-text-muted);
  border: 1px solid var(--c-border);
  cursor: pointer;
}
.dx-pk-route.is-active {
  background: #1f4e79;
  color: #fff;
  border-color: #1f4e79;
}

/* Dependence pill (shared by snapshot + legal cards) */
.dx-dep-pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 9999px;
  border: 1px solid transparent;
  font-weight: 700;
  line-height: 1.5;
}
.dx-dep-high { background: #fdecec; color: #991b1b; border-color: #f0b4b4; }
.dx-dep-mid { background: #fdf3e3; color: #92551b; border-color: #f0d29a; }
.dx-dep-low { background: #eaf6ee; color: #1f6b3a; border-color: #bfe3cc; }
.dx-dep-none { background: var(--c-surface-2); color: var(--c-text-muted); border-color: var(--c-border); }
.dx-dep-unknown { background: var(--c-surface-2); color: var(--c-text-soft); border-color: var(--c-border); font-style: italic; }

/* "At a glance" snapshot card */
.dx-card--snapshot { border-left: 3px solid #475569; }
.dx-snapshot { margin-top: 8px; }

/* Shared sub-label for grouped card content */
.dx-card-fine-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-text-soft);
  display: block;
  margin: 0 0 6px;
}

/* Pregnancy & breastfeeding card */
.dx-card--preg { border-left: 3px solid #b45393; }
.dx-preg-cat { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.dx-preg-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-text-soft);
}
.dx-preg-val { font-size: 14px; font-weight: 700; color: var(--c-text); }

/* Legal status & dependence card */
.dx-card--legal { border-left: 3px solid #6b21a8; }
.dx-legal-sched { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.dx-legal-code {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 800;
  color: #6b21a8;
  background: #f3e8fd;
  border: 1px solid #ddc7f0;
  border-radius: 6px;
  padding: 1px 7px;
}
.dx-legal-full { font-size: 12.5px; color: var(--c-text-soft); line-height: 1.4; }
.dx-legal-dep { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.dx-legal-dep .dx-card-fine-label { margin: 0; }

/* Why it interacts card */
.dx-card--why { border-left: 3px solid #0e7490; }
.dx-why-group { margin-top: 10px; }
.dx-why-group:first-child { margin-top: 8px; }
.dx-why-chips { display: flex; flex-wrap: wrap; gap: 5px; }

/* Warning signs card (provisional) */
.dx-card--warn {
  border: 1px solid #f0d29a;
  border-left: 3px solid #c98a00;
  background: #fffaf0;
}
.dx-card--warn .dx-card-head { color: #92551b; }
.dx-warn-list { margin: 8px 0 0; padding-left: 18px; }
.dx-warn-list li { font-size: 13px; line-height: 1.5; color: var(--c-text); margin-bottom: 4px; }
.dx-warn-list li:last-child { margin-bottom: 0; }

/* Track this medicine card */
.dx-card--track { border-left: 3px solid var(--c-brand-2); }
.dx-track-btn {
  margin-top: 10px;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--c-brand-2);
  background: var(--c-brand-2);
  color: #fff;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: filter var(--t-fast) var(--ease-out);
}
.dx-track-btn:hover { filter: brightness(1.06); }
.dx-track-btn--ghost {
  background: transparent;
  color: var(--c-brand-2);
}
.dx-track-btn--ghost:hover { background: rgba(0, 0, 0, 0.04); filter: none; }

/* Suggested dose card */
.dx-card--dose { border-left: 3px solid var(--c-brand-2); }
.dx-dose-big { font-size: 22px; font-weight: 800; line-height: 1.15; color: var(--c-text); margin-top: 2px; }
.dx-dose-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.dx-dose-route, .dx-dose-range {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 9999px;
  background: var(--c-surface-2);
  color: var(--c-text-muted);
  border: 1px solid var(--c-border);
}

/* Cautions card (red) */
.dx-card--caution {
  border: 1px solid #f0b4b4;
  border-left: 3px solid #b91c1c;
  background: #fdf3f3;
}
.dx-card--caution .dx-card-head { color: #991b1b; }
.dx-caution-list { margin: 8px 0 0; padding-left: 18px; }
.dx-caution-list li { font-size: 13px; line-height: 1.5; color: #7a1a14; margin-bottom: 5px; }
.dx-caution-list li:last-child { margin-bottom: 0; }

/* Practicals (definition list) */
.dx-practicals { display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; margin: 8px 0 0; }
.dx-practicals dt {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-text-soft);
  align-self: center;
}
.dx-practicals dd { margin: 0; font-size: 13.5px; color: var(--c-text); align-self: center; }

/* Interacts with */
.dx-int-list { display: flex; flex-direction: column; margin-top: 8px; }
.dx-int-row {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 2px;
  border-top: 1px solid var(--c-border);
  text-decoration: none;
  color: var(--c-text);
  transition: background .12s;
}
.dx-int-row:first-child { border-top: 0; }
.dx-int-row:hover { background: var(--c-surface-2); }
.dx-int-sev {
  flex: none;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 9999px;
  min-width: 52px;
  text-align: center;
}
.dx-int-name { font-size: 13.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-card-cta {
  display: inline-block;
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c-brand-2);
  text-decoration: none;
}
.dx-card-cta:hover { text-decoration: underline; }

/* See also */
.dx-seealso-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.dx-seealso-chip {
  font-size: 12.5px;
  padding: 5px 11px;
  border-radius: 9999px;
  background: var(--c-surface-2);
  color: var(--c-text);
  border: 1px solid var(--c-border);
  text-decoration: none;
  transition: border-color .12s;
}
.dx-seealso-chip:hover { border-color: var(--c-brand-2); color: var(--c-brand-2); }

/* ============================================================
   Consumer health home (.ch-*) — the new front door
   ------------------------------------------------------------
   Adapts the consumer-dashboard design to the app's existing
   cool-navy / system-sans tokens (no warm OKLCH, no web fonts).
   Layout: full-width hero + omnibox, then a two-column shell
   (sticky rail + canvas) that collapses to one column on narrow
   screens.
============================================================ */
.ch { max-width: 100%; }
.ch-header { margin-bottom: 16px; }

/* Omnibox ---------------------------------------------------- */
.ch-omni {
  position: relative;
  max-width: 760px;
  margin: 0 0 24px;
}
.ch-omni-mag {
  position: absolute;
  left: 16px; top: 50%;
  transform: translateY(-50%);
  color: var(--c-text-soft);
  display: inline-flex;
  pointer-events: none;
}
.ch-omni-input {
  width: 100%;
  padding: 14px 16px 14px 46px;
  font-size: 16px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: var(--shadow-sm);
  outline: none;
}
.ch-omni-input:focus { border-color: var(--c-brand-2); box-shadow: 0 0 0 3px rgba(31,78,121,0.16); }
.ch-omni-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  z-index: 30;
  max-height: 60vh;
  overflow-y: auto;
}
.ch-omni-section {
  padding: 8px 10px 4px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ch-omni-empty { padding: 14px 12px; }
.ch-omni-result {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 9px 10px;
  border-radius: var(--r-md);
}
.ch-omni-result:hover { background: var(--c-surface-2); }
.ch-omni-glyph {
  width: 28px; height: 28px;
  flex: 0 0 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--c-brand-soft);
  color: var(--c-brand);
  font-size: 14px;
}
.ch-omni-text { min-width: 0; }
.ch-omni-name { font-weight: 600; }
.ch-omni-meta { margin-top: 1px; }

/* Two-column shell ------------------------------------------ */
.ch-layout {
  display: grid;
  grid-template-columns: 312px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.ch-rail { display: flex; flex-direction: column; gap: 16px; position: sticky; top: calc(var(--header-h) + 14px); }
.ch-canvas { display: flex; flex-direction: column; gap: 22px; min-width: 0; }

@media (max-width: 1080px) {
  .ch-layout { grid-template-columns: 1fr; }
  .ch-rail { position: static; flex-direction: column; }
}

/* Cards (rail) ---------------------------------------------- */
.ch-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 14px;
  box-shadow: var(--shadow-sm);
}
.ch-card-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: 10px;
}

/* Body-area rail ------------------------------------------- */
.ch-area + .ch-area { margin-top: 4px; border-top: 1px solid var(--c-border); padding-top: 8px; }
.ch-area-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 2px 4px; }
.ch-area-name { font-weight: 600; font-size: 13px; }
.ch-area-count {
  background: var(--c-surface-2);
  color: var(--c-text-muted);
  border-radius: 999px;
  padding: 1px 8px;
  font-weight: 600;
}
.ch-area-conds { display: flex; flex-direction: column; }
.ch-area-cond {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: transparent;
  border: 0;
  text-align: left;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  color: var(--c-text);
  font-size: 13px;
}
.ch-area-cond:hover { background: var(--c-surface-2); color: var(--c-link); }
.ch-area-chev { color: var(--c-text-soft); }

/* Medicine cabinet ----------------------------------------- */
.ch-cab-empty { margin: 0 0 12px; line-height: 1.5; }
.ch-cab-add { width: 100%; text-align: center; }
.ch-cab-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--r-md);
  border: 1px solid;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 10px;
}
.ch-cab-status-icon { font-size: 14px; }
.ch-cab-pair {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px;
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
  margin-bottom: 6px;
  border: 1px solid var(--c-border);
}
.ch-cab-pair:hover { background: var(--c-surface-2); text-decoration: none; }
.ch-cab-badge { font-size: 11px; padding: 3px 8px; flex: 0 0 auto; }
.ch-cab-pair-body { min-width: 0; }
.ch-cab-pair-name { font-weight: 600; font-size: 13px; }
.ch-cab-pair-note { margin-top: 2px; line-height: 1.4; }
.ch-cab-manage {
  width: 100%;
  text-align: center;
  margin-top: 4px;
  font-size: 13px;
}

/* Canvas sections ------------------------------------------ */
.ch-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.ch-section-title { margin: 0; font-size: 18px; font-weight: 600; color: var(--c-brand); letter-spacing: -0.01em; }

/* Symptom grid --------------------------------------------- */
.ch-symptom-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.ch-symptom {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 14px;
  box-shadow: var(--shadow-sm);
}
.ch-symptom:hover { border-color: var(--c-brand-2); box-shadow: var(--shadow-md); }
.ch-symptom.hero { border-left: 3px solid var(--c-brand-2); }
.ch-symptom-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ch-symptom-area { color: var(--c-text-muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.ch-symptom-deep {
  background: var(--c-brand-soft);
  color: var(--c-brand);
  border-radius: 999px;
  padding: 1px 8px;
  font-weight: 600;
}
.ch-symptom-name { font-size: 16px; font-weight: 600; color: var(--c-text); }
.ch-symptom-aka { line-height: 1.4; }
.ch-symptom-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--c-border);
}
.ch-symptom-gentle { display: inline-flex; align-items: center; gap: 6px; color: var(--c-text-muted); }
.ch-symptom-gentle b { color: var(--c-text); font-weight: 600; }
.ch-band-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }

/* Recently viewed ------------------------------------------ */
.ch-recent-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ch-recent-chip {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text);
}
.ch-recent-chip:hover { background: var(--c-surface-2); border-color: var(--c-brand-2); color: var(--c-link); }

/* Help / triage strip -------------------------------------- */
.ch-help {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--c-brand);
  color: #fff;
  border-radius: var(--r-lg);
  padding: 16px 18px;
}
.ch-help-title { font-weight: 600; font-size: 16px; }
.ch-help-sub { color: rgba(255,255,255,0.82); margin-top: 3px; line-height: 1.45; }
.ch-help-cta { flex: 0 0 auto; }

.ch-disclaimer { margin: 24px 0 0; max-width: 70ch; line-height: 1.5; }

/* ============================================================
   Urgent help screen (.em-*) — consumer-reframed emergency
============================================================ */
.em-signs { margin: 10px 0 0; padding-left: 20px; }
.em-signs li { margin-bottom: 6px; line-height: 1.45; }
.em-lines { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.em-line {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
  background: var(--c-surface);
}
.em-line:hover { background: var(--c-surface-2); text-decoration: none; border-color: var(--c-brand-2); }
.em-line-icon {
  width: 32px; height: 32px;
  flex: 0 0 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--c-brand-soft);
  font-size: 16px;
}
.em-line-body { min-width: 0; flex: 1; }
.em-line-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.em-line-label { font-weight: 600; }
.em-line-num { font-weight: 700; color: var(--c-brand-2); white-space: nowrap; }
.em-line-sub { margin-top: 2px; line-height: 1.4; }
.em-wait { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.em-wait-h { font-weight: 600; }
.em-wait-p { color: var(--c-text-muted); margin-top: 2px; line-height: 1.45; }

/* ============================================================
   Home dashboard — customizable widget grid
============================================================ */
.dash { max-width: 1200px; margin: 0 auto; padding: 20px 20px 40px; }

.dash-header { margin-bottom: 18px; }
.dash-header-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dash-header-titles { min-width: 0; }
.dash-date { margin-bottom: 4px; }
.dash-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; flex: 0 0 auto; }
.dash-customize span { vertical-align: middle; }

.dash-edit-hint { margin: 14px 2px 0; }
.dash-disclaimer { margin: 22px 2px 0; line-height: 1.5; }

/* Grid — 12 cols on desktop, collapsing down */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
  align-items: start;
}
.dash-card.size-s { grid-column: span 4; }
.dash-card.size-m { grid-column: span 6; }
.dash-card.size-l { grid-column: span 12; }
@media (max-width: 1024px) {
  .dash-card.size-s { grid-column: span 6; }
  .dash-card.size-m { grid-column: span 6; }
}
@media (max-width: 680px) {
  .dash-grid { grid-template-columns: 1fr; }
  .dash-card.size-s, .dash-card.size-m, .dash-card.size-l { grid-column: 1 / -1; }
}

/* Card chrome */
.dash-card {
  position: relative;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.dash-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.dash-card-icon { font-size: 16px; line-height: 1; opacity: 0.85; }
.dash-card-title { font-size: 14px; font-weight: 700; margin: 0; letter-spacing: 0.01em; color: var(--c-text); flex: 1 1 auto; min-width: 0; }
.dash-card-link {
  flex: 0 0 auto; background: none; border: none; padding: 2px 4px;
  color: var(--c-link); font-size: 12.5px; font-weight: 600; border-radius: var(--r-sm);
}
.dash-card-link:hover { background: var(--c-brand-soft); }
.dash-card-body { flex: 1 1 auto; min-width: 0; }
.dash-empty { margin: 4px 0 10px; line-height: 1.45; }

/* Edit mode */
.dash-grid.is-editing .dash-card { outline: 2px dashed var(--c-border-strong); outline-offset: -2px; cursor: grab; }
.dash-grid.is-editing .dash-card-body { pointer-events: none; user-select: none; opacity: 0.96; }
.dash-card.dragging { opacity: 0.45; cursor: grabbing; }
.dash-drag { color: var(--c-text-soft); cursor: grab; font-size: 15px; line-height: 1; padding-right: 2px; }
.dash-card-ctrls { display: flex; gap: 4px; flex: 0 0 auto; }
.dash-ctrl {
  width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--c-border); background: var(--c-surface-2); border-radius: var(--r-sm);
  font-size: 13px; color: var(--c-text-muted); line-height: 1;
}
.dash-ctrl:hover { background: var(--c-brand-soft); border-color: var(--c-brand-2); color: var(--c-brand-2); }
.dash-ctrl-rm:hover { background: var(--c-tier-5-bg); border-color: var(--c-tier-5); color: var(--c-tier-5); }

/* Size control (S · M · L) */
.dash-size-ctrl {
  display: inline-flex; flex: 0 0 auto; gap: 0;
  border: 1px solid var(--c-border); border-radius: var(--r-sm); overflow: hidden; margin-left: auto;
}
.dash-size-btn {
  width: 26px; height: 24px; border: 0; background: var(--c-surface-2);
  font-size: 11px; font-weight: 700; color: var(--c-text-muted); cursor: pointer; line-height: 1;
  border-left: 1px solid var(--c-border);
}
.dash-size-btn:first-child { border-left: 0; }
.dash-size-btn:hover { background: var(--c-brand-soft); color: var(--c-brand-2); }
.dash-size-btn.is-on { background: var(--c-brand); color: #fff; }
.dash-card-head .dash-card-ctrls { margin-left: 8px; }

/* Drag-to-resize corner handle (edit mode only) */
.dash-resize {
  position: absolute; right: 5px; bottom: 5px;
  width: 16px; height: 16px; cursor: nwse-resize; touch-action: none;
  background:
    linear-gradient(135deg, transparent 0 45%, var(--c-border-strong) 45% 55%, transparent 55% 100%),
    linear-gradient(135deg, transparent 0 70%, var(--c-border-strong) 70% 80%, transparent 80% 100%);
  opacity: 0.7;
}
.dash-resize:hover { opacity: 1; }
.dash-card.is-resizing { box-shadow: var(--shadow-md); outline-color: var(--c-brand-2) !important; z-index: 5; }

/* ── Search widget ───────────────────────────── */
.dash-omni { position: relative; }
.dash-omni-mag { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--c-text-soft); display: flex; }
.dash-omni-input {
  width: 100%; padding: 11px 14px 11px 38px; font-size: 15px;
  border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface-2); color: var(--c-text);
}
.dash-omni-input:focus { outline: none; border-color: var(--c-brand-2); background: var(--c-surface); box-shadow: 0 0 0 3px var(--c-brand-soft); }
.dash-omni-dropdown {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20;
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg); max-height: 360px; overflow-y: auto; padding: 6px;
}
.dash-omni-section { padding: 6px 8px 3px; text-transform: uppercase; letter-spacing: 0.04em; font-size: 10.5px; }
.dash-omni-empty { padding: 10px 8px; }
.dash-omni-result { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px; border: none; background: none; border-radius: var(--r-sm); }
.dash-omni-result:hover { background: var(--c-brand-soft); }
.dash-omni-glyph { width: 22px; text-align: center; color: var(--c-brand-2); flex: 0 0 auto; }
.dash-omni-text { min-width: 0; }
.dash-omni-name { font-weight: 600; }
.dash-omni-meta { }

/* ── GP visit prep widget ────────────────────── */
.dash-gpprep { display: flex; flex-direction: column; gap: 8px; }
.dash-gpprep-lead { margin: 0; }
.dash-gpprep-hint { margin: 0; }
.dash-gpprep-cta { align-self: flex-start; margin-top: 2px; }

/* ── Cabinet widget ──────────────────────────── */
.dash-cab { display: flex; flex-direction: column; gap: 8px; }
.dash-cab-add { align-self: flex-start; }
.dash-cab-status { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--r-md); background: var(--c-surface-2); font-size: 13.5px; font-weight: 600; }
.dash-cab-status-icon { font-size: 14px; }
.dash-cab-status.tier-1 { background: var(--c-tier-1-bg); color: var(--c-tier-1); }
.dash-cab-status.tier-2 { background: var(--c-tier-2-bg); color: var(--c-tier-2); }
.dash-cab-status.tier-3 { background: var(--c-tier-3-bg); color: var(--c-tier-3); }
.dash-cab-status.tier-4 { background: var(--c-tier-4-bg); color: var(--c-tier-4); }
.dash-cab-status.tier-5 { background: var(--c-tier-5-bg); color: var(--c-tier-5); }
.dash-cab-status.tier-6 { background: var(--c-tier-6-bg); color: var(--c-tier-6); }
.dash-cab-pair { display: flex; gap: 10px; align-items: flex-start; padding: 8px; border-radius: var(--r-md); border: 1px solid var(--c-border); }
.dash-cab-pair:hover { border-color: var(--c-brand-2); text-decoration: none; }
.dash-cab-badge { flex: 0 0 auto; font-size: 11px; }
.dash-cab-pair-body { min-width: 0; }
.dash-cab-pair-name { font-weight: 600; color: var(--c-text); }
.dash-cab-pair-note { margin-top: 1px; }
.dash-cab-manage { align-self: flex-start; }

/* ── Log widget ──────────────────────────────── */
.dash-log { display: flex; flex-direction: column; gap: 10px; }
.dash-log-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.dash-log-row { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; padding: 6px 8px; border-radius: var(--r-sm); background: var(--c-surface-2); }
.dash-log-main { min-width: 0; }
.dash-log-name { font-weight: 600; }
.dash-log-meta { margin-top: 1px; }
.dash-log-time { flex: 0 0 auto; }
.dash-log-add { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; }

/* ── Warnings widget ─────────────────────────── */
.dash-warn { display: flex; flex-direction: column; gap: 8px; }
.dash-warn-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px; border-radius: var(--r-md); border: 1px solid var(--c-border); border-left-width: 3px; }
.dash-warn-row:hover { border-color: var(--c-brand-2); text-decoration: none; }
.dash-warn-row.tier-3 { border-left-color: var(--c-tier-3); }
.dash-warn-row.tier-4 { border-left-color: var(--c-tier-4); }
.dash-warn-row.tier-5 { border-left-color: var(--c-tier-5); }
.dash-warn-row.tier-6 { border-left-color: var(--c-tier-6); }
.dash-warn-row .tier-badge { flex: 0 0 auto; font-size: 11px; }
.dash-warn-body { min-width: 0; }
.dash-warn-pair { font-weight: 600; color: var(--c-text); }
.dash-warn-mech { margin-top: 1px; }

/* ── Body-systems widget ─────────────────────── */
.dash-sys-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 480px) { .dash-sys-grid { grid-template-columns: 1fr; } }
.dash-sys { display: flex; align-items: center; gap: 10px; text-align: left; padding: 9px 10px; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); }
.dash-sys:hover { border-color: var(--c-brand-2); background: var(--c-brand-soft); }
.dash-sys-num { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--c-text-soft); font-size: 12px; flex: 0 0 auto; }
.dash-sys-body { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
.dash-sys-name { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-sys-chev { color: var(--c-text-soft); flex: 0 0 auto; }

/* ── Symptoms widget ─────────────────────────── */
.dash-symptom-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 900px) { .dash-symptom-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .dash-symptom-grid { grid-template-columns: 1fr; } }
.dash-symptom { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 12px; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); }
.dash-symptom:hover { border-color: var(--c-brand-2); box-shadow: var(--shadow-sm); }
.dash-symptom.is-hero { border-color: var(--c-brand-2); background: var(--c-brand-soft); }
.dash-symptom-top { display: flex; justify-content: space-between; gap: 6px; }
.dash-symptom-area { text-transform: uppercase; letter-spacing: 0.04em; font-size: 10px; color: var(--c-text-soft); }
.dash-symptom-deep { color: var(--c-brand-2); font-weight: 600; font-size: 10px; }
.dash-symptom-name { font-weight: 700; font-size: 15px; }
.dash-symptom-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 2px; }
.dash-symptom-gentle { display: inline-flex; align-items: center; gap: 5px; }
.dash-band-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }

/* ── Calc widget ─────────────────────────────── */
.dash-calc { display: flex; flex-direction: column; gap: 8px; }
.dash-calc-row { display: flex; align-items: center; gap: 8px; }
.dash-calc .calc-input { padding: 8px 10px; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface-2); font-size: 14px; min-width: 0; flex: 1 1 auto; }
.dash-calc .calc-input:focus { outline: none; border-color: var(--c-brand-2); background: var(--c-surface); }
.dash-calc select.calc-input { flex: 0 0 auto; width: auto; }
.dash-calc .calc-unit { color: var(--c-text-soft); font-size: 13px; flex: 0 0 auto; }
.dash-calc-out { padding: 8px 10px; border-radius: var(--r-md); background: var(--c-brand-soft); font-weight: 700; color: var(--c-brand); }
.dash-calc-out.muted { background: var(--c-surface-2); font-weight: 400; }
.dash-calc-more { align-self: flex-start; }
.dash-calc-fine { margin: 0; }

/* ── Quick actions widget ────────────────────── */
.dash-qa-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (max-width: 900px) { .dash-qa-grid { grid-template-columns: repeat(2, 1fr); } }
.dash-qa { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface-2); text-align: center; }
.dash-qa:hover { border-color: var(--c-brand-2); background: var(--c-brand-soft); }
.dash-qa-icon { font-size: 20px; line-height: 1; }
.dash-qa-label { font-size: 12px; font-weight: 600; line-height: 1.25; }
.dash-qa-kbd { position: absolute; top: 4px; right: 5px; font-size: 9.5px; color: var(--c-text-soft); border: 1px solid var(--c-border); border-radius: 3px; padding: 0 3px; }

/* ── Recents widget ──────────────────────────── */
.dash-recent-row { display: flex; flex-wrap: wrap; gap: 6px; }
.dash-recent-chip { padding: 5px 11px; border: 1px solid var(--c-border); border-radius: 999px; background: var(--c-surface-2); font-size: 13px; font-weight: 500; }
.dash-recent-chip:hover { border-color: var(--c-brand-2); background: var(--c-brand-soft); color: var(--c-brand-2); }

/* ── Stats widget ────────────────────────────── */
.dash-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (max-width: 900px) { .dash-stat-grid { grid-template-columns: repeat(2, 1fr); } }
.dash-stat { padding: 12px 10px; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--cc-bg, var(--c-surface-2)); text-align: center; }
.dash-stat:hover { border-color: var(--cc, var(--c-brand-2)); }
.dash-stat-num { font-size: 22px; font-weight: 800; color: var(--cc, var(--c-brand)); font-variant-numeric: tabular-nums; line-height: 1.1; }
.dash-stat-lbl { margin-top: 2px; color: var(--c-text-muted); }

/* ── Classes widget ──────────────────────────── */
.dash-class-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 480px) { .dash-class-grid { grid-template-columns: 1fr; } }
.dash-class { display: flex; align-items: center; gap: 9px; text-align: left; padding: 9px 10px; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); }
.dash-class:hover { border-color: var(--cc, var(--c-brand-2)); background: var(--cc-bg, var(--c-brand-soft)); }
.dash-class-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--cc, var(--c-brand-2)); flex: 0 0 auto; }
.dash-class-text { min-width: 0; }
.dash-class-name { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Research widget ─────────────────────────── */
.dash-rsch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px) { .dash-rsch-grid { grid-template-columns: 1fr; } }
.dash-rsch-card { border: 1px solid var(--c-border); border-radius: var(--r-md); padding: 10px; display: flex; flex-direction: column; gap: 5px; }
.dash-rsch-cond { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; background: none; border: none; padding: 0; text-align: left; }
.dash-rsch-cond-name { font-weight: 700; color: var(--c-text); }
.dash-rsch-cond-go { color: var(--c-link); }
.dash-rsch-cond:hover .dash-rsch-cond-go { text-decoration: underline; }
.dash-rsch-evi { display: flex; align-items: center; gap: 6px; }
.dash-rsch-badge { color: var(--c-tier-2); letter-spacing: -1px; }
.dash-rsch-treat { color: var(--c-text-muted); }
.dash-rsch-link { align-self: flex-start; font-weight: 600; }
.dash-rsch-fine { margin: 10px 0 0; line-height: 1.45; }

/* ── Principle widget ────────────────────────── */
.dash-principle { display: flex; flex-direction: column; gap: 8px; }
.dash-principle-quote { margin: 0; font-size: 17px; font-weight: 700; color: var(--c-brand); border-left: 3px solid var(--c-brand-2); padding-left: 12px; line-height: 1.35; }
.dash-principle-text { margin: 0; color: var(--c-text-muted); line-height: 1.5; }
.dash-principle-cycle { align-self: flex-start; }

/* ── Help widget ─────────────────────────────── */
.dash-help { display: flex; flex-direction: column; gap: 12px; }
.dash-help-sub { color: var(--c-text-muted); line-height: 1.5; margin: 0; }
.dash-help-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Add-widget gallery ──────────────────────── */
.dash-gallery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .dash-gallery-grid { grid-template-columns: 1fr; } }
.dash-gallery-card { border: 1px solid var(--c-border); border-radius: var(--r-md); padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.dash-gallery-head { display: flex; align-items: center; gap: 8px; }
.dash-gallery-icon { font-size: 17px; }
.dash-gallery-title { font-weight: 700; }
.dash-gallery-desc { margin: 0; line-height: 1.45; flex: 1 1 auto; }
.dash-gallery-add { align-self: flex-start; }

/* ---- Concern-level pill (shared: dashboard widget + /alerts screen) ------ */
.alert-level {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 3px 9px 3px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--ac, var(--c-tier-2));
  background: var(--ac-soft, var(--c-tier-2-bg));
  border: 1px solid color-mix(in oklch, var(--ac, var(--c-tier-2)) 26%, transparent);
  white-space: nowrap;
}
.alert-level.is-big { font-size: 12px; padding: 4px 11px 4px 9px; }
.alert-level-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ac, var(--c-tier-2)); flex: none; }

/* ---- Medication alerts dashboard widget --------------------------------- */
.dash-alerts { display: flex; flex-direction: column; gap: 10px; }
.dash-alerts-lead { margin: 0; line-height: 1.5; }
.dash-alerts-list { display: flex; flex-direction: column; gap: 6px; }
.dash-alert-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 10px; border: 1px solid var(--c-border); border-radius: var(--r-md);
  background: var(--c-surface); cursor: pointer; transition: background 120ms, border-color 120ms;
}
.dash-alert-row:hover { background: var(--c-surface-2); border-color: color-mix(in oklch, var(--c-brand-2) 30%, var(--c-border)); }
.dash-alert-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dash-alert-body { flex: 1 1 auto; min-width: 0; }
.dash-alert-title { font-size: 13px; font-weight: 650; color: var(--c-text); line-height: 1.3; }
.dash-alert-sum { margin-top: 2px; line-height: 1.4; }
.dash-alert-chev { flex: none; display: flex; }
.dash-alerts-fine { margin: 2px 0 0; line-height: 1.45; }

/* ---- Alert detail (shared by the /alerts cards and the widget modal) ----- */
.alert-para { margin: 0 0 10px; line-height: 1.55; color: var(--c-text); font-size: 14px; }
.alert-para:last-of-type { margin-bottom: 12px; }
.alert-action {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 10px 12px; border-radius: var(--r-md);
  background: var(--c-brand-soft, var(--c-surface-2));
  border: 1px solid color-mix(in oklch, var(--c-brand-2) 18%, transparent);
}
.alert-action-ic { flex: none; display: flex; margin-top: 1px; }
.alert-action-text { margin: 0; line-height: 1.5; font-size: 13.5px; color: var(--c-text); }
.alert-sources { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.alert-sources-lbl { margin-right: 2px; }
.alert-source-link {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; color: var(--c-brand-2); text-decoration: none;
  background: var(--c-brand-soft, var(--c-surface-2));
  border: 1px solid color-mix(in oklch, var(--c-brand-2) 22%, transparent);
  transition: background 120ms, border-color 120ms;
}
.alert-source-link:hover { background: var(--c-surface); border-color: var(--c-brand-2); text-decoration: underline; }
.alert-source-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.alert-source-ext { font-size: 10px; opacity: 0.8; }
.alert-modal-body { display: block; }
.alert-modal-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.alert-modal-date { font-size: 12px; }

/* ---- "This week's alerts" pop-up ---------------------------------------- */
.alert-weekly { display: flex; flex-direction: column; gap: 12px; }
.alert-weekly-lead { margin: 0; line-height: 1.5; }
.alert-weekly-list { gap: 8px; }
.alert-weekly-fine { margin: 0; line-height: 1.45; }

/* ---- Interaction Scenario Report (print / save-as-PDF) ------------------ */
/* The print-only header is hidden on screen and revealed when printing. */
.ddi-print-header { display: none; }

@media print {
  /* App chrome and interactive controls have no place in a printed report. */
  #taskbar,
  #sidebar,
  #nav-bar,
  #web-nav,
  .ddi-add,
  .ddi-controls,
  .ddi-ephemeral-note,
  .ddi-chip-x,
  .ddi-pair-chev,
  .ddi-summary-ctx .ddi-link-btn,
  .modal-backdrop,
  .toast,
  .glossary-tip { display: none !important; }

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

  /* Let the main column take the full page width. */
  #app {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    width: 100% !important;
  }

  .ddi-print-header {
    display: block;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid #000;
  }
  .ddi-print-title { font-size: 20px; font-weight: 800; }
  .ddi-print-meta { font-size: 11px; color: #444; margin-top: 2px; }
  .ddi-print-disclaimer { font-size: 11px; color: #444; margin: 6px 0 0; }

  /* Keep each risk block intact across page breaks. */
  .ddi-summary,
  .ddi-syndrome-panel,
  .ddi-syndrome-card,
  .ddi-pair-row,
  .ddi-pair-card { break-inside: avoid; page-break-inside: avoid; }

  /* Flatten interactive styling to ink-friendly borders. */
  .ddi-chip,
  .ddi-pair-row,
  .ddi-summary,
  .ddi-syndrome-card {
    border: 1px solid #999 !important;
    box-shadow: none !important;
  }
  .ddi-syndrome-panel { border: 1px solid #999 !important; background: #fff !important; }

  a[href]:after { content: ""; } /* don't print raw URLs after links */
}

/* ===================================================================== */
/* GP Visit Prep wizard                                                   */
/* ===================================================================== */
.gp-prep { max-width: 920px; margin: 0 auto; padding-bottom: 96px; }

/* Step indicator */
.gp-steps {
  display: flex; gap: 8px; list-style: none; margin: 0 0 18px; padding: 0;
}
.gp-step {
  flex: 1; display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: var(--r-md);
  background: var(--c-surface-2); border: 1px solid var(--c-border);
  font-size: 13px; color: var(--c-text-soft);
}
.gp-step .gp-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto;
  background: var(--c-border); color: #fff; font-weight: 700; font-size: 12px;
}
.gp-step.current { background: var(--c-brand-soft); border-color: var(--c-brand-2); color: var(--c-text); }
.gp-step.current .gp-step-num { background: var(--c-brand); }
.gp-step.done .gp-step-num { background: var(--c-tier-1); }
.gp-step-label { line-height: 1.2; }

.gp-head { margin-bottom: 16px; }
.gp-eyebrow { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--c-text-soft); margin: 0 0 4px; }
.gp-title { font-size: 26px; margin: 0 0 6px; color: var(--c-text); }
.gp-sub { margin: 0 0 6px; color: var(--c-text-muted); }
.gp-fineprint { margin: 0; }

/* Symptom selector */
.gp-symptoms .gp-sym-group { margin-top: 14px; }
.gp-sym-sys { font-size: 14px; margin: 0 0 8px; color: var(--c-brand-2); }
.gp-sym-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.gp-chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--c-border-strong); background: var(--c-surface);
  color: var(--c-text); font-size: 14px; cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.gp-chip:hover { background: var(--c-surface-2); }
.gp-chip.active { background: var(--c-brand); border-color: var(--c-brand); color: #fff; }
.gp-chip-extra { border-style: dashed; }
.gp-chip-flag {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--c-emergency); color: #fff; font-size: 11px; font-weight: 700;
}
.gp-chip:focus-visible { outline: 2px solid var(--c-brand-2); outline-offset: 2px; }

/* Timing / radios */
.gp-timing { display: grid; gap: 16px; }
.gp-radio-set { border: 0; padding: 0; margin: 0; }
.gp-field-label { display: block; font-weight: 600; margin-bottom: 8px; color: var(--c-text); }
.gp-radio-row { display: flex; flex-wrap: wrap; gap: 8px; }
.gp-radio {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 8px 12px; border-radius: var(--r-md);
  border: 1px solid var(--c-border); background: var(--c-surface); cursor: pointer; font-size: 14px;
}
.gp-radio input { accent-color: var(--c-brand); }

/* Free text */
.gp-textarea {
  width: 100%; box-sizing: border-box; padding: 10px 12px;
  border: 1px solid var(--c-border); border-radius: var(--r-md);
  font: inherit; resize: vertical;
}
.gp-counter-row { display: flex; justify-content: flex-end; margin-top: 4px; }

/* Nav controls */
.gp-nav {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin-top: 20px;
}

/* Full-screen syndrome alert */
.gp-alert-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: #1b2a4a; color: #fff;
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.gp-alert-inner { max-width: 560px; text-align: center; }
.gp-alert-icon {
  font-size: 56px; line-height: 1; color: var(--c-tier-3);
  margin-bottom: 12px;
}
.gp-alert-head { font-size: 24px; margin: 0 0 14px; color: #fff; }
.gp-alert-text { font-size: 16px; line-height: 1.55; margin: 0 0 22px; color: #dbe4f0; }
.gp-alert-actions { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.gp-alert-btn {
  display: block; padding: 16px; border-radius: var(--r-md);
  font-size: 17px; font-weight: 700; text-decoration: none;
}
.gp-alert-000 { background: var(--c-emergency); color: #fff; }
.gp-alert-poisons { background: #1f4e79; color: #fff; }
.gp-alert-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.gp-alert-dismiss {
  display: inline-block; margin: 4px auto 0; padding: 8px;
  background: none; border: 0; color: #a9c2e0; font-size: 14px;
  text-decoration: underline; cursor: pointer;
}
.gp-alert-dismiss:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.gp-alert-foot { margin: 18px 0 0; font-size: 13px; color: #8ba3c2; }

/* Mobile: fixed bottom nav, larger touch targets */
@media (max-width: 720px) {
  .gp-prep { padding-bottom: 84px; }
  .gp-steps { gap: 4px; }
  .gp-step-label { display: none; }
  .gp-step { justify-content: center; }
  .gp-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    padding: 12px 16px; background: var(--c-surface);
    border-top: 1px solid var(--c-border); margin: 0;
  }
  .gp-chip { min-height: 44px; }
}

/* ---- Step 2: exposure assembly + possible connections ---- */
.gp-meds, .gp-supps, .gp-connections { margin-top: 16px; }
.gp-empty-line { margin: 8px 0; }

.gp-med-list { display: grid; gap: 12px; margin: 12px 0; }
.gp-med-card {
  border: 1px solid var(--c-border); border-radius: var(--r-md);
  padding: 12px 14px; background: var(--c-surface);
}
.gp-med-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gp-med-name { font-weight: 600; font-size: 15px; }
.gp-med-remove {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--c-border); background: var(--c-surface);
  color: var(--c-text-muted, #667); font-size: 18px; line-height: 1; cursor: pointer;
}
.gp-med-remove:hover { background: var(--c-emergency); border-color: var(--c-emergency); color: #fff; }
.gp-med-fields { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.gp-input, .gp-select {
  flex: 1 1 180px; min-width: 0; box-sizing: border-box;
  padding: 8px 10px; border: 1px solid var(--c-border);
  border-radius: var(--r-md); font: inherit; background: var(--c-surface);
}
.gp-select { flex: 0 1 200px; }
.gp-med-changes { margin-top: 4px; }
.gp-change-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.gp-minichip {
  padding: 5px 10px; border-radius: 999px; font-size: 13px;
  border: 1px solid var(--c-border); background: var(--c-surface); cursor: pointer;
}
.gp-minichip.active { background: var(--c-brand); border-color: var(--c-brand); color: #fff; }
.gp-minichip:focus-visible { outline: 2px solid var(--c-brand-2); outline-offset: 2px; }

/* Drug / supplement add search */
.gp-add { position: relative; margin-top: 8px; }
.gp-add-input {
  width: 100%; box-sizing: border-box; padding: 10px 12px;
  border: 1px solid var(--c-border); border-radius: var(--r-md); font: inherit;
}
.gp-add-dropdown {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-md); box-shadow: 0 8px 24px rgba(0,0,0,.12);
  max-height: 320px; overflow-y: auto;
}
.gp-add-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; text-align: left; padding: 10px 12px;
  background: none; border: 0; border-bottom: 1px solid var(--c-border); cursor: pointer;
}
.gp-add-row:last-child { border-bottom: 0; }
.gp-add-row:hover { background: var(--c-surface-2); }
.gp-add-row-name { font-weight: 600; }
.gp-add-row-plus { color: var(--c-brand); font-weight: 700; font-size: 18px; }

/* Supplements */
.gp-supp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.gp-supp-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 8px 6px 12px; border-radius: 999px;
  border: 1px solid var(--c-border); background: var(--c-surface-2); font-size: 14px;
}
.gp-supp-x {
  width: 20px; height: 20px; border-radius: 50%; border: 0;
  background: rgba(0,0,0,.08); color: inherit; font-size: 14px; line-height: 1; cursor: pointer;
}
.gp-supp-x:hover { background: var(--c-emergency); color: #fff; }
.gp-supp-add-row { display: flex; gap: 8px; margin-top: 8px; }
.gp-supp-add-row .gp-add-input { flex: 1; }
.gp-supp-add { flex: none; }

/* Possible connections */
.gp-connections { border-color: var(--c-brand); }
.gp-conn-disclaimer {
  background: var(--c-surface-2); border-radius: var(--r-md);
  padding: 10px 12px; margin: 8px 0 14px; line-height: 1.5;
}
.gp-conn-cards { display: grid; gap: 10px; }
.gp-conn-card {
  display: flex; align-items: flex-start; gap: 12px;
  border: 1px solid var(--c-border); border-left-width: 4px;
  border-radius: var(--r-md); padding: 12px 14px; background: var(--c-surface);
}
.gp-conn-a { border-left-color: var(--c-brand); }
.gp-conn-b { border-left-color: var(--c-tier-3, #d08700); }
.gp-conn-card-body { flex: 1; min-width: 0; }
.gp-conn-pair { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; }
.gp-conn-drug { font-weight: 600; }
.gp-conn-sym { font-weight: 600; color: var(--c-brand); }
.gp-conn-link { color: var(--c-text-muted, #889); }
.gp-conn-tier { margin-left: auto; }
.gp-conn-text { margin: 0; line-height: 1.5; }
.gp-conn-dismiss {
  flex: none; align-self: center; padding: 6px 10px;
  border: 1px solid var(--c-border); border-radius: var(--r-md);
  background: var(--c-surface); font-size: 13px; cursor: pointer; color: var(--c-text-muted, #667);
}
.gp-conn-dismiss:hover { background: var(--c-surface-2); }
.gp-conn-none { margin: 8px 0 0; }
.gp-conn-cflag {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 14px;
  padding: 10px 12px; border-radius: var(--r-md);
  background: var(--c-surface-2); border: 1px dashed var(--c-border);
}
.gp-conn-cflag-icon { font-size: 16px; line-height: 1.4; color: var(--c-brand); }
.gp-conn-cflag p { margin: 0; line-height: 1.5; }

@media (max-width: 720px) {
  .gp-conn-card { flex-direction: column; }
  .gp-conn-dismiss { align-self: flex-start; }
  .gp-med-fields, .gp-select, .gp-input { flex-basis: 100%; }
}

/* ---- Step 3: the printable GP document -------------------------------- */
.gp-doc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }
.gp-startover { margin-left: auto; color: var(--c-text-muted); }

.gp-doc {
  background: #fff; color: var(--c-text);
  border: 1px solid var(--c-border); border-radius: var(--r-md);
  padding: 28px 32px; max-width: 760px; margin: 0 auto;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
  line-height: 1.5;
}
.gp-doc-head { border-bottom: 2px solid var(--c-brand); padding-bottom: 10px; margin-bottom: 16px; }
.gp-doc-title { font-size: 22px; font-weight: 800; color: var(--c-brand); margin: 0; }
.gp-doc-date { margin: 2px 0 0; }

.gp-doc-sec { margin: 0 0 18px; break-inside: avoid; page-break-inside: avoid; }
.gp-doc-h {
  font-size: 13px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--c-brand); margin: 0 0 8px;
  border-bottom: 1px solid var(--c-border); padding-bottom: 4px;
}
.gp-doc-sub { margin: 10px 0 4px; font-weight: 600; }
.gp-doc-list { margin: 4px 0; padding-left: 20px; }
.gp-doc-list li { margin: 3px 0; }
.gp-doc-meds .gp-doc-med-name { font-weight: 600; }
.gp-doc-med-meta { color: var(--c-text-muted); }
.gp-doc-meta { color: var(--c-text-muted); margin: 8px 0 0; }
.gp-doc-note { margin: 8px 0 0; }
.gp-doc-note-label { font-weight: 600; }
.gp-doc-disclaimer {
  background: var(--c-surface-2); border-radius: 6px;
  padding: 8px 10px; margin: 0 0 10px; line-height: 1.45;
}
.gp-doc-conn li { margin: 5px 0; }
.gp-doc-cflag { color: var(--c-text-muted); margin: 8px 0 0; font-style: italic; }
.gp-doc-questions li { margin: 5px 0; }
.gp-doc-empty { font-style: italic; }
.gp-doc-foot { border-top: 1px solid var(--c-border); margin-top: 18px; padding-top: 10px; line-height: 1.45; }

.gp-toast {
  position: fixed; left: 50%; bottom: 28px;
  transform: translateX(-50%) translateY(12px);
  background: var(--c-brand); color: #fff;
  padding: 11px 18px; border-radius: 999px; font-size: 14px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
  opacity: 0; pointer-events: none; max-width: 90vw;
  transition: opacity .2s ease, transform .2s ease; z-index: 9999;
}
.gp-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 720px) {
  .gp-doc { padding: 20px 18px; }
  .gp-startover { margin-left: 0; }
}

/* Print: isolate the GP document. App chrome + #app width are already handled
   by the shared @media print block above; here we strip the wizard controls
   and flatten the document to ink-friendly black on white. */
@media print {
  .gp-steps,
  .gp-head,
  .gp-doc-actions,
  .gp-nav,
  .gp-toast { display: none !important; }

  .gp-prep { margin: 0 !important; padding: 0 !important; }
  .gp-doc {
    border: none !important; box-shadow: none !important; border-radius: 0 !important;
    max-width: none !important; width: 100% !important;
    padding: 0 !important; margin: 0 !important; color: #000 !important;
  }
  .gp-doc-title, .gp-doc-h { color: #000 !important; }
  .gp-doc-head { border-bottom: 2px solid #000 !important; }
  .gp-doc-h { border-bottom: 1px solid #000 !important; }
  .gp-doc-disclaimer { background: #f2f2f2 !important; border: 1px solid #ccc; }
  .gp-doc-list li { break-inside: avoid; page-break-inside: avoid; }

  @page { size: A4; margin: 16mm; }
}

/* ── Anonymous adverse-event reporting ───────────────────────────────────── */

/* Modal card (uses .modal-shade for the backdrop). */
.rpt-card {
  background: var(--c-surface);
  border-radius: 14px;
  width: min(640px, 94vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(27,42,74, 0.28);
  overflow: hidden;
}
.rpt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--c-border);
}
.rpt-title { margin: 0; font-size: 1.15rem; color: var(--c-text); }
.rpt-close {
  border: none; background: transparent; cursor: pointer;
  font-size: 1.6rem; line-height: 1; color: var(--c-text-muted);
  width: 36px; height: 36px; border-radius: 8px;
}
.rpt-close:hover { background: var(--c-surface-2); color: var(--c-text); }
.rpt-body { padding: 18px 20px; overflow-y: auto; }
.rpt-foot {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 14px 20px; border-top: 1px solid var(--c-border);
  background: var(--c-surface-2);
}

.rpt-steps { display: flex; gap: 18px; margin-bottom: 14px; }
.rpt-step { display: flex; align-items: center; gap: 7px; color: var(--c-text-soft); font-size: 0.85rem; }
.rpt-step.is-active { color: var(--c-brand-2); font-weight: 600; }
.rpt-step.is-done { color: var(--c-brand-2); }
.rpt-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--c-surface-2); border: 1px solid var(--c-border);
  font-size: 0.78rem;
}
.rpt-step.is-active .rpt-step-num { background: var(--c-brand-2); color: #fff; border-color: var(--c-brand-2); }
.rpt-step.is-done .rpt-step-num { background: var(--c-brand-soft); color: var(--c-brand-2); border-color: var(--c-brand-2); }

.rpt-lead { color: var(--c-text-muted); font-size: 0.92rem; margin: 0 0 14px; }
.rpt-q { font-size: 1rem; margin: 18px 0 8px; color: var(--c-text); }
.rpt-q:first-of-type { margin-top: 6px; }
.rpt-q-hint { font-weight: 400; }

.rpt-locked-drug {
  display: flex; align-items: baseline; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  background: var(--c-brand-soft); border: 1px solid var(--c-border);
}
.rpt-locked-name { font-weight: 600; color: var(--c-text); }

.rpt-symptoms { margin-top: 4px; }
.rpt-sym-count { margin: 0 0 8px; }
.rpt-sym-group { margin-bottom: 10px; }
.rpt-sym-group-label { margin-bottom: 5px; }
.rpt-sym-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rpt-chip { font-size: 0.85rem; }

.rpt-radios { display: flex; flex-direction: column; gap: 8px; }
.rpt-radio {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--c-border); border-radius: 10px;
  cursor: pointer; transition: border-color .12s, background .12s;
}
.rpt-radio:hover { background: var(--c-surface-2); }
.rpt-radio.is-on { border-color: var(--c-brand-2); background: var(--c-brand-soft); }
.rpt-radio-input { margin-top: 3px; accent-color: var(--c-brand-2); }
.rpt-radio-main { display: flex; flex-direction: column; gap: 2px; }
.rpt-radio-label { color: var(--c-text); font-weight: 500; }
.rpt-radio-hint { color: var(--c-text-soft); font-size: 0.82rem; }

.rpt-checks { display: flex; flex-direction: column; gap: 8px; }
.rpt-check {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--c-border); border-radius: 10px; cursor: pointer;
}
.rpt-check:hover { background: var(--c-surface-2); }
.rpt-check-input { margin-top: 3px; accent-color: var(--c-brand-2); }

.rpt-err-slot:empty { display: none; }
.rpt-err { color: #b42318; font-size: 0.88rem; margin: 12px 0 0; }

.rpt-bluecard {
  margin: 18px 0 4px; border: 1px solid var(--c-border);
  border-radius: 10px; background: var(--c-surface-2);
}
.rpt-bluecard-sum {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 13px; cursor: pointer; font-weight: 600; color: var(--c-text);
  list-style: none;
}
.rpt-bluecard-sum::-webkit-details-marker { display: none; }
.rpt-bluecard-body { padding: 0 13px 13px; }
.rpt-bluecard-text {
  white-space: pre-wrap; font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.82rem; background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: 8px; padding: 10px 12px; color: var(--c-text); overflow-x: auto;
}
.rpt-bluecard-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

.rpt-privacy { margin: 14px 0 0; line-height: 1.45; }

.rpt-success { text-align: center; padding: 24px 20px 8px; }
.rpt-success-mark {
  width: 56px; height: 56px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: #e7f6ec; color: #1a7f3c; font-size: 1.8rem;
}
.rpt-success-h { margin: 0 0 8px; color: var(--c-text); }
.rpt-success-p { color: var(--c-text-muted); font-size: 0.92rem; max-width: 44ch; margin: 0 auto 18px; }
.rpt-success-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* Dashboard widget */
.rpt-widget-total { margin: 0 0 8px; }
.rpt-widget-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rpt-widget-row { display: flex; justify-content: space-between; gap: 12px; font-size: 0.9rem; }
.rpt-widget-name { color: var(--c-text); }
.rpt-widget-count { color: var(--c-brand-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.rpt-widget-cta { margin-top: 10px; }

/* /experiences page */
.rpt-page { max-width: 880px; margin: 0 auto; padding: 8px 4px 40px; }
.rpt-page-eyebrow { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.72rem; color: var(--c-brand-2); margin: 0 0 4px; font-weight: 600; }
.rpt-page-title { margin: 0 0 6px; color: var(--c-text); }
.rpt-page-sub { color: var(--c-text-muted); margin: 0 0 16px; }
.rpt-disclaimer {
  border: 1px solid #f0d8a8; background: #fdf6e7; color: #6b4e16;
  border-radius: 10px; padding: 12px 14px; font-size: 0.88rem; line-height: 1.5; margin-bottom: 16px;
}
.rpt-page-share { margin-bottom: 18px; }
.rpt-page-total { margin: 0 0 16px; color: var(--c-text); }
.rpt-page-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 720px) { .rpt-page-cols { grid-template-columns: 1fr; } }
.rpt-col-h { font-size: 1rem; margin: 0 0 10px; color: var(--c-text); }
.rpt-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rpt-bar-row { display: grid; grid-template-columns: 1fr 110px auto; align-items: center; gap: 10px; font-size: 0.88rem; }
.rpt-bar-label { color: var(--c-text); }
.rpt-bar-track { height: 8px; background: var(--c-surface-2); border-radius: 5px; overflow: hidden; }
.rpt-bar-fill { display: block; height: 100%; background: var(--c-brand-2); border-radius: 5px; }
.rpt-bar-count { color: var(--c-text-muted); font-variant-numeric: tabular-nums; min-width: 2.5ch; text-align: right; }
.rpt-page-stamp { margin-top: 20px; }
.rpt-page-empty { padding: 24px; text-align: center; border: 1px dashed var(--c-border); border-radius: 12px; }

/* Drug-detail rail card */
.dx-card--report .dx-card-head { color: var(--c-brand-2); }

/* GP-prep nudge */
.gp-report-nudge {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 14px 0; padding: 12px 14px;
  border: 1px solid var(--c-border); border-radius: 12px; background: var(--c-brand-soft);
  cursor: pointer;
}
.gp-report-nudge:hover { border-color: var(--c-brand-2); }
.gp-report-nudge-icon { font-size: 1.3rem; }
.gp-report-nudge-text { flex: 1; min-width: 200px; color: var(--c-text); font-size: 0.9rem; }
.gp-report-nudge-cta { color: var(--c-brand-2); font-weight: 600; white-space: nowrap; }
@media print { .gp-report-nudge { display: none !important; } }

/* ============================================================
   Interaction Scenario — 2026 redesign (drug cards, inline
   context bar, sentence overview, interaction map, pair cards).
   Layered after the original .ddi-* rules so it overrides them.
   ============================================================ */

/* ---- Drug list: rich cards instead of pills ---- */
.ddi-drugs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.ddi-drugs-empty {
  grid-column: 1 / -1;
  padding: 16px 14px;
  border: 1px dashed var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface-2);
  text-align: center;
}
.ddi-drug-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 10px 12px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--cc, var(--c-border-strong));
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  min-width: 0;
  transition: box-shadow var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.ddi-drug-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.ddi-drug-dot {
  width: 9px; height: 9px; flex: 0 0 9px;
  border-radius: 999px;
  background: var(--cc, var(--c-text-soft));
}
.ddi-drug-text { flex: 1; min-width: 0; }
.ddi-drug-name {
  font-size: 14px; font-weight: 600; color: var(--c-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ddi-drug-sub {
  font-size: 11.5px; color: var(--c-text-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ddi-drug-x {
  flex: 0 0 auto;
  background: transparent; border: 0; cursor: pointer;
  width: 24px; height: 24px; border-radius: 999px;
  font-size: 17px; line-height: 1; color: var(--c-text-soft); padding: 0;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.ddi-drug-x:hover { background: var(--c-tier-5-bg); color: var(--c-tier-5); }

/* ---- Inline scenario-context bar ---- */
.ddi-context-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 12px;
  margin-bottom: 12px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}
.ddi-context-icon { font-size: 13px; }
.ddi-context-label {
  font-size: 12.5px; font-weight: 600; color: var(--c-text-muted);
}
.ddi-context-summary { font-size: 12.5px; color: var(--c-text); flex: 1; min-width: 0; }
.ddi-context-summary.muted { color: var(--c-text-soft); }
.ddi-context-edit {
  flex: 0 0 auto;
  background: transparent; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--c-brand-2);
}
.ddi-context-edit:hover { text-decoration: underline; }

/* ---- Scenario builder panel (groups the drug list + add search) ---- */
.ddi-builder {
  padding: 14px 16px 16px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: 12px;
}
.ddi-builder-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.ddi-builder-title { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--c-text-soft); }
.ddi-builder-count { font-variant-numeric: tabular-nums; font-weight: 600; }
.ddi-builder .ddi-drugs { margin-bottom: 10px; }
.ddi-builder .ddi-add { margin-bottom: 0; }

/* Compact drug chips inside the builder */
.ddi-drugs { grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 8px; }
.ddi-drug-card { padding: 8px 8px 8px 11px; box-shadow: none; }
.ddi-drug-card:hover { box-shadow: var(--shadow-sm); transform: none; }
.ddi-drug-name { font-size: 13.5px; }

/* ---- Toolbar polish: lighter, consistent ghost buttons ---- */
.ddi-controls .btn {
  font-size: 12.5px; font-weight: 600; padding: 7px 12px;
  background: var(--c-surface); border: 1px solid var(--c-border);
  color: var(--c-text-muted); box-shadow: none;
}
.ddi-controls .btn:hover { border-color: var(--c-brand-2); color: var(--c-brand-2); background: var(--c-brand-soft); }
.ddi-controls .ddi-clear-all { color: var(--c-tier-5); }
.ddi-controls .ddi-clear-all:hover { border-color: var(--c-tier-5); color: var(--c-tier-5); background: var(--c-tier-5-bg); }

/* ---- Empty state with one-tap example scenarios ---- */
.ddi-empty {
  padding: 30px 22px;
  text-align: center;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.ddi-empty-ic { display: inline-flex; color: var(--c-brand-2); margin-bottom: 8px; opacity: 0.9; }
.ddi-empty-title { font-size: 20px; font-weight: 700; margin: 0 0 5px; color: var(--c-text); letter-spacing: -0.01em; }
.ddi-empty-text { margin: 0 auto 18px; max-width: 48ch; line-height: 1.5; }
.ddi-empty-examples { display: flex; flex-direction: column; gap: 8px; max-width: 430px; margin: 0 auto; text-align: left; }
.ddi-empty-examples-label { text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; text-align: left; margin-bottom: 1px; }
.ddi-example {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 11px 14px; border: 1px solid var(--c-border); border-radius: var(--r-md);
  background: var(--c-surface-2); cursor: pointer;
  transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.ddi-example:hover { border-color: var(--c-brand-2); background: var(--c-brand-soft); transform: translateY(-1px); }
.ddi-example:focus-visible { outline: 2px solid var(--c-brand-2); outline-offset: 2px; }
.ddi-example-names { flex: 1 1 auto; font-weight: 650; font-size: 13.5px; color: var(--c-text); }
.ddi-example-note { flex: 0 0 auto; }
.ddi-example-go { flex: 0 0 auto; color: var(--c-brand-2); font-weight: 700; font-size: 15px; }

/* ---- Academic references on a pair card ---- */
.ddi-acadrefs { display: flex; flex-direction: column; gap: 6px; }
.ddi-acadref {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--c-border); border-radius: var(--r-md);
  background: var(--c-brand-soft, var(--c-surface-2)); text-decoration: none;
  transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.ddi-acadref:hover { border-color: var(--c-brand-2); background: var(--c-surface); }
.ddi-acadref:focus-visible { outline: 2px solid var(--c-brand-2); outline-offset: 2px; }
.ddi-acadref-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ddi-acadref-label { font-size: 13px; font-weight: 600; color: var(--c-brand-2); line-height: 1.35; }
.ddi-acadref-src { font-variant: small-caps; letter-spacing: 0.02em; }
.ddi-acadref-ext { flex: 0 0 auto; color: var(--c-brand-2); font-weight: 700; }
.ddi-acadref-note { margin: 8px 0 0; line-height: 1.45; }

/* ---- Sentence overview ---- */
.ddi-overview {
  padding: 14px 16px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.ddi-overview-count {
  font-size: 16px; font-weight: 700; color: var(--c-text);
  letter-spacing: -0.01em;
}
.ddi-overview-note {
  margin: 6px 0 0;
  font-size: 13px; line-height: 1.5; color: var(--c-text-muted);
}
.ddi-overview-note strong { color: var(--c-text); }
.tier-text.tier-1 { color: var(--c-tier-1); }
.tier-text.tier-2 { color: var(--c-tier-2); }
.tier-text.tier-3 { color: var(--c-tier-3); }
.tier-text.tier-4 { color: var(--c-tier-4); }
.tier-text.tier-5 { color: var(--c-tier-5); }
.tier-text.tier-6 { color: var(--c-tier-6); }

/* ---- Interaction map ---- */
.ddi-map-box { margin-bottom: 14px; }
.ddi-map-wrap {
  padding: 14px 16px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.ddi-map-head {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.ddi-map-title { font-size: 13px; font-weight: 700; color: var(--c-text); }
.ddi-map-hint { margin-left: auto; }
.ddi-map-scroll { overflow-x: auto; }
.ddi-map {
  display: grid;
  gap: 4px;
  align-items: stretch;
  width: max-content;
  max-width: 100%;
}
.ddi-map-corner { }
.ddi-map-colhead {
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; color: var(--c-text-muted);
  padding: 2px 0;
}
.ddi-map-rowhead {
  display: flex; align-items: center;
  font-size: 12.5px; font-weight: 600; color: var(--c-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding-right: 8px;
}
.ddi-map-cell {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1;
  min-height: 34px;
  border-radius: var(--r-sm);
  font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ddi-map-self { background: var(--c-surface-2); color: var(--c-text-soft); font-weight: 500; font-size: 10.5px; }
.ddi-map-safe { background: var(--c-surface-2); }
.ddi-map-hit.tier-2 { background: var(--c-tier-2-bg); color: var(--c-tier-2); }
.ddi-map-hit.tier-3 { background: var(--c-tier-3-bg); color: var(--c-tier-3); }
.ddi-map-hit.tier-4 { background: var(--c-tier-4-bg); color: var(--c-tier-4); }
.ddi-map-hit.tier-5 { background: var(--c-tier-5-bg); color: var(--c-tier-5); }
.ddi-map-hit.tier-6 { background: var(--c-tier-6-bg); color: var(--c-tier-6); }
.ddi-map-hit.tier-1 { background: var(--c-tier-1-bg); color: var(--c-tier-1); }
.ddi-map-legend {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--c-border);
}
.ddi-map-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.ddi-map-legend-dot { width: 11px; height: 11px; border-radius: 999px; }
.ddi-map-legend-dot.tier-1 { background: var(--c-tier-1); box-shadow: 0 0 0 3px var(--c-tier-1-bg); }
.ddi-map-legend-dot.tier-2 { background: var(--c-tier-2); box-shadow: 0 0 0 3px var(--c-tier-2-bg); }
.ddi-map-legend-dot.tier-3 { background: var(--c-tier-3); box-shadow: 0 0 0 3px var(--c-tier-3-bg); }
.ddi-map-legend-dot.tier-4 { background: var(--c-tier-4); box-shadow: 0 0 0 3px var(--c-tier-4-bg); }
.ddi-map-legend-dot.tier-5 { background: var(--c-tier-5); box-shadow: 0 0 0 3px var(--c-tier-5-bg); }
.ddi-map-legend-dot.tier-6 { background: var(--c-tier-6); box-shadow: 0 0 0 3px var(--c-tier-6-bg); }
.ddi-map-legend-lbl { color: var(--c-text-muted); }

/* ---- Pair section header ---- */
.ddi-pairs-head { margin: 4px 0 8px; }
.ddi-pairs-title { margin: 0; font-size: 17px; font-weight: 700; color: var(--c-text); letter-spacing: -0.01em; }
.ddi-pairs-sub { margin: 2px 0 0; line-height: 1.45; }

/* ---- Pair cards: column layout (overrides original row) ---- */
.ddi-pair-row {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 12px 14px;
}
.ddi-pair-row:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--c-border-strong); }
.ddi-pair-top {
  display: flex; align-items: center; gap: 8px;
}
.ddi-pair-names { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--c-text); }
.ddi-pair-tier {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.01em;
}
.ddi-pair-tier-sep { opacity: 0.6; }
.ddi-pair-tier.tier-1 { color: var(--c-tier-1); }
.ddi-pair-tier.tier-2 { color: var(--c-tier-2); }
.ddi-pair-tier.tier-3 { color: var(--c-tier-3); }
.ddi-pair-tier.tier-4 { color: var(--c-tier-4); }
.ddi-pair-tier.tier-5 { color: var(--c-tier-5); }
.ddi-pair-tier.tier-6 { color: var(--c-tier-6); }
.ddi-pair-headline {
  font-size: 13.5px; font-weight: 600; line-height: 1.35; margin: 0;
}
.ddi-pair-headline.tier-1 { color: var(--c-tier-1); }
.ddi-pair-headline.tier-2 { color: var(--c-tier-2); }
.ddi-pair-headline.tier-3 { color: var(--c-tier-3); }
.ddi-pair-headline.tier-4 { color: var(--c-tier-4); }
.ddi-pair-headline.tier-5 { color: var(--c-tier-5); }
.ddi-pair-headline.tier-6 { color: var(--c-tier-6); }
.ddi-pair-action { margin: 0; line-height: 1.4; color: var(--c-text-muted); }
.ddi-pair-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 2px;
}
.ddi-pair-cta { font-size: 12.5px; font-weight: 600; color: var(--c-brand-2); }
.ddi-pair-row:hover .ddi-pair-cta { text-decoration: underline; }
.ddi-pair-chev { font-size: 18px; color: var(--c-text-soft); margin-left: 4px; }
.ddi-pair-top-tag { order: 2; margin-left: 0; }

@media (max-width: 560px) {
  .ddi-drugs { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   Scenario-context sheet ("About this scenario") — grouped
   sections + tappable condition toggles. Replaces the old
   scattered .context-form checkbox grid.
   ============================================================ */
.modal-shade .modal-card:has(.ctx-sheet) { max-width: 600px; }

.ctx-sheet { display: flex; flex-direction: column; gap: 18px; }
.ctx-intro {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--c-text-muted);
}

.ctx-section { display: flex; flex-direction: column; gap: 10px; }
.ctx-section-title {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--c-text-soft);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--c-border);
}
.ctx-section-hint { margin: -2px 0 0; font-size: 12.5px; color: var(--c-text-muted); }

.ctx-grid-2,
.ctx-grid-3 { display: grid; gap: 12px; }
.ctx-grid-2 { grid-template-columns: 1fr 1fr; }
.ctx-grid-3 { grid-template-columns: 1fr 1fr 1fr; }

/* Select / number fields inside the sheet */
.ctx-sheet .field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ctx-sheet .field label {
  font-size: 11px;
  font-weight: 700;
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ctx-sheet .field select,
.ctx-sheet .field input {
  width: 100%;
  font: inherit;
  font-size: 14px;
  padding: 9px 11px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-text);
}
.ctx-sheet .field select:focus,
.ctx-sheet .field input:focus {
  outline: none;
  border-color: var(--c-brand-2);
  box-shadow: 0 0 0 3px rgba(31, 78, 121, 0.12);
}

/* Condition toggles */
.ctx-toggles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 8px;
}
.ctx-toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  cursor: pointer;
  user-select: none;
  transition: border-color var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
}
.ctx-toggle:hover { border-color: var(--c-border-strong); background: var(--c-surface-2); }
.ctx-toggle:has(.ctx-toggle-input:checked) {
  border-color: var(--c-brand-2);
  background: var(--c-brand-soft);
}
.ctx-toggle:focus-within {
  border-color: var(--c-brand-2);
  box-shadow: 0 0 0 3px rgba(31, 78, 121, 0.12);
}
.ctx-toggle-input {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--c-brand-2);
}
.ctx-toggle-label {
  font-size: 13.5px;
  line-height: 1.3;
  color: var(--c-text);
}
.ctx-toggle:has(.ctx-toggle-input:checked) .ctx-toggle-label {
  font-weight: 600;
  color: var(--c-brand);
}

@media (max-width: 540px) {
  .ctx-grid-3 { grid-template-columns: 1fr 1fr; }
  .ctx-toggles { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 380px) {
  .ctx-grid-2, .ctx-grid-3, .ctx-toggles { grid-template-columns: 1fr; }
}