:root { --hrrr: #1565c0; --derived: #6a1b9a; --composite: #b8860b; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: system-ui, sans-serif; }
#app { display: flex; height: 100vh; position: relative; }

label.inline { display: flex; align-items: center; gap: 6px; font-weight: 400; font-size: 12px; margin: 8px 0 0; }
label.inline input { width: auto; padding: 0; }

#hover {
  position: fixed; top: 14px; right: 14px; z-index: 5; pointer-events: none;
  background: rgba(255,255,255,.95); border: 1px solid #ccc; border-radius: 5px;
  padding: 8px 10px; font-size: 12px; box-shadow: 0 1px 6px rgba(0,0,0,.2);
  max-width: 280px; line-height: 1.5;
}
#hover .hover-head { font-weight: 700; margin-bottom: 4px; border-bottom: 1px solid #eee; padding-bottom: 3px; }
#hover .pass { color: #1b5e20; }
#hover .fail { color: #b71c1c; }

/* On-map status pill: top-left, tracks panel width like #map-legend.
   Red so "Reading data…" / errors are immediately visible against any
   basemap; hides itself when empty. */
#status {
  position: fixed; top: 12px; left: calc(var(--panel-w, 380px) + 22px); z-index: 5;
  margin: 0; padding: 4px 10px; max-width: 50%;
  background: rgba(255,255,255,.94); color: #c62828; border: 1px solid #f4c7c7;
  border-radius: 4px; font-size: 12px; font-weight: 600;
  box-shadow: 0 1px 4px rgba(0,0,0,.15); pointer-events: none;
}
#status:empty { display: none; }

/* on-map legend: active ingredients (with provenance) + count color scale */
#map-legend {
  /* Track the resizable panel so the legend stays anchored to the map's
     left edge instead of overlapping the sidebar at wider panel widths. */
  position: fixed; bottom: 16px; left: calc(var(--panel-w, 380px) + 22px); z-index: 5;
  background: rgba(255,255,255,.94); border: 1px solid #ccc; border-radius: 6px;
  padding: 8px 10px; font-size: 12px; max-width: 330px; box-shadow: 0 1px 6px rgba(0,0,0,.2);
}
#map-legend .ml-title { font-weight: 700; margin-bottom: 1px; }
#map-legend .ml-valid { color: #555; font-size: 11px; margin-bottom: 4px; }
#map-legend .ml-ing { line-height: 1.7; }
#map-legend .ml-sub { font-weight: 700; margin: 6px 0 2px; border-top: 1px solid #eee; padding-top: 5px; }
.prov { display: inline-block; width: 11px; height: 11px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.prov-hrrr { background: var(--hrrr); }
.prov-calc { background: var(--derived); }
.prov-tag { font-size: 9px; color: #999; text-transform: uppercase; }

#panel {
  width: var(--panel-w, 380px); flex: 0 0 var(--panel-w, 380px); padding: 16px; overflow-y: auto;
  background: #fafafa; border-right: 1px solid #ddd; font-size: 14px;
}
/* Drag handle to resize the panel (width persists in localStorage). */
#panel-resize {
  flex: 0 0 6px; cursor: col-resize; background: #e6e6e6;
  transition: background 0.15s;
}
#panel-resize:hover, #panel-resize.dragging { background: #1565c0; }
#map { flex: 1; }

h1 { font-size: 18px; margin: 0 0 8px; }
h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: #555;
     margin: 20px 0 8px; display: flex; justify-content: space-between; align-items: center; }
.muted { color: #666; font-size: 12px; }
label { display: block; font-size: 12px; font-weight: 600; margin: 12px 0 4px; }
select, input, button { padding: 6px 8px; font-size: 14px; }
input[type="range"] { width: 100%; padding: 0; }
.row { display: flex; gap: 8px; align-items: center; }
.readout { font-variant-numeric: tabular-nums; min-width: 1.5em; }

button { background: #1565c0; color: #fff; border: 0; border-radius: 4px; cursor: pointer; width: 100%; margin-top: 12px; }
button:hover { background: #0d47a1; }
button.secondary { background: #eee; color: #333; margin-top: 8px; }
button.secondary:hover { background: #e0e0e0; }
button.link { background: none; color: #888; width: auto; margin: 0; padding: 0 4px; font-size: 14px; }
button.link:hover { color: #c00; background: none; }

/* condition rows: parameter (wide) · operator · value · remove */
.cond { display: grid; grid-template-columns: minmax(0,1fr) 62px 64px 18px; gap: 6px; margin-bottom: 6px; align-items: center; }
.cond select, .cond input { width: 100%; min-width: 0; }
/* operator: bigger, centered so the chosen ≥ > ≤ < < is unmistakable */
.cond select.op { font-size: 17px; text-align: center; text-align-last: center; padding: 5px 2px; }
/* provenance shown by the box outline instead of a text prefix */
.cond select.param.src-hrrr { border: 3px solid var(--hrrr); }
.cond select.param.src-calc { border: 3px solid var(--derived); }
.row button { margin-top: 0; }
.row.actions { margin-top: 20px; }
/* pressure-level picker for 3D params: full-width sub-row, hidden otherwise */
.cond select.level { grid-column: 1 / -1; margin-top: 2px; font-size: 12px; }
.cond select.level[hidden] { display: none; }

#preset-select { width: 100%; }
.preset-actions { display: flex; gap: 6px; margin-top: 8px; align-items: center; }
.preset-actions button { margin-top: 0; flex: 1; }
.preset-actions { flex-wrap: wrap; }
.preset-actions button.link { flex: 0 0 auto; }
#authoring { margin-top: 8px; padding: 8px; background: #fff7e6; border: 1px solid #f0d9a0; border-radius: 4px; }
code { background: #eee; padding: 0 3px; border-radius: 2px; font-size: 11px; }

#legend { margin-top: 12px; }
#outlooks { margin-top: 4px; }
#outlook-legend { font-size: 12px; margin-top: 6px; }
#outlook-legend .otlk-sub { font-weight: 700; margin: 6px 0 2px; }
#outlook-legend .otlk-warn { font-weight: 400; font-style: italic; color: #b71c1c; font-size: 11px; }
.legend-row { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 1.7; }
.legend-row.legend-dim { opacity: 0.35; }
.sw { width: 16px; height: 12px; border-radius: 2px; display: inline-block; border: 1px solid rgba(0,0,0,.2); }

/* Click-inspect panel: floats over the map at bottom-right, mirroring the
   bottom-left map-legend. Stays visible while scrubbing forecast hours and
   doesn't compete with the sidebar's vertical real estate. */
#inspect {
  position: fixed; bottom: 16px; right: 16px; z-index: 5;
  width: 330px; max-height: calc(100vh - 32px); overflow-y: auto;
  background: rgba(255,255,255,.94); border: 1px solid #ccc; border-radius: 6px;
  padding: 8px 10px; font-size: 12px; box-shadow: 0 1px 6px rgba(0,0,0,.2);
}
#inspect h2 { margin: 0 0 2px; font-size: 12px; text-transform: uppercase;
              letter-spacing: .04em; color: #555; display: flex;
              justify-content: space-between; align-items: center;
              border-bottom: 1px solid #eee; padding-bottom: 4px; }
#inspect #inspect-loc { margin: 4px 0 2px; font-size: 11px; }
#inspect table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 4px; }
#inspect th, #inspect td { text-align: left; padding: 3px 4px; border-bottom: 1px solid #eee; }
#inspect tr.pass td { color: #1b5e20; }
#inspect tr.fail td { color: #b71c1c; }
.limiting { color: #b71c1c; font-style: italic; }
/* Compact button inside the inspect pill (overrides the global full-width
   button styles that are tuned for the sidebar). */
#inspect .ts-open-btn {
  width: 100%; margin: 8px 0 0; padding: 5px 8px;
  font-size: 11px; background: #1565c0; color: #fff;
  border: 0; border-radius: 4px; cursor: pointer;
}
#inspect .ts-open-btn:hover { background: #0d47a1; }

/* Time-series modal: full-viewport overlay with a centered scrollable panel.
   SVG charts are 100 % width inside .ts-body so they reflow as the panel
   resizes; .ts-chart preserves aspect on small windows. */
#ts-modal { position: fixed; inset: 0; z-index: 20; }
#ts-modal[hidden] { display: none; }
#ts-modal .ts-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.42); }
#ts-modal .ts-panel {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(880px, 92vw); max-height: 88vh;
  display: flex; flex-direction: column;
  background: #fff; border-radius: 8px; box-shadow: 0 6px 28px rgba(0,0,0,.35);
}
#ts-modal .ts-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 16px; border-bottom: 1px solid #eee;
}
#ts-modal .ts-header h2 {
  margin: 0; font-size: 13px; text-transform: uppercase;
  letter-spacing: .04em; color: #555;
}
#ts-modal .ts-actions { display: flex; gap: 14px; align-items: center; }
#ts-modal .ts-actions button { font-size: 13px; padding: 2px 4px; }
#ts-modal .ts-body { padding: 12px 16px 16px; overflow-y: auto; }
#ts-modal .ts-context { margin: 0 0 10px; font-size: 11px; }
#ts-modal .ts-section { margin-bottom: 12px; }
#ts-modal .ts-section:last-child { margin-bottom: 0; }
#ts-modal .ts-label {
  font-size: 12px; margin-bottom: 1px;
  display: flex; gap: 8px; align-items: baseline;
}
#ts-modal .ts-thr { color: #666; font-family: ui-monospace, SFMono-Regular, monospace; font-size: 11px; }
#ts-modal .ts-chart { width: 100%; display: block; }

.badge { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 10px; font-weight: 700; color: #fff; text-transform: uppercase; }
.badge-hrrr { background: var(--hrrr); }
.badge-calc { background: var(--derived); }
footer { margin-top: 24px; line-height: 1.8; }

/* ── Mobile: side drawer ──────────────────────────────────────────────────
   Desktop stays a flex row (sidebar | map). On narrow screens the map fills
   the viewport and #panel becomes a slide-in drawer over it, toggled by
   #panel-toggle and dismissed by the scrim. Everything is gated behind the
   media query, so the desktop layout is byte-for-byte unchanged. */
#panel-toggle { display: none; }   /* shown only inside the media query */
#fh-step { display: none; }
#drawer-scrim { display: none; }

@media (max-width: 760px) {
  #panel-toggle {
    display: block; position: fixed; top: 10px; left: 10px; z-index: 28;
    width: auto; margin: 0; padding: 8px 12px; font-size: 13px; font-weight: 600;
    background: #1565c0; color: #fff; border: 0; border-radius: 6px;
    box-shadow: 0 1px 6px rgba(0,0,0,.3);
  }
  #panel-resize { display: none; }   /* drag-to-resize is mouse-only */

  /* Forecast-hour stepper: top-right, same row as the controls toggle, so the
     FH can be scrubbed without opening the drawer. Hidden while the drawer is
     open (it would float over the panel and collide with the Close button). */
  #fh-step {
    display: flex; align-items: center; gap: 2px;
    position: fixed; top: 10px; right: 10px; z-index: 28;
    background: rgba(255,255,255,.94); border: 1px solid #ccc; border-radius: 6px;
    box-shadow: 0 1px 6px rgba(0,0,0,.25); padding: 2px;
  }
  #fh-step button {
    width: 40px; margin: 0; padding: 6px 0; font-size: 22px; line-height: 1;
    background: none; color: #1565c0; border: 0; border-radius: 4px;
  }
  #fh-step button:active { background: #e3f0fb; }
  #fh-step-readout {
    font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
    color: #333; min-width: 2.6em; text-align: center;
  }
  body.drawer-open #fh-step { display: none; }

  /* Take the panel out of flow → the map flex child spans the full width. */
  #panel {
    position: fixed; top: 0; left: 0; z-index: 30;
    width: min(86vw, 360px); flex: none; height: 100vh; height: 100dvh;
    box-shadow: 2px 0 16px rgba(0,0,0,.28);
    transform: translateX(-100%); transition: transform .25s ease;
  }
  body.drawer-open #panel { transform: translateX(0); }

  #drawer-scrim {
    position: fixed; inset: 0; z-index: 25; background: rgba(0,0,0,.38);
    opacity: 0; pointer-events: none; transition: opacity .25s ease;
  }
  body.drawer-open #drawer-scrim { display: block; opacity: 1; pointer-events: auto; }
  /* While open, the toggle becomes a Close button sitting above the scrim,
     clear of the drawer's left edge. */
  body.drawer-open #panel-toggle { z-index: 31; left: auto; right: 10px; }

  /* Overlays were anchored to the (now off-screen) sidebar width — re-pin them
     to the viewport edges. */
  #status { left: 12px; top: 54px; max-width: calc(100vw - 24px); }
  #map-legend { left: 10px; right: auto; bottom: 10px; max-width: calc(100vw - 20px); }
  #inspect { left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 58vh; }

  /* Hover readout is mouse-only; tap-to-inspect replaces it on touch. */
  #hover, #hover-toggle-row { display: none; }
}