/* Forecast Eagle — the explorer in the legacy viewer's shell.
 *
 * Two viewers grew up side by side. The Forecast Explorer is a *document*: a page of
 * chips above a map, an options panel beside it, a legend and an article under it,
 * all of which scroll. The legacy viewer is an *instrument*: one screenful, a rail of
 * run controls across the top, the field list down the left, the region bar over a
 * map that takes every remaining pixel, the transport under it — the layout every
 * model site converged on, because a reader who has the page open all afternoon
 * wants every control on screen and the map as big as the window.
 *
 * The explorer had the better map (free camera, 3D terrain, the region frame, compare,
 * contours, exports) and the legacy page had the better room. This stylesheet puts the
 * first inside the second. It is loaded *after* explorer.css and legacy.css on a page
 * whose body carries `lab-page dash`:
 *
 *   legacy.css     the shell — rail, side, region bar, timeline matte, narrow-screen
 *                  rules — through the same `l*` class names the legacy pages use
 *   explorer.css   every component the viewer modules draw — plates, compass, stage
 *                  tools, the lock's veil and pill, the hour strip, the locator, the
 *                  point panel, the drawer's groups
 *   this file      the seams: the explorer's components re-densified for the shell,
 *                  and the few shell rules the explorer's document layout contradicts
 *
 * Not one element id moves. rrfs.js and the shared modules look elements up by id and
 * by four class hooks (`.stage-wrap`, `.deck-main`, `.field-btn`, `[data-lock]`), and the
 * markup keeps all of them, so the viewer does not know which shell it is in.
 *
 * Specificity note: `#lab #stage` (two ids) is used where explorer.css sets the stage's
 * height inside media queries — a media query adds nothing to specificity, so two ids
 * beat its one at every width without `!important`.
 */

/* ── the shell: one screen for the instrument, the article below it ────────────
   legacy.css makes the whole body one locked screen (nothing scrolls). Here the shell
   is the first screenful and the facts strip and the article keep their place under
   it, so the page is still the document a search result lands on — it just opens on
   the instrument. The utility bar stays sticky, as on every other page. */
body.lab-page.dash { height: auto; overflow: visible; display: block; }
body.lab-page.dash .util { position: sticky; z-index: 100; }
.dash #lab {
  height: calc(100dvh - var(--utilbar-h));
  min-height: 520px;
  display: flex; flex-direction: column;
  border-bottom: 2px solid var(--sign);
}
.dash #lab > .lrail { flex: none; }
.dash #lab > .lbody { flex: 1 1 auto; min-height: 0; }
.dash #lab:fullscreen, .dash #lab:-webkit-full-screen {
  height: 100dvh; min-height: 0; padding: 0; overflow: hidden; background: var(--paper);
}
/* What sits under the instrument: the mileage-marker facts and the article. */
.dash-below { padding-top: 14px; padding-bottom: 28px; }
.dash-below .facts { margin-top: 0; }

/* The page's h1 is for the document outline and search; the rail's brand is the one
   the reader sees (mapchrome.js reads `.lbrand b` for the view title). */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── rail ─────────────────────────────────────────────────────────────────── */
.dash .lrail { min-height: 42px; }
.dash .lbrand .badge { font-size: 9px; padding: 2px 6px; letter-spacing: .1em; border-radius: 2px; }
/* The domain chips rrfs.js renders are `.btn.domain-btn`; in the rail they are the
   legacy segment bar — flat, and the chosen one in the sign's green. */
/* rrfs.js hides the domain chips' *parent* when the product has one domain; in the rail
   that parent must be a wrapper of its own, or the whole rail goes with it (it did). */
.dash #domain-group { display: flex; align-items: center; }
.dash #domains, .dash #models { gap: 2px; }
/* The sibling sites' model picker (#models, canada.js lineage and the Euro pages) is
   the same segment bar; their two-line route-marker button reads on one line here. */
.dash #models { display: flex; align-items: center; flex-wrap: nowrap; }
.dash #models .model-btn { flex-direction: row; align-items: baseline; gap: 6px; }
.dash #models .model-btn .mb-name { font-size: 11px; }
.dash #models .model-btn .mb-res { font-size: 9px; }
.dash #domains .btn, .dash #members .btn, .dash #models .btn {
  padding: 5px 10px; border: 0; border-radius: 2px; background: none;
  font-weight: 800; font-size: 11px; letter-spacing: .05em; color: var(--ink2); white-space: nowrap;
}
.dash #domains .btn:hover, .dash #members .btn:hover, .dash #models .btn:hover:not(:disabled) { background: var(--line2); color: var(--ink); }
.dash #models .btn:disabled { opacity: .38; }
.dash #domains .btn.on, .dash #domains .btn[aria-pressed="true"],
.dash #members .btn.on, .dash #members .btn[aria-pressed="true"],
.dash #models .btn.on, .dash #models .btn[aria-pressed="true"] {
  background: var(--sign); color: var(--sign-tx); border-color: var(--sign);
}
.dash #models .model-btn.on .mb-res { color: var(--sign-tx); opacity: .8; }
.dash #members-group, .dash #levelgroup { display: flex; align-items: center; gap: 4px; }
.dash #levelgroup[hidden] { display: none; }
.dash #levelgroup .lk { font-size: 9px; font-weight: 900; letter-spacing: .12em; color: var(--mut); padding: 0 4px 0 8px; }
.dash #levelgroup .chips { display: flex; gap: 2px; flex-wrap: nowrap; }
.dash #levelgroup .btn { padding: 5px 8px; border: 0; border-radius: 2px; background: none; font-weight: 800; font-size: 11px; color: var(--ink2); white-space: nowrap; }
.dash #levelgroup .btn.on, .dash #levelgroup .btn[aria-pressed="true"] { background: var(--sign); color: var(--sign-tx); }
.dash #members-group .lk { font-size: 9px; font-weight: 900; letter-spacing: .12em; color: var(--mut); padding: 0 4px 0 8px; }
.dash #members { display: flex; gap: 2px; }
.dash .lfield select { max-width: 200px; }
.dash .lfield .lbtn.mini { padding: 4px 6px; }
.dash .licons .lbtn { padding: 5px 8px; }
#copy-link.done { border-color: var(--sign); color: var(--sign); }
.dash .lexport { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
/* The views popover is anchored to its button by mapchrome.js; the rail clips its
   overflow, so legacy.css fixes it under the rail. Same here. */
.dash .fe-views { position: fixed; top: calc(var(--utilbar-h) + 48px); right: 8px; z-index: 210; }
/* OPTIONS lives in the rail at every width (explorer.css hides .drawer-toggle on a
   wide screen, where its drawer was always open — here it is a column that opens). */
.dash #drawer-toggle { display: inline-block; }
.dash #drawer-toggle[aria-expanded="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }

/* The status line (errors, "this browser has WebGL disabled") — in the instrument
   column, not between the rail and the body where it would push the map. */
.dash #status { margin: 0; border-radius: 0; border-width: 0 0 1px; }

/* ── side: the field list ──────────────────────────────────────────────── */
.dash .lside-head { display: grid; gap: 3px; }
.dash .lsub { font-size: 9.5px; font-weight: 800; letter-spacing: .1em; color: var(--mut); text-transform: uppercase; }
.dash .lside-head #domain-note, .dash .lside-head #member-note, .dash .lside-head #model-note { font-size: 10.5px; max-width: none; font-weight: 700; }
.dash .lside-head #domain-note:empty, .dash .lside-head #member-note:empty, .dash .lside-head #model-note:empty { display: none; }
/* Chips become rows. explorer.css lays `#fields.chips` as a wrapping strip; the side
   wants one field per line, the swatch at the left, the chosen one in green. */
.dash #fields.chips, .dash #elements.chips {
  display: flex; flex-direction: column; align-items: stretch; gap: 1px; padding: 5px;
  flex-wrap: nowrap; overflow: visible;
}
.dash #fields .field-btn, .dash #elements .element-btn {
  display: flex; align-items: center; width: 100%; text-align: left;
  padding: 6px 8px; border: 0; border-radius: 2px; background: none;
  font-size: 12px; font-weight: 700; color: var(--ink2); white-space: normal; line-height: 1.25;
}
.dash #fields .field-btn:hover, .dash #elements .element-btn:hover { background: var(--line2); color: var(--ink); }
.dash #fields .field-btn.on, .dash #fields .field-btn[aria-pressed="true"],
.dash #elements .element-btn.on, .dash #elements .element-btn[aria-pressed="true"] {
  background: var(--sign); color: var(--sign-tx);
}
.dash #fields .field-btn .sw { flex: none; width: 18px; height: 7px; margin-right: 8px; vertical-align: 0; }
/* Grouped (REFS): the group label becomes the legacy shelf heading. */
.dash #fields.fields-grouped { gap: 4px; }
.dash #fields .field-group { display: flex; flex-direction: column; align-items: stretch; gap: 1px; flex-wrap: nowrap; }
.dash #fields .field-group-label {
  font-size: 9.5px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase;
  color: var(--mut); min-width: 0; padding: 7px 4px 3px; position: static;
}
/* WPC's element picker is sections, then rows of thresholds (wpc.js, styled inline on
   the page for the chip strip). In the side it is a shelf: section tabs wrapping at the
   top, each row's label a heading, each threshold a row. */
.dash #elements .wpc-sections { display: flex; flex-wrap: wrap; gap: 3px; padding: 2px 3px 6px; }
.dash #elements .wpc-sections .section-btn {
  font-size: 10px; padding: 4px 7px; border-radius: 2px; border: 1px solid var(--line); background: var(--card);
  font-weight: 900; letter-spacing: .04em; color: var(--ink2);
}
.dash #elements .wpc-sections .section-btn.on, .dash #elements .wpc-sections .section-btn[aria-pressed="true"] {
  background: var(--sign); border-color: var(--sign); color: var(--sign-tx);
}
.dash #elements .wpc-rows { display: flex; flex-direction: column; gap: 4px; border-left: 0; padding-left: 0; }
.dash #elements .wpc-row { display: flex; flex-direction: column; align-items: stretch; gap: 1px; }
.dash #elements .wpc-row-label {
  font-size: 9.5px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase;
  color: var(--mut); min-width: 0; flex-basis: auto; padding: 7px 4px 3px;
}
.dash #elements .wpc-row .btn { padding: 6px 8px; font-size: 12px; }
/* The "pending" line NDFD shows while an element is still being published. */
.dash .lside-head #pending { font-size: 10.5px; max-width: none; }
.dash .lside-head #pending:empty { display: none; }
/* Product links that followed the field description (NCEP's GFS page, weather.gov's
   element, WPC) keep their place under it. */
.dash .lopts .lmore { font-size: 11px; font-weight: 800; margin-top: 4px; }
.dash .lopts .lmore a { color: var(--navy); }
.dash .lside .lopts:has(.d:empty) { display: grid; }
.dash .lopts .d { font-size: 11.5px; font-weight: 600; color: var(--ink2); line-height: 1.45; }
.dash .lopts .d:empty { display: none; }

/* ── the instrument column ─────────────────────────────────────────────── */
/* Region bar: #sectors is a column of grouped rows on the explorer page; here it is
   one scrolling row, with legacy.css's `.lregion-scroll .sector-group` rules shelving
   the groups and dropping the chips this domain cannot show. */
.dash .lregion-scroll #sectors {
  display: flex; flex-direction: row; align-items: center; gap: 0; flex-wrap: nowrap; max-width: none;
}
.dash .lregion-scroll #regions {
  display: flex; flex-direction: row; align-items: center; gap: 0; flex-wrap: nowrap; max-width: none;
}
.dash .lregion-scroll .sector-group { flex-wrap: nowrap; }
/* mapplaces.js (the canada.js lineage: Canada, the Nordic and country sites) renders
   #places > .place-group > .place-btn — the same shelf, under legacy.css's sector rules. */
.dash .lregion-scroll #places {
  display: flex; flex-direction: row; align-items: center; gap: 0; flex-wrap: nowrap; max-width: none;
}
.dash .lregion-scroll .place-group { display: flex; align-items: center; gap: 3px; flex: none; flex-wrap: nowrap; }
.dash .lregion-scroll .place-group + .place-group { margin-left: 8px; padding-left: 8px; border-left: 1px solid var(--line2); }
.dash .lregion-scroll .place-group-label {
  font-size: 8.5px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase;
  color: var(--mut); white-space: nowrap; min-width: 0;
}
.dash .lregion-scroll .place-btn {
  font: inherit; font-size: 11px; font-weight: 800; letter-spacing: .04em;
  padding: 5px 9px; border: 1px solid var(--line); border-radius: 2px;
  background: var(--card); color: var(--ink2); cursor: pointer; white-space: nowrap; flex: none;
}
.dash .lregion-scroll .place-btn:hover:not(:disabled) { border-color: var(--sign); color: var(--sign); }
.dash .lregion-scroll .place-btn.on, .dash .lregion-scroll .place-btn.on:hover { background: var(--sign); border-color: var(--sign); color: var(--sign-tx); }
.dash .lregion-scroll .place-btn:disabled { display: none; }
.dash .lregion-scroll .place-group:not(:has(.place-btn:not(:disabled))) { display: none; }
.dash .lregion-tail .place-selects { display: flex; gap: 3px; }
/* legacy.css's hover (green ink) outranks its `.on` (green ground): the chip just
   pressed went green-on-green under the pointer. */
.dash .lregion-scroll .sector-btn.on:hover, .dash .lregion-scroll .sector-btn[aria-pressed="true"]:hover { color: var(--sign-tx); }
.dash .lregion-scroll .sector-group-label { min-width: 0; }
.dash .lregion-tail .fe-search input[type="search"] { min-width: 0; }
.dash .lregion-tail #reset-view { font-size: 10px; padding: 5px 7px; }
/* The Euro pages' polar links (ecmwf.js buildPolarLinks) and the projection menu ride the tail. */
.dash .lregion-tail #polar-links { display: flex; gap: 3px; }
.dash .lregion-tail #polar-links a, .dash .lregion-tail #polar-links .btn {
  font: inherit; font-size: 10px; font-weight: 800; letter-spacing: .04em; padding: 5px 7px;
  border: 1px solid var(--line); border-radius: 2px; background: var(--card); color: var(--ink2); text-decoration: none; white-space: nowrap;
}
.dash .lregion-tail #polar-links:empty { display: none; }
.dash .lregion-tail select { max-width: 150px; }

/* Breadcrumb + drill row — dashboard.js hides it at the national level, where the
   children are the chips in the bar above. */
.dash .ldrill.navbar { flex-direction: row; margin: 0; }
.dash .ldrill .crumbs { flex-wrap: nowrap; }

/* The stage fills what is left. explorer.css gives #stage a clamped height in three
   media blocks and the wrap a card's radius and shadow; two ids undo both at every
   width. */
/* `width: 100%` is load-bearing: mapframe.js sets `margin-inline: auto` on the wrap,
   and in the instrument's flex column an auto-margined item with no width of its own
   shrinks to its content — which is nothing, every child being absolutely positioned.
   With a chosen output shape mapframe also caps the wrap's max-width, and the auto
   margins then centre it, as intended. */
.dash .lstage-wrap.stage-wrap {
  width: 100%; border: 0; border-radius: 0; box-shadow: none; background: var(--figure);
  display: flex; align-items: center; justify-content: center;
}
#lab #stage { position: absolute; inset: 0; width: auto; height: auto; min-height: 0; }
/* An output shape chosen (mapframe.js sets an inline aspect-ratio and height:auto):
   the stage is the largest box of that shape inside the wrap, centred, so an export
   is the shape asked for and the frame still fits the screen. */
#lab #stage[style*="aspect-ratio"] {
  position: relative; inset: auto; width: auto; flex: 0 1 auto; align-self: stretch;
  max-width: 100%; margin: 0 auto;
}
.dash .lstage-wrap.is-dropping { box-shadow: inset 0 0 0 3px var(--blue); }
/* The free map keeps MapLibre's grab cursor (legacy.css forces a crosshair on its
   locked stage; the `.lstage` class is deliberately not used here). */
.dash #stage .maplibregl-ctrl-bottom-right { margin-bottom: 0; }

/* Plates over the map, in the legacy's tighter register. */
.dash .stage-overlay { padding: 5px 8px; font-size: 11px; border-radius: 2px; }
.dash .ov-title { font-size: 13px; }
.dash .ov-sub { font-size: 10.5px; }

/* The legend rides the bottom of the map (legacy's `.lscale`), with the explorer's own
   bar/ticks/units markup from rrfs.js drawLegend. */
#lab #legend {
  position: absolute; left: 8px; bottom: 28px; z-index: 3; pointer-events: none;
  width: min(560px, calc(100% - 240px)); min-width: 0; flex: none;
}
#lab #legend .legend-bar { height: 11px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 1px; }
#lab #legend .legend-ticks { height: 13px; margin-top: 1px; }
#lab #legend .legend-ticks span { font-size: 9.5px; color: #e6e3dc; text-shadow: 0 1px 2px #000; }
#lab #legend .legend-units { color: #e6e3dc; text-shadow: 0 1px 2px #000; margin-top: 0; }
#lab #legend:empty { display: none; }
/* WPC's categorical legends (Excessive Rainfall Outlook, WSSI) are read by name; over
   the dark map the names go light like the ticks. */
#lab #legend .legend-classes .lc { color: #e6e3dc; text-shadow: 0 1px 2px #000; }
/* The frame's letterbox: the legend docks to the frame's corner like the plates do. */
.dash .stage-wrap.is-letterboxed #legend { bottom: calc(var(--fb, 0px) + 28px); left: calc(var(--fx, 0px) + 8px); }
/* The compass sits top-centre over the map (legacy.css); the lock's SNAP TO pill wants
   the same spot on a free map, so the pill steps down under it. */
.dash .fe-lockpill { top: 46px; }

/* The point view floats over the map (legacy.css `.lstage-wrap .point-panel`); the
   explorer's card chrome is kept, its margin is not. */
.dash .lstage-wrap .point-panel { margin-top: 0; }

/* ── timeline: the explorer's strip, in the legacy's matte ─────────────── */
.dash .timeline.ltimeline {
  margin: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none;
  padding: 6px 10px 4px; gap: 10px 16px; align-items: center; background: var(--card);
}
.dash .ltimeline .tl-side { gap: 3px; }
.dash .ltimeline .tl-lab { display: none; }
.dash .ltimeline .tl-transport .btn { padding: 5px 8px; font-size: 12px; line-height: 1; border-radius: 2px; }
.dash .ltimeline #play { min-width: 64px; background: var(--sign); border-color: var(--sign); color: var(--sign-tx); }
.dash .ltimeline #fhr-label, .dash .ltimeline #step-label { font-size: 15px; }
.dash .ltimeline .tl-track { flex: 1 1 420px; }
.dash .ltimeline .tl-ticks { height: 20px; }
.dash .ltimeline .tl-ends { margin-top: -2px; }
.dash .ltimeline .seg button { padding: 4px 7px; font-size: 10px; }
.dash .ltimeline .tl-count { font-size: 12px; }
.dash .ltimeline .tl-load { margin-top: 0; }
.dash .tl-hint.lhint { margin: 0; font-size: 9.5px; }

/* ── the options drawer: a third column that opens, at every width ──────────
   On the explorer page the drawer is always beside the map on a wide screen and a
   sheet over it on a narrow one (explorer.css, below 1180px). Here the wide screen
   gets a column that opens from OPTIONS in the rail — the map keeps the room until an
   option is wanted — and the narrow rules are unchanged. mapchrome.js toggles `.open`
   on the drawer and `drawer-open` on the body, which is all these need. */
.dash .lbody { grid-template-columns: 236px minmax(0, 1fr); }
@media (min-width: 1181px) {
  .dash .drawer { display: none; }
  .dash .drawer.open {
    display: block; position: static; max-height: none; min-height: 0; overflow-y: auto;
    border: 0; border-left: 1px solid var(--line); border-radius: 0; box-shadow: none;
    padding: 0 12px 14px; background: var(--card);
  }
  body.drawer-open .dash-drawer-col, body.drawer-open .lbody { grid-template-columns: 236px minmax(0, 1fr) 300px; }
  /* The head is the column's own (a sibling site's stylesheet may hide it on a wide
     screen, where its drawer was a toolbar): shown, styled, and sticky. */
  /* `#drawer` in the selector on purpose: Norway's explorer-lite.css hides the head
     with `#drawer .drawer-head`, and an id outranks any number of classes. */
  .dash #drawer .drawer-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    position: sticky; top: 0; z-index: 2; background: var(--card);
    padding: 10px 0 6px; margin-bottom: 4px; border-bottom: 1px solid var(--line2);
  }
  .dash #drawer .drawer-head span { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
  .dash #drawer .drawer-head .btn { display: inline-block; padding: 3px 8px; font-size: 11px; }
}
/* The sheet's own ground (a sibling site's stylesheet styles its drawer through the
   toolbar class the shell no longer carries, so the sheet was see-through). */
.dash #drawer { background: var(--card); color: var(--ink); }
.dash .drawer .group { padding: 8px 0; }
.dash .drawer select { font-size: 10.5px; padding: 4px 6px; }
.dash .drawer .btn { font-size: 10.5px; padding: 4px 8px; }

/* ── narrow screens ────────────────────────────────────────────────────────
   legacy.css already turns the side into an off-canvas panel below 900px (`#btn-fields`
   opens it; dashboard.js wires that) and lets the rail scroll sideways. What is left
   is the explorer's own phone rules that assume the document layout. */
@media (max-width: 900px) {
  .dash .lbody { grid-template-columns: minmax(0, 1fr); }
  .dash #lab { min-height: 420px; }
  .dash .lside { padding-top: 0; }
  .dash .lside[data-open="true"] { transform: none; }
  /* The side panel's own close row, drawn by dashboard.js. */
  .lside-close { display: flex; justify-content: flex-end; padding: 6px 7px 0; }
  .dash .lregionbar { grid-template-columns: auto minmax(0, 1fr); }
  .dash .lregion-tail { display: none; }
  .dash .ldrill { display: none; }
}
@media (max-width: 1180px) {
  /* The sheet, stated by the shell: explorer.css gives `.drawer` these rules, but the
     explorer-lite sites address theirs as `#drawer.toolbar` — a class the shell's
     drawer does not carry — and Norway's drawer sat in flow over the map. Same
     numbers as explorer.css (mapchrome.js BP.NARROW / BP.PHONE), id-anchored. */
  .dash #drawer {
    display: none; position: fixed; z-index: 102;
    right: 12px; bottom: 12px; top: auto; left: auto; width: min(420px, calc(100vw - 24px));
    max-height: 70vh; max-height: 70dvh; margin: 0; overflow: auto;
    padding: 4px 13px 12px; border: 0; border-top: 4px solid var(--blue); border-radius: 4px;
    box-shadow: 0 -10px 44px rgba(0, 0, 0, .35);
  }
  .dash #drawer.open { display: block; }
  .dash #drawer .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;
  }
  .dash #drawer .drawer-head span { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
  .dash #drawer .drawer-head .btn { display: inline-block; padding: 3px 8px; font-size: 11px; }
  .dash #drawer .group { padding: 9px 0; border-bottom: 1px solid var(--line2); }
  .dash #drawer .group:last-child { border-bottom: 0; }
  .dash .drawer-scrim { display: none; }
  body.drawer-open .dash .drawer-scrim, body.dash.drawer-open .drawer-scrim {
    display: block; position: fixed; inset: 0; z-index: 101; background: rgba(10, 14, 20, .45);
  }
  /* A narrower instrument column: the track gives way first, so the strip stays on
     one row with the transport rather than wrapping under it. */
  .dash .ltimeline .tl-track { flex-basis: 260px; min-width: 200px; }
  .dash .ltimeline { gap: 6px 12px; }
}
/* The floating OPTIONS button over the map: explorer.css positions it on a phone, but a
   sibling site without explorer.css would leave it in flow under the absolute stage,
   where the canvas eats its taps. Stated here for every page in the shell. */
.dash .stage-wrap .stage-options { display: none; }
@media (max-width: 700px) {
  .dash .stage-wrap .stage-options {
    display: inline-block; position: absolute; z-index: 6; right: 10px; bottom: 62px;
    font-size: 10.5px; padding: 6px 10px; box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
  }
}
@media (max-width: 700px) {
  /* Docked, full width, a little over half the screen (explorer.css's numbers). */
  .dash #drawer {
    right: 0; left: 0; bottom: 0; width: auto;
    max-height: 56vh; max-height: 56dvh; border-radius: 12px 12px 0 0;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
  body.dash.drawer-open .drawer-scrim { background: rgba(0, 0, 0, .38); }
  /* explorer.css hides the top-left plate's title on a phone (the chip was the field
     name); in the shell the chip is behind the ☰ so the plate stays. */
  .dash .ov-tl > .ov-title, .dash .ov-tl > .ov-sub { display: block; }
  .dash .ov-tl { display: block; }
  /* The phone's timeline is transport, scrubber and strip. Speed, loop end and dwell
     are keyboard and desktop matters; LOAD ALL stays, because a lean device holds
     back frames until asked. */
  .dash .ltimeline #speed, .dash .ltimeline .tl-loopside { display: none; }
  .dash .ltimeline .tl-track { flex-basis: 100%; }
  .dash .ltimeline .tl-side:has(#speed) { flex-direction: row; align-items: center; gap: 8px; }
  /* explorer.css keeps only the national row on a phone (the regional rows were the
     drill chips under the map); in the shell the bar scrolls, so every row shows. */
  .dash #sectors .sector-group:not(:first-child) { display: flex; }
  .dash #places .place-group:not(:first-child) { display: flex; }
  #lab #legend { width: calc(100% - 16px); bottom: 58px; }
  .dash .lsub { display: none; }
}
@media (pointer: coarse) {
  .dash .lrail .lbtn, .dash .lrail select, .dash .lregion-tail .lbtn { min-height: 36px; }
  .dash .lrail .lbtn.mini { min-width: 32px; }
  .dash .lregion-scroll .sector-btn, .dash .lregion-scroll .place-btn { min-height: 36px; padding: 8px 11px; }
  .dash #fields .field-btn, .dash #elements .element-btn { min-height: 38px; }
}
@media (min-width: 901px) { .dash .lside-close { display: none; } }