/* Locked report-length advisory line — appears under any report-length
       <select> when one or more tiers are gated by the user's training
       level (Long → Apprentice, Detailed → Analyst). Renders below the
       schedule modal's select and the agent material tool's select. */
    .report-length-lock-advisory {
      display: flex; align-items: flex-start; gap: 6px;
      margin: 6px 0 0 0;
      padding: 6px 10px;
      border-radius: 8px;
      background: var(--surface-warm);
      border: 1px solid var(--warning-border-soft);
      color: var(--bronze-deep);
      font-size: 11.5px; line-height: 1.4;
    }
    .report-length-lock-advisory strong { color: var(--ink-navy); font-weight: 800; }
    .report-length-lock-icon { font-size: 12px; line-height: 1.3; flex-shrink: 0; }
    .report-length-lock-link {
      color: var(--ink-slate); font-weight: 700; text-decoration: none;
      margin-left: 4px; white-space: nowrap;
    }
    .report-length-lock-link:hover { text-decoration: underline; }

    /* ============================================================
       Full-screen loading overlay — used when clicking admin links
       (System Operations toolbox + admin shell nav). The admin pages
       run heavy DB queries; this gives instant feedback so the user
       knows the click was registered. Lazy-mounted by base_shell.js
       on first use, cleared on the pageshow event.
    ============================================================ */
    .app-fullscreen-loading-overlay {
      position: fixed;
      inset: 0;
      z-index: 2147483600;  /* above topbar (1245) and overlays */
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(28, 51, 67, 0.78);
      backdrop-filter: blur(2px);
      opacity: 0;
      pointer-events: none;
      transition: opacity 140ms ease;
    }
    .app-fullscreen-loading-overlay.is-visible {
      opacity: 1;
      pointer-events: auto;
    }
    .app-fullscreen-loading-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 18px;
      padding: 32px 44px;
      border-radius: 16px;
      background: var(--surface-white);
      box-shadow: 0 20px 50px rgba(20, 40, 60, 0.35);
      max-width: 90vw;
    }
    .app-fullscreen-loading-spinner {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: 4px solid rgba(28, 51, 67, 0.15);
      border-top-color: var(--danger-text-deep);
      animation: app-fullscreen-loading-spin 720ms linear infinite;
    }
    .app-fullscreen-loading-label {
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0.02em;
      color: var(--ink-navy);
      text-align: center;
    }
    @keyframes app-fullscreen-loading-spin {
      to { transform: rotate(360deg); }
    }
    @media (prefers-reduced-motion: reduce) {
      .app-fullscreen-loading-overlay { transition: none; }
      .app-fullscreen-loading-spinner { animation-duration: 1600ms; }
    }

    /* ============================================================
       Menu-nav loading overlay — used ONLY when a user clicks an
       item in the left navigation (rail, drawer, bottom-tab, more-
       sheet). Visually lighter than the admin overlay: a translucent
       scrim that lets the user still see the page underneath, plus
       a small centered card with a spinner + "Opening X…" label.
    ============================================================ */
    .app-menu-nav-loading-overlay {
      position: fixed;
      inset: 0;
      z-index: 2147483500;  /* below admin overlay, above topbar */
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(13, 23, 32, 0.32);
      backdrop-filter: blur(1px);
      opacity: 0;
      pointer-events: none;
      transition: opacity 160ms ease;
    }
    .app-menu-nav-loading-overlay.is-visible {
      opacity: 1;
      pointer-events: auto;
    }
    .app-menu-nav-loading-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      padding: 22px 32px;
      min-width: 220px;
      max-width: 90vw;
      border-radius: 16px;
      background: var(--surface-white);
      box-shadow: 0 18px 40px rgba(13, 23, 32, 0.25);
      animation: app-menu-nav-loading-pop 220ms ease-out both;
    }
    .app-menu-nav-loading-spinner {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: 3px solid rgba(28, 51, 67, 0.14);
      border-top-color: var(--info-teal-text-deep);
      animation: app-fullscreen-loading-spin 720ms linear infinite;
    }
    .app-menu-nav-loading-label {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.02em;
      color: var(--ink-navy);
      text-align: center;
    }
    @keyframes app-menu-nav-loading-pop {
      from { transform: scale(0.92); opacity: 0; }
      to   { transform: scale(1);    opacity: 1; }
    }
    @media (prefers-reduced-motion: reduce) {
      .app-menu-nav-loading-overlay { transition: none; }
      .app-menu-nav-loading-card { animation: none; }
      .app-menu-nav-loading-spinner { animation-duration: 1600ms; }
    }

  /* ================================================================
     PERSISTENT NAV RAIL + MOBILE BOTTOM NAV
     ----------------------------------------------------------------
     Replaces the legacy burger + sidebar drawer with:
       - Desktop (≥1024px): a 64px collapsed rail that expands to
         240px on hover/focus or when pinned. Hover-expand overlays
         the content (no layout shift). Pin reflows the layout.
       - Mobile (<768px): a fixed bottom nav with 4 primary tabs +
         "More" sheet for secondary destinations.
       - Tablet (768–1023px): rail visible in tap-to-expand mode.
     The old .app-shell-menu-toggle (burger) and .app-shell-sidebar
     drawer stay in the DOM but are display:none at all sizes.
     ================================================================ */

  :root {
    --app-shell-rail-collapsed-w: 64px;
    --app-shell-rail-expanded-w: 240px;
    --app-shell-rail-z: 1500;
    --app-shell-bottom-nav-h: 60px;
  }

  /* Hide the legacy burger + drawer everywhere. The IIFE-level event
     handlers still reference them, so leaving them in the DOM keeps
     the topbar IIFE's null-guard happy. */
  .app-shell-menu-toggle,
  .app-shell-sidebar,
  .app-shell-sidebar-overlay { display: none !important; }

  /* ---------- Desktop rail ---------- */
  .app-shell-rail {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--app-shell-rail-collapsed-w);
    z-index: var(--app-shell-rail-z);
    display: none;
    background: linear-gradient(180deg, var(--brand-deep) 0%, var(--brand-deep) 100%);
    color: var(--surface-mint-deep);
    border-right: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.04), 18px 0 32px -28px rgba(8, 26, 22, 0.45);
    transition: width 0.18s ease;
    overflow: hidden;
  }
  .app-shell-rail-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    /* Generous bottom padding so the pin button is comfortably lifted
       off the viewport edge. The safe-area-inset-bottom is also added
       in case the rail renders on a device with a bottom indicator. */
    padding: 12px 0 calc(44px + env(safe-area-inset-bottom, 0px));
    gap: 4px;
  }
  /* Explicit foot styling — the pin button used to inherit nothing and
     could end up visually clipped or compressed depending on how the
     parent flex container distributed remaining space. Pin button has
     its own row with a thin divider above. */
  .app-shell-rail-foot {
    flex-shrink: 0;
    padding-top: 8px;
    margin-top: 6px;
    border-top: 1px solid rgba(255,255,255,0.08);
  }
  .app-shell-rail-brand {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 8px 12px 12px;
    color: inherit;
    text-decoration: none;
    flex-shrink: 0;
  }
  .app-shell-rail-brand-mark {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: block;
    border-radius: 11px;
    object-fit: contain;
    box-shadow: 0 8px 18px rgba(0,0,0,0.16);
    opacity: 1;
    transition: width 0.14s ease, flex-basis 0.14s ease, opacity 0.12s ease;
  }
  .app-shell-rail-brand-logo {
    display: block;
    width: 0;
    height: 48px;
    flex: 0 0 0;
    box-sizing: border-box;
    padding: 4px 8px;
    border-radius: 12px;
    background: rgba(245, 239, 227, 0.5);
    border: 1px solid rgba(255,255,255,0.36);
    object-fit: contain;
    object-position: left center;
    opacity: 0;
    overflow: hidden;
    box-shadow: 0 8px 18px rgba(0,0,0,0.14);
    transition: width 0.14s ease, flex-basis 0.14s ease, opacity 0.14s ease;
  }
  .app-shell-rail-brand-text {
    margin-left: 10px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(241, 248, 234, 0.92);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.14s ease;
  }
  .app-shell-rail-list {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .app-shell-rail-divider {
    height: 1px;
    margin: 6px 12px;
    background: rgba(255,255,255,0.08);
  }
  .app-shell-rail-item,
  .app-shell-rail-pin {
    position: relative;
    display: flex;
    align-items: center;
    /* No gap while collapsed (copy is display:none and takes no space).
       Gap reappears alongside the copy when the rail expands. */
    gap: 0;
    /* Padding stays constant between collapsed/expanded so the icon
       doesn't jump horizontally or vertically when the rail opens.
       With rail 64px and item margin 8px on each side, the item is
       48px wide; padding-left:4px + icon 40px + padding-right:4px
       puts the icon perfectly centered. In the expanded rail
       (240px), the same padding-left keeps the icon at the same
       offset from the rail's left edge, so it appears stationary. */
    padding: 10px 4px;
    margin: 0 8px;
    justify-content: flex-start;
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    outline-offset: 2px;
  }
  .app-shell-rail-pin {
    margin-top: auto;
    color: var(--surface-mint-deep);
  }
  .app-shell-rail-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 11px;
    background: rgba(255,255,255,0.06);
    color: var(--positive-text-deep);
    font-size: 20px;
    line-height: 1;
  }
  .app-shell-rail-copy {
    flex: 1 1 auto;
    min-width: 0;
    /* Collapsed: copy is completely out of layout so the icon can be
       perfectly centered in the 64px rail. The expansion selectors
       below switch this to display:flex when the rail expands. */
    display: none;
    flex-direction: column;
    gap: 2px;
    opacity: 0;
    transform: translateX(-4px);
    pointer-events: none;
    transition: opacity 0.14s ease, transform 0.14s ease;
  }
  .app-shell-rail-label {
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .app-shell-rail-sub {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: rgba(217, 231, 212, 0.62);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .app-shell-rail-item.is-active .app-shell-rail-sub { color: rgba(255,255,255,0.72); }
  .app-shell-rail-label-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(255, 212, 122, 0.16);
    color: var(--gold-bright);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    vertical-align: middle;
  }
  .app-shell-rail-section { margin: 4px 0; }
  .app-shell-rail-section + .app-shell-rail-section { margin-top: 10px; }
  .app-shell-rail-section-label {
    /* Round 4: bumped opacity from 0.45 → 0.78 and lightened the
       base color so MAIN / TOOLS read on the dark green rail when
       the panel is pinned/expanded. Thin top border separator helps
       the eye anchor on each section. */
    padding: 8px 16px 4px;
    margin-top: 4px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(241, 248, 234, 0.78);
    border-top: 1px solid rgba(241, 248, 234, 0.10);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.14s ease;
    white-space: nowrap;
  }
  .app-shell-rail-section:first-child .app-shell-rail-section-label {
    border-top: 0;
    margin-top: 0;
  }
  /* Tools items are noise when the rail is collapsed (no labels visible).
     Hide them so the collapsed rail stays scannable; they appear when
     the rail expands. */
  .app-shell-rail-section-tools { display: none; }
  .app-shell-rail-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 0;
  }
  .app-shell-rail-scroll::-webkit-scrollbar { width: 6px; }
  .app-shell-rail-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border-radius: 6px; }
  .app-shell-rail-item:hover,
  .app-shell-rail-pin:hover {
    background: rgba(255,255,255,0.10);
    color: var(--surface-white);
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.22);
  }
  .app-shell-rail-item:hover .app-shell-rail-icon,
  .app-shell-rail-pin:hover .app-shell-rail-icon {
    background: rgba(255,255,255,0.14);
    color: var(--surface-white);
  }
  /* Previously this rule expanded the label + subtitle to wrap on
     hover so the user could read clipped copy. After the subtitles
     were shortened that became counterproductive — each hovered item
     grew taller mid-pass and pushed later items down, which read as
     "the menu briefly expanded bigger than it should." Removed; the
     lift effect alone signals focus, and the subtitles fit on one
     line at the rail's expanded width. */
  .app-shell-rail-item:focus-visible,
  .app-shell-rail-pin:focus-visible {
    outline: 2px solid var(--gold-bright);
    outline-offset: 2px;
  }
  .app-shell-rail-item.is-active {
    background: rgba(255,255,255,0.12);
    color: var(--surface-white);
  }
  .app-shell-rail-item.is-active::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold-accent) 100%);
  }
  .app-shell-rail-item.is-active .app-shell-rail-icon {
    background: linear-gradient(180deg, var(--brand-deep) 0%, var(--positive-border-dark) 100%);
    color: var(--surface-white);
  }
  .app-shell-rail-item-admin .app-shell-rail-icon { background: rgba(244, 200, 100, 0.18); color: var(--gold-bright); }

  /* Tooltip on collapsed state (shown for icon-only items). Hidden
     while the rail is expanded (label is visible inline instead). */
  .app-shell-rail-tooltip {
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
    background: var(--ink-navy);
    color: var(--surface-cream);
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s ease, transform 0.12s ease, visibility 0s linear 0.12s;
    z-index: 1;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  }
  /* Tooltip is only meaningful when the rail is in icon-only mode.
     Once expansion happens (hover/pin/focus-within), the inline label
     replaces the tooltip, and the .app-shell-rail-tooltip rules
     further down hide it via display:none. */
  .app-shell-rail:not(:hover):not([data-pinned="1"]):not([data-hover-expanded="1"]):not(:focus-within) .app-shell-rail-item:focus-visible .app-shell-rail-tooltip,
  .app-shell-rail:not(:hover):not([data-pinned="1"]):not([data-hover-expanded="1"]):not(:focus-within) .app-shell-rail-pin:focus-visible .app-shell-rail-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
    transition: opacity 0.12s ease, transform 0.12s ease, visibility 0s;
  }
  /* BUGFIX: rail didn't expand on hover — added :hover to the
     expansion selector so the CSS expands the rail immediately when
     the cursor enters, no JS delay required. The JS hover handler
     still runs to set [data-hover-expanded] for compatibility with
     keyboard focus-in / focus-out edge cases, but it's no longer the
     primary trigger. */
  /* Phase 16.1 — added `html.app-shell-rail-pinned .app-shell-rail`
     as a parallel expanded-state trigger. The inline head script in
     base.html sets that class synchronously from the same localStorage
     key the deferred JS uses, so first paint reflects the user's
     stored preference. Without this rule, the rail rendered at its
     collapsed width on first paint and then snapped open ~200ms
     later when the body-tail JS ran — and a cursor sitting over
     the rail at that moment locked in :hover-expansion that read
     as "this page is permanently expanded".

     Mirror rule for the inner expanded-only blocks (copy, item,
     section-label, section-tools, tooltip) appears alongside each
     of those further down in this file. */
  .app-shell-rail:hover,
  .app-shell-rail[data-hover-expanded="1"],
  .app-shell-rail[data-pinned="1"],
  .app-shell-rail:focus-within,
  html.app-shell-rail-pinned .app-shell-rail {
    width: var(--app-shell-rail-expanded-w);
  }
  /* Auto-collapse on link click: when the user picks a destination, the
     JS adds .is-force-collapse so the rail snaps shut immediately,
     rather than staying open while the next page loads under the
     cursor. Specificity beats the plain :hover rule above. */
  .app-shell-rail.is-force-collapse,
  .app-shell-rail.is-force-collapse:hover,
  .app-shell-rail.is-force-collapse:focus-within {
    width: var(--app-shell-rail-collapsed-w);
  }
  .app-shell-rail.is-force-collapse .app-shell-rail-copy,
  .app-shell-rail.is-force-collapse:hover .app-shell-rail-copy,
  .app-shell-rail.is-force-collapse:focus-within .app-shell-rail-copy {
    display: none;
  }
  .app-shell-rail.is-force-collapse .app-shell-rail-section-tools,
  .app-shell-rail.is-force-collapse:hover .app-shell-rail-section-tools,
  .app-shell-rail.is-force-collapse:focus-within .app-shell-rail-section-tools {
    display: none;
  }
  .app-shell-rail.is-force-collapse .app-shell-rail-item,
  .app-shell-rail.is-force-collapse:hover .app-shell-rail-item,
  .app-shell-rail.is-force-collapse:focus-within .app-shell-rail-item,
  .app-shell-rail.is-force-collapse .app-shell-rail-pin,
  .app-shell-rail.is-force-collapse:hover .app-shell-rail-pin,
  .app-shell-rail.is-force-collapse:focus-within .app-shell-rail-pin {
    gap: 0;
  }
  .app-shell-rail:hover .app-shell-rail-copy,
  .app-shell-rail[data-hover-expanded="1"] .app-shell-rail-copy,
  .app-shell-rail[data-pinned="1"] .app-shell-rail-copy,
  .app-shell-rail:focus-within .app-shell-rail-copy,
  html.app-shell-rail-pinned .app-shell-rail .app-shell-rail-copy {
    display: flex;
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
  }
  .app-shell-rail:hover .app-shell-rail-brand-mark,
  .app-shell-rail[data-hover-expanded="1"] .app-shell-rail-brand-mark,
  .app-shell-rail[data-pinned="1"] .app-shell-rail-brand-mark,
  .app-shell-rail:focus-within .app-shell-rail-brand-mark,
  html.app-shell-rail-pinned .app-shell-rail .app-shell-rail-brand-mark {
    width: 0;
    flex-basis: 0;
    opacity: 0;
  }
  .app-shell-rail:hover .app-shell-rail-brand-logo,
  .app-shell-rail[data-hover-expanded="1"] .app-shell-rail-brand-logo,
  .app-shell-rail[data-pinned="1"] .app-shell-rail-brand-logo,
  .app-shell-rail:focus-within .app-shell-rail-brand-logo,
  html.app-shell-rail-pinned .app-shell-rail .app-shell-rail-brand-logo {
    width: 216px;
    flex-basis: 216px;
    opacity: 1;
  }
  .app-shell-rail:hover .app-shell-rail-brand-text,
  .app-shell-rail[data-hover-expanded="1"] .app-shell-rail-brand-text,
  .app-shell-rail[data-pinned="1"] .app-shell-rail-brand-text,
  .app-shell-rail:focus-within .app-shell-rail-brand-text,
  html.app-shell-rail-pinned .app-shell-rail .app-shell-rail-brand-text {
    opacity: 1;
    pointer-events: auto;
  }
  /* When expanded, add the gap between icon and copy. Padding stays
     unchanged from the base rule so the icon's horizontal + vertical
     position doesn't shift when the rail opens. */
  .app-shell-rail:hover .app-shell-rail-item,
  .app-shell-rail:hover .app-shell-rail-pin,
  .app-shell-rail[data-hover-expanded="1"] .app-shell-rail-item,
  .app-shell-rail[data-hover-expanded="1"] .app-shell-rail-pin,
  .app-shell-rail[data-pinned="1"] .app-shell-rail-item,
  .app-shell-rail[data-pinned="1"] .app-shell-rail-pin,
  .app-shell-rail:focus-within .app-shell-rail-item,
  .app-shell-rail:focus-within .app-shell-rail-pin,
  html.app-shell-rail-pinned .app-shell-rail .app-shell-rail-item,
  html.app-shell-rail-pinned .app-shell-rail .app-shell-rail-pin {
    gap: 12px;
  }
  .app-shell-rail:hover .app-shell-rail-section-label,
  .app-shell-rail[data-hover-expanded="1"] .app-shell-rail-section-label,
  .app-shell-rail[data-pinned="1"] .app-shell-rail-section-label,
  .app-shell-rail:focus-within .app-shell-rail-section-label,
  html.app-shell-rail-pinned .app-shell-rail .app-shell-rail-section-label {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
  }
  .app-shell-rail:hover .app-shell-rail-section-tools,
  .app-shell-rail[data-hover-expanded="1"] .app-shell-rail-section-tools,
  .app-shell-rail[data-pinned="1"] .app-shell-rail-section-tools,
  .app-shell-rail:focus-within .app-shell-rail-section-tools,
  html.app-shell-rail-pinned .app-shell-rail .app-shell-rail-section-tools {
    display: block;
  }
  .app-shell-rail:hover .app-shell-rail-tooltip,
  .app-shell-rail[data-hover-expanded="1"] .app-shell-rail-tooltip,
  .app-shell-rail[data-pinned="1"] .app-shell-rail-tooltip,
  .app-shell-rail:focus-within .app-shell-rail-tooltip,
  html.app-shell-rail-pinned .app-shell-rail .app-shell-rail-tooltip {
    display: none;
  }

  /* ---------- Desktop layout: show the rail and reserve space ----------
     The rail is position:fixed at left:0, so it overlays anything that
     sits in its column. The topbar baseline is left:20px / right:20px,
     which would put its left border under the rail. We shift the
     topbar's left edge past the rail and add page padding so content
     doesn't get clipped. */
  @media (min-width: 1024px) {
    .app-shell-rail { display: block; }
    .app-shell-page { padding-left: var(--app-shell-rail-collapsed-w); }
    /* +8px gap between rail and topbar so its border is clearly
       visible rather than flush against the rail edge. */
    .app-shell-topbar { left: calc(var(--app-shell-rail-collapsed-w) + 8px); }
    /* When pinned, reflow the layout to the expanded rail width. */
    html.app-shell-rail-pinned .app-shell-page { padding-left: var(--app-shell-rail-expanded-w); }
    html.app-shell-rail-pinned .app-shell-topbar { left: calc(var(--app-shell-rail-expanded-w) + 8px); }
  }

  /* ---------- Mobile bottom nav ---------- */
  .app-shell-bottom-nav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: calc(var(--app-shell-bottom-nav-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    display: none;
    align-items: stretch;
    background: var(--surface-warm-warning);
    border-top: 1px solid var(--border-warm-soft);
    z-index: 1450;
    box-shadow: 0 -6px 18px rgba(8, 26, 22, 0.06);
  }
  .app-shell-bottom-tab {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: transparent;
    border: 0;
    text-decoration: none;
    color: var(--ink-slate);
    font: inherit;
    cursor: pointer;
    position: relative;
    padding: 4px 6px 6px;
  }
  .app-shell-bottom-tab-icon {
    font-size: 18px;
    line-height: 1;
  }
  .app-shell-bottom-tab-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .app-shell-bottom-tab.is-active {
    color: var(--ink-navy);
  }
  .app-shell-bottom-tab.is-active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 18%;
    right: 18%;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(90deg, var(--brand-deep) 0%, var(--positive-border-dark) 100%);
  }
  .app-shell-bottom-tab.is-active .app-shell-bottom-tab-icon { transform: scale(1.06); }
  .app-shell-bottom-tab:focus-visible { outline: 2px solid var(--ink-navy); outline-offset: -3px; }
  /* Show the bottom-tab nav (and reserve page padding for it) on phone
     AND tablet — the left rail only kicks in at ≥1024px, so without
     this widening the 768–1023px range had NO primary nav surface other
     than the topbar. Bumped 2026-05-16 after a tablet-navigation
     regression report. */
  @media (max-width: 1023px) {
    .app-shell-bottom-nav { display: flex; }
    /* Reserve space at the bottom of the page so content doesn't sit
       under the nav. The existing --agent-widget-offset already adds
       padding-bottom — we extend it on mobile + tablet. */
    .app-shell-page { padding-bottom: calc(var(--app-shell-bottom-nav-h) + 16px + env(safe-area-inset-bottom, 0px)); }
    /* Float the AGENT 007 launcher above the bottom nav. */
    .global-agent-chat-launcher-dock {
      bottom: calc(var(--app-shell-bottom-nav-h) + 14px + env(safe-area-inset-bottom, 0px)) !important;
    }
  }

  /* ---------- More sheet ---------- */
  .app-shell-more-sheet-scrim {
    position: fixed; inset: 0;
    background: rgba(20, 28, 32, 0.42);
    z-index: 1490;
    opacity: 0;
    transition: opacity 0.18s ease;
  }
  .app-shell-more-sheet-scrim.is-open { opacity: 1; }
  .app-shell-more-sheet {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1495;
    background: var(--surface-white);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -14px 32px rgba(8, 26, 22, 0.16);
    max-height: min(86vh, 720px);
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.22s ease;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .app-shell-more-sheet.is-open { transform: translateY(0); }
  .app-shell-more-sheet-handle {
    width: 44px;
    height: 4px;
    border-radius: 999px;
    background: rgba(28,51,67,0.18);
    margin: 8px auto 4px;
  }
  .app-shell-more-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 18px 6px;
  }
  .app-shell-more-sheet-title {
    margin: 0;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-navy);
  }
  .app-shell-more-sheet-close {
    width: 36px; height: 36px;
    border: 1px solid var(--border-pale);
    border-radius: 12px;
    background: var(--surface-pale-cool);
    color: var(--ink-navy);
    font-size: 20px;
    cursor: pointer;
  }
  .app-shell-more-sheet-body {
    padding: 6px 14px 18px;
    overflow-y: auto;
    flex: 1 1 auto;
  }
  .app-shell-more-sheet-section { margin-top: 14px; }
  .app-shell-more-sheet-section-title {
    margin: 0 6px 8px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-muted);
  }
  .app-shell-more-sheet-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    color: var(--ink-navy);
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
  }
  .app-shell-more-sheet-link:hover,
  .app-shell-more-sheet-link:focus-visible {
    background: var(--surface-pale-cool);
    outline: none;
  }
  .app-shell-more-sheet-link.is-active {
    background: linear-gradient(180deg, var(--ink-slate) 0%, var(--info-teal-bg-bright) 100%);
    color: var(--surface-white);
  }
  .app-shell-more-sheet-link-icon {
    width: 32px; height: 32px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(28,51,67,0.08);
    color: var(--ink-navy);
    font-size: 15px;
    line-height: 1;
    flex: 0 0 32px;
  }
  .app-shell-more-sheet-link.is-active .app-shell-more-sheet-link-icon {
    background: rgba(255,255,255,0.18);
    color: var(--surface-white);
  }
  .app-shell-more-sheet-link-secondary { color: var(--danger-text-deep); }
  .app-shell-more-sheet-link-secondary .app-shell-more-sheet-link-icon { background: rgba(122,46,24,0.10); color: var(--danger-text-deep); }

  /* Hide the bottom-tab nav on desktop (≥1024px). The rail takes over
     at that breakpoint. Mirrors the show-rule above. */
  @media (min-width: 1024px) {
    .app-shell-bottom-nav,
    .app-shell-more-sheet,
    .app-shell-more-sheet-scrim { display: none !important; }
  }

  /* ---------- Reduced motion ---------- */
  @media (prefers-reduced-motion: reduce) {
    .app-shell-rail,
    .app-shell-rail-label,
    .app-shell-rail-brand-text,
    .app-shell-rail-tooltip,
    .app-shell-more-sheet,
    .app-shell-more-sheet-scrim,
    .app-shell-bottom-tab.is-active .app-shell-bottom-tab-icon {
      transition: none;
    }
  }

  /* ================================================================
     SKELETON LOADERS + EMPTY-STATE CONVENTION
     ----------------------------------------------------------------
     Shared primitives:
       .skel-line    — short horizontal placeholder line
       .skel-block   — rectangular block (thumbnail / image stand-in)
       .skel-pill    — pill-shaped placeholder (chip / button)
       .skel-circle  — circular placeholder (avatar / icon dot)
     All four share a 1.4s left-to-right shimmer; reduced-motion
     replaces it with a static muted background.

     Empty-state variants:
       .empty-state-record — zero items in a list/section
       .empty-state-error  — data couldn't load
       .empty-state-field  — single missing value, muted inline text
     ================================================================ */

  .skel-line,
  .skel-block,
  .skel-pill,
  .skel-circle {
    display: block;
    background: linear-gradient(90deg, var(--surface-mint) 0%, var(--surface-pale-cool) 50%, var(--surface-mint) 100%);
    background-size: 200% 100%;
    animation: skel-shimmer 1.4s linear infinite;
    border-radius: 6px;
    color: transparent;
    user-select: none;
  }
  .skel-line { height: 12px; }
  .skel-pill { height: 18px; border-radius: 999px; display: inline-block; vertical-align: middle; margin-right: 6px; }
  .skel-circle { border-radius: 999px; }
  @keyframes skel-shimmer {
    0%   { background-position: 200% 50%; }
    100% { background-position: -200% 50%; }
  }
  @media (prefers-reduced-motion: reduce) {
    .skel-line,
    .skel-block,
    .skel-pill,
    .skel-circle {
      animation: none;
      background: var(--surface-mint);
    }
  }

  /* Skeleton variants matching the actual /videos card
     geometry. Real "Latest" cards use a 102×57 thumbnail; the
     "Recommended" section uses 135×75. Row height is dominated by
     the thumbnail, so matching thumb size + a compact 2-line copy
     block keeps the skeleton's row height within a few pixels of
     the real card. */
  .latest-skeleton-list { gap: 8px; }
  .latest-skeleton-card {
    pointer-events: none;
    opacity: 0.9;
  }
  .latest-skeleton-thumb {
    border-radius: 10px;
    display: block;
  }
  .latest-skeleton-thumb-latest { width: 102px; height: 57px; }
  .latest-skeleton-thumb-recommended { width: 135px; height: 75px; }
  .latest-skeleton-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
  }
  .latest-skeleton-action-wrap {
    align-self: center;
    justify-self: end;
  }
  .latest-skeleton-action {
    width: 28px;
    height: 28px;
    border-radius: 8px;
  }
  @media (max-width: 720px) {
    .latest-skeleton-thumb-latest,
    .latest-skeleton-thumb-recommended {
      width: 100%;
      max-width: 100%;
      height: auto;
      aspect-ratio: 16 / 9;
    }
  }

  /* Skeleton variants for report-history rows (Phase 1 — partial). */
  .report-skeleton-list { display: flex; flex-direction: column; gap: 10px; }
  .report-skeleton-card {
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--surface-white);
    border: 1px solid var(--surface-mint);
    pointer-events: none;
  }
  .report-skeleton-headline { display: flex; gap: 6px; flex-wrap: wrap; }
  .report-skeleton-meta {
    display: flex;
    gap: 14px;
    margin-top: 12px;
    flex-wrap: wrap;
  }

  /* ----- Empty-state convention ----- */
  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px 20px;
    gap: 10px;
    color: var(--ink-slate);
  }
  .empty-state-sm { padding: 20px 16px; }
  .empty-state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(28, 51, 67, 0.06);
    color: var(--ink-slate);
    margin-bottom: 4px;
  }
  .empty-state-icon svg { display: block; }
  .empty-state-title {
    margin: 0;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-navy);
  }
  .empty-state-message {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-slate);
    max-width: 360px;
  }
  .empty-state-action {
    margin-top: 6px;
  }
  /* Error variant — red accent on the icon, message stays neutral. */
  .empty-state-error .empty-state-icon {
    background: rgba(220, 38, 38, 0.10);
    color: var(--rust-deep);
  }
  .empty-state-error .empty-state-title { color: var(--danger-text-deep); }

  /* Field-level muted placeholder (e.g., "Unknown speaker" instead
     of a bare "-"). Different from the larger empty-state block —
     this is for inline use within a populated record. */
  .empty-state-field {
    color: var(--ink-cool-grey);
    font-style: italic;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
  }

/* ============================================================
   Level-up popup — Agent Training progression.
   Premium-feeling notification modal that fires when the user
   crosses into a new agent tier (Apprentice / Analyst / Strategist
   / Architect). No confetti, no arcade glow — research-tool
   chrome. Built in base_shell.js (`window.showLevelUpPopup`).
============================================================ */
.level-up-scrim {
  position: fixed;
  inset: 0;
  z-index: 12500;
  background: rgba(17, 27, 39, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  /* When the card is taller than the viewport (3 unlock sections on
     a short phone), let the scrim itself scroll so the user can reach
     the bottom of the card + the dismiss buttons. */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: levelUpScrimFade 0.25s ease-out;
}
@keyframes levelUpScrimFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.level-up-card {
  position: relative;
  width: 100%;
  max-width: 480px;
  /* The card itself no longer scrolls — instead, the unlocks block
     inside it caps its own height + scrolls. That guarantees the
     headline at the top + action footer at the bottom are ALWAYS
     visible inside the viewport, even on short phones with browser
     chrome eating the lower part of 100vh. */
  display: flex;
  flex-direction: column;
  max-height: 100dvh;
  padding: 30px 28px 24px;
  border-radius: 20px;
  background: linear-gradient(180deg, var(--surface-white) 0%, var(--surface-pale-cool) 100%);
  border: 1px solid rgba(28, 51, 67, 0.18);
  box-shadow:
    0 32px 64px rgba(20, 30, 45, 0.32),
    0 0 0 1px rgba(255, 255, 255, 0.6) inset;
  animation: levelUpCardPop 0.42s cubic-bezier(0.18, 0.89, 0.32, 1.18);
  text-align: center;
  outline: none;
}
/* Mobile: tighten everything that competes with the unlocks block for
   vertical space — icon, headline, intro — so the unlocks block (the
   bit that actually scrolls) gets as much room as possible. */
@media (max-width: 700px) {
  .level-up-scrim {
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)) 12px;
    align-items: stretch;
  }
  .level-up-card {
    padding: 18px 18px 14px;
    /* dvh handles mobile browser chrome; 100vh would let the card
       run behind the address bar / home indicator. */
    max-height: 100dvh;
  }
  .level-up-icon {
    width: 48px; height: 48px;
    margin: 2px auto 8px;
  }
  .level-up-icon svg { width: 24px; height: 24px; }
  .level-up-headline { font-size: 17px; line-height: 1.2; }
  .level-up-intro { margin: 10px 4px 2px; font-size: 12.5px; }
  .level-up-unlocks { padding: 10px 12px; margin: 10px 0 2px; }
  .level-up-eyebrow { margin-bottom: 4px; }
}
@keyframes levelUpCardPop {
  0%   { transform: scale(0.86) translateY(12px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
.level-up-close {
  position: absolute;
  top: 12px; right: 14px;
  background: transparent;
  border: 0;
  color: var(--ink-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
}
.level-up-close:hover { background: rgba(28, 51, 67, 0.06); color: var(--ink-navy); }
.level-up-eyebrow {
  margin: 0 0 8px;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.level-up-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px; height: 64px;
  margin: 4px auto 12px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--ink-navy) 0%, var(--positive-text-deep) 100%);
  color: var(--surface-cream);
  box-shadow:
    0 14px 28px rgba(20, 30, 45, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.level-up-icon svg { width: 32px; height: 32px; display: block; }
/* Per-level theme tints on the icon. The card itself stays
   neutral; only the icon picks up the level's accent. */
.level-up-card.level-up-theme-blue      .level-up-icon { background: linear-gradient(135deg, var(--ink-slate) 0%, var(--info-blue-border-dark) 100%); }
.level-up-card.level-up-theme-teal      .level-up-icon { background: linear-gradient(135deg, var(--ink-slate) 0%, var(--info-blue-border-dark) 100%); }
.level-up-card.level-up-theme-forest    .level-up-icon { background: linear-gradient(135deg, var(--positive-text-deep) 0%, var(--positive-bg-bright) 100%); }
.level-up-card.level-up-theme-navy-gold .level-up-icon {
  background: linear-gradient(135deg, var(--info-blue-bg-strong) 0%, var(--info-teal-bg-strong) 100%);
  color: var(--gold-bright);
  box-shadow:
    0 14px 28px rgba(20, 30, 45, 0.28),
    inset 0 0 0 1px rgba(231, 196, 108, 0.4);
}
.level-up-headline {
  margin: 0;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.01em;
  color: var(--ink-navy);
  line-height: 1.25;
}
.level-up-skip-note {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--ink-slate);
  font-style: italic;
}
.level-up-intro {
  margin: 14px 4px 4px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-navy);
  text-align: left;
}
.level-up-unlocks {
  margin: 16px 0 4px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(28, 51, 67, 0.04);
  text-align: left;
  /* Flex child that grows to fill remaining card height + scrolls
     internally when the unlock list overflows. This is what keeps
     the headline + action footer pinned outside the scroll area. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.level-up-unlocks-kicker {
  margin: 0 0 10px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.level-up-unlocks-group {
  margin: 0 0 22px;
}
.level-up-unlocks-group:last-child { margin-bottom: 0; }
.level-up-unlocks-group + .level-up-unlocks-group {
  padding-top: 14px;
  border-top: 1px solid rgba(28, 51, 67, 0.08);
}
.level-up-unlocks-grouplabel {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--positive-text-deep);
}
.level-up-unlocks-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.level-up-unlocks-list > li {
  margin: 0 0 8px;
  padding: 0 0 0 18px;
  position: relative;
  font-size: 12.5px;
  color: var(--ink-navy);
  line-height: 1.45;
}
.level-up-unlocks-list > li::before {
  content: "✓";
  position: absolute;
  left: 0; top: 0;
  color: var(--positive-text-deep);
  font-weight: 900;
  font-size: 13px;
}
.level-up-unlocks-list > li:last-child { margin-bottom: 0; }
.level-up-unlocks-list strong { font-weight: 800; }
.level-up-unlocks-list span { color: var(--ink-slate); font-weight: 400; }
.level-up-unlocks-more::before { content: ""; }
.level-up-unlocks-more a { color: var(--positive-text-deep); font-weight: 700; text-decoration: none; }
.level-up-unlocks-more a:hover { text-decoration: underline; }
.level-up-teaser {
  margin: 14px 0 0;
  font-size: 11.5px;
  color: var(--ink-slate);
  font-style: italic;
}
.level-up-actions {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  /* Plain footer; lives outside the scrollable unlocks block, so it's
     always visible inside the card's viewport region. */
  flex: 0 0 auto;
}
/* Phase 14 — "Want to know more" trigger sits below the action row
   as a quieter, optional explainer link. */
.level-up-learn-more-row {
  margin-top: 6px;
  display: flex;
  justify-content: center;
  flex: 0 0 auto;
}

/* "Show N more" toggle inside each unlocks group. */
.level-up-unlocks-showmore {
  margin: 8px 0 0 18px;
  background: transparent;
  border: 0;
  padding: 4px 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--positive-text-deep);
  cursor: pointer;
  letter-spacing: 0.02em;
}
.level-up-unlocks-showmore:hover { text-decoration: underline; }
.level-up-unlocks-rest { margin-top: 6px !important; }
.level-up-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(28, 51, 67, 0.22);
  background: var(--surface-white);
  color: var(--ink-navy);
  font-weight: 800;
  letter-spacing: 0.04em;
  font-size: 12px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.level-up-btn:hover {
  background: var(--surface-pale-cool);
  transform: translateY(-1px);
  border-color: var(--ink-navy);
}
.level-up-btn-primary {
  background: linear-gradient(135deg, var(--ink-navy) 0%, var(--positive-text-deep) 100%);
  color: var(--surface-cream);
  border-color: transparent;
}
.level-up-btn-primary:hover {
  background: linear-gradient(135deg, var(--info-blue-bg-strong) 0%, var(--positive-text-deep) 100%);
  color: var(--surface-cream);
}
.level-up-btn-quiet {
  background: transparent;
  border-color: transparent;
  color: var(--ink-slate);
}
.level-up-btn-quiet:hover {
  background: rgba(28, 51, 67, 0.06);
  border-color: transparent;
}
@media (prefers-reduced-motion: reduce) {
  .level-up-scrim,
  .level-up-card { animation: none; }
}
@media (max-width: 480px) {
  .level-up-card {
    padding: 24px 18px 18px;
    border-radius: 18px;
  }
  .level-up-headline { font-size: 17px; }
}

/* ---------------------------------------------------------------------------
   Locked-by-level menu items. The link/tab stays visible but renders muted,
   shows a small lock badge over the icon, and the JS handler intercepts the
   click to open a popup explaining how to unlock it.
   --------------------------------------------------------------------------- */
.app-shell-rail-item.is-locked-by-level,
.app-shell-bottom-tab.is-locked-by-level,
.app-shell-more-sheet-link.is-locked-by-level,
.app-shell-nav-link.is-locked-by-level {
  opacity: 0.55;
  cursor: pointer;
}
.app-shell-rail-item.is-locked-by-level:hover,
.app-shell-bottom-tab.is-locked-by-level:hover,
.app-shell-more-sheet-link.is-locked-by-level:hover,
.app-shell-nav-link.is-locked-by-level:hover {
  opacity: 0.85;
}
.app-shell-rail-icon,
.app-shell-bottom-tab-icon,
.app-shell-more-sheet-link-icon,
.app-shell-nav-icon { position: relative; }
.app-shell-rail-lock,
.app-shell-bottom-tab-lock,
.app-shell-more-sheet-link-lock,
.app-shell-nav-lock {
  position: absolute;
  top: -6px;
  right: -9px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ink-navy);
  color: var(--surface-cream);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
  border: 1.5px solid var(--surface-white);
}
.app-shell-rail-lock svg,
.app-shell-bottom-tab-lock svg,
.app-shell-more-sheet-link-lock svg,
.app-shell-nav-lock svg {
  display: block;
  width: 13px;
  height: 13px;
}

/* Locked-feature popup (smaller cousin of .level-up-card). Triggered by
   clicking a [data-locked-feature] menu item. Shares the same scrim
   animation as the level-up popup. */
.locked-feature-scrim {
  position: fixed;
  inset: 0;
  background: rgba(13, 23, 32, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 24px;
  animation: levelUpFadeIn 0.2s ease both;
}
.locked-feature-card {
  background: var(--surface-white);
  color: var(--ink-navy);
  width: min(440px, 100%);
  border-radius: 20px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.28);
  padding: 28px 28px 22px;
  position: relative;
  text-align: center;
  outline: none;
  animation: levelUpScaleIn 0.25s ease both;
}
.locked-feature-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--ink-slate);
  font-size: 20px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.locked-feature-close:hover { background: rgba(28, 51, 67, 0.06); color: var(--ink-navy); }
.locked-feature-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--ink-navy);
  color: var(--surface-cream);
  margin: 4px auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.locked-feature-icon svg { width: 26px; height: 26px; display: block; }
.locked-feature-eyebrow {
  margin: 0 0 6px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.locked-feature-headline {
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--ink-navy);
}
/* "(Level N)" drops to its own line and never splits mid-phrase. */
.locked-feature-headline-level {
  display: block;
  white-space: nowrap;
}
.locked-feature-body {
  margin: 12px 0 0;
  padding: 14px 16px;
  background: rgba(28, 51, 67, 0.04);
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-navy);
  text-align: left;
}
.locked-feature-body strong { font-weight: 800; }
.locked-feature-actions {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
@media (prefers-reduced-motion: reduce) {
  .locked-feature-scrim,
  .locked-feature-card { animation: none; }
}


/* 2026-05-21 — Admin "View as Neutral Agent" impersonation banner.
   Sits below the topbar on every page while impersonation is active.
   Persistent + dismissible-only-via-toggle so the admin cannot lose
   track of which identity they're acting as. Warm amber so it reads
   as informational, not error. */
.admin-impersonate-banner {
  background: #f7e9c9;
  border-bottom: 1px solid #d8be7e;
  color: #5a4513;
  padding: 8px 16px;
  font-size: 12.5px;
  line-height: 1.4;
}
.admin-impersonate-banner-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.admin-impersonate-banner-eyebrow {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 8px;
  background: rgba(90, 69, 19, 0.12);
  border-radius: 999px;
  color: #5a4513;
  white-space: nowrap;
}
.admin-impersonate-banner-msg {
  flex: 1 1 auto;
  min-width: 0;
}
.admin-impersonate-banner-msg strong { font-weight: 700; }
.admin-impersonate-banner-form {
  margin: 0;
}
.admin-impersonate-banner-exit {
  background: #5a4513;
  color: var(--surface-white);
  border: 1px solid #5a4513;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}
.admin-impersonate-banner-exit:hover {
  background: #3f2e0a;
  border-color: #3f2e0a;
}