/* MediWatch "Thread": content pages
 *
 * Medicine pages, the shortage hub and its category and condition pages, the
 * A–Z hub and the stock checker keep their markup (generated or hand-written;
 * the words, links and schema are SEO assets) and take the Thread look from
 * this file. scripts/thread-content-pages.js marks them <body class="th-cp">,
 * swaps their old page CSS for this file and turns old inline styles into
 * classes. Everything here is scoped to body.th-cp.
 *
 * Sizes are px on purpose: the legacy global CSS still on these pages sets
 * html { font-size: 62.5% }.
 * Brand record: docs/brand/BRAND.md
 */

/* ── base ────────────────────────────────────────────────────── */
body.th-cp {
  margin: 0; background: #fff; color: var(--th-ink-700);
  font: 400 17px/1.65 var(--th-font); letter-spacing: normal;
  -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility;
}
.th-cp :where(h1, h2, h3, h4) { font-family: var(--th-font); color: var(--th-ink-900); letter-spacing: -.012em; text-wrap: balance; }
.th-cp :where(p, li, dd, td, th, blockquote) { text-wrap: pretty; }
.th-cp :where(strong, b) { color: var(--th-ink-900); font-weight: 680; }
.th-cp :where(.content, .mw-article, .container, .th-cp-body) a:not([class]) {
  color: var(--th-teal-700); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--th-teal-700) 45%, transparent);
}
@media (hover: hover) {
  .th-cp :where(.content, .mw-article, .container, .th-cp-body) a:not([class]):hover { text-decoration-color: currentColor; }
}
.th-cp :where(a):focus-visible { outline: 3px solid var(--th-teal-700); outline-offset: 2px; border-radius: 4px; }
.th-cp img { max-width: 100%; height: auto; }

/* ── hero ────────────────────────────────────────────────────── */
.th-cp .hero, .th-cp header.mw-hero {
  position: relative; margin: 0; padding: 44px var(--th-gutter) 34px; color: var(--th-ink-700); text-align: left;
  background: linear-gradient(180deg, var(--th-wash) 0, #fff 100%); border-bottom: 1px solid var(--th-line);
}
.th-cp .hero-inner, .th-cp header.mw-hero > .mw-shell { max-width: 820px; margin: 0 auto; padding: 0; }
.th-cp .hero h1, .th-cp header.mw-hero h1 {
  margin: 10px 0 10px; font-size: clamp(32px, 4.4vw, 50px); line-height: 1.06; font-weight: 760; letter-spacing: -.032em; color: var(--th-ink-900);
}
.th-cp .hero .subtitle, .th-cp .mw-subtitle {
  margin: 0; max-width: 40em; font-size: 19px; line-height: 1.5; color: var(--th-ink-700);
}
.th-cp .breadcrumb, .th-cp .mw-breadcrumb {
  max-width: 820px; margin: 0 auto; padding: 0; font-size: 14px; line-height: 1.5; color: var(--th-ink-500);
}
.th-cp body > .breadcrumb, .th-cp > .breadcrumb { padding: 18px var(--th-gutter) 0; }
.th-cp .breadcrumb a, .th-cp .mw-breadcrumb a { color: var(--th-ink-700); text-decoration: none; }
@media (hover: hover) { .th-cp .breadcrumb a:hover, .th-cp .mw-breadcrumb a:hover { color: var(--th-teal-700); text-decoration: underline; } }
.th-cp .content > .breadcrumb { display: none; } /* the hero already carries it */
.th-cp .mw-kicker, .th-cp .eyebrow {
  margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--th-teal-700);
}
/* "Source data checked …" (rewritten live on every request) */
.th-cp .hero .updated, .th-cp .updated-badge, .th-cp .hero-meta {
  display: inline-flex; align-items: center; gap: 8px; width: auto; max-width: 100%; margin: 16px 0 0; padding: 6px 13px;
  font-size: 14px; line-height: 1.4; font-weight: 560; color: var(--th-ink-700);
  background: #fff; border: 1px solid var(--th-line); border-radius: 999px;
}
.th-cp .hero .updated::before, .th-cp .updated-badge::before {
  content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--th-green-500); animation: none;
}
.th-cp .hero .updated a { color: inherit; }
/* data-freshness-v2.js colours this line for the old dark hero (#fbbf24 stale,
   #7fb37f fresh: 1.7:1 and 2.6:1 on this white pill); Thread's colours instead */
.th-cp .hero .updated.mw-data-fresh { color: var(--th-ink-700) !important; }
.th-cp .hero .updated.mw-data-stale { color: var(--th-limited-ink) !important; background: var(--th-limited-bg); border-color: var(--th-limited-line); }
.th-cp .hero .updated.mw-data-stale::before { background: var(--th-limited-dot); }
.th-cp .stale-data-note, .th-cp .freshness-warning, .th-cp [data-freshness-warning] {
  margin: 12px 0 0; padding: 10px 14px; border-radius: var(--th-radius-sm); font-size: 14.5px; line-height: 1.5;
  color: var(--th-limited-ink); background: var(--th-limited-bg); border: 1px solid var(--th-limited-line);
}
/* hero stat tiles (hubs) */
.th-cp .stat-row, .th-cp .stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; max-width: 820px; margin: 22px auto 0; padding: 0;
}
.th-cp .stats { padding: 0 var(--th-gutter); margin: 22px auto 8px; }
.th-cp .stat { padding: 14px 16px; border-radius: var(--th-radius-md); background: #fff; border: 1px solid var(--th-line); text-align: left; }
.th-cp .stat-num, .th-cp .stat .num {
  font-size: 30px; line-height: 1.1; font-weight: 760; letter-spacing: -.02em; color: var(--th-ink-900); font-variant-numeric: tabular-nums;
}
.th-cp .stat .num.amber { color: var(--th-limited-ink); }
.th-cp .stat .num.purple, .th-cp .stat .num.red { color: var(--th-short-ink); }
.th-cp .stat-label, .th-cp .stat .label { margin-top: 4px; font-size: 14px; line-height: 1.35; color: var(--th-ink-500); }

/* ── the reading column ─────────────────────────────────────── */
.th-cp .content, .th-cp .container, .th-cp .th-cp-body {
  max-width: 820px; margin: 0 auto; padding: 34px var(--th-gutter) 72px; background: none; box-shadow: none; border: 0;
}
.th-cp .content > :first-child { margin-top: 0; }
.th-cp :is(.content, .container, .mw-article) h2 {
  margin: 52px 0 14px; padding: 0; border: 0; font-size: clamp(24px, 2.6vw, 30px); line-height: 1.18; font-weight: 740;
}
.th-cp :is(.content, .container, .mw-article) h3 { margin: 30px 0 8px; font-size: 20px; line-height: 1.3; font-weight: 700; }
.th-cp :is(.content, .container, .mw-article) h4 { margin: 22px 0 6px; font-size: 17px; font-weight: 700; }
.th-cp :is(.content, .container, .mw-article) p { margin: 0 0 16px; }
.th-cp :is(.content, .container, .mw-article) :is(ul, ol):not([class]) { margin: 0 0 18px; padding-left: 24px; }
.th-cp :is(.content, .container, .mw-article) :is(ul, ol):not([class]) li { margin: 0 0 8px; padding-left: 4px; }
.th-cp :is(.content, .container, .mw-article) ul:not([class]) li::marker { color: var(--th-turq-500); }
.th-cp :is(.content, .container, .mw-article) ol:not([class]) li::marker { color: var(--th-teal-700); font-weight: 700; }
.th-cp .lead, .th-cp .intro, .th-cp .dek, .th-cp .tldr {
  position: relative; margin: 0 0 28px; padding: 18px 20px 18px 24px; font-size: 18px; line-height: 1.6; color: var(--th-ink-900);
  background: #fff; border: 1px solid var(--th-line); border-radius: var(--th-radius-md); box-shadow: var(--th-shadow-sm);
}
.th-cp .lead::before, .th-cp .intro::before, .th-cp .dek::before, .th-cp .tldr::before {
  content: ""; position: absolute; left: -1px; top: 14px; bottom: 14px; width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, var(--th-turq-500), var(--th-green-500));
}
.th-cp .intro p:last-child, .th-cp .lead p:last-child { margin-bottom: 0; }

/* contents list */
.th-cp .toc { margin: 0 0 34px; padding: 18px 22px; border-radius: var(--th-radius-md); background: var(--th-wash); border: 1px solid var(--th-line); }
.th-cp .toc h3 { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--th-ink-500); }
.th-cp .toc ol, .th-cp .toc ul { margin: 0; padding-left: 22px; columns: 2 260px; column-gap: 28px; }
.th-cp .toc li { margin: 0 0 6px; break-inside: avoid; font-size: 16px; }
.th-cp .toc a { color: var(--th-ink-900); text-decoration: none; }
@media (hover: hover) { .th-cp .toc a:hover { color: var(--th-teal-700); text-decoration: underline; } }

/* ── notes and callouts ─────────────────────────────────────── */
.th-cp :is(.disclaimer-banner, .info-box, .evidence-note, .review-note, .news-box, .editor-note, .script-box, .chemistry-box, .answer-box, .warning-box, .danger-box, .th-note, .th-urgent, .medical-disclaimer, .status-box, .locator-learning) {
  margin: 22px 0; padding: 16px 18px 16px 20px; border-radius: var(--th-radius-md); font-size: 16px; line-height: 1.6;
  color: var(--th-ink-700); background: #fff; border: 1px solid var(--th-line); box-shadow: none;
}
.th-cp :is(.disclaimer-banner, .info-box, .evidence-note, .review-note, .news-box, .editor-note, .script-box, .chemistry-box, .answer-box, .warning-box, .danger-box, .th-note, .th-urgent, .status-box) > :last-child { margin-bottom: 0; }
.th-cp :is(.disclaimer-banner, .info-box, .evidence-note, .review-note, .answer-box, .th-note, .status-box) h2,
.th-cp :is(.disclaimer-banner, .info-box, .evidence-note, .review-note, .answer-box, .th-note, .status-box) h3 { margin-top: 0; }
.th-cp .disclaimer-banner { background: var(--th-wash); }
.th-cp .answer-box { background: var(--th-wash); border-color: var(--th-line-strong); }
.th-cp .answer-box h2 { font-size: 22px; }
.th-cp .warning-box, .th-cp .th-note-safety { background: #fffaf0; border-color: var(--th-limited-line); }
.th-cp .danger-box { background: var(--th-short-bg); border-color: var(--th-short-line); color: var(--th-ink-900); }
.th-cp .chemistry-box { background: var(--th-ink-900); border-color: var(--th-ink-900); color: #e3f6f1; font: 500 14px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
.th-cp .chemistry-box * { color: inherit; }
.th-cp .chem-label { font-family: var(--th-font); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--th-turq-300); }
.th-cp .script-box { background: var(--th-mint); border-color: var(--th-turq-200); }
.th-cp .medical-disclaimer { font-size: 15px; background: #fff; }
.th-cp .medical-disclaimer a { color: var(--th-ink-700); }
/* "Need your medicine today?" (MEDWATCH_URGENT_HELP block on the category hubs) */
.th-cp .th-urgent { background: var(--th-wash); border-color: var(--th-line-strong); }
.th-cp .th-urgent-title { font-weight: 700; color: var(--th-ink-900); margin-bottom: 4px; }
.th-cp .th-urgent p { margin: 0 0 12px; font-size: 16px; }
.th-cp .th-urgent-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.th-cp .th-urgent a { margin: 4px 10px 4px 0; }

/* Buttons the old pages draw as links: primary and secondary actions */
.th-cp :is(.cta-box a, .cta-btn, .mw-growth-primary, .th-urgent a.th-urgent-primary, .locator-button, .th-cta-primary) {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border: 0; border-radius: 12px;
  font: 650 16px/1.2 var(--th-font); color: #fff !important; text-decoration: none !important; cursor: pointer;
  background: var(--th-teal-700); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 18px -10px rgba(10,116,104,.75);
  transition: background-color var(--th-dur-fast), transform var(--th-dur-fast) var(--th-ease-out);
}
.th-cp :is(.mw-growth-secondary, .th-urgent a.th-urgent-secondary, .th-cta-secondary) {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; border-radius: 12px;
  font: 650 16px/1.2 var(--th-font); color: var(--th-teal-700) !important; text-decoration: none !important;
  background: #fff; box-shadow: inset 0 0 0 1.5px var(--th-teal-700);
}
@media (hover: hover) {
  .th-cp :is(.cta-box a, .cta-btn, .mw-growth-primary, .th-urgent a.th-urgent-primary, .locator-button, .th-cta-primary):hover { background: var(--th-teal-800); transform: translateY(-1px); }
  .th-cp :is(.mw-growth-secondary, .th-urgent a.th-urgent-secondary, .th-cta-secondary):hover { background: var(--th-wash); }
}
.th-cp :is(.cta-box a, .cta-btn, .mw-growth-primary, .mw-growth-secondary, .th-urgent a):active { transform: scale(.975); }

/* ── status ──────────────────────────────────────────────────── */
/* no current shortage */
.th-cp .no-shortages {
  margin: 22px 0; padding: 16px 18px 16px 52px; position: relative; border-radius: var(--th-radius-md);
  background: var(--th-maybe-bg); border: 1px solid var(--th-maybe-line); color: var(--th-ink-900);
}
.th-cp .no-shortages::before {
  content: ""; position: absolute; left: 18px; top: 19px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--th-maybe-dot) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.3l3 3 6-6.6' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
}
.th-cp .no-shortages p { margin: 0; color: var(--th-ink-900); font-size: 16px; }
/* the same box after the server found the medicine active again (or not confirmed recovered) */
.th-cp .no-shortages.th-now-active { background: var(--th-short-bg); border-color: var(--th-short-line); }
.th-cp .no-shortages.th-now-active::before { background: var(--th-short-dot); border: 5px solid #fff; box-shadow: 0 0 0 1px var(--th-short-line); }
.th-cp .no-shortages.th-now-lapsed { background: var(--th-limited-bg); border-color: var(--th-limited-line); }
.th-cp .no-shortages.th-now-lapsed::before { background: linear-gradient(90deg, var(--th-limited-dot) 50%, #fff 50%); border: 2px solid var(--th-limited-dot); }
/* one notice on a page (generated and hand-written) */
.th-cp .shortage-card {
  position: relative; margin: 0 0 14px; padding: 18px 20px 18px 24px; border-radius: var(--th-radius-md);
  background: #fff; border: 1px solid var(--th-line); box-shadow: var(--th-shadow-sm); overflow: hidden;
}
.th-cp .shortage-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--th-line-strong); }
.th-cp .shortage-card[data-th-tier="high"]::before, .th-cp .shortage-card[data-th-tier="critical"]::before { background: var(--th-short-dot); }
.th-cp .shortage-card[data-th-tier="medium"]::before { background: var(--th-limited-dot); }
.th-cp .shortage-card[data-th-tier="low"]::before { background: var(--th-maybe-dot); }
.th-cp .shortage-card h3 { margin: 0 0 8px; font-size: 18px; line-height: 1.35; }
.th-cp .shortage-card p { margin: 10px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--th-ink-700); }
/* the notice's own lines, in full, with the reviewed plain English under each */
.th-cp .shortage-official { list-style: none; margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--th-wash); display: grid; gap: 10px; }
.th-cp .shortage-official li { position: relative; margin: 0; padding-left: 18px; font-size: 15.5px; line-height: 1.55; color: var(--th-ink-700); }
.th-cp .shortage-official li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--th-turq-500); }
.th-cp .shortage-official q { quotes: "\201C" "\201D"; }
.th-cp .shortage-gloss { display: block; margin-top: 3px; color: var(--th-ink-900); font-weight: 600; }
.th-cp :is(.tier-badge, .source-badge, .badge, .alt-tag, .pill, .status-badge) {
  display: inline-flex; align-items: center; gap: 6px; min-height: 26px; margin: 0 6px 4px 0; padding: 2px 10px; border-radius: 999px; vertical-align: middle;
  font: 650 12.5px/1.2 var(--th-font); letter-spacing: .01em; text-transform: none;
  color: var(--th-ink-700); background: var(--th-wash); border: 1px solid var(--th-line);
}
.th-cp .tier-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--th-ink-500); }
.th-cp .tier-badge[data-th-tier="high"], .th-cp .tier-badge[data-th-tier="critical"], .th-cp .badge.high, .th-cp .badge.red { color: var(--th-short-ink); background: var(--th-short-bg); border-color: var(--th-short-line); }
.th-cp .tier-badge[data-th-tier="high"]::before, .th-cp .tier-badge[data-th-tier="critical"]::before { background: var(--th-short-dot); }
.th-cp .tier-badge[data-th-tier="medium"], .th-cp .badge.medium, .th-cp .badge.amber { color: var(--th-limited-ink); background: var(--th-limited-bg); border-color: var(--th-limited-line); }
.th-cp .tier-badge[data-th-tier="medium"]::before { background: var(--th-limited-dot); }
.th-cp .tier-badge[data-th-tier="low"], .th-cp .badge.green, .th-cp .pill-ok, .th-cp .badge.ssp { color: var(--th-maybe-ink); background: var(--th-maybe-bg); border-color: var(--th-maybe-line); }
.th-cp .tier-badge[data-th-tier="low"]::before { background: var(--th-maybe-dot); }
.th-cp .shortage-card .alternatives, .th-cp .alternatives {
  margin-top: 12px; padding: 12px 14px; border-radius: var(--th-radius-sm); background: var(--th-wash); font-size: 15.5px; line-height: 1.6;
}
.th-cp .alternatives > :last-child { margin-bottom: 0; }
/* status dots used in hub grids */
.th-cp .status-dot { display: inline-flex; align-items: center; gap: 10px; }
.th-cp .status-dot::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--th-ink-500); }
.th-cp .status-dot.dot-green::before { background: transparent; border: 2px solid var(--th-maybe-dot); }
.th-cp .status-dot.dot-amber::before { border: 2px solid var(--th-limited-dot); background: linear-gradient(90deg, var(--th-limited-dot) 50%, transparent 50%); }
.th-cp .status-dot.dot-red::before { background: var(--th-short-dot); }

/* ramipril's hand-built status block */
.th-cp .status-header { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; }
.th-cp .status-badge.status-active { color: var(--th-short-ink); background: var(--th-short-bg); border-color: var(--th-short-line); }
.th-cp .status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin: 0; }
.th-cp .status-item { padding: 12px 14px; border-radius: var(--th-radius-sm); background: var(--th-wash); }
.th-cp .status-label { font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--th-ink-500); }
.th-cp .status-value { margin-top: 2px; font-size: 16px; font-weight: 650; color: var(--th-ink-900); }
.th-cp .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--th-short-dot); }

/* ── the live layer the server adds to every medicine page ─── */
.th-cp .th-live { max-width: 820px; margin: 0 auto; }
.th-cp .th-live-wrap { padding: 26px var(--th-gutter) 0; }
.th-cp .live-medicine-status {
  display: flex; gap: 12px; align-items: flex-start; margin: 0 0 14px; padding: 14px 18px; border-radius: var(--th-radius-md);
  font-size: 16px; line-height: 1.55; color: var(--th-ink-900); background: #fff; border: 1px solid var(--th-line);
}
.th-cp .live-medicine-status .th-chip { flex: none; margin-top: 1px; }
.th-cp .th-live-text { margin: 0; }
.th-cp .th-chip-none { color: var(--th-ink-700); background: #f1f5f4; border-color: var(--th-line-strong); }
.th-cp .th-chip-none::before { border: 1.8px solid #8aa29d; background: transparent; }
.th-cp .th-notices { margin: 0 0 14px; }
.th-cp .th-notices > .th-notice-advice { margin: 4px 0 0; }
.th-cp .live-medicine-status[data-live-status="active"] { background: var(--th-short-bg); border-color: var(--th-short-line); }
.th-cp .live-medicine-status[data-live-status="lapsed-unconfirmed"] { background: var(--th-limited-bg); border-color: var(--th-limited-line); }
.th-cp .live-medicine-status[data-live-status="resolved"] { background: var(--th-maybe-bg); border-color: var(--th-maybe-line); }
.th-cp .live-medicine-status a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.th-cp .live-medicine-status .th-live-note { display: block; margin-top: 6px; }
/* each active notice, said plainly next to its official wording (notice-plain.js) */
.th-cp .th-notice {
  position: relative; margin: 0 0 14px; padding: 18px 20px 18px 24px; border-radius: var(--th-radius-md);
  background: #fff; border: 1px solid var(--th-line); box-shadow: var(--th-shadow-md); overflow: hidden;
}
.th-cp .th-notice::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--th-turq-500), var(--th-green-500)); }
.th-cp .th-notice-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.th-cp .th-notice h2, .th-cp .th-notice h3 { margin: 0; font-size: 19px; line-height: 1.3; font-weight: 700; }
.th-cp .th-notice-until { margin: 8px 0 0; font-size: 15px; color: var(--th-ink-700); }
.th-cp .th-notice-until strong { color: var(--th-ink-900); }
.th-cp .th-notice-headline { margin: 10px 0 0; font-size: 17px; font-weight: 650; line-height: 1.45; color: var(--th-ink-900); }
.th-cp .th-notice-explain { margin: 6px 0 0; font-size: 16px; line-height: 1.55; }
.th-cp .th-notice-official { margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--th-wash); }
.th-cp .th-notice-label { margin: 0; font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--th-ink-500); }
.th-cp .th-notice-official ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 10px; }
.th-cp .th-notice-official li { position: relative; margin: 0; padding-left: 18px; font-size: 15.5px; line-height: 1.55; color: var(--th-ink-700); }
.th-cp .th-notice-official li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--th-turq-500); }
.th-cp .th-notice-official q { quotes: "\201C" "\201D"; }
.th-cp .th-notice-gloss { display: block; margin-top: 3px; color: var(--th-ink-900); }
.th-cp .th-notice-gloss b { color: var(--th-teal-700); font-weight: 700; }
.th-cp .th-notice details { margin-top: 10px; font-size: 15px; }
.th-cp .th-notice summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--th-teal-700); font-weight: 650; }
.th-cp .th-notice-stale, .th-cp .th-notice-advice { margin: 12px 0 0; font-size: 15.5px; line-height: 1.5; }
.th-cp .th-notice-advice { font-weight: 650; color: var(--th-ink-900); }
.th-cp .th-notice-ref { margin: 10px 0 0; font-size: 14px; color: var(--th-ink-500); }
.th-cp .th-notice-ref a { color: var(--th-ink-500); text-decoration: underline; text-underline-offset: 3px; }
/* the free alert and the pharmacies to call, side by side */
.th-cp .th-engage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0 0 8px; }
.th-cp .th-engage-card {
  display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; border-radius: var(--th-radius-md);
  background: #fff; border: 1px solid var(--th-line); box-shadow: var(--th-shadow-sm);
}
.th-cp .th-engage-card h2 { margin: 0; font-size: 18px; line-height: 1.3; font-weight: 700; }
.th-cp .th-engage-card p { margin: 0; font-size: 15px; line-height: 1.55; }
.th-cp .th-engage-card .th-btn { align-self: flex-start; margin-top: 4px; }
.th-cp .th-engage-fine { font-size: 13.5px !important; color: var(--th-ink-500); }
@media (max-width: 760px) { .th-cp .th-engage { grid-template-columns: minmax(0, 1fr); } }

/* ── lists of things ─────────────────────────────────────────── */
.th-cp .advice-list, .th-cp .step-list, .th-cp .steps { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; counter-reset: th-step; }
.th-cp .advice-list li, .th-cp .step-list li, .th-cp .steps li {
  position: relative; margin: 0; padding: 14px 16px 14px 52px; border-radius: var(--th-radius-md); font-size: 16px; line-height: 1.55;
  background: #fff; border: 1px solid var(--th-line); display: block; box-shadow: none;
}
.th-cp .advice-list li::before {
  content: ""; position: absolute; left: 16px; top: 15px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--th-mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6.5 11.3l3 3 6-6.6' fill='none' stroke='%230a7468' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat;
}
.th-cp .step-list li, .th-cp .steps li { counter-increment: th-step; }
.th-cp .step-list li::before, .th-cp .steps li::before {
  content: counter(th-step); position: absolute; left: 14px; top: 13px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  font: 700 14px/1 var(--th-font); color: #fff; background: var(--th-teal-700);
}
/* numbered tips on the "Is X in shortage?" pages carry their own numbers */
.th-cp .th-numbered { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 10px; }
.th-cp .th-numbered li { position: relative; margin: 0; padding: 13px 16px 13px 52px; border-radius: var(--th-radius-md); background: #fff; border: 1px solid var(--th-line); font-size: 16px; line-height: 1.55; }
.th-cp .th-numbered li > span:first-child {
  position: absolute; left: 14px; top: 12px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  font: 700 13px/1 var(--th-font); color: var(--th-teal-800); background: var(--th-mint);
}
/* link cards */
.th-cp :is(.link-grid, .related-pages, .source-grid, .priority-grid, .faq-grid, .cat-grid, .drug-grid) {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 16px 0 26px; padding: 0;
}
.th-cp :is(.link-card, .related-card, .cat-card, .priority-card, .drug-link, .support-card) {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 4px; min-height: 64px; margin: 0; padding: 14px 40px 14px 16px;
  border-radius: var(--th-radius-md); background: #fff; border: 1px solid var(--th-line); color: var(--th-ink-900); text-decoration: none; box-shadow: none;
  transition: border-color var(--th-dur-fast), box-shadow var(--th-dur-fast), transform var(--th-dur-fast) var(--th-ease-out);
}
.th-cp :is(.link-card, .related-card, .cat-card, .drug-link)::after {
  content: ""; position: absolute; right: 16px; top: 50%; width: 16px; height: 16px; margin-top: -8px; opacity: .7;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9.2M8.6 3.8 12.8 8l-4.2 4.2' fill='none' stroke='%230a7468' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
@media (hover: hover) {
  .th-cp :is(.link-card, .related-card, .cat-card, .drug-link):hover { border-color: var(--th-turq-300); box-shadow: var(--th-shadow-md); transform: translateY(-1px); }
}
.th-cp :is(.link-card, .related-card, .cat-card, .priority-card) h3 { margin: 0; font-size: 16.5px; line-height: 1.3; font-weight: 700; color: var(--th-ink-900); }
.th-cp :is(.link-card, .related-card, .cat-card, .priority-card) p, .th-cp .cat-card .count { margin: 0; font-size: 14px; line-height: 1.45; color: var(--th-ink-500); }
.th-cp .drug-link { font-weight: 650; font-size: 16px; }
/* tags */
.th-cp .tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 20px; }
.th-cp a.tag, .th-cp .tag {
  display: inline-flex; align-items: center; min-height: 34px; padding: 4px 14px; border-radius: 999px; font-size: 14.5px; font-weight: 600;
  color: var(--th-ink-900); background: #fff; border: 1px solid var(--th-line-strong); text-decoration: none;
}
@media (hover: hover) { .th-cp a.tag:hover { border-color: var(--th-teal-700); color: var(--th-teal-800); background: var(--th-wash); } }
.th-cp .related { margin: 34px 0 0; }
.th-cp .related h3 { margin: 0 0 6px; font-size: 18px; }
/* a live list (stock checker) and timeline */
.th-cp .live-list { list-style: none; margin: 8px 0 24px; padding: 0; display: grid; gap: 8px; }
.th-cp .live-list li { padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--th-line); font-size: 15.5px; }
.th-cp .timeline-item { position: relative; margin: 0; padding: 0 0 22px 26px; border-left: 2px solid var(--th-line-strong); }
.th-cp .timeline-item::before { content: ""; position: absolute; left: -7px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--th-turq-500); }
.th-cp .timeline-item .date { font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--th-teal-700); }
/* a simple flow (one hub) */
.th-cp .flowchart { display: grid; gap: 10px; margin: 16px 0 26px; }
.th-cp :is(.flow-step, .flow-branch) { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--th-radius-md); background: #fff; border: 1px solid var(--th-line); }
.th-cp .flow-icon { flex: none; font-size: 20px; line-height: 1; }
.th-cp .flow-content { flex: 1; min-width: 0; overflow-wrap: break-word; }
.th-cp .flowchart > * { min-width: 0; }
/* data study bits */
.th-cp :is(.chart, .signal-card, .item) { margin: 16px 0; padding: 16px 18px; border-radius: var(--th-radius-md); background: #fff; border: 1px solid var(--th-line); }
.th-cp :is(.signal-head, .item-head, .type-header) { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; font-weight: 700; color: var(--th-ink-900); }
.th-cp :is(.signal-meta, .meta, .chart-sub, .chart-note, .due) { font-size: 14px; color: var(--th-ink-500); }
.th-cp .bar { height: 10px; border-radius: 999px; background: linear-gradient(90deg, var(--th-turq-500), var(--th-green-500)); }

/* ── tables (dosage, comparisons, current shortages) ─────────── */
.th-cp :is(.th-table, .table-wrap, .table-scroll, .mw-table-wrap) {
  margin: 16px 0 26px; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--th-radius-md); border: 1px solid var(--th-line); background: #fff;
}
.th-cp :is(.content, .container, .mw-article) table {
  width: 100%; margin: 0; border-collapse: collapse; font-size: 15px; line-height: 1.45; color: var(--th-ink-700); background: #fff;
  /* undo the legacy phone rule (table { display: block; white-space: nowrap }): the .th-table box scrolls instead */
  display: table; white-space: normal;
}
/* legacy-global.css breaks words anywhere (* { word-break: break-word }), which crushed
   columns to a few letters on phones ("Proprano/lol"); whole words, and a wide table scrolls */
.th-cp :is(.content, .container, .mw-article) :is(td, th), .th-cp :is(.content, .container, .mw-article) :is(td, th) * { word-break: normal; overflow-wrap: normal; }
.th-cp :is(.content, .container, .mw-article) td :is(.badge, .tier-badge, .pill, .status-badge, .th-chip, .tag) { white-space: nowrap; }
.th-cp :is(.content, .container, .mw-article) table th {
  padding: 11px 14px; text-align: left; vertical-align: bottom; white-space: nowrap;
  font-size: 13px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--th-ink-500);
  background: var(--th-wash); border-bottom: 1px solid var(--th-line-strong);
}
.th-cp :is(.content, .container, .mw-article) table td { padding: 11px 14px; vertical-align: top; border-bottom: 1px solid var(--th-line); }
.th-cp :is(.content, .container, .mw-article) table tr:last-child td { border-bottom: 0; }
.th-cp :is(.content, .container, .mw-article) table tr { background: none; }
.th-cp :is(.content, .container, .mw-article) table td:first-child { font-weight: 650; color: var(--th-ink-900); }
.th-cp .resolved-link { display: inline-flex; margin: 10px 0 0; font-weight: 650; color: var(--th-teal-700); }

/* ── questions ───────────────────────────────────────────────── */
.th-cp .faq-section { margin: 0; }
.th-cp .faq-item, .th-cp :is(.faq-q, .faq-a) { margin: 0 0 10px; padding: 16px 18px; border-radius: var(--th-radius-md); background: #fff; border: 1px solid var(--th-line); box-shadow: none; }
.th-cp .faq-item h3 { margin: 0 0 6px; font-size: 17.5px; line-height: 1.35; }
.th-cp .faq-item p { margin: 0 0 8px; font-size: 16px; line-height: 1.6; }
.th-cp .faq-item p:last-child { margin-bottom: 0; }

/* ── calls to action ─────────────────────────────────────────── */
.th-cp .cta-box {
  position: relative; margin: 52px 0 0; padding: 30px 28px; border-radius: var(--th-radius-lg); text-align: left; overflow: hidden;
  background: linear-gradient(135deg, var(--th-mint) 0, var(--th-wash) 60%, #fff 100%); border: 1px solid var(--th-turq-200); box-shadow: none;
}
.th-cp .cta-box h2 { margin: 0 0 8px !important; padding: 0; border: 0 !important; font-size: 26px; color: var(--th-ink-900) !important; }
.th-cp .cta-box p { margin: 0 0 18px; font-size: 17px; color: var(--th-ink-700); }
.th-cp .mw-growth-pass-block {
  margin: 0 0 26px; padding: 20px 22px; border-radius: var(--th-radius-md); background: var(--th-wash); border: 1px solid var(--th-line);
}
.th-cp .mw-growth-pass-block h2 { margin: 2px 0 6px !important; font-size: 22px; border: 0; padding: 0; }
.th-cp .mw-growth-pass-block p { font-size: 16px; }
.th-cp .mw-growth-eyebrow { margin: 0 !important; font-size: 13px !important; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--th-teal-700); }
.th-cp .mw-growth-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.th-cp .mw-flagship-link { margin: 22px 0; padding: 14px 16px; border-radius: var(--th-radius-md); background: #fff; border: 1px dashed var(--th-line-strong); font-size: 16px; }

/* ── sources, freshness, reviewer ───────────────────────────── */
.th-cp .sources, .th-cp .last-updated, .th-cp .th-note-source, .th-cp .mw-sources {
  margin: 30px 0 0; padding: 18px 0 0; border-top: 1px solid var(--th-line); font-size: 14.5px; line-height: 1.6; color: var(--th-ink-500); text-align: left;
}
.th-cp .sources a, .th-cp .last-updated a, .th-cp .th-note-source a, .th-cp .mw-sources a { color: var(--th-ink-700); }
.th-cp .last-updated { margin-top: 18px; padding-top: 0; border-top: 0; }
.th-cp .trust-badge {
  display: flex; align-items: center; justify-content: center; gap: 8px; max-width: 820px; margin: 0 auto 8px; padding: 12px var(--th-gutter);
  font-size: 14px; color: var(--th-ink-500); background: none; border: 0; text-align: center;
}
.th-cp .trust-badge svg { flex: none; color: var(--th-green-500); }
.th-cp .trust-badge + p, .th-cp .th-byline { max-width: 820px; margin: 0 auto 28px; padding: 0 var(--th-gutter); font-size: 14px; color: var(--th-ink-500); }
.th-cp .reviewer-card { display: flex; gap: 14px; align-items: center; margin: 30px 0 0; padding: 16px 18px; border-radius: var(--th-radius-md); background: var(--th-wash); border: 1px solid var(--th-line); }
.th-cp .reviewer-avatar { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--th-teal-700); color: #fff; font-weight: 700; }
.th-cp .reviewer-name { font-weight: 700; color: var(--th-ink-900); }
.th-cp .reviewer-role { font-size: 14px; color: var(--th-ink-500); }
/* the enriched "safety" notes (inline styles turned into classes) */
.th-cp .th-note-status { background: var(--th-wash); }
.th-cp .th-note-status .th-note-badge, .th-cp .th-note-badge {
  display: inline-flex; align-items: center; gap: 6px; min-height: 26px; margin: 0 0 8px; padding: 2px 10px; border-radius: 999px;
  font: 650 12.5px/1.2 var(--th-font); color: var(--th-maybe-ink); background: var(--th-maybe-bg); border: 1px solid var(--th-maybe-line);
}
.th-cp .th-note-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1.8px solid var(--th-maybe-dot); }
.th-cp .th-note h3 { margin: 0 0 8px; font-size: 18px; }

/* ── knowledge pages (two columns: article + sidebar) ─────────── */
.th-cp .mw-page { background: #fff; }
.th-cp main.mw-main {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; max-width: 1120px; margin: 0 auto; padding: 34px var(--th-gutter) 72px;
}
.th-cp .mw-article { min-width: 0; }
.th-cp .mw-sidebar { display: grid; gap: 14px; align-content: start; }
.th-cp .mw-side-card { padding: 16px 18px; border-radius: var(--th-radius-md); background: #fff; border: 1px solid var(--th-line); font-size: 15px; line-height: 1.55; }
.th-cp .mw-side-card h2, .th-cp .mw-side-card h3 { margin: 0 0 6px; font-size: 16px; }
.th-cp .mw-disclaimer { background: var(--th-wash); }
.th-cp .mw-meta-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.th-cp .mw-warning-role { color: var(--th-short-ink); }
.th-cp .mw-score-panel { display: flex; gap: 10px; align-items: baseline; }
.th-cp .mw-score { font-size: 28px; font-weight: 760; color: var(--th-ink-900); }

/* ── ramipril's hand-built cards ─────────────────────────────── */
.th-cp .alt-card { margin: 14px 0; padding: 18px 20px; border-radius: var(--th-radius-md); background: #fff; border: 1px solid var(--th-line); box-shadow: var(--th-shadow-sm); }
.th-cp .alt-card h3 { margin-top: 0; }

/* ── the old locator form on the A–Z hub and stock checker ───── */
.th-cp .locator-panel, .th-cp .status-panel, .th-cp .shortage-status:not(:empty) {
  margin: 18px 0 24px; padding: 20px 22px; border-radius: var(--th-radius-lg); background: #fff; border: 1px solid var(--th-line); box-shadow: var(--th-shadow-md);
}
.th-cp .locator-panel h2 { margin-top: 0; }
.th-cp .locator-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; align-items: end; margin: 14px 0 0; }
.th-cp .locator-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.th-cp .locator-actions .locator-helper { flex: 1 1 260px; margin: 0; }
.th-cp .locator-button { flex: none; }
@media (max-width: 560px) {
  .th-cp .locator-form { grid-template-columns: minmax(0, 1fr); }
  .th-cp .locator-button { width: 100%; }
}
.th-cp .locator-field { display: grid; gap: 6px; }
.th-cp .locator-field label { font-size: 15px; font-weight: 650; color: var(--th-ink-900); }
.th-cp .locator-field input {
  width: 100%; min-height: 52px; padding: 0 14px; border-radius: 13px; border: 0; box-shadow: inset 0 0 0 1.5px var(--th-field);
  font: 400 16px var(--th-font); color: var(--th-ink-900); background: #fff;
}
.th-cp .locator-field input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--th-teal-700), 0 0 0 5px rgba(25,195,177,.18); }
.th-cp :is(.locator-helper, .locator-safety, .locator-status) { margin: 10px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--th-ink-500); }


/* ── reading pages (phase 4: guides, news, locations, info pages) ── */
.th-cp .guide-hero-media { max-width: 820px; margin: 24px auto 0; padding: 0 var(--th-gutter); }
.th-cp .guide-hero-media img { display: block; width: 100%; height: auto; max-height: 420px; object-fit: cover; border-radius: var(--th-radius-lg); border: 1px solid var(--th-line); }
.th-cp :is(.stat-grid, .headline-grid, .pain-grid, .features-grid, .shortage-type-grid) {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 18px 0 26px; padding: 0;
}
.th-cp :is(.pain-grid, .features-grid, .shortage-type-grid) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.th-cp :is(.stat-card, .headline-card, .pain-card, .feature-item, .shortage-type-card, .step-card, .drug-card, .source-card, .pricing-card, .method-box, .quote-box, .callout, .correction, .note, .kf, .redflag, .urgent) {
  margin: 0 0 12px; padding: 16px 18px; border-radius: var(--th-radius-md); background: #fff; border: 1px solid var(--th-line); box-shadow: none; color: var(--th-ink-700);
}
.th-cp :is(.stat-grid, .headline-grid, .pain-grid, .features-grid, .shortage-type-grid) > * { margin: 0; }
.th-cp :is(.stat-card, .headline-card) :is(.number, .num, .big) { display: block; font-size: 30px; line-height: 1.1; font-weight: 760; letter-spacing: -.02em; color: var(--th-ink-900); font-variant-numeric: tabular-nums; }
.th-cp :is(.stat-card, .headline-card) :is(.label, .cap) { display: block; margin-top: 4px; font-size: 14px; line-height: 1.35; color: var(--th-ink-500); }
.th-cp :is(.note, .kf, .callout, .method-box, .correction) { background: var(--th-wash); }
.th-cp :is(.warn, .redflag, .urgent) { background: #fffaf0; border-color: var(--th-limited-line); }
.th-cp .quote-box { border-left: 3px solid var(--th-turq-500); font-size: 17px; color: var(--th-ink-900); }
.th-cp :is(.pain-icon, .feature-icon) { font-size: 22px; line-height: 1; margin-bottom: 8px; }
.th-cp :is(.pain-card, .feature-item, .step-card, .drug-card, .source-card) h3 { margin: 0 0 6px; font-size: 17.5px; }
.th-cp :is(.pain-card, .feature-item, .step-card, .drug-card, .source-card) p { margin: 0; font-size: 15.5px; }
.th-cp .step-card { display: flex; gap: 14px; align-items: flex-start; }
.th-cp .step-num { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-weight: 700; color: #fff; background: var(--th-teal-700); }
.th-cp .step-content { min-width: 0; }
.th-cp :is(.section-inner, .category-section, .contact-section) { max-width: 820px; margin: 0 auto; }
.th-cp :is(.pain-bg, .proof-bg, .pricing-band) { padding: 34px 0; }
.th-cp .section-title { font-size: clamp(24px, 2.6vw, 30px); margin: 0 0 8px; }
.th-cp .section-subtitle, .th-cp .hero-sub { color: var(--th-ink-700); font-size: 17px; margin: 0 0 18px; }
.th-cp .hero-art { display: none; }
.th-cp :is(.hero-cta, .contact-btn, a.btn, .pricing-cta) {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 12px;
  font: 650 16px/1.2 var(--th-font); color: #fff !important; background: var(--th-teal-700); text-decoration: none !important;
}
.th-cp .pricing-amount { font-size: 34px; font-weight: 760; color: var(--th-ink-900); }
.th-cp :is(.curr, .per) { font-size: 16px; color: var(--th-ink-500); }
.th-cp .pricing-perks { padding-left: 20px; }
.th-cp .locator-callout { margin: 22px 0; padding: 16px 18px; border-radius: var(--th-radius-md); background: var(--th-mint); border: 1px solid var(--th-turq-200); }
.th-cp .timeline { margin: 16px 0 26px; }
.th-cp .tl-date { font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--th-teal-700); }
.th-cp .tl-body { margin: 2px 0 14px; }
.th-cp .chart-wrap { margin: 16px 0; padding: 16px; border-radius: var(--th-radius-md); border: 1px solid var(--th-line); overflow-x: auto; }
.th-cp .chart-cap { font-size: 14px; color: var(--th-ink-500); }
.th-cp .data-table { width: 100%; }
.th-cp .reviewer-head { display: flex; gap: 14px; align-items: center; }
/* status words in tables (pills): shape-coded like the chips */
.th-cp :is(.shortage-pill, .shortage-badge, .status-pill, .pill-warn, .pill-bad, .pill-ongoing, .pill-critical, .status-no, .status-improving, .status-tight, .status-limited, .grade) {
  display: inline-flex; align-items: center; min-height: 26px; padding: 2px 10px; border-radius: 999px; white-space: nowrap;
  font: 650 12.5px/1.2 var(--th-font); color: var(--th-ink-700); background: var(--th-wash); border: 1px solid var(--th-line);
}
.th-cp :is(.pill-bad, .pill-critical, .status-no) { color: var(--th-short-ink); background: var(--th-short-bg); border-color: var(--th-short-line); }
.th-cp :is(.pill-warn, .pill-ongoing, .status-tight, .status-limited) { color: var(--th-limited-ink); background: var(--th-limited-bg); border-color: var(--th-limited-line); }
.th-cp .status-improving { color: var(--th-maybe-ink); background: var(--th-maybe-bg); border-color: var(--th-maybe-line); }
.th-cp :is(.neg, .down) { color: var(--th-short-ink); }
.th-cp .pos { color: var(--th-maybe-ink); }

/* ── phones ───────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .th-cp .hero, .th-cp header.mw-hero { padding: 26px var(--th-gutter) 22px; }
  .th-cp .hero .subtitle, .th-cp .mw-subtitle { font-size: 17px; }
  .th-cp .content, .th-cp .container, .th-cp .th-cp-body { padding: 24px var(--th-gutter) 56px; }
  .th-cp main.mw-main { grid-template-columns: minmax(0, 1fr); padding: 24px var(--th-gutter) 56px; gap: 24px; }
  .th-cp .th-live-wrap { padding-top: 18px; }
  .th-cp .cta-box { padding: 24px 20px; }
  .th-cp .cta-box h2 { font-size: 22px; }
  .th-cp .toc ol, .th-cp .toc ul { columns: 1; }
  .th-cp .lead, .th-cp .intro, .th-cp .dek, .th-cp .tldr { font-size: 17px; padding: 16px 16px 16px 20px; }
  .th-cp .stat-num, .th-cp .stat .num { font-size: 26px; }
}
/* touch: chips and cards are full-size targets */
@media (pointer: coarse), (max-width: 900px) {
  .th-cp a.tag { min-height: 44px; padding: 6px 16px; }
  .th-cp .breadcrumb a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
  .th-cp :is(.cta-box a, .cta-btn, .mw-growth-primary, .mw-growth-secondary, .th-urgent a) { min-height: 48px; }
  .th-cp .resolved-link { min-height: 44px; align-items: center; }
  .th-cp .sources a, .th-cp .last-updated a, .th-cp .th-note-source a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
  /* "On this page" lists and the hub's table: each link is a whole row to tap */
  .th-cp .toc li { margin: 0; }
  .th-cp .toc a { display: flex; align-items: center; min-height: 44px; }
  .th-cp .drug-table td a { display: inline-flex; align-items: center; min-height: 44px; }
  .th-cp li.th-li-link > a, .th-cp p.th-p-link > a, .th-cp .shortage-card h3 a { display: flex; align-items: center; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .th-cp * { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}