/**
 * Medallion XLN — canonical design tokens + authenticated application shell
 * Location: /public_html/nav/shell.css
 *
 * UX Stage 1. Loaded once from nav/markup.php, which every authenticated
 * surface shares, right after nav/assets/sidebar.css.
 *
 * WHAT LIVES HERE
 *   1. Canonical tokens (--mx-*). Colour, type, spacing, shape, interaction.
 *   2. The shell contract: --xln-shell-offset and the chrome insets that page
 *      layouts use instead of hard-coding the sidebar width or 100vh.
 *   3. The mobile application shell (≤768px): top bar, tab bar, Create sheet,
 *      and the existing sidebar re-presented as the Menu surface.
 *   4. The keyboard focus baseline.
 *
 * NAMESPACES — checked across public_html before use
 *   --mx-*   tokens. Unused anywhere else. NOT --xln-*: wallet.css already
 *            defines --xln-success/--xln-warning on :root, and this sheet loads
 *            after it, so reusing that prefix would silently recolour Wallet.
 *   .xsh-*   shell classes. Unused anywhere else. (.mx-* is taken by the
 *            Opportunity graph's SVG classes.)
 *
 * BREAKPOINTS (CSS cannot read variables in media queries, so they are fixed)
 *   phone    ≤ 768px   mobile shell: top bar + tab bar, sidebar becomes Menu
 *   tablet   769–1024  sidebar visible at 240px (sidebar.css)
 *   desktop  ≥ 1025    sidebar 260px, or 80px collapsed
 *   Keep 768 in step with nav/assets/sidebar.css and sidebar.js isDesktop().
 *
 * Nothing here restyles an existing page class. Pages opt into the contract by
 * using the variables; a page that has not migrated keeps its own values.
 */

/* ==========================================================================
   1. CANONICAL TOKENS
   Derived from the identity the strongest surfaces already share: near-black
   canvas, the sidebar's navy, and Medallion gold. They are the reference
   values; pages keep intentionally differentiated colours (network
   indicators, Opportunity's light scheme, Timeline's lens) as they are.
   ========================================================================== */

/* THEME CONTRACT (UX3)
   <html data-theme="light|dark"> is set before first paint by nav/theme-head.php
   (the user's preference — light / dark / system — is data-theme-pref). :root
   holds the DARK values, which is also what any page without the resolver
   gets (embedded apps under /agents/apps/* keep dark). html[data-theme="light"]
   below redefines the same names; nothing else in the product decides colour.

   Page stylesheets consume these directly, or through component variables
   whose light value is one of these tokens (see "UX3 theme variables" blocks).
   *-rgb triplets exist for translucent tints: rgba(var(--mx-fg-rgb), .08). */
:root {
  color-scheme: dark;
  /* Backgrounds and surfaces */
  --mx-app-bg:            #07070B;
  --mx-elevated-bg:       #0A0A11;
  --mx-surface-primary:   #101017;
  --mx-surface-secondary: #17171F;
  --mx-surface-subtle:    rgba(255, 255, 255, .035);
  --mx-surface-overlay:   #14141C;          /* dialogs, menus, sheets */
  --mx-nav-bg:            #0f172a;          /* sidebar navy */
  --mx-nav-text:          #94a3b8;
  --mx-nav-text-active:   #ffffff;
  --mx-nav-label:         #7C879B;          /* was #475569: 2.4:1 on navy, now 4.7:1 */
  --mx-nav-border:        rgba(255, 255, 255, .05);
  --mx-nav-hover:         rgba(255, 255, 255, .03);
  --mx-nav-footer-bg:     rgba(0, 0, 0, .2);
  --mx-nav-active-bg:     rgba(249, 201, 76, .1);
  --mx-nav-scrim:         rgba(0, 0, 0, .5);        /* behind the phone Menu drawer */
  --mx-surface-chrome:    rgba(15, 23, 42, .96);   /* phone top bar / tab bar */
  /* Text */
  --mx-text-primary:      #ECECF1;
  --mx-text-secondary:    #C7C7D2;
  --mx-text-muted:        #8C8C9A;
  --mx-text-inverse:      #0A0A0F;
  --mx-placeholder:       #8C8C9A;
  /* Borders and fields */
  --mx-border-default:    rgba(255, 255, 255, .08);
  --mx-border-strong:     rgba(255, 255, 255, .16);
  --mx-input-bg:          #17171F;
  --mx-input-border:      rgba(255, 255, 255, .16);
  /* Interaction */
  --mx-hover-surface:     rgba(255, 255, 255, .05);
  --mx-active-surface:    rgba(255, 255, 255, .09);
  --mx-selected-surface:  rgba(249, 201, 76, .12);
  --mx-disabled-surface:  rgba(255, 255, 255, .04);
  --mx-disabled-text:     #5E5E6C;
  --mx-focus-ring-color:  #F9C94C;
  /* Brand and state */
  --mx-accent-gold:       #F9C94C;          /* fills */
  --mx-accent-gold-text:  #F9C94C;          /* gold used as text */
  --mx-accent-gold-ink:   #0A0A0F;          /* text on a gold fill */
  --mx-accent-gold-border: #F9C94C;
  --mx-accent-gold-strong: #FFDE86;
  --mx-accent-gold-soft:  rgba(249, 201, 76, .12);
  --mx-success:           #10D994;
  --mx-warning:           #FBBF24;
  --mx-danger:            #FF6B6B;
  --mx-information:       #5BB8FF;
  --mx-info:              var(--mx-information);
  /* Effects */
  --mx-shadow:            0 12px 30px rgba(0, 0, 0, .45);
  --mx-shadow-strong:     0 24px 60px rgba(0, 0, 0, .55);
  --mx-scrim:             rgba(0, 0, 0, .55);
  /* Tint triplets */
  --mx-fg-rgb:     255, 255, 255;           /* "ink" of the theme, for rgba tints */
  --mx-shadow-rgb: 0, 0, 0;
  --mx-shadow-k:   1;                       /* shadow strength multiplier */
  --mx-shade-rgb:  0, 0, 0;                 /* darkening panels */
  --mx-shade-k:    1;
  /* Translucent ink TEXT (UX3). color: var(--mxt-NN) is ink at NN% alpha in
     dark; in light it resolves to a solid text token chosen by alpha (<20 stays
     a decorative tint). Pages route color: rgba(ink, .NN) through this scale.
     Dark raises alphas below .7 so they hold 4.5:1 on inset panels (UX3 a11y);
     the name keeps the original alpha so call sites stay readable. */
  --mxt-08: rgba(255, 255, 255, .08);
  --mxt-10: rgba(255, 255, 255, .1);
  --mxt-12: rgba(255, 255, 255, .12);
  --mxt-15: rgba(255, 255, 255, .15);
  --mxt-40: rgba(255, 255, 255, .58);
  --mxt-42: rgba(255, 255, 255, .6);
  --mxt-45: rgba(255, 255, 255, .62);
  --mxt-48: rgba(255, 255, 255, .64);
  --mxt-58: rgba(255, 255, 255, .68);
  --mxt-60: rgba(255, 255, 255, .7);
  --mxt-82: rgba(255, 255, 255, .82);
  --mxt-90: rgba(255, 255, 255, .9);
  /* UX1 names, kept as aliases so nothing that already uses them changes */
  --mx-bg-primary:       var(--mx-app-bg);
  --mx-bg-secondary:     var(--mx-elevated-bg);
  --mx-surface-elevated: var(--mx-surface-secondary);
  --mx-border-emphasis:  var(--mx-border-strong);

  /* Typography — roles, not sizes. Responsive where a role spans devices. */
  --mx-font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --mx-font-body:    'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mx-font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --mx-type-display:       clamp(28px, 1.6vw + 22px, 40px);
  --mx-type-page-title:    clamp(22px, 1vw + 18px, 30px);
  --mx-type-section-title: clamp(17px, .4vw + 15.5px, 20px);
  --mx-type-card-title:    15px;
  --mx-type-body:          15px;
  --mx-type-body-small:    13px;
  --mx-type-label:         13px;
  --mx-type-caption:       12px;
  --mx-type-metadata:      11px;
  --mx-type-mono:          12.5px;

  /* Spacing — 4px scale (mirrors --xln-s1..s8 in xln-ui.css) */
  --mx-space-1: 4px;  --mx-space-2: 8px;  --mx-space-3: 12px; --mx-space-4: 16px;
  --mx-space-5: 24px; --mx-space-6: 32px; --mx-space-7: 48px; --mx-space-8: 64px;
  /* Density (UX3). Three levels, used deliberately rather than one airy or
     one dense setting for everything:
       compact  — navigation, metadata, utility controls, list rows
       standard — cards, forms, most application UI
       spacious — page headers, major empty states, feature introductions */
  --mx-pad-compact: 12px 14px;  --mx-gap-compact: 8px;
  --mx-pad-standard: 20px;      --mx-gap-standard: 16px;
  --mx-pad-spacious: 28px 32px; --mx-gap-spacious: 24px;
  --mx-gutter: 24px;                     /* page side padding; 16px on phones */

  /* Shape */
  --mx-radius-card:   16px;
  --mx-radius-button: 10px;
  --mx-radius-field:  10px;
  --mx-radius-badge:  999px;
  --mx-radius-chip:   999px;
  --mx-radius-dialog: 20px;
  --mx-radius-sheet:  20px;

  /* Interaction */
  --mx-hover-overlay:    var(--mx-hover-surface);
  --mx-active-overlay:   var(--mx-active-surface);
  --mx-selected-bg:      var(--mx-selected-surface);
  --mx-disabled-opacity: .45;
  --mx-focus-ring:       0 0 0 2px var(--mx-app-bg), 0 0 0 4px var(--mx-focus-ring-color);
  --mx-touch-min:        44px;
  --mx-ease:             cubic-bezier(.16, 1, .3, 1);
  --mx-dur-fast:         150ms;
  --mx-dur-mid:          220ms;

  /* Layering. Shell chrome sits above sticky page headers (≤200 in every
     page sheet) and BELOW page modals (999+), so a page dialog is never
     obscured by the tab bar. The sidebar/overlay (12000+) cover the chrome
     when the Menu is open. */
  --mx-z-chrome: 900;
  --mx-z-sheet:  12050;

  /* 2. SHELL CONTRACT ------------------------------------------------------
     --xln-shell-offset  left offset of the primary content column. Equals the
                         live sidebar width on tablet/desktop (including the
                         collapsed state), 0 on phones.
     --mx-chrome-top     height of fixed shell chrome above content (phones).
     --mx-chrome-bottom  height of fixed shell chrome below content (phones).
     --mx-viewport-h     the height a full-screen workspace (Messages, agent
                         chat) may occupy without sliding under the chrome. */
  --xln-shell-offset: var(--sidebar-w, 260px);
  --mx-topbar-h: 56px;
  --mx-tabbar-h: 64px;
  --mx-chrome-top: 0px;
  --mx-chrome-bottom: 0px;
  --mx-viewport-h: calc(100dvh - var(--mx-chrome-top) - var(--mx-chrome-bottom));
}

@media (prefers-reduced-motion: reduce) {
  :root { --mx-dur-fast: 0ms; --mx-dur-mid: 0ms; }
}

/* The sidebar is exactly --sidebar-w wide on every page. Without border-box
   its 1px right border made it 261px on pages that have no global
   box-sizing reset (Messages, Docs, Opportunity), overlapping content that
   starts at --xln-shell-offset. */
.sidebar[data-sidebar] { box-sizing: border-box; }

/* LIGHT — designed, not inverted: warm off-white canvas, white elevated
   surfaces, navy/charcoal type, restrained gold that darkens when it is text,
   quiet borders, very little shadow. Every text token here is ≥ 4.5:1 on every
   light surface (tests/browser/ux3-theme-browser.mjs checks rendered pages).
   .xui-light / [data-mx-scheme=light] are the pre-UX3 opt-ins, kept as aliases. */
html[data-theme="light"],
.xui-light, [data-mx-scheme="light"] {
  color-scheme: light;
  --mx-app-bg:            #F6F4EF;
  --mx-elevated-bg:       #FBFAF7;
  --mx-surface-primary:   #FFFFFF;
  --mx-surface-secondary: #F1EEE7;
  --mx-surface-subtle:    rgba(20, 26, 46, .035);
  --mx-surface-overlay:   #FFFFFF;
  --mx-nav-bg:            #FBFAF7;
  --mx-nav-text:          #3E4658;
  --mx-nav-text-active:   #141A2E;
  --mx-nav-label:         #646C7D;
  --mx-nav-border:        rgba(20, 26, 46, .08);
  --mx-nav-hover:         rgba(20, 26, 46, .04);
  --mx-nav-footer-bg:     rgba(20, 26, 46, .025);
  --mx-nav-active-bg:     rgba(201, 146, 31, .12);
  --mx-nav-scrim:         rgba(20, 26, 46, .32);
  --mx-surface-chrome:    rgba(251, 250, 247, .94);
  --mx-text-primary:      #141A2E;
  --mx-text-secondary:    #3A4254;
  --mx-text-muted:        #5B6374;
  --mx-text-inverse:      #FFFFFF;
  --mx-placeholder:       #5B6374;
  --mx-border-default:    rgba(20, 26, 46, .12);
  --mx-border-strong:     rgba(20, 26, 46, .22);
  --mx-input-bg:          #FFFFFF;
  --mx-input-border:      rgba(20, 26, 46, .24);
  --mx-hover-surface:     rgba(20, 26, 46, .05);
  --mx-active-surface:    rgba(20, 26, 46, .09);
  --mx-selected-surface:  rgba(201, 146, 31, .14);
  --mx-disabled-surface:  rgba(20, 26, 46, .05);
  --mx-disabled-text:     #8A909C;
  --mx-focus-ring-color:  #A36A00;
  --mx-accent-gold:       #F9C94C;
  --mx-accent-gold-text:  #8A5A00;
  --mx-accent-gold-ink:   #1A1300;
  --mx-accent-gold-border: #C9921F;
  --mx-accent-gold-strong: #E0A92E;
  --mx-accent-gold-soft:  rgba(201, 146, 31, .12);
  --mx-success:           #0A6E44;   /* 5.4:1 on the secondary surface; #0B7A4B was 4.3 */
  --mx-warning:           #8F5600;
  --mx-danger:            #B42318;
  --mx-information:       #1D5FA0;
  --mx-shadow:            0 1px 2px rgba(20, 26, 46, .06), 0 6px 18px rgba(20, 26, 46, .06);
  --mx-shadow-strong:     0 16px 48px rgba(20, 26, 46, .16);
  --mx-scrim:             rgba(20, 26, 46, .38);
  --mx-fg-rgb:     20, 26, 46;
  --mx-shadow-rgb: 20, 26, 46;
  --mx-shadow-k:   .3;
  --mx-shade-rgb:  20, 26, 46;
  --mx-shade-k:    .18;
  --mxt-08: rgba(20, 26, 46, .08);
  --mxt-10: rgba(20, 26, 46, .1);
  --mxt-12: rgba(20, 26, 46, .12);
  --mxt-15: rgba(20, 26, 46, .15);
  --mxt-40: var(--mx-text-muted);
  --mxt-42: var(--mx-text-muted);
  --mxt-45: var(--mx-text-muted);
  --mxt-48: var(--mx-text-muted);
  --mxt-58: var(--mx-text-muted);
  --mxt-60: var(--mx-text-secondary);
  --mxt-82: var(--mx-text-primary);
  --mxt-90: var(--mx-text-primary);
  /* Fund Interactions HUD (posts/assets/wallet-hud.js). Its inline styles read
     var(--hud-*, <dark literal>), so only the light theme defines these. */
  --hud-panel: #FFFFFF;
  --hud-line: rgba(20, 26, 46, .12);
  --hud-line-2: rgba(20, 26, 46, .14);
  --hud-line-3: rgba(20, 26, 46, .08);
  --hud-ink: #141A2E;
  --hud-shadow: 0 16px 50px rgba(20, 26, 46, .18);
  --hud-pill-bg: linear-gradient(135deg, #FFFFFF, #FBF6EA);
  --hud-pill-ink: #141A2E;
  --hud-pill-shadow: 0 12px 36px rgba(20, 26, 46, .16);
  --hud-muted: #3A4254;
  --hud-muted-2: #5B6374;
  --hud-muted-3: #5B6374;
  --hud-faint: #5B6374;
  --hud-faint-2: #5B6374;
  --hud-soft: #3A4254;
  --hud-soft-2: #3A4254;
  --hud-soft-3: #3A4254;
  --hud-raised: #F1EEE7;
  --hud-raised-2: #F1EEE7;
  --hud-gold-text: #8A5A00;
  --hud-warn-bg: #FFF6E0;
  --hud-warn-line: rgba(143, 86, 0, .30);
  --hud-warn-ink: #6F4800;
  --mx-bg-primary:       var(--mx-app-bg);
  --mx-bg-secondary:     var(--mx-elevated-bg);
  --mx-surface-elevated: var(--mx-surface-secondary);
  --mx-border-emphasis:  var(--mx-border-strong);
  --mx-hover-overlay:    var(--mx-hover-surface);
  --mx-active-overlay:   var(--mx-active-surface);
  --mx-selected-bg:      var(--mx-selected-surface);
}

/* ==========================================================================
   4. KEYBOARD FOCUS BASELINE
   Zero specificity (:where), so every page's own focus treatment still wins.
   It only guarantees that a control with no focus style of its own gets a
   visible one — and only for keyboard focus, never on mouse click.
   ========================================================================== */
:where(a[href], button, [role="button"], [role="tab"], [role="menuitem"],
       input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--mx-focus-ring-color);
  outline-offset: 2px;
}

/* ==========================================================================
   3. MOBILE APPLICATION SHELL
   Markup: nav/sidebar.php (authenticated only). Behaviour: nav/assets/sidebar.js.
   Everything below is inert above 768px.
   ========================================================================== */

.xsh-topbar, .xsh-tabbar { display: none; }
.xsh-sheet[hidden] { display: none; }

@media (max-width: 768px) {
  :root { --xln-shell-offset: 0px; --mx-gutter: 16px; }

  html:has(#xshTabBar), html[data-ux6-shell] {
    --mx-chrome-top: calc(var(--mx-topbar-h) + env(safe-area-inset-top, 0px));
    --mx-tabbar-total: calc(var(--mx-tabbar-h) + env(safe-area-inset-bottom, 0px));
    --mx-chrome-bottom: var(--mx-tabbar-total);
    scroll-padding-top: var(--mx-chrome-top);
    scroll-padding-bottom: var(--mx-chrome-bottom);
  }
  /* Reserve the chrome so nothing in normal flow ever sits under it — plus
     the Fund-interactions pill when it is showing (posts/assets/wallet-hud.js
     publishes --mx-hud-clearance). Messages is a fixed-height workspace and
     pads its own scroller instead (messages/assets/style.css). */
  html:has(#xshTabBar) body, html[data-ux6-shell] body {
    padding-top: var(--mx-chrome-top);
    padding-bottom: calc(var(--mx-chrome-bottom) + var(--mx-hud-clearance, 0px));
  }
  html:has(#xshTabBar) body.messages-page, html[data-ux6-shell] body.messages-page { padding-bottom: var(--mx-chrome-bottom); }
  /* The floating hamburger is replaced by the tab bar's Menu. It stays in the
     DOM (anonymous pages and older markup still use it). */
  html:has(#xshTabBar) .mobile-menu-toggle { display: none !important; }

  /* Component selectors are scoped to their bar: pages reset `button` with
     (0,1,1) rules such as `.messages-page button { font: inherit }`, which
     outranked a bare .xsh-tab and restyled the tab labels. */

  /* ---- Top bar ---------------------------------------------------------- */
  .xsh-topbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: var(--mx-z-chrome);
    display: flex; align-items: center; gap: var(--mx-space-2);
    height: var(--mx-chrome-top);
    padding: env(safe-area-inset-top, 0px) max(var(--mx-space-2), env(safe-area-inset-right, 0px)) 0 max(var(--mx-space-3), env(safe-area-inset-left, 0px));
    background: var(--mx-surface-chrome);
    border-bottom: 1px solid var(--mx-border-default);
    color: var(--mx-text-primary);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-sizing: border-box;
  }
  .xsh-brand { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 44px; height: 44px; }
  .xsh-brand img { width: 28px; height: 28px; display: block; }
  .xsh-context { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
  .xsh-context-label {
    font: 600 10px/1.2 var(--mx-font-body); letter-spacing: .08em; text-transform: uppercase;
    color: var(--mx-accent-gold-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .xsh-context-title {
    font: 700 16px/1.25 var(--mx-font-display); color: var(--mx-text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .xsh-topbar .xsh-icon-btn, .xsh-topbar .xsh-avatar {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: var(--mx-touch-min); height: var(--mx-touch-min); padding: 0; margin: 0;
    border: 0; border-radius: 12px; background: transparent; color: var(--mx-text-secondary);
    font-size: 22px; cursor: pointer; text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .xsh-topbar .xsh-icon-btn:active, .xsh-topbar .xsh-avatar:active { background: var(--mx-active-overlay); }
  .xsh-avatar img, .xsh-avatar-initial {
    width: 30px; height: 30px; border-radius: 50%; object-fit: cover; display: block;
    box-shadow: 0 0 0 1px var(--mx-border-emphasis);
  }
  .xsh-avatar-initial {
    display: flex; align-items: center; justify-content: center;
    background: var(--mx-accent-gold-soft); color: var(--mx-accent-gold-text);
    font: 700 13px/1 var(--mx-font-display);
  }

  /* ---- Tab bar ---------------------------------------------------------- */
  .xsh-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--mx-z-chrome);
    display: flex; align-items: stretch;
    height: var(--mx-tabbar-total);
    padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    background: var(--mx-surface-chrome);
    border-top: 1px solid var(--mx-border-default);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-sizing: border-box;
    transition: transform var(--mx-dur-mid) var(--mx-ease);
  }
  .xsh-tabbar .xsh-tab {
    position: relative; flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: var(--mx-touch-min); padding: 6px 2px; margin: 0;
    border: 0; background: transparent; color: var(--mx-text-muted);
    font: 600 11px/1.1 var(--mx-font-body); letter-spacing: .01em;
    text-decoration: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .xsh-tab-icon { font-size: 22px; line-height: 1; display: flex; }
  .xsh-tab-label { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .xsh-tabbar .xsh-tab[aria-current="page"], .xsh-tabbar .xsh-tab[data-current="true"] { color: var(--mx-accent-gold-text); }
  .xsh-tab[aria-current="page"]::before, .xsh-tab[data-current="true"]::before {
    content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 2px;
    border-radius: 0 0 2px 2px; background: var(--mx-accent-gold);
  }
  .xsh-tabbar .xsh-tab:active { background: var(--mx-active-overlay); }
  .xsh-tabbar .xsh-tab--create .xsh-tab-icon {
    width: 40px; height: 30px; border-radius: 12px; align-items: center; justify-content: center;
    background: var(--mx-accent-gold); color: var(--mx-accent-gold-ink); font-size: 20px;
  }
  .xsh-tabbar .xsh-tab--create { color: var(--mx-text-secondary); }
  .xsh-badge {
    position: absolute; top: 5px; left: calc(50% + 6px);
    min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--mx-radius-badge); background: #ef4444; color: #fff; /* status red + white: 4.5:1, both themes */
    font: 700 10px/1 var(--mx-font-body); box-shadow: 0 0 0 2px var(--mx-bg-primary);
  }
  .xsh-badge[hidden] { display: none; }

  /* While the software keyboard is up the tab bar steps aside AND releases
     its reserved space, so a composer sits on the keyboard instead of 64px
     above it. html.xsh-typing is set by nav/assets/sidebar.js only when a
     text field gains focus from a real tap/click/key — a field a page
     focuses on load (Orion's composer) raises no keyboard and must not hide
     the navigation. */
  html.xsh-typing:has(#xshTabBar) { --mx-chrome-bottom: 0px; }
  html.xsh-typing .xsh-tabbar { transform: translateY(110%); visibility: hidden; }

  /* ---- Menu: the existing sidebar, presented as a drawer ------------------
     Closed, it is also invisible to keyboard and screen readers, so Tab never
     walks through links that are off-canvas. */
  html:has(#xshTabBar) .sidebar[data-sidebar] {
    width: min(300px, 86vw) !important;
    padding-top: env(safe-area-inset-top, 0px);
    visibility: hidden;
    transition: transform var(--mx-dur-mid) var(--mx-ease), visibility 0s linear var(--mx-dur-mid);
  }
  html:has(#xshTabBar) .sidebar[data-sidebar].mobile-open {
    visibility: visible;
    transition: transform var(--mx-dur-mid) var(--mx-ease), visibility 0s;
    box-shadow: 24px 0 60px rgba(var(--mx-shadow-rgb), calc(.5 * var(--mx-shadow-k)));
  }
  html:has(#xshTabBar) .sidebar .sidebar-footer { padding-bottom: max(1.5rem, env(safe-area-inset-bottom, 0px)); }
  html:has(#xshTabBar) .sidebar .nav-link,
  html:has(#xshTabBar) .sidebar .sidebar-footer-link { min-height: var(--mx-touch-min); box-sizing: border-box; }
  html:has(#xshTabBar) .sidebar .mobile-close { width: var(--mx-touch-min); height: var(--mx-touch-min); }
}

/* ---- Create sheet (bottom sheet dialog) ---------------------------------- */
.xsh-sheet { position: fixed; inset: 0; z-index: var(--mx-z-sheet); }
.xsh-sheet-scrim {
  position: absolute; inset: 0; background: var(--mx-scrim);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.xsh-sheet-panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 24px); overflow-y: auto;
  padding: var(--mx-space-2) max(var(--mx-space-4), env(safe-area-inset-right, 0px)) max(var(--mx-space-4), env(safe-area-inset-bottom, 0px)) max(var(--mx-space-4), env(safe-area-inset-left, 0px));
  background: var(--mx-surface-primary); color: var(--mx-text-primary);
  border: 1px solid var(--mx-border-default); border-bottom: 0;
  border-radius: var(--mx-radius-sheet) var(--mx-radius-sheet) 0 0;
  box-shadow: 0 -20px 60px rgba(var(--mx-shadow-rgb), calc(.55 * var(--mx-shadow-k)));
  font-family: var(--mx-font-body);
  box-sizing: border-box;
  animation: xsh-sheet-in var(--mx-dur-mid) var(--mx-ease);
}
@keyframes xsh-sheet-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .xsh-sheet-panel { animation: none; } .xsh-tabbar { transition: none; } }
.xsh-sheet-grip { width: 40px; height: 4px; border-radius: 2px; margin: 4px auto 12px; background: var(--mx-border-emphasis); }
.xsh-sheet-title {
  margin: 0 0 var(--mx-space-1); font: 700 var(--mx-type-section-title)/1.2 var(--mx-font-display);
  color: var(--mx-text-primary);
}
.xsh-sheet-sub { margin: 0 0 var(--mx-space-3); font-size: var(--mx-type-body-small); color: var(--mx-text-muted); }
.xsh-sheet-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--mx-space-2); }
.xsh-sheet .xsh-action {
  display: flex; align-items: center; gap: var(--mx-space-3);
  min-height: 60px; padding: var(--mx-space-3); box-sizing: border-box;
  border: 1px solid var(--mx-border-default); border-radius: 14px;
  background: var(--mx-surface-subtle); color: var(--mx-text-primary); text-decoration: none;
}
.xsh-action:hover { background: var(--mx-hover-overlay); }
.xsh-action:active { background: var(--mx-active-overlay); }
.xsh-action-icon {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
  background: var(--mx-accent-gold-soft); color: var(--mx-accent-gold-text);
}
.xsh-action-text { display: flex; flex-direction: column; min-width: 0; }
.xsh-action-title { font: 600 var(--mx-type-card-title)/1.3 var(--mx-font-body); }
.xsh-action-desc { font-size: var(--mx-type-caption); color: var(--mx-text-muted); line-height: 1.4; }
.xsh-sheet .xsh-sheet-cancel {
  width: 100%; min-height: var(--mx-touch-min); margin-top: var(--mx-space-3);
  border: 1px solid var(--mx-border-emphasis); border-radius: var(--mx-radius-button);
  background: transparent; color: var(--mx-text-primary); font: 600 14px var(--mx-font-body); cursor: pointer;
}

/* ---- Appearance quick control (sidebar footer / phone Menu) ------------- */
.sidebar .xsh-appearance {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px;
  padding: 6px 12px; font: 500 12px/1.3 var(--mx-font-body); color: var(--sidebar-text);
}
.sidebar .xsh-appearance-label { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar .xsh-appearance-label [data-xln-theme-current] { color: var(--sidebar-text-active); font-weight: 600; }
.sidebar .xsh-appearance-seg {
  display: inline-flex; flex: 0 0 auto; gap: 2px; padding: 2px;
  border: 1px solid var(--mx-nav-border); border-radius: 9px; background: var(--mx-nav-hover);
}
.sidebar .xsh-appearance-seg button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 28px; padding: 0; border: 0; border-radius: 7px;
  background: transparent; color: var(--sidebar-text); font-size: 15px; cursor: pointer;
}
.sidebar .xsh-appearance-seg button:hover { color: var(--sidebar-text-active); background: var(--mx-hover-surface); }
.sidebar .xsh-appearance-seg button[aria-pressed="true"] {
  background: var(--mx-surface-primary); color: var(--mx-accent-gold-text);
  box-shadow: 0 0 0 1px var(--mx-border-strong);
}
.sidebar .xsh-appearance-seg button .iconify, .sidebar .xsh-appearance-seg button svg { pointer-events: none; }
@media (max-width: 768px) {
  /* In the phone Menu the segments are full touch targets. */
  html:has(#xshTabBar) .sidebar .xsh-appearance { padding: 8px 12px; }
  html:has(#xshTabBar) .sidebar .xsh-appearance-seg button { width: 44px; height: 44px; font-size: 18px; }
}

/* The Apps & Agents launcher is hoisted to <body> by nav/sidebar.php (inside
   the sidebar it inherited the drawer's transform on phones and rendered
   inside the 260px drawer). Out there it must still stack above the sidebar. */
body > .xl-launcher { z-index: 12100; }