/* perigirlies, the Menopause Rating Scale reference page.
   Rides tokens.css + landing.css (topbar, .btn, .wrap, .faq, .footer come from there).
   Same locked light theme: no dark mode, no section that inverts.
   The four data colors appear only as domain dots and score bars, never as decoration.
   The page is fully readable with mrs.js absent: the interpreter degrades to plain
   number inputs and the reference tables are static HTML. */

.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;
}

/* ---------- hero ---------- */

.mrs-hero { padding: clamp(96px, 15vh, 150px) 0 clamp(40px, 6vh, 60px); }
.eyebrow {
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--flash-deep); margin-bottom: 14px;
}
.mrs-hero h1 { font-size: clamp(2.4rem, 6.2vw, 4rem); line-height: 1.04; }
.mrs-hero .lede {
  margin-top: 22px; font-size: clamp(1.06rem, 2.1vw, 1.24rem);
  line-height: 1.55; color: var(--muted); max-width: 40em;
}

.jump { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 30px; }
.jump a {
  display: inline-flex; align-items: center; min-height: 44px;   /* touch target */
  font-size: 0.88rem; font-weight: 700; text-decoration: none;
  color: var(--muted); background: var(--card);
  border: 1px solid var(--line-2); border-radius: var(--radius-pill);
  padding: 9px 17px; transition: color var(--dur-ui) var(--ease-out),
                                 border-color var(--dur-ui) var(--ease-out);
}
.jump a:hover { color: var(--flash-deep); border-color: var(--blush-deep); }

/* ---------- the interpreter ---------- */

.tool {
  padding: clamp(52px, 8vh, 80px) 0 clamp(64px, 10vh, 100px);
  background: var(--paper-2); border-block: 1px solid var(--line);
}
.tool-intro { margin-top: 16px; color: var(--muted); max-width: 44em; }
.tool-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 40px); align-items: start;
  margin-top: clamp(30px, 4vh, 44px);
}

.inputs, .readout {
  background: var(--card); border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 32px); box-shadow: var(--shadow-md);
}
.inputs fieldset { border: 0; display: grid; gap: 26px; }

.field-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: 10px;
}
.field label { font-weight: 800; font-size: 1rem; letter-spacing: -0.015em; }
.field .items {
  display: block; font-weight: 600; font-size: 0.78rem;
  color: var(--faint); letter-spacing: 0;
}
.num {
  width: 74px; flex: none; font-family: var(--sans);
  font-size: 1.16rem; font-weight: 800; text-align: center;
  font-variant-numeric: tabular-nums; color: var(--ink);
  background: var(--paper); border: 2px solid var(--line-2);
  border-radius: var(--radius); padding: 9px 4px;
  min-height: 46px;   /* touch target */
}
.num:focus-visible { border-color: var(--flash-deep); }
.num.invalid { border-color: var(--flash-deep); background: var(--flash-soft); }

/* The slider. The visible pill track is a real element (.slider-track) rather than
   the native pseudo-track, so its geometry is measurable and does not depend on how
   a given engine centers ::-webkit-slider-runnable-track inside a taller input.
   The input sits transparent on top of it at the full 44px touch height, and the
   native track is stretched to 44px so the thumb offset is deterministic too. */
.slider { position: relative; height: 44px; display: flex; align-items: center; }
.slider-track {
  position: absolute; left: 0; right: 0; height: 10px;
  border-radius: var(--radius-pill); pointer-events: none;
  background: linear-gradient(to right,
    var(--fill, var(--flash)) 0 var(--pct, 0%), var(--blush) var(--pct, 0%) 100%);
}
.range {
  -webkit-appearance: none; appearance: none;
  position: relative; width: 100%; height: 44px;   /* touch target */
  margin: 0; background: transparent; cursor: pointer; display: block;
}
.range::-webkit-slider-runnable-track { height: 44px; background: transparent; border: 0; }
.range::-moz-range-track { height: 44px; background: transparent; border: 0; }
.range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; margin-top: 9px;   /* (44 - 26) / 2, centered on the track */
  border-radius: 50%; background: var(--card);
  border: 4px solid var(--fill, var(--flash));
  box-shadow: var(--shadow-sm);
}
.range::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--card); border: 4px solid var(--fill, var(--flash));
  box-shadow: var(--shadow-sm);
}
.range:focus-visible { outline: none; }
.range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--flash-deep); }
.range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--flash-deep); }

.field[data-key="somatic"] .slider { --fill: var(--vaso); }
.field[data-key="psych"]   .slider { --fill: var(--psych); }
.field[data-key="uro"]     .slider { --fill: var(--sexual); }

.hint { font-size: 0.85rem; color: var(--faint); line-height: 1.5; margin-top: 6px; }
.no-form-note {
  margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: 0.88rem; color: var(--muted); line-height: 1.55;
}
.no-form-note a { color: var(--flash-deep); font-weight: 700; text-underline-offset: 3px; }

/* ---------- readout ---------- */

.total-card {
  text-align: center; padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.total-label {
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}
.total-num { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin-top: 4px; }
.total-num b { font-size: 4.2rem; font-weight: 800; line-height: 1; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.total-num span { font-size: 0.9rem; font-weight: 700; color: var(--muted); }
.total-band {
  display: inline-block; margin-top: 12px; padding: 7px 20px;
  border-radius: var(--radius-pill); font-weight: 800; font-size: 0.96rem;
  background: var(--blush); color: var(--ink);
}
.total-band[data-band="moderate"] { background: var(--blush-deep); }
.total-band[data-band="severe"] { background: var(--flash); color: var(--ink); }
.total-compare { margin-top: 14px; font-size: 0.93rem; color: var(--muted); line-height: 1.5; }
.total-compare b { color: var(--ink); font-weight: 800; }

.domain-table { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 0.92rem; }
.domain-table th, .domain-table td { text-align: left; padding: 11px 6px; border-bottom: 1px solid var(--line); }
.domain-table thead th {
  font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); font-weight: 800; padding-top: 0;
}
.domain-table tbody th { font-weight: 700; }
.domain-table .n { font-variant-numeric: tabular-nums; white-space: nowrap; }
.domain-table tbody tr:last-child th, .domain-table tbody tr:last-child td { border-bottom: none; }
.domain-table td[data-band="severe"], .domain-table td[data-band="moderate"] { font-weight: 800; color: var(--flash-deep); }

.dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  margin-right: 8px; vertical-align: baseline; flex: none;
}
.dot-somatic { background: var(--vaso); }
.dot-psych { background: var(--psych); }
.dot-uro { background: var(--sexual); }

.readout-note { margin-top: 18px; font-size: 0.8rem; color: var(--faint); line-height: 1.55; }
.readout-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.btn-quiet {
  background: var(--paper-2); color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--line-2);
}
.btn-quiet:hover { background: var(--blush); }

/* ---------- prose sections ---------- */

.prose { padding: clamp(60px, 9vh, 104px) 0; }
.prose h2 { margin-bottom: 20px; }
.prose p { color: var(--muted); max-width: 42em; }
.prose p + p { margin-top: 18px; }
.prose a { color: var(--flash-deep); font-weight: 700; text-underline-offset: 3px; }
.band-section { background: var(--paper-2); border-block: 1px solid var(--line); }

.domains {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 18px; margin: clamp(28px, 4vh, 40px) 0;
}
.domain-card {
  background: var(--card); border-radius: var(--radius-lg);
  padding: 24px 22px; box-shadow: var(--shadow-sm);
}
.domain-card h3 { font-size: 1.02rem; font-weight: 800; letter-spacing: -0.02em; }
.range-note { font-size: 0.78rem; color: var(--faint); margin-top: 4px; font-weight: 700; }
.domain-card ul { list-style: none; margin-top: 14px; display: grid; gap: 8px; }
.domain-card li {
  font-size: 0.92rem; color: var(--muted); line-height: 1.45;
  padding-left: 16px; position: relative;
}
.domain-card li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--line-2);
}

/* ---------- reference tables ---------- */

.table-scroll { overflow-x: auto; margin: clamp(24px, 3vh, 32px) 0; }
.bands-table, .norms-table {
  width: 100%; border-collapse: collapse; font-size: 0.94rem;
  background: var(--card); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-sm); min-width: 33rem;
}
.bands-table th, .bands-table td,
.norms-table th, .norms-table td {
  text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line);
}
.bands-table thead th, .norms-table thead th {
  font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); font-weight: 800; background: var(--paper);
  vertical-align: bottom;
}
.bands-table thead th span {
  display: block; font-size: 0.66rem; letter-spacing: 0.04em;
  text-transform: none; color: var(--faint); font-weight: 700; margin-top: 3px;
}
.bands-table tbody th, .norms-table tbody th { font-weight: 800; white-space: nowrap; }
.bands-table td, .norms-table td { color: var(--muted); font-variant-numeric: tabular-nums; }
.bands-table tbody tr:last-child th, .bands-table tbody tr:last-child td,
.norms-table tbody tr:last-child th, .norms-table tbody tr:last-child td { border-bottom: none; }
.bands-table tr.severe th, .bands-table tr.severe td { color: var(--flash-deep); font-weight: 800; }
.norms-table tr.us { background: var(--flash-soft); }
.norms-table tr.us th, .norms-table tr.us td { color: var(--ink); font-weight: 800; }
.table-note { max-width: 44em; }
.caution {
  background: var(--card); border-left: 4px solid var(--flash);
  border-radius: var(--radius); padding: 18px 22px; color: var(--muted);
  box-shadow: var(--shadow-sm);
}

/* ---------- evidence ---------- */

.evidence { background: var(--paper-2); border-block: 1px solid var(--line); }
.evidence-list { list-style: none; display: grid; gap: 14px; margin: 26px 0; max-width: 44em; }
.evidence-list li {
  background: var(--card); border-radius: var(--radius);
  padding: 18px 22px; font-size: 0.96rem; color: var(--muted);
  line-height: 1.55; box-shadow: var(--shadow-sm);
}
.evidence-list b { color: var(--ink); font-weight: 800; }

.citation-block {
  margin-top: 24px; background: var(--card); border-radius: var(--radius);
  padding: 18px 22px; font-size: 0.9rem; line-height: 1.6;
  box-shadow: var(--shadow-sm);
}
.citation-block b { color: var(--ink); }

/* ---------- limits, the hand-off to the quiz ---------- */

.limits {
  padding: clamp(64px, 10vh, 116px) 0; text-align: center;
  background: var(--paper-2); border-block: 1px solid var(--line);
}
.limits p { color: var(--muted); margin: 18px auto 0; max-width: 40em; }
.limits .voice {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.14rem, 2.4vw, 1.4rem); color: var(--ink);
  line-height: 1.4; margin-top: 26px; max-width: 24em;
}
.limits .btn { margin-top: clamp(28px, 4vh, 38px); }
.limits .closer-fine { margin-top: 18px; font-size: 0.84rem; }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .tool-grid { grid-template-columns: 1fr; }
  .domains { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .mrs-hero { padding-top: clamp(88px, 13vh, 100px); }
  .jump a { font-size: 0.84rem; padding: 8px 14px; }
  .readout-actions .btn { flex: 1 1 auto; text-align: center; }
}

/* ---------- print: the readout is the artifact, everything else goes ---------- */

@media print {
  .topbar, .footer, .no-print, .jump, .mrs-hero .lede,
  .inputs, .prose, .limits, .faq, .tool-intro { display: none !important; }
  body { background: #fff; font-size: 12px; }
  .tool { background: #fff; border: 0; padding: 0; }
  .tool-grid { display: block; }
  .readout { box-shadow: none; padding: 0; border: 0; }
  .mrs-hero { padding: 0 0 12px; }
  .mrs-hero h1 { font-size: 22px; }
  .total-num b { font-size: 40px; }
  .domain-table { font-size: 11px; }
  a { color: #111; text-decoration: none; }
  .readout-note { color: #444; }
}