/* ============================================================
   DOS TUI homepage — MC / Norton-Commander aesthetic
   Palette: classic VGA 16-color set, black screen + blue panels.
   Font: "Perfect DOS VGA 437" self-hosted from /fonts/ (independent
   of the TuiCss vendor copy so the file can be hosted directly).
   ============================================================ */

@font-face {
  font-family: 'DOS VGA';
  src: url('fonts/Perfect DOS VGA 437 Win.ttf') format('truetype');
  font-style: normal;
  font-weight: normal;
  font-display: swap;
}

:root {
  --dos-black: #000000;
  --dos-blue:  #0000aa;   /* classic bright-blue panel */
  --dos-blue-2:#000088;   /* panel bottom edge / shading */
  --dos-blue-b:#0000ff;
  --dos-cyan:  #00aaaa;
  --dos-white: #ffffff;
  --dos-lgray: #c0c0c0;
  --dos-gray:  #808080;
  --dos-dgray: #555555;
  --dos-yellow:#ffff55;
  --dos-green: #55ff55;
  --dos-file:  #c8c8c8;
  --dos-dir:   #ffff77;
  --dos-hl:    #ffffff;   /* reverse-video selection bg */
  --dos-hl-fg: #000000;
  --dos-input: #ffff00;
  --dos-font:  'DOS VGA', 'Perfect DOS VGA 437 Win', 'Perfect DOS VGA 437', 'Courier New', monospace;

  /* semantic accents — kept separate so themes can restyle them */
  --dos-link:      #55ffff;
  --dos-edge-a:    #5f5fff;   /* active panel border */
  --dos-edge-i:    #2a2add;   /* inactive panel border */
  --dos-righttitle:#b6b6ff;
  --dos-helpedge:  #6f6fff;
  --dos-bezel:     #333333;
  --dos-scroll:    #9a9a9a;
  --dos-headline:  #2a2aff;
  --dos-headline2: #1a1add;
  --dos-table:     #3a3aff;
  --dos-fnbar-top: #00004f;
}

html, body {
  height: 100%;
  margin: 0;
  background: var(--dos-black);
  color: var(--dos-white);
}
html { font-size: 16px; }
body { font-family: var(--dos-font); }

/* ---------- screen shell ---------- */
#app {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100vh;
  box-sizing: border-box;
}

/* ---------- top title line ---------- */
#titlebar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 1em;
  background: var(--dos-black);
  color: var(--dos-white);
  font-weight: bold;
  letter-spacing: .08em;
  padding: 2px 8px;
  border-bottom: 1px solid var(--dos-dgray);
  white-space: nowrap;
  overflow: hidden;
  text-align: left;
}

/* ---------- two-pane row ---------- */
#panes {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 10px;
  padding: 10px 8px 8px;
  margin: 0;
  box-sizing: border-box;
}

#left, #right {
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#left  { flex: 5 1 0; }
#right { flex: 7 1 0; }

/* each panel: a solid blue block (MC/Norton field) */
#left .tui-panel, #right .tui-panel {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--dos-blue);
  color: var(--dos-white);
  box-shadow: none;
  border: 1px solid var(--dos-edge-a);
}

/* panel header strips (path / selected title) */
#left-title, #right-title {
  flex: 0 0 auto;
  display: block;
  text-align: left;
  background: var(--dos-black);
  color: var(--dos-white);
  font-weight: bold;
  padding: 2px 6px;
  letter-spacing: .06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 1px solid var(--dos-dgray);
}

/* ---------- left: file list ---------- */
#file-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2px 0;
}
#file-list .row-item {
  display: block;
  padding: 0 6px;
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: default;
  color: var(--dos-file);
  user-select: none;
  -webkit-user-select: none;
}
#file-list .row-item.dir {
  color: var(--dos-dir);
  font-weight: bold;
}
/* reverse-video cursor line — wins over type color */
#file-list .row-item.selected,
#file-list .row-item.selected.dir {
  background: var(--dos-hl);
  color: var(--dos-hl-fg);
}

/* ---------- right: preview / markdown ---------- */
#viewer {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 10px 8px;
  color: var(--dos-white);
  white-space: pre-wrap;      /* keep ASCII help line breaks */
  overflow-wrap: break-word;
}
#viewer h1, #viewer h2, #viewer h3, #viewer h4 {
  color: var(--dos-white);
  font-weight: bold;
  margin: .7em 0 .3em;
  line-height: 1.2;
}
#viewer h1 { text-decoration: underline; }
#viewer p  { margin: .4em 0; }
#viewer a  { color: var(--dos-cyan); }
#viewer strong { color: var(--dos-white); }
#viewer code {
  background: var(--dos-black);
  color: var(--dos-green);
  padding: 0 3px;
}
#viewer pre {
  background: var(--dos-black);
  color: var(--dos-green);
  padding: 6px 8px;
  margin: .5em 0;
  overflow-x: auto;
  border: 1px solid var(--dos-dgray);
  white-space: pre;
}
#viewer pre code { background: none; padding: 0; }
#viewer ul, #viewer ol { margin: .4em 0 .4em 1.4em; padding: 0; }
#viewer li { margin: .15em 0; }
#viewer blockquote {
  margin: .5em 0;
  padding: 0 0 0 8px;
  border-left: 3px solid var(--dos-gray);
  color: var(--dos-lgray);
}
#viewer hr { border: none; border-top: 1px dashed var(--dos-gray); margin: .8em 0; }
#viewer table { border-collapse: collapse; margin: .6em 0; }
#viewer th, #viewer td {
  border: 1px solid var(--dos-table);
  padding: 1px 8px;
  text-align: left;
}
#viewer th { background: var(--dos-black); color: var(--dos-white); font-weight: bold; }
#viewer img { max-width: 100%; }
#viewer del { color: var(--dos-gray); }

/* ---------- bottom status line ---------- */
#statusbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 1.5em;
  background: var(--dos-black);
  color: var(--dos-lgray);
  padding: 1px 8px;
  border-top: 1px solid var(--dos-dgray);
  white-space: nowrap;
  overflow: hidden;
  box-shadow: none;
}
/* version / codename, pinned to the status line's right edge */
#statusbar::after {
  content: 'v0.1 Janus';
  margin-left: auto;
  color: var(--dos-gray);
}

/* ---------- filter prompt line ---------- */
#filter-input {
  flex: 0 0 auto;
  background: var(--dos-black);
  color: var(--dos-input);
  border: 1px solid var(--dos-dgray);
  border-top: none;
  padding: 1px 8px;
  font: inherit;
  letter-spacing: .05em;
  outline: none;
}

/* ---------- DOS scrollbars ---------- */
*::-webkit-scrollbar { width: 12px; height: 12px; background: var(--dos-black); }
*::-webkit-scrollbar-thumb { background: var(--dos-scroll); border: 2px solid var(--dos-black); }
*::-webkit-scrollbar-corner { background: var(--dos-black); }
* { scrollbar-width: thin; scrollbar-color: var(--dos-scroll) var(--dos-black); }

/* ---------- per-panel footer rows (MC counts / tags) ---------- */
.tui-panel-footer {
  flex: 0 0 auto;
  display: block;
  background: var(--dos-black);
  color: var(--dos-lgray);
  padding: 1px 6px;
  border-top: 1px solid var(--dos-blue-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: .05em;
}

/* directory arrows get their own marker colour; reverse-video row stays black */
#file-list .row-item.dir::first-letter { color: var(--dos-cyan); }
#file-list .row-item.selected.dir::first-letter { color: var(--dos-hl-fg); }

/* ---------- mini subdirectory listing inside the preview pane ---------- */
#viewer .mini-row {
  display: block;
  padding: 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#viewer .mini-row.mini-dir { color: var(--dos-dir); font-weight: bold; }
#viewer .mini-row.mini-dir::first-letter { color: var(--dos-cyan); }
#viewer .mini-row.mini-file { color: var(--dos-file); }
#viewer .mini-row.mini-empty { color: var(--dos-gray); font-style: italic; }

/* ---------- bottom Norton-style function-key bar ---------- */
#fnbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 1.4em;
  background: var(--dos-blue);
  color: var(--dos-white);
  padding: 1px 8px;
  border-top: 2px solid var(--dos-fnbar-top);
  white-space: nowrap;
  overflow: hidden;
  letter-spacing: .03em;
}
#fnbar .fn { display: inline-flex; align-items: baseline; gap: .5em; white-space: nowrap; }
#fnbar .k { color: var(--dos-yellow); font-weight: bold; }

/* ---------- markdown heading hairline rules ---------- */
#viewer h2 { border-bottom: 1px solid var(--dos-headline); padding-bottom: 2px; }
#viewer h3 { border-bottom: 1px solid var(--dos-headline2); padding-bottom: 2px; }

/* ---------- shell address line (addr left, live clock right) ---------- */
#titlebar { justify-content: space-between; }
#addr { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#clock { flex: 0 0 auto; font-weight: normal; color: var(--dos-lgray); }

/* ---------- active (left, navigable) vs passive (right, preview) panel ---------- */
#left .tui-panel { border-color: var(--dos-edge-a); }
#right .tui-panel { border-color: var(--dos-edge-i); }
#right-title { color: var(--dos-righttitle); }
#left-title::before { content: '< '; }
#left-title::after { content: ' >'; }

/* ---------- MC-style '..' parent pseudo-row ---------- */
#file-list .row-item.up { color: var(--dos-cyan); }

/* ---------- blinking block cursor at the start of the selected row ---------- */
#file-list .row-item { position: relative; }
#file-list .row-item.selected::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  background: #000;
  animation: curblink 1.2s steps(2, start) infinite;
}
@keyframes curblink { 50% { opacity: 0; } }

/* ---------- filter prompt row (shown while typing) ---------- */
#prompt {
  flex: 0 0 auto;
  display: none;
  align-items: center;
  gap: .6em;
  background: var(--dos-black);
  color: var(--dos-white);
  border-top: 1px solid var(--dos-dgray);
  padding: 1px 8px;
  letter-spacing: .04em;
}
#prompt:not([hidden]) { display: flex; }
#filter-tag { color: var(--dos-cyan); }
#filter-input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  color: var(--dos-input);
  border: none;
  padding: 0;
  font: inherit;
  letter-spacing: .05em;
  outline: none;
  caret-color: var(--dos-input);
}

/* ---------- terminal screen bezel + faint scanline texture ---------- */
#app { box-sizing: border-box; border: 1px solid var(--dos-bezel); }
#app::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.016) 0 1px, transparent 1px 3px);
}

/* ---------- '?' help overlay ---------- */
#help {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  background: #000000;
  color: #ffffff;
  border: 1px solid var(--dos-helpedge);
  outline: 1px solid #000000;
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.55);
  padding: 10px 14px;
  z-index: 20;
  max-width: 84vw;
  max-height: 82vh;
  overflow: auto;
  cursor: pointer;
}
#help-body { margin: 0; white-space: pre; line-height: 1.5; color: #ffffff; }

/* ---------- external-link entries (md + link: frontmatter) ---------- */
#file-list .row-item.link { color: var(--dos-link); }
#file-list .row-item.selected.link { color: var(--dos-hl-fg); }

/* ============================================================
   Color schemes — switch with the 't' key (persisted in localStorage).
   The 'dos' classic-blue scheme is the :root default above; each theme
   only overrides the palette tokens.
   ============================================================ */

/* phosphor green terminal */
html[data-theme='green'] {
  --dos-black: #000000;
  --dos-blue: #003a00;
  --dos-blue-2: #004f00;
  --dos-white: #c9ffc9;
  --dos-file: #8cff8c;
  --dos-dir: #9fff9f;
  --dos-hl: #55ff55;
  --dos-hl-fg: #001400;
  --dos-input: #55ff55;
  --dos-cyan: #55ffaa;
  --dos-yellow: #d4ff4f;
  --dos-green: #7fff7f;
  --dos-lgray: #9fd09f;
  --dos-gray: #3f8f3f;
  --dos-dgray: #1c4f1c;
  --dos-link: #6ff6ff;
  --dos-edge-a: #4fdf4f;
  --dos-edge-i: #2f8f2f;
  --dos-righttitle: #a2e6a2;
  --dos-helpedge: #4fdf4f;
  --dos-bezel: #1f4f1f;
  --dos-scroll: #55a055;
  --dos-headline: #4fdf4f;
  --dos-headline2: #2f9f2f;
  --dos-table: #4fbf4f;
  --dos-fnbar-top: #0c4a0c;
}

/* amber CRT */
html[data-theme='amber'] {
  --dos-black: #000000;
  --dos-blue: #2b1a06;
  --dos-blue-2: #4a2f0e;
  --dos-white: #ffd28a;
  --dos-file: #f6b95f;
  --dos-dir: #ffd77a;
  --dos-hl: #ffb000;
  --dos-hl-fg: #1a0d00;
  --dos-input: #ffe08a;
  --dos-cyan: #ffb000;
  --dos-yellow: #ffe08a;
  --dos-green: #ffd77a;
  --dos-lgray: #c9a15e;
  --dos-gray: #7a5220;
  --dos-dgray: #4a330f;
  --dos-link: #8fd4ff;
  --dos-edge-a: #ffb000;
  --dos-edge-i: #8a5c00;
  --dos-righttitle: #e6bd7e;
  --dos-helpedge: #ffb000;
  --dos-bezel: #5a3c10;
  --dos-scroll: #a0762a;
  --dos-headline: #ffb000;
  --dos-headline2: #9a6a00;
  --dos-table: #c98f3f;
  --dos-fnbar-top: #663f06;
}

/* ============================================================
   Touch / narrow-screen adaptation
   Wide (tablet-landscape/desktop) keeps the side-by-side panes;
   narrow portrait stacks the file list above the preview.
   ============================================================ */
@supports (height: 100dvh) { #app { height: 100dvh; } }

@media (max-width: 900px) {
  #panes {
    flex-direction: column;
    gap: 8px;
    padding: 8px;
  }
  #left, #right { width: 100%; flex: 1 1 auto; }
  #left  { flex-basis: 46%; min-height: 40vh; }
  #right { flex-basis: 54%; min-height: 40vh; }
  #titlebar { gap: .5em; }
  #clock { display: none; }
  /* wrap instead of clipping so every key hint stays reachable */
  #fnbar {
    flex-wrap: wrap;
    gap: 2px 12px;
    padding-top: 3px;
    padding-bottom: 3px;
    line-height: 1.7;
  }
  #fnbar .fn { flex: 0 0 auto; }
  #statusbar { letter-spacing: 0; }
}

/* very small screens: drop the informational chips, keep the tappable actions */
@media (max-width: 560px) {
  #fnbar .fn:not([data-act]) { display: none; }
}

/* bigger hit targets + no text selection on touch */
@media (pointer: coarse) {
  #file-list .row-item { padding: 9px 8px; min-height: 20px; }
  #file-list { -webkit-user-select: none; user-select: none; }
}

/* ice / aqua */
html[data-theme='ice'] {
  --dos-black: #001a1f;
  --dos-blue: #004b5e;
  --dos-blue-2: #00677f;
  --dos-white: #dffcff;
  --dos-file: #bfe9f2;
  --dos-dir: #eaffff;
  --dos-hl: #9ff4ff;
  --dos-hl-fg: #00141a;
  --dos-input: #b8fbff;
  --dos-cyan: #9be8ff;
  --dos-yellow: #d6ff9c;
  --dos-green: #b6fff0;
  --dos-lgray: #9fd4de;
  --dos-gray: #4f8d99;
  --dos-dgray: #2a5660;
  --dos-link: #d6f4ff;
  --dos-edge-a: #8fe6f2;
  --dos-edge-i: #2f8292;
  --dos-righttitle: #bfeef4;
  --dos-helpedge: #8fe6f2;
  --dos-bezel: #2f6a74;
  --dos-scroll: #67b8c4;
  --dos-headline: #7fe0ee;
  --dos-headline2: #3f9fb0;
  --dos-table: #4fa5b4;
  --dos-fnbar-top: #0c4450;
}