/* City Rank - shared stylesheet for every page.
 *
 * Colours are defined once as CSS custom properties ("tokens") and swapped for
 * dark mode via prefers-color-scheme. The theme button (theme.js) can override
 * the OS choice by setting <html data-theme="light|dark">. Charts read the same
 * tokens from JS (see city.js) so they always match the page.
 *
 * Cards are frosted "glass": translucent, with a backdrop blur of the skyline
 * drawing behind them (templates/skyline.svg) and a bright rim.
 */

/* ---- Colour tokens: light (default) ---------------------------------------- */
:root {
  color-scheme: light;
  --page: #f9f9f7;          /* page background */
  --surface: #fcfcfb;       /* cards and chart background */
  --ink: #0b0b0b;           /* primary text */
  --ink-2: #52514e;         /* secondary text */
  --muted: #898781;         /* axis labels, captions */
  --grid: #e1e0d9;          /* hairline gridlines and table rules */
  --axis: #c3c2b7;          /* baselines */
  --border: rgba(11, 11, 11, 0.10);
  --track: #f0efec;         /* empty part of score bars */
  --link: #1c5cab;
  --series-1: #2a78d6;      /* main data colour (blue) */
  --series-2: #eb6834;      /* second series (orange), e.g. daily highs */
  --good: #006300;
  --city-far: #e3e2dd;      /* skyline layers, palest at the back */
  --city-mid: #cbcac4;
  --city-near: #a3a29c;
  --glass: rgba(252, 252, 251, 0.62);        /* card fill, see-through */
  --glass-inner: rgba(255, 255, 255, 0.45);  /* tiles nested inside a card */
  --glass-border: rgba(11, 11, 11, 0.08);
  --glass-rim: rgba(255, 255, 255, 0.95);    /* bright edge highlight */
  --glass-shadow: rgba(11, 11, 11, 0.12);
  --radius: 20px;
  --skyline-height: clamp(220px, 45vh, 420px);
}

/* ---- Colour tokens: dark ---------------------------------------------------- */
/* Used when the OS is in dark mode (unless the visitor picked light), or when
   the visitor picked dark. The two blocks must stay identical. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #0d0d0d;
    --surface: #1a1a19;
    --ink: #ffffff;
    --ink-2: #c3c2b7;
    --muted: #898781;
    --grid: #2c2c2a;
    --axis: #383835;
    --border: rgba(255, 255, 255, 0.10);
    --track: #2c2c2a;
    --link: #86b6ef;
    --series-1: #3987e5;
    --series-2: #d95926;
    --good: #0ca30c;
    --city-far: #151514;
    --city-mid: #1e1e1d;
    --city-near: #2b2b29;
    --glass: rgba(30, 30, 29, 0.55);
    --glass-inner: rgba(255, 255, 255, 0.04);
    --glass-border: rgba(255, 255, 255, 0.07);
    --glass-rim: rgba(255, 255, 255, 0.22);
    --glass-shadow: rgba(0, 0, 0, 0.5);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0d0d0d;
  --surface: #1a1a19;
  --ink: #ffffff;
  --ink-2: #c3c2b7;
  --muted: #898781;
  --grid: #2c2c2a;
  --axis: #383835;
  --border: rgba(255, 255, 255, 0.10);
  --track: #2c2c2a;
  --link: #86b6ef;
  --series-1: #3987e5;
  --series-2: #d95926;
  --good: #0ca30c;
  --city-far: #151514;
  --city-mid: #1e1e1d;
  --city-near: #2b2b29;
  --glass: rgba(30, 30, 29, 0.55);
  --glass-inner: rgba(255, 255, 255, 0.04);
  --glass-border: rgba(255, 255, 255, 0.07);
  --glass-rim: rgba(255, 255, 255, 0.22);
  --glass-shadow: rgba(0, 0, 0, 0.5);
}

/* ---- Base ------------------------------------------------------------------- */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--link); }
h1, h2, h3 { line-height: 1.2; margin: 0; }
h1 { font-size: 1.9rem; letter-spacing: -0.01em; }
h2 { font-size: 1.25rem; margin-bottom: 0.25rem; }
h3 { font-size: 1rem; }
p { margin: 0.4rem 0; }

/* One centred column with a side gutter that never drops below 16px.
   The bottom padding equals the skyline height, so at the end of the page the
   footer sits above the whole skyline instead of on top of it. */
.wrap { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; padding-inline: max(16px, 3vw); padding-block: 1rem var(--skyline-height); }

/* ---- Skyline silhouette (fixed to the bottom of the window, behind everything) */
.skyline {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 0;
  width: 100%; height: var(--skyline-height);
  pointer-events: none;
}
.skyline .far { fill: var(--city-far); }
.skyline .mid { fill: var(--city-mid); }
.skyline .near, .skyline .cabins { fill: var(--city-near); }
.skyline .wheel { fill: none; stroke: var(--city-near); stroke-linecap: round; }
.skyline .rim { stroke-width: 4; }
.skyline .spokes { stroke-width: 1.2; }
.skyline .legs { stroke-width: 5; }

/* ---- Top bar: breadcrumb (city pages) on the left, theme button on the right -- */
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 2.2rem; margin-bottom: 0.5rem; }
.theme-toggle { display: inline-flex; align-items: center; gap: 0.4rem; margin-left: auto; border-radius: 999px; padding: 0.35rem 0.9rem; }
.theme-toggle[hidden] { display: none; }   /* class display would otherwise beat [hidden] */
.theme-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* Show the moon in light mode (click = go dark) and the sun in dark mode. */
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}

.muted { color: var(--ink-2); }
.small { font-size: 0.85rem; }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* ---- Header ----------------------------------------------------------------- */
.site-header { padding-block: 0.5rem 1rem; }
.site-header .kicker { color: var(--ink-2); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; }
.site-header .lede { color: var(--ink-2); max-width: 70ch; }
.breadcrumb { font-size: 0.9rem; display: inline-block; }

/* ---- Cards & sections ------------------------------------------------------- */
.card {
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin-top: 1rem;
}

/* ---- Frosted glass: cards, stand-alone tiles and the theme button ----------- */
/* A translucent fill blurs whatever scrolls behind it (mostly the skyline);
   saturate() keeps the blurred colours from going muddy. */
.card, .tile, .theme-toggle {
  position: relative;
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--glass-border);
  box-shadow: 0 12px 32px -14px var(--glass-shadow);
}
/* The bright rim: a 1px gradient ring, strongest at the top-left and
   bottom-right corners like light catching curved glass. The mask cuts out the
   middle so only the edge shows. */
.card::before, .tile::before, .theme-toggle::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, var(--glass-rim), transparent 35%, transparent 65%, var(--glass-rim));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
.theme-toggle:hover { background: var(--glass-inner); }
/* Tiles inside a card are already on glass: a lighter pane, no second blur. */
.card .tile {
  background: var(--glass-inner);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: none;
}
/* Solid cards when the browser can't blur, or the visitor asked for less transparency. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card, .tile, .theme-toggle { background: var(--surface); }
}
@media (prefers-reduced-transparency: reduce) {
  .card, .tile, .theme-toggle { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.card-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.5rem 1rem; margin-bottom: 0.6rem; }

/* ---- Weight sliders ----------------------------------------------------------- */
.weights { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.6rem 1.2rem; }
.weight label { display: flex; justify-content: space-between; gap: 0.5rem; font-weight: 600; font-size: 0.92rem; }
.weight output { font-weight: 400; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.weight input[type="range"] { width: 100%; accent-color: var(--series-1); }
button {
  font: inherit; font-size: 0.9rem; color: var(--ink); background: transparent;
  border: 1px solid var(--axis); border-radius: 8px; padding: 0.3rem 0.8rem; cursor: pointer;
}
button:hover { background: var(--track); }

/* ---- Tables ----------------------------------------------------------------- */
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th, td { padding: 0.5rem 0.55rem; border-bottom: 1px solid var(--grid); text-align: left; vertical-align: middle; }
thead th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-2); font-weight: 600; border-bottom-color: var(--axis); }
tbody tr:hover { background: color-mix(in srgb, var(--track) 60%, transparent); }
caption { caption-side: bottom; text-align: left; color: var(--ink-2); font-size: 0.85rem; padding-top: 0.6rem; }
.rank-cell { font-weight: 700; width: 2.5rem; }
.city-cell a { font-weight: 600; text-decoration: none; }
.city-cell a:hover { text-decoration: underline; }
.city-cell .prov { color: var(--muted); font-size: 0.8rem; margin-left: 0.3rem; }
.partial { color: var(--muted); font-size: 0.75rem; display: block; }
.group-row th { background: color-mix(in srgb, var(--track) 70%, transparent); color: var(--ink); text-transform: none; font-size: 0.9rem; letter-spacing: 0; }

/* ---- Score bars (single colour; length = score 0-100) ----------------------- */
.bar-cell { min-width: 150px; }
.bar { display: flex; align-items: center; gap: 0.5rem; }
.bar-track { flex: 1; height: 8px; background: var(--track); border-radius: 4px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--series-1); border-radius: 4px; }
.bar-value { min-width: 2.2rem; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

.category-list { display: grid; gap: 0.7rem; }
.category-item { display: grid; grid-template-columns: minmax(120px, 180px) 1fr auto; gap: 0.8rem; align-items: center; }
.category-item .rank { color: var(--ink-2); font-size: 0.85rem; white-space: nowrap; min-width: 5.5rem; text-align: right; }
@media (max-width: 560px) {
  .category-item { grid-template-columns: 1fr auto; }
  .category-item .bar { grid-column: 1 / -1; grid-row: 2; }
}

/* ---- Stat tiles ------------------------------------------------------------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem; }
.tile { border-radius: 16px; padding: 0.8rem 0.95rem; }   /* glass styles above */
.tile .label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-2); }
.tile .value { font-size: 1.6rem; font-weight: 700; margin-top: 0.15rem; }
.tile .note { color: var(--ink-2); font-size: 0.85rem; }
.hero-tiles .tile .value { font-size: 2.4rem; }

/* ---- Charts ----------------------------------------------------------------- */
.chart { width: 100%; min-height: 320px; }
.chart-note { color: var(--ink-2); font-size: 0.9rem; padding: 1rem 0; }
details { margin-top: 0.6rem; }
summary { cursor: pointer; color: var(--link); font-size: 0.9rem; }

/* ---- Status pills (always text + colour, never colour alone) ---------------- */
.state { font-size: 0.8rem; font-weight: 600; padding: 0.1rem 0.5rem; border-radius: 999px; border: 1px solid var(--axis); white-space: nowrap; }
.state-updated { color: var(--good); }
.state-failed { color: #d03b3b; }

footer { margin-top: 2rem; color: var(--ink-2); font-size: 0.85rem; }

/* ---- Navigation links in the top bar ------------------------------------------ */
.topnav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 1.2rem; }
.nav-link { font-size: 0.9rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- Compare page: three equal columns, rows label-above-values (Apple style) --- */
/* minmax(0, 1fr) lets columns shrink below their content so the page never
   scrolls sideways on a phone; long text wraps inside its column instead. */
.compare-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(0.6rem, 2.5vw, 1.75rem);
}
/* Full-width row label with a hairline above it, values in the three columns below. */
.cmp-label {
  grid-column: 1 / -1;
  margin-top: 0.9rem; padding-top: 0.75rem;
  border-top: 1px solid var(--grid);
  font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-2);
}
.compare-grid > .cmp-label:first-child { margin-top: 0.25rem; }
.cmp-note { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); }
.cmp-cell { padding-top: 0.45rem; min-width: 0; overflow-wrap: anywhere; }
.cmp-big { font-size: 1.5rem; font-weight: 700; }
.cmp-group { grid-column: 1 / -1; margin-top: 1.4rem; font-size: 1.05rem; }
.cmp-cell .bar { margin-bottom: 0.15rem; }
/* "Best" badge: text + colour, never colour alone. */
.is-best { font-weight: 700; }
.best {
  display: inline-block; margin-left: 0.35rem; padding: 0 0.45rem;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em; vertical-align: 0.15em;
  color: var(--good); border: 1px solid currentColor; border-radius: 999px;
}

/* Sticky picker row: stays at the top while scrolling so you always know which column is which. */
.compare-head { position: sticky; top: 0.5rem; z-index: 5; padding-block: 0.75rem; }
.compare-pick { min-width: 0; }
.city-select {
  width: 100%; font: inherit; font-weight: 600; color: var(--ink);
  padding: 0.45rem 0.6rem; border-radius: 12px;
  border: 1px solid var(--axis); background: var(--glass-inner); cursor: pointer;
}
/* The open list is drawn by the browser, which can't show the translucent glass
   fill and falls back to white while the text stays white in dark mode. Give the
   options a solid themed background so they are readable in both themes. */
.city-select option { background: var(--surface); color: var(--ink); font-weight: 400; }
.city-select option:checked { background: var(--track); font-weight: 600; }
.pick-meta { margin-top: 0.45rem; }
.pick-name { font-size: 1.35rem; font-weight: 700; line-height: 1.2; }

.mini-chart { width: 100%; min-height: 220px; }
.mini-forecast { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.mini-forecast li { display: grid; grid-template-columns: 2.4rem auto; column-gap: 0.4rem; align-items: baseline; }
.mini-forecast li .small { grid-column: 1 / -1; }

@media (max-width: 640px) {
  .cmp-big { font-size: 1.15rem; }
  .pick-name { font-size: 1.05rem; }
  .compare-head .muted.small { display: none; }    /* keep the sticky bar short on phones */
  .mini-chart { min-height: 180px; }
}