/* static/css/nav_overlays.css — nav-overlay chrome (T-2.02)
 *
 * Loaded via each page's {% block head_extra %} (base.html.j2 is byte-locked; same
 * mechanism as derivation_panel.css). MUST be in <head> so the [x-cloak] rule applies
 * at FIRST PAINT — the watchlist drawer and command palette are side/full-screen
 * overlays that would flash visible before Alpine boots without it.
 *
 * Token-only: the scrim uses var(--canvas-0) (the §4 token) at opacity — NEVER raw
 * hex, NEVER rgba(). No new Tailwind utilities: Tailwind's bg-canvas-0/80 opacity
 * variant does NOT compile for the CSS-variable-backed token (verified — no rule
 * emitted), so the scrim lives here instead. No tailwind.config.js change, no rebuild.
 */

/* x-cloak guard — keep cloaked overlays hidden until Alpine removes the attribute.
 * There is no global [x-cloak] rule in the compiled Tailwind output; this provides it
 * for the pages that mount the nav overlays.
 *
 * THIS RULE STAYS, AND ITS SURVIVING CONSUMER IS NAMED SO A FUTURE CLEANUP DOES NOT
 * DELETE IT. The command palette stopped using x-cloak at RULING-PALETTEFOCUS (it is
 * a native <dialog> now, hidden by the UA when it has no [open]), which leaves the
 * WATCHLIST DRAWER as the consumer: watchlist_sidebar.html.j2 carries x-cloak in
 * THREE places -- the drawer root plus the Passive and Saved tabpanels. Removing this
 * rule alongside the palette conversion would have made the drawer flash open before
 * Alpine boots, on every page that mounts the nav overlays. */
[x-cloak] {
  display: none !important;
}

/* ── Command palette: native <dialog> + ::backdrop (RULING-PALETTEFOCUS) ──────
 *
 * THE BACKDROP SIBLING DIV RETIRED HERE. `.command-palette__backdrop` is gone and
 * ::backdrop replaces it, with the SAME token and the SAME opacity -- recorded
 * rather than silently deleted, because a rule that vanishes without a reason reads
 * the same as one deleted to silence a red.
 *
 * THE DIALOG IS A TRANSPARENT FULL-VIEWPORT CONTAINER, which is what keeps the
 * visual result identical to the retired backdrop+panel pair: the panel inside still
 * places itself with its own mt-24 / mx-auto / max-w-xl. The UA's modal defaults
 * (fit-content sizing, margin:auto centring, padding, solid border, Canvas
 * background) all fight that, so all of them are overridden explicitly -- the same
 * shape .decision-view-modal takes in decision_view.css. */
.command-palette {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background-color: transparent;
  color: inherit;
}

/* Default-closed, CSS-first. The UA sheet already hides a dialog without [open];
 * this states it in our own sheet so the guarantee does not depend on reading the
 * UA's, and mirrors the bottom-sheet and decision-view precedents. */
.command-palette:not([open]) {
  display: none;
}

.command-palette[open] {
  display: block;
}

/* The scrim look, unchanged: same var(--canvas-0) at the same 0.8 opacity the
 * retired .command-palette__backdrop carried. Tailwind's bg-canvas-0/80 opacity
 * variant still does not compile for the CSS-variable-backed token, which is why
 * this lives here rather than as a utility.
 *
 * ::backdrop INHERITS FROM ITS ORIGINATING ELEMENT in current browsers, which is how
 * var(--canvas-0) resolves here at all. Older engines gave ::backdrop no inheritance,
 * where this falls back to a transparent backdrop. Not papered over with a raw-hex
 * fallback (forbidden here, and the palette's token-only colours are pinned by
 * test_palette_token_only_colors) -- an unscrimmed palette is visible at the gate,
 * which is where it would be caught. */
.command-palette::backdrop {
  background-color: var(--canvas-0);
  opacity: 0.8;
}