/* khs-shell.css — minimal scaffolding for new pages that use khs-shell.js
 * Provides .app grid, .nav, .topbar, .footer baselines so new pages
 * don't redefine the whole shell. khs-clean.css refines colors on top.
 */
.app{display:grid;grid-template-columns:240px 1fr;min-height:100vh;background:var(--paper,#f7f6f2);color:var(--ink,#15201b);font-family:"Inter",system-ui,sans-serif;font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper,#f7f6f2);color:var(--ink,#15201b);font-family:"Inter",system-ui,sans-serif;font-size:14px;line-height:1.45}

/* === Wireframe sidebar — overrides any per-page --nav-* tokens === */
aside.nav{
  background:var(--paper,#f7f6f2)!important;color:var(--ink,#15201b)!important;
  padding:18px 14px!important;border-right:1px solid var(--rule,#e2ddd0)!important;
  position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:18px
}
aside.nav .brand{display:flex;align-items:center;gap:10px}
aside.nav .brand img{width:36px!important;height:36px!important;border-radius:50%!important;border:1px solid var(--rule,#e2ddd0)!important;background:transparent!important}
aside.nav .brand .name{font-family:"Inter",sans-serif;font-weight:600;font-size:16px;line-height:1.05;letter-spacing:.04em;color:var(--ink,#15201b)!important}
aside.nav .brand .sub{font-size:11px;color:var(--ink-3,#6c736e)!important;letter-spacing:.05em;text-transform:uppercase;margin-top:2px}
aside.nav .nav-search{border:1px solid var(--rule-2,#c9c4b5)!important;background:transparent!important;color:var(--ink-3,#6c736e)!important;padding:6px 10px;border-radius:6px;display:flex;gap:8px;font-size:13px}
aside.nav .group{display:flex;flex-direction:column;gap:2px}
aside.nav .group-label{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3,#6c736e)!important;padding:8px 10px 4px;font-weight:400}
aside.nav a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:6px;color:var(--ink-2,#3a423e)!important;text-decoration:none;font-size:13.5px;background:transparent!important}
aside.nav a:hover{background:var(--surface-2,#f1efe9)!important;color:var(--ink,#15201b)!important}
aside.nav a.active{background:transparent!important;color:var(--ink,#15201b)!important;font-weight:600;box-shadow:inset 2px 0 0 var(--ink,#15201b)!important;border-radius:0!important}
aside.nav a .glyph{width:18px;display:inline-block;text-align:center;color:var(--ink-3,#6c736e)!important}
aside.nav .me{margin-top:auto;display:flex;align-items:center;gap:10px;padding:10px;border-top:1px solid var(--rule,#e2ddd0)!important}
aside.nav .me .av{width:32px!important;height:32px!important;border-radius:50%!important;background:transparent!important;border:1px solid var(--rule-2,#c9c4b5)!important;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--ink-2,#3a423e)!important}
aside.nav .me .me-name{font-size:13px;color:var(--ink,#15201b)!important}
aside.nav .me .me-role{font-size:11px;color:var(--ink-3,#6c736e)!important}

main.scroll{min-height:100vh;display:flex;flex-direction:column}

.topbar{display:flex;align-items:center;gap:14px;padding:14px 28px;border-bottom:1px solid var(--rule,#e2ddd0);background:var(--paper,#f7f6f2);position:sticky;top:0;z-index:30}
.topbar .crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-3,#6c736e)}
.topbar .crumb a{color:var(--ink-3);text-decoration:none}
.topbar .crumb a:hover{color:var(--ink)}
.topbar .crumb .sep{color:var(--ink-3)}
.topbar .search{display:flex;align-items:center;gap:8px;width:280px;border:1px solid var(--rule);border-radius:6px;padding:6px 10px;background:#fff}
.topbar .search input{border:0;outline:0;background:transparent;font:inherit;width:100%;color:var(--ink)}

.footer{padding:14px 28px;color:var(--ink-3);font-size:12px;border-top:1px solid var(--rule);background:var(--surface-2);display:flex;gap:14px;flex-wrap:wrap}
.footer a{color:var(--ink-3);margin-left:auto;text-decoration:none;border-bottom:1px dotted var(--rule-2)}

.serif{font-family:"Inter",sans-serif;font-weight:600;letter-spacing:-0.01em}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace}
.cap{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}

@media(max-width:900px){
  .app{grid-template-columns:1fr}
  aside.nav{position:relative;height:auto}
}