/* ═══════════════════════════════════════════════════════════════════════════
   terminal.css — the interactive résumé terminal.

   Four themes live here as [data-theme] blocks. To add a fifth: copy a block,
   rename it, add the name to THEMES in terminal.js. Every foreground/background
   pair below was contrast-checked against WCAG AA — if you change a colour,
   check it again, because a terminal that looks great and can't be read is
   worse than a boring one.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:"Plex Mono";src:url(fonts/mono.woff2) format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo Black";src:url(fonts/archivo-black.woff2) format("woff2");
  font-weight:400;font-style:normal;font-display:swap}

/* brutalist — the default: paper, not a black box. Matches the scrapbook page. */
:root,:root[data-theme="brutalist"]{
  --bg:#FFFDF5; --fg:#111111; --dim:#4A4A4A; --accent:#C2185B; --ok:#1C6B61;
  --warn:#8A4B00; --line:#111111; --chrome:#FFD84D; --sel:#B8FF3C; --bw:3px;
}
:root[data-theme="dracula"]{
  --bg:#282A36; --fg:#F8F8F2; --dim:#9BA3C0; --accent:#FF79C6; --ok:#50FA7B;
  --warn:#FFB86C; --line:#6272A4; --chrome:#44475A; --sel:#BD93F9; --bw:2px;
}
:root[data-theme="solarized"]{
  --bg:#002B36; --fg:#EEE8D5; --dim:#93A1A1; --accent:#EC7FB0; --ok:#859900;
  --warn:#B58900; --line:#0F4A5A; --rule:#657B83; --chrome:#073642; --sel:#2AA198; --bw:2px;
}
:root[data-theme="nord"]{
  --bg:#2E3440; --fg:#ECEFF4; --dim:#AEB8C8; --accent:#CDA8C7; --ok:#A3BE8C;
  --warn:#EBCB8B; --line:#4C566A; --rule:#79879E; --chrome:#3B4252; --sel:#88C0D0; --bw:2px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:"Plex Mono","Courier New",monospace;
  font-size:15px;line-height:1.55;
  display:flex;flex-direction:column;overflow:hidden;
  transition:background-color .18s ease,color .18s ease;
}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--sel);outline-offset:2px}
::selection{background:var(--sel);color:var(--bg)}

.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--chrome);
  color:var(--fg);padding:10px 16px;border:var(--bw) solid var(--line)}
.skip:focus{left:8px;top:8px}

/* ── chrome ─────────────────────────────────────────────────────────────── */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;padding:8px 14px;background:var(--chrome);
  border-bottom:var(--bw) solid var(--line);flex:none}
.top .title{font-family:"Archivo Black",sans-serif;font-size:14px;letter-spacing:.02em;
  display:inline-flex;align-items:center;gap:8px}
.lamps{display:inline-flex;gap:6px;margin-right:4px}
.lamp{width:12px;height:12px;border:2px solid var(--line);border-radius:50%}
.lamp.r{background:#FF5F57}.lamp.y{background:#FEBC2E}.lamp.g{background:#28C840}
.top nav{display:flex;gap:6px;flex-wrap:wrap}
.top a,.top button{font:inherit;font-size:12px;color:var(--fg);background:transparent;
  border:var(--bw) solid var(--line);padding:0 10px;min-height:34px;
  display:inline-flex;align-items:center;cursor:pointer;text-decoration:none}
.top a:hover,.top button:hover{background:var(--sel);color:var(--bg)}

/* ── panes ──────────────────────────────────────────────────────────────── */
#panes{flex:1;display:grid;gap:var(--bw);background:var(--line);min-height:0;
  grid-template-columns:1fr;grid-template-rows:1fr}
#panes[data-split="v"]{grid-template-columns:1fr 1fr}
#panes[data-split="h"]{grid-template-rows:1fr 1fr}
@media (max-width:720px){
  /* two panes side by side on a phone is unusable — always stack */
  #panes[data-split="v"]{grid-template-columns:1fr;grid-template-rows:1fr 1fr}
}
.pane{background:var(--bg);display:flex;flex-direction:column;min-height:0;min-width:0;
  overflow:hidden;position:relative}
.pane[data-active="true"]::after{content:"";position:absolute;inset:0;pointer-events:none;
  border:var(--bw) solid var(--sel)}
.out{flex:1;overflow-y:auto;padding:14px 16px 6px;overscroll-behavior:contain}
.out p,.out pre{margin:0 0 6px}
.out pre{white-space:pre-wrap;word-break:break-word;font:inherit}
.line{display:flex;gap:8px;align-items:flex-start;padding:0 16px 14px}
.ps1{color:var(--ok);flex:none;white-space:nowrap}
.entry{flex:1;min-width:0;min-height:28px;background:transparent;border:0;color:var(--fg);
  font:inherit;padding:0;outline:none;caret-color:var(--accent)}
.entry::placeholder{color:var(--dim)}

/* output vocabulary */
.k{color:var(--accent)}         /* keys, command names          */
.v{color:var(--fg)}             /* values                        */
.d{color:var(--dim)}            /* de-emphasised / hints         */
.g{color:var(--ok)}             /* success, prompts              */
.w{color:var(--warn)}           /* warnings, unknown command     */
.rule{color:var(--rule,var(--line));user-select:none}
.echo{color:var(--dim)}
.kbd{border:1px solid var(--line);padding:0 5px;font-size:12px}

/* ── snake ──────────────────────────────────────────────────────────────── */
.game{padding:10px 16px 16px}
.game canvas{border:var(--bw) solid var(--line);background:var(--chrome);
  image-rendering:pixelated;max-width:100%;height:auto;touch-action:none}
.game .hud{display:flex;gap:14px;flex-wrap:wrap;margin:0 0 8px;font-size:13px}

@media (pointer:coarse){.entry{min-height:44px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media (max-width:560px){body{font-size:14px}.top .title{font-size:12px}}