/* AganetWX skin: classic (default) and modern (body.layout-modern) layouts. */

/* Theme variables. _head.inc injects live values into :root from $Extras.theme;
   these are fallback defaults. */
:root {
  --m-gradient-top:    #FDDA74;
  --m-gradient-bottom: #FFFDCA;
  --m-page-bg:         #FFFDCA;
  --m-accent:          #0a5ca8;
  --m-font:            system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --m-base-size:       9.5pt;
  --m-border:   #555;
  --m-rowlabel: #eee;
  --m-rule:     #e2e6ea;
  --m-blue:     #001c7c;
  --m-ink:      #1a2027;
  --m-muted:    #5a6675;
  --m-panel-bg: #ffffff;
  --m-rowval-bg: #ffffff;
}

/* Dark mode derived colors (panels/gradients come from _head.inc). */
html[data-theme="dark"] {
  --m-border:   #3a4a5c;
  --m-rowlabel: #243447;
  --m-rule:     #2c3c4d;
  --m-blue:     #8ab4f8;
  --m-muted:    #9fb0c0;
  --m-rowval-bg: #1f2c3a;
}
html[data-theme="dark"] body { color: var(--m-ink); }
html[data-theme="dark"] .station_sub,
html[data-theme="dark"] .header_meta { color: var(--m-ink); }

html, body {
  margin: 0; padding: 0;
  font-family: var(--m-font);
  font-size: var(--m-base-size);
  background: var(--m-page-bg);
  color: var(--m-ink);
}
body { overflow-y: scroll; }
a { text-decoration: none; color: var(--m-accent); }
a:hover { text-decoration: underline; }
/* Inline links inside running text are underlined so they are distinguishable
   without relying on color alone (WCAG). Nav tabs, link-cards and header
   controls have their own affordance and stay underline-free. */
.footer a, .about-body a, .disclaimer-bar a { text-decoration: underline; }

/* Accessibility: visible keyboard focus. */
a:focus-visible, button:focus-visible, .navtab:focus-visible {
  outline: 3px solid var(--m-accent); outline-offset: 2px;
}

/* Gradient + shadow box primitives (config-driven). */
.gradient {
  background: var(--m-gradient-top);
  background: linear-gradient(to bottom, var(--m-gradient-top) 0%, var(--m-gradient-bottom) 100%);
}
.boxshadow { box-shadow: 0 0 21px 0 rgba(0,0,0,0.2); }
.clear { clear: both; }
.dist { margin-bottom: 20px; }

/* Header */
.header { min-height: 0; }
.header .gradient { padding: 0; }
.header_contents { max-width: 1100px; margin: 0 auto; padding: 9px 20px; }
.station_name { font-size: 19px; font-weight: bold; line-height: 1.15; }
.station_sub  { font-size: 10.5pt; margin-top: 2px; }
.header_top {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
}
/* Let a long station name take the row and wrap instead of overflowing. */
.header_top > div:first-child { flex: 1 1 260px; min-width: 0; }
.header_meta { flex: 0 0 auto; text-align: right; font-size: 9pt; }
/* Latest-update line under the station name (single line). */
.station_update { margin-top: 3px; font-size: 8.5pt; opacity: 0.9; }
body.layout-modern .station_update { color: #fff; }

/* Language switcher (in-page, client-side). */
.lang-switch, .theme-switch {
  margin-top: 6px;
  display: flex; align-items: center; justify-content: flex-end; gap: 5px;
}
.switch-lbl { font-size: 8.5pt; font-weight: 600; opacity: 0.85; }
.lang-switch select, .theme-switch select {
  font-family: inherit; font-size: 9pt; padding: 2px 6px; border-radius: 6px;
  border: 1px solid var(--m-border); background: var(--m-panel-bg);
  color: var(--m-ink); cursor: pointer;
}
body.layout-modern .lang-switch select, body.layout-modern .theme-switch select {
  border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.12); color: #fff;
}
body.layout-modern .lang-switch select option, body.layout-modern .theme-switch select option { color: var(--m-ink); }

/* Top navigation tabs */
.m-nav { background: var(--m-gradient-top); border-bottom: 1px solid var(--m-border); }
.m-nav-inner {
  max-width: 1100px; margin: 0 auto; padding: 0 20px;
  display: flex; flex-wrap: wrap;
}
.navtab {
  padding: 10px 18px; font-size: 10pt; font-weight: bold; color: var(--m-ink);
  border-right: 1px solid rgba(85,85,85,0.3); text-decoration: none;
}
.navtab:hover { background: rgba(255,255,255,0.4); text-decoration: none; }
.navtab.active { background: var(--m-panel-bg); }

/* Archive page */
.archive-months { padding: 12px; background: var(--m-panel-bg); }
.archive-month {
  display: inline-block; margin: 3px; padding: 6px 12px;
  background: var(--m-gradient-bottom); border: 1px solid var(--m-border);
  border-radius: 6px; font-size: 9pt; font-weight: bold; color: var(--m-ink);
}
.archive-month:hover { background: var(--m-gradient-top); text-decoration: none; }

/* Page columns */
.content { max-width: 1100px; padding: 0 20px; margin: 10px auto 0; }
.left_col  { width: 320px; float: left; }
.right_col { margin-left: 340px; }

/* Boxed sub-panels with rounded top + full border */
.col_sub {
  border-radius: 10px 10px 0 0; overflow: hidden;
  border: 1px solid var(--m-border); position: relative;
}
.col_sub.allround { border-radius: 10px; }

.headline {
  padding: 10px 0; text-align: center; font-size: 13pt; font-weight: normal;
  color: var(--m-ink); border-bottom: 1px solid var(--m-border);
}
.hilows .headline { font-size: 11pt; }
/* Headline that carries an update time: title left, time right, one row. */
.headline.headline-row {
  display: flex; align-items: baseline; justify-content: space-between;
  text-align: left; padding: 10px 16px; gap: 12px;
}
.headline-time { font-size: 10pt; font-weight: 600; color: var(--m-ink); white-space: nowrap; }

/* Value rows: min-height lets long hi/low values wrap instead of overflowing. */
.line {
  display: flex; align-items: stretch; min-height: 50px;
  background: var(--m-panel-bg);
}
.line + .line { border-top: 1px solid var(--m-rule); }
/* Threshold highlighting: a value that crossed a configured limit. A colored
   left bar plus a tinted value make it stand out at a glance. */
.line.alert-high { box-shadow: inset 4px 0 0 #d64533; }
.line.alert-low  { box-shadow: inset 4px 0 0 #2980b9; }
.line.alert-high .lright, .line.alert-high .vh-now { color: #c0392b; font-weight: 700; }
.line.alert-low  .lright, .line.alert-low  .vh-now { color: #21618c; font-weight: 700; }
html[data-theme="dark"] .line.alert-high .lright, html[data-theme="dark"] .line.alert-high .vh-now { color: #ff7a68; }
html[data-theme="dark"] .line.alert-low  .lright, html[data-theme="dark"] .line.alert-low  .vh-now { color: #7fc0ff; }
.lleft {
  flex: 0 0 144px; padding: 10px;
  background: var(--m-rowlabel);
  display: flex; flex-direction: column; justify-content: center;
}
.lleft small { display: block; font-size: 7.5pt; color: #444; line-height: 1.2; }
.lright {
  flex: 1 1 auto; padding: 10px;
  background: var(--m-rowval-bg); font-size: 11pt; font-weight: normal;
  display: flex; align-items: center;
}
.lright small { font-size: 8pt; color: #555; margin: 0 4px; }
.hilows .lleft, .hilows .lright { font-size: 9pt; }

/* Hi/low two-value rows: high on the left, low on the right; wrap if narrow. */
.line.twocol .lright {
  justify-content: space-between; gap: 6px 14px; flex-wrap: wrap;
}
.line.twocol .lright > span { white-space: nowrap; }
.hl-at { color: #999; font-size: 8pt; margin: 0 3px 0 6px; }
.hl-time { color: #777; font-size: 8pt; }

/* Diagrams (right column = interactive charts) */
.diagrams_holder {
  background: var(--m-panel-bg); font-weight: normal; text-align: center;
  padding: 10px; min-height: 400px;
}
/* Each chart is its own separated panel so they do not run together. */
.m-chart {
  width: 100%; height: 260px; box-sizing: border-box;
  padding: 8px 10px 4px; margin: 0 0 12px;
  border: 1px solid var(--m-rule); border-radius: 8px;
  background: var(--m-panel-bg);
}
.m-chart:last-child { margin-bottom: 0; }
/* Wind rose is square, so give it more height for a larger dial. */
#chart-windrose { height: 420px; }
body.density-compact #chart-windrose { height: 360px; }

/* Footer */
.footer { max-width: 1100px; margin: 24px auto; padding: 0 20px; text-align: center; }
.footer .st_type { color: var(--m-blue); font-size: 1.3em; font-weight: bold; }
.footer small { display: block; margin-top: 6px; color: #555; }

/* Compact density: tighter rows & charts (min-height, no clipping) */
body.density-compact .line { min-height: 36px; }
body.density-compact .lleft,
body.density-compact .lright { padding: 5px 10px; }
body.density-compact .headline { padding: 7px 0; }
body.density-compact .m-chart { height: 210px; }
body.density-compact .dist { margin-bottom: 12px; }

/* Responsive: stack columns on narrow screens */
@media (max-width: 820px) {
  .left_col { width: 100%; float: none; }
  .right_col { margin-left: 0; margin-top: 16px; }
}

/* Modern layout (body.layout-modern): flat card-tile dashboard,
   restyles the same markup. Enabled by theme.layout = modern. */
body.layout-modern {
  --m-card-radius: 14px;
  /* Page bg comes from --m-page-bg (_head.inc); fill short pages. */
  min-height: 100vh;
}
/* Wind direction after the speed: same color as the value. */
.lright .wdir { margin-left: 3px; }
/* Barometer 3-hour tendency, tucked under the barometer row (no separator). */
.baro-trend {
  font-size: 0.82em;
  opacity: 0.85;
}
/* Small 3-hour trend arrow next to temperature/humidity values. */
.trend-arrow { margin-left: 5px; font-size: 0.72em; vertical-align: 0.08em; }
.trend-arrow.up     { color: #c0392b; }
.trend-arrow.down   { color: #2980b9; }
.trend-arrow.steady { color: #8a97a3; }
html[data-theme="dark"] .trend-arrow.up   { color: #ff7a68; }
html[data-theme="dark"] .trend-arrow.down { color: #7fc0ff; }
/* Webcam grid: one or more cams, aligned to the content width. A single cam
   spans full width (as the original banner did); multiple cams tile. `columns`
   in the config sets an explicit column count via inline style; otherwise the
   grid auto-fits as many ~320px columns as fit. */
.webcam-grid {
  max-width: 1100px; margin: 16px auto 4px; padding: 0 20px;
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.webcam-grid-single { grid-template-columns: 1fr; }
/* Inside the grid each wrap is just a cell; its own width/centering is off. */
.webcam-grid .webcam-wrap { max-width: none; margin: 0; padding: 0; }
/* Live webcam banner: aligned to the content width, above the nav. */
.webcam-wrap {
  max-width: 1100px; margin: 16px auto 4px; padding: 0 20px;
  display: flex;
}
.webcam-wrap.wc-left   { justify-content: flex-start; }
.webcam-wrap.wc-center { justify-content: center; }
.webcam-wrap.wc-right  { justify-content: flex-end; }
.webcam-box {
  position: relative; overflow: hidden;
  width: 100%;   /* fills the wrap unless max-width caps it */
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.12);
  box-shadow: 0 6px 20px rgba(16,38,64,0.28), 0 2px 6px rgba(16,38,64,0.18);
  background: #000; line-height: 0;
}
.webcam-img { display: block; width: 100%; height: auto; object-fit: cover; }
/* Mobile: webcams stack one per row and go edge-to-edge (no gutters, radius,
   border or shadow), regardless of the configured column count. */
@media (max-width: 820px) {
  .webcam-grid { grid-template-columns: 1fr !important; gap: 4px; padding: 0; margin: 0 0 4px; }
  .webcam-wrap { padding: 0; margin: 0 0 4px; }
  .webcam-box {
    width: 100% !important; max-width: none !important;
    border-radius: 0; border-left: 0; border-right: 0; box-shadow: none;
  }
}
.webcam-cap {
  position: absolute; left: 0; bottom: 0; right: 0;
  padding: 6px 12px; line-height: 1.3;
  background: linear-gradient(transparent, rgba(0,0,0,0.55));
  color: #fff; font-size: 9pt;
}
.webcam-live {
  position: absolute; top: 8px; right: 8px;
  display: flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 12px;
  background: rgba(0,0,0,0.5); color: #fff; font-size: 8.5pt; line-height: 1;
}
.webcam-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #e53935; animation: webcam-pulse 1.6s ease-in-out infinite;
}
@keyframes webcam-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
/* Click-to-enlarge: the image hints it is clickable and opens a lightbox. */
.webcam-zoomable { cursor: zoom-in; }
.webcam-lightbox {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(0,0,0,0.9);
}
.webcam-lightbox[hidden] { display: none; }
.webcam-lightbox-img {
  max-width: 100%; max-height: 100%;
  border-radius: 6px; box-shadow: 0 10px 40px rgba(0,0,0,0.6);
  cursor: zoom-out;
}
.webcam-lightbox-close {
  position: absolute; top: 14px; right: 18px;
  width: 40px; height: 40px; padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(255,255,255,0.15); color: #fff;
  font-size: 26px; line-height: 40px; cursor: pointer;
}
.webcam-lightbox-close:hover { background: rgba(255,255,255,0.28); }
/* Useful Links card: one link per row. */
.links-card .link-row {
  display: block; padding: 9px 16px;
  color: var(--m-accent); text-decoration: none;
  border-top: 1px solid var(--m-rule);
}
.links-card .link-row:first-of-type { border-top: 0; }
.links-card .link-row:hover { text-decoration: underline; }
.links-card .link-row::after { content: " \2197"; opacity: 0.5; font-size: 0.85em; }
/* HF propagation (HamQSL) card. */
.solar-card .solar-indices {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 6px; padding: 10px 14px 4px;
}
.solar-card .solar-idx {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.solar-card .si-val { font-size: 1.35em; font-weight: 700; line-height: 1.1; }
.solar-card .si-lbl { font-size: 0.72em; color: var(--m-muted); margin-top: 2px; }
.solar-bands { width: 100%; border-collapse: collapse; margin: 8px 0 2px; }
.solar-bands th, .solar-bands td {
  padding: 5px 14px; text-align: left; font-size: 0.9em;
  border-top: 1px solid var(--m-rule);
}
.solar-bands th { font-weight: 600; color: var(--m-muted); font-size: 0.78em; }
.solar-bands .sb-band { font-weight: 600; }
.solar-bands .sb-cond { font-weight: 600; }
/* Band-condition colors chosen to meet WCAG AA (>=4.5:1) on the panel bg. */
.solar-bands .cond-good { color: #157347; }
.solar-bands .cond-fair { color: #946200; }
.solar-bands .cond-poor { color: #c0392b; }
html[data-theme="dark"] .solar-bands .cond-good { color: #5cd08a; }
html[data-theme="dark"] .solar-bands .cond-fair { color: #e6b04a; }
html[data-theme="dark"] .solar-bands .cond-poor { color: #f28378; }
.solar-card .solar-src {
  padding: 6px 14px 10px; font-size: 0.72em; color: var(--m-muted);
}
/* "Today in one sentence" summary card. */
.summary-card .summary-text {
  padding: 12px 16px; font-size: 10.5pt; line-height: 1.6; color: var(--m-ink);
}
.summary-card .alert-flag { font-weight: 700; color: #c0392b; white-space: nowrap; }

/* Compare-to-the-past card. */
.compare-card .cmp-row {
  display: flex; align-items: baseline; gap: 10px;
  padding: 8px 16px; border-top: 1px solid var(--m-rule);
}
.compare-card .cmp-row:first-of-type { border-top: 0; }
.compare-card .cmp-val {
  flex: 0 0 auto; font-size: 1.15em; font-weight: 700; color: var(--m-ink);
  min-width: 3.2em; text-align: right;
}
.compare-card .cmp-val.cmp-up   { color: #c0392b; }
.compare-card .cmp-val.cmp-down { color: #2980b9; }
.compare-card .cmp-lbl { font-size: 9.5pt; color: var(--m-ink); line-height: 1.3; }
.compare-card .cmp-note { color: var(--m-muted); font-size: 0.85em; }

/* Compare page: selectors + overlay chart. */
.compare-page { width: 100%; }
.cmpx-controls { display: flex; flex-wrap: wrap; gap: 16px; padding: 12px 16px 4px; }
.cmpx-field { display: flex; flex-direction: column; gap: 4px; font-size: 9pt; color: var(--m-muted); }
.cmpx-field select {
  font-size: 10.5pt; padding: 6px 10px; border-radius: 6px;
  border: 1px solid var(--m-border, #ccc); background: var(--m-panel-bg, #fff);
  color: var(--m-ink);
}
.cmpx-modes { display: flex; gap: 8px; padding: 10px 16px 2px; }
.cmpx-mode {
  font-size: 9pt; padding: 5px 14px; border-radius: 14px; cursor: pointer;
  border: 1px solid var(--m-border, #ccc); background: var(--m-panel-bg, #fff); color: var(--m-ink);
}
.cmpx-mode.cmpx-mode-on { background: var(--m-accent, #0a5ca8); color: #fff; border-color: var(--m-accent, #0a5ca8); }
.cmpx-hint { padding: 2px 16px 8px; font-size: 8.5pt; color: var(--m-muted); }
.cmpx-years { padding: 4px 16px 8px; }
.cmpx-years-head { display: flex; align-items: center; gap: 10px; font-size: 9pt; color: var(--m-muted); margin-bottom: 6px; }
.cmpx-btn {
  font-size: 8.5pt; padding: 2px 10px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--m-border, #ccc); background: var(--m-panel-bg, #fff); color: var(--m-ink);
}
.cmpx-btn:hover { background: var(--m-rule, #eee); }
.cmpx-year-list { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.cmpx-year { font-size: 9.5pt; color: var(--m-ink); white-space: nowrap; cursor: pointer; display: inline-flex; align-items: center; }
.cmpx-year input { vertical-align: -1px; margin-right: 4px; }
.cmpx-swatch { display: inline-block; width: 11px; height: 11px; border-radius: 2px; margin-right: 5px; flex: none; }
.cmpx-chart { width: 100%; height: 420px; padding: 0 8px 10px; }
.cmpx-empty { padding: 24px 16px; color: var(--m-muted); text-align: center; }
@media (max-width: 820px) { .cmpx-chart { height: 320px; } }
.cmpx-rec-hint { padding: 2px 16px 10px; font-size: 8.5pt; color: var(--m-muted); }
.cmpx-rec-block { padding: 0 16px 14px; overflow-x: auto; }
.cmpx-rec-title { font-size: 10pt; font-weight: 600; color: var(--m-ink); margin: 4px 0 6px; }
.cmpx-rec-table { width: 100%; border-collapse: collapse; font-size: 9.5pt;
  font-variant-numeric: tabular-nums; }
.cmpx-rec-table th { text-align: left; font-weight: 600; color: var(--m-muted);
  border-bottom: 1px solid var(--m-border, #ccc); padding: 4px 10px 4px 8px; }
.cmpx-rec-table td { padding: 4px 10px 4px 8px; color: var(--m-ink); white-space: nowrap; }
.cmpx-rec-table td:first-child, .cmpx-rec-table th:first-child { color: var(--m-muted); }
/* Zebra striping for readability across the twelve month rows. */
.cmpx-rec-table tbody tr:nth-child(even) { background: rgba(0,0,0,0.035); }
html[data-theme="dark"] .cmpx-rec-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.045); }
.cmpx-rec-tag { color: var(--m-muted); font-size: 8.5pt; cursor: help; }
.baro-trend .bt-arrow { margin-right: 3px; }
.baro-trend .bt-val { opacity: 0.75; margin-left: 4px; }
/* Last Rain reuses .baro-trend, but its "N days ago" is the primary value, so
   show it at full strength in the normal text colour, not dimmed. */
.baro-trend.last-rain .bt-val { opacity: 1; color: var(--m-ink); margin-left: 0; }
.baro-trend.up   .bt-arrow { color: #c0392b; }
.baro-trend.down .bt-arrow { color: #2980b9; }
.baro-trend.steady .bt-arrow { color: #7f8c8d; }
/* Navigation arrow pointing downwind (windDir + 180). Rotated inline per value. */
/* Wind compass dial: fixed face + N marker, a needle rotated to the bearing. */
.wind-compass {
  width: 2.4em; height: 2.4em;
  margin-left: 7px; vertical-align: -0.9em;
}
.wind-compass .wc-face {
  fill: none; stroke: var(--m-rule); stroke-width: 1.5;
}
.wind-compass .wc-n {
  font-size: 7px; font-weight: 700; text-anchor: middle;
  fill: var(--m-muted);
}
.wind-compass .wc-needle { transform-origin: 50% 50%; }
.wind-compass .wc-from { fill: #c0392b; }              /* points where wind is FROM */
.wind-compass .wc-to   { fill: var(--m-muted); opacity: 0.45; }
.wind-compass .wc-hub  { fill: var(--m-ink); }
/* Flat header: solid accent bar, no gradient/shadow box. */
body.layout-modern .header { min-height: 0; }
body.layout-modern .header .gradient {
  background: var(--m-accent); box-shadow: none;
}
body.layout-modern .station_name,
body.layout-modern .station_sub,
body.layout-modern .header_meta { color: #fff; }
body.layout-modern .header_meta strong { color: #fff; }

/* Pill nav. */
body.layout-modern .m-nav { background: transparent; border: 0; margin-top: 14px; }
body.layout-modern .m-nav-inner { gap: 8px; }
body.layout-modern .navtab {
  border: 0; border-radius: 999px; padding: 8px 18px;
  background: var(--m-panel-bg); box-shadow: 0 1px 3px rgba(0,0,0,.12);
  transition: background .15s, color .15s, box-shadow .15s;
}
body.layout-modern .navtab:hover {
  background: var(--m-accent); color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
body.layout-modern .navtab.active { background: var(--m-accent); color: #fff; }
body.layout-modern .navtab.active:hover { background: #08487f; }

/* Cards: rounded, soft shadow, no hard borders. */
body.layout-modern .col_sub {
  border: 0; border-radius: var(--m-card-radius);
  box-shadow: 0 2px 10px rgba(16,38,64,.10); overflow: hidden;
  background: var(--m-panel-bg);
}
body.layout-modern .col_sub.gradient,
body.layout-modern .gradient { background: var(--m-panel-bg); }
body.layout-modern .headline,
body.layout-modern .hilows .headline {
  background: transparent; border-bottom: 1px solid var(--m-rule);
  color: var(--m-accent); font-weight: 700; font-size: 12pt;
  text-align: left; padding: 13px 16px;
}

/* Current Values as one row per metric. Label sits in a fixed-width column so
   all values start on the same vertical line (left-aligned data column). */
body.layout-modern .col_sub .line { border: 0; }
body.layout-modern .col_sub:not(.hilows) .line {
  display: flex; align-items: center; justify-content: flex-start;
  min-height: 0; padding: 10px 16px; gap: 16px;
}
body.layout-modern .col_sub:not(.hilows) .line + .line {
  border-top: 1px solid var(--m-rule);
}
body.layout-modern .col_sub:not(.hilows) .lleft {
  flex: 0 0 38%; background: transparent; padding: 0;
  font-size: 11.5pt; font-weight: 600; color: var(--m-ink); line-height: 1.2;
}
body.layout-modern .col_sub:not(.hilows) .lright {
  flex: 1 1 auto; background: transparent; padding: 0; text-align: left;
  font-size: 12pt; font-weight: 700; line-height: 1; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* Current value, with the high/low following right after it (not a column). */
.vrowhl .lright { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; }
/* Barometer row carries a trend sub-line: stack value-line over trend. */
.vrowhl .lright:has(.baro-trend),
.line .lright:has(.baro-trend) { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; }
.lright:has(.baro-trend) .vh-line { display: flex; flex-direction: row; align-items: center; gap: 10px; }
.vrowhl .vh-range {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  font-size: 8.5pt; font-weight: 600; line-height: 1.2; color: var(--m-muted);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.vrowhl .vh-at { color: #99a3ad; font-weight: 400; margin: 0 2px 0 4px; }

/* Hi/Lows: label in a fixed column so the high/low values start on the same
   vertical line (left-aligned, matching the Latest Values card). */
body.layout-modern .hilows .line {
  align-items: center; padding: 8px 16px; min-height: 0; gap: 16px;
  justify-content: flex-start;
}
body.layout-modern .hilows .line + .line { border-top: 1px solid var(--m-rule); }
body.layout-modern .hilows .lleft {
  flex: 0 0 38%; background: transparent; padding: 0;
  font-size: 11pt; font-weight: 600; color: var(--m-ink);
}
body.layout-modern .hilows .lright {
  flex: 1 1 auto; background: transparent; padding: 0;
  font-size: 10.5pt; font-weight: 600; color: var(--m-ink);
  font-variant-numeric: tabular-nums;
}
/* Two-value cell: high on top, low below, left-aligned. */
body.layout-modern .hilows .line.twocol .lright {
  flex-direction: column; align-items: flex-start; gap: 1px;
}

/* Charts card: each chart floats as its own soft-shadow tile. */
body.layout-modern .diagrams_holder { background: var(--m-panel-bg); padding: 12px; }
body.layout-modern .m-chart {
  border: 0; border-radius: 10px; margin-bottom: 14px;
  box-shadow: 0 1px 6px rgba(16,38,64,.10);
}
html[data-theme="dark"] body.layout-modern .m-chart {
  background: var(--m-panel-bg); box-shadow: 0 1px 6px rgba(0,0,0,.35);
}

/* Archive chips: flat gray pills (no classic cream fill / dark border). */
body.layout-modern .archive-month {
  background: #eef1f5; border: 1px solid var(--m-rule);
  color: var(--m-accent); font-weight: 600;
}
html[data-theme="dark"] body.layout-modern .archive-month {
  background: #243447; border-color: #2c3c4d; color: var(--m-ink);
}
body.layout-modern .archive-month:hover { background: var(--m-accent); color: #fff; }


/* Hero card: current temperature focal point (Current page). */
.hero {
  padding: 20px 18px; text-align: center; background: var(--m-panel-bg);
  position: relative;
}
/* Weather-mood face + caption, reacting to temperature. */
.hero-mood {
  position: absolute; bottom: 14px; right: 18px;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
}
.hero-mood svg { width: 34px; height: 34px; }
.hero-mood .mood-cap {
  font-size: 7.5pt; font-weight: 700; letter-spacing: .02em;
  color: currentColor; opacity: 0.95; white-space: nowrap;
}
.hero-mood.mood-ice   { color: #bfe6ff; }
.hero-mood.mood-cold  { color: #cfe8ff; }
.hero-mood.mood-crisp { color: #e6f3d8; }
.hero-mood.mood-mild  { color: #eaf7c8; }
.hero-mood.mood-warm  { color: #ffe08a; }
.hero-mood.mood-hot   { color: #ffd83a; }
.hero-temp {
  font-size: 46pt; font-weight: 700; line-height: 1; color: var(--m-ink);
  font-variant-numeric: tabular-nums;
}
.hero-unit { font-size: 46pt; font-weight: 700; color: var(--m-muted); margin-left: 2px; }
.hero-feels { margin-top: 8px; font-size: 14pt; font-weight: 600; color: var(--m-muted); }
.hero-range {
  margin-top: 12px; display: flex; justify-content: center; gap: 18px;
  font-size: 12pt; font-weight: 600; font-variant-numeric: tabular-nums;
}
.hero-hi { color: #e8623d; }
.hero-lo { color: #2980b9; }
/* Modern layout: tint the hero with the accent so it reads as the focal card. */
body.layout-modern .col_sub.hero,
body.layout-modern .col_sub.gradient.hero {
  background: linear-gradient(160deg, var(--m-accent) 0%, #08487f 100%);
}
body.layout-modern .hero-temp,
body.layout-modern .hero-unit,
body.layout-modern .hero-feels { color: #fff; }
body.layout-modern .hero-unit { color: rgba(255,255,255,.85); }
body.layout-modern .hero-hi { color: #ffd0a8; }
body.layout-modern .hero-lo { color: #bfe0ff; }
/* Temperature-reactive hero: JS sets the background; keep text legible on it. */
.hero.hero-dynamic .hero-temp,
.hero.hero-dynamic .hero-unit,
.hero.hero-dynamic .hero-feels { color: #fff; }
.hero.hero-dynamic .hero-unit { color: rgba(255,255,255,.85); }
.hero.hero-dynamic .hero-hi { color: #ffe0c4; }
.hero.hero-dynamic .hero-lo { color: #cfe8ff; }
.hero.hero-dynamic .hero-temp { text-shadow: 0 1px 3px rgba(0,0,0,.25); }
/* Light (cold/ice) background: switch to dark text for contrast. */
.hero.hero-dynamic.hero-ink-dark .hero-temp,
.hero.hero-dynamic.hero-ink-dark .hero-unit,
.hero.hero-dynamic.hero-ink-dark .hero-feels,
.hero.hero-dynamic.hero-ink-dark .hero-mood { color: #0f2233; }
.hero.hero-dynamic.hero-ink-dark .hero-unit { color: rgba(15,34,51,.7); }
.hero.hero-dynamic.hero-ink-dark .hero-hi,
.hero.hero-dynamic.hero-ink-dark .hero-lo { color: #16466b; }
.hero.hero-dynamic.hero-ink-dark .hero-temp { text-shadow: none; }

/* Celestial card (Sun & Moon) */
.celestial {
  display: flex; align-items: center; gap: 20px;
  padding: 16px 18px; background: var(--m-panel-bg);
}
.moon-wrap { text-align: center; flex: 0 0 auto; width: 96px; }
.moon {
  width: 88px; height: 88px; border-radius: 50%;
  background: #161b22; margin: 0 auto;
  box-shadow: inset 0 0 12px rgba(0,0,0,.3);
}
.moon-pct { font-size: 8pt; color: var(--m-muted, #7a8794); margin-top: 6px; font-weight: 600; }
.celestial-info { flex: 1 1 auto; }
/* Each row: label left, value right (same sizing as the value rows). The label
   can wrap/shrink so long translations (e.g. Greek) never push the value off
   the edge; the value stays on one line and keeps a small gap from the label. */
.cel-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--m-rule);
}
.cel-row:last-child { border-bottom: 0; }
.cel-lbl { flex: 1 1 auto; min-width: 0; font-size: 10.5pt; color: var(--m-ink); line-height: 1.25; }
.cel-row b { flex: 0 0 auto; font-size: 10.5pt; font-weight: 600; color: var(--m-ink); white-space: nowrap; text-align: right; }

/* Modern layout: soft silvery glow around the moon. */
body.layout-modern .moon { box-shadow: inset 0 0 12px rgba(0,0,0,.3), 0 0 18px rgba(200,210,225,.35); }
html[data-theme="dark"] .celestial,
html[data-theme="dark"] .moon-wrap { background: transparent; }

/* All-time records card: label left, record value + date right. */
.records .rec-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; padding: 8px 16px; border-top: 1px solid var(--m-rule);
}
.records .rec-row:first-of-type { border-top: 0; }
.records .rec-lbl { flex: 1 1 auto; min-width: 0; font-size: 10pt; color: var(--m-ink); line-height: 1.25; }
.records .rec-row b { flex: 0 0 auto; font-size: 10.5pt; font-weight: 700; color: var(--m-ink); white-space: nowrap; text-align: right; }
.records .rec-date { display: block; font-size: 8pt; font-weight: 400; color: var(--m-muted); margin-top: 1px; }

/* Extra sensors: compact, self-contained rows (not reusing the .line grid). */
.extra-sensors .extra-group {
  padding: 8px 16px 4px; font-size: 9pt; font-weight: 700;
  color: var(--m-accent); background: var(--m-panel-bg);
}
.extra-sensors .extra-group:first-of-type { border-top: 0; }
.extra-sensors .extra-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; padding: 8px 16px;
  background: var(--m-panel-bg); border-top: 1px solid var(--m-rule);
}
.extra-sensors .extra-label { font-size: 11pt; color: var(--m-ink); }
.extra-sensors .extra-value { font-size: 11pt; font-weight: 600; color: var(--m-ink); white-space: nowrap; }

/* About page prose card. */
.about-body { padding: 16px 18px; background: var(--m-panel-bg); }
.about-body p { margin: 0 0 12px; line-height: 1.5; color: var(--m-ink); }
.about-body p:last-child { margin-bottom: 0; }
.about-field .about-key { font-weight: 600; color: var(--m-muted); margin-right: 6px; }
/* About: a single centered box instead of the two-column layout. */
.about-page { max-width: 860px; margin: 0 auto; }
/* Let long values (e.g. a multi-part location) wrap instead of being clipped. */
body.layout-modern .about-page .col_sub:not(.hilows) .lright {
  white-space: normal; overflow-wrap: anywhere; text-align: left;
}
/* Amateur-station disclaimer bar under the nav. */
.disclaimer-bar {
  max-width: 1100px; margin: 10px auto 0; padding: 7px 20px;
  font-size: 8.5pt; line-height: 1.4; color: var(--m-muted); text-align: center;
}
body.layout-modern .disclaimer-bar {
  background: #fff4e5; color: #7a5b2e; border-radius: 8px;
  border: 1px solid #f0d9b5;
}
html[data-theme="dark"] body.layout-modern .disclaimer-bar {
  background: #2c2413; color: #d8bd8e; border-color: #4a3c1e;
}
/* Stale-data warning banner (shown by JS when the station is behind). */
.stale-banner {
  max-width: 1100px; margin: 10px auto 0; padding: 9px 20px;
  font-size: 9.5pt; font-weight: 600; text-align: center; border-radius: 8px;
  background: #fbe3e3; color: #a5281f; border: 1px solid #eeb4b0;
}
.stale-banner[hidden] { display: none; }
html[data-theme="dark"] .stale-banner {
  background: #3a1d1b; color: #ff9d92; border-color: #6a2c27;
}