/* Default = gruvbox-dark. Other themes are scoped to a [data-theme="..."]
   selector and override the same variables. The :root block also serves
   as the fallback if data-theme is missing for any reason. */
:root,
[data-theme="gruvbox-dark"] {
  --bg: #1d2021;
  --fg: #ebdbb2;
  --dim: #a89984;
  --muted: #665c54;
  --accent: #b8bb26;
  --warn: #fabd2f;
  --err: #fb4934;
  --blue: #83a598;
  --purple: #d3869b;
  --aqua: #8ec07c;
}

[data-theme="gruvbox-light"] {
  --bg: #fbf1c7;
  --fg: #3c3836;
  --dim: #7c6f64;
  --muted: #a89984;
  --accent: #79740e;
  --warn: #b57614;
  --err: #9d0006;
  --blue: #076678;
  --purple: #8f3f71;
  --aqua: #427b58;
}

[data-theme="solarized-dark"] {
  --bg: #002b36;
  --fg: #93a1a1;
  --dim: #839496;
  --muted: #586e75;
  --accent: #859900;
  --warn: #b58900;
  --err: #dc322f;
  --blue: #268bd2;
  --purple: #6c71c4;
  --aqua: #2aa198;
}

[data-theme="solarized-light"] {
  --bg: #fdf6e3;
  --fg: #586e75;
  --dim: #657b83;
  --muted: #93a1a1;
  --accent: #859900;
  --warn: #b58900;
  --err: #dc322f;
  --blue: #268bd2;
  --purple: #6c71c4;
  --aqua: #2aa198;
}

[data-theme="nord"] {
  --bg: #2e3440;
  --fg: #d8dee9;
  --dim: #a3a8b3;
  --muted: #4c566a;
  --accent: #a3be8c;
  --warn: #ebcb8b;
  --err: #bf616a;
  --blue: #81a1c1;
  --purple: #b48ead;
  --aqua: #8fbcbb;
}

[data-theme="dracula"] {
  --bg: #282a36;
  --fg: #f8f8f2;
  --dim: #b8b8b8;
  --muted: #6272a4;
  --accent: #50fa7b;
  --warn: #f1fa8c;
  --err: #ff5555;
  --blue: #8be9fd;
  --purple: #bd93f9;
  --aqua: #ff79c6;
}

[data-theme="tokyo-night"] {
  --bg: #1a1b26;
  --fg: #c0caf5;
  --dim: #a9b1d6;
  --muted: #565f89;
  --accent: #9ece6a;
  --warn: #e0af68;
  --err: #f7768e;
  --blue: #7aa2f7;
  --purple: #bb9af7;
  --aqua: #7dcfff;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  /* `dvh` shrinks when the mobile on-screen keyboard opens; `vh`
     stays the same. Keep `vh` as a fallback for older browsers. */
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
  font-family: "Berkeley Mono", "JetBrains Mono", "IBM Plex Mono",
    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px;
  line-height: 1.4;
}

/* The terminal is one fixed pane — like a tmux window. Content that
   exceeds the pane scrolls internally (newest at bottom). Scrollbars
   are hidden; old content falls into the scrollback. */
main {
  height: 100vh;
  height: 100dvh;
  padding: 1.5rem clamp(1rem, 4vw, 3rem) 2.5rem;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  /* VM overlay (#vm) absolutely positions itself within main, so we
     need a positioning context here. */
  position: relative;
  /* Disable the browser's automatic scroll-anchoring so new content
     at the bottom of the pane actually triggers our auto-scroll. */
  overflow-anchor: none;
  /* Keep a little clearance below the cursor when auto-scrolling so
     the last line isn't kissing the bottom edge (or the keyboard). */
  scroll-padding-bottom: 2rem;
}
main::-webkit-scrollbar {
  display: none;
}

.screen {
  margin: 0;
  padding: 0;
  white-space: pre;
  font: inherit;
  color: var(--fg);
  tab-size: 4;
}

/* semantic line coloring */
.screen .post { color: var(--dim); }
.screen .ok   { color: var(--accent); }
.screen .warn { color: var(--warn); }
.screen .err  { color: var(--err); }
.screen .kern { color: var(--dim); }
.screen .kern .ts { color: var(--muted); }
.screen .kern .tag { color: var(--blue); }
.screen .identity { color: var(--purple); }
.screen .prompt-host { color: var(--accent); }
.screen .prompt-path { color: var(--blue); }
.screen .motd { color: var(--aqua); }
.screen .fortune { color: var(--warn); font-style: italic; }
.screen .user-input { color: var(--fg); }
.screen .dim { color: var(--muted); }
.screen a.link {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.screen a.link:hover,
.screen a.link:focus {
  color: var(--aqua);
}

/* cursor */
.cursor {
  display: inline-block;
  width: 0.55ch;
  height: 1em;
  background: var(--fg);
  vertical-align: -0.12em;
  animation: blink 1.06s steps(2, start) infinite;
  margin-left: 2px;
}

@keyframes blink {
  to {
    visibility: hidden;
  }
}

/* Past prompts (where typing is no longer routed) stop blinking. */
.cursor.idle {
  animation: none;
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .cursor {
    animation: none;
  }
}

/* Off-screen input for cross-platform keystroke capture. Positioned at
   the bottom of the viewport so iOS doesn't try to auto-scroll the
   entire page to reveal it when it gains focus. font-size must be
   >= 16px or iOS will zoom in on focus. */
#stdin {
  position: fixed;
  bottom: 0;
  left: 50%;
  width: 1px;
  height: 1px;
  opacity: 0;
  border: 0;
  outline: none;
  padding: 0;
  pointer-events: none;
  font-size: 16px;
}

@media (max-width: 640px) {
  main {
    padding: 1rem 1rem 2rem;
  }
}

/* VM mode (v86 + TinyCore) — sits inside #terminal, swaps in for the
   <pre> screen when active. v86 paints into either .vm-text (text
   mode) or .vm-canvas (graphics mode); we let it pick. */
#vm {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}
#vm[hidden] {
  display: none;
}
#vm .vm-banner {
  flex: 0 0 auto;
  padding: 0.4rem 0.8rem;
  font-size: 0.85em;
  color: var(--dim);
  background: color-mix(in srgb, var(--bg) 80%, var(--fg) 20%);
  border-bottom: 1px solid var(--muted);
}
#vm .vm-banner kbd {
  font-family: inherit;
  color: var(--accent);
  background: transparent;
  padding: 0 0.2em;
  border: 1px solid var(--muted);
  border-radius: 3px;
  font-size: 0.9em;
}
#vm-screen {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
#vm-screen .vm-text {
  color: var(--fg);
  font-family: inherit;
  /* The VM is its own "monitor" — scale aggressively so the 80x25
     text grid fills the pane on big monitors instead of looking like
     a small inset. clamp() keeps it readable on phones and not
     cartoonish past ~1080p. */
  font-size: clamp(16px, 2.4vw, 32px);
  line-height: 1.25;
  margin: 0;
}
#vm-screen .vm-canvas {
  display: block;
  max-width: 100%;
  max-height: 100%;
  background: #000;
}

.bold { font-weight: bold; }
.italic { font-style: italic; }
.code {
  background: rgba(255, 255, 255, 0.08);
  padding: 0 0.25em;
  border-radius: 2px;
}