/* The merged explorer's features on this site's page: the map-options drawer (a sheet on
 * narrow screens), COPY LINK, the point view, compare & verify, and the CARD export.
 *
 * Site-owned. The rules are Forecast Eagle's assets/explorer.css (the network's shared
 * explorer chrome, at the explorer merge) for the components the shared modules render
 * — mappoint.js, mapcompare-engine.js, mapchrome.js — cut to what this page carries and
 * fitted to its layout: here the map options are a toolbar above the map rather than a
 * side drawer, so on a wide screen the "drawer" simply is that toolbar, and below 1180px
 * (mapchrome.js BP.NARROW) it becomes the same fixed sheet over the map, opened by MAP
 * OPTIONS. Colours come from this site's own tokens (--card, --line, --sign, --blue…).
 * Light paper throughout, whatever the reader's colour-scheme preference.
 */

/* ── title-bar tools: copy link, and the drawer's opener on narrow screens ── */
.title-tools { margin-left: auto; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
#copy-link.done { background: var(--sign); color: #fff; border-color: var(--sign-dk); }
.drawer-toggle { display: none; }

/* ── the drawer: the map-options toolbar ── */
.toolbar.primary { margin-bottom: 8px; }
.drawer-head { display: none; }
.drawer-scrim { display: none; }
#compare-note { font-size: 10.5px; font-weight: 600; color: var(--ink2); max-width: 260px; }
#compare-note:empty { display: none; }
#compare-mode button { font-size: 10px; }
#compare-span { font-size: 10.5px; padding: 3px 5px; }
#compare-with { font-size: 11px; padding: 5px 7px; max-width: 220px; }
#card-shape { font-size: 11px; padding: 5px 7px; }

@media (max-width: 1180px) {
  .drawer-toggle { display: inline-block; }
  /* The drawer floats over the map rather than pushing it down the page, so a changed
     option is visible the moment it is changed; mapchrome.js adds the scroll lock and
     moves the focus. Above the sticky utility bar. */
  #drawer {
    display: none; position: fixed; z-index: 102;
    right: 12px; bottom: 12px; top: auto; width: min(420px, calc(100vw - 24px));
    max-height: 70vh; max-height: 70dvh; margin: 0; overflow: auto;
    flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0;
    padding: 4px 13px 12px; border-top: 4px solid var(--blue);
    box-shadow: 0 -10px 44px rgba(0, 0, 0, .35);
  }
  #drawer.open { display: flex; }
  #drawer .group { padding: 9px 0; border-bottom: 1px solid var(--line2); }
  #drawer .group:last-child { border-bottom: 0; }
  .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 { padding: 3px 8px; font-size: 11px; }
  body.drawer-open .drawer-scrim { display: block; position: fixed; inset: 0; z-index: 101;
                                   background: rgba(10, 14, 20, .45); }
}

@media (max-width: 700px) {
  /* Docked full width, no taller than a little over half the screen, so the upper half
     of the map stays in view while an option changes. */
  #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.drawer-open .drawer-scrim { background: rgba(0, 0, 0, .38); }
  .compare-label { max-width: 45%; bottom: 36px; }
  .title-tools { margin-left: 0; }
}

/* A phone held sideways: the sheet docks right, full height. */
@media (pointer: coarse) and (max-height: 520px) {
  #drawer {
    top: 0; bottom: 0; right: 0; left: auto; width: min(360px, 60vw);
    max-height: none; border-radius: 12px 0 0 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-tools .btn.on { background: var(--sign); color: #fff; border-color: var(--sign-dk); }
.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; }
.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; }
@media (max-width: 700px) {
  .pp-chart { height: 150px; } .pp-ext { display: none; }
  .pp-row { grid-template-columns: 84px minmax(0, 1fr); } .pp-tip { display: none; }
}

/* ── compare & verify (mapcompare-engine.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)); }
.probe-ab { color: #ffd479; font: 800 11px var(--mono-font); letter-spacing: 0; }

/* ── coarse pointers: thumb-sized controls in the sheet ── */
@media (pointer: coarse) {
  #drawer .btn, #drawer select { min-height: 36px; }
}