/* ============================================================================
   sitenav.css — SINGLE SOURCE OF TRUTH for the terminal sidebar sizing + finish.
   Shared by the terminal pages that use the hardcoded .sitenav markup.

   IDENTITY PASS (2026-07): the hardcoded chrome colours here now reference
   tokens.css vars, each with a FALLBACK equal to its previous production value —
   so a page that has not yet adopted tokens.css renders exactly as before, while
   a page that has (index) picks up the new palette. Sizing/structure unchanged.
   ========================================================================== */

/* 0) RAIL SURFACE (shared — THE fix for the per-page split; lands on every page).
   Elevated card-family surface, clearly lifted off the near-black page; divider
   keeps the edge crisp. Fallbacks keep pages without tokens.css intact. */
.fa-shell .sitenav{background:var(--bg-rail,#12192A)!important;border-right:1px solid var(--border,#232B3D)!important;}

/* 1) Labels + states, RE-STEPPED above the rail (shared, so they never vanish
   into it and never need a per-page fix again). */
.fa-shell .sitenav .sn-item{color:var(--text-2,#D0D7DE);}
.fa-shell .sitenav .sn-item:hover{background:var(--bg-2,#1A2234)!important;color:var(--anchor,#FFFFFF)!important;}
.fa-shell .sitenav .sn-item.active{background:linear-gradient(90deg,var(--accent-bg,rgba(126,156,196,.14)),transparent)!important;box-shadow:inset 2px 0 0 var(--accent,#7e9cc4)!important;color:var(--anchor,#FFFFFF)!important;font-weight:500;}

/* 1b) UNIFIED nav icons (identity pass): one muted chrome for every section; the
   ACTIVE item carries the accent. This is the shared home for the icon-unify so
   ALL terminal pages inherit it (replaces the per-page multicolour icon set).
   Wins over each page's per-section #hex rules via equal specificity (0,3,1) +
   !important + later source order. Fallbacks keep not-yet-migrated pages sane. */
.fa-shell .sitenav .sn-item svg{color:var(--nav-icon,#8893A5)!important;}
.fa-shell .sitenav .sn-item.active svg{color:var(--accent,#7e9cc4)!important;}

/* 2) Group headers. */
.fa-shell .sitenav .sn-group{font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:10.5px;
  font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-quiet,#8f99a8);padding:0 12px;margin:15px 0 5px;}
.fa-shell .sitenav .sn-group:first-of-type{margin-top:8px;}
.fa-shell .sitenav .sn-group-account{margin-top:auto;padding-top:14px;border-top:1px solid var(--border,#1f2836);}

/* === Sizing pass (desktop only; no colour, bg, width, or structural change). === */
@media(min-width:901px){
  .fa-shell .sitenav .sn-brand{gap:9px!important;padding:4px 10px 16px!important;margin-bottom:8px!important;}
  .fa-shell .sitenav .sn-mark{width:22px!important;height:22px!important;border-radius:6px!important;}
  .fa-shell .sitenav .sn-mark::after{width:8px!important;height:8px!important;}
  .fa-shell .sitenav .sn-name{font-size:15px!important;}

  .fa-shell .sitenav{gap:4px!important;}
  .fa-shell .sitenav .sn-item{font-size:13.5px!important;padding:10px 12px!important;gap:11px!important;}
  .fa-shell .sitenav .sn-item svg{width:17px!important;height:17px!important;}

  .fa-shell .sitenav .sn-item[href$="index.html"]:not(.sn-brand),
  .fa-shell .sitenav .sn-item[href="index"]{margin-top:4px;}
}

/* ============================================================================
   PHASE 2 — collapsible desktop sidebar (icon rail).
   ========================================================================== */
.fa-shell .sitenav .sn-toggle{background:none;border:none;width:100%;cursor:pointer;
  font-family:'IBM Plex Sans',system-ui,sans-serif;text-align:left;margin-top:6px;}
.fa-shell .sitenav .sn-toggle svg{transition:transform .2s ease;}
html.fa-nav-collapsed .fa-shell .sitenav .sn-toggle svg{transform:rotate(180deg);}
@media(max-width:900px){ .fa-shell .sitenav .sn-toggle{display:none!important;} }

/* Instant rail tooltip. */
#fa-sn-tip{position:fixed;transform:translateY(-50%);z-index:500;pointer-events:none;opacity:0;
  background:var(--bg-2,#161C28);border:1px solid var(--border-hi,#2b3647);color:var(--text,#E6EDF3);padding:6px 10px;border-radius:7px;
  white-space:nowrap;font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:13px;font-weight:500;
  line-height:1;box-shadow:0 6px 20px rgba(0,0,0,.55);}
#fa-sn-tip.on{opacity:1;}

@media(min-width:901px){
  html.fa-nav-collapsed .fa-shell .sitenav{width:58px!important;flex:0 0 58px!important;
    min-width:58px!important;max-width:58px!important;padding-left:6px!important;padding-right:6px!important;
    align-items:center!important;}
  html.fa-nav-collapsed .fa-main{margin-left:58px!important;}

  html.fa-nav-collapsed .fa-shell .sitenav .sn-brand{justify-content:center!important;padding-left:0!important;padding-right:0!important;}
  html.fa-nav-collapsed .fa-shell .sitenav .sn-name{display:none!important;}

  html.fa-nav-collapsed .fa-shell .sitenav .sn-item{justify-content:center!important;
    padding:11px 0!important;width:46px!important;gap:0!important;}
  html.fa-nav-collapsed .fa-shell .sitenav .sn-item > span:not(.fa-acct-av){display:none!important;}

  /* Active page stays obvious in the rail: accent bar + tint. */
  html.fa-nav-collapsed .fa-shell .sitenav .sn-item.active{box-shadow:inset 3px 0 0 var(--accent,#7e9cc4)!important;background:var(--accent-bg,rgba(126,156,196,.14))!important;}

  html.fa-nav-collapsed .fa-shell .sitenav .sn-group{height:1px!important;width:24px!important;
    margin:8px auto!important;padding:0!important;border-top:1px solid var(--border,#1f2836);color:transparent!important;
    font-size:0!important;overflow:hidden;}
  html.fa-nav-collapsed .fa-shell .sitenav .sn-group-account{margin-top:auto!important;}
}