/* ── SIDEBAR ─────────────────────────────────── */
.sb{width:220px;height:100%;flex-shrink:0;background:var(--sur);border-right:1px solid var(--bd);display:flex;flex-direction:column;padding:10px 0}
.sb-brand{padding:0 18px 11px;border-bottom:1px solid var(--bd);margin-bottom:12px}
.sb-logo{font-family:var(--fs);font-size:22px;font-weight:var(--dw);letter-spacing:.03em}
.sb-logo .dot{color:var(--ac)}
.sb-sub{font-size:10px;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--mu);margin-top:3px}
.nav-g{padding:0 10px}
.nav-lbl{font-size:10px;font-weight:700;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--mu);padding:0 8px;margin-bottom:6px}
.nav-it{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--r-sm);color:var(--mu);font-size:13.5px;font-weight:600;cursor:pointer;transition:background var(--t-fast),color var(--t-fast);margin-bottom:1px;border:none;background:none;width:100%;text-align:left}
.nav-it:hover{background:var(--bd);color:var(--tx)}
.nav-it.active{background:var(--acs);color:var(--tx)}
.nav-it.active .ni{color:var(--ac)}
/* ── Section colour identity (Parra panel system) ──
   Each workspace area owns a hue: Home=rose (--ac, the default .active rule),
   Documents=blue, Tasks=lime, Calendar=gold. The active item tints its row +
   icon with its section colour; hovering any item previews that colour on its
   icon for a small bit of life. --ac-driven --acs already covers Home. */
.nav-it[data-nav="documents"].active{background:color-mix(in srgb,var(--c-docs) 13%,transparent)}
.nav-it[data-nav="documents"].active .ni{color:var(--c-docs)}
.nav-it[data-nav="documents"]:hover .ni{color:var(--c-docs)}
.nav-it[data-nav="tasks"].active{background:color-mix(in srgb,var(--gr) 13%,transparent)}
.nav-it[data-nav="tasks"].active .ni{color:var(--gr)}
.nav-it[data-nav="tasks"]:hover .ni{color:var(--gr)}
.nav-it[data-nav="calendar"].active{background:color-mix(in srgb,var(--go) 13%,transparent)}
.nav-it[data-nav="calendar"].active .ni{color:var(--go)}
.nav-it[data-nav="calendar"]:hover .ni{color:var(--go)}
.nav-it[data-nav="home"]:hover .ni{color:var(--ac)}
.ni{width:15px;height:15px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.5}
.sb-ver{margin-top:auto;padding:14px 18px 0;border-top:1px solid var(--bd);font-size:10px;color:var(--mu)}

/* ── Themed scrollbars (Windows/Chromium show chunky OS bars otherwise) ── */
*::-webkit-scrollbar{width:11px;height:11px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--bd2);border-radius:var(--r-md);border:3px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:var(--mu);background-clip:padding-box}
*::-webkit-scrollbar-corner{background:transparent}
html{scrollbar-color:var(--bd2) transparent;scrollbar-width:thin}

/* ── MAIN / TOPBAR ───────────────────────────── */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden}
/* Fixed height so the header doesn't grow/shrink between views (the Aa button +
   sync chip are taller than bare breadcrumbs). */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:0 28px;height:52px;border-bottom:1px solid var(--bd);background:var(--bg);flex-shrink:0;box-sizing:border-box}
.tp-pg{font-family:var(--fs);font-size:17px;font-weight:var(--dw);letter-spacing:.05em}
.tp-act{display:flex;align-items:center;gap:8px}
.btn{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;font-family:var(--fm);font-size:11px;letter-spacing:.04em;border-radius:var(--r-sm);border:none;transition:background var(--t-fast),color var(--t-fast)}
.btn-o{background:transparent;color:var(--mu);border:1px solid var(--bd)}
.btn-o:hover{color:var(--tx);border-color:var(--mu)}
.btn-a{background:var(--ac);color:#1a0810}
.btn-a:hover{opacity:.88}
.btn-sm{padding:4px 10px;font-size:10px}

/* ── VIEW SYSTEM ─────────────────────────────── */
.view{display:flex;flex-direction:column;flex:1;overflow:hidden}
.view.hidden{display:none}

/* ── Mobile menu button + drawer backdrop (hidden on desktop) ── */
/* .nav-btn compound keeps this above the generic `.nav-btn{display:flex}` rule. */
.nav-btn.nav-menu-btn{display:none}
.sb-backdrop{display:none}

/* ── Narrow viewports: phones + portrait/second monitors ──
   The sidebar becomes an off-canvas drawer so content gets the full width,
   which reads far better in a tall, vertical layout. */
/* Selectors here carry extra specificity (html/body prefixes, !important) so the
   drawer wins over later-loaded sidebar rules like `.sb{position:relative}` and
   `body.sb-collapsed .sb{width:60px}` regardless of stylesheet order. */
@media (max-width:860px){
  .nav-btn.nav-menu-btn{display:flex}
  /* Drawer: full sidebar slides in over the content; ignore the desktop mini-rail. */
  html body .sb,html body.sb-collapsed .sb{
    position:fixed!important;top:0;bottom:0;left:0;width:min(84vw,300px)!important;
    transform:translateX(-100%);transition:transform var(--t-slow) ease;
    z-index:1000;box-shadow:0 0 40px rgba(0,0,0,.5)
  }
  html body.sb-mobile-open .sb{transform:none}
  /* Inside the drawer, always show the full sidebar even if it was collapsed on desktop. */
  body.sb-collapsed .sb-list-g{display:block!important}
  body.sb-collapsed .sb-brand{padding:0 18px 18px!important;text-align:left!important}
  body.sb-collapsed .sb-sub,body.sb-collapsed .logo-full{display:block!important}
  body.sb-collapsed .logo-mark{display:none!important}
  body.sb-collapsed .sb-foot-lbl,body.sb-collapsed .nav-it-lbl{display:inline!important}
  /* Hide the desktop collapse button on mobile — the drawer is toggled from the topbar. */
  #sb-toggle{display:none}
  .sb-backdrop{display:block;position:fixed;inset:0;z-index:999;background:rgba(0,0,0,.5);
    opacity:0;pointer-events:none;transition:opacity var(--t-slow) ease}
  body.sb-mobile-open .sb-backdrop{opacity:1;pointer-events:auto}
  .topbar{padding:0 14px}
  /* The "Customize" page-settings button drops to just its gear on phones to save room. */
  .tp-pgset .tp-pgset-lbl{display:none}
}