/* The frame around every page: top bar, sidebar, responsive layout. */
.topbar { position: sticky; top: 0; z-index: 30; height: var(--top-h); display: flex; align-items: center; gap: 12px; padding: 0 14px;
  background: var(--bg); border-bottom: 1px solid transparent; transition: border-color var(--motion-fast), background-color var(--motion-base); user-select: none; -webkit-user-select: none; }
body.scrolled .topbar { border-bottom-color: var(--border); }
.native-window .topbar { padding-left: var(--window-controls-inset); }          /* room for the window's traffic lights */
.native-window.mac-fullscreen .topbar { padding-left: 14px; }
.tb-side { flex: 1 1 0; display: flex; align-items: center; gap: 2px; }
.tb-side.right { justify-content: flex-end; }
.topbar .icon-btn { width: 32px; height: 32px; border-radius: var(--radius-sm); }
.topbar .icon-btn svg { width: 18px; height: 18px; }
.topbar .icon-btn:disabled { opacity: .35; cursor: default; background: none; }
.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border: 0; background: none; border-radius: 50%; cursor: pointer; color: var(--muted); }
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: var(--font-weight-bold); font-size: var(--font-size-base); letter-spacing: .04em; white-space: nowrap; padding: 2px 10px 12px; }
.brand img { width: 28px; height: 28px; }
.search { flex: 0 1 560px; display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill); transition: border-color var(--motion-fast), box-shadow var(--motion-fast); }
.search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.search svg { color: var(--faint); width: 18px; height: 18px; }
.search input { flex: 1; border: 0; outline: 0; background: none; color: var(--text); font: inherit; min-width: 0; width: 0; }
.search { min-width: 0; }
.search input::-webkit-search-cancel-button { filter: grayscale(1); }

/* ---------- layout ---------- */
.layout { display: flex; min-height: calc(100dvh - var(--top-with-inset)); }
.sidebar { width: var(--sidebar-w); flex: none; position: sticky; top: var(--top-with-inset); height: calc(100dvh - var(--top-with-inset));
  overflow-y: auto; padding: 8px 10px 40px; scrollbar-width: thin; }
@media (min-width: 861px) and (min-height: 501px) { body.nav-collapsed .sidebar { display: none; } }
main { flex: 1; min-width: 0; padding: 24px 32px 80px; outline: none; }
.nav-item { display: flex; align-items: center; gap: 14px; padding: 9px 12px; border-radius: var(--radius-md); color: var(--text); cursor: pointer; }
.nav-item svg { color: var(--muted); }
.nav-item:hover { background: var(--surface-2); }
.nav-item.active { background: var(--accent-soft); color: var(--accent-text); font-weight: var(--font-weight-semibold); }
.nav-item.active svg { color: var(--accent-text); }
.nav-item .count { margin-left: auto; font-size: var(--font-size-xs); color: var(--faint); font-variant-numeric: tabular-nums; }
.nav-sep { height: 1px; background: var(--border); margin: 12px 10px; }
.nav-title { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--faint); letter-spacing: .08em; padding: 6px 12px; }
.tree-node > .nav-item { padding-left: calc(12px + var(--depth, 0) * 14px); font-size: var(--font-size-md); }
.tree-node > .nav-item .caret { width: 14px; height: 14px; color: var(--faint); transition: transform var(--motion-fast); margin-left: -4px; }
.tree-node.open > .nav-item .caret { transform: rotate(90deg); }
.tree-node > .children { display: none; }
.tree-node.open > .children { display: block; }
.caret-spacer { width: 14px; margin-left: -4px; flex: none; }