:root {
  color-scheme: dark;
  --bg: #040a14; --fg: #dff5ea; --muted: #86a79b; --line: #16342e; --field: #0b1626;
  --accent: #5fe0a6; --accent2: #4fd1d9; --violet: #a98bff;
  font-family: system-ui, sans-serif;
}
/* Night sky with a faint green and violet glow at the top, shared by every page. */
body {
  margin: 0; line-height: 1.5; min-height: 100vh; color: var(--fg); background-color: var(--bg);
  background-image: radial-gradient(ellipse 80% 40% at 50% -5%, #0f3a33 0%, transparent 70%), radial-gradient(ellipse 50% 30% at 92% 0%, rgba(169,139,255,.18), transparent 70%);
  background-attachment: fixed; background-repeat: no-repeat;
}
main { max-width: 36rem; margin: 0 auto; padding: 1.25rem; }
h1 { font-size: clamp(2rem, 9vw, 3rem); line-height: 1.05; margin: .5rem 0; font-weight: 300; letter-spacing: .02em;
  background: linear-gradient(90deg, #7dffb8, var(--accent2) 60%, var(--violet)); -webkit-background-clip: text; background-clip: text; color: transparent; }
h2 { font-size: 1.05rem; font-weight: 500; color: var(--accent2); letter-spacing: .03em; }
.muted { color: var(--muted); }
ul { list-style: none; padding: 0; }
li { padding: .6rem 0; border-top: 1px solid var(--line); }
li b { display: block; }
select, input[type=number] { font: inherit; padding: .5rem; background: var(--field); color: var(--fg); border: 1px solid var(--line); border-radius: 6px; }
button { font: inherit; background: rgba(95,224,166,.12); color: var(--fg); border: 1px solid var(--accent); border-radius: 999px; padding: .35rem .9rem; cursor: pointer; }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
summary { color: var(--accent2); }
details { border-top: 1px solid var(--line); padding: .25rem 0; }
dl { display: grid; grid-template-columns: 1fr auto; gap: .25rem 1rem; }
dd { margin: 0; text-align: right; }
a { color: var(--accent); text-underline-offset: 3px; }
nav { font-size: .9rem; }
.plain li b { display: inline; margin-right: .5rem; }
/* Next 24 hours: one column per hour, bar height is the score, hour labelled every 3 hours. */
.tl { list-style: none; padding: 0; margin: .5rem 0; display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 2px; align-items: end; }
.tl li { min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 6rem; font-variant-numeric: tabular-nums; padding: 0; border: 0; font-size: .7rem; color: var(--muted); }
.tl li > time { order: 2; height: 1.1em; margin-top: .25rem; overflow: visible; white-space: nowrap; }
.tl li:not(.lbl) > time { visibility: hidden; }
.tl li > span:last-child { display: none; }
.tl .bar { order: 1; width: 100%; height: calc(max(var(--w), 2%) * .8); min-height: 2px; background: linear-gradient(0deg, var(--c1), var(--c2)); opacity: .75; border-radius: 3px 3px 0 0; }
.kpl li { display: flex; align-items: center; gap: .75rem; }
.kpbadge { flex: 0 0 5.5rem; text-align: center; padding: .15rem .5rem; border-radius: 999px; border: 1px solid var(--line); font-variant-numeric: tabular-nums; color: var(--accent2); }
.kpl .now { background: rgba(95,224,166,.08); border-radius: 8px; padding-left: .4rem; }
.kpl .now .kpbadge { background: rgba(95,224,166,.2); border-color: var(--accent); color: var(--fg); }
.kpl em { font-style: normal; color: var(--accent); }
/* Strength: weak = muted blue, fair = teal, good = green, strong = bright yellow-green. */
.tl li { --c1: #3b5b7a; --c2: #5b7fa6; }
.tl li.s2 { --c1: #1f7f87; --c2: #3fd0c6; }
.tl li.s3 { --c1: #2aa56b; --c2: #5fe0a6; }
.tl li.s4 { --c1: #8fcf2a; --c2: #e8ff7a; }
.tl .darkest, .tl .darkest > time { color: var(--violet); }
.tl .darkest .bar { box-shadow: 0 0 0 1px var(--violet); }
.tl .best .bar { opacity: 1; box-shadow: 0 0 8px rgba(95,224,166,.6); }
#alerts { display: grid; gap: .5rem; }
#alerts input[type=number] { width: 4rem; font: inherit; }

/* Responsive and touch: comfortable targets, no iOS zoom on focus, notch-safe gutters. */
main { padding-left: max(1.25rem, env(safe-area-inset-left, 0px)); padding-right: max(1.25rem, env(safe-area-inset-right, 0px)); }
select, button, input[type=number], summary { min-height: 44px; font-size: 1rem; }
summary { display: flex; align-items: center; cursor: pointer; }
label { display: flex; align-items: center; gap: .5rem; min-height: 44px; flex-wrap: wrap; }
input[type=checkbox] { width: 1.25rem; height: 1.25rem; }
@media (min-width: 48rem) { main { max-width: 44rem; } }

/* Live updates: values change in place, bars slide, the old place dims while a new one loads. */
.tl .bar { transition: height .6s ease; }
main { transition: opacity .2s ease; }
body.loading main { opacity: .55; }
.changed { animation: flash 1.2s ease; }
@keyframes flash { from { background: color-mix(in srgb, #5fe0a6 35%, transparent); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) {
  .tl .bar, main { transition: none; }
  .changed { animation: none; }
}

/* Polish: verdict first, sections as cards, one type and spacing scale. */
:root { --card: rgba(11,22,38,.72); --r: 12px; }
html { scrollbar-gutter: stable; }
/* One header on every page: same markup, width and spacing, with the current page marked. */
nav.tabs { display: flex; flex-wrap: wrap; gap: .1rem .35rem; font-size: .9rem; margin: 0 0 .5rem; min-height: 2.75rem; align-content: flex-start; }
nav.tabs a { padding: .45rem .7rem; border-radius: 999px; color: var(--muted); text-decoration: none; }
nav.tabs a:hover { color: var(--fg); }
nav.tabs a[aria-current="page"] { color: var(--fg); background: rgba(95,224,166,.14); box-shadow: inset 0 0 0 1px var(--accent); }
.hero { margin: 1rem 0 1.5rem; padding: 1.25rem 1.25rem 1rem; border: 1px solid var(--line); border-radius: var(--r);
  background: linear-gradient(160deg, rgba(15,58,51,.55), var(--card)); }
.hero h1 { margin-top: 0; }
.hero #reason { font-size: 1.1rem; margin: .25rem 0 1rem; }
.meter { height: .45rem; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.meter i { display: block; height: 100%; width: calc(var(--score, 0) * 100%); border-radius: inherit; background: linear-gradient(90deg, var(--accent2), var(--accent), #e8ff7a); transition: width .6s ease; }
.hero #score { margin: .5rem 0 0; font-size: .85rem; }
main > section { margin: 0 0 1.1rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
main > section > h2 { margin: 0 0 .5rem; }
main > section li:first-child { border-top: 0; }
#status, #updated { margin: .15rem 0; font-size: .85rem; }
@media (max-width: 30rem) { .hero { padding: 1rem; } main > section { padding: .85rem .9rem; } }
@media (prefers-reduced-motion: reduce) { .meter i { transition: none; } }

.foot { max-width: 36rem; margin: 0 auto; padding: 0 1.25rem 2rem; font-size: .75rem; line-height: 1.5; }
.foot a { color: inherit; }

.totop { position: fixed; right: max(1rem, env(safe-area-inset-right, 0px)); bottom: max(1rem, env(safe-area-inset-bottom, 0px)); z-index: 20; width: 44px; height: 44px; padding: 0; border-radius: 50%;
  font-size: 1.3rem; line-height: 1; background: rgba(4,10,20,.88); box-shadow: 0 2px 10px rgba(0,0,0,.5); }
.totop[hidden] { display: none; }

/* Front page: place as a small label over the verdict, live readings as tiles under the meter. */
.eyebrow { margin: 0 0 .25rem; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent2); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin: 1rem 0 .25rem; }
.stats div { padding: .6rem .5rem; text-align: center; border: 1px solid var(--line); border-radius: 10px; background: rgba(4,10,20,.45); }
.stats dt { font-size: .72rem; color: var(--muted); }
.stats dd { margin: .1rem 0 0; text-align: center; font-size: 1.35rem; font-weight: 300; font-variant-numeric: tabular-nums; }
.hero #updated { margin: .6rem 0 0; font-size: .75rem; }

.clock { margin: .5rem 0 0 .7rem; font-size: .8rem; letter-spacing: .04em; color: var(--muted); font-variant-numeric: tabular-nums; min-height: 1.3em; }
.clock::before { content: "Local time "; opacity: .7; }
.hero .meter { margin-top: .75rem; height: .3rem; }
.cloudmap { list-style: none; margin: .5rem 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: .5rem; }
.cloudmap li { padding: .55rem .6rem; border: 1px solid var(--line); border-radius: 10px; background: rgba(4,10,20,.45); }
.cloudmap b { display: block; font-weight: 500; }
.cloudmap .pct { font-size: 1.3rem; font-weight: 300; font-variant-numeric: tabular-nums; }
.cloudmap .clear { color: var(--accent); }
.cloudmap li.poor { border-color: rgba(255,90,90,.55); background: rgba(120,20,20,.35); }
.cloudmap li.poor .pct { color: #ff8a8a; }
.cloudmap li.fair .pct { color: #ffc66b; }
.stats div.poor { border-color: rgba(255,90,90,.55); background: rgba(120,20,20,.35); }
.stats div.poor dd { color: #ff8a8a; }

/* List view: the original one row per hour, chosen with the Chart/List toggle. */
.tl.list { display: grid; grid-template-columns: 1fr; gap: .15rem; }
.tl.list li { flex-direction: row; align-items: center; justify-content: flex-start; gap: .5rem; height: auto; font-size: .85rem; padding: .1rem 0; color: var(--fg); }
.tl.list li > time { order: 0; width: 4.5rem; margin: 0; height: auto; }
.tl.list li:not(.lbl) > time { visibility: visible; }
.tl.list .bar { transition: none; order: 1; width: var(--w); height: .6rem; flex: 0 0 auto; max-width: calc(100% - 9rem); border-radius: 3px; background: linear-gradient(90deg, var(--c1), var(--c2)); }
.tl.list li > span:last-child { display: inline; order: 2; min-width: 3rem; }
.viewtoggle { display: inline-flex; gap: .25rem; margin: .25rem 0 0; }
.viewtoggle button { font: inherit; font-size: .8rem; padding: .2rem .7rem; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; }
.viewtoggle button[aria-pressed="true"] { color: var(--fg); border-color: var(--accent); background: rgba(95,224,166,.12); }
.tlkey { display: flex; gap: .75rem; flex-wrap: wrap; font-size: .75rem; color: var(--muted); margin: 0 0 .25rem; }
.tlkey i { display: inline-block; width: .7rem; height: .7rem; border-radius: 3px; margin-right: .3rem; vertical-align: -1px; }
.explain { margin: .75rem 0 0; font-size: .9rem; }
.explain summary { cursor: pointer; color: var(--accent); }
.explain dt { margin-top: .6rem; font-weight: 500; }
.explain dd { margin: .1rem 0 0; color: var(--muted); }
.explain dl { display: block; }
.explain dt, .explain dd { text-align: left; }
.stats dd { white-space: nowrap; font-size: clamp(1.05rem, 5vw, 1.35rem); }