/* Mobile-first: base styles target phones; the min-width queries at the bottom widen things up. */
:root {
  --ink: #222;
  --muted: #666;
  --brand: #404041;
  --line: #e6e6e6;
  --tile: #f6f6f6;
  /* chart colours — steps from the dataviz reference ramps */
  --accent: #2a78d6;
  --temp: #eb6834;
  --pv: #c98500;     /* sun yellow, deep enough to read as a 2px line on white */
  --pressure: #6250d6;
  --tide: #199e70;
  --gust: #1c5cab;   /* = --band3, so it reads as part of the wind rose's blues */
  --range: #e9e8e2;
  --band1: #86b6ef;
  --band2: #3987e5;
  --band3: #1c5cab;
  --band4: #0d366b;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: #fff;
  color: var(--ink);
  line-height: 1.45;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { color: inherit; }
main {
  flex: 1;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 20px max(16px, env(safe-area-inset-left)) 24px max(16px, env(safe-area-inset-right));
}
h1 { font-size: 1.5rem; margin-bottom: 4px; }
h2 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 28px 0 10px; }

/* ── Header / footer ───────────────────────────────── */
.site-header { background: var(--brand); }
.site-header a { display: block; max-width: 720px; margin: 0 auto; }
.logo { display: block; width: 100%; height: auto; }
.site-footer {
  border-top: 1px solid var(--line);
  text-align: center;
  padding: 16px 16px max(20px, env(safe-area-inset-bottom));
  font-size: 0.85rem;
  color: var(--muted);
}
.site-footer nav { display: flex; justify-content: center; gap: 8px; margin-bottom: 8px; }
.site-footer nav a {
  text-decoration: none;
  color: var(--ink);
  padding: 10px 16px;             /* comfortable tap target */
  border-radius: 8px;
  font-weight: 600;
}
.site-footer nav a:hover { background: var(--tile); }
.site-footer .version { font-size: 0.7rem; margin-top: 4px; opacity: 0.7; }   /* which build is live */

/* ── Home: contact list ────────────────────────────── */
.contact { list-style: none; border-top: 1px solid var(--line); }
.contact li { border-bottom: 1px solid var(--line); }
.contact a, .contact .item {
  display: flex;
  flex-direction: column;
  padding: 14px 4px;
  text-decoration: none;
}
.contact a:hover { background: var(--tile); }
.contact .label { font-size: 0.8rem; color: var(--muted); }
.contact .value { font-size: 1.1rem; font-weight: 600; }
.tenants { text-align: center; }
.tenants img { width: 89px; height: auto; }
.button {
  display: block;
  text-align: center;
  background: var(--brand);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 14px;
  border-radius: 10px;
  margin-top: 28px;
}

/* ── Weather ───────────────────────────────────────── */
.sub { color: var(--muted); font-size: 0.9rem; }
.hero { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 16px 0 4px; }
.hero .temp { font-size: 3.5rem; font-weight: 700; line-height: 1; }
.hero .feels { color: var(--muted); }
/* ── Jump bar: one chip per section, pinned to the top while scrolling ── */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.jump {
  position: sticky; top: 0; z-index: 5;
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  background: #fff; padding: 10px 0; margin-top: 10px;
  border-bottom: 1px solid var(--line);
}
.jump::-webkit-scrollbar { display: none; }
.jump a {
  flex: none; padding: 7px 14px; border-radius: 999px;
  background: var(--tile); color: var(--ink); text-decoration: none; font-size: 0.85rem; font-weight: 600;
}
.jump a:hover { background: var(--line); }
.section { scroll-margin-top: 64px; }   /* land below the pinned jump bar */

/* A tile that jumps to its chart */
a.tile-link { display: block; text-decoration: none; color: inherit; position: relative; }
a.tile-link::after { content: "\203A"; position: absolute; top: 8px; right: 12px; font-size: 1.3rem; color: var(--muted); }
a.tile-link:hover { background: var(--line); }

/* Sun box */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stats .label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.stats .value { font-size: 1.25rem; font-weight: 700; }
.stats .detail { font-size: 0.8rem; color: var(--muted); }

/* Moon box */
.moonbox { display: flex; align-items: center; gap: 14px; }
.moonbox p { font-size: 0.9rem; color: var(--muted); margin-top: 2px; }
.moonbox strong, .moonbox .moon-name { color: var(--ink); }
.moonbox strong { white-space: nowrap; }   /* never split "5:57 pm" across lines */
.moonbox .moon-name { font-size: 1.05rem; font-weight: 700; margin-top: 0; }
.moon { flex: none; }
.moon-dark { fill: #3a3f52; }
.moon-lit { fill: #f4eccf; }
.moon-rim { fill: none; stroke: #3a3f52; stroke-width: 2; }
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 16px; }
.tile { background: var(--tile); border-radius: 12px; padding: 12px 14px; }
.tiles .tile:last-child:nth-child(odd) { grid-column: span 2; }   /* no orphan in the 2-column phone grid */
.tile .label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.tile .value { font-size: 1.35rem; font-weight: 700; }
.tile .detail { font-size: 0.85rem; color: var(--muted); }
.raining { color: #1565c0; font-weight: 600; }

/* ── Weather instruments (inline SVG from Web/WeatherCharts.cs) ── */
.panels { display: grid; gap: 10px; margin-top: 10px; }
.panel { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px 14px; margin-top: 10px; }
.panels .panel { margin-top: 0; display: flex; flex-direction: column; }
.panels .panel > svg { margin: auto; }   /* centre the instrument when its neighbour is taller */
.panel h3 {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted);
  margin-bottom: 8px;
}
.caption { text-align: center; font-size: 0.85rem; color: var(--muted); margin-top: 6px; }
.toggle { display: inline-flex; background: var(--tile); border-radius: 8px; padding: 2px; text-transform: none; letter-spacing: 0; }
.toggle a { text-decoration: none; padding: 6px 10px; border-radius: 6px; font-weight: 600; color: var(--muted); }
.toggle a[aria-current] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,0.12); }
.legend { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; font-size: 0.8rem; color: var(--muted); margin-top: 8px; }
.legend li { display: flex; align-items: center; gap: 5px; }
.key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.key.band1 { background: var(--band1); } .key.band2 { background: var(--band2); }
.key.band3 { background: var(--band3); } .key.band4 { background: var(--band4); }
.key.line { height: 3px; border-radius: 2px; background: var(--temp); }
.key.range { background: var(--range); }

svg text { fill: var(--muted); font-size: 11px; dominant-baseline: central; }
.compass, .rose { display: block; width: 100%; margin: 0 auto; }
.compass { max-width: 220px; }
.rose { max-width: 300px; }
.dial { fill: #fafafa; stroke: var(--line); }
.tick { stroke: #c8c8c8; }
.tick.major { stroke: var(--muted); stroke-width: 1.5; }
svg .cardinal { fill: var(--ink); font-weight: 700; text-anchor: middle; }
.pointer { fill: var(--accent); }
svg [hidden] { display: none; }   /* `hidden` isn't a UA-styled attribute on SVG elements */
svg .speed { fill: var(--ink); font-size: 36px; font-weight: 700; text-anchor: middle; }
svg .unit { text-anchor: middle; font-size: 12px; }
.grid { fill: none; stroke: var(--line); stroke-width: 1; }
.axis { stroke: #c3c2b7; stroke-width: 1; }
svg .ring-label { font-size: 9px; }
.petal { stroke: #fff; stroke-width: 1.5; }
.petal.band1 { fill: var(--band1); } .petal.band2 { fill: var(--band2); }
.petal.band3 { fill: var(--band3); } .petal.band4 { fill: var(--band4); }
.calm { fill: #fff; stroke: var(--line); }

.chart { position: relative; }
.daychart { display: block; width: 100%; touch-action: pan-y; }
.daychart text { font-size: 13px; }
svg .ytick { text-anchor: end; }
svg .xtick { text-anchor: middle; }
/* A chart's latest value, at the right of its panel heading (WeatherCharts.Latest) */
.panel h3 .latest { text-transform: none; letter-spacing: 0; color: var(--ink); font-size: 1rem; font-weight: 700; white-space: nowrap; }
.panel h3 .latest small { font-size: 0.75rem; font-weight: 600; color: var(--muted); }
.range { fill: var(--range); }
.templine { fill: none; stroke: var(--temp); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.enddot, .hoverdot { fill: var(--temp); stroke: #fff; stroke-width: 2; }
.cross { stroke: var(--muted); stroke-width: 1; }
.pvarea { fill: var(--pv); fill-opacity: 0.1; }
.pvline { fill: none; stroke: var(--pv); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.enddot.pv, .hoverdot.pv { fill: var(--pv); }
.bar { fill: var(--pv); }
.bar.today { fill-opacity: 0.55; }   /* still growing */
svg .barlabel { fill: var(--ink); font-weight: 700; text-anchor: middle; }
.bar.partial { fill-opacity: 0.3; }   /* a past month with days missing */
.pace { fill: none; stroke: var(--pv); stroke-width: 1.5; stroke-dasharray: 4 3; }
.whisker { stroke: var(--ink); stroke-width: 1.5; }
.mean { fill: #fff; stroke: var(--ink); stroke-width: 1.5; }
svg .xtick.now { fill: var(--ink); font-weight: 700; }
.key.bar { background: var(--pv); }
.key.pace { background: none; border: 1.5px dashed var(--pv); }
.key.whisker { width: 9px; background: linear-gradient(var(--ink), var(--ink)) center / 1.5px 100% no-repeat; border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); border-radius: 0; }
.pressureline { fill: none; stroke: var(--pressure); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.enddot.pressure, .hoverdot.pressure { fill: var(--pressure); }
.tideline { fill: none; stroke: var(--tide); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.tidearea { fill: var(--tide); fill-opacity: 0.12; }
.enddot.tide, .hoverdot.tide { fill: var(--tide); }
.gustline { fill: none; stroke: var(--gust); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.gustarea { fill: var(--gust); fill-opacity: 0.1; }
.enddot.gust, .hoverdot.gust { fill: var(--gust); }
svg .note { fill: var(--ink); font-weight: 600; text-anchor: middle; }
.daychart .note { font-size: 11px; }
.credit { text-align: center; font-size: 0.75rem; color: var(--muted); margin-top: 4px; }
.tile .value small { font-size: 0.6em; font-weight: 600; color: var(--muted); }

/* WHO UV index colours; the category name is always shown, so colour is never the only cue */
.uv { display: inline-block; vertical-align: middle; font-size: 0.55em; font-weight: 700; padding: 2px 8px; border-radius: 999px; color: #fff; }
.uv-low { background: #289500; }
.uv-moderate { background: #f7e400; color: #222; }
.uv-high { background: #f85900; }
.uv-veryhigh { background: #d8001d; }
.uv-extreme { background: #6b49c8; }
.useline { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.key.pv { height: 3px; border-radius: 2px; background: var(--pv); }
.key.use { height: 3px; border-radius: 2px; background: var(--accent); }
/* /solar strings chart: string 1 sun-amber, string 2 purple, red dashed input limit */
.s1line { fill: none; stroke: var(--pv); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.s2line { fill: none; stroke: var(--pressure); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.limit { stroke: #b3261e; stroke-width: 1.5; stroke-dasharray: 4 3; }
svg .limitlabel { fill: #b3261e; text-anchor: end; }
.key.s1 { height: 3px; border-radius: 2px; background: var(--pv); }
.key.s2 { height: 3px; border-radius: 2px; background: var(--pressure); }
.key.limit { height: 0; border-top: 1.5px dashed #b3261e; border-radius: 0; }

/* ── Login / private pages ─────────────────────────── */
.login { display: grid; gap: 8px; max-width: 320px; margin-top: 16px; }
.login input { font: inherit; padding: 12px; border: 1px solid #ccc; border-radius: 10px; }
.login .button { margin-top: 8px; border: 0; font: inherit; font-weight: 600; cursor: pointer; }
.error { color: #b3261e; font-weight: 600; margin-top: 12px; }
.warn { background: #fff4e5; border-radius: 10px; padding: 10px 14px; margin-top: 12px; font-size: 0.9rem; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 0.9rem; }
.facts dt { color: var(--muted); }
.logout { text-align: center; margin-top: 24px; }
.logout button { background: none; border: 1px solid var(--line); border-radius: 8px; padding: 8px 16px; font: inherit; color: var(--muted); cursor: pointer; }

.tip {
  position: absolute; top: -4px; transform: translate(-50%, -100%);
  background: var(--ink); color: #fff; font-size: 0.8rem; padding: 4px 8px; border-radius: 6px;
  white-space: nowrap; pointer-events: none;
}

@media (min-width: 600px) {
  main { padding-top: 32px; }
  .contact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 16px; border-top: 0; }
  .contact li { border-bottom: 0; border-top: 1px solid var(--line); }
  .tiles { grid-template-columns: repeat(4, 1fr); }
  .tiles .tile:last-child:nth-child(odd) { grid-column: auto; }
  .panels.two { grid-template-columns: 1fr 1fr; }
  /* The temperature chart's viewBox is phone-sized, so it scales ~1.9× here — step its text down. */
  .daychart text { font-size: 6.5px; }
  .daychart .note { font-size: 6px; }
  .button { display: inline-block; padding: 12px 28px; }
  .cta { text-align: center; }
}