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

/* ── Resize handle ───────────────────────────────────────────────────────────
   Sits on the panel's right edge. Deliberately wider than it looks (8px of target
   for a 1px line) — a hairline border is a miserable thing to hit with a mouse. */
#sb-resize {
  position: absolute; top: 0; right: 0; bottom: 0; width: 8px;
  cursor: col-resize; z-index: 3; background: none; border: 0;
  /* The visible line is a child pseudo-element so the hit area can stay generous
     without painting an 8px stripe over the wallpaper. */
}
#sb-resize::after {
  content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 2px;
  background: var(--accent); opacity: 0; transition: opacity .12s var(--ease);
}
#sb-resize:hover::after, #sb-resize:focus-visible::after, body.sb-resizing #sb-resize::after {
  opacity: .8;
}
#sb-resize:focus-visible { outline: none; }
/* While dragging, the pointer is captured — stop the editor selecting text under it
   and keep the resize cursor even when the pointer outruns the handle. */
body.sb-resizing { cursor: col-resize; user-select: none; }
body.sb-resizing #document-container { pointer-events: none; }

.sb-head { display: flex; align-items: center; gap: 6px; padding: 10px 12px 8px; }
.sb-tilde { color: var(--accent); }
.sb-path { color: var(--fg-dim); font-size: 0.96em; flex: 1; }
#sb-new { border: 0; background: none; color: var(--accent); cursor: pointer; font: inherit; font-size: 1.28em; padding: 0 4px; }
#sb-new:hover { color: var(--fg); }

#sidebar-tree { flex: 1; overflow: auto; padding-bottom: 8px; }
.sb-row {
  display: flex; align-items: center; gap: 7px; width: 100%;
  /* Row height tracks the text, or shrinking the font just leaves taller gaps. */
  height: calc(var(--ui-font-size) * 1.92);
  padding: 0 10px 0 0; border: 0; background: none; cursor: pointer;
  color: var(--fg-dim); font: inherit; font-size: 1em; text-align: left; white-space: nowrap;
}
.sb-row:hover { background: var(--accent-soft); color: var(--fg); }
.sb-row.dir { color: var(--accent); }
.sb-row .sb-chev { width: 1.12em; flex: 0 0 1.12em; text-align: center; color: var(--fg-faint); font-size: 0.8em; }
.sb-row .sb-name { overflow: hidden; text-overflow: ellipsis; }
.sb-row .sb-count { margin-left: auto; color: var(--fg-faint); font-size: 0.88em; }
.sb-foot { padding: 7px 12px; border-top: 1px solid var(--accent-line); color: var(--fg-faint); font-size: 0.88em; }

@media (max-width: 820px) {
  #app-shell { grid-template-columns: 0 minmax(0, 1fr); }
  #sidebar { display: none; }
}