/*
 * WISEcode Intelligence — Sidebar (floating navigation)
 *
 * Restyles the EXISTING #sidebar markup (Components/Layout/Sidebar.razor) to
 * match the ip-b2b design-system navigation (.menu-nav-* in pages/agent-page.css):
 * a floating, rounded panel with a linen→white gradient, full-pill rows with
 * circular tinted icon discs, a soft (tinted) hover/active state shared by both
 * — instead of a solid blue fill — and an icon-rail collapse.
 *
 * This file ONLY changes look & feel — the nav content, structure and C# logic
 * are owned by Sidebar.razor and are intentionally untouched (see the
 * "2026-06-22 Arthur Color & Design" notes: match the look/feel/collapse, keep
 * the content).
 *
 * Loaded LAST in Components/App.razor: every rule here is scoped under the
 * #sidebar id so it wins on specificity over the older utility/component rules
 * baked into components.css and design-system.css (many of which use
 * !important). Keep selectors id-anchored so that ordering stays robust.
 */

:root {
  /* Geometry. Expanded width tracks ip-b2b's 268px rail; the rail is the design's 54px icon column
     (wise.css 5583-5591, --nav-rail-w), flush on the page's field. The gap is the mobile drawer's and the
     floating cards' breathing room from the viewport edges. */
  --sidebar-w: 272px;
  --sidebar-w-collapsed: 54px;
  --sidebar-gap: 12px;
  --sidebar-radius: 24px;
  /* History beside the rail (Shared/WISEai/ChatHistoryPanel): its width while open, else 0. */
  --wci-history-w: 0px;
}
@media (min-width: 769px) {
  body:has(.wci-history-panel.is-open) { --wci-history-w: 300px; }
  /* The History card is square on the side the WISEcode AI pane joins (ChatHistoryPanel.razor.css). With no pane
     beside it, it is a whole card. */
  body:not(:has(.wci-chat-dock.wiseai-dock-open)):not(:has(.wci-agent-shell)) .wci-history-panel {
    border-right: 1px solid var(--border);
    border-radius: 16px;
  }
}

/* ============================================================
   Floating container
   ============================================================ */
#sidebar.sidebar-shell {
  position: fixed;
  top: var(--sidebar-gap);
  left: var(--sidebar-gap);
  height: calc(100vh - (var(--sidebar-gap) * 2));
  /* White→linen gradient: white at the top, settling to warm linen at the
     bottom (matches the design). The page behind it (body bg-oyster-100) is the
     linen field the panel floats on. */
  background: linear-gradient(180deg, var(--color-white) 0%, var(--color-oyster-200) 100%);
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: var(--sidebar-radius);
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04), 0 8px 24px rgba(17, 24, 39, 0.06);
  transition:
    width 0.42s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.3s ease,
    box-shadow 0.3s ease;
}

/* The user menu (WciMenuPopover) is a fixed card inside the sidebar, so it can only paint as high as
   the sidebar's own stacking layer (z-40). The WISEcode AI dock pane is z-45, so with the sidebar
   collapsed the card ran underneath it and read as cut off. Lift the whole sidebar while the menu is
   open; closed, the sidebar keeps its usual layer. */
#sidebar.sidebar-shell:has(.wise-popover.open) { z-index: 100; }

/* The nav is ALWAYS the icon rail (Kevin, 2026-10-15): the panel is the rail's width, and hovering or tabbing
   into it opens the full menu as an overlay (js/wci/wci-sidebar-overlay.js sets data-overlay="open"). There
   is no pinned-open state, so no class says "expanded" or "collapsed" any more; the rail is "not open". */
#sidebar.sidebar-shell { width: var(--sidebar-w-collapsed); }

/* Main-content offset follows the RAIL's right edge (and History's, while it is open) plus a gap, always:
   the overlay floats over the page and never pushes it. Higher specificity (id) than the plain
   .main-content rules in design-system.css, so this wins without !important. The mobile block below zeroes
   it for the drawer. */
body:has(#sidebar.sidebar-shell) .main-content {
  margin-left: calc(var(--sidebar-w-collapsed) + var(--wci-history-w) + 16px);
}

/* ============================================================
   Header / logo
   ============================================================ */
#sidebar .sidebar-header-content {
  border-bottom: 1px solid rgba(17, 24, 39, 0.06);
}
/* The brand lockup: the wordmark with its tagline in the overlay and the drawer, the bug in the rail. The
   markup carries both and the rail rule (below) swaps them, so nothing waits on the circuit. */
#sidebar .sidebar-logo-bug { display: none; }

/* History (the design's #topbar-menu-toggle in .menu-brand-bar, wise.css 4047-4055, 5575): a bare 20px glyph in a
   32 x 28 hit area, pushed to the far right of the logo row. */
#sidebar .sidebar-history-toggle {
  flex-shrink: 0;
  width: 32px;
  min-height: 28px;
  padding: 2px 0;
  margin-left: auto;
}

/* "INTELLIGENCE™" tagline under the wordmark — right-aligned to the wordmark's
   right edge (the parent span is flex-col items-end). Mirrors the ip-b2b
   portfolio.html lockup: .topbar-tagline / .tagline-tm. */
#sidebar .sidebar-tagline {
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-oyster-600);
  line-height: 1;
  margin-top: 4px;
  white-space: nowrap;
}
#sidebar .sidebar-tagline .sidebar-tagline-tm {
  font-size: 0.65em;
  letter-spacing: 0;
  vertical-align: super;
  margin-left: 1px;
}

/* BETA badge pinned above the wordmark's top-right corner (ip-b2b wise.css .menu-brand-beta, 18ca5ad). */
#sidebar .sidebar-logo-full { position: relative; }
#sidebar .sidebar-beta {
  position: absolute;
  top: -9px;
  right: -22px;
  padding: 2px 4px;
  border-radius: 3px;
  background: var(--primary);
  color: #fff;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  pointer-events: none;
}

/* Scroll area — comfortable insets, slimmer when collapsed. A uniform 4px
   vertical rhythm between every row (ip-b2b .menu-nav gap) replaces the markup's
   mixed margins, so groups and single rows sit on the same grid. The rows
   themselves are WciNavItem (INTEL-389; a group is a row with child rows), styled by its own
   scoped sheet; this file only lays the column out. */
#sidebar > nav { padding: 18px 12px; display: flex; flex-direction: column; gap: 4px; }
#sidebar > nav > * { margin: 0 !important; }

/* Flat sections (Portfolio / Studio / Account): an inert uppercase label over
   always-visible full-size rows — no chevron, no expand state. */
#sidebar .nav-section { display: flex; flex-direction: column; gap: 4px; }
#sidebar .nav-section-label {
  padding: 10px 10px 2px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #474E58;                   /* ip-b2b --text-subtle */
  user-select: none;
}

/* ============================================================
   Remaining .nav-item rows: the footer account trigger, the Early Access promo
   card and the signed-out Sign In / Register links. Values mirror the ip-b2b
   design-system nav: full-pill rows, 44px tall, 600-weight neutral labels,
   12px (0.75rem) text, 10px icon→label gap.
   ============================================================ */
#sidebar .nav-item {
  border-radius: 9999px !important; /* full pill (ip-b2b --radius-pill), not a rounded rect */
  padding: 8px 10px !important;
  min-height: 44px;
  gap: 10px !important;             /* icon ↔ label (overrides markup gap-3 = 12px) */
  color: #111827;                   /* ip-b2b --text (neutral near-black, not oyster) */
  font-size: 0.75rem;               /* ip-b2b --fs-ui */
  font-weight: 600;                 /* ip-b2b nav item weight (was 500) */
  letter-spacing: 0.01em;
}

/* Labels: 12px to match --fs-ui (markup carries text-sm = 14px). */
#sidebar .nav-label:not(.material-icons) { font-size: 0.75rem !important; }

/* The promo card's icon sits in a circular tinted disc (ip-b2b .menu-nav-icon):
   a 28px primary-soft circle + inset primary ring, black glyph at rest. */
#sidebar .nav-item > .nav-icon {
  width: 28px;
  height: 28px;
  border-radius: 9999px;
  background: var(--color-primary-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 18%, transparent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px !important;       /* glyph size (overrides text-xl) */
  color: #111827 !important;        /* ip-b2b --text — black glyph at rest */
  line-height: 1 !important;
}
#sidebar .nav-item:hover > .nav-icon {
  color: var(--color-primary) !important;
}

/* Hover: a primary-soft pill with primary text + icon. Overrides the markup's
   hover:bg-oyster-100. */
#sidebar .nav-item:hover {
  background: var(--color-primary-soft) !important;
  color: var(--color-primary) !important;
}

/* ============================================================
   The icon rail and its hover overlay
   The nav always renders the whole menu (labels, groups, the wordmark); on a wide window it SHOWS as
   the rail until js/wci/wci-sidebar-overlay.js marks it data-overlay="open", which is the whole menu
   floating over the page. So every rule here is the rail: a wide window, overlay not open. Labels are
   visually hidden, not display:none, so every icon keeps its accessible name. A narrow window is the
   mobile drawer, which always shows the whole menu and never matches this block.
   ============================================================ */
@media (min-width: 769px) {
  /* The rail lies flat on the field, flush to the viewport's top, left and bottom, as the design's #menu-panel
     rail (wise.css 5606-5611: no fill, border, rounding or shadow). The overlay opens from the same edge and
     the same top, so no row moves when it opens; it is the card (below). */
  #sidebar.sidebar-shell {
    top: 0;
    left: 0;
    height: 100vh;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    /* The overlay's labels outrun the panel while its width animates; the panel clips them. */
    overflow: hidden;
    transition:
      width 0.2s cubic-bezier(0.4, 0, 0.2, 1),
      background-color 0.3s ease,
      box-shadow 0.3s ease;
  }

  /* The overlay: the full-width panel above the page, the AI dock pane (z 45) and the page's own layers,
     below every modal and popup layer (WciModal 2200 and up). The page does not move: the layout still
     reserves only the rail. The user menu lifts the shell to the same layer (above). */
  #sidebar.sidebar-shell[data-overlay="open"] {
    width: var(--sidebar-w);
    z-index: 100;
    background: linear-gradient(180deg, var(--color-white) 0%, var(--color-oyster-200) 100%);
    border-right: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 0 var(--sidebar-radius) var(--sidebar-radius) 0;
    box-shadow: 0 2px 4px rgba(17, 24, 39, 0.06), 0 16px 40px rgba(17, 24, 39, 0.16);
  }

  /* Every icon sits at the SAME x in the rail and the overlay (Kevin, 2026-10-23): the rail centres its 36px
     rows in the 54px column, so an icon's centre is 27px from the edge; the overlay's rows carry 10px of
     inset before their 28px disc (WciNavItem), so the overlay's column starts 3px in to put that disc's centre
     at 27px too. The footer and the promo follow the same line. */
  #sidebar.sidebar-shell[data-overlay="open"] > nav { padding: 18px 12px 18px 3px; }
  #sidebar.sidebar-shell[data-overlay="open"] > .border-t { padding: 16px 12px 16px 3px !important; }
  #sidebar.sidebar-shell[data-overlay="open"] .user-avatar-btn { padding: 4px 10px 4px 7px !important; }
  #sidebar.sidebar-shell[data-overlay="open"] .sidebar-promo-zone { padding: 0 12px 12px 3px; }

  /* Every row sits at the SAME height in the rail and the overlay (Kevin, 2026-10-16): the pointer that
     opens the overlay over an icon must land on that icon's row once it opens. So the header is one fixed
     height whichever logo shows, the nav's top inset is the same, rail rows are the overlay rows' 36px, and
     a section label keeps its line in the rail (invisible) instead of collapsing. Only widths change. */
  #sidebar.sidebar-shell .sidebar-header-content {
    box-sizing: border-box;
    height: 81px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex;
    align-items: center;
  }
  #sidebar.sidebar-shell .sidebar-header-row { width: 100%; }

  /* History shows only once the overlay is open, right of the logo; the collapsed rail is the bug alone (Kevin,
     2026-10-23). */
  #sidebar.sidebar-shell:not([data-overlay="open"]) .sidebar-history-toggle { display: none; }
  #sidebar.sidebar-shell .nav-section-label { white-space: nowrap; overflow: hidden; }

  #sidebar.sidebar-shell:not([data-overlay="open"]) .sidebar-header-content { padding-left: 8px !important; padding-right: 8px !important; }
  #sidebar.sidebar-shell:not([data-overlay="open"]) > .border-t { padding: 16px 4px !important; }
  /* The member row is one height in the rail and the overlay (its 28px chip there, the 34px chip and two lines
     here), so the chip's centre stays put when the overlay opens. */
  #sidebar.sidebar-shell .user-avatar-btn { min-height: 52px; }
  #sidebar.sidebar-shell:not([data-overlay="open"]) .sidebar-header-row { justify-content: center; }
  #sidebar.sidebar-shell:not([data-overlay="open"]) .sidebar-logo-full { display: none; }
  #sidebar.sidebar-shell:not([data-overlay="open"]) .sidebar-logo-bug { display: block; }

  #sidebar.sidebar-shell:not([data-overlay="open"]) > nav { padding: 18px 8px !important; align-items: center; }
  #sidebar.sidebar-shell:not([data-overlay="open"]) .nav-section { align-items: center; }
  #sidebar.sidebar-shell:not([data-overlay="open"]) .nav-section-label { visibility: hidden; }
  #sidebar.sidebar-shell:not([data-overlay="open"]) .sidebar-footer-text { display: none !important; }

  /* A label, the user's name and the promo's text: out of sight, still in the accessibility tree. */
  #sidebar.sidebar-shell:not([data-overlay="open"]) .menu-nav-label,
  #sidebar.sidebar-shell:not([data-overlay="open"]) .nav-label,
  #sidebar.sidebar-shell:not([data-overlay="open"]) .user-avatar-btn .user-info {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
  #sidebar.sidebar-shell:not([data-overlay="open"]) .menu-nav-chevron,
  #sidebar.sidebar-shell:not([data-overlay="open"]) .menu-nav-lock { display: none; }
  /* A group shows as its one icon row; its rows wait for the overlay (and stay out of the tab order). */
  #sidebar.sidebar-shell:not([data-overlay="open"]) .menu-nav-children { display: none; }
  #sidebar.sidebar-shell:not([data-overlay="open"]) .menu-nav-group { align-items: center; }

  /* The rail row: an icon box centred by the rail's column (the component sets no margin of its own). It is
     the overlay row's 36px, not the design's 32px rail box (wise.css 6028-6036), so rows do not drift when
     the overlay opens under the pointer. */
  #sidebar.sidebar-shell:not([data-overlay="open"]) .menu-nav-item {
    position: relative;
    justify-content: center;
    gap: 0;
    padding: 0;
    width: 36px;
    height: 36px;
    min-height: 36px;
  }
  /* Disc only on the lit row, so the icon-only chrome surfaces exactly one lit item (wise.css 5475-5511). */
  #sidebar.sidebar-shell:not([data-overlay="open"]) .menu-nav-item .menu-nav-icon { background: transparent; box-shadow: none; }
  #sidebar.sidebar-shell:not([data-overlay="open"]) .menu-nav-item .menu-nav-icon .material-symbols-outlined { color: var(--text); opacity: 0.6; }
  #sidebar.sidebar-shell:not([data-overlay="open"]) .menu-nav-item:hover .menu-nav-icon,
  #sidebar.sidebar-shell:not([data-overlay="open"]) .menu-nav-item.is-active .menu-nav-icon {
    background: var(--primary-soft);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 18%, transparent);
  }
  #sidebar.sidebar-shell:not([data-overlay="open"]) .menu-nav-item:hover .menu-nav-icon .material-symbols-outlined,
  #sidebar.sidebar-shell:not([data-overlay="open"]) .menu-nav-item.is-active .menu-nav-icon .material-symbols-outlined {
    color: var(--primary);
    opacity: 1;
  }

  /* The footer account trigger, the promo and the signed-out links: centred on their icon. */
  #sidebar.sidebar-shell:not([data-overlay="open"]) .nav-item,
  #sidebar.sidebar-shell:not([data-overlay="open"]) .user-avatar-btn {
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 4px !important;
    text-align: center !important;
  }
  /* Same 28px disc + 16px glyph as the overlay (the base disc rule supplies the disc). */
  #sidebar.sidebar-shell:not([data-overlay="open"]) .nav-icon {
    margin: 0 !important;
    font-size: 16px !important;
  }
  /* The member chip is its 28px rail size here (WciAvatarSize.Rail) and 34px in the overlay. */
  #sidebar.sidebar-shell:not([data-overlay="open"]) .wci-avatar--regular { --sc-avatar-size: 28px; font-size: 11px; }
  #sidebar.sidebar-shell:not([data-overlay="open"]) .adm-avatar.wci-avatar--regular { width: 28px; height: 28px; }

  /* The promo card shrinks to a circular icon chip; the lock hint's text would overflow the rail. */
  #sidebar.sidebar-shell:not([data-overlay="open"]) .sidebar-promo-zone { padding: 0 4px 10px; }
  #sidebar.sidebar-shell:not([data-overlay="open"]) .sidebar-promo { border-radius: 9999px !important; min-height: 0; }
  #sidebar.sidebar-shell:not([data-overlay="open"]).sidebar-locked .sidebar-lock-hint { display: none; }
}

/* ============================================================
   Footer
   ============================================================ */
#sidebar .border-t {
  border-top: 1px solid rgba(17, 24, 39, 0.06);
}

/* ============================================================
   Mobile shell
   ============================================================ */
.mobile-header {
  display: none;
}

.mobile-menu-backdrop {
  display: none;
}

@media (max-width: 768px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    padding-top: 64px;
  }

  .mobile-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 70;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 64px;
    padding: 10px 14px;
    background: rgba(253, 252, 248, 0.94);
    border-bottom: 1px solid rgba(17, 24, 39, 0.08);
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
    backdrop-filter: blur(14px);
  }

  .mobile-header-logo {
    display: inline-flex;
    align-items: center;
    min-width: 0;
  }

  .mobile-header-logo img {
    display: block;
    width: auto;
    height: 30px;
  }

  .mobile-menu-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(17, 24, 39, 0.10);
    border-radius: 9999px;
    background: #fff;
    color: var(--color-primary);
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.06);
  }

  .mobile-menu-button .material-icons {
    font-size: 22px;
    line-height: 1;
  }

  .mobile-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 55;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: rgba(17, 24, 39, 0.34);
    backdrop-filter: blur(2px);
  }

  #sidebar.sidebar-shell {
    z-index: 60;
    top: 76px;
    left: 10px;
    width: min(calc(100vw - 20px), 318px) !important;
    height: calc(100dvh - 88px);
    max-height: calc(100vh - 88px);
    transform: translateX(calc(-100% - 24px));
    transition:
      transform 0.28s ease,
      box-shadow 0.3s ease;
  }

  #sidebar.sidebar-shell.sidebar-mobile-open {
    transform: translateX(0);
    box-shadow: 0 18px 44px rgba(17, 24, 39, 0.22);
  }

  body:has(#sidebar.sidebar-shell) .main-content {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
    margin-left: 0 !important;
  }

  .main-content > .p-8 {
    padding: 1rem !important;
  }
}

/* ============================================================
   Early Access promo card (Studio & AI → /waitlist)
   One status-aware invitation pinned between the scroll area and the footer —
   the single global entry point that replaced master's scattered locked nav
   items. Carries .nav-item so it inherits the shared row plumbing (icon disc,
   collapse behavior, label hiding); the rules here re-skin it as a soft
   indigo-tinted card so it reads as an announcement, not a nav row. Declared
   AFTER the base nav rules so equal-specificity overrides win by order.
   ============================================================ */
#sidebar .sidebar-promo-zone {
  padding: 0 12px 12px;
  flex-shrink: 0;
}

#sidebar .sidebar-promo {
  border-radius: 18px !important;   /* card, not the nav pill */
  padding: 10px !important;
  gap: 10px !important;
  min-height: 52px;
  background:
    radial-gradient(140px 70px at 100% 0%, color-mix(in srgb, var(--color-mint-400) 22%, transparent), transparent 70%),
    color-mix(in srgb, var(--color-primary) 6%, var(--color-white)) !important;
  border: 1px solid color-mix(in srgb, var(--color-primary) 18%, transparent);
  color: #111827;
}
#sidebar .sidebar-promo:hover {
  background:
    radial-gradient(140px 70px at 100% 0%, color-mix(in srgb, var(--color-mint-400) 28%, transparent), transparent 70%),
    color-mix(in srgb, var(--color-primary) 11%, var(--color-white)) !important;
  color: #111827 !important;
}
/* Active (= on /waitlist): the same soft-primary treatment the nav rows use. */
#sidebar .sidebar-promo.sidebar-promo-active {
  background: var(--color-primary-soft) !important;
  border-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
}

/* Solid primary disc + white sparkle glyph, in every state — the one accent
   that makes the card pop against the plain rows (their discs stay soft). */
#sidebar .sidebar-promo > .nav-icon,
#sidebar .sidebar-promo:hover > .nav-icon {
  background: var(--color-primary) !important;
  box-shadow: none !important;
  color: var(--color-white) !important;
}

/* Two-line label: bold title over a primary-tinted status line. */
#sidebar .sidebar-promo-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
#sidebar .sidebar-promo-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.25;
  white-space: nowrap;
}
#sidebar .sidebar-promo-sub {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--color-primary);
  line-height: 1.3;
  white-space: nowrap;
}

/* ── Locked state (onboarding brand research in progress) ──────────────────────
   The sidebar stays fully visible so a just-signed-up user is oriented, but every
   destination is inert: pointer-events:none on the nav, promo, and footer disables
   both hrefs and @onclick. It's a UI lock only (typing a URL still works). A dimmed
   look plus the lock hint above the nav make the inertness read as intentional. */
#sidebar.sidebar-locked .sidebar-lock-hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 4px 16px 0;
  padding: 10px 12px;
  border: 1px dashed var(--oyster-200, #e2ddd3);
  border-radius: 12px;
  background: var(--oyster-50, #faf8f4);
  color: var(--oyster-600, #6b6357);
  font-size: 0.75rem;
  line-height: 1.3;
}
#sidebar.sidebar-locked .sidebar-lock-hint-ico {
  font-size: 16px;
  line-height: 1.3;
  flex-shrink: 0;
}
/* Every destination is inert while locked: disable all links (nav, logo, promo, user-menu) and the
   footer button that opens the user menu. The mobile menu toggle stays live (harmless, no nav).
   Sidebar.razor also puts `inert` on the nav, the promo zone and the footer while locked, which is
   what stops keyboard activation and assistive technology; this rule covers the pointer (and the
   logo link, which stays reachable by keyboard as the way home). */
#sidebar.sidebar-locked a,
#sidebar.sidebar-locked nav button,
#sidebar.sidebar-locked .user-avatar-btn {
  pointer-events: none;
}
/* Dim the working regions so the inertness reads as intentional; leave the logo at full strength. */
#sidebar.sidebar-locked nav,
#sidebar.sidebar-locked .sidebar-promo-zone,
#sidebar.sidebar-locked .user-avatar-btn {
  opacity: 0.5;
}