/* ══════════════════════════════════════════════════════════════════════
   Calculator page — lead with the instrument.

   Measured before changing anything: on a 853px viewport the first input
   sat at 830px, behind eight sections and ~600px of caveat. People arrive
   at a calculator to calculate; the explanation is good and stays, it just
   stops standing in front of the tool.

   Done with flex `order`, not by moving nodes: the app re-renders #v-tool
   on every route change, so any DOM reordering would be undone. The ids
   below are present on all 44 tool pages.
   ══════════════════════════════════════════════════════════════════════ */
#v-tool{display:flex;flex-direction:column}

#v-tool > #tBack   {order:1}
#v-tool > #tName   {order:2}
#v-tool > #tBlurb  {order:3}
#v-tool > #tLive   {order:4}   /* the calculator — was 8th */
#v-tool > #provb   {order:5}   /* sign-off caveat, now attached to the result */
#v-tool > .formula {order:6}   /* what the result was computed from */
#v-tool > #tMethod {order:7}
#v-tool > #aisum   {order:8}
#v-tool > #tSoon   {order:9}
#v-tool > #tClin   {order:10}
#v-tool > #so-tool {order:11}
#v-tool > #tFoot   {order:12}
#v-tool > *        {order:13}  /* anything unrecognised falls to the end */

#v-tool > #tLive{margin:20px 0 26px}
/* No wash behind the panels. The one bold thing on this page is the butter
   result figure, and a tinted container competed with it. Position alone is
   enough to make the tool read as the hero. */

/* The grid shipped align-items:start, which produced a ragged gap whenever the
   two panels differed in height — 71px under the inputs on the AMH interpreter.
   The two shapes need opposite things, and one pair of rules covers both:
     · result taller than inputs (AMH)  — inputs stretch up to meet it
     · inputs taller than result (cost) — result sticks so the figure stays on
       screen while you work down a long form
   The row height is set by whichever panel is taller, so each case falls out
   of the same declarations. */
@media (min-width:900px){
  #v-tool > #tLive > .lay > *:first-child{align-self:stretch}
  #v-tool > #tLive > .lay > *:last-child{align-self:start;position:sticky;top:96px}
}
@media (max-width:899px){
  #v-tool > #tLive > .lay > *{align-self:stretch}
}

/* the caveat qualifies the number, so tie it visually to the panel above
   instead of letting it float as another banner */
#v-tool > #provb{margin-top:-8px;border-radius:0 14px 14px 0}

/* The formula strip had no heading at all, so at the foot of the page it read as
   stranded UI. It belongs directly under the readout, where it says what the
   number was computed from — and it needs a label like every other block. */
#v-tool > .formula{position:relative;padding-top:34px}
#v-tool > .formula::before{
  content:"How this is calculated";
  position:absolute;top:13px;left:22px;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.42);font-weight:500;
}

/* the blurb is the last thing before the tool — tighten the gap so the
   instrument starts as high as the type allows */
#v-tool > #tBlurb{margin-bottom:2px}

@media (prefers-reduced-motion:reduce){
  #v-tool > .formula{transition:none}
}

/* ══════════════════════════════════════════════════════════════════════
   INSTRUMENT PANEL
   The calculators are reading instruments — they take measurements and
   place them against a scale. The page now says so: one framed unit with
   the controls on the left, the readout on the right, and the band scale
   fused to the bottom instead of floating 700px away under its own heading.

   Scoped to #tLive so the hub and category pages are untouched. Only the
   first .sec2 is absorbed — the ones after it are ordinary content sections.
   ══════════════════════════════════════════════════════════════════════ */

/* ── the frame ───────────────────────────────────────────────────────── */
#v-tool > #tLive > .lay{
  gap:0;
  border:1px solid rgba(247,247,136,.30);
  border-bottom:0;
  border-radius:16px 16px 0 0;
  background:rgba(255,255,255,.017);
  overflow:hidden;
}
/* the two halves stop being separate cards and become compartments */
#v-tool > #tLive > .lay > * > .panel,
#v-tool > #tLive > .lay > .ans{
  border:0;border-radius:0;background:transparent;box-shadow:none;
  height:100%;
}
#v-tool > #tLive > .lay > *:first-child{
  border-right:1px solid rgba(247,247,136,.18);
  background:rgba(0,0,0,.22);            /* the control side sits back */
}
#v-tool > #tLive > .lay > * > .panel{padding:20px 22px}
#v-tool > #tLive > .lay > .ans{padding:20px 24px}

/* ── micro-labels: mono, tracked, quiet ──────────────────────────────── */
#v-tool > #tLive .panel > .k,
#v-tool > #tLive #rows span{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.42);font-weight:500;
}

/* ── controls ────────────────────────────────────────────────────────── */
#v-tool > #tLive #inputs .f{margin-bottom:13px}
#v-tool > #tLive #inputs .f:last-child{margin-bottom:0}
#v-tool > #tLive #inputs input{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
  border-radius:7px;
}
#v-tool > #tLive #inputs input:focus-visible{
  outline:2px solid rgba(247,247,136,.85);outline-offset:1px;
}

/* ── the readout ─────────────────────────────────────────────────────── */
#v-tool > #tLive .ans .big{
  display:flex;align-items:baseline;gap:9px;
  font-variant-numeric:tabular-nums;letter-spacing:-.04em;line-height:1;
}
#v-tool > #tLive .ans .asub{
  margin:9px 0 0;padding-bottom:15px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
/* supporting figures read as a spec list, not prose */
#v-tool > #tLive #rows > div{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:9px 0;border-bottom:1px solid rgba(255,255,255,.06);
}
#v-tool > #tLive #rows > div:last-child{border-bottom:0}
#v-tool > #tLive #rows b{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-variant-numeric:tabular-nums;font-size:13px;font-weight:600;
  letter-spacing:.01em;text-align:right;
}

/* ── the scale, fused to the instrument ──────────────────────────────── */
#v-tool > #tLive > .lay + .sec2{
  margin-top:0;
  border:1px solid rgba(247,247,136,.30);
  border-top:1px solid rgba(247,247,136,.18);
  border-radius:0 0 16px 16px;
  background:rgba(255,255,255,.017);
  padding:16px 22px 20px;
}
#v-tool > #tLive > .lay + .sec2 > .sh2{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:500;color:rgba(255,255,255,.42);
  margin:0 0 4px;
}
#v-tool > #tLive > .lay + .sec2 > .sl2{margin:0 0 13px;font-size:13.5px}
#v-tool > #tLive > .lay + .sec2 > .panel{
  border:0;background:transparent;padding:0;box-shadow:none;
}

/* stacked, the divider becomes horizontal */
@media (max-width:899px){
  #v-tool > #tLive > .lay > *:first-child{
    border-right:0;border-bottom:1px solid rgba(247,247,136,.18);
  }
}

/* close the gap the rule already creates — the divider under the verdict was
   doing the separating and #rows was adding its own margin on top of it */
#v-tool > #tLive .ans #rows{margin-top:2px}

/* ══════════════════════════════════════════════════════════════════════
   ENRICHMENT — journey strip and cost breakdown (see calc-enrich.js)
   Both deliberately avoid the clinical reference bands: 21 of 44 tools carry
   provisional ranges, and a richer visual there would lend them authority
   they have not earned. These make no clinical claim.
   ══════════════════════════════════════════════════════════════════════ */
.cx-journey,.cx-cost{
  margin:24px 0 0;padding:19px 22px 17px;
  border:1px solid rgba(255,255,255,.10);border-radius:16px;
  background:rgba(255,255,255,.017);
}
.cx-k{
  display:block;font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.42);font-weight:500;margin-bottom:15px;
}
.cx-note{
  margin:13px 0 0;font-size:12.5px;line-height:1.55;
  color:rgba(255,255,255,.40);max-width:70ch;
}

/* ── journey strip ───────────────────────────────────────────────────── */
.cx-track{display:flex;align-items:center;gap:0;flex-wrap:wrap}
.cx-node{display:flex;flex-direction:column;align-items:center;gap:7px;flex:0 0 auto;min-width:74px}
.cx-dot{
  width:11px;height:11px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.26);background:transparent;
  transition:transform .45s cubic-bezier(.22,1,.36,1),background-color .45s,border-color .45s;
}
.cx-node.done .cx-dot{background:rgba(255,255,255,.34);border-color:transparent}
.cx-node.on .cx-dot{
  background:#F7F788;border-color:#F7F788;transform:scale(1.55);
  box-shadow:0 0 0 5px rgba(247,247,136,.14);
}
.cx-lbl{
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:9.5px;
  letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.34);
  text-align:center;line-height:1.35;
}
.cx-node.on .cx-lbl{color:#F7F788}
.cx-node.done .cx-lbl{color:rgba(255,255,255,.52)}
.cx-link{flex:1 1 18px;height:1.5px;min-width:14px;background:rgba(255,255,255,.13);margin-bottom:19px}
.cx-link.done{background:rgba(255,255,255,.30)}
.cx-aside .cx-track{opacity:.55}

/* ── cost breakdown ──────────────────────────────────────────────────── */
.cx-bar{display:flex;height:34px;border-radius:7px;overflow:hidden;background:rgba(0,0,0,.35)}
.cx-seg{
  display:flex;align-items:center;justify-content:center;min-width:2px;
  transition:width .5s cubic-bezier(.22,1,.36,1);
}
.cx-segl{
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;font-weight:600;
  color:rgba(10,10,11,.72);letter-spacing:.02em;
}
.cx-c0{background:#F7F788}
.cx-c1{background:#8FB4FF}
.cx-c2{background:#FFD9A0}
.cx-c3{background:#B9E8C9}
.cx-c4{background:#D8C0F0}
.cx-key{list-style:none;margin:15px 0 0;padding:0;display:grid;gap:0;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));column-gap:34px}
.cx-key li{padding:7px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.cx-key li{display:flex;align-items:baseline;gap:9px;font-size:13.5px}
.cx-sw{width:9px;height:9px;border-radius:2px;flex:none;transform:translateY(-1px)}
.cx-keyl{color:rgba(255,255,255,.62);flex:1;min-width:0}
.cx-keyv{
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12.5px;font-weight:600;
  font-variant-numeric:tabular-nums;color:#fff;
}

/* ── readout transition: the figure settles rather than snapping ─────── */
#v-tool > #tLive .ans .big #out{
  display:inline-block;
  transition:opacity .16s ease, transform .16s ease;
}

@media (prefers-reduced-motion:reduce){
  .cx-dot,.cx-seg,#v-tool > #tLive .ans .big #out{transition:none}
  .cx-node.on .cx-dot{transform:none}
}

/* ══════════════════════════════════════════════════════════════════════
   YOUR PICTURE — the completeness model (calc-picture.js)
   Uses the directory's gauge language: what has been given, and the
   hatched remainder that has not. The gap is the point, so it is shown
   rather than scored around.
   ══════════════════════════════════════════════════════════════════════ */
.cx-pic{
  margin:24px 0 0;padding:19px 22px 17px;
  border:1px solid rgba(247,247,136,.26);border-radius:16px;
  background:rgba(247,247,136,.035);
}
.cx-pichd{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.cx-pichd .cx-k{margin-bottom:0}
.cx-k2{display:block;margin:18px 0 10px}
.cx-clear{
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:9.5px;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.40);
  background:transparent;border:1px solid rgba(255,255,255,.16);
  border-radius:5px;padding:4px 9px;cursor:pointer;
}
.cx-clear:hover{color:#F7F788;border-color:rgba(247,247,136,.45)}
.cx-clear:focus-visible{outline:2px solid #F7F788;outline-offset:2px}

.cx-gauge{display:flex;height:26px;border-radius:6px;overflow:hidden;margin:14px 0 0;
  border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.30)}
.cx-given{display:flex;align-items:center;justify-content:center;background:#F7F788;
  transition:width .5s cubic-bezier(.22,1,.36,1);min-width:64px}
.cx-given b{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;
  font-weight:600;letter-spacing:.09em;color:#151508}
.cx-notgiven{flex:1;background:repeating-linear-gradient(45deg,
  rgba(255,217,160,.13),rgba(255,217,160,.13) 5px,transparent 5px,transparent 10px)}

.cx-picline{margin:13px 0 0;font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.72)}
.cx-picline b{color:#fff;font-weight:600}

.cx-chips{display:flex;flex-wrap:wrap;gap:6px;margin:13px 0 0}
.cx-chip{
  font-size:12.5px;padding:5px 11px;border-radius:20px;text-decoration:none;
  border:1px solid rgba(247,247,136,.30);color:#F7F788;background:rgba(247,247,136,.06);
}
.cx-chip:hover{background:rgba(247,247,136,.16)}
.cx-more{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;
  color:rgba(255,255,255,.40);align-self:center;padding-left:4px}

.cx-gaps{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.cx-gaps li{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:baseline}
.cx-gpts{
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;font-weight:600;
  color:#FFD9A0;border:1px solid rgba(255,217,160,.55);border-radius:4px;
  padding:1px 7px;line-height:1.5;white-space:nowrap;
}
.cx-gaps b{display:block;font-size:14.5px;font-weight:600;color:#fff}
.cx-gaps span{display:block;font-size:13px;line-height:1.5;color:rgba(255,255,255,.52)}

/* whose number is this — the tools ship with worked-example defaults */
#v-tool #tLive .f.cx-mine > label::after{
  content:"YOURS";margin-left:8px;
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:8.5px;
  letter-spacing:.11em;color:#F7F788;
  border:1px solid rgba(247,247,136,.42);border-radius:3px;padding:1px 5px;
  vertical-align:1px;
}
#v-tool #tLive .f.cx-example > label::after{
  content:"EXAMPLE";margin-left:8px;
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:8.5px;
  letter-spacing:.11em;color:rgba(255,255,255,.34);
  border:1px solid rgba(255,255,255,.16);border-radius:3px;padding:1px 5px;
  vertical-align:1px;
}
@media (prefers-reduced-motion:reduce){.cx-given{transition:none}}

/* ══════════════════════════════════════════════════════════════════════
   HUB — "What have you got?"
   The hub asked people to know which of 44 tools they needed. Every input
   in the suite comes off one of nine documents a patient holds, so the
   entry point is the document, not the tool.
   ══════════════════════════════════════════════════════════════════════ */
.cx-have{
  margin:26px 0 34px;padding:21px 24px 19px;
  border:1px solid rgba(247,247,136,.26);border-radius:18px;
  background:rgba(247,247,136,.035);
}
.cx-havelede{margin:0 0 16px;font-size:14.5px;line-height:1.55;
  color:rgba(255,255,255,.62);max-width:74ch}
.cx-docs{display:grid;gap:9px;grid-template-columns:repeat(auto-fill,minmax(216px,1fr))}
.cx-doc{
  text-align:left;cursor:pointer;padding:12px 14px;border-radius:12px;
  border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.02);
  color:inherit;font:inherit;transition:border-color .13s ease,background-color .13s ease;
}
.cx-doc:hover{border-color:rgba(247,247,136,.45)}
.cx-doc:focus-visible{outline:2px solid #F7F788;outline-offset:2px}
.cx-doc b{display:block;font-family:Manrope,sans-serif;font-weight:600;font-size:14.5px;
  line-height:1.25}
.cx-doc span{display:block;margin-top:4px;font-size:12.5px;line-height:1.45;
  color:rgba(255,255,255,.44)}
.cx-doc.on{border-color:#F7F788;background:rgba(247,247,136,.13)}
.cx-doc.on b{color:#F7F788}
.cx-doc.on span{color:rgba(255,255,255,.62)}
.cx-haveout{margin-top:17px;padding-top:15px;border-top:1px solid rgba(255,255,255,.10)}
.cx-haveout .cx-note{margin:0}

/* "Or ask someone" is the partner column to #tSoon. When tSoon is hidden — which
   it is on all 44, since no tool is in a 'soon' state — this column was left
   dangling as a bare heading and two bullets with nothing to pair against. The
   same happens on the live site. */
#tSoon[hidden] + .upcol{display:none}

/* ══════════════════════════════════════════════════════════════════════
   HUB — coverage infographic
   Nine documents, 44 calculators. The bar shows how many each report
   unlocks on its own, so the value of going to find one is visible
   before you tick anything.
   ══════════════════════════════════════════════════════════════════════ */
.cx-cov{margin:17px 0 0;padding-top:16px;border-top:1px solid rgba(255,255,255,.10)}
.cx-covrow{display:grid;grid-template-columns:minmax(120px,158px) 1fr 68px;gap:13px;
  align-items:center;padding:5px 0}
.cx-covlbl{font-size:13px;color:rgba(255,255,255,.62);line-height:1.3}
.cx-covrow.on .cx-covlbl{color:#F7F788;font-weight:600}
.cx-covbar{height:9px;border-radius:5px;background:rgba(0,0,0,.34);overflow:hidden}
.cx-covbar i{display:block;height:100%;border-radius:5px;background:rgba(143,180,255,.62);
  transition:width .5s cubic-bezier(.22,1,.36,1)}
.cx-covrow.on .cx-covbar i{background:#F7F788}
.cx-covn{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11.5px;white-space:nowrap;
  font-variant-numeric:tabular-nums;color:rgba(255,255,255,.46);text-align:right}
.cx-covrow.on .cx-covn{color:#F7F788}

/* Vertical rhythm on the tool pages. `.sec2` carries margin-top clamp(30px,4vw,50px)
   and `.so` adds its own on top, so at desktop width the last content block and the
   second-opinion CTA were separated by well over 100px of nothing. The sections are
   already bounded by their own panels and borders, so they do not need that much air
   to read as separate. */
#v-tool > #tLive{margin:16px 0 0}
#v-tool > #so-tool,
#v-tool ~ .so,
.so{margin-top:clamp(20px,2.6vw,32px)}
#v-tool > .formula{padding-top:30px;padding-bottom:14px}
#v-tool > #tFoot{margin-top:18px}

/* "Related calculators" is a direct child of #v-tool, so it was falling into the
   catch-all order:13 and its position depended on DOM order rather than intent.
   Give it an explicit slot and the same tightened margin — the descendant
   selector above does not reach it. */
/* The trailing sections ("Related calculators", the second-opinion CTA) are NOT
   inside #v-tool — the parser puts them at body level — so every #v-tool-scoped
   selector missed them. Target them directly. .sec2 shipped with
   margin-top:clamp(30px,4vw,50px) and .so adds clamp(28px,4vw,44px) on top. */
.sec2{margin-top:clamp(18px,2.2vw,28px)}
.so{margin-top:clamp(18px,2.4vw,30px)}

/* ══════════════════════════════════════════════════════════════════════
   The trailing blocks escape the page wrapper.

   .wr is max-width:1120px with auto margins and a clamped gutter, but the
   markup closes it early: #tClin, #clinDoc, both trailing .sec2 blocks,
   #so-tool and #tFoot are direct children of <body>. They render full-bleed
   at viewport width with no gutter, so "Related calculators" sat flush to
   the window edge while everything above it was centred in 1120px.

   Plain blocks take the gutter as padding; .so is a bordered card, so it
   takes it as width instead — otherwise its background would span the
   gutter and sit wider than the content column above it.
   ══════════════════════════════════════════════════════════════════════ */
:root{--cx-gutter:clamp(14px,4vw,42px)}

body > .sec2,
body > .note,
body > #tClin,
body > #clinDoc{
  max-width:1120px;
  margin-left:auto;margin-right:auto;
  padding-left:var(--cx-gutter);padding-right:var(--cx-gutter);
}
body > .so{
  max-width:calc(1120px - (2 * var(--cx-gutter)));
  margin-left:auto;margin-right:auto;
}