/* Header scope picker — styles.
 *
 * Geometry is COPIED EXACTLY from design/header-nav/README.md: sizes,
 * spacing, radii, weights, the 520px panel, the 320px pane cap.
 *
 * COLOUR IS MAPPED, NOT COPIED, and this table is the contract. The handoff
 * is specified in light-theme literals; this site ships a dark theme as the
 * default, so pasting #fff would give a white slab in dark mode. Each literal
 * is replaced by the token that plays the same ROLE, which is what makes the
 * picker follow the theme the way the rest of the site does.
 *
 *   handoff          role                          token here
 *   ─────────────────────────────────────────────────────────────────────
 *   #fff             panel / trigger ground        --surface-1
 *   #fafbfc          child pane wash               --surface-2
 *   #d9dde3          panel + trigger border        --border-1
 *   #b6bcc5          trigger border on hover       --border-2
 *   #f0f1f3          divider                       --border-1
 *   #f4f5f7          hover / selected ground       --surface-3
 *   #111827          primary ink                   --fg-1
 *   #374151          row ink                       --fg-2
 *   #8b919b          count ink                     --fg-3
 *   #9ca3af          caret, footnote               --fg-3
 *   #b6bcc5 #c3c9d1  pane headings, chevrons       --fg-3
 *   #b91c1c          selected ink                  --accent-ink
 *   #fdeeee          selected child ground         --surface-3
 *   #ef4444          heat, >=3 open                --danger
 *   #f6a6a6          heat, 1-2 open                --cat-2  (see below)
 *   #dfe3e8          heat, 0 open                  --fg-3 at low alpha
 *   CFA #ef4444      service mark                  --danger
 *   FRV #111827      service mark                  --fg-1
 *
 * The one deliberate departure: the handoff's pale-red "1-2 open" (#f6a6a6)
 * is a tint of the same hue as "3+ open". Tints do not survive a dark ground —
 * on #171515 a pale red reads as brighter, i.e. MORE urgent, inverting the
 * scale. --cat-2 (amber) is the site's existing "middle" severity and keeps
 * the ordering readable in both themes. Recorded rather than done silently.
 */

.sp-root { position: relative; display: inline-flex; }

/* ── Trigger ──────────────────────────────────────────────────────────── */
.sp-trigger {
  display: inline-flex;
  align-items: center;
  /* The trigger scales with the viewport (2026-08-18, owner: "hard to see on
     big screens"). Same fluid rule as the rest of the site — every clamp MIN
     is the value the handoff shipped, so below ~1600px nothing moves and the
     copied-exactly geometry contract above still holds there; the ramp only
     buys legibility on wall-sized panels. The dot, caret and padding ride
     the same curve, or the box would grow around a fixed-size speck. */
  gap: clamp(9px, .55vw, 14px);
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: 8px;
  padding: clamp(8px, .5vw, 13px) clamp(13px, .8vw, 21px);
  font: inherit;
  color: var(--fg-1);
  cursor: pointer;
}
.sp-trigger:hover { border-color: var(--border-2); }
.sp-trigger:disabled { opacity: .6; cursor: default; }
.sp-trigger-dot {
  width: clamp(9px, .55vw, 15px);
  height: clamp(9px, .55vw, 15px);
  border-radius: 999px; flex: 0 0 auto;
}
.sp-trigger-label { font-size: clamp(13px, .8vw, 21px); font-weight: 800; letter-spacing: .04em; }
.sp-caret { color: var(--fg-3); font-size: clamp(9px, .55vw, 14px); }

/* The per-service identity dots (sp-dot-cfa red / sp-dot-frv white) are
   GONE, 2026-08-18: once red means "live", an always-red CFA mark is a
   permanent false alarm. Tabs and the trigger use sp-heat-live/idle now. */

/* ── Panel ────────────────────────────────────────────────────────────── */
.sp-panel {
  position: absolute;
  left: 0;
  top: calc(100% + 7px);
  width: 520px;
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: 11px;
  /* The handoff's rgba(17,24,39,.18) is a light-theme shadow. Kept as a
     neutral black at the same weight so it works on both grounds. */
  box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
  overflow: hidden;
  z-index: 700;
}
.sp-panel[hidden] { display: none; }

/* ── Service tabs ─────────────────────────────────────────────────────── */
.sp-tabs {
  display: flex;
  gap: 3px;
  padding: 8px;
  border-bottom: 1px solid var(--border-1);
  align-items: center;
}
.sp-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .05em;
  color: var(--fg-3);
  cursor: pointer;
}
.sp-tab.is-active { background: var(--surface-3); color: var(--fg-1); }
.sp-tab-dot { width: 8px; height: 8px; border-radius: 999px; }
.sp-hint {
  margin-left: auto;
  padding-right: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--fg-3);
}

/* ── Panes ────────────────────────────────────────────────────────────── */
.sp-panes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.sp-pane { padding: 8px; max-height: 320px; overflow: auto; }
.sp-pane-parent { border-right: 1px solid var(--border-1); }
.sp-pane-child { background: var(--surface-2); }
.sp-pane-head {
  font-size: 10px;
  letter-spacing: .08em;
  font-weight: 800;
  color: var(--fg-3);
  padding: 4px 8px 7px;
}
.sp-empty { padding: 6px 8px; font-size: 12px; color: var(--fg-3); }

.sp-row {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  font: inherit;
  cursor: pointer;
  text-align: left;
  color: var(--fg-2);
}
.sp-row:hover { background: var(--surface-3); }
.sp-row.is-selected { background: var(--surface-3); color: var(--accent-ink); }
.sp-row:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
.sp-row-name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sp-row-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}
.sp-row-chevron { color: var(--fg-3); font-size: 9px; }

/* The dot answers "is this unit out on a FRESH job right now?"
 *
 * Third definition this dot has had, each at the owner's direction: the
 * handoff's heat scale (open-job count), then the incident type, and now
 * (2026-08-18) RECENCY — red while the unit has a job under 20 minutes old,
 * green otherwise. The 20-minute line is the turnout clock's own boundary,
 * so the menu and the incident rows agree about what counts as live.
 *
 * The same two classes paint every level — child rows, parent rows, the
 * service tabs and the trigger — so red always means the same thing, and a
 * red tab is the top of a trail that ends at the unit that is out.
 *
 * --ok is documented in theme.css as meaning "safe" and nothing else. A unit
 * with no fresh job is exactly that, so this is the one correct use of it. */
.sp-heat { width: 8px; height: 8px; border-radius: 999px; flex: 0 0 auto; }
.sp-heat-idle { background: var(--ok); }
.sp-heat-live { background: var(--danger); }

/* ── Footer ───────────────────────────────────────────────────────────── */
.sp-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-top: 1px solid var(--border-1);
  background: var(--surface-1);
}
.sp-whole {
  border: 1px solid var(--border-2);
  background: var(--surface-1);
  border-radius: 7px;
  padding: 6px 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--fg-2);
  cursor: pointer;
}
.sp-whole:hover { background: var(--surface-3); }
.sp-footnote { margin-left: auto; font-size: 12px; color: var(--fg-3); }

/* ── Narrow screens ───────────────────────────────────────────────────── */
/* The panel is 520px, which overflows a 390px phone. It becomes a full-width
   sheet anchored to the header rather than a floating card — the two panes
   stay side by side, because the whole point is reaching either level in one
   gesture, and stacking them would reintroduce the drill-down this replaces. */
/* SUPERSEDED 2026-08-18 by the bottom sheet below — the side-by-side stance
   was kept from 560–900px, but under 560px the two panes were ~180px each and
   truncated most brigade names, which is what the owner called "does not work
   in a mobile site". */

/* ── Mobile: bottom sheet + drill-down (owner's Option B, 2026-08-18) ───── */
/* Below the site's structural 900px breakpoint the floating two-column panel
   becomes a bottom sheet: fixed to the viewport bottom, one pane at a time
   (parents, then children behind a back button), full-width touch rows.
   Everything here is gated to <=900px — the desktop panel is untouched, and
   the two mobile-only elements (.sp-back, .sp-backdrop) are display:none in
   the base rules below so they cannot appear on desktop at all. */
.sp-back { display: none; }
.sp-backdrop { display: none; }

@media (max-width: 900px) {
  .sp-root { position: static; }

  .sp-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    z-index: 890;
    border: 0;
    padding: 0;
  }
  .sp-backdrop[hidden] { display: none; }

  .sp-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: auto;
    max-height: 72vh;
    display: flex;
    flex-direction: column;
    border-radius: 12px 12px 0 0;
    border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    z-index: 900;
    animation: sp-slide-up .22s ease-out;
  }
  .sp-panel[hidden] { display: none; }
  /* Grab handle — the visual grammar of a sheet. */
  .sp-panel::before {
    content: '';
    display: block;
    width: 44px;
    height: 4px;
    border-radius: 999px;
    background: var(--border-2);
    margin: 8px auto 2px;
    flex: 0 0 auto;
  }
  @keyframes sp-slide-up {
    from { transform: translateY(28%); opacity: .6; }
    to   { transform: none; opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    .sp-panel { animation: none; }
  }
  /* The page must not scroll under an open sheet. The class is only ever
     added by the mobile show() path, and this rule only exists in this
     media query, so desktop scrolling cannot be affected. */
  html.sp-lock, html.sp-lock body { overflow: hidden; }

  /* One pane at a time. data-level is set by render(); no base rule keys on
     it, so on desktop the attribute is inert. */
  .sp-panes { display: block; flex: 1 1 auto; min-height: 0; overflow: hidden; }
  .sp-pane { max-height: none; height: 100%; }
  .sp-pane-parent { border-right: 0; }
  .sp-panel[data-level="child"] .sp-pane-parent { display: none; }
  .sp-panel[data-level="parent"] .sp-pane-child { display: none; }
  .sp-panel[data-level="parent"] .sp-back { display: none; }

  .sp-back {
    display: flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    margin: 8px 12px 0;
    padding: 8px 14px;
    border: 1px solid var(--border-2);
    border-radius: 8px;
    background: var(--surface-2);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    color: var(--fg-2);
    cursor: pointer;
    flex: 0 0 auto;
  }

  /* Touch geometry: the desktop rows are mouse-sized (28px); these reach the
     44px comfortable band and the names stop truncating — the pane is the
     full viewport width now, not half of a 374px panel. */
  .sp-row { padding: 12px 10px; gap: 12px; border-radius: 8px; }
  .sp-row-name { font-size: 16px; }
  .sp-row-count { font-size: 13px; }
  .sp-row-chevron { font-size: 11px; }
  .sp-heat { width: 10px; height: 10px; }
  .sp-tab { padding: 10px 16px; font-size: 13px; }
  .sp-whole { padding: 11px 16px; font-size: 14px; }
  .sp-footer { padding-bottom: max(9px, env(safe-area-inset-bottom, 0px)); }

  /* The trigger stays one line. Scoped labels ("CFA · D08 · TESTVILLE") used
     to wrap onto three lines and crush the logo; now they ellipsise. */
  .sp-trigger { min-width: 0; max-width: 48vw; }
  .sp-trigger-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
@media (max-width: 560px) {
  .sp-trigger-label { font-size: 12px; }
}