/* drawers-data.css — newTudo-science · data drawers P2, P3, P4, P5, P12 (OVERLAY, content only).
   Slice: brief/drawers-data.md. Shell (.drawer, .drawer__panel, .drawer__scroller, .drawer__close, .drawer__body and the
   .drawer__head / .drawer__source primitives) = PAGE_SCAFFOLD css/components.css "DRAWER SHELL" — NOT re-styled here.
   Every rule is scoped to .drawers--data. Mobile-first: base = < 768 (390 frame, column 358); 768–1023 = 390 right
   panel at the M-767 values (column ≈346.7); >= 1024 = 720 panel (column 624 @1920).
   Fluid: M = clamp(Mmin, M + (var(--max-vw) - 390px) * 0.015, Mmax) · D = clamp(Dmin, D * var(--max-vw) / var(--vw-base), D). */

/* ---------- Fluid spacing + slice-local type (mobile base) ---------- */
.drawers--data {
  --dd-g4: clamp(3px, calc(4px + (var(--max-vw) - 390px) * 0.015), 4px);
  --dd-g8: clamp(7px, calc(8px + (var(--max-vw) - 390px) * 0.015), 8px);
  --dd-g12: clamp(10px, calc(12px + (var(--max-vw) - 390px) * 0.015), 12px);
  --dd-g16: clamp(13px, calc(16px + (var(--max-vw) - 390px) * 0.015), 16px);
  --dd-g24: clamp(20px, calc(24px + (var(--max-vw) - 390px) * 0.015), 24px);
  /* P2 chart */
  --dd-chart-gap: clamp(13px, calc(16px + (var(--max-vw) - 390px) * 0.015), 24px);        /* 16 M / 24 D */
  --dd-track-h: clamp(13px, calc(16px + (var(--max-vw) - 390px) * 0.015), 20px);          /* 16 M / 20 D */
  /* P3 timeline */
  --dd-year-w: clamp(66px, calc(80px + (var(--max-vw) - 390px) * 0.015), 80px);
  --dd-year-gap: clamp(13px, calc(16px + (var(--max-vw) - 390px) * 0.015), 24px);        /* 16 M / 24 D */
  --dd-year: clamp(18px, calc(22px + (var(--max-vw) - 390px) * 0.015), 32px);             /* 22 M / 32 D */
  --dd-lh-year: 1.22;
  --dd-ls-year: -0.0045em;
  /* P12 */
  --dd-spec-gap: clamp(13px, calc(16px + (var(--max-vw) - 390px) * 0.015), 16px);         /* 16 M / 14 D */
  --dd-cell-pad: clamp(8px, calc(10px + (var(--max-vw) - 390px) * 0.015), 10px);
  --dd-colgap: clamp(7px, calc(8px + (var(--max-vw) - 390px) * 0.015), 12px);             /* 8 M / 12 D */
  --dd-tiles-head-gap: clamp(5px, calc(6px + (var(--max-vw) - 390px) * 0.015), 14px);     /* 6 M / 14 D */
  --dd-tiles-gap: clamp(7px, calc(8px + (var(--max-vw) - 390px) * 0.015), 12px);          /* 8 M / 12 D */
  --dd-tile-pad: clamp(13px, calc(16px + (var(--max-vw) - 390px) * 0.015), 20px);         /* 16 M / 20 D */
  --dd-tile-gap: clamp(3px, calc(4px + (var(--max-vw) - 390px) * 0.015), 18px);           /* 4 M / 18 D */
  --dd-tile-fig: var(--text-display-tile);                                                 /* M token 32 */
  --dd-lh-tile-fig: var(--lh-display-tile);
  --dd-ls-tile-fig: var(--ls-display-tile);
  --dd-dot-gap: clamp(8px, calc(10px + (var(--max-vw) - 390px) * 0.015), 10px);
  --dd-lot-extra: var(--dd-g8);                                                            /* M wrapper gap 16 = 8 + 8 */
  --dd-lookup-h: clamp(46px, calc(56px + (var(--max-vw) - 390px) * 0.015), 56px);
  --dd-lookup-w: min(375px, 100%);
  --dd-lh-input: var(--lh-body);
  /* "Action/Button" text link (Source link, Show results): Denim 500 16 / 21.12 drawn on BOTH layers */
  --dd-link-size: clamp(13px, calc(16px + (var(--max-vw) - 390px) * 0.015), 16px);
  --dd-link-lh: 1.32;
  /* P4 / P5 chart aspect (bars box), mobile ratio */
  --dd-pubs-ratio: 358 / 117.89;
}
.drawers--data .dd-pubs--p5 { --dd-pubs-ratio: 358 / 240; }

/* ---------- Head: lead colour per drawer (P2 ink as drawn; P3 / P12 ink-80) ---------- */
.drawers--data .dd-lead { color: var(--color-ink); }
.drawers--data .dd-lead--muted { color: var(--color-ink-80); }

/* ---------- Source link (scaffold .drawer__source-link: drawn gap 5, padding 2/0, 16/21.12, underlined) ---------- */
.drawers--data .drawer__source-link {
  gap: 5px;
  padding: 2px 0;
  font-size: var(--dd-link-size);
  line-height: var(--dd-link-lh);
  letter-spacing: 0;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* ---------- DD-1 text block ---------- */
.drawers--data .dd-block {
  display: flex;
  flex-direction: column;
  gap: var(--dd-g8);
  width: 100%;
}
.drawers--data .dd-block--tight { gap: var(--dd-g4); }
.drawers--data .dd-block__title,
.drawers--data .dd-chart__title {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-body-xl);
  line-height: var(--lh-body-xl);
  letter-spacing: var(--ls-body-xl);
  color: var(--color-ink);
}
.drawers--data .dd-block__text {
  margin: 0;
  font-size: var(--text-body-lg);
  line-height: var(--lh-body-lg);
  letter-spacing: var(--ls-body-lg);
  color: var(--color-ink);
}
.drawers--data .dd-block--tight .dd-block__title {
  font-size: var(--text-body-lg);
  line-height: var(--lh-body-lg);
  letter-spacing: var(--ls-body-lg);
}
.drawers--data .dd-block--tight .dd-block__text {
  font-size: var(--text-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}

/* ---------- DD-2 P2 dose chart ---------- */
.drawers--data .dd-chart {
  display: flex;
  flex-direction: column;
  gap: var(--dd-chart-gap);
  width: 100%;
}
.drawers--data .dd-chart__rows {
  display: flex;
  flex-direction: column;
  gap: var(--dd-g24);
  margin: 0;
  padding: 0;
  list-style: none;
}
.drawers--data .dd-chart__row {
  display: flex;
  flex-direction: column;
  gap: var(--dd-g12);
}
.drawers--data .dd-chart__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  /* node gap 16 is NOT honoured in Figma: name 544|286 + value 80|72 fixed boxes fill the 624|358 column, so the
     name wraps against the value box itself (M "Kurosawa 2015 · randomized, single" fits 286). A 4 px floor keeps
     the two texts from touching. */
  gap: 4px;
  font-size: var(--text-body-lg);
  line-height: var(--lh-body-lg);
  letter-spacing: var(--ls-body-lg);
  color: var(--color-ink);
}
.drawers--data .dd-chart__name { flex: 1 1 auto; min-width: 0; }
.drawers--data .dd-chart__value { flex: none; white-space: nowrap; text-align: right; }
.drawers--data .dd-chart__track {
  display: block;
  width: 100%;
  height: var(--dd-track-h);
  background: var(--color-off-white);
  overflow: hidden;
}
.drawers--data .dd-chart__bar {
  display: block;
  width: calc(var(--v) * 100%);
  height: 100%;
  background: var(--color-ink-20);
}
.drawers--data .dd-chart__row--tudo .dd-chart__bar { background: var(--color-accent); }
.drawers--data .dd-chart__note {
  margin: calc(var(--dd-g24) - var(--dd-chart-gap)) 0 0;   /* drawn inside the Chart frame: 24 below the last row (M heading gap is 16) */
  font-size: var(--text-body-sm);
  line-height: var(--lh-body-sm);
  letter-spacing: var(--ls-body-sm);
  color: var(--color-ink-80);
}

/* ---------- DD-4 P3 timeline ---------- */
.drawers--data .dd-timeline {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.drawers--data .dd-timeline__item {
  display: flex;
  align-items: flex-start;
  gap: var(--dd-year-gap);
  padding: var(--dd-g16) 0;
  border-top: 1px solid var(--color-ink-20);
}
.drawers--data .dd-timeline__year {
  flex: none;
  width: var(--dd-year-w);
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--dd-year);
  line-height: var(--dd-lh-year);
  letter-spacing: var(--dd-ls-year);
  color: var(--color-ink);
}
.drawers--data .dd-timeline__text {
  display: flex;
  flex-direction: column;
  gap: var(--dd-g4);
  flex: 1 1 0;
  min-width: 0;
}
.drawers--data .dd-timeline__title {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-body-lg);
  line-height: var(--lh-body-lg);
  letter-spacing: var(--ls-body-lg);
  color: var(--color-ink);
}
.drawers--data .dd-timeline__desc {
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--color-ink-80);
}

/* a citation page range ("43:1110-1111.", ≤ 14 characters) wraps as one word, as Figma draws it — never at its hyphen */
.drawers--data .dd-nobr { white-space: nowrap; }

/* ---------- DD-6 big number (P4 / P5) ---------- */
.drawers--data .dd-bignum {
  display: flex;
  flex-direction: column;
  gap: var(--dd-g8);
  width: 100%;
}
.drawers--data .dd-bignum__figure {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-display-hero);
  line-height: var(--lh-display-hero);
  letter-spacing: var(--ls-display-hero);
  color: var(--color-ink);
}
.drawers--data .dd-bignum__caption {
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--color-ink);
}

/* ---------- DD-7 publications-per-year chart (P4 / P5) — CSS columns, never an image ---------- */
.drawers--data .dd-pubs {
  display: flex;
  flex-direction: column;
  gap: var(--dd-g12);
  width: 100%;
}
.drawers--data .dd-pubs__title {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-body-xl);
  line-height: var(--lh-body-xl);
  letter-spacing: var(--ls-body-xl);
  color: var(--color-ink);
}
.drawers--data .dd-pubs__chart {
  display: flex;
  flex-direction: column;
  gap: var(--dd-g8);
  margin: 0;
}
.drawers--data .dd-pubs__bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  width: 100%;
  aspect-ratio: var(--dd-pubs-ratio);
}
.drawers--data .dd-pubs__bar {
  display: block;
  flex: 1 1 0;
  min-width: 0;
  height: max(1px, 0.42%, calc(var(--h) * 100%));   /* zero years keep the drawn 0.42 % stub */
  background: var(--color-accent-80);
}
.drawers--data .dd-pubs__bar--ytd { background: var(--color-accent-20); }
.drawers--data .dd-pubs__axis {
  display: flex;
  justify-content: space-between;
  /* drawn gap 8 is only the autolayout minimum (space-between sets the real spacing); 4 lets the 9 P4 labels
     still fit the 275 px column at 320 instead of spilling 7 px past it */
  gap: 4px;
  font-size: var(--text-body-sm);
  line-height: var(--lh-body-sm);
  letter-spacing: var(--ls-body-sm);
  color: var(--color-stone);
  white-space: nowrap;
}
.drawers--data .dd-pubs__caption {
  margin: 0;
  font-size: var(--text-body-sm);
  line-height: var(--lh-body-sm);
  letter-spacing: var(--ls-body-sm);
  color: var(--color-stone);
}

/* ---------- DD-8 P12 spec table ---------- */
.drawers--data .dd-spec {
  display: flex;
  flex-direction: column;
  gap: var(--dd-spec-gap);
  width: 100%;
}
.drawers--data .dd-spec__table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: var(--text-body-sm);
  line-height: var(--lh-body-sm);
  letter-spacing: var(--ls-body-sm);
  color: var(--color-ink);
}
/* column width includes the trailing column gap (cell padding-right); M 4 equal (83.5 + 8) / D 138 · 188 · 128 · 134 (+12) */
.drawers--data .dd-spec__col--1,
.drawers--data .dd-spec__col--2,
.drawers--data .dd-spec__col--3 { width: 25.56%; }
.drawers--data .dd-spec__col--4 { width: 23.32%; }
.drawers--data .dd-spec__table th,
.drawers--data .dd-spec__table td {
  padding: var(--dd-cell-pad) var(--dd-colgap) var(--dd-cell-pad) 0;
  text-align: left;
  vertical-align: top;
  font-weight: var(--weight-regular);
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.drawers--data .dd-spec__table th:last-child,
.drawers--data .dd-spec__table td:last-child { padding-right: 0; }
.drawers--data .dd-spec__table tbody th { font-weight: var(--weight-medium); }
.drawers--data .dd-spec__table tbody tr { border-top: 1px solid var(--color-ink-10); }
.drawers--data .dd-spec__todo { color: var(--color-accent); }
.drawers--data .dd-spec__note {
  margin: 0;
  font-size: var(--text-body-sm);
  line-height: var(--lh-body-sm);
  letter-spacing: var(--ls-body-sm);
  color: var(--color-ink-80);
}

/* ---------- DD-9 P12 lot tiles ---------- */
.drawers--data .dd-tiles-block {
  display: flex;
  flex-direction: column;
  gap: var(--dd-tiles-head-gap);
  width: 100%;
}
.drawers--data .dd-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--dd-tiles-gap);
  margin: 0;
}
.drawers--data .dd-tile {
  display: flex;
  flex-direction: column;
  gap: var(--dd-tile-gap);
  padding: var(--dd-tile-pad);
  background: var(--color-off-white);
}
.drawers--data .dd-tile__label {
  font-weight: var(--weight-regular);
  font-size: var(--text-body-sm);
  line-height: var(--lh-body-sm);
  letter-spacing: var(--ls-body-sm);
  color: var(--color-ink);
}
.drawers--data .dd-tile__figure {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--dd-tile-fig);
  line-height: var(--dd-lh-tile-fig);
  letter-spacing: var(--dd-ls-tile-fig);
  color: var(--color-ink);
}

/* ---------- DD-10 P12 check list ---------- */
.drawers--data .dd-list {
  display: flex;
  flex-direction: column;
  gap: var(--dd-g16);
  margin: 0;
  padding: 0;
  list-style: none;
}
.drawers--data .dd-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--dd-dot-gap);
  font-size: var(--text-body-lg);
  line-height: var(--lh-body-lg);
  letter-spacing: var(--ls-body-lg);
  color: var(--color-ink);
}
.drawers--data .dd-list__item::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 10px;
  border-radius: var(--radius-full);
  background: var(--color-ink);
}

/* ---------- DD-12 P12 lot lookup (stub, BA-DD-1) ---------- */
.drawers--data .dd-block--lot .dd-lookup { margin-top: var(--dd-lot-extra); }
.drawers--data .dd-lookup {
  display: flex;
  align-items: center;
  gap: var(--dd-g16);
  width: var(--dd-lookup-w);
  max-width: 100%;
  height: var(--dd-lookup-h);
  padding: 0 var(--dd-g16);
  border-bottom: 1px solid var(--color-ink);
}
.drawers--data .dd-lookup__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-body);
  line-height: var(--dd-lh-input);
  letter-spacing: 0;
  color: var(--color-ink);
}
.drawers--data .dd-lookup__input::placeholder { color: var(--color-ink-80); opacity: 1; }
.drawers--data .dd-lookup__btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  padding: 2px 0;
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--dd-link-size);
  line-height: var(--dd-link-lh);
  letter-spacing: 0;
  color: var(--color-ink);
  cursor: pointer;
}
.drawers--data .dd-lookup__btn img { flex: none; width: 20px; height: 20px; }

/* ---------- Pseudo-tablet 768–1023: the shell reproduces the UNSCALED 390 mobile frame here (pad 64/16/48, gap 24,
   column 358), so the content keeps the drawn 390 spacing as fixed px; type comes from the page tokens' tablet band. ---------- */
@media (min-width: 768px) {
  .drawers--data {
    --dd-g4: 4px;
    --dd-g8: 8px;
    --dd-g12: 12px;
    --dd-g16: 16px;
    --dd-g24: 24px;
    --dd-chart-gap: 16px;
    --dd-track-h: 16px;
    --dd-year-w: 80px;
    --dd-year-gap: 16px;
    --dd-year: 22px;
    --dd-spec-gap: 16px;
    --dd-cell-pad: 10px;
    --dd-colgap: 8px;
    --dd-tiles-head-gap: 6px;
    --dd-tiles-gap: 8px;
    --dd-tile-pad: 16px;
    --dd-tile-gap: 4px;
    --dd-tile-fig: min(var(--text-display-tile), 32px);   /* D-DD-6: "10,800 FU" stays one line in a ~137 px tile */
    --dd-dot-gap: 10px;
    --dd-lookup-h: 56px;
    --dd-link-size: 16px;
  }
}

/* RESPONSIVE 6c: in 768–1023 the panel IS the unscaled 390 frame (brief-page §8, driver correction 2026-10-20), so the
   TYPE is the drawn 390 type too — the same token set drawers-studies uses (D-DS-4). With the page band tokens the two
   drawer families diverged in one shell (P2/P3/P4/P5/P12 title 33.66→40 vs P1/P6–P11 28 at 768–1023), and the P12
   table at body-sm 14 broke "menaquinone" / "cholecalciferol" mid-word in its 83.5 px columns. */
@media (min-width: 768px) and (max-width: 1023px) {
  .drawers--data {
    --text-h3: 28px;          --lh-h3: 1.2;   --ls-h3: -0.0107em;
    --text-display-hero: 48px;
    --text-body-xl: 22px;
    --text-body-lg: 18px;
    --text-body: 15px;
    --text-body-sm: 13px;
    --text-tag-label: 11px;
    --text-display-tile: 32px; --lh-display-tile: 1.06;
  }
  /* the lot-number input keeps 16 here (the band value before this block): below 16 iOS / iPadOS Safari zooms the page
     on focus. The < 768 band draws 15 — iOS-zoom there is an owed user decision (memory ## Responsive). */
  .drawers--data .dd-lookup__input { font-size: 16px; }
}

/* ---------- Desktop >= 1024: 720 panel, column 624 @1920 ---------- */
@media (min-width: 1024px) {
  .drawers--data {
    --dd-g4: clamp(2px, calc(4px * var(--max-vw) / var(--vw-base)), 4px);
    --dd-g8: clamp(4px, calc(8px * var(--max-vw) / var(--vw-base)), 8px);
    --dd-g12: clamp(6px, calc(12px * var(--max-vw) / var(--vw-base)), 12px);
    --dd-g16: clamp(9px, calc(16px * var(--max-vw) / var(--vw-base)), 16px);
    --dd-g24: clamp(13px, calc(24px * var(--max-vw) / var(--vw-base)), 24px);
    --dd-chart-gap: var(--dd-g24);
    --dd-track-h: clamp(11px, calc(20px * var(--max-vw) / var(--vw-base)), 20px);
    --dd-year-w: clamp(43px, calc(80px * var(--max-vw) / var(--vw-base)), 80px);
    --dd-year-gap: var(--dd-g24);
    --dd-year: clamp(17px, calc(32px * var(--max-vw) / var(--vw-base)), 32px);
    --dd-lh-year: 1.1;
    --dd-ls-year: -0.01875em;
    --dd-spec-gap: clamp(7px, calc(14px * var(--max-vw) / var(--vw-base)), 14px);
    --dd-cell-pad: clamp(5px, calc(10px * var(--max-vw) / var(--vw-base)), 10px);
    --dd-colgap: var(--dd-g12);
    --dd-tiles-head-gap: clamp(7px, calc(14px * var(--max-vw) / var(--vw-base)), 14px);
    --dd-tiles-gap: var(--dd-g12);
    --dd-tile-pad: clamp(11px, calc(20px * var(--max-vw) / var(--vw-base)), 20px);
    --dd-tile-gap: clamp(10px, calc(18px * var(--max-vw) / var(--vw-base)), 18px);
    --dd-tile-fig: clamp(21px, calc(40px * var(--max-vw) / var(--vw-base)), 40px);   /* D draws 40 / 44 (D-DD-6) */
    --dd-lh-tile-fig: 1.1;
    --dd-ls-tile-fig: -0.015em;
    --dd-dot-gap: clamp(5px, calc(10px * var(--max-vw) / var(--vw-base)), 10px);
    --dd-lot-extra: 0px;
    --dd-lookup-h: clamp(30px, calc(56px * var(--max-vw) / var(--vw-base)), 56px);
    --dd-lookup-w: clamp(200px, calc(375px * var(--max-vw) / var(--vw-base)), 375px);   /* drawn 375, not the 624 column (D-DD-7) */
    --dd-lh-input: 1.3;
    --dd-link-size: clamp(9px, calc(16px * var(--max-vw) / var(--vw-base)), 16px);
    --dd-pubs-ratio: 624 / 229.89;
  }
  .drawers--data .dd-pubs--p5 { --dd-pubs-ratio: 624 / 240; }

  /* P12 table: D body 16 (M body-sm 13), columns 138 · 188 · 128 · 134 + gap 12 of 624 (D-DD-5) */
  .drawers--data .dd-spec__table {
    font-size: var(--text-body);
    line-height: var(--lh-body);
    letter-spacing: var(--ls-body);
  }
  .drawers--data .dd-spec__col--1 { width: 24.04%; }
  .drawers--data .dd-spec__col--2 { width: 32.05%; }
  .drawers--data .dd-spec__col--3 { width: 22.44%; }
  .drawers--data .dd-spec__col--4 { width: 21.47%; }

  /* P12 tile label: D body-medium 500 (M body-sm 400) */
  .drawers--data .dd-tile__label {
    font-weight: var(--weight-medium);
    font-size: var(--text-body);
    line-height: var(--lh-body);
    letter-spacing: var(--ls-body);
  }
}