/* ============================================
   dose-science — "The dose" (desktop 1817:4628 / mobile 1817:5214)
   Pattern C: nested in science-index's main column — no .container, no own padding / margin / max-width.
   Mobile-first: base = mobile (<768) · 768–1023 pseudo-tablet · 1024+ desktop (D-DS-9).
   Δ = (var(--max-vw) - 390px) * 0.015 · band = (var(--max-vw) - 768px) * 0.025 · s = var(--max-vw) / var(--vw-base)
============================================ */

.dose-science {
  /* spacing (brief §2) */
  --ds-gap-section:   clamp(26px, calc(32px + (var(--max-vw) - 390px) * 0.015), 32px);
  --ds-gap-intro:     clamp(16px, calc(20px + (var(--max-vw) - 390px) * 0.015), 24px);
  --ds-gap-body:      clamp(26px, calc(32px + (var(--max-vw) - 390px) * 0.015), 40px);
  --ds-gap-rows:      clamp(33px, calc(40px + (var(--max-vw) - 390px) * 0.015), 56px);
  --ds-gap-row:       clamp(13px, calc(16px + (var(--max-vw) - 390px) * 0.015), 16px);
  --ds-gap-text:      clamp(7px,  calc(8px + (var(--max-vw) - 390px) * 0.015), 8px);
  --ds-gap-text-lead: var(--ds-gap-text);
  --ds-gap-note:      clamp(7px,  calc(8px + (var(--max-vw) - 390px) * 0.015), 16px);
  --ds-bar-h:         clamp(16px, calc(20px + (var(--max-vw) - 390px) * 0.015), 20px);
  --ds-icon:          clamp(26px, calc(32px + (var(--max-vw) - 390px) * 0.015), 32px);
  --ds-dot:           clamp(15px, calc(18px + (var(--max-vw) - 390px) * 0.015), 18px);

  /* colours — mobile palette (D-DS-6: raw mobile literals, slice-local; desktop swaps to tokens) */
  --ds-text-color:    var(--color-graphite);   /* intro paragraph */
  --ds-copy-color:    var(--color-coal);       /* figures 2–3, captions, footnote */
  --ds-track:         #EDEBE5;
  --ds-fill-muted:    #9E9994;
  --ds-dot-color:     #B80509;

  display: flex;
  flex-direction: column;
  gap: var(--ds-gap-section);
}

/* ---- Intro: title + paragraph ---- */
.dose-science__intro {
  display: flex;
  flex-direction: column;
  gap: var(--ds-gap-intro);
}

.dose-science__title {
  /* mobile + tablet: h1 token, left (cross-layer swap, brief-page §4.2; D-DS-7) */
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  color: var(--color-ink);
  text-align: left;
}

.dose-science__text {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-body-lg);
  line-height: var(--lh-body-lg);
  letter-spacing: var(--ls-body-lg);
  color: var(--ds-text-color);
}

/* ---- Body: rows + footnote ---- */
.dose-science__body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--ds-gap-body);
}

.dose-science__rows {
  display: flex;
  flex-direction: column;
  gap: var(--ds-gap-rows);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dose-science__item {
  min-width: 0;
}

/* Row = drawer trigger (D-DS-2): the WHOLE row is the button */
.dose-science__row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--ds-gap-row);
  width: 100%;
  padding: 0;
  text-align: left;
  transition: opacity 150ms ease;
}

.dose-science__row:hover {
  opacity: 0.7;   /* BA-DS-1 — same cue as the evidence stat cells */
}

.dose-science__row-text {
  display: flex;
  flex-direction: column;
  gap: var(--ds-gap-text);
}

.dose-science__row-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--ds-gap-text);
}

.dose-science__value {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-display-large);
  line-height: var(--lh-display-large);
  letter-spacing: var(--ls-display-large);
  color: var(--ds-copy-color);
  white-space: nowrap;   /* MUST-APPLY: a wrapped figure would push the icon off its row */
}

.dose-science__value--accent {
  color: var(--color-accent);
}

.dose-science__icon {
  flex: 0 0 auto;
  width: var(--ds-icon);
  height: var(--ds-icon);
}

.dose-science__caption {
  display: block;
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-body-lg);
  line-height: var(--lh-body-lg);
  letter-spacing: var(--ls-body-lg);
  color: var(--ds-copy-color);
}

/* Bar: track + data-true fill (D-DS-3) */
.dose-science__bar {
  display: block;
  width: 100%;
  height: var(--ds-bar-h);
  background: var(--ds-track);
  overflow: hidden;
}

.dose-science__bar-fill {
  display: block;
  height: 100%;
  background: var(--ds-fill-muted);
}

.dose-science__bar-fill--full {
  width: 100%;
  background: var(--color-accent);
}

.dose-science__bar-fill--2000 {
  width: calc(100% * 2000 / 10800);
}

.dose-science__bar-fill--3600 {
  width: calc(100% * 3600 / 10800);
}

/* ---- Footnote ---- */
.dose-science__note {
  display: flex;
  align-items: center;
  gap: var(--ds-gap-note);
}

.dose-science__note-dot {
  flex: 0 0 auto;
  width: var(--ds-dot);
  height: var(--ds-dot);
  border-radius: 50%;
  background: var(--ds-dot-color);
}

.dose-science__note-text {
  flex: 1 1 0;
  min-width: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--ds-copy-color);
}

/* ============================================
   PSEUDO-TABLET (768–1023): desktop-compressed rows, mobile palette, title left
============================================ */
@media (min-width: 768px) and (max-width: 1023px) {
  .dose-science {
    --ds-gap-section: 32px;
    --ds-gap-intro:   24px;
    --ds-gap-body:    clamp(37.66px, calc(37.66px + (var(--max-vw) - 768px) * 0.025), 40px);
    --ds-gap-rows:    clamp(45.66px, calc(45.66px + (var(--max-vw) - 768px) * 0.025), 56px);
    --ds-gap-row:     16px;
    --ds-gap-text:    8px;
    --ds-gap-note:    clamp(13.66px, calc(13.66px + (var(--max-vw) - 768px) * 0.025), 16px);
    --ds-bar-h:       20px;
    --ds-icon:        32px;
    --ds-dot:         18px;
  }
}

/* ============================================
   DESKTOP (1024+): 1050 column @1920, every term scales by s
============================================ */
@media (min-width: 1024px) {
  .dose-science {
    --ds-gap-section:   clamp(13px, calc(24px * (var(--max-vw) / var(--vw-base))), 24px);
    --ds-gap-intro:     clamp(13px, calc(24px * (var(--max-vw) / var(--vw-base))), 24px);
    --ds-gap-body:      clamp(21px, calc(40px * (var(--max-vw) / var(--vw-base))), 40px);
    --ds-gap-rows:      clamp(30px, calc(56px * (var(--max-vw) / var(--vw-base))), 56px);
    --ds-gap-row:       clamp(9px,  calc(16px * (var(--max-vw) / var(--vw-base))), 16px);
    --ds-gap-text:      clamp(4px,  calc(8px * (var(--max-vw) / var(--vw-base))), 8px);
    --ds-gap-text-lead: clamp(9px,  calc(16px * (var(--max-vw) / var(--vw-base))), 16px);
    --ds-gap-note:      clamp(9px,  calc(16px * (var(--max-vw) / var(--vw-base))), 16px);
    --ds-bar-h:         clamp(11px, calc(20px * (var(--max-vw) / var(--vw-base))), 20px);
    --ds-icon:          clamp(17px, calc(32px * (var(--max-vw) / var(--vw-base))), 32px);
    --ds-dot:           clamp(10px, calc(18px * (var(--max-vw) / var(--vw-base))), 18px);

    --ds-text-color:    var(--color-ink);
    --ds-copy-color:    var(--color-ink);
    --ds-track:         var(--color-off-white);
    --ds-fill-muted:    var(--color-ink-20);
    --ds-dot-color:     var(--color-accent);
  }

  /* desktop title: h2 token, centred hugging box (1817:4629 alignItems CENTER) */
  .dose-science__title {
    align-self: center;
    font-size: var(--text-h2);
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
    text-align: center;
  }

  /* D-DS-5: desktop row 1 draws head → caption 16 (rows 2–3: 8) */
  .dose-science__item:first-child .dose-science__row-text {
    gap: var(--ds-gap-text-lead);
  }

  /* D-DS-8: footnote row hugs its content on desktop */
  .dose-science__note {
    align-self: flex-start;
  }

  .dose-science__note-text {
    flex: 0 1 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dose-science__row {
    transition: none;
  }
}