/* Forecast Eagle — the explorer chrome, shared by every model viewer.
 *
 * Six pages carried this in six near-identical <style> blocks. Converged here for the
 * same reason the viewer modules were: one stylesheet cannot drift into six.
 *
 * The layout is the change worth explaining. The first cut put every control — the
 * field picker, the label-case menu, the GIF button — into one flat toolbar of some
 * thirty widgets above the map, all at the same visual weight. A reader needs three
 * things nine times out of ten: what field, what place, what time. On a phone that
 * toolbar stacked into a screen and a half before the map appeared.
 *
 * So the controls now have a hierarchy that follows the signage system the site
 * already uses:
 *
 *   .primary   the guide sign — field · place · cycle, directly above the map
 *   .deck      the map, its timeline and legend, with the .drawer beside it
 *   .drawer    the services panel — overlays, labels, boundaries, colour, output
 *              shape, export. A side panel on a wide screen; a fold-out under the
 *              legend on a narrow one, closed until asked for.
 *
 * Every element id the viewer modules look up is unchanged. This is a re-arrangement
 * of the same document, not a new one.
 */

.explorer { max-width: 1560px; margin: 0 auto; padding: 10px 18px 28px; }

/* ── title bar ─────────────────────────────────────────── */
.titlebar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 10px; }
.titlebar h1 { margin: 0; font-size: 22px; font-weight: 900; letter-spacing: -.01em; }
.titlebar .sub { font-size: 12px; font-weight: 700; color: var(--mut); }
.title-tools { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.title-tools .btn { font-size: 10.5px; padding: 6px 10px; letter-spacing: .06em; }
#copy-link.done { border-color: var(--sign); color: var(--sign); }

#status {
  display: none; margin: 0 0 10px; padding: 11px 14px; border-radius: 4px;
  background: var(--card); border: 1px solid var(--line); color: var(--ink2);
  font-weight: 700; font-size: 13px;
}
#status.is-error { border-color: var(--shield-red); color: #8a1f2c; }

/* ── the guide sign: field · place · cycle ─────────────── */
.primary {
  display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: flex-start;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 13px; margin-bottom: 10px; box-shadow: 0 6px 22px rgba(0,0,0,.08);
  border-top: 4px solid var(--sign);
}
.pgroup { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pgroup > div { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.pgroup-place { flex: 3 1 560px; }
.pgroup-tools { margin-left: auto; align-self: flex-end; }
.chips { display: flex; gap: 5px; flex-wrap: wrap; }
.field-btn, .element-btn, .domain-btn, .sector-btn, .region-btn { font-size: 11px; padding: 5px 9px; }
.sector-btn:disabled { opacity: .4; }
.domain-selects { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.domain-selects select { font-size: 11px; padding: 5px 7px; max-width: 190px; }
/* `display: contents` rather than a flex row of its own: the two polar links belong
   in the same wrapping line as the country picker and the projection, so they wrap
   with them instead of dropping to a line by themselves on a narrow screen. */
#polar-links { display: contents; }
/* The polar links leave this page, so they are marked the way the model chips mark an
   experimental feed — a change of state the reader should see before clicking, not
   after. Amber ground, because these are the two views this map cannot draw. */
.polar-link { font-size: 11px; padding: 5px 9px; border-color: var(--amber); }
.polar-link:hover { background: var(--amber); color: #3a2a00; }
#cycle-select, #ramp { font-size: 11px; padding: 5px 7px; }
.cycle-nav { display: flex; gap: 4px; align-items: center; }
.cycle-nav .btn { padding: 5px 7px; font-size: 11px; }
#domain-note, #pending { font-size: 10.5px; font-weight: 600; color: var(--mut); max-width: 46ch; }

/* Sector menu, grouped the way the NWS groups its regions */
#sectors, #regions { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.sector-group { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.sector-group-label {
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--mut); min-width: 62px;
}

/* Only a narrow screen needs a way to open the drawer; on a wide one it is always
   there. */
.drawer-toggle { display: none; }

/* ── the deck: map beside the drawer ───────────────────── */
.deck { display: grid; grid-template-columns: minmax(0, 1fr) 296px; gap: 12px; align-items: start; }
.deck-main { min-width: 0; }

.drawer {
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 6px 22px rgba(0,0,0,.08); padding: 4px 13px 12px;
  position: sticky; top: 44px; max-height: calc(100vh - 56px); overflow: auto;
  border-top: 4px solid var(--blue);
}
.drawer-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 0 6px; border-bottom: 1px solid var(--line2); margin-bottom: 4px;
}
.drawer-head span { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.drawer-head .btn { display: none; padding: 3px 8px; font-size: 11px; }
.drawer .group { display: flex; flex-direction: column; gap: 5px; padding: 9px 0; border-bottom: 1px solid var(--line2); }
.drawer .group:last-child { border-bottom: 0; }
.drawer .group > div { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.drawer .group > label + div { margin-top: 1px; }
.drawer select { font-size: 11px; padding: 5px 7px; max-width: 100%; }
.drawer .btn { font-size: 11px; padding: 5px 9px; }
.overlay-box { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.switch { display: inline-flex; align-items: center; gap: 5px; font-size: 11px;
          font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--ink2); cursor: pointer; }
.switch input { accent-color: var(--sign); }
label { font-size: 10.5px; }

/* ── the stage ─────────────────────────────────────────── */
.stage-wrap {
  position: relative; border: 1px solid var(--line); border-radius: 8px;
  overflow: hidden; box-shadow: 0 6px 22px rgba(0,0,0,.08); transition: max-width .18s ease;
}
#stage {
  position: relative; width: 100%; background: #aebfcc;
  height: clamp(420px, calc(100vh - 250px), 900px);
}
/* MapLibre's chrome, restyled to the signage system rather than its defaults. */
#stage .maplibregl-ctrl-group {
  border-radius: 3px; border: 1px solid var(--line); box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
#stage .maplibregl-ctrl-group button + button { border-top: 1px solid var(--line2); }
#stage .maplibregl-ctrl-scale {
  background: rgba(255,255,255,.82); border-color: var(--ink2); color: var(--ink);
  font: 700 10px var(--font); letter-spacing: .04em;
}
#stage .maplibregl-ctrl-attrib { font: 600 10px var(--font); }

.stage-overlay {
  position: absolute; z-index: 5; pointer-events: none;
  background: rgba(10, 14, 20, .84); border: 1px solid var(--figure-line);
  border-radius: 4px; padding: 7px 11px; color: #e9e7e0; font-size: 12px; font-weight: 700;
}
.stage-overlay:empty { display: none; }
.ov-tl { top: 10px; left: 10px; }
.ov-tr { top: 10px; right: 10px; text-align: right; }
.ov-bl { bottom: 10px; left: 10px; }
.ov-title { font-weight: 900; font-size: 14px; letter-spacing: -.01em; }
.ov-sub { color: #9fb0c2; font-size: 11px; font-weight: 700; }
/* Pointer readout: the value the map is drawing, then the position */
#coords { display: flex; gap: 9px; align-items: baseline; }
.probe-v { font-weight: 900; font-size: 13px; color: #fff; letter-spacing: -.01em; }
.probe-xy { color: #9fb0c2; font-size: 10.5px; font-weight: 700; }

/* Compass pad — the NWS sector pages' adjacent-sector arrows, four levels deep */
.compass {
  position: absolute; z-index: 6; top: 64px; left: 10px;
  display: grid; grid-template-columns: repeat(3, 26px); grid-template-rows: repeat(3, 26px);
  background: rgba(10,14,20,.84); border: 1px solid var(--figure-line); border-radius: 5px;
  padding: 3px;
}
.compass:empty { display: none; }
.compass-btn {
  background: none; border: 0; color: #e9e7e0; font-size: 11px; line-height: 1;
  cursor: pointer; border-radius: 3px; padding: 0;
}
.compass-btn:hover:not(:disabled) { background: rgba(255,255,255,.16); }
.compass-btn:disabled { opacity: .22; cursor: default; }
.compass-mid { grid-area: 2 / 2; display: grid; place-items: center;
               font: 800 9px var(--mono-font); color: #9fb0c2; letter-spacing: .02em; }
.dir-n { grid-area: 1 / 2; } .dir-w { grid-area: 2 / 1; }
.dir-e { grid-area: 2 / 3; } .dir-s { grid-area: 3 / 2; }

/* Place navigator: breadcrumb up the hierarchy, chips down it */
.navbar { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.navbar:empty { display: none; }
.crumbs { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.crumb {
  font: 800 12px var(--font); letter-spacing: .01em; color: var(--navy);
  background: none; border: 0; padding: 2px 3px; cursor: pointer; border-radius: 3px;
}
.crumb:hover { background: var(--line2); }
.crumb.on { color: var(--ink); cursor: default; text-decoration: underline;
            text-decoration-color: var(--sign); text-underline-offset: 3px;
            text-decoration-thickness: 2px; }
.crumb-sep { color: var(--mut); font-size: 10px; }
.drill-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.drill-label { font-size: 10px; font-weight: 700; letter-spacing: .12em;
               text-transform: uppercase; color: var(--mut); white-space: nowrap; }
.drill-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.chip {
  font: 700 10.5px var(--font); color: var(--ink2); background: var(--card);
  border: 1px solid var(--line); border-radius: 3px; padding: 3px 7px; cursor: pointer;
}
.chip:hover { border-color: var(--sign); color: var(--ink); }

/* ── legend and facts ───────────────────────────────────── */
.legend-row {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 10px; background: var(--card); border: 1px solid var(--line);
  border-radius: 8px; padding: 12px 14px; box-shadow: 0 6px 22px rgba(0,0,0,.08);
}
#legend { flex: 1 1 340px; min-width: 260px; position: relative; }
.legend-bar { height: 15px; border-radius: 2px; border: 1px solid var(--line); }
.legend-ticks { position: relative; height: 15px; margin-top: 2px; }
.legend-ticks span {
  position: absolute; transform: translateX(-50%); font-size: 10px; font-weight: 700;
  color: var(--mut); font-family: var(--mono-font); white-space: nowrap;
}
.legend-units { font-size: 10px; color: var(--ink2); margin-top: 2px; font-weight: 800; letter-spacing: .08em; }
.legend-about { flex: 1 1 220px; }
.legend-about .k { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--mut); }
.legend-about .d { font-size: 13px; font-weight: 600; color: var(--ink2); }
.legend-about a { color: var(--navy); font-weight: 800; font-size: 11.5px; }

/* Mileage-marker style facts strip */
.facts { display: flex; flex-wrap: wrap; margin-top: 12px; background: var(--card);
         border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
         box-shadow: 0 6px 22px rgba(0,0,0,.08); }
.fact { padding: 10px 20px; border-left: 1px solid var(--line2); flex: 1 1 150px; }
.fact:first-child { border-left: 0; }
.fact .k { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; color: var(--mut); }
.fact .v { font-size: 15px; font-weight: 900; margin-top: 3px; white-space: nowrap; }

/* The about panel under every explorer */
.about p { color: var(--ink2); font-size: 13.5px; font-weight: 600; margin: 0 0 10px; }
.about p:last-child { margin-bottom: 0; }

/* ── narrow screens ─────────────────────────────────────── */
@media (max-width: 1180px) {
  .deck { display: block; }
  .drawer { position: static; max-height: none; margin-top: 12px; display: none; }
  .drawer.open { display: block; }
  .drawer-head .btn { display: inline-block; }
  .drawer-toggle { display: inline-block; }
}

@media (max-width: 700px) {
  .explorer { padding: 8px 10px 24px; }
  .titlebar h1 { font-size: 19px; }
  .titlebar .sub { display: none; }
  .primary { gap: 8px 14px; padding: 8px 10px; }
  /* One row you can thumb through, not five rows you scroll past. */
  .chips, #fields, #elements, #domains, .sector-group {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%;
    padding-bottom: 2px; -webkit-overflow-scrolling: touch;
  }
  .chips::-webkit-scrollbar, .sector-group::-webkit-scrollbar { display: none; }
  .chips .btn, .sector-group .btn, #domains .btn { white-space: nowrap; }
  #sectors, #regions { max-width: 100%; }
  .sector-group-label { min-width: 54px; }
  /* On a phone the regional rows are the same places the breadcrumb's drill chips
     offer under the map; the national row and the two jump menus are enough here. */
  #sectors .sector-group:not(:first-child) { display: none; }
  #stage { height: min(60vh, 560px); min-height: 320px; }
  .ov-title { font-size: 12.5px; }
  .ov-sub { font-size: 10px; }
  .compass { top: 56px; }
  .timeline { padding: 8px 10px; gap: 10px; }
  .tl-hint { display: none; }
  .fact { flex: 1 1 45%; padding: 8px 12px; }
}

/* ── the point view: a city's series through the run (mappoint.js) ── */
.point-panel {
  margin-top: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 6px 22px rgba(0,0,0,.08); padding: 10px 14px 8px; border-left: 4px solid var(--blue);
}
.pp-head { display: flex; align-items: flex-end; gap: 14px 22px; flex-wrap: wrap; margin-bottom: 4px; }
.pp-title { display: flex; flex-direction: column; gap: 2px; min-width: 200px; }
.pp-city { font-size: 17px; font-weight: 900; letter-spacing: -.01em; }
.pp-what { font-size: 11px; font-weight: 700; color: var(--mut); letter-spacing: .04em; text-transform: uppercase; }
.pp-now { display: flex; flex-direction: column; align-items: flex-start; }
.pp-v { font: 900 26px var(--mono-font); color: var(--blue); line-height: 1; letter-spacing: -.02em; }
.pp-v small { font-size: 12px; margin-left: 3px; color: var(--ink2); font-weight: 800; }
.pp-t { font: 700 10.5px var(--mono-font); color: var(--mut); margin-top: 3px; }
.pp-tools { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pp-tools .btn { font-size: 10.5px; padding: 4px 8px; }
.pp-prog { font: 700 10.5px var(--mono-font); color: var(--sign); }
.pp-ext { font-size: 11px; font-weight: 600; color: var(--ink2); }
.pp-ext b { color: var(--ink); font-family: var(--mono-font); }
.pp-chart { display: block; width: 100%; height: 190px; cursor: crosshair; }
.pp-grid { stroke: var(--line2); stroke-width: 1; }
.pp-ylab { font: 700 11px var(--mono-font); fill: var(--mut); }
.pp-tick { stroke: var(--line); stroke-width: 1; }
.pp-tick.day { stroke: var(--sign); stroke-width: 2; }
.pp-xlab { font: 700 10.5px var(--mono-font); fill: var(--mut); }
.pp-xlab.day { fill: var(--ink2); font-weight: 800; }
.pp-area { fill: var(--sign); opacity: .08; }
.pp-line { fill: none; stroke: var(--sign); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.pp-dot { fill: var(--card); stroke: var(--sign); stroke-width: 1.5; }
.pp-cur { stroke: var(--blue); stroke-width: 1.5; stroke-dasharray: 3 3; }
.pp-curdot { fill: var(--blue); stroke: #fff; stroke-width: 2; }
.pp-foot { font-size: 10.5px; font-weight: 600; color: var(--mut); margin-top: 2px; }
@media (max-width: 700px) { .pp-chart { height: 150px; } .pp-ext { display: none; } }

/* ── compare & verify (mapcompare.js) ─────────────────────── */
.compare-overlay { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.compare-handle {
  position: absolute; top: 50%; z-index: 7; transform: translate(-50%, -50%);
  background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 14px;
  padding: 5px 8px; font: 900 11px var(--font); cursor: ew-resize; user-select: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.3); touch-action: none;
}
.compare-label {
  position: absolute; z-index: 6; bottom: 44px; right: 10px; pointer-events: none;
  background: rgba(10,14,20,.84); border: 1px solid var(--figure-line); border-radius: 4px;
  color: #e9e7e0; padding: 6px 10px; font-size: 11px; font-weight: 700; max-width: 60%;
}
.cmp-scale { display: flex; align-items: center; gap: 6px; margin-top: 5px; font: 700 10px var(--mono-font); color: #9fb0c2; }
.cmp-scale i { flex: 1; height: 8px; border-radius: 2px; min-width: 90px;
  background: linear-gradient(90deg, rgb(55,105,255), #fff 50%, rgb(255,85,45)); }
#compare-mode button { font-size: 10px; }

/* --- The pressure-level bar -------------------------------------------------
   Levels are numbers in a row, so they get a monospace figure and a fixed minimum
   width: proportional digits make "1000" and "150" different enough widths that the
   row visibly reflows as the selection moves between parameters with different level
   sets, which reads as the control redrawing itself rather than as a selection
   changing. The unit is printed once at the end of the row instead of on fourteen
   chips. */
#levels .field-btn {
  font-variant-numeric: tabular-nums;
  min-width: 3.4em;
  text-align: center;
}
#levels .chip-unit {
  align-self: center;
  margin-left: 6px;
  font-size: 11px;
  letter-spacing: .06em;
  opacity: .62;
}
/* A parameter chip stands for a family of fields rather than one, and the level bar
   under it is the rest of the control. The underline ties the two together without
   inventing a second colour. */
.field-btn.field-param.on { text-decoration: underline; text-underline-offset: 3px; }