/* explorer-lite.css — the merged explorer's point view, compare plate and phone sheet
 * for a page that keeps its own stylesheet rather than the canonical explorer.css
 * (which lays out Forecast Eagle's whole explorer and carries page-wide rules this site
 * does not want). The point-view and compare rules below are copied verbatim from
 * forecasteagle assets/explorer.css (the block between "the point view" and "the grouped
 * field picker"); they read the network's shared tokens (--card, --ink, --sign, --blue,
 * --line, --mono-font), which this site's stylesheet defines. The sheet at the end is
 * this page's own. Site-owned; the same file on every site that loads xpfeatures.js.
 */
:root { --figure-line: rgba(255,255,255,.18); }

/* ── 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: #b7c6d8; }
.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; }

.probe-ab { color: #ffd479; font: 800 11px var(--mono-font); letter-spacing: 0; }
.probe-sp { color: #9fe0ff; font: 800 12px var(--mono-font); }
#compare-span { font-size: 10.5px; padding: 3px 5px; }

/* The meteogram rows (Forecast Euro's point view; drawn by any page that hands
   mappoint.js a field list) under the headline chart, and the hover readout above it. */
.pp-row { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 8px; align-items: center;
          border-top: 1px solid var(--line2); padding-top: 4px; margin-top: 4px; }
.pp-rowlab { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pp-rowlab b { font-size: 11px; font-weight: 800; color: var(--ink2); line-height: 1.15; }
.pp-rowlab span { font-size: 10px; font-weight: 700; color: var(--mut); letter-spacing: .04em; }
.pp-rowlab em { font: 900 14px var(--mono-font); color: var(--blue); font-style: normal; }
.pp-chart.pp-small { height: 64px; }
.pp-bar { fill: var(--sign); opacity: .75; }
.pp-run { fill: none; stroke-width: 1.6; stroke-dasharray: 5 3; opacity: .85; }
.pp-hover { stroke: var(--ink2); stroke-width: 1; stroke-dasharray: 2 2; pointer-events: none; }
.pp-tip { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11px; font-weight: 600;
          color: var(--ink2); padding: 4px 0 2px; }
.pp-tip b { font-family: var(--mono-font); color: var(--ink); }
.pp-runs { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 10.5px; font-weight: 700;
           color: var(--ink2); margin: 2px 0 4px; }
.pp-runs i { display: inline-block; width: 14px; height: 3px; margin-right: 5px; vertical-align: middle;
             border-radius: 2px; }
.pp-tools .btn.on { background: var(--sign); color: #fff; border-color: var(--sign-dk); }
@media (max-width: 700px) { .pp-row { grid-template-columns: 84px minmax(0, 1fr); } .pp-tip { display: none; } }
/* The per-step / run-total switch sits in the stage's title card, which does not take
   the pointer; the switch must. */
.accum-toggle { pointer-events: auto; margin-top: 5px; }
.accum-toggle button { font-size: 9.5px; padding: 3px 6px; }

/* The ensemble plume in the point view, and the members' calendar under it. */
.pp-member { fill: none; stroke: #6b7480; stroke-width: .7; opacity: .35; }
.pp-band { fill: var(--sign); opacity: .16; stroke: none; }
.pp-median { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-dasharray: 4 3; }
.pp-stats { font-size: 11px; font-weight: 600; color: var(--ink2); margin: 2px 0 4px; line-height: 1.6; }
.pp-stats b { font-family: var(--mono-font); color: var(--ink); }
.pp-cal { display: block; width: 100%; max-width: 560px; height: auto; margin: 8px 0 4px; }
.pp-cal-title { font: 800 9px var(--font); fill: var(--ink2); }
.pp-cal-day { font: 700 6.5px var(--mono-font); fill: var(--mut); }
.pp-cal-lab { font: 700 6px var(--mono-font); fill: var(--mut); }
.pp-cal-foot { font: 600 6px var(--font); fill: var(--mut); }


/* ── the compare controls in this page's bar ─────────────────────────────── */
.xp-cmp-ctl { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.xp-cmp-ctl select { max-width: 190px; }
#compare-note { font-size: 11px; font-weight: 600; color: var(--mut); }
.point-panel[hidden] { display: none; }

/* ── the phone sheet (mapchrome.js wires it) ──────────────────────────────
   Above 700px the drawer is just the box the control bars sit in, as they always did.
   At a phone's width it becomes a docked sheet over the map, opened by MAP OPTIONS and
   closed by its CLOSE, the scrim or Escape; mapchrome.js locks the page under it and
   moves the focus. */
.drawer-head, .drawer-toggle { display: none; }
.drawer-scrim { display: none; }
@media (max-width: 700px) {
  .drawer-toggle { display: inline-flex; margin: 10px 0 0; }
  #drawer.drawer-lite {
    display: none; position: fixed; z-index: 102; left: 0; right: 0; bottom: 0; top: auto;
    max-height: 56vh; max-height: 56dvh; overflow: auto; margin: 0;
    background: var(--paper2, var(--card)); border-top: 4px solid var(--sign);
    border-radius: 12px 12px 0 0; box-shadow: 0 -10px 44px rgba(0,0,0,.35);
    padding: 4px 10px max(12px, env(safe-area-inset-bottom));
  }
  #drawer.drawer-lite.open { display: block; }
  #drawer.drawer-lite .drawer-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 8px 2px 6px; position: sticky; top: -4px; background: inherit; z-index: 1;
  }
  #drawer.drawer-lite .drawer-head span { font-size: 10.5px; font-weight: 800; letter-spacing: .12em;
    text-transform: uppercase; color: var(--sign); }
  body.drawer-open .drawer-scrim { display: block; position: fixed; inset: 0; z-index: 101;
    background: rgba(0,0,0,.38); }
}