/* live.css - styling for the two live-data-lane blocks (owned by that lane; not part of
   src/public/assets/css/styles.css, which the compile lane owns). Import this stylesheet from the
   page <head> alongside styles.css; see research/live-feed-wiring.md for the exact wiring.

   Palette: reads the site's existing custom-property tokens where present (--clay, --pine,
   --gold, --paper from site.config.md's palette) and falls back to safe literals so this file
   renders correctly even before those tokens exist. */

.sierranow, .whentogo {
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  border-radius: 12px;
  background: var(--paper, #F4ECDF);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.sn-lead, .wtg-lead {
  font-size: 1.05rem;
  line-height: 1.5;
  margin: 0 0 0.75rem;
}

.sn-live {
  min-height: 2.6em;
  font-size: 1.1rem;
  line-height: 1.4;
  margin: 0 0 0.5rem;
}
.sn-live[data-status="closed"] { min-height: 1.4em; }
.sn-num { color: var(--clay, #9C3B24); font-variant-numeric: tabular-nums; }

.sn-summer {
  min-height: 3.2em;
  line-height: 1.5;
  margin: 0 0 0.5rem;
}

.sn-src, .wtg-src { font-size: 0.85rem; color: #5a5248; }
.sn-src a, .wtg-src a { color: var(--pine, #1F4D3F); text-decoration: underline; }

.wtg-fact {
  font-size: 1rem;
  line-height: 1.5;
  margin: 0.75rem 0;
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--gold, #C99A2E);
  background: rgba(201, 154, 46, 0.08);
}

.mb-chartwrap { margin: 1rem 0; }
.mb-svg { width: 100%; height: auto; max-width: 100%; display: block; }
.mb-axis { font-size: 10px; fill: #6b6255; }
.mb-axisline { stroke: #cabfa9; stroke-width: 1; }
.mb-bar { fill: var(--pine, #1F4D3F); opacity: 0.28; }
.mb-line { stroke-width: 2.5; }
.mb-line-max { stroke: var(--clay, #9C3B24); }
.mb-line-min { stroke: var(--gold, #C99A2E); }
.mb-dot-max { fill: var(--clay, #9C3B24); }
.mb-dot-min { fill: var(--gold, #C99A2E); }

.mb-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.5rem;
  font-size: 0.85rem;
}
.mb-legend-item { display: inline-flex; align-items: center; gap: 0.4rem; }
.mb-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.mb-swatch-max { background: var(--clay, #9C3B24); }
.mb-swatch-min { background: var(--gold, #C99A2E); }
.mb-swatch-bar { background: var(--pine, #1F4D3F); opacity: 0.28; }

.wtg-disc, .sn-live + details { margin-top: 0.75rem; }
.wtg-disc summary { cursor: pointer; font-weight: 600; }
.wtg-scroll { overflow-x: auto; }
.wtg-table { width: 100%; border-collapse: collapse; margin-top: 0.5rem; font-size: 0.9rem; }
.wtg-table th, .wtg-table td { padding: 0.4rem 0.6rem; border-bottom: 1px solid rgba(0,0,0,0.08); text-align: left; }
.wtg-table caption { text-align: left; font-size: 0.8rem; color: #6b6255; margin-bottom: 0.4rem; }

@media (max-width: 620px) {
  /* Rule 50 MAP_LABELS: the chart's viewBox (640x260) is wider than the narrow container at this
     width, so the whole SVG scales down (~0.55x observed) and a 10px CSS font-size paints small
     on a real phone. A full bump to clear 12px (~22px declared) was tried on the pin-map's own
     labels and caused real overlaps there (check-map-sections), so this stays a conservative
     mid-size bump rather than chasing the exact threshold on 12 tightly-packed month labels. */
  .mb-axis { font-size: 15px; }
}

@media (prefers-color-scheme: dark) {
  .sierranow, .whentogo { background: rgba(255, 255, 255, 0.04); border-color: rgba(255,255,255,0.12); }
  .sn-src, .wtg-src, .mb-axis, .wtg-table caption { color: var(--ink-soft, #c9c0b2); }
  .wtg-table th, .wtg-table td { border-bottom-color: rgba(255,255,255,0.12); }
  .mb-axisline { stroke: rgba(255,255,255,0.25); }
}