/* ── sidebar ──
 * The sidebar file tree.
 * Linked from index.html in cascade order — the order is load-bearing. */

/* ── Sidebar file tree ─────────────────────────────────────────────────── */
/* #document-container used to be body's flex:1 child directly; wrapping it in
   #app-shell moved that flex-grow responsibility here, or the whole shell
   collapses to content height instead of filling the space above #status. */
/* grid-template-rows is not decoration: the single implicit row would be `auto`, and
   it only stays capped at the flex-resolved height because both children happen to be
   scroll containers (which zeroes a grid item's automatic minimum size). The moment
   someone sets #sidebar { overflow: visible } — say, to hang a context menu off a row —
   the shell would overflow and the editor would grow under #status with no scrollbar.
   minmax(0, 1fr) makes that independent of the children. */
#app-shell {
  display: grid; grid-template-columns: var(--sb-width, 264px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr); min-height: 0; flex: 1;
}
#app-shell.no-sidebar { grid-template-columns: 0 minmax(0, 1fr); }
#app-shell.no-sidebar #sidebar { display: none; }

/* Focus mode dims every inactive block to near-invisible; a 264px panel listing every
   note title beside it defeats the point. Hide it in CSS only, so the persisted `open`
   preference is untouched and the panel comes back on exit. */
body.focus-mode #app-shell { grid-template-columns: 0 minmax(0, 1fr); }
body.focus-mode #sidebar { display: none; }

/* Pin both children to explicit tracks: #sidebar going display:none removes it
   from grid flow, and without an explicit column #document-container's auto
   placement would slide into (and collapse to) the now-empty first track. */
/* Devicon-ish badge colours. These are file-type identity, not UI chrome — a JS
   file reads yellow in every editor — so they're fixed, like the wallpaper art.
   Declared on :root so every theme inherits them. */
:root {
  --sb-md: #89b4fa; --sb-js: #f7df1e; --sb-py: #4b8bbe; --sb-html: #e34c26;
  --sb-css: #cba6f7; --sb-json: #f9e2af; --sb-sh: #a6e3a1; --sb-sql: #74c7ec;
  --sb-java: #eba0ac; --sb-cpp: #89b4fa;
}
.sb-badge {
  width: 1.44em; flex: 0 0 1.44em; text-align: center;
  font-size: 0.76em; font-weight: 700; letter-spacing: -.3px;
}
.sb-open { margin-left: auto; padding-left: 8px; color: var(--accent); font-size: 0.72em; }

#sidebar  { grid-column: 1; }
#main-col {
  grid-column: 2; display: flex; flex-direction: column; min-width: 0; min-height: 0;
  /* isolation keeps the negative z-index layers below from escaping behind the page. */
  position: relative; isolation: isolate; overflow: hidden;
}