/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   THE WIRE — CONTAINMENT + CLOSABILITY  ·  THE BURGER MENU — a11y   (CEO/Dave, 2026-08-19)
   Loaded LAST (after style-01.css and pn-shell-adopt.css) so it wins the cascade for the two fixes.

   FAULT 1 — THE WIRE opened as a position:fixed drawer anchored to the WINDOW. Inside the cased
   device (`.pad > .dev > .screen`, where `.screen` is `position:relative; overflow:hidden`) a fixed
   child anchors to the viewport, not the device — so it slid off the right of the iPad and could not
   be reached. Re-anchoring it `position:absolute` makes `.screen` its containing block: it is capped
   to the device and clipped by the screen's rounded corners, exactly like every other overlay. The
   backdrop + the × + Esc (script-01.js) give it three ways out.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── 1 · CONTAIN THE WIRE INSIDE THE DEVICE ────────────────────────────────────────────────────
   Beats style-01.css's `body.feed-open .feed-rail{position:fixed !important…}` on both specificity
   (the leading `html`) and source order. Absolute → its containing block is `.screen`. */
html body.feed-open[data-view="office"] .feed-rail,
html body.feed-open[data-view="office"] #app > .feed-rail{
  position:absolute !important;
  top:0 !important; right:0 !important; bottom:0 !important; left:auto !important;
  width:min(380px, 86%) !important; height:auto !important;
  margin:0 !important; border-radius:0 !important;
  z-index:60 !important;                       /* over content + backdrop, inside the device */
}
/* the panel keeps its own scroll; nothing else changes about the wire's internals */
html body.feed-open[data-view="office"] .feed-rail .fr-panel{ overflow-y:auto !important; }

/* ── 2 · THE BACKDROP (injected into `.screen` by script-01.js) ────────────────────────────────
   Absolute inset:0 → covers the device screen only, clipped by `.screen` overflow. Click = close. */
.screen > .fw-backdrop{
  position:absolute; inset:0; z-index:55;
  background:rgba(6,10,16,.44);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.screen > .fw-backdrop.on{ opacity:1; pointer-events:auto; }
@media (prefers-reduced-motion:reduce){ .screen > .fw-backdrop{ transition:none; } }

/* ── 3 · THE OPEN DRAWER IS A DARK SEAM — SO PIN ITS INK LIGHT IN EVERY THEME ──────────────────
   ⛔ a11y S3 (2026-08-19), diagnosed by booting the OPEN drawer, not by reading source. The auditor
   reported the × at ~1:1 in light and assumed a light porcelain panel — but `body.feed-open
   .feed-rail` (style-01) forces a DARK gradient (#0c1622→#0a1019) in EVERY theme. The wire's text
   tokens (--fw-ink/--fw-dim) are theme-aware, so in LIGHT theme the whole wire — the ×, the
   masthead AND every row — resolved to DARK ink on that dark panel: dark-on-dark, ~1:1, invisible.
   A near-white literal for the × alone would have "passed" the × while leaving the body illegible.
   The open drawer is a deliberate dark seam (THEME LAW §2/§5), so redefine its ink to the light
   values HERE — one override fixes the ×, the masthead and the rows together, in both themes. */
html body.feed-open[data-view="office"] .feed-rail,
html body.feed-open[data-view="office"] #app > .feed-rail{
  --fw-ink:#eef3fb !important;                   /* dark-theme (light) ink, forced for the dark drawer */
  --fw-dim:#9aa7bb !important;
}
/* the × itself: targeted by its own id so it beats the legacy office `button:not(…) {color:var(
   --pn-text)!important}` catch-all — that rule carries !important but no id, so an id-bearing
   !important rule outranks it. --fw-ink now resolves light above, so the × reads on the dark drawer. */
html body.feed-open[data-view="office"] .feed-rail #frClose.fr-x{
  cursor:pointer; color:var(--fw-ink) !important; font-size:16px; line-height:1;
}
html body.feed-open[data-view="office"] .feed-rail #frClose.fr-x:hover{ opacity:.72; }

/* ── 4 · ACTIONABLE ROWS ──────────────────────────────────────────────────────────────────────
   Only rows that carry a destination (data-wire-go → class fw-act) look and behave interactive; a
   row with no destination stays plain, so nothing looks clickable that isn't (UX_RULES §control-
   relevance + §15 noise test). The chevron is the "there is somewhere to go" tell. */
body[data-view="office"] .fw-item.fw-act{ cursor:pointer; }
body[data-view="office"] .fw-item.fw-act:hover{
  background:color-mix(in srgb, var(--acc) 12%, transparent);
}
body[data-view="office"] .fw-item.fw-act:focus-visible{
  outline:2px solid var(--acc); outline-offset:-2px; border-radius:6px;
}
body[data-view="office"] .fw-item.fw-act .fw-head::after{
  content:" \2192"; color:var(--acc); font-weight:700;         /* → */
}
body[data-view="office"] .fw-item:not(.fw-act){ cursor:default; }

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   FAULT 2 — THE BURGER MENU.  The `.burger` button and `.menu` popover are the DESIGNED v4
   components (pn-system-v4.css); this only adds what a keyboard user needs and keeps the popover
   inside the device at every width.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */
#pnMenu.menu{ max-height:calc(100% - 68px); overflow-y:auto; }
/* ⛔ a11y S3 (2026-08-19): the designed v4 `.menu` hides closed with opacity:0 + pointer-events:none
   but NO visibility:hidden — so all ~13 items stayed in the Tab order + a11y tree of a menu the user
   sees as shut. Add visibility so a closed menu is truly gone to keyboard + AT; the delay lets the
   fade still play on close. (setMenuOpen also toggles `inert` in JS as belt-and-braces.) */
#pnMenu.menu{ visibility:hidden;
  transition:opacity .18s cubic-bezier(.22,1,.36,1), transform .18s cubic-bezier(.22,1,.36,1), visibility 0s linear .18s; }
#pnMenu.menu.open{ visibility:visible; transition-delay:0s; }
/* ⛔ a11y S3 (2026-08-19): destructive rows (.out = Wipe this save / Sign out) must read as a warm
   danger tint AND pass AA. Two facts drove the exact rule: (1) v4 gives .out --clay (#CE7B5E) which
   is only 4.06:1 on the dark card; (2) the legacy office catch-all
   `body[data-view="office"] button:not(…)` forces `color:var(--pn-text) !important` on every .mi,
   so BOTH clay and a plain override are beaten — the item renders plain white live. So this is
   `!important`, and it wins because the selector carries an id (#pnMenu) and among !important rules
   the higher id-count wins. Dark-scoped only (dark bases carry no data-theme; light sets
   data-theme="light" and already passes). Root --clay is untouched — it is used elsewhere.
   #E39A82 ≈ 5.6:1 on the dark card. */
:root:not([data-theme]) #pnMenu.menu .out,
:root[data-theme="dark"] #pnMenu.menu .out{ color:#E39A82 !important; }
#pnMenu.menu .mi:focus-visible,
#pnMenu.menu .themes button:focus-visible{
  outline:2px solid var(--acc); outline-offset:-2px;
}
/* the active theme reads clearly, not just as a faint fill */
#pnMenu.menu .themes button.on{ box-shadow:inset 0 0 0 1px var(--acc); }
/* narrow devices: keep the popover off both edges and reachable */
@media (max-width:430px){
  #pnMenu.menu{ width:min(270px, calc(100% - 24px)); }
}