/*
 * Global navigation — component styles.
 *
 * Lifted from new-design-system/design-system/components/global-navigation/
 * reference.html. Every rule is scoped under the .viewport app-frame root so the
 * canon class vocabulary (.panel, .gn-r, .gn-body, .gn-c, .gn-lab, …) is preserved verbatim
 * but only matches inside the nav — no collisions with existing app / Avo /
 * Tailwind CSS. The tokens the nav needs are scoped to .viewport too, so the
 * component is self-contained and does not depend on the global design_tokens.css
 * migration (see GLOBAL_NAV_QUESTIONS_FOR_DESIGN_AGENT_2026-05-29.md, Call A).
 *
 * Loaded only on app-frame pages (stylesheet_link_tag "components/global_navigation"),
 * so the body reset below is scoped to those pages by load, not globally.
 */

body { margin: 0; }

.viewport {
  /* ---- scoped v2 design tokens (canonical values) ----
     TEMPORARY shim: the global app/assets/stylesheets/design_tokens.css doesn't
     yet carry the v2 Slate scale + alias tokens. These are scoped here so the nav
     is self-contained. TODO: remove this block once the global token migration
     lands (it's slated as the next non-canon dev PR after the nav ships — see
     Call A in the design-agent reply, MENU_MK2/nav-concepts/REPLY-TO-DEV-AGENT). */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', Menlo, Monaco, Consolas, monospace;
  --color-slate-50: #f8fafc;
  --color-slate-100: #f1f5f9;
  --color-slate-300: #cbd5e1;
  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;
  --color-blue-50: #eff6ff;
  --color-blue-700: #1d4ed8;
  --surface-2: #f1f5f9;
  --paper: #ffffff;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --border-faint: #eef2f6;
  --fg: #0f172a;
  --fg-muted: #475569;
  --fg-faint: #94a3b8;
  --r-input: 3px;
  --r-card: 4px;

  min-height: 100vh; position: relative;
  font-family: var(--font-sans); color: var(--fg); background: var(--surface-2);
  -webkit-font-smoothing: antialiased;
}
.viewport *, .viewport *::before, .viewport *::after { box-sizing: border-box; }

/* ===== NAV — reflow + inertia model =====
   The global navigation is its own original design (Nick's explicit canon
   override, 2026-05-29). The panel (width --nav-w) overlays the left; the centered
   content (.shell) sits at margin-left = max(--nav-w, the natural centered margin).
   So on a wide window the nav expands into the empty margin and content doesn't
   move; on a narrower one the nav reaches the content edge and pushes/narrows it.
   The global_nav_controller animates --nav-w / --content-x per frame on open/close
   (a two-body, critically-damped inertia sim — see foundations/motion.md's
   global-nav exception). At rest the inline vars are cleared and the values below
   take over, so the resting layout is pure-CSS and recomputes on resize/zoom with
   no JS. Reverses the original no-reflow rule; canon updated to match. ===== */
.viewport { --gn-rail-w: 56px; --gn-open-w: 280px; --nav-w: var(--gn-open-w); --gn-gutter: 12px; }
.viewport.gn-railed { --nav-w: var(--gn-rail-w); }
.viewport > .panel { position: fixed; left: 0; top: 0; bottom: 0; width: var(--nav-w); background: var(--paper); border-right: 1px solid var(--border); box-shadow: 3px 0 12px rgba(15,23,42,.05); display: flex; flex-direction: column; z-index: 30; }

.viewport > .panel .gn-ptop { display: flex; align-items: center; gap: 9px; padding: 14px 14px 8px; overflow: hidden; white-space: nowrap; }
.viewport > .panel .gn-brand { display: flex; align-items: center; gap: 9px; }
.viewport > .panel .gn-brand img { height: 24px; width: auto; display: block; border-radius: 4px; }
.viewport > .panel .gn-ptop-title { font-family: var(--font-mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--fg-muted); white-space: nowrap; }
/* `visibility: visible` resets Tailwind's `.gn-collapse` utility (visibility:collapse),
   which avo.base.css applies to anything with class "collapse" on framed pages.
   Root-scoping wins specificity but only for properties we set, so we set it. */
.viewport > .panel .gn-collapse { visibility: visible; display: inline-flex; align-items: center; justify-content: center; margin-left: auto; color: var(--fg-faint); cursor: pointer; background: none; border: none; font-size: 14px; padding: 4px; line-height: 1; border-radius: var(--r-input); }
.viewport > .panel .gn-collapse:hover { color: var(--fg); background: var(--color-slate-50); }
.viewport.gn-railed > .panel .gn-ptop { display: none; }
.viewport > .panel .gn-railexpand { display: none; }
.viewport.gn-railed > .panel .gn-railexpand { display: flex; align-items: center; justify-content: center; padding: 14px 0 10px; color: var(--fg-faint); cursor: pointer; font-size: 14px; }
.viewport.gn-railed > .panel .gn-railexpand:hover { color: var(--fg); }

.viewport > .panel .gn-srch { margin: 0 14px 8px; font-size: 12.5px; color: var(--fg-faint); background: var(--color-slate-50); border: 1px solid var(--border-strong); border-radius: var(--r-input); padding: 7px 9px; display: flex; gap: 7px; cursor: pointer; white-space: nowrap; overflow: hidden; }
.viewport > .panel .gn-srch:hover { border-color: var(--color-slate-400); }
.viewport > .panel .gn-kbd { font-family: var(--font-mono); font-size: 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 3px; padding: 0 4px; margin-left: auto; }
.viewport.gn-railed > .panel .gn-srch { margin: 0 10px 8px; justify-content: center; padding: 7px 0; }
.viewport.gn-railed > .panel .gn-srch .gn-stxt, .viewport.gn-railed > .panel .gn-srch .gn-kbd { display: none; }

.viewport > .panel .gn-navtools { display: flex; align-items: center; padding: 2px 16px 8px; overflow: hidden; white-space: nowrap; }
.viewport > .panel .gn-expandall { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--color-blue-700); cursor: pointer; background: none; border: none; padding: 2px; }
.viewport > .panel .gn-expandall:hover { text-decoration: underline; }
.viewport.gn-railed > .panel .gn-navtools { display: none; }
.viewport > .panel .gn-scroll { overflow-y: auto; overflow-x: hidden; flex: 1; padding: 2px 0 10px; overflow-anchor: none; }
.viewport.gn-railed > .panel .gn-scroll { display: none; }

/* ----- tree rows ----- */
.viewport > .panel .gn-r { display: flex; align-items: stretch; height: 33px; cursor: pointer; text-decoration: none; color: inherit; }
.viewport > .panel .gn-r:hover { background: var(--color-slate-50); }
.viewport > .panel .gn-lab { flex: 1; display: flex; align-items: center; font-size: 12.5px; padding-right: 14px; white-space: nowrap; }
.viewport > .panel .gn-l1 .gn-lab { font-weight: 700; }
.viewport > .panel .gn-l2 .gn-lab { font-weight: 600; }
.viewport > .panel .gn-l3 .gn-lab { font-weight: 400; color: var(--fg-muted); }
.viewport > .panel .gn-act { background: var(--color-slate-100); }
.viewport > .panel .gn-act .gn-lab { color: var(--fg); font-weight: 600; }

/* ----- connector cells (hairline tree rails) ----- */
.viewport > .panel .gn-c { width: 24px; flex: none; position: relative; }
.viewport > .panel .gn-c.gn-v::before, .viewport > .panel .gn-c.gn-t::before, .viewport > .panel .gn-c.gn-l::before { content: ""; position: absolute; left: 50%; width: 1px; background: var(--color-slate-300); }
.viewport > .panel .gn-c.gn-v::before, .viewport > .panel .gn-c.gn-t::before { top: 0; bottom: 0; }
.viewport > .panel .gn-c.gn-l::before { top: 0; height: 50%; }
.viewport > .panel .gn-c.gn-t::after, .viewport > .panel .gn-c.gn-l::after { content: ""; position: absolute; left: 50%; right: 0; top: 50%; height: 1px; background: var(--color-slate-300); }
.viewport > .panel .gn-cc::before { content: ""; position: absolute; left: 0; right: 50%; top: 50%; height: 1px; background: var(--color-slate-300); }
.viewport > .panel .gn-cc.gn-rt::before { display: none; }
.viewport > .panel .gn-lf::before { content: ""; position: absolute; left: 0; right: 6px; top: 50%; height: 1px; background: var(--color-slate-300); }
.viewport > .panel .gn-ctl { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 2; display: flex; align-items: center; justify-content: center; background: var(--paper); cursor: pointer; width: 11px; height: 11px; border: 1px solid var(--color-slate-300); border-radius: 3px; }
.viewport > .panel .gn-ctl .gn-h { width: 5px; height: 1px; background: var(--fg-muted); position: absolute; }
.viewport > .panel .gn-ctl .gn-vt { width: 1px; height: 5px; background: var(--fg-muted); position: absolute; transition: transform .2s, opacity .2s; }
.viewport > .panel .gn-r.gn-open .gn-ctl .gn-vt { transform: scaleY(0); opacity: 0; }
.viewport > .panel .gn-r:hover .gn-ctl { border-color: var(--color-slate-500); background: var(--color-slate-50); }
/* `grid-template-columns: 1fr` pins the single column to the full panel
   width. The nav's `.gn-body` class collides with terse page-level `.gn-body`
   classes used by other modules (e.gn-g. demand_gen.css's `body.dg-page .gn-body`
   sets a 2-column grid for its own page layout); without an explicit column
   declaration here, the page-level rule wins and the nav's `.gn-inner` collapses
   to 0px width on those pages. */
.viewport > .panel .gn-body { display: grid; grid-template-rows: 0fr; grid-template-columns: 1fr; transition: grid-template-rows .26s cubic-bezier(.4,0,.2,1); }
.viewport > .panel .gn-body.gn-open { grid-template-rows: 1fr; }
.viewport > .panel .gn-body > .gn-inner { overflow: hidden; }
/* Suppress the accordion + glyph-morph transitions for the first paint after a
   (re)load. On a full reload (Avo crossing) the nav is rebuilt and the controller
   re-opens the operator's saved branches; without this they'd visibly slide open
   ("collapse then expand") every time. The controller removes .gn-preload after the
   first frame, so genuine user toggles still animate. */
.viewport.gn-preload > .panel .gn-body,
.viewport.gn-preload > .panel .gn-ctl .gn-vt,
.viewport.gn-preload > .panel { transition: none !important; }

/* ----- rail (collapsed) ----- */
.viewport > .panel .gn-rail { display: none; flex-direction: column; align-items: center; gap: 3px; padding: 2px 0; }
.viewport.gn-railed > .panel .gn-rail { display: flex; }
.viewport > .panel .gn-rail-item { width: 38px; height: 34px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; color: var(--fg-muted); cursor: pointer; }
.viewport > .panel .gn-rail-item:hover, .viewport > .panel .gn-rail-item.gn-act { background: var(--color-slate-100); color: var(--fg); }

/* ----- rail-hover flyout (Phase 4 behavior; styles present) ----- */
.viewport > .panel .gn-flyout { position: absolute; left: 56px; width: 224px; background: var(--paper); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: 0 10px 32px rgba(15,23,42,.16); padding: 6px; z-index: 60; display: none; }
.viewport > .panel .gn-flyout.gn-show { display: block; }
.viewport > .panel .gn-flyout-h { font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--fg-faint); font-weight: 700; padding: 5px 8px 7px; }
.viewport > .panel .gn-fly-sub { padding: 6px 8px; font-size: 12.5px; font-weight: 600; color: var(--fg); }
.viewport > .panel .gn-fly-pg { display: block; text-decoration: none; padding: 5px 8px 5px 18px; font-size: 12.5px; color: var(--fg-muted); border-radius: var(--r-input); cursor: pointer; }
.viewport > .panel .gn-fly-pg:hover { background: var(--color-slate-100); color: var(--fg); }

/* ----- foot ----- */
.viewport > .panel .gn-foot { border-top: 1px solid var(--border); padding: 10px 14px; font-size: 12px; color: var(--fg-muted); display: flex; gap: 8px; align-items: center; white-space: nowrap; overflow: hidden; }
.viewport > .panel .gn-av { width: 24px; height: 24px; border-radius: 50%; background: var(--surface-2); color: var(--fg-muted); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; flex-shrink: 0; }
.viewport > .panel .gn-footname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.viewport > .panel .gn-signout-form { margin: 0; flex-shrink: 0; display: flex; }
.viewport > .panel .gn-signout { display: inline-flex; align-items: center; justify-content: center; padding: 4px; background: none; border: none; cursor: pointer; color: var(--fg-faint); border-radius: var(--r-input); line-height: 0; }
.viewport > .panel .gn-signout:hover { color: var(--fg); background: var(--color-slate-50); }
.viewport.gn-railed > .panel .gn-foot { padding: 10px 0; justify-content: center; }
.viewport.gn-railed > .panel .gn-foot .gn-footname, .viewport.gn-railed > .panel .gn-signout-form { display: none; }

/* ----- page-finder popover (Phase 4 behavior; styles present) ----- */
.viewport > .panel .gn-pop { position: absolute; left: 14px; top: 84px; width: 340px; background: var(--paper); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 16px 44px rgba(15,23,42,.22); overflow: hidden; z-index: 80; display: none; }
.viewport > .panel .gn-pop.gn-show { display: block; }
.viewport > .panel .gn-pop-in { display: flex; align-items: center; gap: 9px; padding: 11px 13px; border-bottom: 1px solid var(--border); }
.viewport > .panel .gn-pop-in input { border: none; outline: none; font: inherit; font-size: 14px; flex: 1; background: transparent; color: var(--fg); }
.viewport > .panel .gn-pop-list { max-height: 340px; overflow-y: auto; padding: 4px 0; }
.viewport > .panel .gn-pop-item { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; padding: 7px 14px; font-size: 13px; line-height: 1.3; color: var(--fg); cursor: pointer; text-decoration: none; }
.viewport > .panel .gn-pop-item[hidden] { display: none; }
.viewport > .panel .gn-pop-item:hover, .viewport > .panel .gn-pop-item.gn-sel { background: var(--color-slate-100); }
.viewport > .panel .gn-pop-path { color: var(--fg-faint); }
.viewport > .panel .gn-pop-sep { color: var(--color-slate-300); }
.viewport > .panel .gn-pop-leaf { color: var(--fg); font-weight: 600; }

/* ===== CONTENT — reflow model. The white content window is set off by the slate
   --viewport background: a --gn-gutter grey channel separates it from the nav on the
   left and from the window edge on the right, so it never touches an edge. The 1280
   column's left edge tracks max(nav width + gutter, natural centered margin): centered
   in the viewport when the nav fits in the margin, pushed right (keeping the gutter)
   when the nav reaches it.

   Content inset (padding) is hoisted here — every page rendered inside the frame
   inherits 24px / --s-6 between the card edge and its content. Modules must NOT
   set their own outer-page padding; doing so would double-inset. The previous
   module-owned pattern was the cause of the Sponsor Proposals 12px-inset bug
   (May 2026): with the rule unwritten, the module defaulted to --s-4. With the
   rule hoisted, the canon enforces itself. See foundations/app-frame.md and
   components/shared-page-shell/README.md. ===== */
.viewport > .shell { max-width: 1280px; margin: 0 auto; background: var(--paper); border-left: 1px solid var(--border); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: var(--s-6); }
/* >=768px: content left edge = max(nav width + gutter, centered margin); right edge
   keeps at least one gutter from the window (margin-right: gutter — when there's slack
   the over-constrained block grows the right margin, re-centering the capped column).
   The controller sets --content-x inline during the open/close animation (it adds the
   same gutter via w + GAP); at rest it's cleared and this responsive fallback takes
   over (recomputes on resize/zoom, no JS). Below 768px the overlay drawer keeps content
   full-width. The 768px split matches the JS controller's desktop matchMedia
   (min-width: 768px) — the drawer presentation is phone-only; tablets get the reflow
   nav. (This was 900px after #332 narrowed the drawer to 767px, which left a
   768–899px band where the opaque pinned nav overlaid the content.) */
@media (min-width: 768px) {
  .viewport > .shell {
    margin-left: var(--content-x, max(calc(var(--nav-w) + var(--gn-gutter)), calc((100% - 1280px) / 2)));
    margin-right: var(--gn-gutter);
  }
}
.viewport > .panel .gn-tb { height: 46px; border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 22px; font-size: 13px; color: var(--fg-muted); }
.viewport > .panel .gn-tb b { color: var(--fg); }
.viewport > .panel .gn-hint { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-faint); }
.viewport > .panel .gn-ct { padding: 22px 24px; overflow-y: auto; }
.viewport > .panel .gn-pt { font-size: 22px; font-weight: 700; margin: 0 0 8px; }
.viewport > .panel .gn-muted { color: var(--fg-muted); font-size: 13px; max-width: 64ch; line-height: 1.5; }

/* ===== Mobile presentation (< 768px) — one IA, two presentations =====
   The 280px pinned panel is invisible on a phone — there's no way into the nav at
   login. Below 768px the same server-rendered IA tree (same markup, same controller)
   is presented as: a persistent 52px top bar carrying a hamburger, and the tree in a
   slide-in drawer over a scrim. Desktop chrome (rail, hover flyout, ⌘K popover) is
   replaced by touch chrome (44px rows, 14px disclosures, inline find-a-page filter,
   ✕ close). See components/global-navigation README (mobile) + the NAV_MOBILE export. */
.viewport > .gn-mobile-topbar { display: none; }
.viewport > .gn-nav-backdrop { display: none; }
.viewport > .panel .gn-drawer-close { display: none; } /* ✕ — mobile only */
.viewport > .panel .gn-dsrch { display: none; }         /* inline filter — mobile only (desktop uses the ⌘K popover) */

@media (max-width: 767px) {
  /* --- persistent top bar: the only nav chrome always on screen --- */
  /* top offset clears the dev slot-indicator bar (var set only in dev; 0 in prod) —
     same reason as the Avo nav: a position:fixed bar ignores the slot bar's body padding. */
  .viewport > .gn-mobile-topbar { display: flex; align-items: center; gap: 10px; position: fixed; top: var(--ops-slot-bar-h, 0px); left: 0; right: 0; height: 52px; padding: 0 8px 0 12px; background: var(--paper); border-bottom: 1px solid var(--border); z-index: 40; }
  .viewport > .gn-mobile-topbar .gn-mtb-brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .viewport > .gn-mobile-topbar .gn-mtb-brand img { height: 22px; width: auto; display: block; border-radius: 4px; }
  .viewport > .gn-mobile-topbar .gn-mtb-wm { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: var(--fg-muted); white-space: nowrap; }
  .viewport > .gn-mobile-topbar .gn-mtb-spacer { flex: 1; }
  .viewport > .gn-mobile-topbar .gn-burger { width: 44px; height: 44px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: none; border: none; cursor: pointer; border-radius: var(--r-input); }
  .viewport > .gn-mobile-topbar .gn-burger span { width: 18px; height: 2px; background: var(--fg); border-radius: 1px; }
  .viewport > .gn-mobile-topbar .gn-burger:active { background: var(--color-slate-50); }

  /* --- content: single-column full-bleed below the bar; document scrolls --- */
  .viewport { height: auto; min-height: 100vh; overflow: visible; }
  .viewport > .shell { max-width: none; margin: 0; border-left: 0; border-right: 0; height: auto; min-height: 100vh; padding-top: 52px; }

  /* --- the panel becomes the drawer (overlay, never reflows content) --- */
  .viewport > .panel { position: fixed; left: 0; top: var(--ops-slot-bar-h, 0px); bottom: 0; height: auto; width: 86%; max-width: 340px; transform: translateX(-100%); transition: transform .26s cubic-bezier(.4,0,.2,1); box-shadow: 0 0 40px rgba(15,23,42,.18); z-index: 50; }
  .viewport.gn-drawer-open > .panel { transform: translateX(0); }
  .viewport.gn-drawer-open > .gn-nav-backdrop { display: block; position: fixed; inset: 0; background: rgba(15,23,42,.42); z-index: 45; }

  /* drawer is never railed; force the full presentation regardless of the desktop rail cookie */
  .viewport > .panel .gn-ptop { display: flex !important; }
  .viewport > .panel .gn-scroll { display: block !important; }
  .viewport > .panel .gn-collapse, .viewport > .panel .gn-railexpand, .viewport > .panel .gn-rail, .viewport > .panel .gn-flyout, .viewport > .panel .gn-srch, .viewport > .panel .gn-pop { display: none !important; }

  /* drawer head: brand + ✕ close */
  .viewport > .panel .gn-drawer-close { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; width: 40px; height: 40px; background: none; border: none; font-size: 20px; line-height: 1; color: var(--fg-muted); cursor: pointer; border-radius: var(--r-input); }
  .viewport > .panel .gn-drawer-close:active { background: var(--color-slate-50); }

  /* find-a-page: inline filter input */
  .viewport > .panel .gn-dsrch { display: flex; align-items: center; gap: 8px; margin: 10px 14px 6px; padding: 10px 11px; background: var(--color-slate-50); border: 1px solid var(--border-strong); border-radius: var(--r-input); }
  .viewport > .panel .gn-dsrch .gn-ic { color: var(--fg-faint); font-size: 13px; }
  .viewport > .panel .gn-dsrch input { flex: 1; border: none; outline: none; background: transparent; font: inherit; font-size: 14px; color: var(--fg); }
  .viewport > .panel .gn-dsrch input::placeholder { color: var(--fg-faint); }

  /* touch sizing: 44px rows, 14px disclosure box */
  .viewport > .panel .gn-r { min-height: 44px; height: auto; }
  .viewport > .panel .gn-lab { font-size: 14px; }
  .viewport > .panel .gn-c { width: 26px; }
  .viewport > .panel .gn-ctl { width: 14px; height: 14px; }
  .viewport > .panel .gn-ctl .gn-h { width: 6px; }
  .viewport > .panel .gn-ctl .gn-vt { height: 6px; }
  .viewport > .panel .gn-r.gn-filtered-out { display: none; }

  /* foot: larger avatar */
  .viewport > .panel .gn-av { width: 28px; height: 28px; font-size: 11px; }
}

/* Honor the user's motion preference — drop the only animations in the nav. */
@media (prefers-reduced-motion: reduce) {
  .viewport > .panel { transition: none; }
  .viewport > .panel .gn-body { transition: none; }
  .viewport > .panel .gn-ctl .gn-vt { transition: none; }
}