/* ── base16-black-metal-bathory ─────────────────────────── */
:root {
  --b00: #000000;
  --b01: #0d0d0d;
  --b02: #1a1a1a;
  --b03: #2e2e2e;
  --b04: #808080;
  --b05: #d4d4d4;
  --b06: #ebebeb;
  --b07: #ffffff;
  --b08: #cc1100;
  --b09: #cc5500;
  --b0A: #cc9900;
  --b0B: #669900;
  --b0C: #447799;
  --b0D: #334488;
  --b0E: #663399;
  --b0F: #882211;

  --tl-a-bg: var(--b0B);
  --tl-a-fg: var(--b00);
  --tl-b-bg: var(--b02);
  --tl-b-fg: var(--b04);
  --tl-c-bg: var(--b01);
  --tl-c-fg: var(--b05);
  --tl-z-bg: var(--b0B);
  --tl-z-fg: var(--b00);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--b00);
  min-height: 100vh;
  font-family: 'Space Mono', monospace;
  font-size: 16px;
  color: var(--b05);
}

/* ── NVIM SHELL ─────────────────────────────────────────── */

.nvim {
  width: 100vw;
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 1;
}

#bg_canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(100vh, 100vw);
  height: min(100vh, 100vw);
  pointer-events: none;
  display: none;
  z-index: 0;
  opacity: 0.25;
}

.editor { position: relative; }

/* ── TABLINE ────────────────────────────────────────────── */

.tabline {
  display: flex;
  align-items: stretch;
  height: 24px;
  flex-shrink: 0;
  font-size: 13px;
  user-select: none;
  z-index: 2;
}

.tl-a {
  background: var(--tl-a-bg);
  color: var(--tl-a-fg);
  font-weight: 700;
  padding: 0 12px;
  display: flex;
  align-items: center;
  letter-spacing: 0.08em;
  flex-shrink: 0;
}

.tl-b {
  background: var(--tl-b-bg);
  color: var(--tl-b-fg);
  padding: 0 10px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.tl-c {
  background: var(--tl-c-bg);
  color: var(--tl-c-fg);
  padding: 0 10px;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.tl-c-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tl-x {
  background: var(--tl-c-bg);
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 2px;
  padding: 0 4px;
}

.tl-link {
  color: var(--b04);
  text-decoration: none;
  padding: 0 6px;
  transition: color 0.1s;
}
.tl-link:hover { color: var(--b0A); }

.tl-z {
  background: var(--tl-z-bg);
  color: var(--tl-z-fg);
  font-weight: 700;
  padding: 0 10px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  min-width: 5ch;
  justify-content: center;
}

/* ── EDITOR ─────────────────────────────────────────────── */

.editor {
  z-index: 1;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  /* background: var(--b00); */
   background: transparent;
  scrollbar-width: thin;
  scrollbar-color: var(--b03) var(--b00);
}

.editor::-webkit-scrollbar       { width: 5px; }
.editor::-webkit-scrollbar-track { background: var(--b00); }
.editor::-webkit-scrollbar-thumb { background: var(--b03); }

/* ── BUFFER LAYOUT ──────────────────────────────────────── */

/* gutter always far left, body centers content */

.buffer {
  display: flex;
  min-height: 100%;
  width: 100%;
}

.gutter {
  flex-shrink: 0;
  /* background: var(--b00); */
  background: transparent;
  color: var(--b03);
  text-align: right;
  padding: 6px 10px 6px 8px;
  user-select: none;
  min-width: 3.5ch;
  line-height: 1.65;
  font-size: 16px;
}

.buf-body {
  flex: 1;
  display: flex;
  justify-content: center;
}

.buf-body.padded {
  padding-top: 2.5rem;
}

.buf-lines {
  width: 620px;
  max-width: 100%;
  padding: 6px 16px 6px 4px;
  line-height: 1.65;
}

/* ── LINES ──────────────────────────────────────────────── */

.ln {
  display: block;
  min-height: 1.65em;
  white-space: pre-wrap;
  color: var(--b05);
}

.ln.cursor-line {
  background: var(--b02);
  outline: none;
}
.ln.cursor-line::before {
  content: '▋';
  color: var(--b05);
  animation: blink 1s step-end infinite;
  margin-right: 2px;
}
/* ── BUFFER (per-row layout) ────────────────────────────── */

.nvim-buf {
}

.nvim-row {
  display: flex;
  justify-content: center;
  position: relative;
}

.ln-num {
  position: absolute;
  left: 8px;
  width: 3.5ch;
  text-align: right;
  color: var(--b03);
  user-select: none;
  line-height: 1.65;
  flex-shrink: 0;
}
/* ── SYNTAX ─────────────────────────────────────────────── */

.h1   { color: var(--b0A); font-weight: 700; }
.h2   { color: var(--b08); font-weight: 700; }
.h3   { color: var(--b09); }
.kw   { color: var(--b0E); }
.str  { color: var(--b0B); }
.cmt  { color: var(--b03); font-style: italic; }
.type { color: var(--b08); }
.lnk  { color: var(--b0C); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.barf { color: var(--b0B); }
.bare { color: var(--b03); }
.tilde-char { color: var(--b03); }

/* ── ALPHA ELEMENTS ─────────────────────────────────────── */

.alpha-title {
  color: var(--b05);
  font-weight: 700;
  text-align: center;
}

.alpha-sub {
  color: var(--b04);
  text-align: center;
}

.alpha-footer {
  color: var(--b03);
  font-style: italic;
  text-align: center;
}

.alpha-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  font-family: inherit;
  font-size: inherit;
  line-height: 1.65;
  cursor: pointer;
  padding: 0;
}

.alpha-btn:hover .btn-lbl { color: var(--b0A); }

.btn-key   { color: var(--b04); }
.btn-arrow { color: var(--b08); }
.btn-lbl   { color: var(--b05); }

/* alpha content lines: centered within the 620px column */
.ln.alpha-centered { text-align: center; }

/* tilde lines are always left-aligned */
.ln.tilde-ln { color: var(--b03); }

/* ── STATUSLINE ─────────────────────────────────────────── */

.statusline {
  height: 4px;
  background: var(--b01);
  flex-shrink: 0;
}

/* ── CMDLINE ────────────────────────────────────────────── */

.cmdline {
  height: 22px;
  background: var(--b00);
  display: flex;
  align-items: center;
  padding: 0 8px;
  flex-shrink: 0;
  font-size: 14px;
  position: relative;
  cursor: text;
}

#cmd-hint    { color: var(--b03); }
#cmd-display { color: var(--b05); }

#cmd-cursor {
  display: inline-block;
  width: 0.55em;
  height: 1.05em;
  background: var(--b05);
  vertical-align: text-bottom;
  opacity: 0;
}

.cmdline.active #cmd-hint { display: none; }

.cmdline.active #cmd-cursor {
  animation: blink 1s step-end infinite;
  opacity: 1;
}

@keyframes blink { 50% { opacity: 0; } }

#cmd-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* ── RESPONSIVE ─────────────────────────────────────────── */

@media (max-width: 600px) {
  body { font-size: 13px; }

  .gutter  { display: none; }
  .cmdline { display: none; }
  .tl-b    { display: none; }

  .buf-body.padded { padding-top: 1.5rem; }
  .buf-lines       { padding: 6px 20px 6px 16px; width: 100%; }
}