/* ============================================================
   Readiness Check — same sky, one panel at a time.
   Each panel owns a full background, so light/dark ink is
   decided by which panel is showing, never by scroll position.
   ============================================================ */

.calc-body{background:var(--haze)}

/* Each panel owns a different sky, so a transparent bar would seam against
   whichever one is showing. Here the bar is simply solid chrome. */
.calc-body .topbar,
.calc-body .topbar.is-stuck{
  background:rgba(226,238,250,.94);
  backdrop-filter:blur(10px);
  border-bottom-color:rgba(14,36,64,.12);
}

.panel{display:none;padding:clamp(2.5rem,6vw,5rem) 0 clamp(4rem,8vw,6rem);min-height:62vh}
.panel.is-on{display:block}

.panel--intro  {background:linear-gradient(180deg,var(--zenith) 0%,var(--morning) 55%,var(--dawn) 100%)}
.panel--assess {background:linear-gradient(180deg,var(--haze) 0%,#D3E4F4 100%)}
.panel--results{background:linear-gradient(180deg,var(--azure) 0%,var(--deep) 60%,var(--strato) 100%);color:var(--light)}

/* ── intro ──────────────────────────────────────────────── */
.calc__intro{max-width:720px}
.calc__title{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.9rem,1.2rem + 2.8vw,3rem);
  line-height:1.25;margin:0 0 1.2rem;text-wrap:balance;
}
.calc__lede{font-size:clamp(1.02rem,.98rem + .35vw,1.18rem);color:var(--ink-mid);max-width:54ch}

.calc__start{margin:2.4rem 0 1.5rem;max-width:520px}
.calc__start label{display:block;font-weight:600;font-size:.95rem;margin-bottom:.5rem}
.calc__start input{
  font-family:var(--sans);font-size:1.05rem;color:var(--ink);width:100%;
  background:rgba(255,255,255,.7);border:1px solid rgba(14,36,64,.28);
  border-radius:4px;padding:.85rem .95rem;
}
.calc__start input:focus{border-color:var(--sun);background:#fff;outline:none}
.calc__start input[aria-invalid="true"]{border-color:#B4432A}
.calc__start .btn{margin-top:1.1rem}

.calc__hint{font-size:.9rem;color:var(--ink-mid);margin:.6rem 0 0;max-width:46ch}
.calc__disclaimer{
  font-size:.86rem;line-height:1.6;color:var(--ink-mid);
  max-width:60ch;margin:2.5rem 0 0;padding-top:1.2rem;
  border-top:1px solid rgba(14,36,64,.15);
}
.panel--results .calc__disclaimer{color:#9FBAD6;border-top-color:rgba(255,255,255,.16)}

/* the outline button carries dark ink by default — unusable on deep sky */
.panel--results .btn--line{color:var(--light);border-color:rgba(255,255,255,.5)}
.panel--results .btn--line:hover{background:var(--light);color:var(--deep);border-color:var(--light)}

/* ── progress ───────────────────────────────────────────── */
.progress{margin-bottom:clamp(1.8rem,4vw,2.6rem);max-width:820px}
.progress__bar{height:2px;background:rgba(14,36,64,.15);position:relative}
.progress__fill{position:absolute;left:0;top:0;height:100%;width:0;background:var(--sun)}
@media (prefers-reduced-motion:no-preference){.progress__fill{transition:width .3s ease}}
.progress__label{font-size:.82rem;font-weight:500;color:var(--ink-mid);margin:.6rem 0 0}

.step-head{max-width:720px;margin-bottom:2rem}
.calc__h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.6rem,1.2rem + 1.6vw,2.3rem);
  line-height:1.3;margin:0 0 .5rem;
}
.panel--results .calc__h2{color:var(--light)}
.calc__dimblurb{color:var(--ink-mid);margin:0;max-width:52ch}

/* ── questions ──────────────────────────────────────────── */
.qset{max-width:820px}
.q{border:0;padding:0;margin:0 0 2.6rem}
.q__text{
  font-family:var(--serif);font-size:clamp(1.1rem,1rem + .55vw,1.4rem);
  line-height:1.4;padding:0;margin:0 0 1rem;max-width:46ch;
}
.scale{display:grid;gap:.5rem}
.scale__opts{display:flex;gap:clamp(2px,.8vw,8px);flex-wrap:nowrap}
.opt{position:relative;flex:1 1 0;min-width:0}
.opt input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.opt span{
  display:grid;place-items:center;height:46px;
  font-size:.92rem;font-weight:500;font-variant-numeric:tabular-nums;
  background:rgba(255,255,255,.55);border:1px solid rgba(14,36,64,.2);
  border-radius:3px;color:var(--ink-mid);
}
.opt input:hover + span{border-color:rgba(14,36,64,.45)}
.opt input:focus-visible + span{outline:2px solid var(--sun);outline-offset:2px}
.opt input:checked + span{background:var(--ink);border-color:var(--ink);color:var(--light);font-weight:600}
.scale__anchor{font-size:.8rem;color:var(--ink-mid)}
.scale__anchor--hi{text-align:right}

.calc__nav{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:.5rem}
.calc__nav--end{margin-top:2.5rem}
.btn[disabled]{opacity:.35;pointer-events:none}

/* ── results ────────────────────────────────────────────── */
.results__for{
  font-family:var(--serif);font-size:1.1rem;color:#BCD4EA;
  margin:0 0 1.8rem;padding-bottom:1rem;border-bottom:1px solid rgba(255,255,255,.16);
}
.score{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:start;margin-bottom:3rem}
.score__figure{display:flex;align-items:baseline;gap:.3rem}
.score__num{
  font-family:var(--serif);font-size:clamp(4rem,2.5rem + 7vw,7rem);
  line-height:.9;color:var(--light);font-variant-numeric:tabular-nums;
}
.score__outof{font-size:1rem;color:#9FBAD6}
.score__read p{color:#C3D7EA;max-width:52ch}
.score__resist{font-size:.92rem;color:#9FBAD6 !important}
@media (max-width:620px){.score{grid-template-columns:1fr;gap:1rem}}

.results__h3{
  font-family:var(--serif);font-weight:400;font-size:1.35rem;
  color:var(--light);margin:2.8rem 0 1rem;
}
.results__sub{color:#9FBAD6;font-size:.92rem;margin:-.5rem 0 1.2rem;max-width:56ch}

.bars{list-style:none;margin:0;padding:0;max-width:720px}
.bar{margin-bottom:1.1rem}
.bar__head{display:flex;justify-content:space-between;gap:1rem;margin-bottom:.4rem}
.bar__name{font-weight:500;color:var(--light)}
.bar__meta{display:flex;gap:1rem;font-size:.84rem;color:#9FBAD6;font-variant-numeric:tabular-nums;white-space:nowrap}
.bar__track{height:8px;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden}
.bar__fill{display:block;height:100%;background:linear-gradient(90deg,#5A98CE,#8FC4E8)}
.bar--fine{margin-bottom:.75rem}
.bar--fine .bar__track{height:5px}
.bar--fine .bar__name{font-weight:400;font-size:.95rem;color:#D6E6F4}

.callouts{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin:2.8rem 0 0}
@media (max-width:720px){.callouts{grid-template-columns:1fr}}
.callout{padding:1.4rem 1.5rem;border-radius:4px;background:rgba(255,255,255,.055);border-left:3px solid}
.callout--block{border-left-color:var(--sun)}
.callout--strong{border-left-color:#7FD1A8}
.callout h3{font-size:.8rem;font-weight:600;letter-spacing:.02em;color:#9FBAD6;margin:0 0 .4rem}
.callout .callout__name{
  font-family:var(--serif);font-size:1.5rem;line-height:1.25;
  color:var(--light);margin:0 0 .5rem;max-width:none;
}
.callout p{color:#C3D7EA;font-size:.95rem;margin:0;max-width:40ch}

.board{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;max-width:860px}
@media (max-width:720px){.board{grid-template-columns:1fr}}
.board__col{padding:1.4rem 1.5rem;border-radius:4px;background:rgba(255,255,255,.055)}
.board__col h4{
  font-family:var(--serif);font-weight:400;font-size:1.25rem;
  margin:0 0 .8rem;padding-bottom:.6rem;border-bottom:1px solid rgba(255,255,255,.16);
}
.board__col--do h4{color:#9BDCBB}
.board__col--dont h4{color:#F2B08A}
.board__col ul{list-style:none;margin:0;padding:0}
.board__col li{position:relative;padding-left:1.1rem;margin-bottom:.75rem;color:#C9DCEE;font-size:.95rem;line-height:1.6}
.board__col li::before{content:"";position:absolute;left:0;top:.72em;width:6px;height:1.5px;background:currentColor;opacity:.5}

.experiment{
  max-width:640px;padding:1.6rem 1.7rem;border-radius:4px;
  background:rgba(233,162,59,.1);border:1px solid rgba(233,162,59,.35);
}
.experiment__dim{font-size:.8rem;font-weight:600;color:#E9A23B;margin:0 0 .5rem}
.experiment__text{font-family:var(--serif);font-size:1.2rem;line-height:1.5;color:var(--light);margin:0 0 .9rem}
.experiment__after{font-size:.9rem;color:#9FBAD6;margin:0}

/* ── history chart ──────────────────────────────────────── */
.chart{width:100%;max-width:620px;height:auto;overflow:visible}
.chart__line{fill:none;stroke:var(--sun);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart circle{fill:var(--sun)}
.chart__grid{stroke:rgba(255,255,255,.16);stroke-width:1}
.chart__axis{fill:#8AA6C2;font-size:11px;text-anchor:end;font-family:var(--sans)}
.chart__val{fill:#D6E6F4;font-size:11px;text-anchor:middle;font-family:var(--sans)}