/* ============================================================
   Dosage template v2 (Task #1951, Claude Design page, Oct 2026).
   Loaded by layouts/dosage.njk only. Every class is dz-*, on top of
   the shared .glass / .tpl-* pieces in templates.css and the Aurora
   tokens, so dark mode follows the tokens with no extra rules.
   Elizabeth's rules: the type shrinks before it wraps, no word is
   ever cut mid-word, and nothing scrolls sideways.
   ============================================================ */

/* ---- Hero ---------------------------------------------------------------- */
.dz-hero .tpl-hero-main { gap: 18px; }
.dz-h1 { font-size: clamp(34px, 7.4vw, 66px); line-height: 1.04; overflow-wrap: normal; word-break: normal; hyphens: manual; }
.dz-lede { font-size: clamp(17px, 1.8vw, 21px); color: var(--muted); max-width: 36em; }
.dz-eyebrow { color: var(--accent-text); }

/* ---- Short answer -------------------------------------------------------- */
.dz-answer { display: flex; flex-direction: column; gap: 16px; padding: 26px 28px 24px; margin-top: 6px; }
.dz-answer-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.dz-answer-top h2.ppl-eyebrow { font-size: 11px; line-height: 1.3; margin: 0; padding: 0; border: 0; }
.dz-badge {
  display: inline-flex; align-items: center; min-height: 26px; padding: 3px 12px; border-radius: 99px;
  font: 600 12px/1.3 var(--sans); color: var(--accent-text);
  background: color-mix(in oklch, var(--accent) 11%, transparent);
}
.dz-answer-h {
  margin: 0; font-family: var(--serif); font-weight: 500; color: var(--ink);
  font-size: clamp(21px, 2.5vw, 29px); line-height: 1.25; letter-spacing: -0.01em; text-wrap: balance;
}
.dz-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dz-tile {
  display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 14px 16px; border-radius: 14px;
  background: var(--bg); border: 1px solid var(--hairline);
}
.dz-tile.is-total { background: color-mix(in oklch, var(--accent) 10%, var(--bg)); border-color: color-mix(in oklch, var(--accent) 32%, transparent); }
.dz-tile-v { margin: 0; display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; color: var(--ink); }
.dz-tile-v b { font: 800 clamp(30px, 4.2vw, 44px)/1 var(--sans); letter-spacing: -0.04em; }
.dz-tile-v span { font: 600 15px/1 var(--sans); color: var(--muted); }
.dz-tile.is-total .dz-tile-v b { color: var(--accent-text); }
.dz-caveat { font-family: var(--serif); font-size: 16.5px; line-height: 1.55; color: var(--ink); }
.dz-caveat p { margin: 0; }
.dz-caveat p + p { margin-top: 8px; }
.dz-answer-links { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; font-size: 14px; font-weight: 600; }
.dz-answer-links a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in oklch, var(--accent) 40%, transparent); }

/* ---- Section rhythm ------------------------------------------------------ */
.dz-intro { margin: -8px 0 0; font-family: var(--serif); font-size: 17px; line-height: 1.55; color: var(--muted); max-width: 40em; }
.dz-body-p { margin: 0; font-family: var(--serif); font-size: 17px; line-height: 1.6; color: var(--ink); max-width: 40em; }
.dz-body-p a, .dz-card-more a, .dz-faq-item a, .dz-note a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.dz-flag {
  display: inline-flex; align-items: center; width: max-content; margin-top: 6px; padding: 2px 8px; border-radius: 99px;
  font: 700 10.5px/1.4 var(--sans); letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in oklch, var(--accent-text) 78%, var(--ink)); background: color-mix(in oklch, var(--accent) 12%, transparent);
}

/* The build wraps every table in .table-scroll, whose max-content width is
   right for wide prose tables but makes these two overflow: they are built
   to fit (fixed columns on desktop, stacked cards on phones). */
.table-scroll > .dz-table, .table-scroll > .dz-units { min-width: 0; width: 100%; }
.dz-chart .table-scroll, .dz-table-wrap .table-scroll { overflow: visible; background: none; }

/* ---- Dosage chart -------------------------------------------------------- */
.dz-chart { padding: 0; overflow: hidden; }
.dz-table { table-layout: fixed; }
.dz-table thead th:nth-child(1) { width: 19%; }
.dz-table thead th:nth-child(2) { width: 17%; }
.dz-table thead th:nth-child(3) { width: 28%; }
.dz-table thead th:nth-child(4) { width: 16%; }
.dz-table thead th:nth-child(5) { width: 20%; }
.dz-table th, .dz-table td { overflow-wrap: break-word; }
.dz-chart-head { display: flex; flex-direction: column; gap: 6px; padding: 22px 24px 16px; }
.dz-chart-title { margin: 0; font-family: var(--serif); font-size: clamp(20px, 2.2vw, 24px); line-height: 1.25; color: var(--ink); }
.dz-table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.45; }
.dz-table th, .dz-table td { text-align: left; vertical-align: top; padding: 14px 14px; border-top: 1px solid var(--hairline); color: var(--ink); }
.dz-table th, .dz-table td { padding-left: 10px; padding-right: 10px; }
.dz-table thead th { font: 700 10.5px/1.3 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); padding-top: 10px; padding-bottom: 10px; }
.dz-table th:first-child, .dz-table td:first-child { padding-left: 22px; }
.dz-table th:last-child, .dz-table td:last-child { padding-right: 24px; }
.dz-table tbody th { font-weight: 400; width: 20%; }
.dz-pat { display: block; font: 700 15px/1.3 var(--sans); color: var(--ink); }
.dz-sub { display: block; margin-top: 3px; font: 500 12.5px/1.35 var(--sans); color: var(--muted); }
.dz-num { font-family: var(--mono); font-size: 13px; letter-spacing: -0.03em; }
.dz-num .dz-sub { font-family: var(--mono); font-size: 11.5px; }
.dz-src a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; font-size: 13.5px; }
.dz-src { font-size: 13.5px; color: var(--muted); }
.dz-table tr.is-headline > * { background: color-mix(in oklch, var(--accent) 8%, transparent); }
.dz-table tr.is-headline .dz-pat { color: var(--accent-text); }

.dz-nowrap { white-space: nowrap; }

/* The pin preview sits centered under the buttons, lifted on a shadow. */
.dz-pin { display: flex; flex-direction: column; gap: 22px; }
.dz-pin-preview { display: block; align-self: center; width: 200px; margin-bottom: 8px; }
.dz-pin-preview img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--hairline); box-shadow: 0 18px 40px -12px rgb(40 30 80 / 0.35), 0 4px 12px -4px rgb(40 30 80 / 0.18); }

/* ---- Mixing helper ------------------------------------------------------- */
.dz-mix { display: flex; flex-direction: column; gap: 16px; }
.dz-mix-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.dz-mix-controls[hidden], .dz-mix-results[hidden], .dz-mix-card[hidden], .dz-mix-table[hidden] { display: none; }
.dz-seg-group { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dz-seg { display: flex; gap: 4px; padding: 4px; border-radius: 99px; background: var(--chip-bg); border: 1px solid var(--chip-border); }
.dz-seg button {
  flex: 1 1 0; min-width: 0; min-height: 40px; padding: 6px 10px; border: 0; border-radius: 99px; cursor: pointer;
  background: transparent; color: var(--muted); font: 600 14px/1.2 var(--sans);
}
.dz-seg button[aria-checked="true"] { background: var(--bg); color: var(--ink); box-shadow: 0 1px 3px rgba(20, 16, 40, 0.12); }
.dz-seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.dz-mix-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 18px 26px; align-items: center; padding: 22px 24px; }
.dz-mix-text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dz-mix-h { margin: 0; font-family: var(--serif); font-size: clamp(24px, 3vw, 32px); line-height: 1.15; color: var(--ink); }
.dz-mix-h b { font-family: var(--sans); font-weight: 800; letter-spacing: -0.02em; color: var(--accent-text); }
.dz-mix-sub { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.dz-syringe { margin: 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dz-syringe svg { display: block; width: 100%; height: auto; }
.dz-syringe figcaption { font-size: 12px; color: var(--muted); text-align: center; }
.dz-syr-barrel { fill: var(--bg); stroke: var(--muted); stroke-width: 1.2; }
.dz-syr-fill { fill: color-mix(in oklch, var(--accent) 45%, transparent); }
.dz-syr-plunger { fill: var(--ink); }
.dz-syr-rod { fill: var(--muted); }
.dz-syr-tick { stroke: var(--muted); stroke-width: 1; }
.dz-syr-num { font: 500 9px var(--mono); fill: var(--muted); text-anchor: middle; }

.dz-mix-table { padding: 0; overflow: hidden; border-radius: 16px; }
.dz-mix-table summary, .dz-faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; list-style: none;
}
.dz-mix-table summary { padding: 14px 20px; font: 600 14.5px/1.4 var(--sans); color: var(--ink); }
.dz-mix-table summary::-webkit-details-marker, .dz-faq-item summary::-webkit-details-marker, .dz-card summary::-webkit-details-marker { display: none; }
.dz-plus { position: relative; flex: 0 0 auto; width: 14px; height: 14px; }
.dz-plus::before, .dz-plus::after { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 2px; border-radius: 1px; background: var(--accent-text); transition: transform .2s; }
.dz-plus::after { transform: rotate(90deg); }
details[open] > summary .dz-plus::after { transform: rotate(0deg); }
.dz-table-wrap { padding: 0 8px 8px; }
.dz-units { margin: 0; width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.4; }
.dz-units th, .dz-units td { text-align: left; padding: 11px 12px; border-top: 1px solid var(--hairline); color: var(--ink); }
.dz-units thead th { font: 700 10.5px/1.3 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); border-top: 0; }
.dz-units td.amt { font-family: var(--mono); font-size: 13.5px; }
.dz-units caption { caption-side: top; text-align: left; padding: 0 12px 8px; font-size: 13px; color: var(--muted); }
.dz-units tr.is-pick td { background: color-mix(in oklch, var(--accent) 7%, transparent); }
.dz-units .dz-flag { margin: 0 0 0 6px; vertical-align: 1px; }
.dz-units td.is-over { color: var(--muted); }
.dz-note { font-size: 14px; }

/* ---- Vial life ----------------------------------------------------------- */
.dz-vials { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.dz-vial { display: flex; flex-direction: column; gap: 4px; padding: 18px; border-radius: 18px; min-width: 0; }
.dz-vial.is-capped { border-color: color-mix(in oklch, var(--accent) 45%, transparent); }
.dz-vial p { margin: 0; }
.dz-vial-days { display: flex; align-items: baseline; gap: 4px; color: var(--ink); }
.dz-vial-days b { font: 800 clamp(34px, 4vw, 42px)/1 var(--sans); letter-spacing: -0.04em; }
.dz-vial-days span { font: 600 15px/1 var(--sans); color: var(--muted); }
.dz-vial-name { margin-top: 6px !important; font: 700 13.5px/1.35 var(--sans); color: var(--ink); }
.dz-vial-how { font-size: 13px; line-height: 1.4; color: var(--muted); }
.dz-vial-note { margin-top: 6px !important; font-size: 12.5px; line-height: 1.45; color: var(--ink); }
.dz-clock { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.dz-clock-ic, .dz-disc-ic { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%; border: 2px solid var(--accent-text); position: relative; }
.dz-clock-ic::after { content: ""; position: absolute; left: 5px; top: 2px; width: 2px; height: 5px; background: var(--accent-text); box-shadow: 2px 3px 0 -0px transparent; }
.dz-disc-ic { border-color: var(--warn); }
.dz-disc-ic::after { content: "!"; position: absolute; inset: 0; display: grid; place-items: center; font: 800 10px/1 var(--sans); color: var(--warn); }

/* ---- Course timeline ----------------------------------------------------- */
.dz-course { display: flex; flex-direction: column; gap: 16px; padding: 22px 24px; }
.dz-course-row { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 8px 16px; align-items: center; }
.dz-course-name { margin: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--ink); }
.dz-course-name span { font-size: 12.5px; color: var(--muted); }
.dz-course-bar { position: relative; height: 30px; border-radius: 7px; background: color-mix(in oklch, var(--ink) 4%, transparent); overflow: hidden; }
.dz-course-bar > span { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; overflow: hidden; }
.dz-course-bar em { padding: 0 8px; font: 600 12px/1.2 var(--sans); font-style: normal; white-space: nowrap; }
.dz-seg-on { background: var(--accent); color: #fff; }
.dz-seg-on-maybe { background: repeating-linear-gradient(135deg, color-mix(in oklch, var(--accent) 55%, transparent) 0 5px, color-mix(in oklch, var(--accent) 22%, transparent) 5px 10px); color: var(--ink); }
.dz-seg-off { background: color-mix(in oklch, var(--good) 30%, transparent); color: var(--ink); }
.dz-seg-off-maybe { background: repeating-linear-gradient(135deg, color-mix(in oklch, var(--good) 30%, transparent) 0 5px, color-mix(in oklch, var(--good) 10%, transparent) 5px 10px); color: var(--ink); }
.dz-course-bar .dz-seg-on em { color: #fff; }
.dz-course-ruler { margin-top: -8px; }
.dz-course-ticks { position: relative; height: 16px; }
.dz-course-ticks span { position: absolute; top: 0; font: 500 11px/1 var(--mono); color: var(--muted); white-space: nowrap; transform: translateX(-2px); }
.dz-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--muted); }
.dz-legend li { display: flex; align-items: center; gap: 6px; }
.dz-key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }

/* ---- Plain-version cards ------------------------------------------------- */
.dz-plain { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.dz-card { padding: 0; border-radius: 18px; min-width: 0; }
.dz-card summary { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px; cursor: pointer; list-style: none; }
.dz-card h3 { margin: 0; font: 700 15.5px/1.35 var(--sans); color: var(--ink); }
.dz-card-sum { font-family: var(--serif); font-size: 15.5px; line-height: 1.55; color: var(--ink); }
.dz-more { font: 600 13px/1.3 var(--sans); color: var(--accent-text); }
.dz-more-c { display: none; }
.dz-card[open] .dz-more-o { display: none; }
.dz-card[open] .dz-more-c { display: inline; }
.dz-card-more { padding: 0 22px 20px; font-family: var(--serif); font-size: 15.5px; line-height: 1.6; color: var(--ink); }
.dz-card-more p { margin: 0; }
.dz-card-more p + p { margin-top: 10px; }
.dz-card-more ul { margin: 8px 0 0; padding-left: 18px; }
.dz-card-more li + li { margin-top: 6px; }
.dz-card summary:focus-visible, .dz-faq-item summary:focus-visible, .dz-mix-table summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 14px; }

/* ---- Questions ----------------------------------------------------------- */
.dz-faq { padding: 4px 22px; }
.dz-faq-item { border-bottom: 1px solid var(--hairline); }
.dz-faq-item:last-child { border-bottom: 0; }
.dz-faq-item summary { padding: 16px 0; }
.dz-faq-item h3 { margin: 0; font: 700 15.5px/1.4 var(--sans); color: var(--ink); }
.dz-faq-item p { margin: 0 0 18px; font-family: var(--serif); font-size: 16.5px; line-height: 1.6; color: var(--ink); max-width: 40em; }

/* ---- Sources, disclaimer, rail ------------------------------------------- */
.dz-sources { margin: 0; padding: 20px 24px 20px 46px; display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.dz-sources li { padding-left: 4px; scroll-margin-top: 96px; }
.dz-sources a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.dz-sources b { color: var(--ink); font-weight: 600; }
.dz-disclaimer { display: flex; gap: 10px; align-items: flex-start; margin: 56px 0 0; padding: 14px 18px; border-radius: 14px; background: var(--panel-alt); border: 1px solid var(--hairline); font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.dz-rail-h { margin: 0; font: 700 16px/1.3 var(--sans); color: var(--ink); }

/* ---- Tablet -------------------------------------------------------------- */
@media (max-width: 920px) {
  .dz-hero { max-width: none; }
}

/* ---- Phone --------------------------------------------------------------- */
@media (max-width: 640px) {
  .dz-answer { padding: 20px 18px; gap: 14px; }
  .dz-tiles { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .dz-tile { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; }
  .dz-tile .ppl-eyebrow { min-width: 0; }
  .dz-tile-v { flex-wrap: nowrap; flex: 0 0 auto; }
  .dz-tile-v b { font-size: 30px; }
  .dz-caveat { font-size: 16px; }

  /* The chart becomes one card per pattern, each cell labeled. */
  .dz-table thead { display: none; }
  .dz-table, .dz-table tbody, .dz-table tr, .dz-table th, .dz-table td { display: block; width: auto; }
  .dz-table tr { padding: 14px 18px; border-top: 1px solid var(--hairline); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 14px; }
  .dz-table tbody th, .dz-table td { padding: 0 !important; border: 0; }
  .dz-table tbody th { grid-column: 1 / -1; width: auto; }
  .dz-table td::before { content: attr(data-label); display: block; margin-bottom: 3px; font: 700 10px/1.3 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
  .dz-table td.dz-src { grid-column: 1 / -1; }
  .dz-table tr.is-headline > * { background: none; }
  .dz-table tr.is-headline { background: color-mix(in oklch, var(--accent) 8%, transparent); }
  .dz-chart-head { padding: 18px 18px 12px; }

  .dz-pin-preview { width: 180px; }

  .dz-mix-controls { grid-template-columns: minmax(0, 1fr); }
  .dz-mix-card { grid-template-columns: minmax(0, 1fr); padding: 18px; }
  .dz-mix-table summary { padding: 12px 16px; }
  /* Units tables: one card per water amount, each cell labeled. */
  .dz-units thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .dz-units, .dz-units tbody, .dz-units tr, .dz-units td { display: block; }
  .dz-units tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 12px; padding: 12px; border-top: 1px solid var(--hairline); }
  .dz-units td { padding: 0; border: 0; }
  .dz-units td::before { content: attr(data-label); display: block; margin-bottom: 2px; font: 700 10px/1.3 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
  .dz-units tr.is-pick td { background: none; }
  .dz-units tr.is-pick { background: color-mix(in oklch, var(--accent) 7%, transparent); border-radius: 10px; }

  .dz-course { padding: 18px; }
  .dz-course-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .dz-course-ruler > span { display: none; }
  .dz-course-ruler { margin-top: -4px; }

  .dz-plain { grid-template-columns: minmax(0, 1fr); }
  .dz-faq { padding: 2px 16px; }
  .dz-sources { padding: 16px 18px 16px 38px; }
}
.dz-body-link a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }