/* ==========================================================================
   Read the Label First - design system
   Calm consumer-guide look. Signature element: Supplement Facts-style panels.
   Mobile first. Base size 19px, line height 1.6, WCAG AA contrast.
   ========================================================================== */

:root {
  --paper: #faf8f3;        /* page background */
  --surface: #ffffff;      /* panels */
  --sand: #f1eee6;         /* footer, quiet fills */
  --ink: #1b1b1b;          /* body text  (16:1 on paper) */
  --ink-soft: #3f3f3f;     /* secondary text (10:1 on paper) */
  --rule: #111111;         /* label rules */
  --line: #bdb7aa;         /* light dividers (decorative only) */
  --field: #595959;        /* form borders (7:1, meets 3:1 for UI) */

  --accent: #0d5b70;       /* links + buttons (7.3:1 on white) */
  --accent-dark: #083f4e;
  --accent-tint: #e4eff2;

  --note-bg: #fff4d6;      /* disclosure */
  --note-edge: #a07800;
  --focus: #b34700;        /* focus ring (4.8:1 on paper) */
  --error: #a3161a;
  --error-bg: #fbe9e9;
  --success: #1d6333;
  --success-bg: #e5f2e8;

  /* Evidence badges */
  --ev-some: #1d6333;      --ev-some-bg: #e2f0e5;
  --ev-limited: #7a4a00;   --ev-limited-bg: #fbedc9;
  --ev-vlimited: #5b2b2b;  --ev-vlimited-bg: #f3e1de;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: Georgia, "Times New Roman", Times, serif;
  --label: "Helvetica Neue", Helvetica, Arial, sans-serif;

  --radius: 6px;
  --wrap: 72rem;
  --prose: 40rem;
  --gutter: 1rem;
  --space: 1.5rem;

  color-scheme: light;
}

/* --- Base ---------------------------------------------------------------- */

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

html {
  font-size: 118.75%;      /* 19px with default browser settings; respects user zoom */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  overflow-wrap: break-word;
}

img, svg, video, iframe { max-width: 100%; }
img { height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  line-height: 1.2;
  margin: 2rem 0 .75rem;
  color: var(--ink);
}
h1 { font-size: clamp(1.8rem, 1.3rem + 2.4vw, 2.6rem); margin-top: 0; }
h2 { font-size: clamp(1.45rem, 1.2rem + 1.2vw, 1.85rem); }
h3 { font-size: 1.2rem; font-family: var(--sans); }

p, ul, ol, dl, table, figure { margin: 0 0 1rem; }
ul, ol { padding-left: 1.4rem; }
li { margin-bottom: .35rem; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .15em; }
a:hover { color: var(--accent-dark); text-decoration-thickness: 2px; }

strong { font-weight: 700; }
small { font-size: .9rem; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}
main:focus { outline: none; }

.skip-link {
  position: absolute;
  left: .5rem;
  top: -10rem;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  padding: .75rem 1rem;
  border-radius: var(--radius);
}
.skip-link:focus { top: .5rem; color: #fff; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* --- Layout -------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.prose { max-width: calc(var(--prose) + 2 * var(--gutter)); }
.section { padding: 2.5rem 0; }
.section + .section { padding-top: 0; }
.hero { padding: 2.5rem 0 1.5rem; }
.stack > * + * { margin-top: var(--space); }

.eyebrow {
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: .5rem;
}
.lead { font-size: 1.12rem; color: var(--ink-soft); }
.meta-line { font-size: .9rem; color: var(--ink-soft); }

/* --- Header -------------------------------------------------------------- */

.site-header {
  background: var(--surface);
  border-bottom: 4px solid var(--rule);
}
.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .25rem 1.5rem;
  padding-top: .5rem;
  padding-bottom: .5rem;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--ink);
  text-decoration: none;
  min-height: 48px;
}
.logo:hover { color: var(--ink); }
.logo__mark { width: 2.1rem; height: 2.1rem; flex: none; }
.logo__text {
  font-family: var(--label);
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.logo__text strong { font-weight: 900; }

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.1rem;
}
.site-nav li { margin: 0; }
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 3px solid transparent;
}
.site-nav a:hover { border-bottom-color: var(--line); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--accent); }

/* --- Footer -------------------------------------------------------------- */

.site-footer {
  margin-top: 3rem;
  background: var(--sand);
  border-top: 6px solid var(--rule);
  padding: 2rem 0 2.5rem;
  font-size: .95rem;
}
.site-footer__notes { max-width: var(--prose); }
.site-footer__links {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
}
.site-footer__links li { margin: 0; }
.site-footer__links a { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer__copy { color: var(--ink-soft); margin: 0; }

/* --- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 48px;
  padding: .55rem 1.3rem;
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; text-decoration: none; }
.btn--secondary { background: var(--surface); color: var(--accent); }
.btn--secondary:hover { background: var(--accent-tint); color: var(--accent-dark); }
.btn--large { min-height: 3.4rem; padding: .8rem 1.6rem; font-size: 1.1rem; width: 100%; }

/* Buy box: button with the disclosure right next to it */
.cta-box {
  background: var(--surface);
  border: 2px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin: 2rem 0;
}
.cta-box__disclosure { margin: .75rem 0 0; font-size: .95rem; color: var(--ink); }

/* --- Disclosure and callouts --------------------------------------------- */

.disclosure {
  background: var(--note-bg);
  border: 1px solid var(--note-edge);
  border-left-width: 6px;
  border-radius: var(--radius);
  padding: .75rem 1rem;
  font-size: .95rem;
  color: var(--ink);
  margin: 0 0 1.5rem;
}
.disclosure p { margin: 0; }
.disclosure .disclosure__independence { margin-top: .4rem; }

.callout {
  background: var(--accent-tint);
  border-left: 6px solid var(--accent);
  border-radius: var(--radius);
  padding: .9rem 1.1rem;
}
.callout > :last-child { margin-bottom: 0; }
.callout--caution { background: var(--error-bg); border-left-color: var(--error); }

/* --- Label panels (signature element) ------------------------------------ */

.facts {
  background: var(--surface);
  border: 2px solid var(--rule);
  padding: .4rem .7rem .6rem;
  font-family: var(--label);
  color: #000;
  max-width: 36rem;
  margin: 0 0 1.5rem;
}
.facts__title {
  font-family: var(--label);
  font-size: clamp(1.7rem, 1.3rem + 2vw, 2.3rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -.01em;
  margin: 0;
}
.facts__sub {
  margin: 0;
  padding: .15rem 0 .3rem;
  border-bottom: 10px solid var(--rule);
  font-size: .95rem;
}
.facts table { width: 100%; border-collapse: collapse; margin: 0; font-size: .95rem; }
.facts th, .facts td {
  text-align: left;
  vertical-align: top;
  padding: .3rem 0;
  border-top: 1px solid var(--rule);
}
.facts td:last-child, .facts th:last-child { text-align: right; padding-left: .75rem; }
.facts thead th { border-top: 0; border-bottom: 5px solid var(--rule); font-size: .85rem; font-weight: 700; }
.facts tbody tr:first-child td, .facts tbody tr:first-child th { border-top: 0; }
.facts .facts__group td, .facts .facts__group th { border-top: 5px solid var(--rule); font-weight: 700; }
.facts .facts__indent { padding-left: 1rem; font-weight: 400; }
.facts__foot {
  border-top: 10px solid var(--rule);
  padding-top: .35rem;
  margin: 0;
  font-size: .85rem;
  line-height: 1.45;
}
.facts__foot p { margin: 0 0 .35rem; }

/* "Quick verdict" and other label-style boxes */
.label-box {
  background: var(--surface);
  border: 2px solid var(--rule);
  padding: .5rem 1rem 1rem;
  margin: 1.5rem 0;
}
.label-box__title {
  font-family: var(--label);
  font-weight: 900;
  font-size: 1.5rem;
  margin: 0 0 .75rem;
  padding-bottom: .2rem;
  border-bottom: 8px solid var(--rule);
}
.label-box dl { margin: 0; }
.label-box dt { font-weight: 700; margin-top: .6rem; }
.label-box dd { margin: 0 0 .3rem; padding-bottom: .6rem; border-bottom: 1px solid var(--rule); }
.label-box dd:last-child { border-bottom: 0; padding-bottom: 0; }
.label-box > :last-child { margin-bottom: 0; }

/* --- Tables -------------------------------------------------------------- */

.table-scroll { overflow-x: auto; margin: 0 0 1.5rem; }
.table-scroll table { margin: 0; }

.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 2px solid var(--rule);
  font-size: .95rem;
}
.data-table caption { text-align: left; font-weight: 700; padding: 0 0 .5rem; }
.data-table th, .data-table td {
  padding: .6rem .75rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.data-table thead th { border-bottom: 4px solid var(--rule); background: var(--sand); }
.data-table tbody tr:last-child th, .data-table tbody tr:last-child td { border-bottom: 0; }
.data-table .num { text-align: right; white-space: nowrap; }

/* Stacked rows on small screens: each cell shows its column name */
@media (max-width: 40em) {
  .table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table-stack, .table-stack caption, .table-stack tbody, .table-stack tr, .table-stack th, .table-stack td { display: block; width: 100%; }
  .table-stack caption { padding: .6rem .75rem; border-bottom: 2px solid var(--rule); background: var(--sand); }
  .table-stack tr { border-bottom: 2px solid var(--rule); padding: .4rem 0; }
  .table-stack tbody tr:last-child { border-bottom: 0; }
  .table-stack th, .table-stack td { border: 0; padding: .3rem .75rem; text-align: left; }
  .table-stack .num { text-align: left; }
  .table-stack td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink-soft);
  }
}

/* --- Evidence badges ----------------------------------------------------- */

.badge {
  display: inline-block;
  padding: .1rem .6rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}
.badge--some         { color: var(--ev-some);     background: var(--ev-some-bg); }
.badge--limited      { color: var(--ev-limited);  background: var(--ev-limited-bg); }
.badge--very-limited { color: var(--ev-vlimited); background: var(--ev-vlimited-bg); }

/* --- Pros / cons, who-it-suits ------------------------------------------- */

.two-col { display: grid; gap: 1.25rem; margin: 0 0 1.5rem; }
@media (min-width: 48em) { .two-col { grid-template-columns: 1fr 1fr; } }

.panel {
  background: var(--surface);
  border: 2px solid var(--rule);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
}
.panel h3 { margin-top: 0; }
.panel > :last-child { margin-bottom: 0; }
.panel--plus  { border-top-width: 8px; border-top-color: var(--ev-some); }
.panel--minus { border-top-width: 8px; border-top-color: var(--ev-vlimited); }

/* --- Forms --------------------------------------------------------------- */

.form-box {
  background: var(--surface);
  border: 2px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin: 2rem 0;
}
.form-box h2, .form-box h3 { margin-top: 0; }

.field { margin: 0 0 1rem; }
.field label { display: block; font-weight: 700; margin-bottom: .3rem; }
.field .hint { font-weight: 400; font-size: .9rem; color: var(--ink-soft); }
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: .55rem .7rem;
  border: 2px solid var(--field);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  font: inherit;
}
.field textarea { min-height: 9rem; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline-offset: 1px; border-color: var(--ink); }
.field [aria-invalid="true"] { border-color: var(--error); }
.field-error { display: block; color: var(--error); font-weight: 700; font-size: .95rem; margin-top: .3rem; }
.field-error::before { content: "\26A0\FE0E  "; }

.consent { font-size: .9rem; color: var(--ink-soft); }

/* Honeypot: hidden from people, visible to naive bots */
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.alert { border-radius: var(--radius); padding: .9rem 1.1rem; margin: 0 0 1.25rem; border: 2px solid; }
.alert > :last-child { margin-bottom: 0; }
.alert--error   { background: var(--error-bg); border-color: var(--error); }
.alert--success { background: var(--success-bg); border-color: var(--success); }

/* --- FAQ ----------------------------------------------------------------- */

.faq { border-top: 2px solid var(--rule); margin: 0 0 1.5rem; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  min-height: 48px;
  padding: .7rem 0;
  font-weight: 700;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5rem; line-height: 1; flex: none; }
.faq details[open] summary::after { content: "\2212"; }
.faq details > div { padding: 0 0 1rem; }
.faq details > div > :last-child { margin-bottom: 0; }

/* --- Sources ------------------------------------------------------------- */

.sources { font-size: .95rem; padding-left: 1.6rem; }
.sources li { margin-bottom: .6rem; }

.link-list { padding-left: 1.2rem; }
.link-list li { margin-bottom: .6rem; }

/* --- Review page ---------------------------------------------------------- */

.review section { scroll-margin-top: 1rem; }
.review h2 { padding-top: .5rem; }

.toc {
  border-top: 2px solid var(--rule);
  border-bottom: 2px solid var(--rule);
  padding: .75rem 0 .25rem;
  margin: 0 0 2rem;
}
.toc__title { font-family: var(--sans); font-size: 1rem; margin: 0 0 .4rem; }
.toc ol { columns: 2 12rem; column-gap: 1.5rem; margin: 0 0 .5rem; }
.toc li { break-inside: avoid; }
.toc a { display: inline-block; min-height: 44px; padding: .5rem 0; }

.cite { font-size: .72em; line-height: 0; margin-left: .1em; white-space: nowrap; }
.cite a { text-decoration: none; padding: 0 .1em; }
.cite a:hover { text-decoration: underline; }

.facts td { text-align: right; padding-left: .75rem; white-space: nowrap; }
.facts__amt { font-weight: 400; white-space: nowrap; }
.facts-verify {
  display: inline-block;
  background: var(--note-bg);
  border: 1px solid var(--note-edge);
  padding: .3rem .7rem;
  font-size: .9rem;
  margin-bottom: .6rem;
}

.evidence-table th .listed {
  display: block;
  font-family: var(--sans);
  font-weight: 400;
  font-size: .82rem;
  color: var(--ink-soft);
  margin-top: .2rem;
}

.steps li { margin-bottom: .6rem; }
.byline { font-size: .95rem; color: var(--ink-soft); border-top: 1px solid var(--line); padding-top: .75rem; }
.medical-note { font-size: .9rem; color: var(--ink-soft); border-top: 2px solid var(--rule); padding-top: 1rem; margin-top: 2rem; }

/* Local-only "to verify" flags (never rendered in production) */
.verify {
  display: inline;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background: #ffe1e1;
  color: #7a0000;
  border: 1px dashed #7a0000;
  font-size: .75rem;
  font-weight: 700;
  padding: 0 .35rem;
  border-radius: 3px;
  white-space: normal;
}

/* --- Checklist (thank-you page) ------------------------------------------ */

.checklist { list-style: none; counter-reset: q; padding: 0; margin: 1.5rem 0 2rem; }
.checklist > li {
  counter-increment: q;
  background: var(--surface);
  border: 2px solid var(--rule);
  border-radius: var(--radius);
  padding: 1rem 1.1rem 1rem 3.4rem;
  margin: 0 0 1rem;
  position: relative;
}
.checklist > li::before {
  content: counter(q);
  position: absolute;
  left: .9rem;
  top: .9rem;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  text-align: center;
  line-height: 1.8rem;
}
.checklist h2 { font-family: var(--sans); font-size: 1.15rem; margin: 0 0 .5rem; }
.checklist ul { margin: 0; }

/* --- Home, hubs and content pages ------------------------------------------ */

.button-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.wrap--mid { max-width: calc(58rem + 2 * var(--gutter)); }
.section-title { margin-top: 0; }
.three-col { display: grid; gap: 1.25rem; }
.three-col .label-box { margin: 0; }
.three-col .label-box__title { font-size: 1.25rem; }
@media (min-width: 56em) { .three-col { grid-template-columns: repeat(3, 1fr); } }
.card-list { display: grid; gap: 1rem; margin: 0 0 1.5rem; }
.card .meta-line { margin-top: .5rem; }
.legal h2 { font-size: 1.35rem; }
.legal h3 { font-size: 1.1rem; margin-top: 1.5rem; }
.author p { margin: 0 0 .4rem; }

/* --- Cards (hub pages) --------------------------------------------------- */

.card {
  display: block;
  background: var(--surface);
  border: 2px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  color: var(--ink);
  text-decoration: none;
}
.card:hover { color: var(--ink); box-shadow: 4px 4px 0 var(--rule); }
.card h3 { margin: 0 0 .4rem; color: var(--accent); }
.card p { margin: 0; }

/* --- Video block (manufacturer videos, off by default) ------------------- */

.video { margin: 1.5rem 0; }
.video__frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
.video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video figcaption { font-size: .9rem; color: var(--ink-soft); margin-top: .4rem; }

/* --- Pre-sell page and product images ------------------------------------- */

.icon { width: 2.4rem; height: 2.4rem; flex: none; color: var(--accent); }

.package__img img { width: 100%; height: auto; }

/* Product photo with its caption. Width/height attributes on the <img> keep
   the space reserved while it loads (no layout shift). */
.product-figure { margin: 1.25rem auto 1.75rem; text-align: center; }
.product-figure--hero   { max-width: 420px; }
.product-figure--review { max-width: 360px; }
.product-figure__img, .product-figure img { display: block; width: 100%; height: auto; }
.product-figure figcaption { margin-top: .4rem; font-size: .85rem; color: var(--ink-soft); }

/* Placeholder shown locally until an image file is added */
.img-slot {
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  padding: 1rem;
  margin: 1rem 0;
  font-size: .8rem;
  color: var(--ink-soft);
  text-align: center;
  background: var(--surface);
  word-break: break-word;
}

.reasons { list-style: none; padding: 0; display: grid; gap: 1rem; margin: 0 0 1rem; }
@media (min-width: 40em) { .reasons { grid-template-columns: 1fr 1fr; } }
.reason {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  background: var(--surface);
  border: 2px solid var(--rule);
  border-radius: var(--radius);
  padding: .9rem 1rem;
  margin: 0;
}
.reason h3 { margin: 0 0 .25rem; font-size: 1.05rem; }
.reason p { margin: 0; font-size: .95rem; }
.value-line { font-weight: 700; font-size: 1.1rem; }

.packages { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 1rem; }
@media (min-width: 48em) { .packages { grid-template-columns: repeat(3, 1fr); align-items: start; } }
.package {
  position: relative;
  background: var(--surface);
  border: 2px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.1rem 1rem 1rem;
  margin: 0;
  text-align: center;
}
.package--best { border-width: 4px; border-color: var(--accent); }
.package__badge {
  display: inline-block;
  margin: 0 0 .5rem;
  padding: .15rem .8rem;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.package--best .package__badge { background: var(--accent); }
.package__title { margin: 0 0 .5rem; font-size: 1.3rem; }
.package__days { display: block; font-size: .9rem; font-weight: 400; color: var(--ink-soft); }
.package__img { display: block; margin: .5rem auto; max-width: 14rem; }
.package__price { margin: .5rem 0; }
.package__price strong { font-family: var(--label); font-size: 2.2rem; font-weight: 900; }
.package__price span { color: var(--ink-soft); }
.package__facts { list-style: none; padding: 0; margin: 0; font-size: .95rem; }
.package__facts li { margin: .15rem 0; }

.know-box {
  background: var(--note-bg);
  border: 2px solid var(--note-edge);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  margin: 2rem 0;
}
.know-box h2 { margin-top: 0; font-size: 1.35rem; }
.know-box > :last-child { margin-bottom: 0; }

/* Review: "What people like" and the collapsible research notes */
.likes { padding-left: 1.2rem; }
.likes li { margin-bottom: .6rem; }
.evidence-summary { list-style: none; padding: 0; }
.evidence-summary li { margin-bottom: .5rem; display: flex; align-items: baseline; gap: .6rem; }
.evidence-summary .badge { min-width: 8.2rem; text-align: center; flex: none; }
.research-notes { border: 2px solid var(--rule); border-radius: var(--radius); background: var(--surface); margin: 1.5rem 0; }
.research-notes > summary {
  cursor: pointer;
  min-height: 48px;
  padding: .8rem 1rem;
  font-weight: 700;
  color: var(--accent);
}
.research-notes[open] > summary { border-bottom: 1px solid var(--line); }
.research-notes__body { padding: .5rem 1rem 1rem; }
.research-notes__body h3:first-child { margin-top: .5rem; }

@media print {
  .research-notes__body { display: block !important; }
}

/* --- Admin ---------------------------------------------------------------- */

.admin-wrap { width: 100%; max-width: 90rem; margin: 0 auto; padding: 0 var(--gutter); }
.admin main { padding-top: 1.5rem; padding-bottom: 3rem; }
.admin h1 { font-size: 1.8rem; }
.admin h2 { font-size: 1.3rem; margin-top: 2.5rem; }
.admin-header { background: var(--ink); color: #fff; }
.admin-header__inner { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.5rem; padding-top: .4rem; padding-bottom: .4rem; }
.admin-header__title { margin: 0; font-weight: 700; margin-right: auto; }
.admin-header nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0 1rem; margin: 0; padding: 0; }
.admin-header nav li { margin: 0; }
.admin-header nav a { color: #fff; display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; border-bottom: 3px solid transparent; }
.admin-header nav a[aria-current="page"] { border-bottom-color: #fff; }
.admin-header :focus-visible { outline-color: #ffb870; }
.admin-logout { margin: 0; }
.admin-logout .btn { min-height: 40px; padding: .3rem .9rem; }
.admin-login { max-width: 28rem; margin: 2rem auto; }
.admin-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.alert--warning { background: var(--note-bg); border-color: var(--note-edge); }
.alert--info { background: var(--accent-tint); border-color: var(--accent); }
.alert details { margin-top: .5rem; }
.alert summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }

.stat-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 1rem; margin: 0 0 2rem; }
.stat { background: var(--surface); border: 2px solid var(--rule); border-radius: var(--radius); padding: .8rem 1rem; margin: 0; }
.stat__value { display: block; font-family: var(--label); font-size: 2rem; font-weight: 900; line-height: 1.1; }
.stat__label { display: block; font-size: .9rem; color: var(--ink-soft); }

.muted { color: var(--ink-soft); }
.muted-row td, .muted-row th { color: var(--ink-soft); }
.break { word-break: break-all; }
.data-table--compact { font-size: .85rem; }
.data-table--compact th, .data-table--compact td { padding: .4rem .5rem; }
.pager { display: flex; gap: 1.5rem; align-items: center; margin: 1rem 0; }

.message { margin: 0 0 1rem; }
.message--handled { opacity: .75; }
.message__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; }
.message__head p { margin: 0; }
.message__body { margin: .75rem 0 0; white-space: normal; }

/* --- Motion -------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (min-width: 48em) {
  :root { --gutter: 1.5rem; }
  .btn--large { width: auto; }
  .hero { padding: 3.5rem 0 2rem; }
}

@media print {
  .site-nav, .skip-link, .form-box, .cta-box .btn { display: none; }
  body { background: #fff; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}