/* wf-shell.css — canonical signed-in app shell (dark sidebar + top bar), extracted verbatim
   from index.html so every page carries the same chrome. Loads AFTER app.css on sub-pages;
   index.html keeps its own inline copy (canon). Tokens: index/app.css set only — no new hues. */

/* tokens index defines beyond app.css */
:root{
  --ink-2:#454747;
  --iron:#3E4348;
  --red-tint:#F4E3E3;
  --shadow-sm: 0 1px 0 rgba(33,35,35,.04), 0 1px 2px rgba(33,35,35,.05);
  --shadow-md: 0 1px 0 rgba(33,35,35,.04), 0 8px 24px -12px rgba(33,35,35,.18);
}
html,body{margin:0;padding:0;height:100%}
body{overflow:hidden}

/* ---------- Layout (index.html canon) ---------- */
.app{display:grid;grid-template-columns:240px 1fr;height:100vh;
  /* side-column paint: no gap on scroll */
  background:linear-gradient(90deg,var(--nile,#212323) 0,var(--nile,#212323) 240px,var(--bg,#F7F1E8) 240px)}

/* ---------- Sidebar (inverted, dark Nile blue) ---------- */
.app > .side{
  background:var(--nile);
  color:#E5EEF1;
  border-right:1px solid #0A2A35;
  padding:16px 12px 14px;
  display:flex;flex-direction:column;gap:10px;
  height:100vh;overflow:hidden;
}
.side button{font:inherit;color:inherit;cursor:pointer;border:0;background:transparent;padding:0}
.side a{text-decoration:none}
.brand{display:flex;align-items:center;gap:10px;padding:2px 4px 6px}
.brand img{height:55px;width:auto;display:block;max-width:100%}

.nav-section{display:flex;flex-direction:column;gap:1px;margin-top:2px}
.nav-label{
  font-size:9.5px;letter-spacing:0.16em;text-transform:uppercase;
  color:rgba(255,255,255,.45);padding:8px 10px 4px;font-weight:600;
}
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:7px 10px;border-radius:8px;color:rgba(255,255,255,.78);
  font-size:13px;white-space:nowrap;
}
.nav-item:hover{background:rgba(255,255,255,.07);color:#fff}
.nav-item.active{background:rgba(255,255,255,.12);color:#fff;font-weight:500;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.nav-item svg{width:15px;height:15px;flex-shrink:0;opacity:.85}
.nav-item .dot{width:6px;height:6px;border-radius:50%;background:var(--copper);margin-left:auto}
.nav-item .count{margin-left:auto;font-size:11px;color:rgba(255,255,255,.5);font-variant-numeric:tabular-nums}
.side .nav-item .pill{margin-left:auto;font-size:10px;padding:1px 6px;border-radius:999px;background:var(--copper);color:#fff;font-weight:600;display:inline-block;letter-spacing:0;text-transform:none}

.projects-list{display:flex;flex-direction:column;gap:1px}
.project{
  display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:8px;
  color:rgba(255,255,255,.78);font-size:13px;
}
.project:hover{background:rgba(255,255,255,.07);color:#fff}
.project .swatch{width:8px;height:8px;border-radius:2px;flex-shrink:0}
.project .meta{margin-left:auto;font-size:11px;color:rgba(255,255,255,.45)}
.project .p-ic{width:14px;height:14px;flex-shrink:0;color:rgba(255,255,255,.55)}
.project:hover .p-ic{color:rgba(255,255,255,.8)}

.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:10px}

.acct-notif{
  background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.08);
  border-radius:10px;padding:9px 11px;
}
.acct-notif .lbl{
  font-size:9.5px;letter-spacing:0.16em;text-transform:uppercase;
  color:rgba(255,255,255,.45);font-weight:600;margin-bottom:4px;
}
.acct-notif .row{display:flex;align-items:flex-start;gap:8px}
.acct-notif .ic{
  width:16px;height:16px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  background:rgba(220,150,80,.18);color:#E8B47A;margin-top:1px;
}
.acct-notif .ic svg{width:10px;height:10px}
.acct-notif .name{font-size:12.5px;color:#fff;font-weight:500;line-height:1.25;display:block}
.acct-notif .meta{font-size:10.5px;color:rgba(255,255,255,.5);margin-top:1px;display:block}

.refer{
  background:rgba(255,255,255,.06);border:1px dashed rgba(255,255,255,.2);
  border-radius:10px;padding:10px 12px;display:flex;align-items:center;gap:10px;
}
.refer .gift{
  width:28px;height:28px;border-radius:8px;background:rgba(160,106,57,.22);color:#E8B47A;
  display:grid;place-items:center;flex-shrink:0;
}
.refer .gift svg{width:14px;height:14px}
.refer .t{font-size:12.5px;font-weight:500;color:#fff;line-height:1.25}
.refer .arr{margin-left:auto;color:rgba(255,255,255,.5)}
.refer:hover{background:rgba(255,255,255,.10)}
.refer:hover .arr{color:#fff}

/* ---------- Main + top bar (overrides app.css's legacy dark .topbar) ---------- */
.app > .main{display:flex;flex-direction:column;min-width:0;height:100vh;overflow:hidden}
.main > .topbar{
  height:50px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:flex-start;gap:14px;padding:0 24px;
  background:var(--bg);flex-shrink:0;
  position:sticky;top:0;z-index:30;
}
.main > .topbar .crumb{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;white-space:nowrap;flex-shrink:0}
.main > .topbar .crumb b{color:var(--nile);font-weight:600;font-family:'Source Serif 4',serif;font-size:15px;letter-spacing:-0.01em;white-space:nowrap}
.main > .topbar .crumb .sep{color:var(--muted-2)}
.main > .topbar .crumb .greet{color:var(--ink-2);font-weight:500;white-space:nowrap}
.main > .topbar .top-actions{margin-left:auto;display:flex;align-items:center;gap:6px}
.main > .topbar .top-divider{width:1px;height:18px;background:var(--line);margin:0 4px}
.main > .topbar .wf-logo-btn{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid var(--line);transition:transform .12s,box-shadow .15s,border-color .15s;flex-shrink:0;padding:0;cursor:pointer}
.main > .topbar .wf-logo-btn img{width:26px;height:26px;object-fit:contain;display:block}
.main > .topbar .wf-logo-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.main > .topbar .wf-logo-btn.ai{border-color:rgba(160,106,57,.45)}

/* progress strip stays pinned under the top bar */
.main > .prog{flex-shrink:0}

/* content region: the page scrolls here, sidebar + top bar stay put */
.main > .page{flex:1;min-width:0;min-height:0;overflow-y:auto}

/* demo ribbon clears the fixed sidebar */
.stateribbon{left:254px}

/* ---------- small screens: mirror index.html (page scroll, no collapse) ---------- */
@media (max-width: 1180px){
  body{overflow:auto}
  .app{height:auto;overflow:visible}
  .app > .main{height:auto;overflow:visible}
  .main > .page{overflow:visible}
}

/* ---------- print: the document only — never the shell ---------- */
@media print{
  body{overflow:visible !important}
  .app{display:block !important;height:auto !important;background:none !important}
  .app > .side,.main > .topbar,.main > .prog,.stateribbon{display:none !important}
  .app > .main{display:block !important;height:auto !important;overflow:visible !important}
  .main > .page{overflow:visible !important;height:auto !important}
}