/* ===========================================================
   Columbia Weather & Water Dashboard
   Design language: physical river staff-gauge / station placard.
   =========================================================== */

:root {
  /* -- day theme -- */
  --paper: #ede7d9;
  --paper-raised: #f5f1e6;
  --ink: #1e2a2e;
  --ink-soft: #52605f;
  --creek: #1f6f78;
  --creek-bright: #2f8f99;
  --amber: #c9822a;
  --flood-red: #a83c2e;
  --line: #c9c0a8;
  --shadow: rgba(30, 42, 46, 0.12);

  /* Per request: Inter throughout, replacing the earlier Staatliches
     (display) + JetBrains Mono (data) + Public Sans (labels) mix. All
     three variables now point to the same family; kept as separate
     variables rather than consolidated to one, so weight/size tuning
     stays easy to target per role without hunting every call site. */
  --font-display: 'Inter', sans-serif;
  --font-mono: 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;

  color-scheme: light;
}

html[data-theme="night"] {
  --paper: #0e1a1d;
  --paper-raised: #142428;
  --ink: #e9e4d3;
  --ink-soft: #93a19d;
  --creek: #3fa8b0;
  --creek-bright: #56c2ca;
  --amber: #e8a93b;
  --flood-red: #d4695a;
  --line: #24393d;
  --shadow: rgba(0, 0, 0, 0.5);

  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  transition: background-color 0.6s ease, color 0.6s ease;
  min-height: 100vh;
  display: flex;
  /* top-aligned, not centered: with 3 panels (weather/moon/water) plus
     header and daylight bar, .board is now regularly taller than the
     viewport. align-items: center on a flex container clips content that
     overflows above the viewport top - since a page can't scroll above
     y=0, that clipped portion becomes genuinely unreachable, not just
     visually off - which is exactly the "chopped, no top border" bug. */
  align-items: flex-start;
  justify-content: center;
  padding: 24px;
}

.board {
  width: 100%;
  max-width: 920px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ---------------- nameplate / header ---------------- */

.nameplate {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 18px 24px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  box-shadow: 0 2px 0 var(--shadow);
}

.nameplate__mark {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nameplate__title {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1;
}

.nameplate__subtitle {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.nameplate__clock {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nameplate__tz {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.clock__time {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.clock__date {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}

/* ---------------- panel grid ---------------- */

.panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "weather water"
    "rain    water"
    "moon    water"
    "almanac almanac";
  gap: 14px;
}

.plate--weather { grid-area: weather; }
.plate--moon { grid-area: moon; }
.plate--rain { grid-area: rain; }
.plate--water { grid-area: water; }
.plate--almanac { grid-area: almanac; }

/* ---------------- large-format EOC display ----------------
   On a wall-mounted 1080p/4K display the default 920px column wastes
   most of the horizontal space while forcing panels to stack tall
   enough to overflow the viewport. Here the four panels spread into a
   single row instead, which collapses the overall height dramatically
   and leaves room to scale type UP for across-the-room legibility -
   the opposite of the usual "shrink to fit" approach, and the right
   call for a display nobody stands close to. */
@media (min-width: 1400px) {
  .board {
    max-width: 1840px;
    gap: 18px;
  }

  .panels {
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
      "weather water rain moon"
      "almanac almanac almanac almanac";
    gap: 18px;
  }

  /* headline numbers - the things read from across the room */
  .reading__value { font-size: 97px; }
  .gage-line .reading__value { font-size: 69px; }
  .reading--rain .reading__value { font-size: 69px; }
  .reading__unit { font-size: 32px; }

  /* panel titles */
  .plate__label { font-size: 17px; }
  #waterLabel { font-size: 21px; }
  #moonLabel { font-size: 22px; }

  /* header */
  .nameplate__title { font-size: 46px; }
  .nameplate__subtitle { font-size: 16px; }
  .clock__time { font-size: 44px; }
  .clock__date { font-size: 17px; }
  .nameplate__tz { font-size: 14px; }

  /* supporting readouts */
  .reading__meta { font-size: 18px; }
  .reading__feelslike,
  .reading__humidity { font-size: 22px; }
  .reading__normal { font-size: 18px; }
  .moon-phase { font-size: 31px; }
  .moon-illum { font-size: 20px; }
  .moon-times,
  .moon-times dd { font-size: 18px; }
  .moon-times dt { font-size: 14px; }
  .moon-next-full { font-size: 16px; }
  .moon-progress__status { font-size: 18px; }
  .moon-progress__countdown { font-size: 17px; }
  .rain-stats { font-size: 18px; }
  .rain-category { font-size: 20px; }
  .water-refs { font-size: 17px; }
  .gage-line__label { font-size: 18px; }
  .water-deltas__val { font-size: 17px; }
  .water-deltas__label { font-size: 14px; }
  .water-deltas__key { font-size: 13px; }
  .daylight__countdown { font-size: 18px; }
  .daylight__endpoint { font-size: 18px; width: 76px; }

  /* Almanac was omitted from this block originally - it rendered at base
     size while every neighbouring panel scaled up. */
  .almanac-table { font-size: 19px; }
  .almanac-table thead th { font-size: 13px; }
  .almanac-table tbody th { font-size: 16px; }
  .almanac-at { font-size: 15px; }

  /* Ribbon drives the height of the whole panel row (all four panels
     stretch to match the tallest), so keeping it moderate is what
     prevents large empty gaps at the bottom of the other three. */
  .ribbon {
    width: 46px;
    min-height: 230px;
  }
  .ribbon__label { font-size: 14px; }
}

.plate {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 18px 22px 22px;
  box-shadow: 0 2px 0 var(--shadow);
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Generic body rule applies to all three panel variants (weather/moon/
   water) since the HTML always pairs this class with a specific modifier.
   flex: 1 lets the body actually fill the card's full height rather than
   just its own natural content height - this matters most for the water
   panel, whose card now spans two grid rows (matching weather+moon
   combined height) and would otherwise leave dead unfilled space below
   its content, which the modifier-specific rules below build on. */
.plate__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.plate__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
  margin-bottom: 16px;
}

.plate__label {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}

#waterLabel {
  font-size: 17px;
}

#moonLabel {
  font-size: 18px;
}

.plate__tag {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--amber);
  border: 1px solid var(--amber);
  border-radius: 2px;
  padding: 2px 6px;
}

/* ---------------- weather plate ---------------- */

.plate__body--weather {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.reading {
  display: flex;
  align-items: baseline;
  gap: 4px;
  line-height: 1;
}

.reading__value {
  font-family: var(--font-display);
  font-size: 74px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.reading__unit {
  font-family: var(--font-body);
  font-size: 25px;
  font-weight: 600;
  color: var(--ink-soft);
}

.weather-headline {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.reading__meta {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  color: var(--ink-soft);
  margin: 0;
}

.reading__feelslike {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 500;
  margin: 10px 0 0;
}

.reading__feelslike span {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--creek);
}

.reading__humidity {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 500;
  margin: 6px 0 0;
}

.reading__humidity span {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--creek);
}

.reading__normal {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-soft);
  margin: 6px 0 0;
}

.reading__normal span {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--ink-soft);
}

/* ---------------- moon plate ---------------- */

.plate__body--moon {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.moon-headline {
  display: flex;
  align-items: center;
  gap: 14px;
}

.moon-icon {
  font-size: 46px;
  line-height: 1;
}

.moon-headline__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.moon-phase {
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -0.005em;
}

.moon-illum {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-soft);
}

.moon-illum span {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--creek);
}

.moon-times-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.moon-times {
  margin: 0;
  display: flex;
  gap: 24px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
}

/* A class selector's display:flex outranks the browser's default
   [hidden] rule, so hiding this from JS needs this explicit override -
   same trap that previously left the full-moon marker stuck on screen. */
.moon-times[hidden] {
  display: none;
}

.moon-next-full {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  text-align: right;
  white-space: nowrap;
}

.moon-progress__fullmoon-marker {
  position: absolute;
  top: 100%;
  margin-top: 4px;
  display: flex;
  align-items: flex-start;
  gap: 4px;
  white-space: nowrap;
  transform: translateX(-50%);
}

.moon-progress__fullmoon-marker[hidden] {
  display: none;
}

.moon-progress__fullmoon-triangle {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 6px solid var(--ink);
  flex-shrink: 0;
}

.moon-progress__fullmoon-label {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}

.moon-times__row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.moon-times dt {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.moon-times dd {
  margin: 0;
  font-weight: 700;
  white-space: nowrap;
}

.moon-progress {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.moon-progress__status {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
}

.moon-progress__countdown {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 700;
  color: var(--creek);
  margin-bottom: 8px;
}

.moon-progress__gauge {
  display: flex;
  align-items: center;
  gap: 10px;
}

.moon-progress__gauge[hidden] {
  display: none;
}

.moon-progress__endpoint {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  flex-shrink: 0;
  width: 48px;
}

.moon-progress__endpoint--right {
  text-align: right;
}

.moon-progress__track {
  position: relative;
  flex: 1;
  height: 10px;
  border-radius: 3px;
  background: var(--paper);
  border: 1px solid var(--line);
  /* deliberately no overflow:hidden - would clip the full-moon marker
     positioned just below the track's bottom edge */
}

.moon-progress__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0%;
  background: var(--creek);
  opacity: 0.55;
  border-radius: 3px 0 0 3px;
  transition: width 0.8s ease;
}

.moon-progress__now {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 3px;
  left: 0%;
  background: var(--ink);
  box-shadow: 0 0 0 2px var(--paper-raised);
  transition: left 0.8s ease;
}

/* ---------------- rain plate ---------------- */

.plate__body--rain {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.rain-headline {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.reading--rain .reading__value {
  font-size: 51px;
}

.rain-category {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  color: var(--creek);
}

.rain-category.is-moderate { color: var(--amber); }
.rain-category.is-severe { color: var(--flood-red); }

.rain-stats {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
}

.rain-stats__row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.rain-stats dt {
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-weight: 500;
}

.rain-stats dd {
  margin: 0;
  font-weight: 700;
}

/* ---------------- water plate ---------------- */

.plate__body--water {
  display: flex;
  /* .plate__body sets flex-direction: column, so this MUST override it -
     without the explicit row the ribbon and the readout stack vertically
     instead of sitting side by side (the ribbon is only 40px wide, so
     stacked it still reads as a left-hand column, which is why this was
     easy to miss). align-items: center then vertically centers the
     readout block against the ribbon. */
  flex-direction: row;
  align-items: center;
  gap: 18px;
  min-height: 0;
}

/* vertical ribbon gauge - current level / flood stage / record high,
   marked with inward-pointing arrows, matching the physical staff-gauge
   reference this is modeled on */
.ribbon {
  position: relative;
  width: 40px;
  min-height: 220px;
  flex-shrink: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 3px;
}

.ribbon__mark {
  position: absolute;
  left: 0;
  right: 0;
  height: 22px;
  top: calc(100% - var(--pos, 0%) - 22px);
  color: var(--ink);
}

.ribbon__mark--flood { color: var(--amber); }
.ribbon__mark--record { color: var(--flood-red); }
.ribbon__mark--origin { color: var(--creek-bright); }

/* Base flow is an OBSERVED resting level, not a published threshold like
   flood stage or record high - so it reads as a reference line rather
   than a measured mark: dashed, muted, no inward arrows, and annotated
   in words outside the ribbon instead of a number inside it. */
.ribbon__mark--nominal { color: var(--ink-soft); }

.ribbon__mark--nominal .ribbon__line {
  background: none;
  border-top: 2px dashed currentColor;
  height: 0;
  opacity: 0.75;
}

.ribbon__annotation {
  position: absolute;
  left: calc(100% + 10px);
  text-align: left;
  bottom: 0;
  transform: translateY(50%);
  line-height: 1.15;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  opacity: 0.9;
}

/* Explicit lines rather than relying on wrap width: at a narrow
   max-width "Base flow" was breaking mid-phrase into four lines. Each
   line is nowrap, so the label can only break where intended. */
.ribbon__annotation-line {
  display: block;
  white-space: nowrap;
}
.ribbon__mark--origin .ribbon__line { height: 3px; }

.ribbon__label {
  position: absolute;
  left: 1px;
  right: 1px;
  top: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: currentColor;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

.ribbon__line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: currentColor;
}

.ribbon__arrow {
  position: absolute;
  bottom: -5px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

.ribbon__arrow--left {
  left: -9px;
  border-left: 8px solid currentColor;
}

.ribbon__arrow--right {
  right: -9px;
  border-right: 8px solid currentColor;
}

.water-readout {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Gutter for the ribbon's outside annotation (e.g. "Base flow"), which
     is positioned over this area. Without it the annotation overlaps
     whatever the readout renders at that height. */
  padding-left: 78px;
  gap: 10px;
  min-width: 0;
  min-height: 0;
}

.water-zone {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The gage zone stacks: big number on top, its caption beneath. Without
   this it inherits .water-zone's row direction and the label lands
   beside the number instead of under it. */
.water-zone--gage {
  flex-direction: column;
}

.water-refs {
  margin: 0;
  display: grid;
  grid-template-columns: auto auto auto;
  column-gap: 0;
  row-gap: 2px;
  justify-content: center;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
}

.water-refs__row {
  display: contents;
}

.water-refs dt {
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-weight: 500;
  text-align: right;
  margin-right: 8px;
}

.water-refs dd {
  display: contents;
  margin: 0;
  font-weight: 700;
}

.water-refs__int {
  text-align: right;
}

.water-refs__rest {
  text-align: left;
  font-weight: 600;
  color: var(--ink-soft);
}

.water-refs__date {
  /* Own line rather than trailing the value: the ribbon annotation now
     takes a gutter out of this column, and "Record high 23.45 ft (Jun 25,
     2021)" no longer fits on one line at quarter-width. Breaking it
     deliberately beats letting it wrap at an arbitrary point. */
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--ink-soft);
  font-size: 12px;
  margin-left: 0;
}

.gage-line {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
}

.gage-line__label {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
  text-align: center;
  margin-top: 2px;
}

.gage-line .reading__value {
  font-size: 46px;
}

.water-deltas {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

/* each row is "2h   -0.1 in" - key and value on one line, rows stacked,
   which keeps the block narrow enough to sit beside the ribbon gauge
   rather than forcing the panel wider */
.water-deltas__item {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.water-deltas__key {
  min-width: 28px;
}

.water-deltas__label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.water-deltas__item {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.water-deltas__key {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.water-deltas__val {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
}

.water-deltas__val.is-rising { color: var(--flood-red); }
.water-deltas__val.is-falling { color: var(--creek); }

/* ---------------- daylight staff gauge (horizontal) ---------------- */

.daylight {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 16px 22px 20px;
  box-shadow: 0 2px 0 var(--shadow);
}

.daylight__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}

.daylight__label {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.daylight__countdown {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  font-weight: 700;
  color: var(--creek);
}

.daylight__gauge {
  display: flex;
  align-items: center;
  gap: 12px;
}

.daylight__endpoint {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-soft);
  flex-shrink: 0;
  width: 62px;
}

.daylight__endpoint--right {
  text-align: right;
}

.daylight__track {
  position: relative;
  flex: 1;
  height: 14px;
  border-radius: 3px;
  background: var(--paper);
  border: 1px solid var(--line);
  overflow: hidden;
}

.daylight__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0%;
  background: var(--amber);
  opacity: 0.55;
  transition: width 0.8s ease;
}

.daylight__now {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 3px;
  left: 0%;
  background: var(--ink);
  box-shadow: 0 0 0 2px var(--paper-raised);
  transition: left 0.8s ease;
}

/* ---------------- responsive ---------------- */

@media (max-width: 680px) {
  .panels {
    grid-template-columns: 1fr;
    grid-template-areas:
      "weather"
      "water"
      "rain"
      "moon"
      "almanac";
  }

  .nameplate {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .nameplate__clock {
    text-align: left;
  }

  .plate__body--water {
    flex-direction: row;
  }

  .ribbon {
    min-height: 180px;
  }

  .gage-line {
    flex-wrap: wrap;
  }

  .gage-line .reading__value {
    font-size: 39px;
  }

    .daylight__endpoint {
    width: 52px;
    font-size: 13px;
  }
}

/* ---------------- reduced motion ---------------- */

@media (prefers-reduced-motion: reduce) {
  .daylight__fill,
  .daylight__now,
  body {
    transition: none;
  }
}

/* ---------------- focus visibility ---------------- */

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--creek-bright);
  outline-offset: 2px;
}

/* ---------------- almanac plate ---------------- */

/* Laid out as a full-width row rather than a fifth column: the
   today-vs-yesterday comparison is inherently tabular and reads far
   better wide than tall, and the panel row above left roughly a third
   of the viewport unused. */
.plate__body--almanac {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}

.almanac-now {
  display: flex;
  gap: 28px;
  flex-shrink: 0;
}

.almanac-now__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.almanac-now__key {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.almanac-now__val {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 17px;
  font-weight: 700;
  white-space: nowrap;
}

.almanac-table {
  /* The table as a block is centered in the panel (justify-content on the
     flex parent above), but every cell stays left-aligned - centering the
     text itself would break the column alignment that makes the
     today-vs-yesterday comparison scannable. */
  margin: 0 auto;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 16px;
}

.almanac-table th,
.almanac-table td {
  text-align: left;
  padding: 2px 22px 2px 0;
  white-space: nowrap;
}

.almanac-table thead th {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-bottom: 6px;
}

.almanac-table tbody th {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
}

.almanac-table td {
  font-weight: 700;
}

/* the "at 3:27 pm" qualifier is secondary to the value it annotates */
.almanac-at {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-soft);
}