/* ── tabline ──
 * The nvim-style tabline above the buffer.
 * Linked from index.html in cascade order — the order is load-bearing. */

/* ── Tabline (nvim-style, above the buffer) ─────────────────────────────── */
#tabline {
  display: flex; align-items: stretch; flex: 0 0 auto; height: calc(var(--ui-font-size) * 2.4);
  background: var(--bg-raised); border-bottom: 1px solid var(--accent-line);
  min-width: 0; font-size: var(--ui-font-size);
}
#tabline .tabs {
  display: flex; align-items: stretch; flex: 1; min-width: 0;
  overflow-x: auto; scrollbar-width: none;
}
#tabline .tabs::-webkit-scrollbar { display: none; }
#tabline .tab {
  display: flex; align-items: center; gap: 7px; padding: 0 12px; flex: 0 0 auto;
  border: 0; border-right: 1px solid var(--bg-page); cursor: pointer;
  background: var(--bg-code); color: var(--fg-dim);
  font: inherit; white-space: nowrap; max-width: 220px;
}
#tabline .tab:hover { color: var(--fg); }
#tabline .tab.active { background: var(--accent); color: var(--bg-page); font-weight: 600; }
#tabline .tab .t-idx  { opacity: .7; font-size: 0.88em; }
#tabline .tab .t-name { overflow: hidden; text-overflow: ellipsis; }
#tabline .tab .t-dirty { color: var(--accent); font-size: 1.12em; line-height: 1; }
#tabline .tab.active .t-dirty { color: var(--bg-page); }
/* ✎ and × share one treatment: invisible until the tab is hovered, so the tabline
   stays quiet, then lit individually on their own hover. Grouped in one selector
   because they must stay identical — a rename that looked different from close
   would read as a different KIND of control rather than a sibling of it. */
#tabline .tab .t-x,
#tabline .tab .t-ren { opacity: 0; padding: 0 2px; border-radius: 3px; font-size: 1.12em; line-height: 1; }
#tabline .tab .t-ren { font-size: .95em; }   /* ✎ carries more ink than × at a size */
#tabline .tab:hover .t-x,
#tabline .tab:hover .t-ren { opacity: .55; }
#tabline .tab .t-x:hover,
#tabline .tab .t-ren:hover { opacity: 1; background: rgba(0,0,0,.25); }
#tabline #tab-new, #tabline #tab-help {
  flex: 0 0 auto; border: 0; padding: 0 12px; cursor: pointer; font: inherit;
  background: var(--bg-raised); color: var(--fg-dim); border-left: 1px solid var(--bg-page);
}
#tabline #tab-new { color: var(--accent); font-size: 1.2em; }
#tabline #tab-help:hover, #tabline #tab-new:hover { color: var(--fg); }
body.focus-mode #tabline { display: none; }

#sidebar {
  position: relative; isolation: isolate; display: flex; flex-direction: column;
  min-width: 0; overflow: hidden;
  /* The scaling root: every size inside is an em fraction of this. */
  font-size: var(--ui-font-size);
  background: var(--bg-raised); border-right: 1px solid var(--accent-line);
}
/* Artwork and scrim are separate layers so blur()/brightness() never touch the
   file names, which sit above both. */
#sidebar::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--sb-img, none);
  background-size: cover; background-position: var(--sb-pos, center);
  opacity: var(--sb-opacity, 0.45);
  filter: blur(var(--sb-blur, 2px)) brightness(var(--sb-bright, 1)) saturate(var(--sb-sat, 1.1));
}
#sidebar::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, var(--bg-raised), transparent 45%, var(--bg-raised));
  opacity: var(--sb-scrim, 0.55);
}
#sidebar > * { position: relative; }