/*
 * terminal.css — data-centered terminal UI system
 * Warm Monokai palette. JetBrains Mono. tmux chrome.
 * Shared by: homepage, library, journal, about
 * NOT used by: data stories, showcase (own design system via core.css)
 */

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

/* ─── Palette: Warm Monokai ──────────────────────────── */
:root[data-theme="dark"] {
  --bg:        #0e0d13;
  --surface:   #1a1824;
  --border:    #2a2838;
  --text:      #d4d4d4;
  --dim:       #a0a0a0;
  --muted:     #6a6a6a;
  --orange:    #ce9178;
  --amber:     #d7ba7d;
  --teal:      #4ec9b0;
  --green:     #6a9955;
  --blue:      #569cd6;
  --violet:    #c586c0;
  --red:       #f44747;
  --bar-bg:    #0a0912;
  --highlight: rgba(78,201,176,0.08);
  --sel-bg:    #264f3d;
  --tree:      #555;
  --pane-line: #222030;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg:        #fafaf8;
  --surface:   #f0eeeb;
  --border:    #ccc8c2;
  --text:      #3b3b3b;
  --dim:       #666;
  --muted:     #999;
  --orange:    #b35e2c;
  --amber:     #946b2d;
  --teal:      #0e7a6b;
  --green:     #4d7a2e;
  --blue:      #2e6bbd;
  --violet:    #9b4dca;
  --red:       #c4343a;
  --bar-bg:    #eeecea;
  --highlight: rgba(14,122,107,0.06);
  --sel-bg:    rgba(14,122,107,0.12);
  --tree:      #a09a92;
  --pane-line: #c0bbb4;
  color-scheme: light;
}

/* ─── Base ───────────────────────────────────────────── */
html, body { height: 100%; }

body {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.4;
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
}

/* Dark mode textures (matches data story pages) */
:root[data-theme="dark"] body {
  background-image: url('../showcase/data-stories/textures/dark-leather.png');
  background-repeat: repeat;
}
:root[data-theme="dark"] #topbar {
  background-image: url('../showcase/data-stories/textures/dark-mosaic.png');
  background-repeat: repeat;
}

a { color: inherit; text-decoration: none; }
::selection { background: var(--sel-bg); }

/* ─── Top bar (tmux window tabs) ─────────────────────── */
#topbar {
  background: var(--bar-bg);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 32px;
  border-bottom: 1px solid var(--pane-line);
  flex-shrink: 0;
  white-space: nowrap;
  z-index: 20;
}

#topbar .left {
  display: flex;
  align-items: center;
  height: 100%;
}

.tab {
  padding: 0 1.5ch;
  height: 32px;
  display: flex;
  align-items: center;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  border-right: none;
  border-radius: 6px 6px 0 0;
  position: relative;
  margin-right: 2px;
  box-shadow: 2px 1px 3px rgba(0,0,0,0.25);
  background: var(--bar-bg);
  transition: background 0.1s, color 0.1s;
}

.tab:first-child { padding-left: 1ch; }
.tab.active { background: var(--bg); color: var(--text); box-shadow: 2px 1px 4px rgba(0,0,0,0.35); z-index: 2; }
.tab:hover:not(.active) { color: var(--dim); background: var(--surface); }
.tab .tab-idx { color: var(--green); margin-right: 0.5ch; font-size: 11px; }

/* ─── Tab dropdown ──────────────────────────────────── */
.tab-dd {
  position: relative;
  height: 32px;
  display: flex;
  align-items: center;
}
.tab-dd > .tab { border-right: 1px solid var(--pane-line); }
.tab-dd > .tab::after {
  content: ' ▾'; font-size: 9px; color: var(--muted); margin-left: 0.3ch;
}
.tab-dd-menu {
  display: none;
  position: absolute; top: 32px; left: 0;
  background: var(--bar-bg); border: 1px solid var(--pane-line);
  min-width: 160px; z-index: 50;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.tab-dd:hover .tab-dd-menu,
.tab-dd.open .tab-dd-menu { display: block; }
.tab-dd-menu a {
  display: block; padding: 4px 1.5ch; font-size: 12px;
  color: var(--dim); text-decoration: none;
}
.tab-dd-menu a:hover { background: var(--surface); color: var(--text); }
.tab-dd-menu a .tab-idx { color: var(--green); margin-right: 0.5ch; font-size: 11px; }

#topbar .right {
  display: flex;
  align-items: center;
  gap: 2ch;
  padding-right: 1.5ch;
  font-size: 12px;
}

/* ─── Theme toggle ───────────────────────────────────── */
#theme-toggle {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 11px;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
}

#theme-toggle:hover { color: var(--text); }

/* ─── Mobile topbar ─────────────────────────────────── */
@media (max-width: 720px) {
  #topbar { overflow: visible; height: auto; flex-wrap: wrap; }
  #topbar .left { flex: 1 1 100%; min-width: 0; overflow-x: auto; scrollbar-width: none; height: 40px; }
  #topbar .left::-webkit-scrollbar { display: none; }
  #topbar .right { flex: 1 1 100%; height: 28px; justify-content: flex-end; border-top: 1px solid var(--pane-line); }
  .tab { padding: 0 1.5ch; font-size: 12px; min-height: 40px; }
  .tab-dd > .tab { padding: 0 1.5ch; font-size: 12px; min-height: 40px; }
  .tab-dd { height: 40px; }
  .tab-dd-menu { top: 40px; z-index: 100; }
  #topbar .right { position: relative; z-index: 1; }
}

/* ─── Status bar ─────────────────────────────────────── */
#statusbar {
  background: var(--bar-bg);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 22px;
  border-top: 1px solid var(--pane-line);
  flex-shrink: 0;
  font-size: 11px;
  white-space: nowrap;
  z-index: 20;
}

#statusbar .sb-left {
  display: flex;
  align-items: center;
}

.sb-label {
  color: var(--dim);
  padding-left: 1ch;
}

.mode-badge {
  background: var(--teal);
  color: var(--bg);
  font-weight: 700;
  padding: 0 1ch;
  height: 22px;
  display: flex;
  align-items: center;
  letter-spacing: 0.05em;
  font-size: 11px;
}

.sb-info {
  color: var(--dim);
  font-size: 12px;
  margin-left: 2ch;
}

#statusbar .sb-right {
  display: flex;
  align-items: center;
}

/* ─── F-key bar ──────────────────────────────────────── */
.fkey {
  display: flex;
  align-items: center;
  height: 22px;
}

.fkey .fk-num {
  background: var(--dim);
  color: var(--bar-bg);
  padding: 0 0.4ch;
  font-weight: 700;
  font-size: 10px;
  line-height: 22px;
}

.fkey .fk-label {
  color: var(--muted);
  padding: 0 0.7ch;
  font-size: 11px;
}

/* ─── Pane utilities ─────────────────────────────────── */

/* Vertical pane divider (::after on left pane) */
.pane-vdivide {
  position: relative;
}

.pane-vdivide::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 1px;
  background: var(--pane-line);
  z-index: 5;
}

/* Horizontal pane divider (::before on bottom pane) */
.pane-hdivide {
  position: relative;
}

.pane-hdivide::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--pane-line);
  z-index: 5;
}

/* Pane header bar (small bar above pane content) */
.pane-header {
  background: var(--bar-bg);
  border-bottom: 1px solid var(--pane-line);
  padding: 0 1ch;
  height: 20px;
  display: flex;
  align-items: center;
  font-size: 11px;
  color: var(--muted);
  flex-shrink: 0;
}

.pane-header .ph-title {
  color: var(--teal);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.pane-header .ph-right {
  margin-left: auto;
  color: var(--muted);
}

/* ─── Scrollbar ──────────────────────────────────────── */
.term-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--pane-line) transparent;
}

.term-scroll::-webkit-scrollbar { width: 5px; }
.term-scroll::-webkit-scrollbar-track { background: transparent; }
.term-scroll::-webkit-scrollbar-thumb { background: var(--pane-line); border-radius: 2px; }

/* ─── Cursor blink ───────────────────────────────────── */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

.cursor {
  display: inline-block;
  width: 1ch;
  height: 1.1em;
  background: var(--teal);
  vertical-align: text-bottom;
  animation: blink 1s step-end infinite;
}

/* ─── Help overlay ───────────────────────────────────── */
#help-overlay {
  display: none;
  position: fixed;
  top: 30px;
  right: 2ch;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 1.5ch 2ch;
  z-index: 200;
  min-width: 30ch;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

#help-overlay.visible { display: block; }

#help-overlay h3 {
  color: var(--dim);
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 1ch;
  letter-spacing: 0.08em;
}

.hk-row {
  display: grid;
  grid-template-columns: 8ch 1fr;
  gap: 0 1ch;
  margin-bottom: 0.3ch;
}

.hk-key { color: var(--amber); font-weight: 600; font-size: 12px; }
.hk-desc { color: var(--muted); font-size: 12px; }
.help-close { color: var(--muted); font-size: 10px; margin-top: 1ch; }

/* ─── tmux section dividers (for scrolling pages) ────── */
.tmux-divider {
  display: flex;
  align-items: center;
  color: var(--pane-line);
  margin: 2.5ch 0 0;
  user-select: none;
}

.tmux-divider .pane-label {
  color: var(--teal);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding-right: 1ch;
  flex-shrink: 0;
}

.tmux-divider .pane-rule {
  flex: 1;
  height: 1px;
  background: var(--pane-line);
}

.tmux-divider .pane-meta {
  color: var(--muted);
  font-size: 11px;
  padding-left: 1ch;
  flex-shrink: 0;
}