/* web/css/shell.css: the frame around every screen. The version bar on top;
   from 860px up, the ink rail on the left and the page beside it, each
   scrolling on its own; under 860px, a top bar, the page, and tabs at the
   bottom, scrolling as one document. */

/* ---- the page: version bar, then the app ---------------------------------- */
body{display:flex;flex-direction:column;height:100dvh}
#bar{flex:0 0 auto}
#stage{flex:1;min-height:0;display:flex}
#app{position:relative;flex:1;min-width:0;min-height:0;overflow:auto}
#app:has(.app){overflow:hidden}
#app > .view{min-height:100%}
#app:has(.app) > .view{height:100%}

/* ---- the version toggle: North Star · the working version (a coming one greys out) */
.versions{display:flex;align-items:center;gap:12px;padding:6px 14px;background:var(--paper);border-bottom:1px solid var(--line);font-size:12px}
.versions .brand{margin-right:auto;font:800 12.5px/1 var(--display);letter-spacing:-.01em}
.versions nav{display:flex;gap:2px;padding:2px;background:var(--wash);border-radius:var(--r-pill);overflow-x:auto;scrollbar-width:none}
.versions a{padding:4px 11px;border-radius:var(--r-pill);font-weight:700;color:var(--muted);white-space:nowrap}
.versions a[href]:hover{color:var(--ink)}
.versions a[aria-current="page"]{background:var(--ink);color:var(--on-dark)}
.versions a.soon{color:var(--faint);opacity:.6;cursor:default}

/* ---- the app frame ---------------------------------------------------------- */
.app{display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr);height:100%}
.main{position:relative;min-width:0;min-height:0;overflow-y:auto;padding:24px var(--gutter) 48px}
.page{max-width:var(--page-max);margin:0 auto;display:flex;flex-direction:column;gap:14px}
.top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.top .sub{margin-top:4px;font-size:13px;color:var(--muted)}
.top .acts{display:flex;align-items:center;gap:9px;flex-wrap:wrap}

/* ---- the rail ---------------------------------------------------------------- */
.rail{display:flex;flex-direction:column;min-height:0;padding:12px 12px 12px;background:var(--ink);color:var(--on-dark);overflow-y:auto}
.rail nav{display:grid;gap:1px}
.rail nav a{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:var(--r-xs);font-size:12.5px;color:var(--on-dark-muted)}
.rail nav a:hover{color:var(--on-dark);background:rgba(242,237,224,.05)}
.rail nav a[aria-current="page"]{background:var(--on-dark-wash);color:var(--on-dark);font-weight:700}
.rail nav a[aria-current="page"] .ico{color:var(--accent)}
.rail nav a .n{margin-left:auto;font-size:10.5px}
.rail-sub{display:grid;gap:1px;margin:1px 0 4px 16px;padding-left:8px;border-left:1px solid rgba(242,237,224,.12)}
.rail .rail-sub a{gap:8px;padding:4px 8px;font-size:12px}
/* Your team's departments in the rail (AGENTS-v1): each folds open to its people and agents, structure only */
.rail-dep > summary{display:flex;align-items:center;gap:6px;padding:4px 8px;border-radius:var(--r-xs);font-size:12px;color:var(--on-dark-muted);list-style:none;cursor:pointer}
.rail-dep > summary::-webkit-details-marker{display:none}
.rail-dep > summary .ico{flex:none;opacity:.7;transition:transform .15s}
.rail-dep[open] > summary .ico{transform:rotate(90deg)}
.rail-dep > summary:hover,.rail-dep[open] > summary{color:var(--on-dark)}
.rail-dep > summary:hover{background:rgba(242,237,224,.05)}
.rail-dep.sub{margin-left:12px}
.rail-in{display:grid;gap:1px;margin:1px 0 6px 13px;padding-left:7px;border-left:1px solid rgba(242,237,224,.12)}
.rail .rail-in a{align-items:flex-start;gap:7px;padding:4px 6px;font-size:12px;color:var(--on-dark)}
.rail-in .t{flex:1;min-width:0;display:grid;line-height:1.25}
.rail-in .t small{overflow:hidden;font-size:10.5px;color:var(--on-dark-muted);white-space:nowrap;text-overflow:ellipsis}
.rail-in a.mgr .t{font-weight:700} .rail-in a.mgr .t small{color:var(--on-dark);font-weight:700}
.rail-in .pav{flex:none;margin-top:1px;font-size:8.5px}
.rail-ag{flex:none;display:grid;place-items:center;width:18px;height:18px;margin-top:1px;border-radius:5px;background:rgba(242,237,224,.1)}
.rail-in .st{flex:none;margin-top:1px;font-size:10px;color:var(--on-dark-muted)}
.rail-in a.avail{color:var(--on-dark-muted)} .rail-in a.avail .rail-ag{background:transparent;border:1px dashed rgba(242,237,224,.25)}
.rail-none{padding:4px 6px;font-size:11px;color:var(--on-dark-muted)}
.rail .grp{padding:12px 8px 3px;font-size:10.5px;font-weight:700;color:var(--on-dark-muted)}
.rail .pin{margin-top:auto;display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--r-sm);background:rgba(242,237,224,.1);color:var(--on-dark);font-size:12.5px;font-weight:700}
.rail .pin .ico{color:var(--accent)}
.rail .pin .n{margin-left:auto}
.rail .me{display:flex;align-items:center;gap:9px;margin-top:8px;padding:10px 4px 0 6px;border-top:1px solid rgba(242,237,224,.1);font-size:12.5px}
.rail .pin ~ .me{margin-top:8px}
.rail nav:last-of-type + .me{margin-top:auto}
.rail .me .who{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail .me .role{font-family:var(--mono);font-size:10.5px;color:var(--on-dark-muted)}
.rail .pav{background:var(--paper);border-color:var(--paper);color:var(--ink)}

/* ---- the workspace switcher: <details class="ws"> ------------------------------ */
.rail:has(.ws[open]){overflow:visible;z-index:30}/* the open menu is wider than the rail */
.ws{position:relative}
.ws > summary{list-style:none;display:flex;align-items:center;gap:9px;padding:6px 6px 10px;margin-bottom:6px;border-radius:var(--r-md);cursor:pointer}
.ws > summary::-webkit-details-marker{display:none}
.ws > summary:hover{background:rgba(242,237,224,.05)}
.ws .es{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:26px;height:26px;border-radius:var(--r-xs);background:var(--paper);color:var(--ink);font:800 11px/1 var(--display)}
.ws .name{flex:1;min-width:0}
.ws .name b{display:block;font:800 13px/1.2 var(--display)}
.ws .name small{display:block;font-size:11px;color:var(--on-dark-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ws .chev{color:var(--on-dark-muted)}
.wsmenu{position:absolute;left:0;top:calc(100% - 4px);z-index:20;width:max(268px,100%);display:grid;gap:2px;padding:6px;
  background:var(--paper);color:var(--ink);border:1px solid var(--ink);border-radius:var(--r-lg);box-shadow:var(--float)}
.wsi{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;background:none;border:0;border-radius:var(--r-md);text-align:left;font-size:13px}
.wsi:hover{background:var(--wash)}
.wsi[aria-current="true"]{background:var(--wash)}
.wsi b{display:block;font-size:13px}
.wsi small{display:block;font-size:11.5px;color:var(--muted)}
.wsi .grow + .ico{color:var(--ink)}
.wsmenu .sep{height:1px;margin:4px 6px;background:var(--line)}
.wsav{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:28px;height:28px;border-radius:var(--r-sm);background:var(--ink);color:var(--on-dark);font:800 12px/1 var(--display)}
.wsav.personal{border-radius:50%;background:var(--paper);color:var(--ink);border:1.5px solid var(--ink)}
.wsav.waiting{position:relative}
.wsi .n{margin-left:auto;font-size:11px;font-weight:700;color:var(--accent-ink);background:var(--accent-wash);border-radius:var(--r-pill);padding:1px 7px}

/* ---- your Chief beside every screen (web/dock.js): docked right, folds to a strip --------- */
#dock{position:relative;flex:0 0 360px;display:flex;flex-direction:column;min-height:0;background:var(--paper);border-left:1px solid var(--line)}
#dock[hidden]{display:none}
#dock.closed{flex-basis:52px;align-items:center}
#dock.closed > :not(.dock-open),#dock:not(.closed) > .dock-open{display:none}
.dock-open{display:flex;align-items:center;justify-content:center;width:36px;height:36px;margin-top:12px;border:0;border-radius:var(--r-md);background:var(--ink);color:var(--accent);cursor:pointer}
.dock-hd{display:flex;align-items:center;gap:6px;padding:12px 10px 10px 14px;border-bottom:1px solid var(--line)}
.dock-hd b{flex:1;margin-left:4px;font:800 14px/1.2 var(--display)}
.dock-body{flex:1;min-height:0;overflow-y:auto;padding:14px 14px 6px}
#dock .composer{position:static;margin:6px 10px 10px;box-shadow:none}
#dock .thread{gap:14px}
#dock .say{gap:9px}
#dock .say .bubble{font-size:13px}
#dock .say.me .bubble{padding:7px 11px}
#dock .turn .tasks,#dock .takes{margin-left:0}
#dock .row{padding:8px 10px;gap:8px}
#dock .row .t{font-size:12.5px}
#dock .empty{padding:24px 6px}
#dock .hide-sm{display:none}

/* ---- phone: top bar, one column, tabs ------------------------------------------- */
.mhead{display:none}
.tabs{display:none}
@media (max-width:859.98px){
  body{display:block;height:auto}
  #app,#app:has(.app){overflow:visible}
  #app:has(.app) > .view{height:auto}
  .versions{padding:6px 10px}
  .versions .brand{display:none}
  .versions nav{margin:0 auto}
  .app{display:block;height:auto}
  .rail{display:none}
  .mhead{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:10px;padding:8px var(--gutter);background:var(--ground);border-bottom:1px solid var(--line-2)}
  .mhead .ws{flex:1;min-width:0}
  .mhead .ws > summary{margin:0;padding:6px 6px 6px 0}
  .mhead .ws .es{background:var(--ink);color:var(--on-dark)}
  .mhead .ws .name small,.mhead .ws .chev{color:var(--muted)}
  .mhead .ws > summary:hover{background:transparent}
  .mhead .bell{position:relative;display:flex;align-items:center;justify-content:center;width:38px;height:38px;color:var(--ink)}
  .mhead .bell .n{position:absolute;top:3px;right:1px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--ink);color:var(--on-dark);font-size:10px;font-weight:700;line-height:17px;text-align:center}
  .more{position:relative}
  .more > summary{position:relative;list-style:none;display:flex;align-items:center;justify-content:center;width:38px;height:38px;margin-right:-8px;border-radius:var(--r-pill);color:var(--ink);cursor:pointer}
  .more > summary::-webkit-details-marker{display:none}
  .more > summary.on::after{content:"";position:absolute;top:7px;right:6px;width:6px;height:6px;border-radius:50%;background:var(--ink)}
  .more[open] > summary{background:var(--wash)}
  .moremenu{position:absolute;right:-8px;top:calc(100% + 6px);z-index:20;width:min(260px,calc(100vw - 2 * var(--gutter)));display:grid;gap:2px;padding:6px;
    background:var(--paper);border:1px solid var(--ink);border-radius:var(--r-lg);box-shadow:var(--float)}
  .moremenu a{display:flex;align-items:center;gap:11px;min-height:44px;padding:0 12px;border-radius:var(--r-md);font-size:14px;font-weight:600;color:var(--ink)}
  .moremenu a:hover{background:var(--wash)}
  .moremenu a[aria-current="page"]{background:var(--wash);font-weight:800}
  .moremenu a[aria-current="page"] .ico{color:var(--accent-ink)}
  .moremenu .rail-team{margin:0 0 6px 22px;padding-left:8px;border-left:1px solid var(--line)}
  .moremenu .rail-dep > summary{min-height:36px;font-size:13.5px;font-weight:600;color:var(--ink)}
  .moremenu .rail-in{border-left-color:var(--line)}
  .moremenu .rail-in a{min-height:0;padding:6px 8px;font-size:13px;font-weight:600;align-items:flex-start}
  .moremenu .rail-in .t small{color:var(--muted);font-weight:500} .moremenu .rail-in a.mgr .t small{color:var(--ink);font-weight:700}
  .moremenu .rail-ag{background:var(--wash)} .moremenu .rail-in a.avail{color:var(--muted)}
  .moremenu .rail-in .st,.moremenu .rail-none{color:var(--muted)}
  .mhead .pin{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:var(--r-pill);background:var(--accent-wash);color:var(--accent-ink);font-size:12.5px;font-weight:700}
  .main{overflow:visible;padding:14px var(--gutter) 32px}
  .app.has-tabs .main{padding-bottom:calc(var(--tabs-h) + 32px + env(safe-area-inset-bottom))}
  .app.has-tabs{--tabs-safe:calc(var(--tabs-h) + env(safe-area-inset-bottom))}
  .tabs{position:fixed;left:0;right:0;bottom:0;z-index:10;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
    padding:6px 6px calc(8px + env(safe-area-inset-bottom));background:var(--paper);border-top:1px solid var(--line)}
  .tabs a{display:grid;justify-items:center;gap:3px;padding:6px 0 2px;font-size:10.5px;font-weight:700;color:var(--faint)}
  .tabs a[aria-current="page"]{color:var(--ink)}
  .tabs a[aria-current="page"] .ico{color:var(--accent-ink)}
  /* your Chief: a round button above the tabs, opening a bottom sheet */
  #stage{display:block}
  #dock{position:fixed;z-index:20;left:0;right:0;bottom:0;height:min(86dvh,680px);border:1px solid var(--ink);border-bottom:0;
    border-radius:var(--r-xl) var(--r-xl) 0 0;box-shadow:0 0 0 100vmax var(--backdrop)}
  #dock.closed{left:auto;right:16px;bottom:calc(var(--tabs-h) + 18px + env(safe-area-inset-bottom));height:auto;border:0;background:none;box-shadow:none}
  #dock.closed .dock-open{width:52px;height:52px;margin:0;border-radius:50%;box-shadow:var(--float)}
  #dock .composer{margin-bottom:calc(10px + env(safe-area-inset-bottom))}
  #stage:has(#dock:not([hidden])) .app.has-tabs .main{padding-bottom:calc(var(--tabs-h) + 96px + env(safe-area-inset-bottom))}
  h1{font-size:24px}
}

/* ---- screens without the frame: sign-in, onboarding ---------------------------- */
.solo{min-height:100%;display:grid;place-items:center;padding:32px 16px}
.solo > .card{width:100%;max-width:440px;padding:28px;gap:14px}
.error-page{max-width:560px;margin:0 auto;padding:48px 16px;display:grid;gap:12px}
/* Needs you at zero: there, quiet, no count (the CW's copy) */
.rail .pin.zero{background:transparent;border-color:transparent;color:var(--on-dark-muted)}
.rail .pin.zero .ico{color:inherit}