/* ui/shell.css — the unified app shell (labeled sidebar + top bar) injected by ui/shell.js.
   Quiet-Precision redesign: light sidebar with icon+label nav (recognition over recall),
   theme-aware (follows --panel/--line, so the editor's dark scope restyles it for free).
   Two modes: FULL (dashboards — sidebar + top bar wrap the page) and RAIL-ONLY (editor —
   a slim 64px icon rail; the page keeps its own toolbar and full-height grid).
   Also ships the ⌘K command palette (predictive navigation). Depends on ui/theme.css. */

/* ── full-shell grid ── */
.ui-app{display:grid;grid-template-columns:var(--rail-w) 1fr;grid-template-rows:var(--topbar-h) 1fr;
  grid-template-areas:"rail topbar" "rail main";height:100vh;background:var(--bg)}
.ui-main{grid-area:main;overflow:auto;min-width:0;min-height:0}

/* ── sidebar (shared by both modes) ── */
.ui-rail{grid-area:rail;background:var(--navy-rail);display:flex;flex-direction:column;
  gap:2px;padding:14px 10px 12px;border-right:1px solid var(--line);z-index:40;min-height:0}
.ui-rail__brand{display:flex;align-items:center;gap:10px;padding:2px 8px 14px;text-decoration:none;flex:0 0 auto}
.ui-rail__brand .bx{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  background:var(--cta,#18181B);flex:0 0 auto}
.ui-rail__brand .bx svg{width:16px;height:16px}
.ui-rail__brand .bn{font:600 13.5px/1.2 'Geist',system-ui,sans-serif;color:var(--ink);letter-spacing:-.01em}
.ui-rail__nav{display:flex;flex-direction:column;gap:2px;flex:1;width:100%;min-height:0}
.ui-nav{position:relative;display:flex;align-items:center;gap:10px;width:100%;height:36px;border-radius:8px;padding:0 10px;
  color:var(--ink-2);text-decoration:none;transition:.12s;border:0;background:transparent;cursor:pointer;
  font:500 13px/1.2 'Geist',system-ui,sans-serif}
.ui-nav:hover{color:var(--ink);background:var(--panel-2)}
.ui-nav.is-active{color:var(--accent);background:var(--accent-soft);font-weight:600}
.ui-nav svg{width:17px;height:17px;flex:0 0 auto}
.ui-nav__tip{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui-nav:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ── top bar ── */
.ui-topbar{grid-area:topbar;display:flex;align-items:center;gap:12px;padding:0 18px;background:var(--panel);
  border-bottom:1px solid var(--line);z-index:30;min-width:0}
.ui-topbar__title{font:600 14px/1 'Geist',system-ui,sans-serif;color:var(--ink);letter-spacing:-.01em;white-space:nowrap}
.ui-topbar__search{flex:1;max-width:420px;display:flex;align-items:center;gap:8px;background:var(--panel-2);
  border:1px solid var(--line);border-radius:8px;padding:7px 11px;color:var(--ink-3);min-width:0;cursor:text}
.ui-topbar__search:focus-within{border-color:var(--accent-2);box-shadow:0 0 0 3px var(--accent-soft)}
.ui-topbar__search svg{width:14px;height:14px;flex:0 0 auto}
.ui-topbar__search input{flex:1;min-width:0;background:transparent;border:0;color:var(--ink);font:inherit;font-size:13px;outline:none}
.ui-topbar__search input::placeholder{color:var(--ink-3)}
.ui-topbar__search kbd{font:600 10px/1 'Geist Mono',monospace;color:var(--ink-3);background:var(--panel);
  border:1px solid var(--line);border-radius:5px;padding:3px 5px;white-space:nowrap}
.ui-topbar__sp{flex:1}
.ui-topbar__status{font-size:12px;color:var(--ink-2);display:flex;align-items:center;gap:8px;white-space:nowrap}
.ui-topbar__status b{color:var(--ink)}

/* account: a quiet button that discloses the auth controls on demand */
.ui-topbar__acctwrap{position:relative}
.ui-topbar__acctbtn{display:flex;align-items:center;gap:7px;height:34px;padding:0 11px;border-radius:8px;border:1px solid var(--line);
  background:var(--panel);color:var(--ink-2);font:550 12.5px/1 'Geist',system-ui,sans-serif;cursor:pointer;transition:.12s}
.ui-topbar__acctbtn:hover{color:var(--ink);border-color:var(--ink-3)}
.ui-topbar__acctbtn svg{width:15px;height:15px}
.ui-acctpop{position:absolute;top:calc(100% + 8px);right:0;min-width:300px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow-pop);padding:14px;display:none;z-index:80}
.ui-acctpop.show{display:block}
.ui-acctpop [data-ui-account]{display:flex;flex-direction:column;gap:10px;align-items:stretch}
.ui-acctpop form{display:flex;flex-direction:column!important;gap:8px!important}
.ui-acctpop input{width:100%!important;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;
  color:var(--ink);padding:8px 11px;font:inherit;font-size:13px}
.ui-acctpop input:focus{outline:0;border-color:var(--accent-2);box-shadow:0 0 0 3px var(--accent-soft)}
.ui-acctpop .keybox{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12px;color:var(--ink-3)}
.ui-acctpop summary{cursor:pointer;color:var(--ink-2)}

.ui-topbar__menu{display:none;width:38px;height:38px;border-radius:10px;align-items:center;justify-content:center;
  border:0;background:transparent;color:var(--ink);cursor:pointer}
.ui-topbar__menu svg{width:20px;height:20px}

/* ── rail-only (editor): slim icon rail; labels collapse, page shifts right ── */
body[data-ui-shell="rail-only"]{padding-left:var(--rail-w-slim)}
body[data-ui-shell="rail-only"] .ui-rail{position:fixed;left:0;top:0;bottom:0;width:var(--rail-w-slim);height:100vh;
  padding:12px 8px;align-items:center}
body[data-ui-shell="rail-only"] .ui-rail__brand{padding:2px 0 12px}
body[data-ui-shell="rail-only"] .ui-rail__brand .bn{display:none}
body[data-ui-shell="rail-only"] .ui-nav{width:44px;height:40px;justify-content:center;padding:0}
body[data-ui-shell="rail-only"] .ui-nav__tip{position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%);
  background:var(--navy);color:#fff;font:600 12px/1 'Geist',system-ui,sans-serif;padding:6px 9px;border-radius:7px;
  white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s;z-index:60;box-shadow:var(--shadow-pop);overflow:visible}
body[data-ui-shell="rail-only"] .ui-nav:hover .ui-nav__tip{opacity:1}

/* ── ⌘K command palette (predictive navigation) ── */
.ui-cmdk{position:fixed;inset:0;z-index:500;display:none;background:rgba(10,10,11,.4);backdrop-filter:blur(3px);
  align-items:flex-start;justify-content:center;padding:12vh 16px 16px}
.ui-cmdk.show{display:flex}
.ui-cmdk__box{width:min(580px,94vw);background:var(--panel);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow-pop);overflow:hidden;animation:ui-cmdk-pop .16s cubic-bezier(.2,0,0,1)}
@keyframes ui-cmdk-pop{from{opacity:0;transform:translateY(-8px) scale(.985)}to{opacity:1;transform:none}}
.ui-cmdk__in{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.ui-cmdk__in svg{width:16px;height:16px;color:var(--ink-3);flex:0 0 auto}
.ui-cmdk__in input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--ink);
  font:500 15px/1.4 'Geist',system-ui,sans-serif}
.ui-cmdk__in input::placeholder{color:var(--ink-3)}
.ui-cmdk__list{max-height:min(400px,52vh);overflow-y:auto;padding:7px}
.ui-cmdk__grp{font:600 10.5px/1 'Geist',system-ui,sans-serif;text-transform:uppercase;letter-spacing:.07em;
  color:var(--ink-3);padding:10px 10px 6px}
.ui-cmdk__item{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:transparent;border:0;
  border-radius:8px;padding:9px 10px;cursor:pointer;color:var(--ink);font:500 13.5px/1.35 'Geist',system-ui,sans-serif}
.ui-cmdk__item svg{width:16px;height:16px;color:var(--ink-3);flex:0 0 auto}
.ui-cmdk__item .sub{margin-left:auto;font-size:11.5px;color:var(--ink-3);white-space:nowrap}
.ui-cmdk__item.sel{background:var(--accent-soft);color:var(--accent)}
.ui-cmdk__item.sel svg{color:var(--accent)}
.ui-cmdk__empty{padding:26px 14px;text-align:center;color:var(--ink-3);font-size:13px}
.ui-cmdk__foot{display:flex;gap:14px;align-items:center;padding:9px 16px;border-top:1px solid var(--line);
  font-size:11px;color:var(--ink-3)}
.ui-cmdk__foot kbd{font:600 10px/1 'Geist Mono',monospace;background:var(--panel-2);border:1px solid var(--line);
  border-radius:4px;padding:2px 5px;margin-right:4px}

/* ── responsive: sidebar collapses to an off-canvas drawer under 900px ── */
@media(max-width:900px){
  .ui-app{grid-template-columns:1fr;grid-template-rows:var(--topbar-h) 1fr;grid-template-areas:"topbar" "main"}
  .ui-app .ui-rail{position:fixed;left:0;top:0;bottom:0;width:var(--rail-w);
    transform:translateX(-100%);transition:transform .2s cubic-bezier(.2,0,0,1);box-shadow:0 0 70px rgba(0,0,0,.25)}
  .ui-app.is-drawer-open .ui-rail{transform:none}
  .ui-topbar__menu{display:flex}
  .ui-topbar__search{max-width:none}
  body[data-ui-shell="rail-only"]{padding-left:0}
  body[data-ui-shell="rail-only"] .ui-rail{transform:translateX(-100%)}
}
@media(max-width:560px){ .ui-topbar__search{display:none} .ui-topbar__status{display:none} }