/* ============================================================
   VerifyUGC v7 — shared dashboard shell (sidebar + shell grid)
   The single canonical creator-dashboard chrome. Consumed by the
   desktop SPA (public/assets/pages/dashboard/index.js) and — as the
   Phase-B streams migrate — every standalone SSR creator page
   (trust-score / receipts / vouches / referrals / security).
   Tokens come from /assets/v7/chrome.css (which @imports base.css:
   --a1/--grad/--acc-glow/--head/--warning/--border/--dim/--mono…).
   Link this AFTER chrome.css. WS-A owns this file (INV-4: additive to
   the shared kernel; no other workstream edits shared/).
   ============================================================ */

/* shell: sidebar + content. A two-column grid; the host page's own
   container (the SPA's .wrap, an SSR page's .shell wrapper) sets the
   outer max-width, so this only lays out the columns. */
.dash-shell { display:grid; grid-template-columns:216px minmax(0,1fr); gap:26px; align-items:start; }
.dash-main { min-width:0; }

/* sidebar */
.side { position:sticky; top:82px; display:flex; flex-direction:column; gap:2px; padding:0 0 14px; }

/* user / profile card — the whole card is an <a> to /@handle */
.side-me { display:flex; align-items:center; gap:11px; padding:13px; margin-bottom:10px; border-radius:14px;
  text-decoration:none; color:inherit; cursor:pointer; transition:background .12s ease, box-shadow .12s ease; }
.side-me:hover { background:rgba(255,255,255,.05); }
.side-me:focus-visible { outline:2px solid var(--acc, #a855f7); outline-offset:2px; }
.side-me .av { width:38px; height:38px; flex:0 0 auto; border-radius:50%; background:var(--grad); display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:700; font-size:.95rem; color:#fff; box-shadow:0 0 12px var(--acc-glow); overflow:hidden; }
.side-me .av.has-img { background:none; }
.side-me .av img { width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; }
.side-me .who { flex:1; min-width:0; }
.side-me .who b { display:block; font-family:var(--mono); font-size:.8rem; font-weight:600; color:var(--head); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.side-me .who span { display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--warning); }
.side-me .who span i { font-style:normal; color:var(--faint); }

/* group heading */
.side-sec { display:flex; align-items:center; gap:8px; margin:15px 6px 6px; font-family:var(--mono); font-size:.6rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); }
.side-sec::after { content:""; flex:1; height:1px; background:var(--border); }

/* nav links */
.side a { display:flex; align-items:center; gap:10px; padding:7.5px 11px; border-radius:10px; font-size:.88rem; font-weight:500;
  color:var(--dim); border:1px solid transparent; transition:color .15s, background .15s; text-decoration:none; }
.side a svg { width:15px; height:15px; flex:0 0 auto; opacity:.75; }
.side a:hover { color:var(--text); background:rgba(255,255,255,.04); text-decoration:none; }
.side a.on { color:#fff; background:linear-gradient(120deg, color-mix(in srgb,var(--a1) 26%,transparent), color-mix(in srgb,var(--a2) 22%,transparent) 55%, color-mix(in srgb,var(--a3) 20%,transparent));
  border-color:color-mix(in srgb,var(--a2) 36%,transparent); box-shadow:0 6px 20px -10px var(--acc-glow); }
.side a.on svg { opacity:1; }
.side a:focus-visible { outline:2px solid var(--a2); outline-offset:2px; }

/* indented sub-nav — shown beneath an active parent that has sub-pages
   (currently only Licensing → Ledger / Embed / Trace). Ported from the design
   handoff (chrome/dash-shell.css .side-subs/.side-sub). */
.side-subs { display:flex; flex-direction:column; gap:1px; margin:2px 0 4px; padding-left:26px; position:relative; }
.side-subs::before { content:""; position:absolute; left:16px; top:4px; bottom:4px; width:1px; background:var(--border); }
.side-sub { display:flex; align-items:center; text-align:left; background:none; border:0; cursor:pointer;
  font-family:var(--sans); font-weight:500; font-size:.78rem; color:var(--faint); padding:5px 9px; border-radius:8px;
  transition:color .12s, background .12s; }
.side-sub:hover { color:var(--text); background:rgba(255,255,255,.04); }
.side-sub.on { color:var(--t3); background:color-mix(in srgb,var(--a3) 8%,transparent); }
.side-sub:focus-visible { outline:2px solid var(--a2); outline-offset:2px; }

/* per-item badge (counts / status pills) */
.side-badge { margin-left:auto; font-family:var(--mono); font-size:.62rem; font-weight:600; color:var(--t3);
  border:1px solid color-mix(in srgb,var(--a3) 32%,transparent); border-radius:999px; padding:1px 7px; }
.side-badge.warn { color:var(--warning); border-color:color-mix(in srgb,var(--warning) 38%,transparent); }

/* mobile mini-bar (burger + active-section title). Hidden on desktop; the
   full site header (.nav.solid) stays the primary topbar on every surface. */
.dash-bar { display:none; }
.dash-burger { display:grid; place-items:center; min-width:44px; min-height:44px; background:var(--surface2); border:1px solid var(--border); border-radius:11px; color:var(--text); cursor:pointer; padding:0; }
.dash-burger svg { width:22px; height:22px; display:block; }
.dash-bar-title { font-weight:700; font-size:1.05rem; }

/* drawer scrim (mobile only) */
.side-scrim { position:fixed; inset:0; background:rgba(4,4,10,.55); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); z-index:190; border:0; }
@media (min-width:1081px) { .side-scrim { display:none !important; } }

/* Below 1080 the sidebar folds into a slide-in drawer behind the burger,
   toggled by body.side-open (set by the host page's burger handler). */
@media (max-width:1080px) {
  .dash-shell { grid-template-columns:1fr; }
  .dash-bar { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
  .side { display:none; }
  body.side-open .side { display:flex; position:fixed; left:0; top:0; bottom:0; width:264px; z-index:200;
    flex-direction:column; padding:18px 14px 24px; overflow-y:auto;
    background:var(--bg2,#0c0c18); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    border-right:1px solid var(--border2); box-shadow:30px 0 80px -30px rgba(0,0,0,.8);
    animation:vu-side-in .22s ease; }
  @keyframes vu-side-in { from { transform:translateX(-30px); opacity:0; } to { transform:none; opacity:1; } }
}