/* Forecast Replay — the Reanalysis Explorer's stylesheet.
 *
 * Started as the Monthly Mean atlas's atlas.css and is the shared skin for every map page here;
 * when /atlas retires into this page (docs/EXPLORER-PLAN.md phase 2) that copy goes and this stays.
 *
 * Loaded after the vendored eaglebase.css and explorer.css, which this never edits. Two jobs:
 *
 *   1. Point the explorer's own variables at Forecast Replay's tokens (spec/tokens.css, defined in
 *      /assets/fr.css), so the vendored rules draw in this site's colours and type without being restated.
 *   2. Restyle the chrome the way this site draws controls: ink outlines, hard offset shadows, mono labels,
 *      light only.
 */

/* 1 — the explorer's variables, as Forecast Replay tokens */
:root {
  --paper: var(--fr-paper-2);
  --card: var(--fr-card);
  --ink: var(--fr-ink);
  --ink2: var(--fr-ink-2);
  --mut: var(--fr-ink-muted);
  --line: var(--fr-rule);
  --line2: var(--fr-paper-2);
  --sign: var(--fr-guide-green);
  --sign-dk: var(--fr-guide-green-dark);
  --sign-tx: var(--fr-card);
  --sign-sub: var(--fr-guide-green-tint);
  --blue: var(--fr-rest-area-blue);
  --navy: var(--fr-broadcast-navy);
  --blue-sub: var(--fr-rest-area-blue-tint);
  --shield-red: var(--fr-wrong-way-red);
  --amber: var(--fr-natgeo-yellow);
  --figure: var(--fr-ink);
  --figure-line: var(--fr-ink-3);
  --font: var(--fr-font-ui);
  --mono-font: var(--fr-font-mono);
  --utilbar-h: 0px;                 /* no sticky utility bar here: the app header scrolls with the page */
  --atlas-edge: 1.5px solid var(--fr-ink);
  --atlas-radius: 6px;
}
html { color-scheme: light; }
body.atlas { background: var(--fr-paper-2); color: var(--fr-ink); font-family: var(--fr-font-ui); }

/* 2 — the app header, as on the Studio pages */
.fr-head {
  background: var(--fr-paper); border-bottom: 1px solid var(--fr-rule);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px;
  padding: 8px 16px; min-height: 56px;
}
.fr-logo { display: inline-flex; background: var(--fr-guide-green); border-radius: 6px; padding: 3px; }
.fr-logo span {
  display: inline-flex; align-items: center; gap: 7px; border: 2px solid var(--fr-card); border-radius: 4px;
  padding: 4px 10px 2px 8px; color: var(--fr-card); font-weight: 800; font-size: 13px; letter-spacing: .06em;
}
.fr-logo:hover { text-decoration: none; }
.fr-crumb { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.fr-crumb a, .fr-crumb span[aria-hidden] { color: var(--fr-ink-muted); }
.fr-crumb [aria-current] { font-weight: 800; }
.fr-crumb a, .fr-nav a { display: inline-flex; align-items: center; min-height: 40px; }
.fr-nav { display: flex; flex-wrap: wrap; gap: 0 4px; margin-left: auto; }
.fr-nav a { padding: 2px 8px 0; color: var(--fr-ink-muted); font-size: 14px; font-weight: 600; border-radius: 4px; }
.fr-nav a:hover, .fr-crumb a:hover { color: var(--fr-ink); text-decoration: underline; }

.explorer { max-width: 1560px; padding-top: 16px; }
.fr-title { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 32px; margin-bottom: 14px; }
.fr-title > div:first-child { display: flex; flex-direction: column; gap: 6px; }
.fr-eyebrow { font: 700 12px var(--fr-font-mono); letter-spacing: .14em; color: var(--fr-rest-area-blue); }
.fr-title h1 { margin: 0; font-weight: 900; font-size: clamp(26px, 3.4vw, 40px); line-height: 1; letter-spacing: -.025em; }
.fr-monthcard {
  display: flex; flex-direction: column; gap: 2px; background: var(--fr-card); border: 2px solid var(--fr-ink);
  border-radius: 6px; padding: 8px 16px 6px; box-shadow: var(--fr-shadow-hard-red); min-width: 190px;
}
.fr-monthcard .k { font: 700 11px var(--fr-font-mono); letter-spacing: .12em; color: var(--fr-wrong-way-red); }
.fr-monthcard .v { font: 700 30px/1.05 var(--fr-font-mono); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }

/* 3 — panels: flat cards on a rule, the map itself on a hard shadow */
.primary, .timeline, .legend-row, .facts, .drawer {
  border: 1px solid var(--fr-rule); border-radius: 8px; box-shadow: none;
}
.primary, .drawer { border-top: 1px solid var(--fr-rule); }
.stage-wrap { border: 2px solid var(--fr-ink); border-radius: 6px; box-shadow: var(--fr-shadow-hard); }
.deck { gap: 16px; }
.drawer { top: 12px; max-height: calc(100dvh - 24px); }
.drawer-head span { color: var(--fr-ink); font-family: var(--fr-font-mono); }
#status { border: var(--atlas-edge); border-radius: var(--atlas-radius); }
#status.is-error { color: var(--fr-wrong-way-red); box-shadow: var(--fr-shadow-hard-red); }

/* 4 — labels and controls */
.atlas label, .tl-lab, .legend-about .k, .fact .k {
  font-family: var(--fr-font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; color: var(--fr-ink-muted);
}
.atlas .switch { font-family: var(--fr-font-ui); font-size: 12px; letter-spacing: 0; color: var(--fr-ink-2); }
.atlas .btn {
  border: var(--atlas-edge); border-radius: var(--atlas-radius); background: var(--fr-card); color: var(--fr-ink);
  font-weight: 800; font-size: 12px; padding: 7px 10px 5px; letter-spacing: .01em;
}
.atlas .btn:hover { border-color: var(--fr-ink); background: var(--fr-paper); }
.atlas .btn.on, .atlas .btn[aria-pressed="true"] {
  background: var(--fr-ink); color: var(--fr-card); border-color: var(--fr-ink); box-shadow: var(--fr-shadow-hard-green);
}
.atlas .btn:disabled { opacity: .4; box-shadow: none; }
.atlas .month-btn { font-family: var(--fr-font-mono); font-size: 11.5px; padding: 7px 7px 5px; min-width: 40px; }
.atlas .month-btn.on { box-shadow: var(--fr-shadow-hard-red); }
#play { min-width: 92px; background: var(--fr-guide-green); color: var(--fr-card); border-color: var(--fr-guide-green); }
#play:hover { background: var(--fr-guide-green-dark); }
#play[aria-pressed="true"] { background: var(--fr-ink); border-color: var(--fr-ink); box-shadow: none; }
.atlas select {
  border: var(--atlas-edge); border-radius: var(--atlas-radius); background: var(--fr-card); color: var(--fr-ink);
  font: 700 12px var(--fr-font-mono); padding: 6px 7px 4px;
}
#year-select { font-size: 14px; padding: 6px 8px 4px; }
.atlas .seg { border: var(--atlas-edge); border-radius: var(--atlas-radius); overflow: hidden; display: inline-flex; }
.atlas .seg button {
  border: 0; border-radius: 0; background: var(--fr-card); color: var(--fr-ink); font: 700 11px var(--fr-font-mono);
  padding: 7px 9px 5px;
}
.atlas .seg button + button { border-left: 1px solid var(--fr-ink); }
.atlas .seg button.on, .atlas .seg button[aria-pressed="true"] { background: var(--fr-ink); color: var(--fr-card); }
.atlas select:focus, .atlas .btn:focus-visible, .atlas .seg button:focus-visible, .atlas input:focus-visible {
  outline: 3px solid var(--fr-rest-area-blue); outline-offset: 2px;
}
.atlas input[type="range"] { accent-color: var(--fr-guide-green); }
#opacity { width: 150px; }
#regions { gap: 5px; }
#compare-note { font-size: 11.5px; font-weight: 600; }
#export-status { font-size: 11.5px; font-weight: 700; }

/* 5 — the map's own furniture: ink plates, mono numbers */
.stage-overlay { background: rgba(21, 24, 26, .9); border: 0; border-radius: 4px; color: var(--fr-card); }
.ov-tr .ov-title { font: 700 20px/1.1 var(--fr-font-mono); letter-spacing: 0; }
.ov-sub { color: #C9D2D6; font-family: var(--fr-font-mono); font-size: 10.5px; letter-spacing: .06em; }
#coords { font-size: 11px; }
.probe-v { font-size: 14px; }
.probe-xy { color: #C9D2D6; }
#stage .maplibregl-ctrl-group { border: var(--atlas-edge); border-radius: var(--atlas-radius); box-shadow: 2px 2px 0 var(--fr-ink); }

/* 6 — timeline, legend, facts */
.timeline { padding: 12px 14px 10px; gap: 18px; }
.tl-ticks .tk span { font-size: 10px; color: var(--fr-ink-muted); }
.tl-ticks .tk.day span { color: var(--fr-ink); }
.tl-ends { font-size: 10.5px; }
.tl-count { font-size: 12px; }
.tl-hint { font: 600 11px var(--fr-font-mono); letter-spacing: .04em; }
.legend-bar { height: 18px; border: var(--atlas-edge); border-radius: 3px; }
.legend-ticks span { font-size: 10.5px; color: var(--fr-ink-2); }
.fact .v { font-family: var(--fr-font-mono); font-weight: 700; }
.about { padding: 18px 2px 0; max-width: 78ch; }
.about p { font-size: 14px; line-height: 1.55; font-weight: 500; color: var(--fr-ink-3); }
.about .fr-credit { font: 600 12px var(--fr-font-mono); color: var(--fr-ink-muted); }

@media (max-width: 700px) {
  .fr-nav { display: none; }
  .fr-monthcard { min-width: 0; padding: 6px 12px 4px; }
  .fr-monthcard .v { font-size: 22px; }
}
#export-status { display: none; }

/* the zoom buttons sit under the month plate, not behind it; the map leaves room for the timeline below */
#stage .maplibregl-ctrl-top-right { top: 62px; }
#stage { height: clamp(420px, calc(100dvh - 430px), 860px); }
@media (max-width: 700px) { #stage { height: min(62dvh, 560px); } }
#coords:empty { display: none; }

/* 7 — under the map: one point's record, and the month's teleconnection indices */
.panels { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 12px; margin-top: 12px; align-items: start; }
@media (max-width: 1000px) { .panels { grid-template-columns: minmax(0, 1fr); } }
.panel { background: var(--fr-card); border: var(--atlas-edge); border-radius: var(--atlas-radius); padding: 12px 14px 10px; min-width: 0; }
.panel-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-height: 40px; }
.panel-head h2 { font: 800 12px var(--fr-font-ui); letter-spacing: .1em; text-transform: uppercase; margin: 0; }
.panel-head .mono { font: 700 12px var(--fr-font-mono); color: var(--fr-ink-muted); }
.panel-head .btn { margin-left: auto; }
.panel-hint { font-size: 13px; font-weight: 600; color: var(--fr-ink-muted); margin: 4px 0; max-width: 70ch; }
.pstats { display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 4px 0 8px; }
.pstats > div { display: flex; flex-direction: column; }
.pstats .k { font: 700 10.5px var(--fr-font-ui); letter-spacing: .1em; color: var(--fr-ink-muted); }
.pstats .v { font: 700 17px var(--fr-font-mono); margin-top: 2px; }
#point-chart svg { display: block; width: 100%; height: auto; }
#point-chart .bar { cursor: pointer; }
#point-chart .bar:hover { opacity: .7; }
#point-chart text { font: 600 10px var(--fr-font-mono); fill: var(--fr-ink-muted); }
.pin-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--fr-natgeo-yellow); border: 2.5px solid var(--fr-ink); box-shadow: 0 0 0 2px #fff; }
.idx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 6px; margin-top: 4px; }
.idx-group { grid-column: 1 / -1; margin: 8px 0 0; font: 800 10.5px var(--fr-font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--fr-ink-muted); }
.idx-group:first-child { margin-top: 0; }
.idx { border: 1px solid var(--fr-rule-strong); border-radius: 4px; padding: 5px 7px 6px; }
.idx .a { font: 800 11px var(--fr-font-ui); letter-spacing: .06em; color: var(--fr-ink-3); }
.idx .n { font: 700 15px var(--fr-font-mono); display: block; }
.idx .u { font: 600 10px var(--fr-font-mono); color: var(--fr-ink-muted); }
.idx .m { display: block; position: relative; height: 5px; margin-top: 4px; background: var(--fr-paper-2); }
.idx .m::after { content: ""; position: absolute; left: 50%; top: -1px; bottom: -1px; width: 1px; background: var(--fr-ink); }
.idx .m i { position: absolute; top: 0; bottom: 0; }
.idx .m i.pos { left: 50%; background: var(--fr-wrong-way-red); }
.idx .m i.neg { right: 50%; background: var(--fr-rest-area-blue); }
.idx.none .n { color: var(--fr-ink-muted); }

/* 8 — the vertical section */
.panel.sec { margin-top: 12px; }
.sec-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 2px 0 8px; }
.sec-tools label { font: 700 10.5px var(--fr-font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--fr-ink-muted); }
.sec-legend { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font: 600 11px var(--fr-font-mono); color: var(--fr-ink-muted); }
.sec-legend i { display: block; width: 140px; height: 9px; border: 1px solid var(--fr-rule-strong); }
#sec-box { position: relative; min-height: 240px; }
#sec-box.busy { opacity: .55; }
#sec-canvas { display: block; width: 100%; cursor: crosshair; }
#sec-read { margin-left: auto; }

/* 9 — what the Explorer adds to the atlas's chrome: the step control, the jump row, and the
 *     panels that only mean something in one mode. */
.seg-mode button { font-size: 12px; padding: 8px 13px 6px; letter-spacing: .06em; }
.pgroup-jump .cycle-nav { gap: 5px; }
.atlas input[type="date"] {
  border: var(--atlas-edge); border-radius: var(--atlas-radius); background: var(--fr-card); color: var(--fr-ink);
  font: 700 13px var(--fr-font-mono); padding: 5px 7px 3px;
}
#jump-hour { font-size: 13px; }
#jump-now { font-size: 11px; }
/* The teleconnection panel and the vertical section are monthly things: they read the atlas's own
   monthly store, and there is nothing honest to show them in an hour. The point panel stays in
   every mode — it reads the value under the pin from the frame itself. */
body[data-mode="hourly"] #indices, body[data-mode="daily"] #indices,
body[data-mode="hourly"] #section, body[data-mode="daily"] #section { display: none; }
body[data-mode="hourly"] .panels, body[data-mode="daily"] .panels { grid-template-columns: minmax(0, 1fr); }
body:not([data-mode="hourly"]) #stride-side { display: none; }
/* A step that the archive does not hold is offered but marked, rather than hidden: the reader
   should be able to see where the archive stops. */
.atlas .seg button.gap, .atlas .btn.gap { color: var(--fr-ink-muted); text-decoration: line-through; }
#jump-note { font: 600 11.5px var(--fr-font-mono); color: var(--fr-wrong-way-red); }
/* The last three Region chips are not boxes on the global raster: each is a country map with a
   data root and a projection of its own, and picking one rebuilds the map rather than moving the
   camera. The rule marks that difference without hiding them in a second control — to the reader
   the question is still "where am I looking", and the answer should be one row. */
.sector-btn.country-btn { border-style: dashed; }
.sector-btn.country-btn::before { content: '◇ '; opacity: .55; }
.sector-btn.country-btn[aria-pressed="true"] { border-style: solid; }
.sector-btn.country-btn[aria-pressed="true"]::before { content: '◆ '; opacity: 1; }
.chips-sep {
  align-self: center; margin: 0 2px 0 6px; padding-left: 8px;
  border-left: var(--atlas-edge);
  font: 600 9.5px var(--fr-font-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--fr-ink-muted);
}

/* ---- Same Day Through the Years -------------------------------------------------------------
   The wall is the EVERY YEAR axis laid out at once: one field, one calendar day, one shared
   colour scale, and the anchor year drawn large among its comparisons. The cards carry no colour
   of their own — every frame is already palettised against the fixed axis in fr/replay/styles.py,
   so the wall is honest without a legend per card, and a card is never rescaled against another. */
.wall-tools {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  padding: 0 0 12px;
}
.wall-lab {
  font: 600 9.5px var(--fr-font-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--fr-ink-muted);
}
.wall-grid {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px;
  margin: 0; padding: 0; list-style: none;
  /* The anchor is two cards wide and two tall and does not sit in the corner once the wall is
     ranked by value, which leaves holes in a plain flow. `dense` backfills them with the cards
     that follow; the ordering the reader chose is unchanged, only the packing is. */
  grid-auto-flow: dense;
}
.wall-grid li { margin: 0; }
/* The anchor is the year the reader came for, so it is two cards wide and two tall. It is also
   the first card in chronological order only by accident of the span — `order` keeps it where the
   chosen ordering puts it rather than pinning it to the corner. */
.wall-grid li.is-anchor { grid-column: span 2; grid-row: span 2; }
.wall-card {
  display: block; width: 100%; padding: 0; cursor: pointer; overflow: hidden;
  border: var(--atlas-edge); border-radius: var(--atlas-radius); background: var(--fr-card);
  color: inherit; text-align: left;
}
.wall-card:hover, .wall-card:focus-visible { border-color: var(--fr-ink); }
.wall-card[aria-current="true"] { border-color: var(--fr-ink); border-width: 2px; }
.wall-card img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--fr-card);
}
.wall-card .wall-meta {
  display: flex; align-items: baseline; justify-content: space-between; gap: 6px;
  padding: 5px 7px 4px;
}
.wall-card .y { font: 800 14px var(--fr-font-mono); }
.wall-grid li.is-anchor .wall-card .y { font-size: 20px; }
.wall-card .v { font: 600 10.5px var(--fr-font-mono); color: var(--fr-ink-muted); }
/* A year the archive has not drawn is shown and marked, the same rule the step controls follow:
   the reader should be able to see where the wall stops rather than wonder why it is short. */
.wall-card.gap { opacity: .5; }
.wall-card.gap .y { text-decoration: line-through; }
@media (max-width: 1100px) { .wall-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .wall-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wall-grid li.is-anchor { grid-column: span 2; grid-row: auto; }
}