/* terminal.css — danlacher.com
 * Two phosphors: green (default, light-on-dark) and amber (inverted:
 * near-black on amber). Optional CRT overlay. 80 columns, centered.
 */

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/IBMPlexMono-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/IBMPlexMono-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/IBMPlexMono-Italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}

:root {
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  --cols: 80ch;
  --fs: 15px;
  --lh: 1.45;
}

/* green phosphor: #33ff66 on #0b0f0c → contrast ≈ 14:1; dim #22b347 ≈ 7.6:1 */
:root, :root[data-theme="green"] {
  --bg: #0b0f0c;
  --bg-raised: #111812;
  --fg: #33ff66;
  --fg-dim: #22b347;
  --fg-bright: #c8ffd6;
  --accent: #ffd866;      /* dirs */
  --link: #7fd7ff;        /* external */
  --err: #ff6b6b;
  --sel: rgba(51, 255, 102, 0.25);
  --rule: #1f3a26;
  --glow: 0 0 2px rgba(51,255,102,0.35);
  color-scheme: dark;
}

/* amber phosphor (P3): #ffb000 on #140d02 → contrast ≈ 10:1; dim #b37a00 ≈ 5.1:1 */
:root[data-theme="amber"] {
  --bg: #140d02;
  --bg-raised: #1f1504;
  --fg: #ffb000;
  --fg-dim: #b37a00;
  --fg-bright: #ffd98a;
  --accent: #ffd166;      /* dirs */
  --link: #ffe3a3;        /* external */
  --err: #ff7a5c;
  --sel: rgba(255, 176, 0, 0.25);
  --rule: #3d2a00;
  --glow: 0 0 2px rgba(255, 176, 0, 0.4);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: var(--fs);
  line-height: var(--lh);
  text-shadow: var(--glow);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--sel); }

a { color: inherit; text-decoration: none; }
a.dir { color: var(--accent); font-weight: 700; }
a.dir::after { content: '/'; font-weight: 400; color: var(--fg-dim); }
a.file { color: var(--fg); text-decoration: underline; text-decoration-color: var(--fg-dim); text-underline-offset: 2px; }
a.ext { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
a:hover, a:focus-visible { background: var(--sel); outline: none; }

#term {
  max-width: var(--cols);
  margin: 0 auto;
  padding: 1rem 1rem 6rem;
  min-height: 100%;
  cursor: text;
}

#out { white-space: normal; word-wrap: break-word; overflow-wrap: anywhere; }
#out pre, .echo { white-space: pre-wrap; margin: 0; font: inherit; }
#out .block { margin: 0 0 0.25rem; }
.echo .ps1 { color: var(--fg-dim); }
.echo .ps1 b { color: var(--fg); font-weight: 700; }
.err { color: var(--err); }
.dim { color: var(--fg-dim); }
.bright { color: var(--fg-bright); }
.blank { height: calc(1em * var(--lh)); }

/* ls columns */
.ls {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--colw, 16ch), max-content));
  column-gap: 2ch;
}
#out pre.ls-l { white-space: pre; overflow-x: auto; }
.ls-l a { white-space: pre; }

/* prompt line */
#prompt { display: flex; flex-wrap: wrap; position: relative; align-items: baseline; }
#prompt .ps1 { white-space: pre; color: var(--fg-dim); }
#prompt .ps1 b { color: var(--fg); }
#mirror { white-space: pre-wrap; word-break: break-all; min-height: 1em; }
#cursor {
  display: inline-block;
  width: 1ch; height: 1.1em;
  background: var(--fg);
  vertical-align: text-bottom;
  animation: blink 1.1s steps(1) infinite;
}
#cursor.off { animation: none; opacity: 0.4; }
@keyframes blink { 50% { opacity: 0; } }
#cmd {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  opacity: 0; border: 0; padding: 0; margin: 0;
  font: inherit; color: transparent; background: transparent; caret-color: transparent;
  outline: none;
}
#cmd:focus + #mirror + #cursor { }

/* markdown */
.md { max-width: 100%; }
.md h1, .md h2, .md h3, .md h4 { margin: 0.6em 0 0.3em; color: var(--fg-bright); font-size: 1em; }
.md h1::before { content: '# '; color: var(--fg-dim); }
.md h2::before { content: '## '; color: var(--fg-dim); }
.md h3::before { content: '### '; color: var(--fg-dim); }
.md p { margin: 0 0 0.75em; }
.md ul, .md ol { margin: 0 0 0.75em; padding-left: 2.5ch; }
.md li { margin: 0.1em 0; }
.md code { background: var(--bg-raised); padding: 0 0.3ch; border-radius: 2px; }
.md pre { background: var(--bg-raised); padding: 0.5em 1ch; overflow-x: auto; border-left: 2px solid var(--rule); }
.md pre code { background: none; padding: 0; }
.md blockquote { margin: 0 0 0.75em; padding-left: 1.5ch; border-left: 2px solid var(--fg-dim); color: var(--fg-dim); }
.md hr { border: 0; border-top: 1px dashed var(--rule); margin: 1em 0; }
.md strong { color: var(--fg-bright); }

table { border-collapse: collapse; margin: 0.25em 0 0.75em; }
th, td { text-align: left; padding: 0.1em 1.5ch 0.1em 0; vertical-align: top; }
th { color: var(--fg-bright); border-bottom: 1px solid var(--fg-dim); }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:hover { background: var(--sel); }
.tablewrap { overflow-x: auto; max-width: 100%; }

/* image viewer */
figure.viewer { margin: 0.75em 0; border: 1px solid var(--fg-dim); padding: 0; max-width: 100%; display: inline-block; }
figure.viewer .viewer-bar { color: var(--fg-dim); padding: 0 1ch; border-bottom: 1px solid var(--rule); white-space: pre; overflow: hidden; }
figure.viewer img { display: block; max-width: 100%; height: auto; padding: 0.5em; }
figure.viewer figcaption { color: var(--fg-dim); padding: 0 1ch 0.2em; border-top: 1px solid var(--rule); }
figure.viewer figcaption::before { content: '└─ '; }

/* columnar plain text: keep columns, scroll sideways on narrow screens */
#out pre.fixed { white-space: pre; overflow-x: auto; }

/* man pages — structured so they reflow; indent mimics troff output */
.man { --man-indent: 7ch; }
.man .man-head { display: flex; justify-content: space-between; gap: 1ch; color: var(--fg-dim); margin-bottom: 0.5em; }
.man .man-head b { color: var(--fg-bright); }
.man h2 { font-size: 1em; margin: 0.75em 0 0.15em; color: var(--fg-bright); letter-spacing: 0.02em; }
.man p { margin: 0 0 0.6em var(--man-indent); }
.man dl { margin: 0 0 0.6em var(--man-indent); }
.man dt { margin-top: 0.15em; }
.man dd { margin: 0 0 0.3em var(--man-indent); }
.man b { color: var(--fg-bright); }
.man i { font-style: italic; }
.man a.dir, .man a.file { font-style: italic; }
.man .man-head + h2 { margin-top: 0.25em; }

/* kernel panic */
body.panic { background: #000; color: #fff; text-shadow: none; }
body.panic #prompt, body.panic #kbd { display: none; }

/* mobile keyboard summon */
#kbd {
  position: fixed; right: 1rem; bottom: 1rem;
  width: 3rem; height: 3rem; border-radius: 6px;
  border: 1px solid var(--fg-dim); background: var(--bg); color: var(--fg);
  font: inherit; font-size: 1.3em; cursor: pointer;
  display: none; align-items: center; justify-content: center;
}
#kbd:focus-visible { outline: 2px solid var(--fg); }
@media (pointer: coarse) { #kbd { display: flex; } }

@media (max-width: 640px) {
  :root { --fs: 14px; }
  #term { padding: 0.75rem 0.75rem 6rem; }
  .ls { grid-template-columns: 1fr; }
  .ls-l, #out pre.fixed { font-size: 0.85em; }
  .man { --man-indent: 2ch; }
  .man .man-head span { display: none; }   /* drop the center title; keep the DAN(1) corners */
}

/* CRT overlay — off by default, `theme crt` or Konami */
:root[data-crt="1"] body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 10;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,0.18) 3px, rgba(0,0,0,0) 4px);
  mix-blend-mode: multiply;
}
:root[data-crt="1"] body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 11;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 60%, rgba(0,0,0,0.35) 100%);
}
:root[data-crt="1"] body { text-shadow: 0 0 3px currentColor; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  #cursor { animation: none; }
  * { transition: none !important; }
}