:root {
  --page-base: #0b1723;
  --surface-raised: #183e56;
  --text-bright: #edf6ff;
  --accent: #7dd3fc;
  --text-soft: #bdd0df;
  --border: #31506a;
  --card-surface: rgba(17, 42, 59, .82);
  --text-label: #b7d3e5;
  --text-unit: #8ecae6;
  --text-muted: #82a2b7;
  --border-strong: #527188;
  --active-surface: #16425d;
  --text-secondary: #9ab5c7;
  --surface-dark: #112a3b;
  --text-value: #d5e6f1;
  --header-surface: #7894a8;
  --hover-surface: rgba(183, 211, 229, .08);
  --selection-accent: #7dd3fc;
  --button-ink: #112a3b;
  --button-border: #bae6fd;

  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--page-base);
  color: var(--text-bright);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background: radial-gradient(circle at 16% 0%, var(--surface-raised) 0%, var(--page-base) 44rem);
}

.dashboard { width: min(100% - 2rem, 72rem); margin: 0 auto; padding: 1rem 0 3.5rem; }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.header-row .eyebrow { margin: 0; }
.station-location { display: block; white-space: nowrap; }
.header-row .unit-toggle { flex-shrink: 0; }
.page-header { margin-bottom: 0; }
.eyebrow { margin: 0 0 .4rem; color: var(--accent); font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(2rem, 6vw, 3.25rem); line-height: 1.05; }
.updated, .status-message { color: var(--text-soft); }
.updated { margin: .2rem 0 0; font-size: .7rem; color: var(--text-muted); font-weight: 400; }
.updated-suffix { font-size: .6rem; color: var(--text-muted); opacity: .6; }
.readings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.reading-card, .status-message { border: 1px solid var(--border); border-radius: 1rem; background: var(--card-surface); box-shadow: 0 1rem 3rem rgba(0, 0, 0, .18); }
.reading-card { min-height: 12rem; padding: 1.5rem; }
.reading-label { margin: 0; color: var(--text-label); font-size: .95rem; font-weight: 600; }
.reading-value { margin: 2.25rem 0 0; color: #fff; font-size: clamp(2.25rem, 6vw, 4rem); font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: -.07em; line-height: 1; }
.reading-value span { margin-left: .3rem; color: var(--text-unit); font-size: .42em; letter-spacing: 0; }
.metric-layout { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 1rem; margin-top: 1.5rem; }
.metric-layout .reading-value { margin: 0; }
.metric-range { display: grid; gap: .8rem; min-width: 7.5rem; }
.metric-extreme { display: grid; grid-template-columns: 1.4rem 1fr; column-gap: .45rem; align-items: center; }
.metric-icon { font-size: 1.35rem; font-weight: 800; line-height: 1; }
.metric-extreme.high .metric-icon { color: var(--accent); }
.metric-extreme.low .metric-icon { color: var(--accent); opacity: .45; }
.metric-extreme-label, .metric-extreme-value, .metric-extreme-time { margin: 0; }
.metric-extreme-label { color: var(--text-label); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.metric-extreme-value { color: #fff; font-size: 1.2rem; font-variant-numeric: tabular-nums; font-weight: 700; line-height: 1.15; }
.metric-extreme-time { color: var(--text-muted); font-size: .68rem; white-space: nowrap; }
.pressure-card .reading-value { font-size: clamp(2.35rem, 5vw, 3.35rem); }

@media (min-width: 42.01rem) {
  .pressure-card .reading-value { font-size: clamp(2.35rem, 3.8vw, 2.9rem); }
  .pressure-card .reading-value span { display: block; margin: .25rem 0 0; font-size: .34em; }
}

.reading-value.compact { font-size: clamp(2rem, 5vw, 3.25rem); }
.reading-detail { margin: 1rem 0 0; color: var(--text-label); font-size: .9rem; line-height: 1.45; }
.reading-note { margin: .55rem 0 0; color: var(--text-muted); font-size: .75rem; line-height: 1.4; }
.wind-summary { margin-top: 1.25rem; }
.wind-period { margin: 1rem 0 .2rem; color: var(--text-muted); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.wind-period:first-child { margin-top: 0; }
.wind-value { margin: 0; color: #fff; font-size: 1.1rem; font-variant-numeric: tabular-nums; font-weight: 700; }
.wind-value span { color: var(--text-unit); font-size: .8em; font-weight: 500; }
.status-message { margin: 0; padding: 1.25rem 1.5rem; }
.chart-card { margin-top: 1rem; padding: 1.5rem; border: 1px solid var(--border); border-radius: 1rem; background: var(--card-surface); box-shadow: 0 1rem 3rem rgba(0, 0, 0, .18); }
.chart-heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.chart-kicker { margin: 0 0 .35rem; color: var(--text-muted); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.chart-controls { display: flex; gap: .45rem; flex-shrink: 0; }
.history-controls { flex-wrap: wrap; margin-top: 1rem; }
.chart-control { padding: .5rem .75rem; border: 1px solid var(--border-strong); border-radius: .55rem; background: transparent; color: var(--text-label); font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; }
.chart-control:hover, .chart-control:focus-visible { border-color: var(--accent); color: #fff; }
.chart-control.is-active { border-color: var(--accent); background: var(--active-surface); color: #fff; }
.rainfall-comparison-controls { align-items: center; }
.rainfall-comparison-controls > span { color: var(--text-muted); font-size: .85rem; }
.rainfall-comparison-controls button:disabled { opacity: .35; cursor: default; }
h2 { margin: 0; font-size: clamp(1.35rem, 3vw, 1.8rem); letter-spacing: -.025em; }
h2 span { color: var(--text-secondary); font-size: .72em; font-weight: 500; letter-spacing: 0; }
.chart-wrap { height: 20rem; margin-top: 1.5rem; }
.chart-status { margin: 1rem 0 0; color: var(--text-soft); }
#refresh-status:empty { display: none; }
.chart-note { margin: .75rem 0 0; color: var(--text-muted); font-size: .8rem; line-height: 1.45; }


@media (max-width: 42rem) {
  .dashboard { width: min(100% - 1rem, 36rem); padding: .75rem 0 1.5rem; }
  .readings { grid-template-columns: 1fr; gap: .65rem; }
  .reading-card { min-height: auto; padding: 1rem 1rem 1.5rem; }
  .reading-value { margin-top: .75rem; }
  .metric-layout { grid-template-columns: minmax(0, 1fr) 6.6rem; gap: .5rem; margin-top: .75rem; }
  .metric-range { min-width: 0; gap: .4rem; }
  .metric-card .reading-value { font-size: clamp(2.5rem, 11vw, 3.25rem); }
  .pressure-card .reading-value { font-size: clamp(2rem, 9vw, 2.75rem); }
  .metric-extreme { grid-template-columns: 1.15rem 1fr; column-gap: .3rem; }
  .metric-icon { font-size: 1.15rem; }
  .metric-extreme-value { font-size: 1.08rem; }
  .metric-extreme-time { font-size: .62rem; }
  .chart-card { padding: .8rem; }
  .chart-wrap { height: 15rem; margin-top: 1rem; }
  .chart-heading { align-items: stretch; flex-direction: column; }
}


.history-card { position: relative; isolation: isolate; touch-action: pan-y; }
.temperature-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: -1; }
.temperature-scrub-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: -1; }
.temperature-trace { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: .38; stroke: var(--text-secondary); }
.temperature-dot { position: absolute; width: 6px; height: 6px; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: -1; }
.temperature-dot.high { background: var(--accent); }
.temperature-dot.low { background: transparent; border: 1.2px solid var(--accent); }
.history-card > .reading-label, .history-card > .metric-layout { text-shadow: 0 0 5px var(--surface-dark), 0 0 9px var(--surface-dark); }
.temperature-cursor { stroke: var(--text-soft); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .3; }
.temperature-peek { position: absolute; bottom: .35rem; left: .6rem; right: .6rem; display: flex; justify-content: flex-start; gap: .65rem; pointer-events: none; font-size: .7rem; font-variant-numeric: tabular-nums; white-space: nowrap; text-shadow: 0 0 4px var(--surface-dark), 0 0 8px var(--surface-dark); }
.temperature-peek[hidden] { display: none; }
.peek-time { color: var(--text-soft); }
.peek-temperature { color: var(--text-value); }
.history-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.temperature-cursor[data-extreme="high"] { stroke: var(--accent); opacity: .8; }
.temperature-cursor[data-extreme="low"] { stroke: var(--accent); opacity: .8; }

.rainfall-card .metric-layout { grid-template-columns: 1fr; }
.rainfall-card .temperature-trace { stroke: var(--accent); }

.rainfall-hourly-bars { fill: var(--accent); opacity: .22; }
.rainfall-card .temperature-peek { flex-wrap: wrap; column-gap: .65rem; row-gap: 0; }
.peek-hourly-rain { color: var(--text-unit); }

.reading-value .unit-number { margin: 0; color: inherit; font-size: inherit; letter-spacing: inherit; }

.wind-value span span { font-size: inherit; }

.unit-toggle { padding: .25rem .4rem; border: 1px solid transparent; border-radius: .35rem; background: transparent; color: var(--text-secondary); font: inherit; font-size: .75rem; cursor: pointer; }
.unit-toggle:hover { color: var(--text-bright); background: var(--hover-surface); }
.unit-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.wind-card .wind-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wind-card .reading-value { margin-top: .5rem; font-size: clamp(1.8rem, 4vw, 2.5rem); }
.wind-card .reading-value > [data-unit-label] { display: block; margin: .3rem 0 0; }

.rainfall-card { display: grid; grid-template-columns: minmax(0, 1fr); padding: 0; }
.rainfall-today, .rainfall-history { position: relative; min-width: 0; padding: 1.2rem .75rem 4rem; }
.rainfall-today { border-radius: 1rem; }
.rainfall-history { border-radius: 0 1rem 1rem 0; }
.rainfall-card .reading-value { white-space: nowrap; }
.rainfall-card .reading-label { font-size: .8rem; }
.rainfall-daily-bars, .rainfall-storm-bars { fill: var(--accent); opacity: .22; }
.rainfall-storm-bars { opacity: .38; }
.rainfall-history .temperature-peek { display: block; left: calc(-100% + .6rem); white-space: pre-wrap; text-align: right; color: var(--text-soft); }
.rainfall-history .temperature-peek[hidden] { display: none; }
.rainfall-today:focus-visible, .rainfall-history:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.rainfall-history .temperature-backdrop { height: calc(100% - 4rem); }

.temperature-card, .humidity-card, .pressure-card { padding-right: .6rem; }
.metric-range { min-width: 0; justify-self: end; text-align: right; }
.metric-extreme { grid-template-columns: auto auto; justify-content: end; }

/* Compact title bands share the cards' blue-gray border palette. */
.reading-card { min-height: 10.5rem; padding-top: 2.15rem; }
.reading-card > .reading-label, .sun-card-heading {
  position: absolute;
  inset: 0 0 auto;
  margin: 0;
  padding: .3rem .75rem;
  border-radius: .9rem .9rem 0 0;
  background: var(--header-surface);
  color: var(--surface-dark);
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.25;
  text-shadow: none;
}
.reading-card .metric-layout { margin-top: 0; position: relative; top: -.3rem; }
.temperature-card .metric-layout,
.humidity-card .metric-layout,
.pressure-card .metric-layout,
.rainfall-today .metric-layout { min-height: 7rem; }
.rainfall-card { padding-top: 1.6rem; }
.rainfall-today, .rainfall-history { padding-top: .55rem; border-top-left-radius: 0; border-top-right-radius: 0; }
.rainfall-today { padding-bottom: 1.5rem; }
.rainfall-today .temperature-backdrop {
  top: -1.6rem;
  height: calc(100% + 1.6rem);
  border-top-left-radius: 1rem;
}
.chart-card { --chart-padding: 1.5rem; }
.chart-card > :first-child {
  margin: calc(-1 * var(--chart-padding)) calc(-1 * var(--chart-padding)) 0;
  padding: .3rem .75rem;
  border-radius: .9rem .9rem 0 0;
  background: var(--header-surface);
  color: var(--surface-dark);
}
.chart-card > :first-child h2 { font-size: .8rem; font-weight: 700; line-height: 1.25; letter-spacing: normal; }
.temperature-summary-controls { margin-top: .75rem; }
.chart-card > :first-child h2 span, .chart-card > :first-child .chart-kicker { color: var(--surface-dark); }
.chart-card > :first-child .chart-kicker { margin-bottom: .15rem; font-size: .65rem; }
.chart-heading .chart-control { padding: .3rem .5rem; color: var(--surface-dark); border-color: var(--border); }
.chart-heading .chart-control.is-active { color: var(--text-bright); }
@media (max-width: 42rem) {
  .chart-card { --chart-padding: .8rem; }
  .temperature-card .metric-layout,
  .humidity-card .metric-layout,
  .pressure-card .metric-layout,
  .rainfall-today .metric-layout { min-height: 6rem; }
}

.year-timeline { margin-top: 0; padding: 0 .75rem .4rem; }
.timeline-heading { display: flex; justify-content: space-between; align-items: center; gap: .5rem; color: var(--text-secondary); font-size: .75rem; }
.timeline-heading { flex-wrap: wrap; justify-content: center; margin-bottom: 0; text-align: center; }
.timeline-heading .timeline-navigation { margin-left: 0; }
.timeline-navigation { display: flex; gap: .35rem; margin-left: auto; }
.header-date-row { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; }
.header-date-navigation { margin-left: 0; }
.timeline-navigation button { width: 2.75rem; height: 2rem; padding: 0; border: 1px solid transparent; border-radius: .4rem; background: transparent; color: var(--text-secondary); font-family: inherit; font-size: .75rem; cursor: pointer; touch-action: manipulation; }
.timeline-navigation button:hover:not(:disabled) { color: var(--text-bright); background: var(--border); }
.timeline-navigation button:disabled { opacity: .3; cursor: default; }
.timeline-navigation button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.timeline-today, .timeline-controls button { border: 1px solid transparent; border-radius: .4rem; background: transparent; color: var(--text-secondary); cursor: pointer; font: inherit; }
.timeline-today { height: 2rem; padding: .35rem .7rem; background: var(--selection-accent); color: var(--button-ink); border-color: var(--button-border); font-weight: 700; }
.timeline-today[hidden] { display: none; }
.timeline-body { --timeline-chart-height: 6.4rem; --timeline-label-space: 1.6rem; display: flex; gap: .65rem; }
.timeline-plot { position: relative; flex: 1; min-width: 0; height: calc(var(--timeline-chart-height) + var(--timeline-label-space)); padding-bottom: var(--timeline-label-space); touch-action: pan-y; }
/* Enlarge the pointer target without changing chart geometry or layout. */
.timeline-plot::before { content: ''; position: absolute; inset: -1.5rem 0; z-index: 1; }
/* Nearby controls remain above the extended scrub target. */
.timeline-heading { position: relative; z-index: 3; }
.timeline-heading { pointer-events: none; }
.timeline-heading button { pointer-events: auto; }
.timeline-plot > svg { display: block; width: 100%; height: 100%; overflow: hidden; }
.timeline-bars { fill: var(--text-secondary); opacity: .4; }
.timeline-average { stroke: var(--text-soft); stroke-width: 1; stroke-dasharray: 1 3; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .2; }
.timeline-today-line { stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: .85; }
.timeline-today-marker { position: absolute; top: 0; transform: translateX(-50%); padding: .1rem .3rem; border-radius: .25rem; background: var(--surface-raised); color: var(--accent); font-size: .65rem; pointer-events: none; }
.timeline-selected { stroke: var(--selection-accent); stroke-width: 2; vector-effect: non-scaling-stroke; opacity: .25; }
.timeline-caption { position: absolute; top: 0; transform: translateX(-50%); width: max-content; max-width: 100%; padding: .1rem .3rem; border-radius: .25rem; background: var(--surface-raised); color: var(--accent); font-size: .7rem; font-variant-numeric: tabular-nums; line-height: 1.5; white-space: pre-line; text-align: center; pointer-events: none; z-index: 1; }
.timeline-controls { display: grid; grid-template-columns: repeat(2, 2rem); grid-auto-rows: 2rem; align-self: flex-start; align-content: center; height: var(--timeline-chart-height); gap: .2rem; }
.timeline-controls button { width: 2rem; height: 2rem; padding: .3rem; }
.timeline-controls svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.timeline-controls button[aria-pressed="true"], .timeline-controls button:hover, .timeline-today:hover { color: var(--text-bright); background: var(--border); }
.timeline-plot:focus-visible, .timeline-controls button:focus-visible, .timeline-today:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }



.historical-mode .updated { color: var(--text-muted); }
.selected-day-cards .metric-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.selected-day-cards .reading-value { font-size: clamp(1.5rem, 3vw, 2.2rem); margin-top: .35rem; }
.selected-day-cards .reading-value > [data-unit-label] { display: inline; margin-left: .25rem; }
.selected-day-cards .metric-extreme-time { margin-top: .3rem; }
.selected-day-cards .rainfall-today { grid-column: 1 / -1; }
.selected-day-cards:not(.comparison-readings) .rainfall-card .metric-layout { grid-template-columns: 1fr; }
.selected-day-cards:not(.comparison-readings) .rainfall-card .reading-value { font-size: clamp(2.25rem, 6vw, 4rem); }
@media (max-width: 42rem) {
  .timeline-caption { font-size: .65rem; }
}

/* Theme changes animate actual paint properties, including SVG strokes and fills. */
body.historical-mode {
  --surface-raised: #393454;
  --text-bright: #f5f0ff;
  --accent: #c4b5fd;
  --text-soft: #d3c9e4;
  --border: #655a83;
  --card-surface: rgba(42, 36, 60, .85);
  --text-label: #cfc3e1;
  --text-unit: #c0abe1;
  --text-muted: #a393b8;
  --border-strong: #84729f;
  --active-surface: #4c3e65;
  --text-secondary: #b6a5cf;
  --surface-dark: #292438;
  --text-value: #e5dcf1;
  --header-surface: #a49bb7;
  --hover-surface: rgba(207, 195, 225, .08);
  --selection-accent: #c4b5fd;
  --button-ink: #292438;
  --button-border: #ddd6fe;
}
body { isolation: isolate; background: radial-gradient(circle at 16% 0%, #183e56 0%, #0b1723 44rem); }
body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 16% 0%, #393454 0%, #191725 44rem); opacity: 0; transition: opacity .25s ease; }
body.historical-mode::before { opacity: 1; }
body, body * { transition: color .25s ease, background-color .25s ease, border-color .25s ease, outline-color .25s ease, fill .25s ease, stroke .25s ease, text-shadow .25s ease, box-shadow .25s ease; }
@media (pointer: coarse) {
  .timeline-navigation button, .timeline-today { position: relative; }
  .timeline-navigation button::after, .timeline-today::after { content: ''; position: absolute; inset: -6px 0; }
}
@media (prefers-reduced-motion: reduce) {
  body, body *, body::before { transition: none; }
}

.timeline-plot { user-select: none; }
.timeline-range { fill: var(--accent); fill-opacity: .2; stroke: var(--accent); stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: none; }
.timeline-reset-range[hidden] { display: none; }
.timeline-reset-range { padding: .35rem .7rem; border: 1px solid var(--border); border-radius: .4rem; background: var(--surface-raised); color: var(--text-bright); font: inherit; cursor: pointer; }
.timeline-reset-range:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.timeline-select-range { min-height: 2.75rem; padding: .35rem .7rem; border: 1px solid var(--border); border-radius: .4rem; background: var(--surface-raised); color: var(--text-bright); font: inherit; cursor: pointer; touch-action: manipulation; }
.timeline-select-range[aria-pressed="true"] { background: var(--selection-accent); color: var(--button-ink); }
.timeline-select-range:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.selecting-range .timeline-plot { cursor: crosshair; }

.timeline-range-start, .timeline-range-end { --range-label-width: 8rem; position: absolute; width: var(--range-label-width); max-width: 100%; padding: .1rem .3rem; border-radius: .25rem; background: var(--surface-raised); color: var(--accent); font-size: .7rem; font-variant-numeric: tabular-nums; line-height: 1.5; white-space: nowrap; pointer-events: none; z-index: 2; }
.timeline-range-start { top: var(--timeline-chart-height); text-align: center; transform: translateX(-50%); }
.timeline-range-end { top: 0; text-align: center; transform: translate(-50%, -100%); }


/* Keep timeline tools light, with generous hit areas. */
.timeline-heading { gap: .25rem .75rem; min-height: 0; }
.timeline-select-range, .timeline-reset-range { min-height: 2.75rem; padding: .35rem .5rem; border-color: transparent; background: transparent; color: var(--text-secondary); font-size: .75rem; }
.timeline-select-range:hover, .timeline-reset-range:hover { color: var(--text-bright); background: var(--border); }
.timeline-visible-range { display: inline-flex; justify-content: center; align-items: center; gap: .25rem; flex-wrap: wrap; font-size: .75rem; }
.timeline-selection:empty { display: none; }
.timeline-selection:not(:empty) {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 5rem);
  padding: .1rem .35rem;
  border-radius: .25rem;
  background: var(--surface-raised);
  line-height: 1.4;
}
.timeline-visible-range[hidden], .timeline-select-range[hidden] { display: none; }
.timeline-reset-range { text-decoration: underline; text-underline-offset: .2em; }
.header-date-navigation .timeline-today { width: auto; padding-inline: .65rem; color: var(--accent); }

/* Range and reset sit above the centered metric grid. */
.timeline-controls { position: relative; margin-top: -3rem; height: auto; grid-template-rows: 2.8rem repeat(3, 2rem); }
.timeline-controls::before { content: ''; position: absolute; top: 2.5rem; left: 0; right: 0; border-top: 1px solid var(--border); pointer-events: none; }
.timeline-controls .timeline-select-range, .timeline-controls .timeline-reset-range { justify-self: center; align-self: start; width: 2rem; height: 2rem; min-height: 0; padding: .3rem; }
.timeline-controls .timeline-select-range { grid-column: 1; grid-row: 1; }
.timeline-controls .timeline-reset-range { grid-column: 2; grid-row: 1; text-decoration: none; }
.timeline-controls .timeline-reset-range[hidden] { display: block; visibility: hidden; pointer-events: none; }

.timeline-day-labels { position: absolute; top: 0; left: 0; right: 0; height: var(--timeline-chart-height); pointer-events: none; }
.timeline-day-label { position: absolute; transform: translate(-50%, calc(-100% - 3px)); color: var(--text-soft); opacity: .5; font-size: .65rem; line-height: 1; font-variant-numeric: tabular-nums; }

/* Both dates share the same charts; column colors identify their traces. */
:root { --comparison-accent: #f4c95d; }
.comparison-toolbar { display: flex; justify-content: flex-end; }
.compare-dates { border: 0; border-radius: .4rem; background: transparent; color: var(--text-secondary); font: inherit; font-size: .75rem; min-height: 2rem; padding: .3rem .65rem; cursor: pointer; }
.compare-dates[aria-pressed="true"] { color: var(--comparison-accent); }
.compare-dates:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.comparison-timeline {
  --accent: var(--comparison-accent);
  --selection-accent: var(--comparison-accent);
  --text-bright: #fff2c7;
  --text-secondary: #d9b965;
  --text-soft: #e6cd8c;
  --text-muted: #bca16a;
  --surface-raised: #342c19;
  --border: #65512b;
  --button-ink: #29210f;
  --button-border: #f8df9a;
  color: var(--text-secondary);
  margin-top: .75rem;
}
.comparison-status { font-size: .75rem; color: var(--text-soft); }
.comparison-status:empty { display: none; }
.comparison-timeline .timeline-selected, .comparison-timeline .timeline-today-line { stroke: var(--comparison-accent); }
.comparison-readings .metric-layout { display: grid; align-items: start; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .75rem 1.5rem; width: 100%; }
.comparison-column { min-width: 0; }
.comparison-second { padding-left: 0; }
.comparison-date { min-height: 2.8em; margin: 0 0 .65rem; font-size: .7rem; line-height: 1.4; color: var(--accent); }
.comparison-second .comparison-date { color: var(--comparison-accent); }
.comparison-values { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem 1rem; }
.comparison-values .reading-value { font-size: clamp(1.3rem, 3.5vw, 2.4rem); }
.comparison-values .metric-range { margin-left: 0; justify-self: start; text-align: left; }
.comparison-values .metric-extreme { justify-content: start; }
.comparison-values .metric-extreme-value [data-unit-label] { margin-left: .2rem; font-size: .75em; }
.comparison-readings .metric-extreme-time { margin-top: 0; }
.comparison-readings .rainfall-history { display: none; }
.comparison-trace { fill: none; stroke: var(--comparison-accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: .25; }
.comparison-readings .temperature-trace { stroke: var(--accent); }

.comparison-readings .rainfall-today { grid-column: 1 / -1; }

.comparing-dates .year-timeline .timeline-controls { grid-template-rows: 2.8rem; }
.comparison-timeline [data-timeline-metric] { display: none; }
.comparing-dates .year-timeline .timeline-controls::before { display: none; }
.timeline-controls.comparison-metrics { display: flex; justify-content: center; align-items: center; gap: .5rem; height: auto; margin: .25rem .75rem; }
.timeline-controls.comparison-metrics::before { display: none; }

.peek-comparison, .peek-comparison-hourly { color: var(--comparison-accent); }
.comparison-readings .temperature-peek { flex-wrap: wrap; row-gap: .2rem; }
.comparison-readings .peek-temperature { color: var(--accent); }

/* Keep an empty current-reading row for historical dates so extrema line up. */
.comparison-readings :is(.temperature-card, .pressure-card, .humidity-card) .comparison-values {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 4rem auto;
  align-items: start;
  gap: .5rem;
}
.comparison-readings :is(.temperature-card, .pressure-card, .humidity-card) .comparison-values > .reading-value {
  grid-row: 1;
  margin: 0;
}
.comparison-readings :is(.temperature-card, .pressure-card, .humidity-card) .comparison-values > .metric-range {
  grid-row: 2;
}

.comparison-toolbar:empty { display: none; }
.comparing-dates .year-timeline .timeline-heading { min-height: 0; margin-bottom: 0; }
.comparing-dates .year-timeline .timeline-controls { margin-top: 0; grid-template-rows: 2rem; }
.timeline-controls.comparison-metrics { flex-wrap: wrap; }
.timeline-controls.comparison-metrics .compare-dates { width: auto; height: 2rem; padding: .3rem .65rem; font-size: .75rem; border: 0; color: var(--comparison-accent); }

.year-timeline .comparison-toolbar { grid-column: 1 / -1; grid-row: 5; justify-content: center; }
.year-timeline .comparison-toolbar .compare-dates { width: 100%; height: auto; min-height: 2rem; padding: .25rem 0; font-size: .7rem; line-height: 1.25; }

.timeline-controls .timeline-match-range { width: 2rem; height: 2rem; padding: .3rem; }
.timeline-match-range[hidden] { display: none; }
.timeline-match-range:disabled { opacity: .4; cursor: default; }

/* Keep shared actions above the timelines' extended invisible scrub targets. */
.timeline-controls.comparison-metrics { position: relative; z-index: 4; }

/* Full-height comparison divider, using the timeline reference line's dot spacing. */
.comparison-readings .reading-card:not(.rainfall-card):not(.sun-card) { padding-inline: .75rem; }
.comparison-readings .reading-card:not(.sun-card)::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: radial-gradient(circle, var(--text-soft) .75px, transparent 1px) center top / 2px 4px repeat-y;
  opacity: .2;
  pointer-events: none;
  z-index: 1;
}

/* Center the default metric picker below the timeline, matching comparison mode. */
.year-timeline .timeline-body > .timeline-controls { grid-template-rows: 2rem; }
.year-timeline .timeline-body > .timeline-controls::before { display: none; }
.timeline-controls.timeline-metrics { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: .5rem; height: auto; margin: .25rem 0; z-index: 4; }
.timeline-controls.timeline-metrics::before { display: none; }
.timeline-metrics .comparison-toolbar .compare-dates { width: auto; height: 2rem; padding: .3rem .65rem; font-size: .75rem; }
.comparing-dates .year-timeline:not(.comparison-timeline) .timeline-metrics { display: none; }

.timeline-controls.comparison-metrics .compare-dates,
.timeline-metrics .comparison-toolbar .compare-dates { width: 2rem; height: 2rem; padding: .3rem; }

/* Range actions share the metric row; mouse users select by dragging. */
.timeline-controls .timeline-select-range { display: none; }
.timeline-controls .timeline-select-range[data-confirm-range="true"] { display: block; }
@media (any-pointer: coarse) {
  .timeline-controls .timeline-select-range { display: block; }
}
.timeline-controls .timeline-reset-range[hidden] { display: none; }
.timeline-body > .timeline-controls { margin-top: 0; grid-template-columns: auto; }
.timeline-body > .timeline-controls:not(:has(.timeline-match-range:not([hidden]))) { display: none; }

/* Center day-navigation chevrons on the horizontal middle of the chart. */
.timeline-body { gap: .25rem; }
.timeline-chevron { position: relative; z-index: 3; flex: 0 0 1.5rem; width: 1.5rem; height: 2rem; margin-top: calc(var(--timeline-chart-height) / 2 - 1rem); padding: .15rem; border: 0; border-radius: .4rem; background: transparent; color: var(--text-secondary); cursor: pointer; touch-action: manipulation; }
.timeline-chevron svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.timeline-chevron:hover:not(:disabled) { color: var(--text-bright); background: var(--border); }
.timeline-chevron:disabled { opacity: .3; cursor: default; }
.timeline-chevron:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.header-date-navigation:not(:has(.timeline-today:not([hidden]))) { display: none; }

/* Five metrics fill a three-column grid when only the leading card spans rows. */
@media (min-width: 42.01rem) {
  .readings > .reading-card:first-child { grid-row: span 2; }
}

@media (min-width: 42.01rem) {
  .readings > .temperature-card:first-child { display: flex; flex-direction: column; }
  .readings > .temperature-card:first-child > .temperature-backdrop { top: 40%; height: 60%; }
  .readings > .temperature-card:first-child > .temperature-dot { top: calc(40% + var(--dot-y) * .6) !important; }
  .readings > .temperature-card:first-child > .metric-layout { flex: 1; top: 0; align-items: start; }
  .readings > .temperature-card:first-child > .metric-layout > .metric-range { align-self: end; margin-bottom: .75rem; }
  .selected-day-cards > .temperature-card:first-child > .metric-layout { align-items: end; padding-bottom: .75rem; }
  .readings > .rainfall-card:first-child .temperature-backdrop { top: 30%; height: 70%; border-radius: 0; }
  .readings > .rainfall-card:first-child .rainfall-history .temperature-backdrop { height: calc(70% - 4rem); }
}

.timeline-storm-bars { fill: var(--accent); opacity: .55; pointer-events: none; }

/* Keep the top-aligned day labels clear of the visible date range. */
.timeline-heading:has(.timeline-visible-range:not([hidden])) { margin-bottom: 1rem; }

.timeline-controls .timeline-fourteen-days, .timeline-controls .timeline-one-year { width: auto; min-width: 2rem; padding: .3rem .4rem; font-size: .75rem; }

@media (max-width: 42rem) {
  .timeline-controls.timeline-metrics,
  .timeline-controls.comparison-metrics { column-gap: .25rem; }
}

@media (max-width: 42rem) {
  .timeline-controls.timeline-metrics,
  .timeline-controls.comparison-metrics { column-gap: .15rem; }
  .timeline-controls .timeline-fourteen-days,
  .timeline-controls .timeline-one-year { min-width: 1.7rem; padding-inline: .15rem; }
}

.timeline-controls .timeline-select-range[hidden] { display: none; }

/* Keep the comparison calendar first, with a little separation from metrics. */
.timeline-metrics > .comparison-toolbar,
.comparison-metrics > .compare-dates { margin-right: .5rem; }

@media (max-width: 42rem) {
  .timeline-day-label { font-size: .6rem; }
}

.comparison-hourly-bars { fill: var(--comparison-accent); opacity: .32; }

.chart-caption { min-height: 2.8em; margin: .6rem 0 0; color: var(--accent); font-size: .8rem; line-height: 1.4; font-variant-numeric: tabular-nums; text-align: center; }

.sun-card { position: relative; display: flex; flex-direction: column; padding: 2.15rem 0 .75rem; overflow: hidden; }
.sun-card-heading { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.sun-card-heading .reading-label { color: inherit; font: inherit; }
.sun-daylight { color: inherit; font-size: .7rem; font-variant-numeric: tabular-nums; }
.sun-graph { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; flex: none; overflow: hidden; }
.sun-horizon { stroke: var(--text-muted); stroke-width: 1; stroke-dasharray: 1 4; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .5; }
.sun-curve, .sun-comparison-curve { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.sun-curve { stroke: var(--text-secondary); opacity: .38; }
.comparison-readings .sun-curve { stroke: var(--accent); }
.sun-comparison-curve { stroke: var(--comparison-accent, #e6bd68); opacity: .25; }
.sun-marker { fill: #f6cd73; stroke: var(--card-surface); stroke-width: 2; }
.sun-hours { display: flex; justify-content: space-between; padding: 0 .75rem; color: var(--text-muted); font-size: .6rem; opacity: .7; }
.sun-times, .sun-comparison-times { margin: .6rem 0 0; color: var(--text-soft); font-size: .72rem; text-align: center; font-variant-numeric: tabular-nums; }
.sun-comparison-times { color: var(--comparison-accent, #e6bd68); }
/* Move the captions up and retain their comparison row even when inactive. */
.sun-card:not(.moon-window-card) .sun-hours { margin-top: -2.616rem; }
.sun-comparison-times { height: 2.8em; line-height: 1.4; flex: 0 0 2.8em; padding-inline: .3rem; }
.sun-comparison-times[hidden] { display: block; visibility: hidden; }
.sun-graph [hidden] { display: none; }

.moon-illumination { color: inherit; font-size: .7rem; font-weight: 400; font-variant-numeric: tabular-nums; }
.moon-marker { fill: var(--text-soft); }
.moon-phase-row { display: flex; align-items: center; justify-content: center; gap: .4rem; margin-top: .4rem; color: var(--text-soft); font-size: .72rem; }
.moon-phase-icon { width: 1.25rem; height: 1.25rem; }
.moon-disc { fill: var(--surface-dark); stroke: var(--text-muted); stroke-width: .6; }
.moon-lit { fill: var(--text-soft); }
.moon-next-events { margin: .4rem .75rem 0; color: var(--text-muted); font-size: .65rem; text-align: center; }
.moon-times { margin-top: .4rem; padding: 0 .3rem; }
.moon-eclipse { margin: .5rem .75rem 0; color: var(--accent); font-size: .7rem; text-align: center; }
.moon-eclipse[hidden] { display: none; }

.moon-window-card { touch-action: pan-y; min-height: 0; padding-top: 1.6rem; padding-bottom: .45rem; }
.moon-window-art { display: block; width: 100%; height: 0; min-height: 0; flex: 1 1 0; margin: 0 auto; }
.moon-window-lit { fill: var(--text-soft); }
.moon-window-illumination { color: inherit; font-size: .7rem; font-weight: 400; font-variant-numeric: tabular-nums; }
.moon-window-caption, .moon-window-times { margin: .1rem .5rem 0; text-align: center; color: var(--text-soft); font-size: .72rem; font-variant-numeric: tabular-nums; }
.moon-window-times { min-height: 1.4em; color: var(--text-muted); font-size: .65rem; }
.moon-window-strip { margin-top: .2rem; padding-top: 0; flex-shrink: 0; }
.moon-window-graph { display: block; width: 100%; height: 3.75rem; }
.moon-window-highlight { fill: var(--accent); opacity: .12; }
.moon-window-today { stroke: var(--text-muted); stroke-width: 1; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; opacity: .5; }
.moon-window-labels { position: relative; display: flex; justify-content: space-between; padding: .2rem .5rem 0; color: var(--text-muted); font-size: .6rem; }
.moon-window-now { position: absolute; left: 50%; transform: translateX(-50%); }
.moon-window-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.moon-window-art .moon-disc { stroke-width: .2; }
.moon-window-curve { stroke: var(--text-secondary); opacity: .18; }
.sun-rays { fill: none; stroke: #f6cd73; stroke-width: 1; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .6; }
@media (max-width: 42rem) { .moon-window-art { height: 9rem; flex: none; } }
.moon-window-caption { display: grid; grid-template-columns: 7ch 16ch; justify-content: center; gap: .5rem; width: 100%; min-height: 1.4em; margin: .1rem auto 0; padding: 0 .5rem; }
.moon-window-date { text-align: right; white-space: nowrap; }
.moon-window-phase { text-align: left; white-space: nowrap; }
.moon-window-times { display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; gap: .75rem; margin: .1rem .5rem 0; }
.moon-window-event { display: grid; grid-template-columns: 3.5ch 12ch; gap: .25rem; align-items: baseline; text-align: left; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.moon-window-rise, .moon-window-set { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-variant-numeric: tabular-nums; white-space: pre; }

/* Keep scrub captions anchored as hours, values, and units change. */
.history-card .temperature-peek { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-variant-numeric: tabular-nums; }
.history-card .peek-time { flex: 0 0 11ch; white-space: pre; }
.history-card .peek-temperature, .history-card .peek-comparison { flex: 0 0 10ch; text-align: right; white-space: nowrap; }
.rainfall-card .peek-hourly-rain, .rainfall-card .peek-comparison-hourly { flex: 0 0 min(27ch, 100%); min-height: 1.4em; }

.reading-card.orbit-card { position: relative; align-self: start; min-height: 0; padding: 1.8rem .15rem .4rem; }
.orbit-card > .reading-label { margin: 0; }
.orbit-art { display: block; width: 100%; height: auto; }
.orbit-controls { margin-inline: .6rem; }
.orbit-art text { fill: var(--text-soft); font-size: 10px; }
.orbit-track { fill: none; stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 3 4; opacity: .4; }
.orbit-moon-track { stroke: var(--text-muted); opacity: .3; }
.orbit-sun { fill: url(#orbit-sun-shading); stroke: #ffe5a0; stroke-width: .5; }
.orbit-earth-night { fill: url(#orbit-earth-night-shading); }
.orbit-earth-day { fill: url(#orbit-earth-day-shading); }
.orbit-earth-outline { fill: none; stroke: #a7e5ee; stroke-width: .5; stroke-opacity: .35; }
.orbit-moon-night { fill: url(#orbit-moon-night-shading); }
.orbit-moon-day { fill: url(#orbit-moon-day-shading); }
.orbit-moon-outline { fill: none; stroke: #9aafbf; stroke-width: .7; stroke-opacity: .35; }
.orbit-controls { display: flex; align-items: center; justify-content: center; gap: .3rem; flex-wrap: wrap; }
.orbit-controls .chart-control { padding: .3rem .55rem; border: 1px solid transparent; border-radius: .4rem; background: transparent; color: var(--text-secondary); font-size: .75rem; font-weight: 500; }
.orbit-controls .chart-control[aria-pressed="true"], .orbit-controls .chart-control:hover { border-color: transparent; color: var(--text-bright); background: var(--border); }
.orbit-controls .chart-control:focus-visible { border-color: transparent; outline: 2px solid var(--accent); outline-offset: 2px; }
.orbit-controls .chart-control:disabled { opacity: .45; cursor: default; }
.orbit-date { flex: 0 0 26ch; width: 26ch; color: var(--text-soft); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .7rem; font-variant-numeric: tabular-nums; white-space: pre; text-align: center; }
.orbit-status { color: var(--text-muted); font-size: .68rem; text-align: center; margin: .65rem 0 0; }
.orbit-status:empty { display: none; }

.orbit-preston { fill: #ff637d; stroke: #fff; stroke-width: .8; }

.orbit-card { touch-action: auto; }

.orbit-north-pole { fill: #d9efff; opacity: .75; }
.orbit-equator { fill: none; stroke: #b6d7e9; stroke-width: .6; opacity: .4; }

.orbit-modes { margin-top: .25rem; }

.orbit-art-wrap { position: relative; }
.orbit-month-moon { position: absolute; top: -2.5rem; left: .25rem; width: 24%; max-width: 5rem; opacity: 0; transition: opacity .45s ease; pointer-events: none; }
.orbit-month-moon.is-visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .orbit-month-moon { transition: none; } }

.orbit-month-moon .moon-disc { stroke-width: .2; stroke-opacity: .4; }

.orbit-loading-spinner { fill: none; stroke: #815018; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 14 42.55; opacity: 0; pointer-events: none; }
.orbit-loading .orbit-loading-spinner { opacity: .85; animation: orbit-loading-spin .8s linear infinite; }
@keyframes orbit-loading-spin { to { stroke-dashoffset: -56.55; } }
@media (prefers-reduced-motion: reduce) { .orbit-loading .orbit-loading-spinner { animation: none; } }