/* Snow Day Calculator - site styles.
   Idea: a night-sky hero with falling snow and a school bus destination sign for the result,
   then a light frost body with big editorial type. */

:root {
  color-scheme: light dark;
  --midnight: #0b1033;
  --indigo: #1c2679;
  --bus: #ffc61a;
  --led: #ffb81c;
  --mitten: #ff4e5f;

  --bg: #eef6ff;
  --paper: #ffffff;
  --ink: #0b1033;
  --muted: #46517a;
  --line: #c9d8ee;
  --link: #1559b8;
  --focus: #1559b8;
  --c-snow: #2f86e6;
  --c-ice: #8b5cf6;
  --c-temp: #d97706;
  --good: #12805c;

  --font: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-dot: "Doto", ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a1030;
    --paper: #121b4a;
    --ink: #eaf1ff;
    --muted: #a3b4dc;
    --line: #273164;
    --link: #8cc4ff;
    --focus: #ffc61a;
    --c-snow: #6db3ff;
    --c-ice: #b79cff;
    --c-temp: #ffb347;
    --good: #3ddc97;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--font);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
a { color: var(--link); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.sky :focus-visible, .foot :focus-visible { outline-color: var(--bus); }
button, input, select { font: inherit; }
.wrap { width: min(1120px, 100% - 40px); margin-inline: auto; position: relative; z-index: 1; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--bus); color: var(--midnight); padding: 10px 16px; border-radius: 10px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- sky / hero ---------- */
.sky {
  position: relative;
  overflow-x: clip; /* overflow-y stays visible so the city suggestions can drop below the hero */
  color: #fff;
  background:
    radial-gradient(900px 480px at 88% -8%, rgba(86, 104, 255, 0.55), transparent 62%),
    radial-gradient(700px 400px at 0% 100%, rgba(40, 160, 255, 0.18), transparent 60%),
    linear-gradient(180deg, #0b1033 0%, #131b5a 65%, #1c2679 100%);
}
.sky canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.drift { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(56px, 9vw, 120px); display: block; z-index: 1; }
.drift path { fill: var(--bg); }

.top { display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; padding: 18px 0 6px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 800; font-size: 1.18rem; letter-spacing: -0.015em; }
.logo svg { flex: none; }
.nav { display: flex; gap: 6px 22px; flex-wrap: wrap; }
.nav a { color: #cfe0ff; text-decoration: none; font-weight: 600; font-size: 0.97rem; padding: 4px 0; }
.nav a:hover, .nav a[aria-current="page"] { color: #fff; text-decoration: underline; text-decoration-color: var(--bus); text-decoration-thickness: 3px; }

.hero { padding: clamp(26px, 5vw, 58px) 0 clamp(78px, 10vw, 140px); z-index: 3; }
h1 {
  margin: 0 0 0.3em;
  font-size: clamp(2.55rem, 8.6vw, 5.7rem);
  font-weight: 800;
  font-stretch: 80%;
  line-height: 0.94;
  letter-spacing: -0.035em;
  max-width: 11.5em;
  text-wrap: balance;
}
.lede { margin: 0 0 26px; max-width: 46ch; font-size: clamp(1.05rem, 2.3vw, 1.3rem); line-height: 1.5; color: #d6e4ff; text-wrap: pretty; }

.finder { display: flex; gap: 10px; flex-wrap: wrap; max-width: 700px; }
.finder .field { flex: 1 1 280px; }
.finder input[type="text"] {
  width: 100%; height: 62px; padding: 0 26px; border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.3); background: rgba(8, 12, 44, 0.55);
  color: #fff; font-size: 1.15rem; backdrop-filter: blur(6px);
}
.finder input::placeholder { color: rgba(255, 255, 255, 0.62); }
.finder input[type="text"]:focus { outline: none; border-color: var(--bus); box-shadow: 0 0 0 4px rgba(255, 198, 26, 0.28); }
.finder .field { position: relative; }
.suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 30; margin: 0; padding: 6px;
  list-style: none; max-height: 320px; overflow-y: auto; border-radius: 22px;
  background: #0f1750; border: 1.5px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.6);
}
.suggest[hidden] { display: none; }
.suggest li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 12px 16px; border-radius: 16px;
  color: #fff; cursor: pointer; font-weight: 700; line-height: 1.25;
}
.suggest li span { color: #b9ccf5; font-weight: 500; font-size: 0.93rem; }
.suggest li[aria-selected="true"], .suggest li:hover { background: var(--bus); color: var(--midnight); }
.suggest li[aria-selected="true"] span, .suggest li:hover span { color: #2b3158; }
.go {
  height: 62px; padding: 0 34px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--bus); color: var(--midnight); font-weight: 750; font-size: 1.12rem;
  transition: background 0.15s, transform 0.1s;
}
.go:hover { background: #ffd75a; }
.go:active { transform: translateY(1px); }
.go:disabled { opacity: 0.7; cursor: progress; }

.tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; max-width: 700px; }
.chip, .tune > summary {
  display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer;
  border: 1.5px solid rgba(255, 255, 255, 0.32); border-radius: 999px; background: transparent;
  color: #e6efff; padding: 8px 15px; font-weight: 600; font-size: 0.93rem;
}
.chip:hover, .tune > summary:hover { background: rgba(255, 255, 255, 0.1); }
.tune > summary::-webkit-details-marker { display: none; }
.tune > summary::after { content: "+"; font-weight: 700; }
.tune[open] > summary::after { content: "\2212"; }
.seg { display: inline-flex; border: 1.5px solid rgba(255, 255, 255, 0.32); border-radius: 999px; overflow: hidden; }
.seg button { border: 0; background: transparent; color: #e6efff; padding: 8px 14px; font-weight: 600; font-size: 0.93rem; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--bus); color: var(--midnight); }
.tune { flex-basis: 100%; }
.tune > summary { width: max-content; }
.tune-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; max-width: 700px; }
.tune-panel label { display: block; font-size: 0.88rem; font-weight: 600; color: #cfe0ff; margin-bottom: 6px; }
.tune-panel select, .tune-panel input {
  width: 100%; padding: 11px 14px; border-radius: 14px; color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.3); background: rgba(8, 12, 44, 0.6);
}
.tune-panel option { color: #0b1033; background: #fff; }
.pick { margin-top: 12px; max-width: 700px; }
.pick label { display: block; font-size: 0.88rem; font-weight: 600; color: #cfe0ff; margin-bottom: 6px; }
.pick select { width: 100%; padding: 11px 14px; border-radius: 14px; color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.3); background: rgba(8, 12, 44, 0.6); }
.pick option { color: #0b1033; background: #fff; }
.err { margin: 14px 0 0; max-width: 700px; padding: 10px 16px; border-radius: 14px; background: rgba(255, 78, 95, 0.18); border: 1.5px solid rgba(255, 120, 133, 0.7); color: #ffe3e6; font-weight: 600; }

/* ---------- bus destination sign (result) ---------- */
.hero-grid { display: grid; gap: clamp(28px, 4vw, 40px); }
.hero-main, .hero-side { min-width: 0; }
.sign {
  max-width: 880px; padding: 14px; border-radius: 22px; background: #04060f; container-type: inline-size;
  box-shadow: 0 0 0 3px #232a66, 0 0 0 7px #0a0f33, 0 34px 60px -24px rgba(0, 0, 0, 0.75);
}
.sign-panel {
  position: relative; display: grid; gap: 10px; padding: 16px 22px 20px; border-radius: 12px;
  background: #05070f; border: 1px solid #12183f; overflow: hidden;
  font-family: var(--font-dot); color: var(--led); text-transform: uppercase; letter-spacing: 0.05em;
  text-shadow: 0 0 8px rgba(255, 184, 28, 0.7), 0 0 24px rgba(255, 184, 28, 0.3);
}
.sign-panel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at center, transparent 0 1.5px, rgba(5, 7, 15, 0.55) 2.2px);
  background-size: 5px 5px;
}
.sign-row { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 18px; flex-wrap: wrap; font-size: clamp(14px, 2.7vw, 21px); font-weight: 700; }
.sign-main { display: flex; justify-content: space-between; align-items: center; gap: 4px 20px; flex-wrap: wrap; }
.sign-word { font-size: clamp(32px, 7.6vw, 66px); font-weight: 900; line-height: 1; }
.sign-pct { font-size: clamp(70px, 19vw, 158px); font-weight: 900; line-height: 0.92; }
.sign-idle { font-size: clamp(26px, 6vw, 52px); font-weight: 900; line-height: 1.1; overflow: hidden; white-space: nowrap; }
.sign-idle span { display: inline-block; padding-left: 100%; animation: scroll 24s linear infinite; }
.sign-wait { font-size: clamp(26px, 6vw, 52px); font-weight: 900; }
.sign-wait::after { content: "_"; animation: blink 0.8s steps(1) infinite; }
.sign[data-state="idle"] .on-result, .sign[data-state="idle"] .on-wait,
.sign[data-state="wait"] .on-result, .sign[data-state="wait"] .on-idle,
.sign[data-state="result"] .on-idle, .sign[data-state="result"] .on-wait { display: none; }
.sign.boot .led { animation: boot 0.9s steps(16) both; }
.sign.boot .led-b { animation-delay: 0.15s; }
.sign.boot .led-c { animation-delay: 0.3s; }
.sign.boot .led-d { animation-delay: 0.6s; }
/* scale the sign text with the sign itself, not the viewport */
@supports (container-type: inline-size) {
  .sign-row { font-size: clamp(12px, 3.7cqw, 21px); }
  .sign-word { font-size: clamp(28px, 10cqw, 66px); }
  .sign-pct { font-size: clamp(64px, 34cqw, 158px); }
  .sign-idle, .sign-wait { font-size: clamp(22px, 7.4cqw, 52px); }
}
@keyframes boot { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes scroll { to { transform: translateX(-100%); } }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- result details ---------- */
.report { padding: 6px 0 34px; }
.report[hidden] { display: none; }
.report h2 { margin: 0 0 6px; font-size: clamp(1.7rem, 4vw, 2.5rem); font-weight: 780; font-stretch: 88%; letter-spacing: -0.03em; line-height: 1.05; }
.report .sub { margin: 0 0 22px; color: var(--muted); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-top: 2px solid var(--ink); }
.stat { padding: 14px 14px 14px 0; border-bottom: 1px solid var(--line); }
.stat span { display: block; color: var(--muted); font-size: 0.88rem; }
.stat b { font-size: 1.75rem; font-weight: 750; letter-spacing: -0.02em; }
.report-cols { display: grid; gap: 30px 56px; margin-top: 30px; }
.report h3 { margin: 0 0 10px; font-size: 1.2rem; font-weight: 750; }
.factor { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: 12px 0; font-size: 0.97rem; }
.factor .bar { grid-column: 1 / -1; height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; }
.factor .bar i { display: block; height: 100%; border-radius: 99px; background: var(--c-snow); }
.factor.neg .bar i { background: var(--good); }
.empty { color: var(--muted); }
.chart svg { width: 100%; height: auto; display: block; }
.chart .c-snow { fill: var(--c-snow); }
.chart .c-ice { fill: var(--c-ice); }
.chart .c-temp { fill: none; stroke: var(--c-temp); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart .c-band { fill: var(--c-temp); opacity: 0.14; }
.chart .c-axis { stroke: var(--line); }
.chart text { fill: var(--muted); font-size: 11px; font-family: var(--font); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 0.85rem; color: var(--muted); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 12px 24px; font-weight: 700; border: 2px solid var(--ink); cursor: pointer; text-decoration: none; background: var(--ink); color: var(--bg); }
.btn.alt { background: transparent; color: var(--ink); }
.btn:hover { text-decoration: none; opacity: 0.9; }

/* ---------- editorial sections ---------- */
.sect { padding: clamp(44px, 7vw, 84px) 0; border-top: 1px solid var(--line); }
.sect > .wrap { display: grid; gap: 22px; }
.sect h2 { margin: 0; font-size: clamp(1.9rem, 4.6vw, 3.1rem); font-weight: 780; font-stretch: 86%; line-height: 1.02; letter-spacing: -0.03em; text-wrap: balance; }
.body > :first-child { margin-top: 0; }
.body p, .body li { max-width: 68ch; }
.body p { margin: 0 0 1.1em; text-wrap: pretty; }
.body h3 { margin: 1.8em 0 0.4em; font-size: 1.3rem; font-weight: 750; letter-spacing: -0.01em; }
.body ul { padding-left: 1.2em; }
.body li { margin-bottom: 0.5em; }
.note { border-left: 6px solid var(--bus); padding: 2px 0 2px 18px; margin: 24px 0; max-width: 68ch; }
.note p { margin: 0; }

.steps { list-style: none; counter-reset: s; padding: 0; margin: 22px 0; display: grid; gap: 24px; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 46px 1fr; gap: 16px; margin: 0; }
.steps li::before { content: counter(s); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--bus); color: var(--midnight); font-weight: 800; font-size: 1.2rem; }
.steps strong { display: block; font-size: 1.15rem; font-weight: 750; margin-bottom: 2px; }

.tbl-wrap { overflow-x: auto; margin: 24px 0; }
table { border-collapse: collapse; width: 100%; min-width: 540px; font-size: 0.99rem; }
th { text-align: left; font-weight: 750; border-bottom: 2px solid var(--ink); padding: 10px 18px 10px 0; }
td { padding: 13px 18px 13px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
td:first-child { font-weight: 700; }

dl.terms { margin: 0; }
dl.terms dt { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 1.18rem; font-weight: 750; }
dl.terms dt:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
dl.terms dd { margin: 4px 0 0; max-width: 68ch; }

.faq { border-bottom: 1px solid var(--line); }
.faq:first-child { border-top: 1px solid var(--line); }
.faq summary { position: relative; cursor: pointer; list-style: none; padding: 19px 44px 19px 0; font-size: 1.13rem; font-weight: 700; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 1.7rem; font-weight: 500; color: var(--link); }
.faq[open] summary::after { content: "\2212"; }
.faq .a { padding: 0 0 22px; max-width: 68ch; }
.faq .a p { margin: 0 0 0.8em; }

.guides a.g { display: block; padding: 20px 0; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.guides a.g:first-child { border-top: 1px solid var(--line); }
.guides .gt { display: block; font-size: clamp(1.3rem, 2.8vw, 1.8rem); font-weight: 750; letter-spacing: -0.02em; line-height: 1.15; }
.guides .gd { display: block; margin-top: 6px; color: var(--muted); max-width: 62ch; }
.guides a.g:hover .gt { text-decoration: underline; text-decoration-color: var(--bus); text-decoration-thickness: 0.16em; text-underline-offset: 0.14em; }

.cta { background: var(--bus); color: var(--midnight); padding: clamp(36px, 6vw, 64px) 0; }
.cta .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px 40px; flex-wrap: wrap; }
.cta h2 { margin: 0; font-size: clamp(1.7rem, 4.2vw, 2.8rem); font-weight: 800; font-stretch: 84%; letter-spacing: -0.03em; line-height: 1.02; max-width: 16em; }
.cta .btn { background: var(--midnight); border-color: var(--midnight); color: #fff; font-size: 1.1rem; padding: 15px 30px; }

/* ---------- inner pages ---------- */
.sky--page .hero { padding: clamp(18px, 3vw, 34px) 0 clamp(70px, 9vw, 120px); }
.sky--page h1 { font-size: clamp(2.2rem, 6.4vw, 4.3rem); max-width: 15em; }
.crumbs { font-size: 0.92rem; color: #b9ccf5; margin: 0 0 14px; }
.crumbs a { color: #dbe7ff; }
.crumbs span { margin: 0 6px; opacity: 0.6; }
.article { width: min(760px, 100% - 40px); margin: 0 auto 0 max(20px, calc((100% - 1120px) / 2)); padding: 26px 0 30px; }
.article h2 { margin: 2em 0 0.45em; font-size: clamp(1.6rem, 3.6vw, 2.15rem); font-weight: 780; font-stretch: 90%; letter-spacing: -0.025em; line-height: 1.08; text-wrap: balance; scroll-margin-top: 20px; }
.article h3 { margin: 1.6em 0 0.35em; font-size: 1.25rem; font-weight: 750; }
.article p { margin: 0 0 1.1em; text-wrap: pretty; }
.article .meta { color: var(--muted); font-size: 0.93rem; margin: 0 0 24px; }
.toc { border: 2px solid var(--ink); border-radius: 18px; padding: 16px 22px; margin: 0 0 12px; }
.toc b { display: block; margin-bottom: 6px; }
.toc ol { margin: 0; padding-left: 1.3em; }
.toc li { margin: 3px 0; }
.related { width: min(760px, 100% - 40px); margin: 0 auto 0 max(20px, calc((100% - 1120px) / 2)); padding: 10px 0 56px; }
.related h2 { margin: 0 0 8px; font-size: 1.6rem; letter-spacing: -0.02em; }

/* ---------- footer ---------- */
.foot { background: var(--midnight); color: #c9d8ff; padding: 52px 0 38px; font-size: 0.97rem; }
.foot .cols { display: grid; gap: 34px; }
.foot h2 { margin: 0 0 10px; font-size: 1rem; font-weight: 700; color: #fff; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin: 6px 0; }
.foot a { color: #e6efff; text-decoration: none; }
.foot a:hover { text-decoration: underline; text-decoration-color: var(--bus); text-decoration-thickness: 2px; }
.foot p { margin: 0 0 12px; max-width: 52ch; }
.foot .small { margin-top: 34px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 0.88rem; color: #9fb3e6; }
.foot .small p { max-width: 90ch; }

.spin { display: inline-block; width: 15px; height: 15px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.7s linear infinite; vertical-align: -2px; margin-right: 8px; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (min-width: 1000px) {
  .hero-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 52px; align-items: center; }
  .hero-grid h1 { font-size: clamp(3.2rem, 5.3vw, 4.9rem); }
}
@media (min-width: 760px) {
  .report-cols { grid-template-columns: 5fr 7fr; }
  .foot .cols { grid-template-columns: 2fr 1fr 1fr 1fr; }
}
@media (min-width: 920px) {
  .sect > .wrap { grid-template-columns: 4fr 8fr; gap: 60px; }
  .sect h2 { position: sticky; top: 28px; align-self: start; }
}
@media (max-width: 560px) {
  .tune-panel { grid-template-columns: 1fr; }
  .go { flex: 1 1 100%; }
  .sign { padding: 10px; }
  .sign-panel { padding: 14px 14px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sign-idle span { animation: none; padding-left: 0; }
  .sign-idle { white-space: normal; }
  .sign.boot .led { animation: none; }
  .sign-wait::after { animation: none; }
  .spin { animation: none; }
}