/* ==========================================================================
   Abledly — Cabinet shell (Wave 3)
   Shared layout for the logged-in area: left sidebar + topbar.
   Additive only — scoped entirely under body.cabinet / .cab-* classes so it
   cannot leak onto marketing pages. See cabinet.js for the DOM it decorates.
   ========================================================================== */

body.cabinet{
  --cab-bg:#08090c;
  --cab-panel:#0d0f14;
  --cab-panel2:#12141b;
  --cab-ink:#f4f5f8;
  --cab-sub:#9599ab;
  --cab-subdim:#6b6f80;
  --cab-line:rgba(255,255,255,.09);
  --cab-line2:rgba(255,255,255,.16);
  --cab-accent:#7c7cff;
  --cab-accent2:#22d3ee;
  --cab-accent-soft:rgba(124,124,255,.14);
  --cab-cyan-soft:rgba(34,211,238,.09);
  --cab-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --cab-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --cab-sidebar-w:240px;
  --cab-sidebar-w-collapsed:64px;
  --cab-t:180ms cubic-bezier(.4,0,.2,1);
  --cab-t-fast:120ms ease;

  display:flex;
  align-items:flex-start;
  min-height:100vh;
}

/* ---------- sidebar ---------- */
.cab-sidebar{
  flex:0 0 var(--cab-sidebar-w);
  width:var(--cab-sidebar-w);
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
  overflow-x:hidden;
  display:flex;
  flex-direction:column;
  background:linear-gradient(180deg,var(--cab-panel),var(--cab-bg));
  border-right:1px solid var(--cab-line);
  z-index:100;
  transition:width var(--cab-t),transform var(--cab-t);
  scrollbar-width:thin;
}
body.cab-collapsed .cab-sidebar{ width:var(--cab-sidebar-w-collapsed); flex-basis:var(--cab-sidebar-w-collapsed); }

.cab-sidebar-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:16px 14px;
  border-bottom:1px solid var(--cab-line);
  flex-shrink:0;
  min-height:60px;
}
.cab-logo{ display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--cab-ink); font-weight:800; font-size:15.5px; letter-spacing:-.02em; overflow:hidden; }
.cab-logo-mark{ width:26px; height:26px; flex-shrink:0; border-radius:8px; background:linear-gradient(135deg,var(--cab-accent),var(--cab-accent2)); display:grid; place-items:center; color:#08090c; font-weight:900; font-size:13px; }
.cab-logo-text{ white-space:nowrap; }
body.cab-collapsed .cab-logo-text{ display:none; }

.cab-collapse-btn{
  flex-shrink:0;
  width:26px; height:26px;
  border:1px solid var(--cab-line);
  background:rgba(255,255,255,.03);
  color:var(--cab-sub);
  border-radius:8px;
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:background var(--cab-t),color var(--cab-t),border-color var(--cab-t);
}
.cab-collapse-btn svg{ width:14px; height:14px; transition:transform var(--cab-t); }
body.cab-collapsed .cab-collapse-btn svg{ transform:rotate(180deg); }
@media(hover:hover){ .cab-collapse-btn:hover{ background:var(--cab-cyan-soft); color:var(--cab-ink); border-color:var(--cab-line2); } }
@media(max-width:900px){ .cab-collapse-btn{ display:none; } }

.cab-nav{ flex:1; padding:14px 0 18px; }
.cab-nav-group{ margin:0 0 18px; }
.cab-nav-group:last-child{ margin-bottom:4px; }
.cab-nav-label{
  font-family:var(--cab-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--cab-subdim);
  padding:0 20px 8px;
  white-space:nowrap;
}
body.cab-collapsed .cab-nav-label{ display:none; }

.cab-nav-item,
.cab-nav-btn{
  position:relative;
  display:flex;
  align-items:center;
  gap:11px;
  margin:0 8px 2px;
  padding:9px 12px 9px 16px;
  border-radius:10px;
  color:var(--cab-sub);
  text-decoration:none;
  font-size:13.5px;
  font-weight:600;
  font-family:inherit;
  background:transparent;
  border:none;
  width:calc(100% - 16px);
  text-align:left;
  cursor:pointer;
  transition:background var(--cab-t),color var(--cab-t),transform var(--cab-t-fast);
}
.cab-nav-item::before,
.cab-nav-btn::before{
  content:"";
  position:absolute;
  left:4px;
  top:50%;
  transform:translateY(-50%);
  width:3px;
  height:0;
  border-radius:3px;
  background:var(--cab-accent2);
  transition:height var(--cab-t);
}
.cab-nav-item.active{ background:var(--cab-accent-soft); color:var(--cab-ink); }
.cab-nav-item.active::before{ height:16px; }
@media(hover:hover){
  .cab-nav-item:hover,
  .cab-nav-btn:hover{ background:var(--cab-cyan-soft); color:var(--cab-ink); transform:translateX(2px); }
}
.cab-nav-item:focus-visible,
.cab-nav-btn:focus-visible,
.cab-collapse-btn:focus-visible,
.cab-burger:focus-visible,
.cab-topbar-link:focus-visible{
  outline:2px solid var(--cab-accent2);
  outline-offset:2px;
  border-radius:8px;
}
.cab-nav-icon{ display:flex; flex-shrink:0; width:17px; height:17px; }
.cab-nav-icon svg{ width:100%; height:100%; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.cab-nav-text{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.cab-collapsed .cab-nav-text{ display:none; }
body.cab-collapsed .cab-nav-item,
body.cab-collapsed .cab-nav-btn{ justify-content:center; padding:9px; margin:0 8px 2px; width:calc(100% - 16px); }
body.cab-collapsed .cab-nav-item::before,
body.cab-collapsed .cab-nav-btn::before{ left:0; }

/* ---------- scrim (mobile drawer) ---------- */
.cab-scrim{
  position:fixed; inset:0;
  background:rgba(4,4,8,.6);
  opacity:0;
  pointer-events:none;
  z-index:90;
  transition:opacity var(--cab-t);
}
@media(min-width:901px){ .cab-scrim{ display:none; } }

/* ---------- content column ---------- */
.cab-content{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; min-height:100vh; }

.cab-topbar{
  position:sticky;
  top:0;
  z-index:40;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  height:60px;
  padding:0 22px;
  background:rgba(8,9,12,.72);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--cab-line);
}
.cab-topbar-left{ display:flex; align-items:center; gap:14px; min-width:0; }
.cab-topbar-title{
  font-size:14.5px;
  font-weight:700;
  color:var(--cab-ink);
  letter-spacing:-.01em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.cab-topbar-right{ display:flex; align-items:center; gap:16px; flex-shrink:0; }
.cab-topbar-link{
  text-decoration:none;
  font-size:13.5px;
  font-weight:700;
  color:var(--cab-ink);
  background:linear-gradient(135deg,var(--cab-accent),var(--cab-accent2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  transition:filter var(--cab-t),transform var(--cab-t-fast);
}
@media(hover:hover){ .cab-topbar-link:hover{ filter:brightness(1.2); transform:translateX(1px); } }

.cab-burger{
  display:none;
  flex-shrink:0;
  width:32px; height:32px;
  border:1px solid var(--cab-line);
  background:rgba(255,255,255,.03);
  color:var(--cab-ink);
  border-radius:9px;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  transition:background var(--cab-t),border-color var(--cab-t);
}
.cab-burger svg{ width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
@media(hover:hover){ .cab-burger:hover{ background:var(--cab-cyan-soft); border-color:var(--cab-line2); } }
@media(max-width:900px){ .cab-burger{ display:flex; } }

.cab-main{ flex:1; }

/* ---------- mobile: sidebar becomes an off-canvas drawer ---------- */
@media(max-width:900px){
  body.cabinet{ display:block; }
  .cab-sidebar{
    position:fixed;
    top:0; left:0;
    height:100vh;
    width:min(var(--cab-sidebar-w),82vw);
    transform:translateX(-100%);
    box-shadow:30px 0 60px rgba(0,0,0,.5);
  }
  body.cab-drawer-open .cab-sidebar{ transform:translateX(0); }
  body.cab-drawer-open .cab-scrim{ opacity:1; pointer-events:auto; }
  .cab-content{ width:100%; }
  body.cab-collapsed .cab-sidebar{ width:min(var(--cab-sidebar-w),82vw); } /* collapse state is desktop-only; ignore on mobile */
  body.cab-collapsed .cab-nav-text,
  body.cab-collapsed .cab-logo-text,
  body.cab-collapsed .cab-nav-label{ display:block; }
  body.cab-collapsed .cab-nav-item,
  body.cab-collapsed .cab-nav-btn{ justify-content:flex-start; padding:9px 12px 9px 16px; }
}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .cab-sidebar,.cab-scrim,.cab-nav-item,.cab-nav-btn,.cab-nav-item::before,.cab-nav-btn::before,
  .cab-collapse-btn,.cab-collapse-btn svg,.cab-burger,.cab-topbar-link{
    transition:none !important;
    animation:none !important;
  }
}

/* ---------- per-page: hide old marketing/nav chrome that the cabinet topbar replaces ----------
   Only applied where the old header is purely navigational (no functional controls) — see
   cabinet.js PAGE_CONFIG / recon notes. Currently: site.html's marketing header + back-link bar. */
body.cabinet[data-cab-page="site"] header.nav,
body.cabinet[data-cab-page="site"] .top{ display:none; }