/* =========================================================================
   Variation 4 — The Clinical Brief
   Dense, clinical, Poppins-heavy. Playfair only for top-level page title.
   Counterpoint to variation 3.
   ========================================================================= */

@import url('/design-system/colors_and_type.css');

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; }

/* ---------- Accessibility ---------- */

/* Skip-to-main link — shown only when focused (keyboard nav).
   Lets screen-reader and keyboard users bypass the topbar + nav. */
.skip-to-main {
  position: absolute;
  top: -40px;
  left: 12px;
  background: var(--crimson);
  color: #fff;
  padding: 8px 14px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  z-index: 100;
  transition: top 120ms ease;
}
.skip-to-main:focus {
  top: 8px;
  outline: 2px solid var(--paper);
  outline-offset: 2px;
}

/* Visually hidden — screen readers only. Used for labels that need to be
   announced but not shown. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Global keyboard focus ring — applies to any interactive element that
   receives keyboard focus. `:focus-visible` targets keyboard focus only,
   so mouse users don't see persistent outlines. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--crimson);
  outline-offset: 2px;
  border-radius: 2px;
}
/* Form inputs already have a crimson-border focus state further down the
   stylesheet; leave that intact and suppress the outline there so we
   don't double up. */
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: none;
}

/* ---------- Global shell ---------- */
body {
  font-family: var(--font-body);
  color: var(--black-soft);
  background: var(--paper);
  line-height: 22px;
  font-weight: 300;
  font-size: 14px;
}

.brief-container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}

@media (max-width: 720px) {
  .brief-container { padding: 0 16px; }
}

/* =========================================================================
   Top bar — dense wordmark row
   ========================================================================= */

.topbar {
  border-bottom: 0.5px solid var(--olive);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 40;
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  padding-bottom: 16px;
  gap: 24px;
  flex-wrap: wrap;
}

.wordmark {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--olive);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Nav-bar wordmark image — uses the full brand lockup. 22px height keeps the
   lockup readable (drops + "femme / FORTIFIED") while fitting inside the
   topbar's existing vertical envelope. */
.wordmark-img {
  height: 22px;
  width: auto;
  display: block;
}

/* Footer-scoped wordmark image — same asset, noticeably larger since the
   footer has more vertical room and works better as a signoff moment. */
.site-footer .wordmark-img {
  height: 44px;
}

/* The separator carries semantic meaning ("Femme Fortified / Iron Lab
   Explainer") so it needs to be readable. olive-40 (≈ 2.4:1 on white)
   fails WCAG AA; olive-60 (≈ 3.6:1) passes AA Large Text and keeps the
   visual hierarchy lighter than the full-strength wordmark color. */
.wordmark .sep {
  color: var(--olive-60);
  margin: 0;
  font-weight: 300;
}

.topbar-nav {
  display: flex;
  gap: 24px;
  align-items: center;
}

.topbar-nav a {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--olive);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 120ms ease, border-color 120ms ease;
}
.topbar-nav a:hover { color: var(--crimson); border-bottom-color: var(--crimson); }

.topbar-meta {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 11px;
  color: var(--olive-60);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@media (max-width: 720px) {
  .topbar-inner { padding-top: 12px; padding-bottom: 12px; gap: 8px; }
  .topbar-nav {
    order: 3;
    flex-basis: 100%;
    gap: 16px;
    padding-top: 8px;
    margin-top: 4px;
    border-top: 0.5px solid var(--olive-10);
    flex-wrap: wrap;
  }
  .topbar-nav a { font-size: 11px; letter-spacing: 0.04em; }
  .topbar-meta { font-size: 10px; text-align: right; max-width: 45%; }
}

@media (max-width: 420px) {
  .topbar-meta { display: none; }
}

/* =========================================================================
   Page title block (top of every page). Playfair appears ONLY here.
   ========================================================================= */

.page-title-block {
  padding: 48px 0 32px 0;
  border-bottom: 0.5px solid var(--olive);
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--crimson);
  margin: 0 0 16px 0;
}

.page-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 52px;
  line-height: 58px;
  letter-spacing: -0.01em;
  color: var(--olive);
  margin: 0;
  max-width: 800px;
}

.page-deck {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 15px;
  line-height: 24px;
  color: var(--black-soft);
  max-width: 620px;
  margin: 16px 0 0 0;
}

@media (max-width: 720px) {
  .page-title { font-size: 34px; line-height: 40px; }
  .page-title-block { padding: 32px 0 24px 0; }
}

/* =========================================================================
   Section headers (Poppins only)
   ========================================================================= */

.section {
  padding: 32px 0;
  border-bottom: 0.5px solid var(--olive-40);
}

.section:last-of-type { border-bottom: none; }

.section-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--olive);
  margin: 0 0 4px 0;
}

.section-title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 22px;
  line-height: 30px;
  color: var(--olive);
  margin: 0 0 16px 0;
  letter-spacing: -0.005em;
}

.section-sub {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 13px;
  line-height: 20px;
  color: var(--olive-60);
  margin: 0 0 24px 0;
}

.subhead {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--olive);
  margin: 24px 0 8px 0;
}

/* =========================================================================
   Landing layout
   ========================================================================= */

.hero {
  padding: 64px 0 48px 0;
  border-bottom: 0.5px solid var(--olive);
  position: relative;
}

.hero-drop {
  position: absolute;
  top: 48px;
  right: 0;
  width: 56px;
  opacity: 0.9;
}

.hero-inner {
  max-width: 820px;
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 56px;
  line-height: 62px;
  letter-spacing: -0.015em;
  color: var(--olive);
  margin: 16px 0 0 0;
}

.hero-deck {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: var(--black-soft);
  max-width: 640px;
  margin: 24px 0;
}

.cta-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  flex-wrap: wrap;
}

.btn-primary {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--olive);
  padding: 14px 24px;
  border-radius: 2px;
  text-decoration: none;
  display: inline-block;
  border: 0.5px solid var(--olive);
  transition: background-color 120ms ease;
}
.btn-primary:hover { background: #2f2f0b; }
.btn-primary:disabled, .btn-primary.is-disabled {
  background: var(--olive-40);
  border-color: var(--olive-40);
  cursor: not-allowed;
}

.btn-secondary {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--olive);
  background: var(--paper);
  padding: 14px 24px;
  border: 0.5px solid var(--olive);
  border-radius: 2px;
  text-decoration: none;
  display: inline-block;
  transition: background-color 120ms ease, color 120ms ease;
}
.btn-secondary:hover { background: var(--olive); color: var(--paper); }

.btn-fine {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 12px;
  color: var(--olive-60);
  margin-top: 8px;
}

/* Trust strip — three dense columns */
.trust-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 0.5px solid var(--olive);
  border-bottom: 0.5px solid var(--olive);
}

.trust-cell {
  padding: 24px;
  border-right: 0.5px solid var(--olive-40);
}
.trust-cell:last-child { border-right: none; }

.trust-cell .label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--crimson);
  margin: 0 0 8px 0;
}

.trust-cell .title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  color: var(--olive);
  margin: 0 0 8px 0;
}

.trust-cell p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 13px;
  line-height: 20px;
  color: var(--black-soft);
  margin: 0;
}

@media (max-width: 720px) {
  .trust-strip { grid-template-columns: 1fr; }
  .trust-cell { border-right: none; border-bottom: 0.5px solid var(--olive-40); }
  .trust-cell:last-child { border-bottom: none; }
}

/* Three-column info */
.col-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.col-3 .col {
  border-top: 0.5px solid var(--olive-40);
  padding-top: 16px;
}

.col-3 h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--olive);
  margin: 0 0 12px 0;
}

.col-3 p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 13px;
  line-height: 20px;
  color: var(--black-soft);
  margin: 0;
}

@media (max-width: 720px) {
  .col-3 { grid-template-columns: 1fr; gap: 24px; }
}

/* Steps list */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  border-top: 0.5px solid var(--olive-40);
  border-bottom: 0.5px solid var(--olive-40);
  padding: 24px 0;
}
.steps .step-num {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 24px;
  color: var(--crimson);
  letter-spacing: -0.01em;
}
.steps .step-title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  color: var(--olive);
  margin: 8px 0;
}
.steps p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 13px;
  line-height: 20px;
  margin: 0;
}
@media (max-width: 720px) {
  .steps { grid-template-columns: 1fr; }
}

/* Pull quote */
.pullquote {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: 22px;
  line-height: 32px;
  color: var(--olive);
  border-left: 2px solid var(--crimson);
  padding-left: 24px;
  margin: 0 0 16px 0;
  max-width: 720px;
}
.pullquote-attr {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--olive-60);
  padding-left: 24px;
}

/* FAQ accordion */
.faq-item {
  border-top: 0.5px solid var(--olive-40);
  padding: 16px 0;
}
.faq-item:last-child { border-bottom: 0.5px solid var(--olive-40); }
.faq-item summary {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  color: var(--olive);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--crimson);
  font-size: 18px;
}
.faq-item[open] summary::after { content: '−'; }
.faq-item p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 13px;
  line-height: 20px;
  margin: 12px 0 0 0;
  color: var(--black-soft);
}

/* Footer */
.site-footer {
  border-top: 0.5px solid var(--olive);
  margin-top: 48px;
  padding: 32px 0 48px 0;
}

/* Footer — two-column grid:
     LEFT  (.footer-brand):    wordmark + subscribe form + disclaimer
                               (identity + action + legal, vertically stacked)
     RIGHT (.footer-grid > nav): vertical nav links (one per line, matches
                                  the left column's vertical density)
   Both columns top-aligned. Stacks at narrow widths with the brand group
   in natural order so the subscribe form stays prominent on mobile. */
.site-footer .footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.site-footer .footer-brand {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
/* Direct-child nav within the grid is the right-column site map. Stacked
   vertically so it absorbs the same vertical height as the left column,
   and right-aligned (text-align: right) so the links hug the right edge
   of the page. The brand column flushes left, the nav flushes right, and
   the gap in the middle reads as deliberate breathing room — the standard
   editorial-footer pattern (The Atlantic, Vox, Wired). */
.site-footer .footer-grid > nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
  text-align: right;
}
.site-footer .footer-grid > nav a {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--olive);
  text-decoration: none;
}
.site-footer .footer-grid > nav a:hover { color: var(--crimson); }
@media (max-width: 720px) {
  .site-footer .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  /* On mobile, single-column layout — nav goes back to left-aligned
     since "right-aligned" loses meaning in a stack. */
  .site-footer .footer-grid > nav {
    align-items: flex-start;
    text-align: left;
  }
}
.site-footer .wordmark { font-size: 12px; }
.site-footer nav {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.site-footer nav a {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--olive);
  text-decoration: none;
}
.site-footer nav a:hover { color: var(--crimson); }
.site-footer .small {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 11px;
  color: var(--olive-60);
  line-height: 18px;
  max-width: 720px;
}

/* =========================================================================
   Wizard
   ========================================================================= */

.progress-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0 12px 0;
  border-bottom: 0.5px solid var(--olive-40);
  gap: 16px;
}
.progress-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--olive);
}
.progress-bar {
  flex: 1;
  max-width: 300px;
  height: 2px;
  background: var(--olive-10);
  position: relative;
}
.progress-bar > span {
  position: absolute;
  top: 0; left: 0;
  height: 2px;
  background: var(--crimson);
}

.unit-toggle {
  display: inline-flex;
  border: 0.5px solid var(--olive);
  border-radius: 2px;
  overflow: hidden;
}
.unit-toggle button {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 12px;
  background: var(--paper);
  color: var(--olive);
  border-right: 0.5px solid var(--olive);
  transition: background 120ms ease, color 120ms ease;
}
.unit-toggle button:last-child { border-right: none; }
.unit-toggle button.is-active {
  background: var(--olive);
  color: var(--paper);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 32px;
}

@media (max-width: 720px) {
  .form-grid { grid-template-columns: 1fr; }
}

.field { display: block; }

.field label, .field .lbl {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--olive);
  display: block;
  margin-bottom: 4px;
}

.field .hint {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 11px;
  line-height: 16px;
  color: var(--olive-60);
  margin-top: 4px;
}

/* Required-field asterisk. Applied to labels and .section-label alongside
   any field the form treats as required. aria-hidden="true" on the element. */
.req-mark {
  color: var(--crimson);
  font-weight: 600;
  margin-left: 2px;
}

.field input[type="text"],
.field input[type="number"],
.field input[type="email"],
.field input[type="date"],
.field select {
  width: 100%;
  padding: 10px 12px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  color: var(--black-soft);
  background: var(--paper);
  border: 0.5px solid var(--olive-60);
  border-radius: 2px;
  transition: border-color 120ms ease;
}
.field input:focus, .field select:focus {
  outline: none;
  border-color: var(--crimson);
  border-width: 1px;
}

/* Hide native number-input spinner arrows — the wizard's lab values are
   entered by typing (with min/max validation), not by stepping. Removes the
   ambiguity where the field looks "arrow-only" even though typing works. */
.field input[type="number"]::-webkit-outer-spin-button,
.field input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.field input[type="number"] {
  -moz-appearance: textfield;
}

.input-with-unit {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: stretch;
}
.input-with-unit input {
  border-right: none;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-with-unit .unit {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  color: var(--crimson);
  padding: 0 12px;
  border: 0.5px solid var(--olive-60);
  border-left: none;
  display: flex;
  align-items: center;
  background: var(--paper);
}

.radio-group {
  display: flex;
  gap: 0;
  border: 0.5px solid var(--olive-60);
  border-radius: 2px;
  overflow: hidden;
  /* Reset native <fieldset> chrome — radio groups now use semantic
     fieldset/legend (a11y), but we keep our own border + layout. */
  margin: 0;
  padding: 0;
  min-width: 0;
}
.radio-group label {
  flex: 1;
  padding: 10px 12px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--olive);
  background: var(--paper);
  border-right: 0.5px solid var(--olive-60);
  cursor: pointer;
  text-align: center;
  margin: 0;
}
.radio-group label:last-child { border-right: none; }
.radio-group input[type="radio"] { display: none; }
.radio-group input[type="radio"]:checked + span {
  color: var(--paper);
}
.radio-group label:has(input:checked) {
  background: var(--olive);
  color: var(--paper);
}

.radio-stack {
  display: flex;
  flex-direction: column;
  border: 0.5px solid var(--olive-60);
  border-radius: 2px;
  overflow: hidden;
  /* Reset native <fieldset> chrome — see .radio-group note above. */
  margin: 0;
  padding: 0;
  min-width: 0;
}
.radio-stack label {
  padding: 10px 12px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  color: var(--olive);
  background: var(--paper);
  border-bottom: 0.5px solid var(--olive-60);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}
.radio-stack label:last-child { border-bottom: none; }
.radio-stack input[type="radio"] { accent-color: var(--olive); }
.radio-stack label:has(input:checked) {
  background: var(--pink-soft);
  color: var(--olive);
  font-weight: 500;
}

.checkbox-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  border: 0.5px solid var(--olive-60);
  border-radius: 2px;
  padding: 12px;
}
.checkbox-list label {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  color: var(--olive);
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
}
.checkbox-list input[type="checkbox"] { accent-color: var(--crimson); }

@media (max-width: 720px) {
  .checkbox-list { grid-template-columns: 1fr; }
}

/* Collapsible advanced sections */
details.collapse {
  border-top: 0.5px solid var(--olive-40);
  padding: 16px 0;
}
details.collapse summary {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--olive);
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
details.collapse summary::-webkit-details-marker { display: none; }
details.collapse summary::after {
  content: '＋';
  color: var(--crimson);
  font-size: 14px;
}
details.collapse[open] summary::after { content: '−'; }
details.collapse > .collapse-body {
  padding-top: 16px;
}

.inline-drawer {
  background: var(--pink-soft);
  border-left: 2px solid var(--crimson);
  padding: 12px 16px;
  margin: 8px 0 12px 0;
  display: none;
}
.inline-drawer.is-open { display: block; }
.inline-drawer p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 13px;
  line-height: 20px;
  color: var(--olive);
  margin: 0 0 8px 0;
}
.inline-drawer p:last-child { margin-bottom: 0; }
.drawer-link {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  color: var(--olive);
  background: none;
  border: none;
  padding: 0;
  text-decoration: underline;
  text-decoration-color: var(--crimson);
  cursor: pointer;
}
.drawer-link:hover { color: var(--crimson); }

.button-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 24px;
  border-top: 0.5px solid var(--olive-40);
  margin-top: 24px;
}

/* =========================================================================
   Results page — two-column with sidebar
   ========================================================================= */

.results-layout {
  display: grid;
  grid-template-columns: 120px 1fr 280px;
  gap: 32px;
  align-items: start;
  padding: 24px 0 48px 0;
}
/* Grid items get `min-width: auto` by default, which expands the track to
   the item's intrinsic min-content — on mobile this lets the lab-table and
   gradient-bars push the center column past the viewport. Setting min-width
   to 0 lets the column shrink to its parent and defers overflow handling to
   the inner `.lab-table-wrap` (which has `overflow-x: auto` for the table
   case). The gradient-bars are width:100% so they collapse cleanly once the
   column collapses. */
.results-layout > * { min-width: 0; }

@media (max-width: 1000px) {
  .results-layout { grid-template-columns: 1fr; }
  .results-sidebar-nav { display: none !important; }
  .results-rhs { display: block; }
}

.results-sidebar-nav {
  position: sticky;
  top: 80px;
  border-top: 0.5px solid var(--olive);
  padding-top: 16px;
}
.results-sidebar-nav .label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--olive-60);
  margin-bottom: 12px;
}
.results-sidebar-nav ol {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: navstep;
}
.results-sidebar-nav ol li {
  counter-increment: navstep;
  padding: 6px 0;
  border-bottom: 0.5px solid var(--olive-10);
}
.results-sidebar-nav ol li:last-child { border-bottom: none; }
.results-sidebar-nav ol li a {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 11px;
  color: var(--olive);
  text-decoration: none;
  display: block;
  transition: color 120ms ease;
}
.results-sidebar-nav ol li a::before {
  content: "0" counter(navstep) ".";
  color: var(--crimson);
  font-weight: 500;
  margin-right: 6px;
}
.results-sidebar-nav ol li a:hover { color: var(--crimson); }

/* Right-hand callout column */
.results-rhs { display: flex; flex-direction: column; gap: 16px; }

.sidebar-callout {
  background: var(--pink-soft);
  border-radius: 8px;
  padding: 16px;
  border-left: 2px solid var(--crimson);
}
.sidebar-callout .title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--crimson);
  margin: 0 0 8px 0;
}
.sidebar-callout p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 12px;
  line-height: 18px;
  color: var(--olive);
  margin: 0 0 8px 0;
}
.sidebar-callout p:last-child { margin-bottom: 0; }
.sidebar-callout strong { font-weight: 600; }

.sidebar-card {
  border: 0.5px solid var(--olive);
  padding: 16px;
}
.sidebar-card .title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--olive);
  margin: 0 0 8px 0;
  padding-bottom: 8px;
  border-bottom: 0.5px solid var(--olive-40);
}
.sidebar-card dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
  margin: 0;
}
.sidebar-card dt {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 11px;
  color: var(--olive-60);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.sidebar-card dd {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  color: var(--olive);
  margin: 0;
}

/* Structured abstract at top of results */
.abstract {
  border-top: 1px solid var(--olive);
  border-bottom: 1px solid var(--olive);
  padding: 24px 0;
  margin-bottom: 24px;
}
.abstract dl {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 12px 24px;
  margin: 0;
}
.abstract dt {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--olive);
  padding-top: 2px;
}
.abstract dd {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 14px;
  line-height: 22px;
  color: var(--black-soft);
  margin: 0;
}
.abstract dd strong { font-weight: 600; color: var(--olive); }

@media (max-width: 720px) {
  .abstract dl { grid-template-columns: 1fr; gap: 4px 0; }
  .abstract dt { padding-top: 8px; }
}

/* Confidence meter — visual fill bar + tier label + "what would sharpen"
   hint. Lives in the Confidence section (#confidence) below the per-lab
   table, stacked above the pattern-specific confidence paragraph. The
   abstract summary at the top of the page does not render the meter —
   only the tier label in text — because the meter carries more weight
   when it accompanies the fuller explanation down-page. */
.confidence-meter {
  margin: 0 0 20px 0;
  max-width: 720px;
}
.confidence-bar {
  width: 100%;
  max-width: 420px;
  height: 10px;
  background: var(--olive-10, rgba(116, 131, 84, 0.15));
  border-radius: 5px;
  overflow: hidden;
  margin: 0 0 8px 0;
}
.confidence-bar-fill {
  height: 100%;
  transition: width 300ms ease, background-color 120ms ease;
}
.confidence-bar-fill.confidence-low { background: var(--crimson); }
.confidence-bar-fill.confidence-moderate { background: var(--olive-60, rgba(116, 131, 84, 0.60)); }
.confidence-bar-fill.confidence-high { background: var(--olive); }

.confidence-meter-label {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--olive);
  margin: 0;
}
.confidence-meter-label strong { font-weight: 600; }

.confidence-reason {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 13px;
  line-height: 19px;
  color: var(--ink);
  margin: 4px 0 0 0;
}

.confidence-sharpen {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 12px;
  line-height: 17px;
  color: var(--olive-60, rgba(116, 131, 84, 0.70));
  margin: 2px 0 0 0;
  font-style: italic;
}

/* Evidence badges */
.badge {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 6px;
  border-radius: 2px;
  vertical-align: middle;
  line-height: 1;
  white-space: nowrap;
  cursor: help;
  position: relative;
}
.badge.high-quality { background: var(--olive); color: var(--paper); }
.badge.preliminary { background: var(--paper); color: var(--olive); border: 0.5px solid var(--olive); }
.badge.consensus { background: var(--crimson); color: var(--paper); }

/* Inline severity dot */
.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 6px;
  cursor: help;
  position: relative;
}
.dot.normal { background: var(--sage); }
.dot.watch { background: #D9A65E; }
.dot.urgent { background: var(--crimson); }

/* Tooltips (simple, keyboard+hover) */
[data-tip] { position: relative; }
[data-tip]:hover::after,
[data-tip]:focus::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(100% + 6px);
  background: var(--olive);
  color: var(--paper);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 11px;
  line-height: 15px;
  letter-spacing: 0.02em;
  padding: 6px 10px;
  border-radius: 2px;
  /* Let long citations wrap instead of running off the viewport. The tooltip
     is only as wide as its content needs, capped at 280px so long badge
     citations stay on two or three lines. */
  white-space: normal;
  width: max-content;
  max-width: 280px;
  text-align: center;
  z-index: 50;
  opacity: 0;
  animation: tipfade 150ms ease forwards;
  pointer-events: none;
  text-transform: none;
}
@keyframes tipfade { to { opacity: 1; } }

/* Data table */
.lab-table-wrap {
  max-width: 100%;
}
/* Horizontal scroll only on narrow viewports where the 7-column table needs
   to overflow. On desktop, keep overflow visible so hover tooltips on the
   evidence badges can render above the table without being clipped. */
@media (max-width: 720px) {
  .lab-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .lab-table { min-width: 640px; }
}
.lab-table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--olive);
  border-bottom: 1px solid var(--olive);
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 18px;
}
.lab-table caption {
  text-align: left;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 12px;
  color: var(--olive-60);
  padding-bottom: 8px;
}
.lab-table th {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--olive);
  text-align: left;
  padding: 10px 8px;
  border-bottom: 0.5px solid var(--olive);
  vertical-align: bottom;
  background: var(--paper);
}
.lab-table td {
  padding: 10px 8px;
  border-bottom: 0.5px solid var(--olive-20);
  vertical-align: top;
  color: var(--black-soft);
}
.lab-table tr:last-child td { border-bottom: none; }
.lab-table tbody tr { transition: background-color 120ms ease; }
.lab-table tbody tr:hover { background: rgba(252, 228, 231, 0.35); }

.lab-table td .marker {
  font-weight: 500;
  color: var(--olive);
  display: flex;
  align-items: center;
}
.lab-table td.num {
  font-family: var(--font-body);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--olive);
}
.lab-table td.num strong { color: var(--crimson); font-weight: 600; }
.lab-table .cell-interp {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 12px;
  line-height: 17px;
  color: var(--black-soft);
}

/* Disclosure row inside tables */
.inline-disclaimer {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 11px;
  color: var(--olive-60);
  font-style: italic;
  margin: 8px 0 0 0;
}

/* Definition list for symptoms */
.sym-list {
  border-top: 0.5px solid var(--olive-40);
  margin-top: 16px;
  padding-top: 12px;
}
.sym-list .sym-row {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 0.5px solid var(--olive-10);
  align-items: start;
}
.sym-list .sym-row:last-child { border-bottom: none; }
.sym-list .sym-name {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  color: var(--olive);
}
.sym-list .sym-note {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 13px;
  line-height: 19px;
  color: var(--black-soft);
}
@media (max-width: 720px) {
  .sym-list .sym-row { grid-template-columns: 1fr; }
  .sym-list .sym-name { margin-bottom: 2px; }
}

/* Question prompt list */
.qpl {
  border-top: 0.5px solid var(--olive-40);
  padding-top: 12px;
  margin-top: 12px;
  counter-reset: qpl;
}
.qpl li {
  list-style: none;
  counter-increment: qpl;
  padding: 10px 0 10px 32px;
  position: relative;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 13px;
  line-height: 20px;
  color: var(--black-soft);
  border-bottom: 0.5px solid var(--olive-10);
}
.qpl li::before {
  content: counter(qpl, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  color: var(--crimson);
  letter-spacing: 0.08em;
}
.qpl li strong { color: var(--olive); font-weight: 600; }

/* Inside-entry paragraphs (question + explainer) for rendered QPL */
.qpl .qpl-q {
  margin: 0 0 4px 0;
}
.qpl .qpl-a {
  margin: 0;
  color: var(--black-soft);
}

/* Symptom-integration section — hides entirely when the user reported no
   symptoms or the pattern has no symptom copy. */
#symptoms[hidden] {
  display: none;
}

/* "Keep learning" off-ramp (PRD §2.6 #8a) — matched FF newsletter issues
   shown after the next-steps section, before the PDF section. The first
   item is the closest fit ("Read this next"); the others are situational
   picks. The list is populated at runtime by results.ts. */
#keep-learning[hidden] { display: none; }
.keep-learning-list {
  list-style: none;
  padding: 0;
  margin: 16px 0 0 0;
  display: grid;
  gap: 12px;
}
.keep-learning-item {
  border: 0.5px solid var(--olive-40);
  border-radius: 8px;
  padding: 14px 20px;
  background: var(--paper);
  transition: border-color 120ms ease, background 120ms ease;
  position: relative;
}
.keep-learning-item.is-primary {
  border-color: var(--crimson);
  background: var(--cream);
}
/* Drop motif on the primary card — small, top-right, signals "this is the
   one we're pointing you at" and ties the section to the FF brand world
   (the hero, the abstract block, etc. all use the drop). */
.keep-learning-item.is-primary::after {
  content: '';
  position: absolute;
  top: 14px;
  right: 18px;
  width: 28px;
  height: 28px;
  background: url('/design-system/drop-single.png') center/contain no-repeat;
  opacity: 0.85;
  pointer-events: none;
}
.keep-learning-label {
  margin: 0 0 6px 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--olive);
}
.keep-learning-item.is-primary .keep-learning-label {
  color: var(--crimson);
}
/* Link titles use Playfair Display (the editorial display font) so they
   read as "publication titles" rather than as "list of links". Sized close
   to body text so the cards read as list items inside the page rather than
   as a separate hero section — Playfair carries enough optical weight at
   16/22 to keep the editorial register without overpowering the surrounding
   sans-serif copy. */
.keep-learning-link {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--olive-40);
  padding-bottom: 1px;
  /* Right-pad on the primary card so the title text doesn't run under the
     drop-motif accent. */
  display: inline-block;
  max-width: calc(100% - 12px);
  transition: border-color 120ms ease, color 120ms ease;
}
.keep-learning-item.is-primary .keep-learning-link {
  max-width: calc(100% - 40px);
}
.keep-learning-link:hover,
.keep-learning-link:focus-visible {
  color: var(--crimson);
  border-bottom-color: var(--crimson);
}

/* "What Femme Fortified is" — lead line + trust signals */
.ff-lead {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 20px;
  line-height: 30px;
  color: var(--olive);
  max-width: 720px;
  margin: 0 0 20px 0;
}
.ff-lead .ff-accent {
  color: inherit;
  font-weight: inherit;
  text-decoration: underline;
  text-decoration-color: var(--crimson);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.ff-signals {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--olive);
}
.ff-signals li {
  position: relative;
  padding: 0 18px 0 0;
  margin-right: 18px;
}
.ff-signals li:not(:last-child)::after {
  content: "·";
  position: absolute;
  right: -4px;
  top: 0;
  color: var(--crimson);
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
}
.ff-signals li:last-child {
  padding-right: 0;
  margin-right: 0;
}
@media (max-width: 720px) {
  .ff-lead { font-size: 17px; line-height: 26px; }
  .ff-signals { flex-direction: column; gap: 6px; }
  .ff-signals li { padding: 0; margin: 0; }
  .ff-signals li::after { display: none; }
}

/* "Who this is for" — 2x2 card grid */
.who-for-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 820px;
}
@media (max-width: 720px) {
  .who-for-grid { grid-template-columns: 1fr; }
}
.who-for-cell {
  border: 0.5px solid var(--olive-40);
  border-left: 3px solid var(--crimson);
  padding: 18px 22px 18px 20px;
  background: var(--paper);
}
.who-for-cell .who-for-title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--olive);
  margin: 0 0 8px 0;
}
.who-for-cell p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 13px;
  line-height: 20px;
  color: var(--black-soft);
  margin: 0;
}

/* Evidence page — per-marker and per-pattern blocks */
.marker-evidence {
  display: grid;
  gap: 32px;
  max-width: 920px;
}
/* Same min-width:0 fix as .results-layout — without it, the wrapped
   lab-tables inside marker-block expand the grid track on mobile and
   force horizontal page overflow. */
.marker-evidence > * { min-width: 0; }
.marker-block h3.marker-h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.04em;
  color: var(--olive);
  margin: 0 0 8px 0;
  padding-bottom: 6px;
  border-bottom: 0.5px solid var(--olive-40);
}
.marker-block p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 13px;
  line-height: 20px;
  max-width: 820px;
  margin: 0 0 10px 0;
}
.evidence-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0 0;
  max-width: 820px;
}
.evidence-list li {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 13px;
  line-height: 20px;
  padding: 6px 0;
  border-bottom: 0.5px solid var(--olive-10);
}
.evidence-list li:last-child { border-bottom: none; }

.pattern-evidence-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 920px;
}
@media (max-width: 720px) {
  .pattern-evidence-list { grid-template-columns: 1fr; }
}
.pattern-evidence-card {
  border: 0.5px solid var(--olive-40);
  padding: 14px 18px;
  background: var(--paper);
}
.pattern-evidence-card .pattern-layperson-name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--olive);
  margin: 0 0 4px 0;
}
.pattern-evidence-card .pattern-research-term {
  font-family: var(--font-body);
  font-weight: 300;
  font-style: italic;
  font-size: 12px;
  color: var(--olive-60);
  margin: 0 0 10px 0;
}
.pattern-evidence-card .pattern-citations,
.pattern-evidence-card .pattern-manifest {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 12px;
  line-height: 18px;
  color: var(--black-soft);
  margin: 0 0 4px 0;
}
.pattern-evidence-card .pattern-citations strong,
.pattern-evidence-card .pattern-manifest strong {
  color: var(--olive);
  font-weight: 600;
}

/* PDF / email consent — make the double opt-in explicit pre-submit */
.pdf-consent-lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  color: var(--olive);
  margin: 20px 0 8px 0;
}
.pdf-consent-list {
  margin: 0 0 20px 0;
  padding-left: 20px;
  list-style: none;
  max-width: 720px;
}
.pdf-consent-list li {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 13px;
  line-height: 20px;
  color: var(--black-soft);
  margin: 0 0 8px 0;
  position: relative;
  padding-left: 16px;
}
.pdf-consent-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  background: var(--crimson);
  border-radius: 50%;
}

/* Email form */
.email-form {
  display: flex;
  gap: 8px;
  margin: 16px 0 8px 0;
  flex-wrap: wrap;
}
.email-form input[type="email"] {
  flex: 1;
  min-width: 200px;
  padding: 12px;
  font-family: var(--font-body);
  font-size: 13px;
  border: 0.5px solid var(--olive);
  border-radius: 2px;
}
.form-success {
  border: 0.5px solid var(--olive);
  padding: 16px;
  background: var(--pink-soft);
}
.form-success .title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--olive);
  margin: 0 0 8px 0;
}
.form-success p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 13px;
  line-height: 20px;
  color: var(--black-soft);
  margin: 0 0 8px 0;
}

/* Urgent severity banner — rendered only when classification severity is urgent */
.urgent-banner {
  border: 1px solid var(--crimson);
  background: var(--crimson);
  color: #fff;
  padding: 14px 18px;
  margin: 0 0 16px 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 13px;
  line-height: 20px;
}
.urgent-banner strong {
  font-weight: 600;
  display: block;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.urgent-banner[hidden] {
  display: none;
}

/* Gradient rows respect the hidden attribute when JS hides bars whose value
   the user did not enter. */
.gradient-row[hidden] {
  display: none;
}

/* Medium disclaimer box (top of results) */
.medium-disclaimer {
  border: 0.5px solid var(--crimson);
  background: var(--pink-soft);
  padding: 12px 16px;
  margin: 0 0 24px 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 12px;
  line-height: 19px;
  color: var(--olive);
}
.medium-disclaimer strong {
  font-weight: 600;
  color: var(--crimson);
  display: block;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

/* Short inline disclaimer under section headers */
.short-disclaimer {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 11px;
  font-style: italic;
  color: var(--olive-60);
  margin: -12px 0 16px 0;
}

/* How-it-works diagram */
.flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 0.5px solid var(--olive);
  margin: 16px 0;
}
.flow-step {
  padding: 16px;
  border-right: 0.5px solid var(--olive-40);
  position: relative;
}
.flow-step:last-child { border-right: none; }
.flow-step .n {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--crimson);
}
.flow-step .t {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  color: var(--olive);
  margin: 4px 0 8px 0;
}
.flow-step p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 12px;
  line-height: 18px;
  color: var(--black-soft);
  margin: 0;
}

@media (max-width: 720px) {
  .flow { grid-template-columns: 1fr; }
  .flow-step { border-right: none; border-bottom: 0.5px solid var(--olive-40); }
  .flow-step:last-child { border-bottom: none; }
}

/* PDF preview */
.pdf-canvas {
  background: var(--paper);
  border: 0.5px solid var(--olive);
  box-shadow: 0 1px 3px rgba(69,69,17,0.08), 0 12px 32px rgba(69,69,17,0.08);
  padding: 48px;
  max-width: 720px;
  margin: 32px auto;
  font-family: var(--font-body);
}
.pdf-page {
  padding-bottom: 32px;
  margin-bottom: 32px;
  border-bottom: 0.5px solid var(--olive-40);
}
.pdf-page:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.pdf-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 0.5px solid var(--olive);
  padding-bottom: 16px;
  margin-bottom: 24px;
}
.pdf-head .mark {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--olive);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pdf-head .mark .wordmark-img {
  height: 18px;
  width: auto;
  display: block;
}
.pdf-head .mark .sep {
  color: var(--olive-60);
  font-weight: 300;
}
.pdf-head .meta {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 10px;
  color: var(--olive-60);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pdf-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  line-height: 36px;
  color: var(--olive);
  margin: 0 0 8px 0;
}
.pdf-sub {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  color: var(--olive-60);
  margin: 0 0 24px 0;
}

.pdf-footer {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 10px;
  line-height: 14px;
  color: var(--olive-60);
  border-top: 0.5px solid var(--olive-40);
  padding-top: 16px;
}

.hr-rule {
  border: none;
  border-top: 0.5px solid var(--olive-40);
  margin: 24px 0;
}

/* Mobile-specific tightening */
@media (max-width: 720px) {
  .lab-table th, .lab-table td { padding: 8px 6px; font-size: 11px; }
  .abstract dl { grid-template-columns: 1fr; }
}

/* =========================================================================
   Mobile readability + UX polish
   - 16px font on form inputs (prevents iOS Safari auto-zoom on focus,
     which is the single most jarring mobile-form bug)
   - Body text bumped to 15px so prose is comfortable to read on phones
   - Small-label sizes (10-11px desktop) bumped to 12px so they aren't
     squinty on small screens
   - Lab-table horizontal-scroll affordance: subtle right-edge fade so
     users see there's more table to scroll to on narrow viewports
   - Tighter section padding on small screens
   - Modal width hugs the viewport at < 480px
   ========================================================================= */
@media (max-width: 720px) {
  /* Inputs that the user can tap to focus — must be 16px+ to suppress
     iOS Safari's input-focus zoom. The desktop 14px reads cleanly on
     larger screens; bumping to 16px on mobile keeps the form usable. */
  .field input[type="text"],
  .field input[type="number"],
  .field input[type="email"],
  .field input[type="date"],
  .field select,
  .email-form input[type="email"],
  .footer-subscribe-form input[type="email"],
  .exit-modal-form input[type="email"] {
    font-size: 16px;
  }

  /* Body text: 14px reads tight on a phone; bump to 15px for comfortable
     reading. */
  body { font-size: 15px; line-height: 23px; }

  /* Small labels and metadata that are 10-11px on desktop become hard to
     read on a phone. Bump the most common offenders to 12px. */
  .eyebrow,
  .section-label,
  .topbar-meta,
  .label,
  .badge,
  .small,
  .btn-fine,
  .footer-subscribe-fine,
  .exit-modal-fine,
  .lab-table th { font-size: 12px; }

  /* Cell-level table copy: the 11px inside cells is squinty even with
     scroll. Bump to 12px; min-width still forces horizontal scroll. */
  .lab-table th, .lab-table td { font-size: 12px; padding: 10px 8px; }
  .lab-table .cell-interp { font-size: 12px; line-height: 18px; }

  /* Lab-table scroll cue: subtle right-edge linear gradient so users
     see they can swipe horizontally. Only applies when the wrap is
     scrollable (mobile). */
  .lab-table-wrap {
    position: relative;
    background:
      linear-gradient(to right, var(--paper) 0, var(--paper) 8px, transparent 8px, transparent calc(100% - 12px), var(--paper) 100%) 0 0 / 100% 100% no-repeat,
      linear-gradient(to right, transparent 0, transparent calc(100% - 24px), rgba(0, 0, 0, 0.08) 100%) 0 0 / 100% 100% no-repeat;
  }

  /* Section titles: desktop is 28-32px which is heavy on a phone. The
     existing media query already drops .page-title to 34px; section
     titles within content stay at desktop sizing — bring them in line
     with the page-title scaling. */
  .section-title { font-size: 24px; line-height: 30px; }

  /* Hero deck on the homepage: 18-20px desktop reads big on phones —
     trim slightly. */
  .hero-deck, .page-deck { font-size: 16px; line-height: 24px; }

  /* Tighten section padding: desktop 48-64px feels excessive on a phone. */
  .section { padding: 24px 0; }
}

/* Very narrow viewports (320-420px iPhone SE / older Android): page
   title shrinks again, large headlines stay readable without forcing
   horizontal scroll on long words. */
@media (max-width: 420px) {
  .page-title { font-size: 28px; line-height: 34px; }
  .section-title { font-size: 22px; line-height: 28px; }
  .hero-title { font-size: 32px; line-height: 38px; }
}

/* Exit-intent modal: hug the viewport on phones so the form reads with
   adequate breathing room rather than feeling cramped in a 90%-width
   container. */
@media (max-width: 480px) {
  .exit-modal-dialog {
    width: calc(100vw - 32px);
    max-width: none;
    padding: 24px 20px;
  }
}

/* =========================================================================
   PROPOSED ADDITIONS (v4-proposed)
   1. Threshold gradient bars for ferritin + hemoglobin
   2. 200ms cross-fade page transitions for wizard pages
   ========================================================================= */

/* ---------- Diff 1: Threshold gradient bars ---------- */

.threshold-visualization {
  margin: 24px 0 32px;
  padding: 24px;
  background: var(--paper);
  border: 0.5px solid var(--olive-40);
  border-radius: 4px;
}

.viz-eyebrow {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--crimson);
  margin: 0 0 16px;
}

.gradient-row {
  margin-bottom: 24px;
}
.gradient-row:last-of-type { margin-bottom: 0; }

.gradient-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
  gap: 12px;
  flex-wrap: wrap;
}

.gradient-title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  color: var(--olive);
}

.gradient-value {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 13px;
  color: var(--black-60, rgba(20, 20, 19, 0.60));
}

.gradient-value strong {
  font-weight: 600;
  color: var(--olive);
}

.gradient-bar {
  position: relative;
  height: 12px;
  margin-bottom: 4px;
}

.bar-track {
  display: flex;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  /* No overflow:hidden — it clips the segment hover tooltips that render
     above the bar. Rounded-corner clipping is handled per-segment below. */
}
.bar-track .seg:first-child { border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
.bar-track .seg:last-child { border-top-right-radius: 6px; border-bottom-right-radius: 6px; }

.seg {
  height: 100%;
  position: relative;
  cursor: default;
}

.seg-stage-4 { background: #C83355; }
.seg-stage-3 { background: #D67A8F; }
.seg-stage-2 { background: #E8B9C5; }
.seg-stage-1 { background: #D9DABA; }
.seg-stage-0 { background: #B0B585; }

.seg-severity-severe { background: #C83355; }
.seg-severity-mod    { background: #E08395; }
.seg-severity-mild   { background: #F0C8D0; }
.seg-severity-normal { background: #B0B585; }

/* Segment-specific positioning for the shared [data-tip] tooltip so the
   label sits directly above the hovered segment. The shared rule at the
   top of the file (search "[data-tip]:hover::after") handles the content +
   styling; a prior duplicate rule here read `attr(data-label)` by mistake
   and showed an empty tooltip. Kept empty-but-documented to prevent
   regression. */

/* Value marker — upright teardrop with the point at the bottom, pointing down
   at the value's position on the gradient bar. Rendered as an SVG background
   on the wrapper; the ::before rule is kept as a fallback no-op. */
.value-marker {
  position: absolute;
  top: -16px;
  width: 14px;
  height: 20px;
  margin-left: -7px;
  pointer-events: none;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 20"><path d="M7 19.5 C2 15 0 10.5 0 7 A7 7 0 0 1 14 7 C14 10.5 12 15 7 19.5 Z" fill="%23C83355" stroke="%23FFFFFF" stroke-width="1"/></svg>') no-repeat center / contain;
  filter: drop-shadow(0 1px 2px rgba(69, 69, 17, 0.2));
}

.value-marker::before {
  content: none;
}

/* Scale labels are positioned to match each bar's actual anchor percentages,
   not evenly spaced. The marker position uses a piecewise-linear interpolation
   over these same anchors (see gradient-bars.ts), so labels and marker now
   align. First and last labels flush to the bar edges; middle labels center
   on their anchor. */
.gradient-scale {
  position: relative;
  height: 14px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 10.5px;
  color: var(--black-60, rgba(20, 20, 19, 0.60));
  padding: 0;
  margin-top: 4px;
  letter-spacing: 0.04em;
}
.gradient-scale span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}
.gradient-scale span:first-child { transform: translateX(0); }
.gradient-scale span:last-child { transform: translateX(-100%); }

/* Ferritin anchors: 0, 15, 25, 30, 50, 100+ */
.gradient-row[data-ff-bar="ferritin"] .gradient-scale span:nth-child(1) { left: 0%; }
.gradient-row[data-ff-bar="ferritin"] .gradient-scale span:nth-child(2) { left: 15%; }
.gradient-row[data-ff-bar="ferritin"] .gradient-scale span:nth-child(3) { left: 25%; }
.gradient-row[data-ff-bar="ferritin"] .gradient-scale span:nth-child(4) { left: 30%; }
.gradient-row[data-ff-bar="ferritin"] .gradient-scale span:nth-child(5) { left: 50%; }
.gradient-row[data-ff-bar="ferritin"] .gradient-scale span:nth-child(6) { left: 100%; }

/* Hemoglobin anchors: 60 (0%), 70 (10%), 100 (40%), 120 (60%), 160+ (100%) */
.gradient-row[data-ff-bar="hemoglobin"] .gradient-scale span:nth-child(1) { left: 0%; }
.gradient-row[data-ff-bar="hemoglobin"] .gradient-scale span:nth-child(2) { left: 10%; }
.gradient-row[data-ff-bar="hemoglobin"] .gradient-scale span:nth-child(3) { left: 40%; }
.gradient-row[data-ff-bar="hemoglobin"] .gradient-scale span:nth-child(4) { left: 60%; }
.gradient-row[data-ff-bar="hemoglobin"] .gradient-scale span:nth-child(5) { left: 100%; }

.viz-note {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 11px;
  color: var(--black-60, rgba(20, 20, 19, 0.60));
  margin: 16px 0 0;
  line-height: 1.55;
  font-style: italic;
}

/* Small-screen behavior: bars still full-width, scales condense */
@media (max-width: 520px) {
  .threshold-visualization { padding: 16px; }
  .gradient-scale { font-size: 9.5px; }
}

/* ---------- Diff 2: Wizard cross-fade transitions ---------- */

body.wizard-page main {
  animation: wizardFadeIn 200ms ease-out;
}

@keyframes wizardFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

body.wizard-page main {
  transition: opacity 200ms ease-out;
}

body.fading-out main {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  body.wizard-page main,
  body.fading-out main {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
  }
}

/* =========================================================================
   PDF PREVIEW — page-size toggle + print isolation
   ========================================================================= */

/* Screen-only background for the preview page. Swapped from the old inline
   body style so the @media print rule can reset it cleanly. */
.pdf-preview-page {
  background: #F4F2ED;
}

/* Toolbar above the preview canvas: page-size toggle + primary print button.
   No "Page size" label — the buttons say what they are. */
.pdf-toolbar {
  max-width: 816px;
  margin: 24px auto 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0;
}
.pdf-size-toggle {
  display: inline-flex;
  align-items: stretch;
  border: 0.5px solid var(--olive-40);
  background: var(--paper);
  border-radius: 2px;
  overflow: hidden;
}
.pdf-size-toggle button {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 9px 18px;
  background: transparent;
  color: var(--olive);
  border: 0;
  cursor: pointer;
  transition: background 120ms, color 120ms;
}
.pdf-size-toggle button + button {
  border-left: 0.5px solid var(--olive-40);
}
.pdf-size-toggle button.is-active {
  background: var(--olive);
  color: var(--paper);
}
.pdf-size-toggle button:not(.is-active):hover {
  background: rgba(69, 69, 17, 0.05);
}

/* Canvas — width tracks the active page-size's true print width @ 96 dpi so
   the on-screen preview reads as the same proportions you'll print. Content
   inside flows naturally; the dashed border between .pdf-page blocks marks
   page breaks. We do NOT clamp page height with aspect-ratio + overflow:
   hidden any more — that was the source of the "content gets cut off" bug.
   On print, each .pdf-page becomes its own sheet via break-after: page. */
.pdf-preview-page .pdf-canvas {
  background: var(--paper);
  border: 0.5px solid var(--olive-40);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 32px rgba(0, 0, 0, 0.06);
  margin: 0 auto 48px;
  padding: 0;
  /* Default to Letter width */
  width: 100%;
  max-width: 816px; /* 8.5 in × 96 dpi */
}
.pdf-preview-page[data-page-size="a4"] .pdf-canvas {
  max-width: 794px; /* 210 mm × 96 dpi */
}
.pdf-preview-page .pdf-page {
  width: 100%;
  /* Print margin equivalents: 0.5 in / 12 mm at 96 dpi ≈ 48 px top-bottom,
     56 px left-right. Tighter than before; mirrors the actual @page padding
     used in the print rules below so on-screen content density matches the
     printed sheet. */
  padding: 48px 56px;
  margin: 0;
  border-bottom: 0.5px dashed var(--olive-40);
  background: var(--paper);
  /* Each block on the page should stay together when the browser paginates
     for print — no breaking a table or abstract dl across two physical
     sheets. */
}
.pdf-preview-page .pdf-page:last-child {
  border-bottom: none;
}
/* Major content blocks inside a page should not split across physical
   sheets when printing. */
.pdf-page > .abstract,
.pdf-page > .lab-table-wrap,
.pdf-page > table,
.pdf-page > .qpl,
.pdf-page > .medium-disclaimer,
.pdf-page > .pdf-footer {
  page-break-inside: avoid;
  break-inside: avoid;
}
/* Tighten typography density inside the PDF canvas. The on-screen preview
   was reading airy because the shared .pdf-* rules use site-wide spacing;
   here we squeeze paragraph margins so a real-world 8.5×11 sheet's worth
   of content actually fits without large whitespace gaps. */
.pdf-preview-page .pdf-page p,
.pdf-preview-page .pdf-page li {
  margin-top: 0;
  margin-bottom: 8px;
}
.pdf-preview-page .pdf-page p:last-child,
.pdf-preview-page .pdf-page li:last-child {
  margin-bottom: 0;
}
.pdf-preview-page .pdf-page .pdf-title {
  margin: 0 0 4px 0;
  font-size: 24px;
  line-height: 1.18;
}
.pdf-preview-page .pdf-page .pdf-sub {
  margin: 0 0 18px 0;
  font-size: 11px;
  color: var(--olive);
}
.pdf-preview-page .pdf-page .section-label {
  margin: 0 0 6px 0;
}
.pdf-preview-page .pdf-page .subhead {
  margin: 8px 0 6px 0;
}
.pdf-preview-page .pdf-page .abstract {
  margin: 0 0 16px 0;
}
.pdf-preview-page .pdf-page .abstract dl {
  margin: 0;
}
.pdf-preview-page .pdf-page .lab-table {
  font-size: 11px;
}
.pdf-preview-page .pdf-page .lab-table th,
.pdf-preview-page .pdf-page .lab-table td {
  padding: 6px 8px;
}
.pdf-preview-page .pdf-page hr.hr-rule {
  margin: 14px 0;
}
.pdf-preview-page .pdf-page .pdf-head {
  margin-bottom: 18px;
  padding-bottom: 10px;
}
.pdf-preview-page .pdf-page .medium-disclaimer {
  margin: 14px 0 0 0;
  padding: 10px 14px;
  font-size: 11px;
}
.pdf-preview-page .pdf-page .pdf-footer {
  margin-top: 18px;
  padding-top: 10px;
}

/* ---------- @media print ----------
   Goal: print ONLY the .pdf-canvas contents. Hide the site chrome (topbar,
   title, toolbar, footer, buttons). White background throughout to avoid
   burning ink on the cream page background.
*/
@media print {
  /* Reset page-level colors. Browsers default to white but some users enable
     "Print backgrounds" in which case our #F4F2ED body would render gray. */
  html, body {
    background: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Hide everything that isn't part of the PDF content. */
  .topbar,
  .page-title-block,
  .pdf-toolbar,
  .pdf-bottom-row,
  .site-footer,
  .skip-to-main {
    display: none !important;
  }

  /* Let the canvas take the page. */
  main.brief-container,
  .brief-container {
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .pdf-canvas {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: #fff !important;
  }

  /* Each .pdf-page prints as its own physical sheet. */
  .pdf-page {
    aspect-ratio: auto !important;   /* let @page size the sheet */
    width: 100% !important;
    margin: 0 !important;
    padding: 14mm 16mm !important;
    border: none !important;
    background: #fff !important;
    page-break-after: always;
    break-after: page;
    overflow: visible !important;
  }
  .pdf-page:last-child {
    page-break-after: auto;
    break-after: auto;
  }

  /* Remove any screen-only hover/focus ornaments that could leak ink. */
  a, a:visited { color: inherit !important; text-decoration: none !important; }
}

/* =========================================================================
   Exit-intent newsletter modal (results.html only)
   Calm, editorial popup. Triggered by mouse-out at viewport top, scroll-back
   after engagement, or mobile time-on-page fallback. Once shown or
   dismissed, sessionStorage flag prevents re-firing in the same tab.
   ========================================================================= */

.exit-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: exit-modal-fade 200ms ease-out;
}
.exit-modal[hidden] { display: none; }
@keyframes exit-modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.exit-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 15, 8, 0.55);
  cursor: pointer;
}
.exit-modal-dialog {
  position: relative;
  z-index: 1;
  max-width: 460px;
  width: 100%;
  background: var(--paper);
  border: 0.5px solid var(--olive-40);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
  padding: 36px 32px 28px 32px;
  animation: exit-modal-slide 220ms ease-out;
}
@keyframes exit-modal-slide {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.exit-modal-close {
  position: absolute;
  top: 8px;
  right: 12px;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
  color: var(--olive);
  transition: color 120ms;
}
.exit-modal-close:hover,
.exit-modal-close:focus {
  color: var(--crimson);
  outline: none;
}
.exit-modal-wordmark {
  display: block;
  height: 18px;
  width: auto;
  margin: 0 0 18px 0;
  opacity: 0.85;
}
.exit-modal-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 6px 0;
}
.exit-modal-deck {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 22px;
  color: var(--olive);
  margin: 0 0 20px 0;
}
.exit-modal-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin: 0 0 12px 0;
}
.exit-modal-form input[type="email"] {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  border: 0.5px solid var(--olive-40);
  background: var(--paper);
  color: var(--ink);
  outline: none;
  transition: border-color 120ms;
}
.exit-modal-form input[type="email"]:focus {
  border-color: var(--olive);
}
.exit-modal-form .btn-primary {
  white-space: nowrap;
  padding: 0 18px;
  font-size: 13px;
}
@media (max-width: 480px) {
  .exit-modal-form { grid-template-columns: 1fr; }
}
.exit-modal-status {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  line-height: 19px;
  margin: 8px 0 0 0;
  padding: 8px 12px;
}
.exit-modal-status[data-state="success"] {
  background: rgba(132, 156, 81, 0.12);
  border-left: 2px solid var(--olive);
  color: var(--ink);
}
.exit-modal-status[data-state="error"] {
  background: rgba(199, 67, 67, 0.08);
  border-left: 2px solid var(--crimson);
  color: var(--ink);
}
.exit-modal-fine {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 11px;
  line-height: 16px;
  color: var(--olive-60);
  margin: 12px 0 0 0;
}
.exit-modal-fine a {
  color: var(--olive);
  text-decoration: underline;
  text-decoration-color: var(--olive-40);
}

/* =========================================================================
   No-inputs state on results.html
   When the user lands on results.html without any stored LabInputs (direct
   link, refreshed tab after the session cleared, etc.), the engine sets
   body[data-ff-state="no-inputs"]. We hide the result-detail layout so the
   static Stage 3 placeholder content doesn't render under a "no lab values"
   headline. The page-title-block + a returned CTA in the no-inputs block
   remain visible.
   ========================================================================= */

body[data-ff-state="no-inputs"] .results-layout { display: none !important; }
body[data-ff-state="no-inputs"] [data-ff-show="ifSeverityUrgent"],
body[data-ff-state="no-inputs"] [data-ff-show="ifGahtTransition"],
body[data-ff-state="no-inputs"] [data-ff-show="ifOutOfScope"] {
  display: none !important;
}
body[data-ff-state="no-inputs"] .no-inputs-cta {
  display: block;
}
.no-inputs-cta { display: none; max-width: 720px; margin: 16px auto 64px; padding: 0 24px; text-align: center; }
.no-inputs-cta .btn-primary { margin-top: 8px; }

/* =========================================================================
   GAHT accordion on step-1
   Wraps the Gender-affirming hormone therapy field in a <details> so most
   users (who skip the field) see a one-line summary they can ignore, not a
   full sub-form they have to scan past.
   ========================================================================= */

/* =========================================================================
   Narrative formatting helpers — bullet list + callout
   Used by renderNarrativeBlock() in pattern-renderer.ts to give the
   pattern overviews / symptom integrations / abstract next-steps a
   bit more visual structure without rewriting the copy.
   ========================================================================= */

[data-ff-bind="overviewParagraphs"] .narrative-list,
[data-ff-bind="symptomIntegration"] .narrative-list {
  list-style: none;
  padding: 0;
  margin: 0 0 14px 0;
}
[data-ff-bind="overviewParagraphs"] .narrative-list li,
[data-ff-bind="symptomIntegration"] .narrative-list li {
  position: relative;
  padding: 0 0 0 18px;
  margin: 0 0 6px 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 14px;
  line-height: 22px;
  color: var(--ink);
}
[data-ff-bind="overviewParagraphs"] .narrative-list li::before,
[data-ff-bind="symptomIntegration"] .narrative-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--olive);
  font-weight: 400;
}
[data-ff-bind="overviewParagraphs"] .narrative-list li:last-child,
[data-ff-bind="symptomIntegration"] .narrative-list li:last-child {
  margin-bottom: 0;
}
.narrative-callout {
  background: rgba(132, 156, 81, 0.08);
  border-left: 2px solid var(--olive);
  padding: 12px 16px;
  margin: 0 0 14px 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 14px;
  line-height: 22px;
  color: var(--ink);
}

/* =========================================================================
   Footer newsletter subscribe — persists across all pages
   POSTs to the Cloudflare Worker; same handler as the exit-intent popup.
   Snug layout: just the input + button + a short "Unsubscribe anytime"
   caption. Sits in the top of the footer, above the wordmark + nav row.
   ========================================================================= */

.footer-subscribe {
  /* Sits in the right column of .footer-grid; max-width is enforced by
     the grid track. No bottom margin — the grid handles spacing. */
  margin: 0;
}
.footer-subscribe-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}
.footer-subscribe-form input[type="email"] {
  width: 100%;
  padding: 9px 12px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 18px;
  border: 0.5px solid var(--olive-40);
  background: var(--paper);
  color: var(--ink);
  outline: none;
  transition: border-color 120ms;
}
.footer-subscribe-form input[type="email"]:focus {
  border-color: var(--olive);
}
.footer-subscribe-form .btn-primary {
  font-size: 12px;
  padding: 0 16px;
  white-space: nowrap;
}
.footer-subscribe-status {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12px;
  line-height: 17px;
  margin: 8px 0 0 0;
  padding: 6px 10px;
  color: var(--ink);
}
.footer-subscribe-status[data-state="success"] {
  background: rgba(132, 156, 81, 0.12);
  border-left: 2px solid var(--olive);
}
.footer-subscribe-status[data-state="error"] {
  background: rgba(199, 67, 67, 0.08);
  border-left: 2px solid var(--crimson);
}
.footer-subscribe-fine {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 11px;
  line-height: 14px;
  color: var(--olive-60);
  margin: 6px 0 0 0;
}
@media (max-width: 480px) {
  .footer-subscribe-form { grid-template-columns: 1fr; }
}

/* =========================================================================
   Mixed-picture banner
   Calm note above the abstract when the engine returns mixed_picture.
   Tells the user that two or more patterns fit; the abstract below
   carries the closest-match pattern's read; alternatives are at the
   bottom of the page in the "Other possible reads" section.
   ========================================================================= */

.mixed-picture-banner {
  background: var(--cream);
  border: 0.5px solid var(--olive-40);
  border-left: 3px solid var(--olive);
  padding: 14px 18px;
  margin: 0 0 24px 0;
  max-width: 820px;
}
.mixed-picture-banner p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 14px;
  line-height: 21px;
  color: var(--ink);
  margin: 0;
}
.mixed-picture-banner strong { font-weight: 500; }
.mixed-picture-banner em {
  font-style: italic;
  color: var(--ink);
}

/* =========================================================================
   Other possible reads — bottom-of-page candidate accordion
   Renders when the engine returns mixed_picture_multiple_patterns. Lists
   every candidate except the top-ranked one (which is already rendered as
   the main narrative above). Each card carries the layperson pattern
   name, a per-candidate severity chip, and a click-to-expand body with
   the full per-pattern overview, fit summary, and disambiguating test.
   ========================================================================= */

.other-possible-reads {
  border-top: 0.5px solid var(--olive-40);
  padding-top: 24px;
}
.mixed-picture-lead {
  max-width: 820px;
  margin: 0 0 20px 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 15px;
  line-height: 23px;
  color: var(--ink);
}
.mixed-picture-lead strong {
  font-weight: 500;
}
.candidate-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 820px;
}
.candidate-card {
  border: 0.5px solid var(--olive-40);
  background: var(--paper);
  transition: background 120ms;
}
.candidate-card[open] {
  background: var(--cream);
}
.candidate-card > summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  user-select: none;
  position: relative;
}
.candidate-card > summary::-webkit-details-marker { display: none; }
.candidate-card > summary::after {
  content: "+";
  position: absolute;
  right: 20px;
  font-size: 18px;
  color: var(--olive);
  font-weight: 500;
}
.candidate-card[open] > summary::after { content: "\2013"; right: 20px; }
.candidate-card > summary {
  padding-right: 40px;
}
.candidate-rank-tag {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--crimson);
  white-space: nowrap;
}
.candidate-card:not([data-rank-most-likely]) .candidate-rank-tag,
.candidate-card details:nth-of-type(n + 2) .candidate-rank-tag {
  color: var(--olive-60);
}
.candidate-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  color: var(--ink);
}
.candidate-severity-chip {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--olive);
  border: 0.5px solid var(--olive-40);
  padding: 4px 8px;
  border-radius: 2px;
  white-space: nowrap;
}
.candidate-severity-chip[data-severity="prompt"] {
  color: var(--crimson);
  border-color: var(--crimson);
}
.candidate-body {
  padding: 0 20px 20px 20px;
  border-top: 0.5px dashed var(--olive-40);
}
.candidate-body > .candidate-fit,
.candidate-body > .candidate-disambig {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 14px;
  line-height: 21px;
  color: var(--ink);
  margin: 16px 0 0 0;
}
.candidate-body > .candidate-fit strong,
.candidate-body > .candidate-disambig strong {
  font-weight: 500;
  color: var(--olive);
  letter-spacing: 0.02em;
}
.candidate-divider {
  border: 0;
  border-top: 0.5px solid var(--olive-40);
  margin: 18px 0;
}
.candidate-section-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--olive);
  margin: 0 0 10px 0;
}
.candidate-overview p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 14px;
  line-height: 22px;
  color: var(--ink);
  margin: 0 0 10px 0;
}
.candidate-overview p:last-child { margin-bottom: 0; }
.candidate-action {
  margin: 14px 0 0 0;
  padding: 10px 14px;
  background: rgba(132, 156, 81, 0.08);
  border-left: 2px solid var(--olive);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 13px;
  line-height: 19px;
  color: var(--ink);
}
.candidate-action strong {
  font-weight: 500;
}

@media (max-width: 600px) {
  .candidate-card > summary {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .candidate-rank-tag,
  .candidate-severity-chip { white-space: normal; }
}

/* "Clear selection" button shown next to optional radio groups. Hidden
   until a radio is checked; re-hides itself after clearing. */
.radio-clear {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12px;
  color: var(--olive);
  background: transparent;
  border: 0;
  border-bottom: 0.5px dashed var(--olive-40);
  padding: 4px 0;
  margin-top: 8px;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: color 120ms, border-color 120ms;
}
.radio-clear:hover,
.radio-clear:focus {
  color: var(--crimson);
  border-bottom-color: var(--crimson);
  outline: none;
}
.radio-clear[hidden] { display: none; }

/* Optional GAHT field rendered as a one-line "Explain more"-style
   disclosure rather than a full bordered card. Most users skip it; when
   it applies, the line opens to reveal the radio group inline. */
details.gaht-accordion {
  border: none;
  background: transparent;
  padding: 0;
  margin: 6px 0 0 0;
  display: inline-block;
  max-width: 100%;
}
details.gaht-accordion > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  line-height: 18px;
  color: var(--olive);
  border-bottom: 0.5px dashed var(--olive-40);
  user-select: none;
  outline: none;
  transition: color 120ms, border-color 120ms;
}
details.gaht-accordion > summary::-webkit-details-marker { display: none; }
details.gaht-accordion > summary::after {
  content: "+";
  font-size: 14px;
  line-height: 1;
  color: var(--olive);
}
details.gaht-accordion[open] > summary::after { content: "\2013"; }
details.gaht-accordion > summary:hover,
details.gaht-accordion > summary:focus {
  color: var(--crimson);
  border-bottom-color: var(--crimson);
}
details.gaht-accordion[open] > summary {
  margin-bottom: 8px;
}
/* The summary text uses the field-label .lbl span, but in this disclosure
   context we override the uppercase/bold treatment so it reads as inline
   prose, not a section label. */
details.gaht-accordion > summary .lbl {
  font-family: inherit;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: inherit;
  display: inline;
  margin: 0;
}
.gaht-accordion-body {
  padding: 8px 0 0 0;
  max-width: 480px;
}

/* @page rule default — overridden at runtime by pdf-preview.ts when the user
   toggles A4. Kept here so the PDF prints on US Letter if JS ever fails to
   mount the size toggle. */
@page {
  size: letter;
  margin: 0;
}

/* =========================================================================
   REFERENCES — bibliography list on the evidence page + inline citation chips
   ========================================================================= */

.references-body {
  max-width: 820px;
  margin: 0;
}
.references-group {
  border-top: 0.5px solid var(--olive-40);
  padding: 0;
}
.references-group:last-child {
  border-bottom: 0.5px solid var(--olive-40);
}
.references-group > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 4px;
  font-family: var(--font-body);
  user-select: none;
  transition: background 120ms;
}
.references-group > summary::-webkit-details-marker {
  display: none;
}
.references-group > summary::before {
  content: "+";
  display: inline-block;
  width: 14px;
  color: var(--olive);
  font-weight: 500;
  flex-shrink: 0;
  text-align: center;
}
.references-group[open] > summary::before {
  content: "\2013"; /* en dash */
}
.references-group > summary:hover {
  background: rgba(69, 69, 17, 0.03);
}
.references-topic-label {
  font-weight: 500;
  font-size: 14px;
  color: var(--ink);
  flex: 1;
}
.references-count {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--olive-60);
  min-width: 24px;
  text-align: right;
}
.references-list {
  list-style: decimal;
  padding: 0 0 16px 28px;
  margin: 0;
}
.references-list li {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 13px;
  line-height: 21px;
  color: var(--ink);
  margin: 0 0 14px 0;
  padding-left: 4px;
}
.references-list li:last-child {
  margin-bottom: 0;
}
.references-doi {
  color: var(--olive);
  text-decoration: underline;
  text-decoration-color: var(--olive-40);
  text-underline-offset: 2px;
  word-break: break-all;
  font-size: 12px;
}
.references-doi:hover {
  color: var(--crimson);
  text-decoration-color: var(--crimson);
}

/* Inline citation chip — "Mei 2024" inside an evidence table cell becomes
   an anchor that jumps to the matching bibliography entry. */
.citation-link {
  color: var(--olive);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 2px;
  transition: text-decoration-color 120ms, color 120ms;
}
.citation-link:hover,
.citation-link:focus {
  color: var(--crimson);
  text-decoration-color: var(--crimson);
}
/* When a reader follows a citation link, highlight the target entry briefly.
   Pure CSS :target flash. */
.references-list li:target {
  background: rgba(199, 165, 61, 0.12);
  animation: cite-flash 2.4s ease-out;
}
@keyframes cite-flash {
  0%, 40% { background: rgba(199, 165, 61, 0.18); }
  100%    { background: transparent; }
}

/* Collapse the references block in print output — no point spending ink on
   the full bibliography from the PDF preview or printed evidence page. */
@media print {
  #references,
  .references-body { display: none !important; }

  /* Force every <details> open in print so its content always renders. The
     browser's default print behavior leaves them in their on-screen state,
     which means a closed accordion would silently drop content from the
     printed/PDF output. */
  details { display: block; }
  details > summary { display: list-item; cursor: default; }
  details > *:not(summary) { display: revert !important; }
}

/* =========================================================================
   PDF preview page — mixed-picture parity
   The PDF mirrors the results page's mixed_picture redesign: a banner above
   the abstract on Page 1, plus a compact "Other possible reads" section on
   Page 3. The compact rendering uses the same DOM the results page emits
   (renderCandidateCard) but strips the verbose body — fit summary + the
   disambiguating test only, no full per-candidate overview embedded.

   Cards are force-opened in pdf-preview.ts after render so the on-screen
   view matches the print output. The CSS below hides the +/- toggle and
   neutralizes the cursor since the cards aren't interactive in PDF mode.
   ========================================================================= */

.pdf-preview-page .candidate-list-compact .candidate-card > summary {
  cursor: default;
  padding-right: 16px;
}
.pdf-preview-page .candidate-list-compact .candidate-card > summary::after {
  content: "";
}

/* Slimmer banner sizing for the PDF context — Page 1 is space-constrained. */
.pdf-mixed-picture-banner {
  margin: 0 0 16px 0;
  padding: 10px 14px;
}
.pdf-mixed-picture-banner p {
  font-size: 13px;
  line-height: 19px;
}

/* PDF "Other possible reads" wrapper — reuses the inline-section spacing of
   Page 3's other blocks rather than the full page-section frame. */
.pdf-other-reads {
  margin-top: 18px;
}
.pdf-other-reads .mixed-picture-lead {
  font-size: 13px;
  line-height: 20px;
  margin-bottom: 14px;
}

/* Compact candidate cards — keep summary + fit + disambig; hide overview /
   divider / "If this is the read" label / next-step action callout. The
   per-candidate body stays open and prints as plain block content. */
.candidate-list-compact .candidate-card {
  border: 0.5px solid var(--olive-40);
  background: var(--paper);
}
.candidate-list-compact .candidate-card > summary {
  padding: 12px 16px;
}
.candidate-list-compact .candidate-title {
  font-size: 16px;
  line-height: 22px;
}
.candidate-list-compact .candidate-body {
  padding: 0 16px 14px 16px;
  border-top: none;
}
.candidate-list-compact .candidate-body > .candidate-fit,
.candidate-list-compact .candidate-body > .candidate-disambig {
  font-size: 13px;
  line-height: 19px;
  margin-top: 10px;
}
.candidate-list-compact .candidate-divider,
.candidate-list-compact .candidate-section-label,
.candidate-list-compact .candidate-overview,
.candidate-list-compact .candidate-action {
  display: none;
}