/* Weather board — built on the budget app's design tokens (~/Code/budget/src/index.css,
   docs/DESIGN_SYSTEM.md): iOS label semantics, opaque surfaces for content, glass only
   for chrome that floats over content, generous radii, rounded numerals, one tint.
   Dark only: the light tokens below stay as the base the dark set overrides.
   Tuned for an iPad Air 5th gen: 1180×820 landscape, 820×1180 portrait. */
:root {
  --bg: #f5f5f7;
  --bg-tint: #eef0f4;
  --surface-1: #ffffff;
  --surface-2: #f2f2f7;
  --surface-3: #e9e9ef;
  --glass-regular: rgba(255, 255, 255, 0.32);
  --glass-thick: rgba(255, 255, 255, 0.46);
  --glass-highlight: rgba(255, 255, 255, 0.9);
  --glass-rim: rgba(255, 255, 255, 0.5);
  --glass-shadow-edge: rgba(0, 0, 0, 0.05);
  --border: rgba(60, 60, 67, 0.12);
  --border-strong: rgba(60, 60, 67, 0.22);
  --separator: rgba(60, 60, 67, 0.16);
  --ink: #1c1c1e;
  --ink-muted: rgba(60, 60, 67, 0.6);
  --ink-faint: rgba(60, 60, 67, 0.3);
  --ink-on-accent: #ffffff;
  --accent: #0a84ff;
  --accent-press: #0060df;
  --accent-soft: rgba(10, 132, 255, 0.12);
  --secondary: #ff9f0a;
  --positive: #34c759;
  --warning: #ff9f0a;
  --negative: #ff3b30;
  --trip: #5e5ce6;
  --cat-4: #ff375f;
  --cat-5: #bf5af2;
  --cat-6: #64d2ff;
  --cat-12: #84cc16;
  --r-xs: 10px; --r-sm: 14px; --r-md: 24px; --r-lg: 30px; --r-xl: 38px; --r-full: 9999px;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.03);
  --shadow-2: 0 4px 16px -4px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-3: 0 12px 40px -8px rgba(0, 0, 0, 0.16), 0 2px 8px rgba(0, 0, 0, 0.06);
  --blur-md: blur(14px) saturate(185%);
  --blur-lg: blur(18px) saturate(190%);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  /* weather semantics, all drawn from the palette above */
  --hi: var(--secondary);
  --lo: var(--accent);
  --rain: var(--accent);
  --sun: #f5b800;          /* iOS-ish yellow, deepened to read on white */
  --moon: #e9c95a;         /* clear-night moon: warm moonlight, not indigo */
  --cloud: #a3a9b4;
  --cloud-dark: #7c8391;
  --flake: var(--cat-6);
  --bolt: #ffcc00;
  --night: var(--trip);
  --night-band: rgba(94, 92, 230, 0.06);
  --rounded: ui-rounded, "SF Pro Rounded", -apple-system, system-ui, sans-serif;
  --gap: 12px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000000;
  --bg-tint: #0a0a0d;
  --surface-1: #1c1c1e;
  --surface-2: #2c2c2e;
  --surface-3: #3a3a3c;
  --glass-regular: rgba(30, 30, 34, 0.62);
  --glass-thick: rgba(30, 30, 34, 0.75);
  --glass-highlight: rgba(255, 255, 255, 0.10);
  --glass-rim: rgba(255, 255, 255, 0.14);
  --glass-shadow-edge: rgba(0, 0, 0, 0.5);
  --border: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.22);
  --separator: rgba(255, 255, 255, 0.14);
  --ink: #f5f5f7;
  --ink-muted: rgba(235, 235, 245, 0.6);
  --ink-faint: rgba(235, 235, 245, 0.32);
  --accent: #0a84ff;
  --accent-press: #409cff;
  --accent-soft: rgba(10, 132, 255, 0.26);
  --positive: #30d158;
  --warning: #ffd60a;
  --negative: #ff453a;
  --trip: #7d7aff;
  --cat-4: #ff6482;
  --cat-5: #da8fff;
  --cat-6: #70d7ff;
  --cat-12: #a3e635;
  --lo: #409cff;
  --rain: #409cff;
  --night-band: rgba(125, 122, 255, 0.08);
  --sun: #ffd60a;
  --moon: #f6e7a6;
  --cloud: #c7cbd3;
  --cloud-dark: #8b929e;
  --bolt: #ffd60a;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 4px 16px -4px rgba(0, 0, 0, 0.6), 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-3: 0 12px 40px -8px rgba(0, 0, 0, 0.7), 0 2px 8px rgba(0, 0, 0, 0.4);
}

* { box-sizing: border-box }
html, body { height: 100%; margin: 0 }
body {
  background:
    radial-gradient(55% 45% at 12% 2%, color-mix(in srgb, var(--accent) 14%, transparent) 0%, transparent 60%),
    radial-gradient(50% 40% at 100% 6%, color-mix(in srgb, var(--secondary) 13%, transparent) 0%, transparent 58%),
    radial-gradient(65% 55% at 50% 108%, color-mix(in srgb, var(--cat-5) 12%, transparent) 0%, transparent 62%),
    var(--bg-tint);
  color: var(--ink); overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", Inter, system-ui, sans-serif;
  font-size: 16px; line-height: 1.4;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none; overscroll-behavior: none;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  transition: background-color .6s var(--ease-out), color .6s var(--ease-out);
}
[data-theme="dark"] body {
  background:
    radial-gradient(55% 45% at 12% 2%, color-mix(in srgb, var(--accent) 9%, transparent) 0%, transparent 60%),
    radial-gradient(50% 40% at 100% 6%, color-mix(in srgb, var(--secondary) 7%, transparent) 0%, transparent 58%),
    radial-gradient(65% 55% at 50% 108%, color-mix(in srgb, var(--cat-5) 8%, transparent) 0%, transparent 62%),
    var(--bg-tint);
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation }
.num, .rnd { font-family: var(--rounded); font-variant-numeric: tabular-nums }

/* Material Symbols Rounded, filled — the only iconography. */
.ms {
  font-family: "Material Symbols Rounded"; font-weight: normal; font-style: normal;
  font-size: 1.2em; line-height: 1; letter-spacing: normal; text-transform: none;
  display: inline-block; white-space: nowrap; direction: ltr; vertical-align: -0.2em;
  font-feature-settings: "liga"; -webkit-font-smoothing: antialiased;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}
.ic-sun { color: var(--sun) } .ic-night { color: var(--night) } .ic-cloud { color: var(--ink-muted) }
.ic-rain { color: var(--rain) } .ic-snow { color: var(--cat-6) } .ic-storm { color: var(--cat-5) }

/* ---------- layout: landscape 1180×820 is the primary canvas ---------- */
.grid {
  height: 100%; display: grid; gap: var(--gap); padding: 14px 16px 16px;
  grid-template-columns: 1.2fr 1fr 1fr;
  grid-template-rows: auto minmax(0, 1.1fr) minmax(0, 1fr);
  grid-template-areas: "top . now" "hourly hourly bdays" "days sum deps";
}
.top { grid-area: top } .now { grid-area: now } .summary { grid-area: sum } .hourly { grid-area: hourly } .bdays { grid-area: bdays }
.days { grid-area: days } .deps { grid-area: deps }

.card {
  background: var(--surface-1); border-radius: var(--r-md); box-shadow: var(--shadow-2);
  padding: 14px 16px; min-height: 0; min-width: 0; overflow: hidden; display: flex; flex-direction: column;
  transition: background-color .6s var(--ease-out);
}
.cardhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px }
h2 { margin: 0; font-size: 17px; line-height: 1.3; font-weight: 600; color: var(--ink) }
h2 .sub { color: var(--ink-muted); font-weight: 400; margin-left: 6px }
.stamp { font-size: 13px; color: var(--ink-faint); margin-left: auto; white-space: nowrap }
#rainBlock[hidden] { display: none }
.empty { color: var(--ink-muted); font-size: 15px; padding: 12px 2px }

/* ---------- header ---------- */
.top { display: flex; align-items: center; gap: 20px; padding: 0 4px; min-width: 0; overflow: hidden }
.clock { font-family: var(--rounded); font-size: 100px; font-weight: 700; line-height: .92; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap }
.clock .sec { font-size: .34em; font-weight: 600; color: var(--ink-muted); letter-spacing: 0 }
.clock .ampm { font-size: .26em; font-weight: 600; color: var(--ink-muted); margin-left: 6px; letter-spacing: 0 }
.date { margin-top: 6px; font-size: 17px; color: var(--ink-muted); white-space: nowrap }
.place { color: var(--accent); font-weight: 600 }
.now { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-width: 0; padding: 4px; text-align: left; justify-self: end; align-self: center }
.nowicon { font-size: 60px; flex: none }
.nowtemp { font-family: var(--rounded); font-size: 84px; font-weight: 700; line-height: .9; letter-spacing: -0.03em; font-variant-numeric: tabular-nums }
.nowtext { display: flex; flex-direction: column; gap: 2px; font-size: 15px; color: var(--ink-muted); white-space: nowrap; min-width: 0; overflow: hidden }
.nowtext > * { overflow: hidden; text-overflow: ellipsis }
.nowtext b { color: var(--ink); font-size: 20px; font-weight: 600 }
.hilo { display: flex; gap: 14px; font-family: var(--rounded); font-weight: 700; font-size: 32px; line-height: 1.05; font-variant-numeric: tabular-nums; margin-top: 2px }
.hi { color: var(--hi) } .lo { color: var(--lo) }
.summary {
  min-width: 0; align-self: stretch;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 10px;
}
/* Grouped surface with hairline separators, not boxes in boxes. */
/* Each summary item and detail tile is its own card, on the same rhythm as the grid. */
.chip, .tile { background: var(--surface-1); border-radius: var(--r-sm); box-shadow: var(--shadow-2); transition: background-color .6s var(--ease-out), transform .15s var(--ease-out) }
.chip:active, .tile:active { transform: scale(.97) }
.day:active { background: var(--surface-2) }
.chip { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; padding: 8px 14px; text-align: left; min-width: 0; min-height: 0; overflow: hidden }
.chip .txt { width: 100% }
.chip > .ms { font-size: 22px; flex: none }
.chip > .moonsvg { width: 22px; height: 22px }
.chip .txt { display: flex; flex-direction: column; min-width: 0 }
.chip .k { font-size: 13px; color: var(--ink-muted); display: flex; align-items: center; gap: 6px; white-space: nowrap }
.chip .k .ms { font-size: 18px }
.chip .k .moonsvg { width: 17px; height: 17px }
.chip .v { font-family: var(--rounded); font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2 }
.chip .s { font-size: 12px; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }

/* ---------- rain nowcast + hourly ---------- */
.nowcast { display: flex; align-items: flex-end; gap: 4px; height: 62px; margin-bottom: 10px }
.nc { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 3px }
.nc i { display: block; width: 100%; background: var(--rain); border-radius: 4px 4px 2px 2px; min-height: 3px }
.nc i.dry { background: var(--surface-2) }
.nc span { font-size: 11px; color: var(--ink-faint); height: 13px; font-variant-numeric: tabular-nums; white-space: nowrap }
.seg { display: inline-flex; background: var(--surface-2); border-radius: var(--r-full); padding: 2px }
.seg button { padding: 4px 14px; font-size: 13px; font-weight: 500; color: var(--ink-muted); border-radius: var(--r-full); transition: all .2s var(--ease-out) }
.seg button.on { background: var(--surface-1); color: var(--ink); box-shadow: var(--shadow-1) }
[data-theme="dark"] .seg button.on { background: var(--surface-3) }
.chart { flex: 1; min-height: 0; position: relative; touch-action: none }
.chart svg, .bigchart svg { display: block; width: 100%; height: 100% }
.chart text, .bigchart text { fill: var(--ink-muted); font-size: 12px; font-family: var(--rounded); font-variant-numeric: tabular-nums }
.chart .tl, .bigchart .tl { fill: var(--ink); font-size: 13px; font-weight: 700 }
.hourdetail { font-size: 14px; color: var(--ink-muted); min-height: 20px; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.hourdetail b { color: var(--ink); font-weight: 600 }
.hourdetail .ms { font-size: 17px }

/* ---------- days ---------- */
.daylist { flex: 1; min-height: 0; display: flex; flex-direction: column; margin: 0 -8px }
.day {
  display: grid; grid-template-columns: 62px 30px 40px 1fr 36px 36px; align-items: center; gap: 8px;
  padding: 0 8px; border-radius: var(--r-xs); text-align: left; font-size: 16px; flex: 1; min-height: 0;
  border-bottom: 0.5px solid var(--separator);
}
.day:last-child { border-bottom: 0 }
.day .dn { font-weight: 600 }
.day.today .dn { color: var(--accent) }
.day .de { font-size: 26px; text-align: center; line-height: 1 }
.wxi { width: 1.15em; height: 1.15em; display: inline-block; vertical-align: -0.22em; overflow: visible }
.nowicon .wxi { width: 1em; height: 1em; vertical-align: middle }
.day .de .wxi { width: 30px; height: 30px; vertical-align: middle }
.bar.wet { background: var(--surface-2) }
.bar.wet i { background: var(--rain) }
.day.rain .lo { color: var(--ink); font-weight: 600 }
.day.rain .hi { color: var(--ink-muted); font-weight: 500 }
.day small { font-size: 11px; color: var(--ink-muted); font-weight: 500; margin-left: 1px }
.days .cardhead { gap: 8px }
.days .cardhead h2 { flex: 1 }
.more { display: inline-flex; align-items: center; gap: 0; font-size: 15px; color: var(--accent); font-weight: 500 }
.more .ms { font-size: 20px; vertical-align: 0 }
.more[hidden] { display: none }
.sheetdays { margin: 0; background: var(--surface-1); border-radius: var(--r-sm); padding: 0 6px }
.sheetdays .day { flex: none; height: 52px; font-size: 17px; grid-template-columns: 70px 34px 46px 1fr 40px 40px }
.sheetdays .day .de { font-size: 30px }
.day .dp { font-size: 13px; color: var(--rain); text-align: right; font-family: var(--rounded); font-variant-numeric: tabular-nums; font-weight: 600 }
.day .dp.z { color: transparent }
.day .lo, .day .hi { font-family: var(--rounded); font-variant-numeric: tabular-nums; text-align: right }
.day .lo { color: var(--ink-muted); font-weight: 500 }
.day .hi { color: var(--ink); font-weight: 700 }
.bar { position: relative; height: 6px; border-radius: var(--r-full); background: var(--surface-2) }
.bar i { position: absolute; top: 0; bottom: 0; border-radius: var(--r-full); background: linear-gradient(90deg, var(--lo), var(--hi)) }
.bar b { position: absolute; top: -3px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--ink); border: 2px solid var(--surface-1) }

/* ---------- tiles: nine small cards ---------- */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 104px; gap: 10px }
.tile { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 10px 14px; text-align: left; min-height: 0; min-width: 0; overflow: hidden; background: var(--surface-2) }
.tile .k { font-size: 13px; color: var(--ink-muted); white-space: nowrap; display: flex; align-items: center; gap: 5px }
.tile .k .ms { font-size: 16px }
.tile .v { font-family: var(--rounded); font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15; white-space: nowrap; display: flex; align-items: center; gap: 6px }
.tile .v small { font-size: 13px; color: var(--ink-muted); font-weight: 600 }
.tile .s { font-size: 12px; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.moonsvg { width: 24px; height: 24px; flex: none }

/* ---------- departures ---------- */
.station { font-size: 17px; font-weight: 600; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; color: var(--ink) }
.station .ms { color: var(--accent); font-size: 22px }
.station small { font-size: 13px; font-weight: 400; color: var(--ink-muted) }
.deps .cardhead { margin-bottom: 2px }
.dirtog { display: flex; flex: none; background: var(--surface-2); border-radius: var(--r-full); padding: 2px }
.dirtog:empty { display: none }
.dirtog button { min-width: 38px; height: 32px; padding: 0 8px; border-radius: var(--r-full); font-size: 13px; font-weight: 600; color: var(--ink-muted); display: grid; place-items: center; transition: all .2s var(--ease-out) }
.dirtog .ms { font-size: 20px; vertical-align: 0 }
.dirname { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-muted); margin-bottom: 2px; min-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.dirtog button.on { background: var(--surface-1); color: var(--ink); box-shadow: var(--shadow-1) }
[data-theme="dark"] .dirtog button.on { background: var(--surface-3) }
.deplist { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; touch-action: pan-y; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 22px), transparent) }
.deplist::-webkit-scrollbar { display: none }
.dep { flex: none }
.dep { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 0.5px solid var(--separator) }
.dep > span:first-child { min-width: 0 }
.dep:last-child { border-bottom: 0; margin-bottom: 14px }
.dep .to { font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.dep .meta { font-size: 13px; color: var(--ink-muted); display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; min-width: 0 }
.dep .meta > * { flex: none }
.pill { font-size: 11px; font-weight: 600; color: #fff; padding: 1px 8px; border-radius: var(--r-full); background: var(--c) }
.dep .eta { font-family: var(--rounded); font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; line-height: 1 }
.dep .eta small { font-size: 13px; color: var(--ink-muted); font-weight: 600; margin-left: 2px }
.dep .eta.due { color: var(--positive) }
.dep.first .to { font-size: 19px }
.dep.first .eta { font-size: 38px }
/* Delays: the timetabled time struck through, the real one in warning colour. */
.dep s { color: var(--ink-faint); text-decoration-thickness: 1.5px }
.late-t { color: var(--warning); font-weight: 600 }
.cancel-t { color: var(--negative); font-weight: 600 }
.dep.late .eta { color: var(--warning) }
.dep.ontime .eta { color: var(--positive) }
.dep.cancelled .to { text-decoration: line-through; text-decoration-thickness: 1.5px; color: var(--ink-muted) }
.dep .eta.cx { color: var(--negative) }
.dep .eta.cx .ms { font-size: 26px }
:root:not([data-theme="dark"]) .late-t, :root:not([data-theme="dark"]) .dep.late .eta { color: #c76a00 }

/* ---------- sheet (glass-thick: it floats over content) ---------- */
.modal { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, .28); display: flex; align-items: center; justify-content: center; padding: 28px; animation: fade .18s var(--ease-out) }
.modal[hidden] { display: none }
.sheet {
  position: relative; width: min(1000px, 100%); max-height: 100%; overflow: auto; padding: 22px 24px;
  border-radius: var(--r-xl); background: var(--glass-thick);
  backdrop-filter: var(--blur-lg); -webkit-backdrop-filter: var(--blur-lg);
  border: 1px solid var(--glass-rim);
  box-shadow: inset 0 1px 1px var(--glass-highlight), var(--shadow-3);
  animation: pop .26s var(--ease-out);
}
.sheet.wide { width: 100%; height: 100%; padding: 0; overflow: hidden }
@keyframes fade { from { opacity: 0 } }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.98) } }
.close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: var(--r-full); background: var(--surface-2); display: grid; place-items: center; z-index: 600; color: var(--ink-muted) }
.close .ms { font-size: 22px }
.sheet h3 { margin: 0 0 2px; font-size: 28px; font-weight: 700; letter-spacing: -0.01em; display: flex; align-items: center; gap: 10px; padding-right: 44px }
.sheet .lede { color: var(--ink-muted); margin: 0 0 14px; font-size: 15px }
/* Stats in sheets are cards, like the board's own cards. */
.kv { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px }
.kv > div { padding: 10px 14px; background: var(--surface-1); border-radius: var(--r-sm); box-shadow: var(--shadow-1); min-width: 0 }
.kv span { display: block; font-size: 13px; color: var(--ink-muted) }
.kv b { font-family: var(--rounded); font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums }
.bigchart { height: 270px; position: relative; background: var(--surface-1); border-radius: var(--r-sm); padding: 6px 4px 0; touch-action: none }
.sheet .seg { margin-bottom: 10px }
.stlist { background: var(--surface-1); border-radius: var(--r-sm); overflow: hidden }
.stlist button { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 13px 16px; border-bottom: 0.5px solid var(--separator); font-size: 17px; text-align: left }
.stlist button:last-child { border-bottom: 0 }
.stlist button.on { color: var(--accent); font-weight: 600 }
.stlist small { color: var(--ink-muted); font-weight: 400 }

/* ---------- iPad Air portrait 820×1180 ---------- */
@media (orientation: portrait) {
  .grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr);
    grid-template-areas: "top now" "hourly hourly" "bdays deps" "days sum";
  }
  .top { justify-content: space-between }
  .clock { font-size: 96px }
  .nowtemp { font-size: 84px }
  .nowicon { font-size: 64px }
  .day { grid-template-columns: 56px 28px 38px 1fr 32px 32px; gap: 6px; font-size: 15px }
}

/* ---------- smaller landscape (phones on their side, split view): scroll ---------- */
@media (orientation: landscape) and (max-height: 640px) {
  body { overflow: auto }
  .grid { height: auto; grid-template-columns: 1fr 1fr; grid-template-rows: auto;
    grid-template-areas: "top now" "hourly bdays" "days deps" "sum sum" }
  .summary { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, 96px) }

  .clock { font-size: 72px } .nowtemp { font-size: 64px } .nowicon { font-size: 52px }
  .hourly, .bdays { height: 360px } .days { height: 420px } .deps { height: 420px }
}
/* ---------- phones upright ---------- */
@media (orientation: portrait) and (max-width: 700px) {
  body { overflow: auto }
  .grid { height: auto; display: flex; flex-direction: column }
  .top { flex-direction: column; align-items: flex-start; gap: 8px }
  .now { border-left: 0; padding: 0 }
  .summary { grid-template-rows: repeat(3, 92px) }
  .clock { font-size: 72px }
  .hourly { height: 380px } .bdays { min-height: 300px } .days { height: 460px } .deps { min-height: 320px }
}

/* ---------- sun & moon sheet ---------- */
.sunarc { height: 190px; background: var(--surface-1); border-radius: var(--r-sm); margin-bottom: 12px }
.sunarc svg { display: block; width: 100%; height: 100% }
.sunarc text { font-size: 13px; font-family: var(--rounded); font-variant-numeric: tabular-nums }
.daylight { background: var(--surface-1); border-radius: var(--r-sm); padding: 4px 14px }
.dlrow { display: grid; grid-template-columns: 56px 66px 1fr 66px 84px; align-items: center; gap: 10px; height: 38px; border-bottom: 0.5px solid var(--separator); font-size: 15px }
.dlrow:last-child { border-bottom: 0 }
.dlrow .dn { font-weight: 600 }
.dlrow.today .dn { color: var(--accent) }
.dlrow .rt, .dlrow .st, .dlrow .len { font-family: var(--rounded); font-variant-numeric: tabular-nums; color: var(--ink-muted); white-space: nowrap }
.dlrow .rt { text-align: right }
.dlrow .len { color: var(--ink); font-weight: 600; text-align: right }
.dlrow .len small { color: var(--ink-muted); font-weight: 500; font-size: 12px; margin-left: 5px }
.track { position: relative; height: 10px; border-radius: var(--r-full); background: color-mix(in srgb, var(--night) 22%, var(--surface-2)) }
.track i { position: absolute; top: 0; bottom: 0; border-radius: var(--r-full); background: linear-gradient(90deg, color-mix(in srgb, var(--sun) 55%, var(--surface-1)), var(--sun) 50%, color-mix(in srgb, var(--sun) 55%, var(--surface-1))) }
.track .nowmark { position: absolute; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--ink) }
.moonrow { display: flex; align-items: center; gap: 16px; margin-top: 12px; background: var(--surface-1); border-radius: var(--r-sm); padding: 12px 16px }
.moonrow div { display: flex; flex-direction: column; gap: 2px }
.moonrow b { font-size: 19px; font-weight: 600 }
.moonrow span { font-size: 14px; color: var(--ink-muted) }

/* ---------- birthdays ---------- */
.bdays { cursor: pointer }
.bdays h2 { display: flex; align-items: center; gap: 8px }
.bdays h2 .ms { font-size: 22px }
.bdbody { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden }
.bd { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 0.5px solid var(--separator) }
.bd:last-child { border-bottom: 0 }
.bd .who { display: flex; flex-direction: column; min-width: 0 }
.bd b { font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.bd small { font-size: 13px; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px }
.bd .when { font-family: var(--rounded); font-size: 15px; font-weight: 600; color: var(--ink-muted); white-space: nowrap }
.bd .when.today { color: var(--sun) }
.bd.big b { font-size: 22px }
.bd.big .when { font-size: 18px; color: var(--ink) }
.bd.big .when.today { color: var(--sun) }
.grp { font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: var(--r-full); background: var(--surface-3); color: var(--ink) }
.grp.g-family { background: color-mix(in srgb, var(--sun) 28%, var(--surface-2)) }
.grp.g-groom { background: color-mix(in srgb, var(--accent) 35%, var(--surface-2)) }
.grp.g-bride { background: color-mix(in srgb, var(--cat-5) 35%, var(--surface-2)) }
.bdsub { font-size: 12px; color: var(--ink-muted); margin: 8px 0 0; text-transform: none }
.bdnext { font-size: 13px; color: var(--ink-muted); margin-top: auto; padding-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.bdlist { background: var(--surface-1); border-radius: var(--r-sm); padding: 0 14px }
.bdlist.recent .when { color: var(--ink-faint) }
.bdmissing { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; background: var(--surface-1); border-radius: var(--r-sm); padding: 8px 14px }
.bdmissing > span { padding: 6px 0; font-size: 14px; color: var(--ink-muted); border-bottom: 0.5px solid var(--separator); display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
@media (max-width: 700px) { .bdmissing { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.sheet h4 { margin: 16px 0 6px; font-size: 15px; font-weight: 600; color: var(--ink-muted) }

/* ---------- sheets: sunrise columns, moon ---------- */
.sunchart { height: 300px; background: var(--surface-1); border-radius: var(--r-sm); touch-action: none }
.sunchart svg { display: block; width: 100%; height: 100% }
.sunchart text { font-size: 12px; font-family: var(--rounded); font-variant-numeric: tabular-nums }
#stDetail { margin: 0; font-weight: 400; color: var(--ink-muted); font-size: 14px }
#stDetail b { color: var(--ink); font-weight: 600 }
.daylight.cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: 22px; grid-auto-flow: column; grid-template-rows: repeat(10, auto) }
.daylight.cols .dlrow { grid-template-columns: 74px 64px 1fr 64px 78px; gap: 8px; font-size: 14px }
.daylight.cols .dlrow:nth-child(10n) { border-bottom: 0 }
.daylight.cols:has(.dlrow:nth-child(21)) { grid-template-rows: none; grid-auto-flow: row }
.morebtn { display: block; margin: 12px auto 0; padding: 9px 18px; border-radius: var(--r-full); background: var(--surface-2); color: var(--accent); font-weight: 600; font-size: 15px }
.phases { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; background: var(--surface-1); border-radius: var(--r-sm); padding: 12px 8px }
.ph { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 0; border-radius: var(--r-xs); font-size: 12px; color: var(--ink-muted); text-align: center }
.ph .moonsvg { width: 40px; height: 40px }
.ph.on { background: var(--surface-3); color: var(--ink); font-weight: 600 }
.moonmeaning { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px }
.moonmeaning div { background: var(--surface-1); border-radius: var(--r-sm); padding: 12px 14px }
.moonmeaning span { font-size: 13px; color: var(--ink-muted) }
.moonmeaning p { margin: 4px 0 0; font-size: 15px; line-height: 1.4 }
.mooncal { display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 4px; background: var(--surface-1); border-radius: var(--r-sm); padding: 10px 8px }
.mc { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; color: var(--ink-muted); font-variant-numeric: tabular-nums }
.mc .moonsvg { width: 26px; height: 26px }
.mc.on { color: var(--accent); font-weight: 600 }
.sheet h3 .moonsvg { width: 30px; height: 30px }
.fine { font-size: 12px; color: var(--ink-faint); margin: 12px 0 0 }
@media (max-width: 700px) {
  .sunchart { height: 300px; background: var(--surface-1); border-radius: var(--r-sm); touch-action: none }
.sunchart svg { display: block; width: 100%; height: 100% }
.sunchart text { font-size: 12px; font-family: var(--rounded); font-variant-numeric: tabular-nums }
#stDetail { margin: 0; font-weight: 400; color: var(--ink-muted); font-size: 14px }
#stDetail b { color: var(--ink); font-weight: 600 }
.daylight.cols { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none }
  .phases { grid-template-columns: repeat(4, minmax(0, 1fr)) }
  .moonmeaning { grid-template-columns: 1fr }
  .mooncal { grid-template-columns: repeat(10, minmax(0, 1fr)) }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}