/* ═══════════════════════════════════════════════════════════════════════════
   PORTAL NAV — command palette + mobile drawer
   Ships to EVERY founder surface, including the ones with a bespoke shell
   (command.html) that cannot take the 52px desktop rail.

   Why this exists: the desktop rail is `display:none` below 768px and only ever
   lived on the .deep-page shell, so on a phone — and on /command itself — there
   was no way to reach the other 60 surfaces at all. This layer is additive:
   it assumes nothing about the host page's layout, only that it has a <body>.

   Everything is scoped under .pnav* so it cannot collide with brg-command.css.
   Loaded LAST in <head> so its mobile rules win.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Host pages differ on whether they set a global box-sizing reset, and this layer ships
   into all of them. Without this, .pnav-item's width:100% + 32px of padding overflows the
   panel and the right-hand group hint gets sliced off at the edge. Never inherit layout
   assumptions from the host. */
.pnav-nav, .pnav-nav *,
.pnav-overlay, .pnav-overlay * { box-sizing: border-box; }

:root {
  --pnav-gold: #D4A843;
  --pnav-bg: rgba(6, 8, 14, .97);
  --pnav-line: rgba(212, 168, 67, .16);
  --pnav-ink: rgba(255, 255, 255, .92);
  --pnav-mut: rgba(255, 255, 255, .46);
}

/* ── Launcher: fixed pill, bottom-right. The one control present on every page ──
   The <nav> landmark holds the fixed position so the button's own box is unchanged.
   display:contents is deliberately NOT used — it drops the element from the
   accessibility tree in some engines, which would defeat the whole point. */
.pnav-nav {
  position: fixed; right: 16px; z-index: 2147483000;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  margin: 0; padding: 0; border: 0; background: none;
}
.pnav-launch {
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 16px; border-radius: 100px;
  background: var(--pnav-gold); color: #000; border: 0;
  font: 700 11px/1 ui-sans-serif, system-ui, -apple-system, "Inter", sans-serif;
  letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
  box-shadow: 0 6px 28px rgba(0, 0, 0, .55), 0 0 0 1px rgba(212, 168, 67, .5);
  -webkit-tap-highlight-color: transparent;
}
.pnav-launch:hover { filter: brightness(1.08); }
.pnav-launch:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.pnav-launch kbd {
  font: 600 10px/1 ui-monospace, "JetBrains Mono", monospace;
  background: rgba(0, 0, 0, .22); border-radius: 4px; padding: 3px 5px; letter-spacing: 0;
}
@media (max-width: 768px) { .pnav-launch kbd { display: none; } }
@media print { .pnav-nav { display: none !important; } }

/* ── Overlay ── */
.pnav-overlay {
  position: fixed; inset: 0; z-index: 2147483100;
  background: rgba(0, 0, 0, .68); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: none; align-items: flex-start; justify-content: center;
  padding: 10vh 16px 16px;
}
.pnav-overlay[data-open="1"] { display: flex; }
@media (max-width: 768px) { .pnav-overlay { padding: 12px; align-items: stretch; } }

/* ── Panel ── */
.pnav-panel {
  width: 100%; max-width: 620px; max-height: 78vh;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--pnav-bg); border: 1px solid var(--pnav-line); border-radius: 14px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .7);
  font-family: ui-sans-serif, system-ui, -apple-system, "Inter", sans-serif;
  color: var(--pnav-ink);
}
@media (max-width: 768px) { .pnav-panel { max-width: none; max-height: none; height: 100%; border-radius: 12px; } }

.pnav-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.pnav-head-mark { font: 800 12px/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: .2em; color: var(--pnav-gold); }
.pnav-input {
  flex: 1; background: none; border: 0; outline: 0; color: var(--pnav-ink);
  font: 400 16px/1.4 inherit; /* 16px — anything smaller makes iOS Safari zoom on focus */
  padding: 6px 2px;
}
.pnav-input::placeholder { color: var(--pnav-mut); }
.pnav-close {
  background: none; border: 1px solid rgba(255, 255, 255, .14); border-radius: 8px;
  color: var(--pnav-mut); width: 30px; height: 30px; cursor: pointer; font-size: 15px; line-height: 1;
}
.pnav-close:hover { color: var(--pnav-ink); border-color: var(--pnav-gold); }

.pnav-list { overflow-y: auto; padding: 6px 0 10px; -webkit-overflow-scrolling: touch; }
.pnav-group {
  font: 700 9px/1 ui-monospace, "JetBrains Mono", monospace;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(212, 168, 67, .6);
  padding: 14px 16px 6px;
}
.pnav-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 16px; text-decoration: none; color: rgba(255, 255, 255, .74);
  font: 500 13px/1.2 inherit; border-left: 2px solid transparent; cursor: pointer;
}
.pnav-item:hover, .pnav-item[data-cursor="1"] {
  background: rgba(212, 168, 67, .09); color: #fff; border-left-color: var(--pnav-gold);
}
.pnav-item[aria-current="page"] { color: var(--pnav-gold); }
.pnav-item .pnav-ico { width: 20px; text-align: center; flex-shrink: 0; opacity: .85; }
/* The label yields first; the group hint must never be clipped by the panel edge —
   a half-rendered "GTM & Gro" reads as a rendering bug, not a hint. */
.pnav-item .pnav-lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pnav-item .pnav-grp { margin-left: auto; flex-shrink: 0; padding-left: 12px; font: 400 10px/1 ui-monospace, monospace; color: var(--pnav-mut); white-space: nowrap; }
.pnav-empty { padding: 26px 16px; color: var(--pnav-mut); font-size: 13px; text-align: center; }

.pnav-foot {
  border-top: 1px solid rgba(255, 255, 255, .07); padding: 8px 14px;
  font: 400 10px/1.4 ui-monospace, "JetBrains Mono", monospace; color: var(--pnav-mut);
  display: flex; gap: 14px; flex-wrap: wrap;
}
@media (max-width: 768px) { .pnav-foot { display: none; } }

/* Lock background scroll while the palette is open, without the iOS
   position:fixed jump — overflow:hidden on both elements is enough here. */
html.pnav-lock, body.pnav-lock { overflow: hidden; }

@media print { .pnav-launch, .pnav-overlay { display: none !important; } }

@media (prefers-reduced-motion: no-preference) {
  .pnav-panel { animation: pnavIn .16s cubic-bezier(.2, .7, .2, 1); }
  @keyframes pnavIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
}


/* ── honest data states (js/portal-states.js + the observer in portal-nav.js) ──
   Deliberately HERE and not in a new stylesheet. This file is already loaded by the
   same 211 pages that get the states behaviour [grep -rl 'portal-nav.css'
   --include='*.html' | wc -l -> 211, 2026-09-22], so a separate portal-states.css
   would have been the 138th stylesheet in this directory AND an extra request on
   every page, to style markup that only appears when something has gone wrong.
   All selectors are namespaced .brg-state*, so nothing here can restyle a host page.
   NOTE: there is no prefers-color-scheme block on purpose — the portal is
   unconditionally dark, and a light override paints a white panel onto a dark page
   on a light-preferring OS (caught in a render harness before it shipped). */

.brg-state {
  --_gold: var(--gold, #D4A843);
  --_tx: var(--tx, #f0f0f0);
  --_amber: var(--amber, #f59e0b);
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: 1.25rem 1.4rem;
  border: 1px solid rgba(212, 168, 67, .14);
  border-radius: 10px;
  background: rgba(6, 10, 18, .45);
  color: var(--_tx);
  font: 400 .875rem/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.brg-state__title {
  margin: 0;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--_tx);
}

.brg-state__note {
  margin: 0;
  color: rgba(240, 240, 240, .62);
}

.brg-state code {
  font-family: var(--mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: .82em;
  color: var(--_gold);
  overflow-wrap: anywhere;
}

/* loading ------------------------------------------------------------------ */
.brg-state--loading { flex-direction: row; align-items: center; gap: .65rem; }

.brg-state__spinner {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  border: 2px solid rgba(212, 168, 67, .22);
  border-top-color: var(--_gold);
  border-radius: 50%;
  animation: brg-state-spin .8s linear infinite;
}

.brg-state__text { color: rgba(240, 240, 240, .72); }

@keyframes brg-state-spin { to { transform: rotate(360deg); } }

/* A reader who cannot see motion still gets the text; a reader who does not want
   motion does not get a spinning ring. The state is never conveyed by motion alone. */
@media (prefers-reduced-motion: reduce) {
  .brg-state__spinner { animation: none; border-top-color: rgba(212, 168, 67, .5); }
}

/* empty — a real zero. Deliberately calm: this is a working page. ----------- */
.brg-state--empty { border-color: rgba(212, 168, 67, .10); }

/* unreadable — we could not read the source. Never dressed as a zero. ------- */
.brg-state--unreadable {
  border-color: rgba(245, 158, 11, .34);
  background: rgba(245, 158, 11, .06);
}
.brg-state--unreadable .brg-state__title { color: var(--_amber); }

.brg-state__retry {
  align-self: flex-start;
  margin-top: .3rem;
  padding: .4rem .85rem;
  border: 1px solid rgba(212, 168, 67, .35);
  border-radius: 6px;
  background: transparent;
  color: var(--gold, #D4A843);
  font: inherit;
  font-size: .82rem;
  cursor: pointer;
}
.brg-state__retry:hover { background: rgba(212, 168, 67, .10); }
.brg-state__retry:focus-visible { outline: 2px solid var(--gold, #D4A843); outline-offset: 2px; }

/* page-level banner — names what did not load, changes nothing else -------- */
.brg-state-banner {
  position: fixed;
  right: 16px;
  /* .pnav-nav is fixed at right:16px / bottom:16px with z-index 2147483000.
     Sitting at the same coordinates buried the "Go to" button, and on a 375px screen the
     full-width banner covered it entirely. Clear its height and sit one z-index below it,
     so the nav is always reachable and always on top. */
  bottom: calc(16px + 56px + env(safe-area-inset-bottom, 0px));
  z-index: 2147482999;
  max-width: min(26rem, calc(100vw - 2rem));
  padding: .95rem 2.2rem .95rem 1.1rem;
  border: 1px solid rgba(245, 158, 11, .38);
  border-radius: 10px;
  background: #0a0804;  /* fully opaque: a form control underneath paints its own layer and showed through at .94 */
  color: #f0f0f0;
  font: 400 .8125rem/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .55);
}

.brg-state-banner__head {
  font-weight: 600;
  color: var(--amber, #f59e0b);
  margin-bottom: .4rem;
}

.brg-state-banner__list {
  margin: 0 0 .45rem;
  padding-left: 1.1rem;
  max-height: 8.5rem;
  overflow-y: auto;
}

.brg-state-banner__list code {
  font-family: var(--mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: .78em;
  color: #D4A843;
  overflow-wrap: anywhere;
}

.brg-state-banner__note { margin: 0; color: rgba(240, 240, 240, .58); }

.brg-state-banner__close {
  position: absolute;
  top: .35rem;
  right: .45rem;
  width: 1.7rem;
  height: 1.7rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: rgba(240, 240, 240, .6);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.brg-state-banner__close:hover { color: #f0f0f0; background: rgba(255, 255, 255, .07); }
.brg-state-banner__close:focus-visible { outline: 2px solid var(--gold, #D4A843); outline-offset: 2px; }

@media (max-width: 640px) {
  .brg-state-banner { left: 16px; right: 16px; max-width: none;
    bottom: calc(16px + 56px + env(safe-area-inset-bottom, 0px)); }
  .brg-state { padding: 1rem 1.05rem; }
}

/* NO prefers-color-scheme BLOCK HERE — deliberately.
   The portal is unconditionally dark: brg-command.css sets --bg #030308 and
   command-plus.html sets --bg #07090e with no light variant and no data-theme switch.
   A light-scheme override therefore fires on a light-preferring OS and paints a white
   panel onto a dark page. Caught in the local render harness, 2026-09-22, before this
   shipped. If the portal ever gains a real light theme, add the override behind that
   theme's own attribute, never behind prefers-color-scheme alone. */
