/* =====================================================================
   MB SUITE v3 · LEFT SIDEBAR NAVIGATION  (replaces mb-suite-appbar.css)
   Load order: mb-suite-core.css → app adapter → mb-suite-cutouts.css (v2) → this file → <app>-v3.css
   Needs v1 tokens (--surface, --border, --accent, --r-sm, --page-max, --gutter …) and, if present,
   v2's --g-line / --cut-mid for the gradient accents (falls back to flat accent without v2).

   Markup (see v3-updates/demo/index.html for a working page):
   <body class="mb-shell">
     <aside class="mb-side" aria-label="App">
       <a class="brand" href="./" aria-label="mbname.online: go to Home"> .logo + .bt(b + span) </a>
       <nav class="side-nav" aria-label="Sections"> <button aria-current="page"><svg class="uic"/><span>Home</span></button> … </nav>
       <nav class="side-nav side-end" aria-label="More"> Settings / Help items (optional) </nav>
     </aside>
     <div class="mb-main">
       <header class="page-bar">
         <a class="brand phone-brand" href="./" …>  (same brand block; shown on phones only)
         <h1 class="page-title">Home</h1>
         <div class="actions"> search · status chip · Data · theme switch · primary action </div>
       </header>
       <main class="wrap"> … </main>
     </div>
     <nav class="bnav" aria-label="Sections"> phone bottom bar (max 5 items, rest in a More sheet) </nav>
   </body>

   Breakpoints (identical in every app):
     ≥1024px  sidebar 240px with labels
     768–1023 rail 76px: icon over a short label, logo only
     <768     no sidebar; page-bar becomes the top bar with the brand; docked bottom bar
   ===================================================================== */
:root{
  --side-w:240px; --rail-w:76px; --bar-h:56px;
  --g-rail:linear-gradient(180deg,var(--accent),var(--cut-mid,var(--accent)));
}

/* family accent line across the whole window (sidebar included) */
.mb-shell::before{content:"";position:fixed;left:0;right:0;top:0;height:3px;background:var(--g-line,var(--accent));z-index:60;pointer-events:none}

/* ---- sidebar ---- */
.mb-side{position:fixed;top:0;bottom:0;left:0;width:var(--side-w);z-index:40;display:flex;flex-direction:column;gap:2px;
  padding:15px 0 12px;background:var(--surface);border-right:1px solid var(--border);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.mb-side .brand{margin:0 8px 12px;padding:6px 8px}
.side-nav{display:flex;flex-direction:column;gap:2px;padding:0 8px}
.side-nav.side-end{margin-top:auto;padding-top:8px;border-top:1px solid var(--border)}
.side-label{margin:14px 20px 4px;font-size:var(--fs-xs,11.5px);font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.side-nav button,.side-nav a{position:relative;display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:0 12px;border:0;border-radius:var(--r-sm);
  background:none;font:500 14px var(--font);color:var(--ink-2);text-align:left;text-decoration:none;cursor:pointer;
  transition:background-color var(--ease),color var(--ease)}
.side-nav .uic,.side-nav svg{flex:none;width:18px;height:18px;opacity:.75}
.side-nav button:hover,.side-nav a:hover{background:var(--surface-2);color:var(--ink)}
.side-nav [aria-current="page"],.side-nav [aria-current="page"]:hover{color:var(--accent);font-weight:600;
  background:var(--g-rail) left center/3px 60% no-repeat,var(--accent-soft)}
.side-nav [aria-current="page"] svg{opacity:1}
.side-nav button:focus-visible,.side-nav a:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.side-nav .count{margin-left:auto;font-size:12px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.side-nav .dot{position:absolute;left:24px;top:8px;width:8px;height:8px;border-radius:2px;background:var(--warn)}

/* ---- the brand block: ALWAYS a link to the home / start view ---- */
a.brand{display:flex;align-items:center;gap:9px;min-width:0;border-radius:var(--r-sm);color:inherit;text-decoration:none;transition:background-color var(--ease)}
a.brand:hover{background:var(--surface-2)}
a.brand:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.brand .logo,.brand .logo svg{display:block;flex:none;width:28px;height:28px;border-radius:var(--r)}
.brand .bt{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.brand b{font-size:14.5px;font-weight:650;letter-spacing:-.005em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand .bt span{font-size:11px;color:var(--muted);letter-spacing:.01em;white-space:nowrap}

/* ---- main column + page bar ---- */
.mb-main{margin-left:var(--side-w);min-width:0}
.page-bar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;min-height:var(--bar-h);
  padding:3px max(var(--gutter),calc((100% - var(--page-max)) / 2 + var(--gutter))) 0;
  background:color-mix(in srgb,var(--surface) 96%,transparent);border-bottom:1px solid var(--border);box-shadow:var(--shadow)}
.page-bar .phone-brand{display:none}
.page-title{margin:0;font-size:18px;font-weight:650;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.page-bar .actions{margin-left:auto;display:flex;align-items:center;gap:6px}
.page-bar .actions>*{min-height:var(--ctl-sm)}
.mb-main>.wrap{max-width:var(--page-max);margin:0 auto;padding:20px max(var(--gutter),env(safe-area-inset-right)) 48px max(var(--gutter),env(safe-area-inset-left))}

/* ---- phone bottom bar (hidden until <768px) ---- */
.bnav{display:none}

/* ---- tablet: compact rail ---- */
@media (max-width:1023px){
  .mb-side{width:var(--rail-w);padding-top:12px}
  .mb-side .brand{justify-content:center;margin:0 10px 10px;padding:8px 0}
  .mb-side .brand .bt,.side-label,.side-nav .count{display:none}
  .side-nav{padding:0 6px}
  .side-nav button,.side-nav a{flex-direction:column;justify-content:center;gap:3px;min-height:56px;padding:6px 2px;font-size:10.5px;text-align:center;line-height:1.15}
  .side-nav [aria-current="page"],.side-nav [aria-current="page"]:hover{background:var(--g-rail) left center/3px 50% no-repeat,var(--accent-soft)}
  .side-nav .dot{left:auto;right:12px}
  .mb-main{margin-left:var(--rail-w)}
}
/* ---- phones: top bar with the brand + docked bottom bar ---- */
@media (max-width:767px){
  .mb-side{display:none}
  .mb-main{margin-left:0}
  .page-bar{padding:3px max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left));gap:8px}
  .page-bar .phone-brand{display:flex;margin-left:-3px;padding:3px 6px 3px 3px}
  .page-bar .page-title{display:none}               /* the view's own h2 / banner names the page on phones */
  .page-bar .actions .hide-phone{display:none}
  .bnav{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;left:0;right:0;bottom:0;z-index:40;
    padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background:var(--surface);border-top:1px solid var(--border-strong)}
  .bnav button,.bnav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:56px;border:0;border-radius:0;background:none;
    font:500 11px var(--font);color:var(--ink-2);text-decoration:none}
  .bnav svg{width:20px;height:20px}
  .bnav [aria-current="page"]{color:var(--accent);font-weight:600;background:var(--g-underline,linear-gradient(var(--accent),var(--accent))) top/100% 2px no-repeat}
  body.mb-shell{padding-bottom:calc(56px + env(safe-area-inset-bottom))}
}
@media (max-width:420px){.page-bar .phone-brand .bt span{display:none}}
@media print{.mb-side,.bnav,.page-bar .actions,.mb-shell::before{display:none!important}.mb-main{margin-left:0}}