:root {
  color-scheme: light dark;
  --bg: #f2f7fa;
  --card: #ffffff;
  --text: #11232e;
  --muted: #5b6f7c;
  --line: #dbe5eb;
  --accent: #0a7fb5;
  --accent-soft: #d8eef8;
  --low: #1f9d55;
  --mid: #d08a00;
  --high: #d0383b;
  --usual: #8fa7b5;
  --usual-fill: rgba(143, 167, 181, 0.22);
  --open-fill: rgba(10, 127, 181, 0.06);
  --chip-holiday: #fde9c8;
  --chip-school: #dff3e4;
  --chip-closed: #fbdadb;
  --chip-restricted: #fdf0c2;
  --chip-note: #e3eaf0;
  --past: #4b6475;
  --temp: #e07a1f;
  --rain: #2f7fd8;
  --closed-fill: rgba(91, 111, 124, 0.12);
  --shadow: 0 1px 2px rgba(17, 35, 46, 0.06), 0 4px 16px rgba(17, 35, 46, 0.05);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0c171e;
    --card: #13232d;
    --text: #e4eef3;
    --muted: #93a8b5;
    --line: #253a47;
    --accent: #3bb8ee;
    --accent-soft: #163a4d;
    --low: #3ccf7c;
    --mid: #f0b429;
    --high: #f26b6d;
    --usual: #6f8796;
    --usual-fill: rgba(111, 135, 150, 0.25);
    --open-fill: rgba(59, 184, 238, 0.07);
    --chip-holiday: #4a3710;
    --chip-school: #173a24;
    --chip-closed: #4d1d1f;
    --chip-restricted: #45390f;
    --chip-note: #22323d;
    --past: #9db4c3;
    --temp: #f39a4a;
    --rain: #5aa5f0;
    --closed-fill: rgba(147, 168, 181, 0.12);
    --shadow: none;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--accent); }

.top, main, footer {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}

.top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 20px;
  padding-bottom: 8px;
}
.logo { border-radius: 10px; }
h1 { margin: 0; font-size: 1.5rem; letter-spacing: 0.01em; }
.sub { margin: 0; color: var(--muted); }

.chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 8px 0 16px;
}
.chip {
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.9rem;
  background: var(--chip-note);
}
.chip-holiday { background: var(--chip-holiday); }
.chip-school { background: var(--chip-school); }
.chip-closed { background: var(--chip-closed); font-weight: 600; }
.chip-restricted { background: var(--chip-restricted); }
.chip-plain { background: transparent; color: var(--muted); padding-left: 0; }

.banner {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--chip-closed);
  font-weight: 500;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 16px;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: var(--shadow);
  min-width: 0;
}
.card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
h2 { margin: 0; font-size: 1.2rem; }

.pill {
  font-size: 0.85rem;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--chip-note);
  color: var(--muted);
}
.pill-open { background: var(--accent-soft); color: var(--accent); }
.pill-closing { background: var(--chip-restricted); color: var(--text); }
.pill-closed { background: var(--chip-note); }

.note { margin: 4px 0 0; color: var(--muted); font-size: 0.9rem; }

.now-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 8px;
}
.count, .pct { margin: 0; }
.big { font-size: 2.6rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.of { color: var(--muted); }
.pct { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.lvl-low { color: var(--low); }
.lvl-mid { color: var(--mid); }
.lvl-high { color: var(--high); }

.bar { display: block; width: 100%; height: 10px; margin: 8px 0 6px; }
.bar-track { fill: var(--line); }
.bar-fill.low { fill: var(--low); }
.bar-fill.mid { fill: var(--mid); }
.bar-fill.high { fill: var(--high); }
.bar-fill { fill: var(--accent); }

.meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  color: var(--muted);
  font-size: 0.9rem;
}
.stale { color: var(--high); font-weight: 600; }
.trend-up { color: var(--high); }
.trend-down { color: var(--low); }

.insight { margin: 8px 0 0; font-size: 0.95rem; }

.chart-wrap { margin: 12px 0 0; }
.chart { display: block; width: 100%; height: auto; }
.c-grid { stroke: var(--line); stroke-width: 1; }
.c-tick { stroke: var(--muted); stroke-width: 1; }
.c-label { fill: var(--muted); font-size: 12px; font-family: inherit; }
.c-open { fill: var(--open-fill); }
.c-limit { stroke: var(--high); stroke-width: 1.5; stroke-dasharray: 6 4; opacity: 0.7; }
.c-limit-label { fill: var(--high); opacity: 0.8; }
.c-usual { fill: var(--usual-fill); }
.c-usual-line { fill: none; stroke: var(--usual); stroke-width: 1.5; }
.c-today { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.c-dot { fill: var(--accent); stroke: var(--card); stroke-width: 2; }
.c-now { stroke: var(--text); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0.5; }

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 4px;
  font-size: 0.8rem;
  color: var(--muted);
}
.key::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 0;
  margin-right: 6px;
  vertical-align: middle;
  border-top: 3px solid var(--accent);
}
.key-usual::before { border-top: 8px solid var(--usual-fill); height: 0; box-shadow: 0 -1.5px 0 var(--usual) inset; }
.key-limit::before { border-top: 2px dashed var(--high); }
.key-open::before { border-top: 8px solid var(--open-fill); outline: 1px solid var(--line); }

.weather-now { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.weather-now p { margin: 0; }
.wx-icon { font-size: 3rem; line-height: 1; }
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px 16px;
  margin: 14px 0 0;
}
.facts dt { color: var(--muted); font-size: 0.85rem; }
.facts dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }

.holidays { list-style: none; padding: 0; margin: 10px 0 0; }
.holidays li { padding: 8px 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.holidays li:first-child { border-top: none; }
.when { font-variant-numeric: tabular-nums; min-width: 9.5em; color: var(--muted); }
.hname { font-weight: 600; }
.tag { font-size: 0.8rem; padding: 1px 8px; border-radius: 999px; }
.tag-public { background: var(--chip-holiday); }
.tag-school { background: var(--chip-school); }

.muted { color: var(--muted); }

/* The link from the small charts to the big one. */
.chart-link { display: block; color: inherit; border-radius: 8px; }
.chart-link:hover .chart, .chart-link:focus-visible .chart { outline: 2px solid var(--accent-soft); outline-offset: 2px; border-radius: 6px; }
.legend .more { margin-left: auto; font-weight: 500; }

/* The big chart, in the dialog or on /chart. */
.chart-dialog {
  width: calc(100vw - 24px);
  max-width: none;
  height: calc(100vh - 24px);
  height: calc(100dvh - 24px);
  max-height: none;
  margin: auto;
  padding: 0 20px 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  color: var(--text);
}
.chart-dialog::backdrop { background: rgba(8, 20, 28, 0.55); }
.dialog-bar { position: sticky; top: 0; display: flex; justify-content: flex-end; padding-top: 10px; background: var(--card); z-index: 1; }
.dialog-close {
  font: inherit; font-size: 1.1rem; line-height: 1; padding: 6px 10px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--card); color: var(--text); cursor: pointer;
}
.cv-head { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
.cv-title { font-size: 1.25rem; }
.cv-nav, .cv-controls, .seg { display: flex; flex-wrap: wrap; gap: 6px; }
.cv-controls { gap: 8px 18px; margin: 12px 0 8px; }
.btn {
  font: inherit; font-size: 0.9rem; padding: 5px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--card); color: var(--text);
}
.btn:hover:not(:disabled) { border-color: var(--accent); }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn.on { background: var(--accent); border-color: var(--accent); color: var(--card); }
.cv-chips { margin: 4px 0 8px; }
.cv-chart { min-height: 260px; }
/* The chart page uses the whole width, not the main page's column. */
body.wide .top, body.wide main, body.wide footer { max-width: none; }
@media (max-width: 600px) {
  .chart-dialog { width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; border: none; padding: 0 12px 12px; }
}
.cv-readout { min-height: 1.5em; margin: 6px 0 0; font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.cv-legend { margin-top: 6px; }
.cv-status:empty { display: none; }
.cv-foot { margin: 12px 0 0; font-size: 0.85rem; }
.key-past::before { border-top: 2px solid var(--past); opacity: 0.6; }
.key-temp::before { border-top: 2px dashed var(--temp); }
.key-rain::before { border-top: 8px solid var(--rain); opacity: 0.55; }
.table-wrap { overflow-x: auto; margin-top: 12px; }
table.week { border-collapse: collapse; width: 100%; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
table.week th, table.week td { text-align: left; padding: 6px 10px; border-top: 1px solid var(--line); white-space: nowrap; }
table.week td:last-child { white-space: normal; color: var(--muted); }
table.week thead th { color: var(--muted); font-weight: 500; border-top: none; }
/* uPlot draws on a canvas; keep it inside the card. */
.cv-chart .uplot { max-width: 100%; }

.updated { margin: -8px 0 16px; color: var(--muted); font-size: 0.9rem; }
.updated .ago { color: var(--text); font-weight: 600; }
.updated .ago.stale, .ago.stale { color: var(--high); font-weight: 600; }

.version { font-size: 0.8rem; }
.version .mismatch { color: var(--high); font-weight: 600; }

footer { color: var(--muted); font-size: 0.85rem; padding-top: 20px; padding-bottom: 28px; }

/* The credits page. */
.prose { display: grid; gap: 16px; }
.prose ul { padding-left: 1.2em; margin: 10px 0 0; }
.prose li { margin: 6px 0; }
.license {
  white-space: pre-wrap; font-size: 0.8rem; color: var(--muted);
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 12px; overflow-x: auto;
}