/* el-nino.css — /el-nino (2026-11-04). Layout plus the --en-* colour tokens the inline SVG diagrams and the
   60 m chart use (backend/el_nino_diagrams.py, js/lib/el-nino-logic.js). Dark only, like the rest of the
   site: no light-scheme overrides (George's call via the verify pass, 2026-11-03). */
.en {
  --en-ink:#e7e5e4; --en-muted:#a8a29e; --en-panel:#1c1917; --en-plot:rgba(148,163,184,.08);
  --en-grid:rgba(255,255,255,.09); --en-warm:#c2410c; --en-warm-ink:#fdba74; --en-on-warm:#ffedd5;
  --en-cold:#1e3a8a; --en-on-cold:#bfdbfe; --en-land:#57534e; --en-wind:#7dd3fc; --en-accent:#38bdf8;
  --en-obs:#38bdf8; --en-norm:#d6d3d1; --en-stale:#eab308;
  max-width: 980px; margin: 0 auto; padding: 0 16px 40px; box-sizing: border-box;
}
.en-head { margin-bottom: 8px; }
.en-passed { border: 1px solid rgba(234,179,8,.5); border-left: 4px solid #eab308; background: rgba(234,179,8,.08);
             border-radius: 10px; padding: 8px 12px; margin: 0 0 10px; font-weight: 700; font-size: 14px; }
.en-sec { margin: 18px 0; }
.en-h2 { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--oc-sea, #38bdf8); margin: 0 0 8px; }
.en-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.en-tile { border: 1px solid var(--en-grid); border-radius: 14px; padding: 10px 12px; background: rgba(255,255,255,.02); min-width: 0; }
.en-tile-h { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--en-muted); margin: 0 0 4px; font-weight: 700; }
.en-big { font-size: 30px; font-weight: 800; line-height: 1.1; margin: 2px 0 4px; font-variant-numeric: tabular-nums; }
.en-line { font-size: 13.5px; line-height: 1.45; margin: 0 0 2px; }
.en-gap { color: var(--en-warm-ink); }
.en-age { font-size: 12.5px; color: var(--en-muted); margin: 2px 0 0; }
.en-src { font-size: 11.5px; color: var(--en-muted); margin: 4px 0 0; }
.en-stale { color: var(--en-stale); font-weight: 700; font-size: 12.5px; margin: 4px 0 0; }
.en-miss { color: var(--en-muted); font-size: 13.5px; margin: 6px 0 0; }
.en-load { color: var(--en-muted); font-size: 13px; margin: 6px 0 0; }
.en-blist { list-style: none; padding: 0; margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; }
.en-blist b { font-size: 20px; font-variant-numeric: tabular-nums; }
.en-bname { display: block; font-size: 12px; color: var(--en-muted); }
.en-legend { font-size: 12.5px; color: var(--en-muted); margin: 8px 0 0; }
.en-key { display: inline-block; width: 22px; height: 0; vertical-align: middle; margin: 0 2px 0 6px; }
.en-key--obs { border-top: 3px solid var(--en-obs); }
.en-key--norm { border-top: 2px dashed var(--en-norm); }
.en-nums { font-size: 13.5px; margin: 6px 0 0; font-variant-numeric: tabular-nums; }
.en-note { font-size: 12.5px; color: var(--en-muted); line-height: 1.5; margin: 8px 0 0; }
.en-fig { margin: 10px 0; border-radius: 14px; background: var(--en-panel); padding: 8px; max-width: 620px; }
.en-fig-chart { max-width: none; padding: 6px; }
.en-fig figcaption { font-size: 14px; line-height: 1.55; padding: 6px 4px 2px; }
.en-fig figcaption p { margin: 0 0 8px; }
.en-explain > p { font-size: 14.5px; line-height: 1.55; max-width: 640px; }
.en-cite { font-size: 11px; font-weight: 700; color: var(--en-accent); text-decoration: underline; text-underline-offset: 2px;
           white-space: nowrap; }
.en-impacts { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.en-impact { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--en-grid); border-radius: 14px; padding: 10px 12px; }
.en-impact h3 { font-size: 15px; margin: 0 0 2px; font-weight: 750; }
.en-impact p { font-size: 13.5px; line-height: 1.45; margin: 0; }
.en-icon { flex: 0 0 32px; width: 32px; height: 32px; }
.en-go a, .en-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--en-accent); }
.en-links { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.en-timeline { list-style: none; padding: 0 0 0 18px; margin: 0; border-left: 3px solid var(--en-warm); }
.en-timeline li { position: relative; margin: 0 0 12px; }
.en-timeline li::before { content: ""; position: absolute; left: -26px; top: 4px; width: 13px; height: 13px; border-radius: 50%;
                          background: var(--en-warm); border: 2px solid var(--en-panel); }
.en-when { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--en-warm-ink); font-weight: 800; }
.en-timeline h3 { font-size: 15px; margin: 2px 0; }
.en-timeline p { font-size: 13.5px; margin: 0; line-height: 1.45; }
.en-sources { font-size: 13.5px; line-height: 1.6; padding-left: 18px; }
.en-sources a { color: var(--en-accent); }
@media (min-width: 900px) {
  .en-fig:not(.en-fig-chart) { display: grid; grid-template-columns: minmax(0, 380px) 1fr; gap: 14px; max-width: none; align-items: start; }
}
/* Phones: two tiles a row, a one-line title and no intro line, so the four numbers AND the 60 m chart
   start on the first screen (data first; checked at 390 px in the 2026-11-03 verify pass). */
@media (max-width: 420px) {
  .en-head .oc-h1 { font-size: 25px; margin-bottom: 6px; }
  .en-head .oc-sub { display: none; }
  .en-sec { margin: 12px 0; }
  .en-tiles + .en-legend { display: none; }   /* the chart carries its own solid/dashed key */
  .en-tile { padding: 7px 9px; }
  .en-tile-h { font-size: 10px; letter-spacing: .08em; }
  .en-big { font-size: 24px; }
  .en-line { font-size: 12.5px; line-height: 1.35; }
  .en-age { font-size: 11.5px; }
  .en-src { font-size: 10.5px; }
  .en-stale { font-size: 11.5px; }
  .en-blist { font-size: 12px; line-height: 1.35; }
  .en-blist b { font-size: 17px; }
  .en-bname { font-size: 11px; }
}