/* ============================================================
   CLAB ZERO TRUST — APP SHELL / LAYOUT / BACKDROP
   Base element styles, ambient backdrop, sidebar + header chrome.
   Extracted from Slice 0, plus responsive + reduced-motion rules.
   ============================================================ */

body{
  background:var(--bg-base); color:var(--text);
  font-family:var(--font-sans); font-size:var(--fs-base); font-weight:400; line-height:var(--lh-base);
  -webkit-font-smoothing:antialiased; overflow:hidden; height:100vh;
  transition:background-color .5s ease,color .5s ease;
}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--text-head);margin:0;line-height:var(--lh-tight)}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
::selection{background:var(--brand-glow)}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--border-bright);border-radius:4px}
::-webkit-scrollbar-track{background:transparent}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* Ambient backdrop */
.backdrop{position:fixed;inset:0;z-index:0;pointer-events:none}
.backdrop .wash{position:absolute;inset:0;background:var(--bg-gradient)}
.backdrop .grid{position:absolute;inset:0;
  background-image:linear-gradient(to right,var(--grid-color) 1px,transparent 1px),linear-gradient(to bottom,var(--grid-color) 1px,transparent 1px);
  background-size:32px 32px;
  -webkit-mask-image:radial-gradient(circle at 60% 30%,#000 10%,transparent 75%);mask-image:radial-gradient(circle at 60% 30%,#000 10%,transparent 75%);}
.backdrop .orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:0;transition:opacity .6s}
.backdrop .orb.ember{width:760px;height:760px;top:-18%;right:-12%;background:radial-gradient(circle,var(--brand) 0%,transparent 70%)}
.backdrop .orb.mint{width:560px;height:560px;bottom:-20%;left:-10%;background:radial-gradient(circle,var(--ok) 0%,transparent 70%)}
html[data-theme="dark"] .backdrop .orb.ember{opacity:.16}
html[data-theme="dark"] .backdrop .orb.mint{opacity:.1}

/* Layout */
.app{position:relative;z-index:1;display:flex;height:100vh;overflow:hidden}
.sidebar{width:var(--sidebar-w);flex-shrink:0;display:flex;flex-direction:column;
  background:var(--surface);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border-right:1px solid var(--border);transition:background-color .5s,border-color .5s}
.brand{display:flex;align-items:center;gap:12px;padding:0 18px;height:var(--header-h);border-bottom:1px solid var(--border)}
.brand .mark{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex-shrink:0;
  background:var(--brand-bg);border:1px solid var(--brand-border);color:var(--brand)}
html[data-theme="dark"] .brand .mark{box-shadow:0 0 18px var(--brand-glow)}
.brand .bname{font-family:var(--font-display);font-weight:800;font-size:.95rem;letter-spacing:.14em;color:var(--text-head)}
.brand .bsub{font-family:var(--font-mono);font-size:var(--fs-cap);text-transform:uppercase;letter-spacing:.2em;color:var(--brand)}

.scope{margin:14px 12px;padding:12px;border-radius:var(--radius);background:var(--ok-bg);border:1px solid var(--ok-bd)}
.scope .r1{display:flex;align-items:center;gap:8px;color:var(--ok);font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:600}
.scope .r2{font-size:var(--fs-xs);color:var(--text-muted);margin-top:5px}
.scope .r3{font-family:var(--font-mono);font-size:var(--fs-cap);text-transform:uppercase;letter-spacing:.12em;color:var(--text-muted);margin-top:3px}

.gnav{flex:1;overflow-y:auto;padding:8px 10px}
.gnav .group{font-family:var(--font-mono);font-size:var(--fs-cap);text-transform:uppercase;letter-spacing:.18em;color:var(--text-muted);padding:14px 10px 6px;font-weight:700}
.gnav .item{display:flex;align-items:center;gap:12px;padding:9px 11px;border-radius:var(--radius-sm);font-size:var(--fs-sm);font-weight:500;color:var(--text-muted);cursor:pointer;border:1px solid transparent;transition:all .18s;margin-bottom:2px;text-decoration:none}
.gnav .item i.lead{width:20px;text-align:center;font-size:1rem}
.gnav .item:hover{background:var(--surface-hover);color:var(--text-strong)}
.gnav .item.active{background:var(--brand-bg);color:var(--brand);border-color:var(--brand-border)}
html[data-theme="dark"] .gnav .item.active{box-shadow:inset 3px 0 0 var(--brand)}
.gnav .item .soon{margin-left:auto;font-family:var(--font-mono);font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);border:1px solid var(--border-bright);padding:1px 5px;border-radius:6px}
.gnav .divider{height:1px;background:var(--border);margin:8px 10px}

.side-foot{padding:12px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.uplink{display:flex;align-items:center;gap:8px;font-size:var(--fs-xs);color:var(--text);font-weight:500}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok);display:inline-block}
.dot.pulse{animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--ok)}70%{box-shadow:0 0 0 6px transparent}100%{box-shadow:0 0 0 0 transparent}}

.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.header{height:var(--header-h);flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 22px;
  background:var(--surface);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border-bottom:1px solid var(--border);transition:background-color .5s,border-color .5s}
.crumbs{display:flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--text-muted)}
.crumbs .root{color:var(--text-strong)} .crumbs .here{color:var(--brand)} .crumbs i{opacity:.5;font-size:.7rem}
.header .right{display:flex;align-items:center;gap:14px}
.pill{display:flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;background:var(--surface-inset);border:1px solid var(--border);font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-muted)}
.pill.demo{color:var(--sev-med);border-color:var(--sev-med-bd);background:var(--sev-med-bg)}
.iconbtn{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;cursor:pointer;color:var(--text-muted);background:transparent;border:1px solid transparent;transition:all .18s}
.iconbtn:hover{background:var(--surface-hover);color:var(--text-strong);border-color:var(--border)}
.who{text-align:right} .who .n{font-size:var(--fs-xs);font-weight:600;color:var(--text-strong)} .who .t{font-family:var(--font-mono);font-size:var(--fs-cap);color:var(--text-muted)}

.canvas{flex:1;overflow-y:auto;padding:22px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:20px;gap:16px;flex-wrap:wrap}
.page-head h2{font-size:var(--fs-2xl);font-weight:700;display:flex;align-items:center;gap:12px}
.page-head h2 i{color:var(--brand);font-size:1.35rem}
.page-head p{font-size:var(--fs-sm);color:var(--text-muted);margin:5px 0 0}

/* Responsive — collapse sidebar to icon rail on narrow viewports */
@media (max-width: 991.98px){
  :root{--sidebar-w:64px}
  .brand{justify-content:center;padding:0}
  .brand>div:last-child,.scope,.gnav .group,.gnav .item .nav-lbl,.gnav .item .soon,.uplink{display:none}
  .gnav .item{justify-content:center}
  .side-foot{justify-content:center;flex-direction:column;gap:6px}
  .who{display:none}
  .canvas{padding:14px}
}
@media (max-width: 575.98px){
  .header .pill:not(.demo){display:none}
  .gdrawer{width:100vw;max-width:100vw}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}