/* perigirlies quiz, product register. Same locked light theme as the landing
   (blush ground, coral accent, Nunito, pill controls) held one notch quieter,
   because these are the medical surfaces: straight screening language, no flourish.
   Deliberately NOT resembling Hers (affiliate ToS). */

:root {
  --paper: var(--paper-2);
  --accent: var(--flash-deep);
  --accent-deep: #93301a; --accent-deep: oklch(0.45 0.15 32);
  --accent-soft: var(--flash-soft);
  --shadow: var(--shadow-md);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

:focus-visible { outline: 3px solid var(--flash-deep); outline-offset: 3px; border-radius: 4px; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* soft atmosphere behind the top of every screen */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 42vh;
  background: radial-gradient(120% 100% at 50% 0%, color-mix(in oklab, var(--flash) 10%, var(--paper)) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

header.site {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  max-width: 760px;
  width: 100%;
  margin: 0 auto;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-decoration: none;
}
.wordmark em { font-family: var(--serif); font-style: italic; font-weight: 500; }
.wordmark .heat { width: 15px; height: 17px; color: var(--flash); }

.progress {
  height: 3px;
  background: var(--line);
  border-radius: 2px;
  width: 120px;
  overflow: hidden;
}
.progress > i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--accent);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease-out);
}

main#top, main#app {
  position: relative;
  z-index: 1;
  width: 100%;
  flex: 1;
}

#app {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 8px 24px 40px;
}
/* with the static copy folded away, and on privacy.html which has none, the mount
   carries the bottom space itself */
body.in-check #app, main#app { padding-bottom: 64px; }

.screen { max-width: 560px; margin: 0 auto; animation: rise 0.4s ease both; }
.screen.wide { max-width: 760px; }

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .screen { animation: none; }
  * { transition: none !important; animation-duration: 0.01ms !important; }
}

/* ---------- type ---------- */

h1 { font-size: clamp(30px, 6vw, 44px); line-height: 1.12; font-weight: 800; letter-spacing: -0.03em; }
h2 { font-size: clamp(24px, 5vw, 30px); line-height: 1.18; font-weight: 800; letter-spacing: -0.025em; margin-bottom: 6px; }
.kicker {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.sub { color: var(--muted); margin-top: 8px; font-size: 17px; }
.fine { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
a { color: var(--accent-deep); }

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  border: none;
  border-radius: 999px;
  padding: 14px 28px;
  cursor: pointer;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.1s ease;
}
.btn:hover { background: var(--accent-deep); }
.btn:active { transform: scale(0.97); }
.btn.ghost {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--line);
}
.btn.ghost:hover { border-color: var(--line-2); background: var(--card); }
.btn.small { font-size: 14px; padding: 10px 18px; }
.btn:disabled { opacity: 0.45; cursor: default; }

.actions-row { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; align-items: center; }

/* ---------- option lists (auto-advance single select) ---------- */

.options { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; }
.opt {
  text-align: left;
  font-family: inherit;
  font-size: 17px;
  background: var(--card);
  border: 2px solid transparent;
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius);
  padding: 16px 20px;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
  color: var(--ink);
}
.opt:hover { border-color: var(--accent); }
.opt.selected { border-color: var(--accent); background: var(--accent-soft); }
.opt small { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }

/* ---------- symptom rating rows ---------- */

.sym-list { margin-top: 24px; display: flex; flex-direction: column; gap: 14px; }
.sym {
  background: var(--card);
  border: 1px solid transparent;
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius);
  padding: 15px 18px;
}
.sym .sym-label { font-size: 16.5px; }
.sym .sym-help { font-size: 12.5px; color: var(--muted); }
.seg {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 10px;
}
.seg button {
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  padding: 10px 4px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--line);
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.1s ease;
}
.seg button.on0 { background: color-mix(in oklab, var(--ink) 7%, #fff); color: var(--ink); border-color: var(--line-2); }
.seg button.on1 { background: var(--flash-soft); color: var(--accent-deep); border-color: color-mix(in oklab, var(--flash) 40%, #fff); }
.seg button.on2 { background: color-mix(in oklab, var(--flash) 32%, #fff); color: var(--accent-deep); border-color: var(--flash); }
.seg button.on3 { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ---------- results ---------- */

.result-card {
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 30px 28px;
  margin-top: 20px;
}

.stage-chip {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-deep);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 6px 14px;
  margin-bottom: 14px;
}

.verdict { font-size: clamp(21px, 4.5vw, 26px); line-height: 1.3; font-weight: 800; letter-spacing: -0.025em; }

.dial-row { display: flex; align-items: center; gap: 26px; margin: 26px 0 8px; flex-wrap: wrap; }
.dial { position: relative; width: 148px; height: 148px; flex: none; }
.dial svg { transform: rotate(-90deg); }
.dial .dial-num {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.dial .dial-num b { font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
.dial .dial-num span { font-size: 11px; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 4px; }

.bench { font-size: 16px; color: var(--muted); max-width: 20em; }
.bench b { color: var(--ink); font-weight: 800; }

.bars { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; }
.bar-row { display: grid; grid-template-columns: 84px 1fr 40px; align-items: center; gap: 12px; }
.bar-row .bar-label { font-size: 13px; font-weight: 700; color: var(--muted); }
.bar-row .bar-val { font-size: 13px; font-weight: 800; text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.bar-track { height: 9px; background: color-mix(in oklab, var(--ink) 7%, #fff); border-radius: var(--radius-pill); overflow: hidden; }
.bar-fill { height: 100%; border-radius: var(--radius-pill); width: 100%; transform: scaleX(0); transform-origin: left; transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }

/* the single serif-italic line in the whole quiz: her voice, not the instrument's */
.validation {
  margin-top: 24px;
  padding: 18px 22px;
  background: var(--flash-soft);
  border-radius: var(--radius);
  font-family: var(--serif);
  font-style: italic;
  font-size: 17.5px;
  line-height: 1.5;
}

.doctor-note { margin-top: 16px; font-size: 15px; color: var(--muted); }

.four-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.action {
  font-family: inherit;
  text-align: left;
  background: var(--card);
  border: 2px solid transparent;
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius);
  padding: 16px 18px;
  cursor: pointer;
  transition: border-color 0.12s ease, transform 0.12s var(--ease-spring);
  color: var(--ink);
}
.action:active { transform: scale(0.985); }
.action:hover { border-color: var(--accent); }
.action b { display: block; font-size: 15px; margin-bottom: 3px; }
.action span { font-size: 12.5px; color: var(--muted); }
/* coral fill, plum-black label: the same 5.6:1 pairing as every primary control */
.action.primary { background: var(--flash); border-color: var(--flash); color: var(--ink); }
.action.primary span { color: var(--ink); }
.action.primary:hover { background: color-mix(in oklab, var(--flash) 88%, var(--ink)); }

.script-box {
  margin-top: 14px;
  background: var(--card);
  border: 2px dashed var(--line-2);
  border-radius: var(--radius);
  padding: 16px;
  font-size: 15.5px;
  display: none;
}
.script-box.open { display: block; }
.script-box .fine { margin-top: 10px; }

.disclaimer { margin-top: 22px; }

/* ---------- plan / routing ---------- */

.check-list { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.check {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--card);
  border: 2px solid transparent;
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius);
  padding: 14px 17px;
  cursor: pointer;
  font-size: 15.5px;
}
.check input { margin-top: 4px; accent-color: var(--accent); width: 16px; height: 16px; flex: none; }
.check.selected { border-color: var(--accent); background: var(--accent-soft); }
.check small { display: block; font-size: 12.5px; color: var(--muted); }

.form-row { margin-top: 20px; }
.form-row label { display: block; font-size: 13px; font-weight: 800; color: var(--muted); margin-bottom: 8px; }
select {
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 2px solid var(--line-2);
  background: var(--card);
  color: var(--ink);
  appearance: none;
}
.pill-row { display: flex; gap: 8px; flex-wrap: wrap; }
.pill {
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 800;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
}
.pill.selected { background: var(--ink); color: #fff; border-color: var(--ink); }

.provider-card {
  background: var(--card);
  border: 2px solid transparent;
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  margin-top: 14px;
}
.provider-card.primary { border-color: var(--flash); box-shadow: var(--shadow); }
.provider-card .match {
  font-size: 11.5px; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ok); margin-bottom: 8px;
}
.provider-card h3 { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; }
.provider-card .tagline { color: var(--muted); font-size: 15px; margin-top: 2px; }
.provider-card .body { font-size: 14px; margin-top: 10px; color: var(--ink); }
.provider-card .disclosure { margin-top: 10px; }
.provider-card .go { margin-top: 14px; }

.safety-banner {
  margin-top: 20px;
  background: var(--flash-soft);
  border: 2px solid var(--blush-deep);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
}
.safety-banner h3 { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: var(--accent-deep); }
.safety-banner p { margin-top: 8px; font-size: 15.5px; }

.divider { border: none; border-top: 1px solid var(--line); margin: 30px 0; }

/* ---------- education ---------- */

.edu-figure {
  margin: 24px 0;
  background: var(--card);
  border: 1px solid transparent;
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius);
  padding: 20px 22px;
  font-size: 13.5px;
  color: var(--muted);
}

/* ---------- static page copy ----------
   Everything the page says about itself is real HTML either side of the #app mount:
   a reader with JavaScript off gets it, and so does anything that extracts text without
   running the hash router. It is on screen at the URL everyone lands on, and app.js sets
   body.in-check once she moves past the first question, which folds it away so the check
   itself stays uncluttered. Same URL, same words, for people and crawlers both. */

/* 560 of content plus the same 24px gutters #app uses, so this column lands on exactly
   the same left edge as .screen at every width instead of sitting 24px inside it */
.q-col { width: 100%; max-width: 608px; margin: 0 auto; padding: 0 24px; }

.q-intro { padding: 12px 0 4px; }
.q-eyebrow {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.q-intro h1 { font-size: clamp(27px, 5.2vw, 36px); line-height: 1.15; }
.q-lede { margin-top: 14px; font-size: 17px; color: var(--muted); }
.q-strip {
  margin-top: 16px;
  font-size: 14.5px;
  color: var(--muted);
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.q-strip b { color: var(--ink); font-weight: 800; }

.q-noscript { padding-top: 8px; padding-bottom: 8px; font-size: 15.5px; color: var(--muted); }

.q-more { padding: 8px 0 8px; }
.q-block { padding: 30px 0; border-top: 1px solid var(--line); }
.q-block:first-child { border-top: none; padding-top: 12px; }
.q-block h2 { font-size: clamp(20px, 4vw, 24px); margin-bottom: 12px; }
.q-block p { font-size: 16px; color: var(--muted); }
.q-block p + p { margin-top: 12px; }
.q-block a:not(.btn) { color: var(--accent-deep); text-underline-offset: 3px; }

.q-attrs { display: grid; gap: 12px; }
.q-attrs > div { font-size: 15.5px; color: var(--muted); }
.q-attrs b { color: var(--ink); font-weight: 800; }

.q-gets { list-style: none; display: grid; gap: 12px; }
.q-gets li {
  background: var(--card);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius);
  padding: 15px 18px;
}
.q-gets b { display: block; font-size: 16px; }
.q-gets span { display: block; font-size: 14.5px; color: var(--muted); margin-top: 3px; }

/* same disclosure pattern as the landing page's FAQ, in the quiz page's quieter register */
.q-faq details {
  background: var(--card);
  border-radius: var(--radius);
  margin-bottom: 9px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.q-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 15px 48px 15px 18px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.015em;
  position: relative;
}
.q-faq summary::-webkit-details-marker { display: none; }
.q-faq summary::after {
  content: "";
  position: absolute;
  right: 20px; top: 50%;
  width: 10px; height: 10px;
  border-right: 2.5px solid var(--accent);
  border-bottom: 2.5px solid var(--accent);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--dur-ui) var(--ease-out);
}
.q-faq details[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.q-faq .a { padding: 0 18px 17px; }
.q-faq .a p { font-size: 15.5px; }

.q-closer { text-align: center; padding-bottom: 48px; }
.q-closer .q-cta-line {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1.45;
  color: var(--ink);
  margin-bottom: 20px;
}
.q-closer .fine { font-size: 12.5px; margin-top: 14px; }

/* mid-check, only the instrument is on screen */
body.in-check .q-intro,
body.in-check .q-more { display: none; }

/* ---------- footer ---------- */

footer.site {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--line);
  padding: 26px 24px 40px;
}
footer.site .inner {
  max-width: 760px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 10px;
}
footer.site nav { display: flex; gap: 18px; font-size: 13px; font-weight: 700; }
footer.site nav a { color: var(--muted); text-decoration: none; }
footer.site nav a:hover { color: var(--flash-deep); }

/* ---------- print summary ---------- */

/* ---------- doctor summary: a paper sheet laid on the blush ground ----------
   It follows the site's shape rule (26px card) and its ink, rather than inverting
   to a cold white/black island. Every fact is text first: browsers do not print
   background colours by default, so the bars and tints below are enhancement and
   never the only carrier of meaning. */

.sheet {
  background: var(--card);
  color: var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: clamp(24px, 4vw, 40px);
  margin-top: 18px;
}

.sheet-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; padding-bottom: 20px; border-bottom: 2px solid var(--line);
}
.sheet-title h2 { font-size: clamp(21px, 3.4vw, 27px); margin-bottom: 0; }
.sheet-meta { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-top: 7px; max-width: 42em; }

.sheet-score { text-align: right; flex: none; }
.sheet-score-num { display: flex; align-items: baseline; gap: 5px; justify-content: flex-end; }
.sheet-score-num b {
  font-size: clamp(34px, 6vw, 46px); font-weight: 800; line-height: 1;
  letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
}
.sheet-score-num span { font-size: 12px; font-weight: 700; color: var(--muted); }
.sheet-stage {
  margin-top: 7px; font-size: 12.5px; font-weight: 800;
  color: var(--accent-deep, var(--accent)); white-space: nowrap;
}

.sheet-facts { margin-top: 20px; display: grid; gap: 1px; }
.sheet-facts > div {
  display: grid; grid-template-columns: 150px 1fr; gap: 14px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.sheet-facts dt {
  font-size: 11px; font-weight: 800; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--muted); padding-top: 2px;
}
.sheet-facts dd { font-size: 14.5px; line-height: 1.45; }

.sheet-block { margin-top: 26px; }
.sheet-block h3 {
  font-size: 11px; font-weight: 800; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 12px;
}

.sheet-domains { list-style: none; display: grid; gap: 9px; }
.sheet-domains li {
  display: grid; grid-template-columns: 78px 1fr 34px;
  align-items: center; gap: 12px;
}
.sheet-domains .d-name { font-size: 13.5px; font-weight: 700; }
.sheet-domains .d-bar {
  height: 8px; border-radius: 999px; background: var(--line); overflow: hidden;
}
.sheet-domains .d-bar i { display: block; height: 100%; width: var(--w); border-radius: 999px; }
.sheet-domains .d-num {
  font-size: 13.5px; font-weight: 800; text-align: right;
  font-variant-numeric: tabular-nums;
}
.sheet-legend { font-size: 11.5px; color: var(--faint); line-height: 1.5; margin-top: 10px; }

.sheet-symptoms { width: 100%; border-collapse: collapse; font-size: 14px; }
.sheet-symptoms thead th {
  text-align: left; font-size: 11px; font-weight: 800; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--muted);
  padding: 0 8px 8px 0; border-bottom: 1px solid var(--line-2);
}
.sheet-symptoms tbody th, .sheet-symptoms tbody td {
  text-align: left; padding: 8px 8px 8px 0; border-bottom: 1px solid var(--line);
}
.sheet-symptoms tbody th { font-weight: 600; }
.sheet-symptoms tbody td { width: 44%; color: var(--muted); }
.sheet-symptoms tbody tr:last-child th, .sheet-symptoms tbody tr:last-child td { border-bottom: none; }
/* severity is already written out in words; weight and tint only reinforce it */
.sheet-symptoms tr.sev-0 th, .sheet-symptoms tr.sev-0 td { color: var(--faint); }
.sheet-symptoms tr.sev-2 th, .sheet-symptoms tr.sev-3 th { font-weight: 800; }
.sheet-symptoms tr.sev-2 td, .sheet-symptoms tr.sev-3 td { font-weight: 800; color: var(--ink); }

.sheet-script { font-size: 14.5px; line-height: 1.6; }
.sheet-basis {
  margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 11.5px; color: var(--faint); line-height: 1.55;
}

@media print {
  body::before, header.site, footer.site, .no-print { display: none !important; }
  body { background: #fff; font-size: 12px; color: #111; }
  #app, body.in-check #app, main#app { padding: 0; max-width: none; }
  .q-intro, .q-more, .q-noscript { display: none !important; }
  .screen { max-width: none; animation: none; }
  a { color: #111; text-decoration: none; }

  /* the sheet is the document on paper, so it loses the card chrome */
  .sheet {
    background: none; color: #111; border-radius: 0;
    box-shadow: none; padding: 0; margin-top: 0;
  }
  .sheet-head { border-bottom: 1.5px solid #999; }
  .sheet-facts > div, .sheet-symptoms tbody th, .sheet-symptoms tbody td { border-bottom: 1px solid #ddd; }
  .sheet-symptoms thead th { border-bottom: 1px solid #999; }
  .sheet-meta, .sheet-facts dt, .sheet-block h3, .sheet-legend, .sheet-basis { color: #555; }
  .sheet-symptoms tbody td { color: #111; }
  .sheet-symptoms tr.sev-0 th, .sheet-symptoms tr.sev-0 td { color: #777; }
  .sheet-stage { color: #111; }
  /* the bars would vanish anyway without background graphics; the numbers carry it */
  .sheet-domains .d-bar { display: none; }
  .sheet-domains li { grid-template-columns: 78px auto; gap: 8px; justify-content: start; }
  .sheet-domains .d-num { text-align: left; }
  .sheet-block, .sheet-facts { break-inside: avoid; }
  .sheet-symptoms { break-inside: auto; }
  .sheet-symptoms tr { break-inside: avoid; }
}

@media (max-width: 560px) {
  .four-actions { grid-template-columns: 1fr; }
  .bar-row { grid-template-columns: 64px 1fr 36px; }
  /* the sheet head stacks: the score block is flex:none and the stage chip cannot wrap,
     so side by side they crush the title and then overflow the card below about 360px */
  .sheet-head { display: block; }
  .sheet-score { text-align: left; margin-top: 14px; }
  .sheet-score-num { justify-content: flex-start; }
  .sheet-stage { white-space: normal; }
  .sheet-facts > div { grid-template-columns: 1fr; gap: 4px; }
}