/* The Next-Hour pages (boards X3-3a/b/c, canvas 3-2 v38): the app's design system on the web.
   Light and dark by the reader's setting. Dark stands on the app's grouped gray, never near-black
   (Khaled, 12 Nov). The ink hero card is ink in both themes, as in the app. No script, no inline
   style: the CSP allows this file, the host's images and the display face only. */

@font-face {
  font-family: "Anvilhead Display";
  src: url("/static/display.v1.ttf") format("truetype");
  font-weight: 300 600;
  font-stretch: 125%;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --bg: #F4F6F9;
  --label-1: #0A0D12;
  --label-2: #5B6472;
  --label-3: #5F6774;
  --tint: #1F66C9;
  --separator: #E2E6EB;
  --card: #FFFFFF;
  --card-edge: rgba(10, 13, 18, .06);
  --warn: #C4161C;
  --warn-edge: rgba(196, 22, 28, .38);
  --glass: rgba(255, 255, 255, .72);
  --glass-edge: rgba(10, 13, 18, .10);
  --glass-shadow: 0 6px 24px rgba(10, 13, 18, .08);
  --hero: #0B0E13;
  --hero-edge: rgba(255, 255, 255, 0);
  --hero-label: #F3F5F8;
  --hero-axis: #7C8593;
  --hero-chip: rgba(243, 245, 248, .10);
  --hero-tag-edge: rgba(243, 245, 248, .20);
  --hero-none: rgba(243, 245, 248, .25);
  --hero-track: rgba(243, 245, 248, .07);
  --rain: #9FD4FF;
  --snow: #A9B6E8;
  --mix: #C2CDF2;
  --text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --display: "Anvilhead Display", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --column: min(100vw, 600px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1C1C1E;
    --label-1: #F3F5F8;
    --label-2: #98A2B3;
    --label-3: #7C8593;
    --tint: #9FD4FF;
    --separator: #38383A;
    --card: #2C2C2E;
    --card-edge: rgba(255, 255, 255, .06);
    --warn: #FF6961;
    --warn-edge: rgba(255, 105, 97, .45);
    --glass: rgba(44, 44, 46, .78);
    --glass-edge: rgba(255, 255, 255, .10);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, .28);
    --hero: #0F1319;
    --hero-edge: rgba(255, 255, 255, .08);
  }
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--label-1);
  font: 400 15px/20px var(--text);
  letter-spacing: -.23px;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

main {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 8px max(16px, env(safe-area-inset-right)) 40px max(16px, env(safe-area-inset-left));
}

@media (min-width: 700px) {
  main { padding-top: 56px; padding-bottom: 72px; }
}

a { color: var(--tint); text-decoration: none; }
a:hover { text-decoration: underline; }
p { margin: 0; }

/* 1 · NWS warnings in force lead, word for word (X3-3c) */
.warnings, .unchecked {
  margin: 0 0 18px;
  padding: 16px 16px 14px;
  border-radius: 26px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--warn-edge);
}
.unchecked { box-shadow: inset 0 0 0 1px var(--card-edge); color: var(--label-1); }
.warning + .warning { margin-top: 14px; padding-top: 14px; border-top: .5px solid var(--separator); }
.warning header { display: flex; align-items: flex-start; gap: 8px; }
.warning header svg { flex: none; margin-top: 4px; }
.warning header svg .sign { fill: var(--warn); }
.warning header svg .mark { fill: var(--card); }
.warning h2 {
  margin: 0;
  min-width: 0;
  font: 600 20px/26px var(--display);
  font-stretch: 125%;
  letter-spacing: -.02em;
  color: var(--label-1);
}
.warning .headline { margin-top: 8px; color: var(--label-1); }
.warning .issued { margin-top: 6px; font-size: 13px; line-height: 18px; letter-spacing: -.08px; color: var(--label-2); }
.warning .read { margin-top: 8px; font-weight: 600; }
.warnings .more { margin-top: 10px; font-weight: 600; }
.warnings .follow { margin-top: 6px; font-size: 13px; line-height: 18px; letter-spacing: -.08px; color: var(--label-2); }

/* 2 · the place and the question, small */
h1 {
  margin: 0;
  font: 400 15px/20px var(--text);
  letter-spacing: -.23px;
  color: var(--label-2);
}
h1 .place { color: var(--label-1); font-weight: 600; }

/* 3 · THE ANSWER: the display face, the state then the window; its source and dated time */
.answer { margin-top: 14px; }
.answer .line { color: var(--label-1); }
.answer .lead, .answer .rest { display: block; font-family: var(--display); font-stretch: 125%; letter-spacing: -.02em; }
.answer .lead { font-weight: 600; }
.answer .rest { font-weight: 300; }
.answer.wet .lead { font-size: min(64px, calc((var(--column) - 32px) / var(--em, 4))); line-height: 1; }
.answer.wet .rest { margin-top: 6px; font-size: min(38px, 9.6vw); line-height: 1.16; }
.answer.clear .lead { font-size: min(46px, calc((var(--column) - 32px) / var(--em, 4))); line-height: 1.13; }
.answer.clear .rest { margin-top: 4px; font-size: min(30px, 7.6vw); line-height: 1.2; }
.answer.delayed .lead { font-size: min(30px, calc((var(--column) - 32px) / var(--em, 4))); line-height: 1.2; }
.answer.delayed .rest { margin-top: 6px; font-size: 20px; line-height: 26px; }
/* Under a warning the answer steps down (board X3-3c): the warning leads. */
.warnings ~ .answer, .unchecked ~ .answer { margin-top: 10px; }
.warnings ~ .answer.wet .lead { font-size: min(44px, calc((var(--column) - 32px) / var(--em, 4))); line-height: 1.09; }
.warnings ~ .answer.wet .rest { margin-top: 2px; font-size: min(30px, 7.6vw); line-height: 1.2; }
.fit-30 { --em: 3; } .fit-325 { --em: 3.25; } .fit-35 { --em: 3.5; } .fit-375 { --em: 3.75; }
.fit-40 { --em: 4; } .fit-425 { --em: 4.25; } .fit-45 { --em: 4.5; } .fit-475 { --em: 4.75; }
.fit-50 { --em: 5; } .fit-525 { --em: 5.25; } .fit-55 { --em: 5.5; } .fit-575 { --em: 5.75; }
.fit-60 { --em: 6; } .fit-625 { --em: 6.25; } .fit-65 { --em: 6.5; } .fit-675 { --em: 6.75; }
.fit-70 { --em: 7; } .fit-75 { --em: 7.5; } .fit-80 { --em: 8; } .fit-90 { --em: 9; }
.fit-100 { --em: 10; }
.answer .note {
  margin-top: 12px;
  max-width: 350px;
  font-size: 13px;
  line-height: 18px;
  letter-spacing: -.08px;
  color: var(--label-2);
}

/* The quiet offer, under the answer: a small glass capsule (34 pt) */
.offer {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  margin-top: 16px;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  box-shadow: inset 0 0 0 .5px var(--glass-edge), var(--glass-shadow);
  color: var(--label-1);
  font-weight: 600;
  line-height: 20px;
}
.offer:hover { text-decoration: none; }

/* 4 · 5 · the one ink hero card: the radar loop, then the next-hour bars */
.hero {
  margin-top: 24px;
  padding: 16px 16px 14px;
  border-radius: 26px;
  background: var(--hero);
  box-shadow: inset 0 0 0 1px var(--hero-edge);
  color: var(--hero-label);
}
.hero figure { margin: 0; }
.loop {
  position: relative;
  height: 136px;
  border-radius: 6px;
  overflow: hidden;
  background: #151A21;
}
@media (min-width: 700px) { .loop { height: 220px; } }
.loop img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.loop img { object-fit: cover; object-position: 50% 50%; }
/* the town's dot over the frames, cropped as they are (viewBox + slice); never animated */
.loop .dot { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.loop .frame { opacity: 0; animation: frame 6s infinite; }
.loop .f1 { animation-delay: 0s; }
.loop .f2 { animation-delay: 1s; }
.loop .f3 { animation-delay: 2s; }
.loop .f4 { animation-delay: 3s; }
.loop .f5 { animation-delay: 4s; }
@keyframes frame {
  0% { opacity: 0; }
  3% { opacity: 1; }
  16% { opacity: 1; }
  20% { opacity: 0; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .loop .frame { display: none; animation: none; }
}
.caption, .axis {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0;
  color: var(--hero-axis);
  font-variant-numeric: tabular-nums;
}
.caption { margin-top: 8px; }
.caption span:last-child { text-align: right; }
.chart { margin: 14px 0 0; }
.chart + .axis { margin-top: 6px; }
.hero > :first-child { margin-top: 0; }
.chart svg { display: block; width: 100%; overflow: visible; }
.chart .tall { height: 72px; }
.chart .flat { height: 26px; }
.bar.rain { fill: var(--rain); }
.bar.snow { fill: var(--snow); }
.bar.mix { fill: var(--mix); }
.bar.none { fill: var(--hero-none); }
.track { fill: var(--hero-track); }
.stem { fill: var(--hero-tag-edge); }
.tag rect { fill: var(--hero-chip); stroke: var(--hero-tag-edge); stroke-width: .5px; }
.tag text {
  fill: var(--hero-label);
  font: 600 12px var(--text);
  font-variant-numeric: tabular-nums;
}

/* The line for later and the constant warnings link */
.links { margin-top: 16px; color: var(--label-2); }
.links p + p { margin-top: 4px; }

/* 6 · 7 · what differs town to town, and how it works */
.facts { margin-top: 20px; }
.facts ul { list-style: none; margin: 0; padding: 0; }
.facts li {
  padding: 8px 0;
  border-top: .5px solid var(--separator);
  font-size: 13px;
  line-height: 18px;
  letter-spacing: -.08px;
  color: var(--label-2);
}
.facts li:last-child { border-bottom: .5px solid var(--separator); }
.method { margin-top: 12px; font-size: 13px; line-height: 18px; letter-spacing: -.08px; color: var(--label-2); }

/* 9 · the constant footer, after a hairline */
footer {
  margin-top: 16px;
  padding-top: 12px;
  border-top: .5px solid var(--separator);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0;
  color: var(--label-3);
}
footer p + p { margin-top: 8px; }
footer a { color: var(--label-3); text-decoration: underline; text-underline-offset: 2px; }
.crumbs { margin-top: 20px; font-size: 12px; line-height: 16px; letter-spacing: 0; color: var(--label-3); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.crumbs li + li::before { content: "\203A"; padding: 0 6px; }
.crumbs a { color: var(--label-3); }

/* Hubs and messages */
.list { list-style: none; margin: 16px 0 0; padding: 0; columns: 2 160px; column-gap: 16px; }
.list li { padding: 6px 0; break-inside: avoid; }
.message h1 { font: 600 30px/36px var(--display); font-stretch: 125%; letter-spacing: -.02em; color: var(--label-1); }
.message p { margin-top: 12px; color: var(--label-2); }
.message + footer { margin-top: 32px; }
.title { font: 600 30px/36px var(--display); font-stretch: 125%; letter-spacing: -.02em; color: var(--label-1); }