/* ============================================================
   chris-builds — MS-DOS terminal
   Black screen · VGA pixel type · amber prompt · CRT glow
   Type: VT323
   ============================================================ */

:root {
  --bg:      #060806;       /* screen black, faint green tint */
  --fg:      #d2cbb2;       /* warm VGA light-gray */
  --dim:     #82806a;       /* secondary text */
  --hot:     #ffffff;       /* bright emphasis */
  --amber:   #ffc24d;       /* prompt + accents */
  --green:   #5fe07a;       /* "available" / go */
  --blue:    #0000aa;       /* DOS status bar */
  --blue-fg: #f5f5f5;
  --mono: "VT323", ui-monospace, "Courier New", monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html { scroll-behavior: auto; } }

body {
  font-family: var(--mono);
  background: var(--bg);
  color: var(--fg);
  font-size: clamp(19px, 2.6vw, 23px);
  line-height: 1.35;
  min-height: 100vh;
  letter-spacing: 0.01em;
  /* soft screen vignette */
  background-image: radial-gradient(120% 120% at 50% 40%, transparent 55%, rgba(0,0,0,0.6) 100%);
  text-shadow: 0 0 1px rgba(255, 200, 120, 0.18);
  overflow-x: hidden;
}

/* CRT scanlines + faint flicker */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 9999;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0.16) 0px,
    rgba(0,0,0,0.16) 1px,
    transparent 1px,
    transparent 3px
  );
  animation: flicker 6s steps(60) infinite;
}
@keyframes flicker { 0%,100%{opacity:.55} 48%{opacity:.6} 50%{opacity:.42} 52%{opacity:.6} }
@media (prefers-reduced-motion: reduce){ body::after { animation: none; } }

::selection { background: var(--amber); color: #000; text-shadow: none; }
a { color: var(--amber); text-decoration: none; }
a:hover { color: var(--hot); text-decoration: underline; }

/* ---------------- top: title bar + menu bar ---------------- */
.topbar { position: sticky; top: 0; z-index: 50; }

.status {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  background: var(--blue); color: var(--blue-fg);
  padding: 4px clamp(12px, 3vw, 26px);
  font-size: clamp(16px, 2.2vw, 20px);
  letter-spacing: 0.04em;
  text-shadow: none;
  border-bottom: 2px solid #000;
}
.status .left { font-weight: 400; }
.status .left .blk { color: #ffd877; }
.status .right { color: #d7d7ff; }

/* classic DOS menu bar: hotkey letters + inverse-video on hover */
.menubar {
  display: flex; flex-wrap: wrap; align-items: center;
  background: var(--bg);
  border-bottom: 2px solid var(--amber);
  padding: 1px clamp(6px, 2.5vw, 16px);
  font-size: clamp(16px, 2.2vw, 20px);
}
.menubar a {
  color: var(--fg);
  text-decoration: none;
  padding: 3px 1.3ch;
  letter-spacing: 0.03em;
  text-shadow: none;
}
.menubar a .hk { color: var(--amber); }
.menubar a:hover,
.menubar a:focus-visible {
  background: var(--amber); color: #000; outline: none; text-decoration: none;
}
.menubar a:hover .hk,
.menubar a:focus-visible .hk { color: #000; }

/* offset anchor jumps for the sticky header */
.term [id], #top { scroll-margin-top: 88px; }

/* ---------------- terminal session ---------------- */
.term {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(22px, 5vw, 54px) clamp(16px, 4vw, 30px) 120px;
}

.boot { color: var(--dim); margin-bottom: 1.6em; }
.boot p { line-height: 1.25; }
.boot .hl { color: var(--green); }

.block { margin-bottom: 1.9em; }

.cmd {
  color: var(--hot);
  font-size: 1.08em;
  margin-bottom: 0.35em;
  word-break: break-word;
}
.prompt { color: var(--amber); font-weight: 400; }
.prompt-arg { color: var(--hot); }

.out { padding-left: 1.4ch; max-width: 60ch; }
.out p { margin-bottom: 0.5em; }
.out p:last-child { margin-bottom: 0; }
.out .em { color: var(--hot); }
.out .amber { color: var(--amber); }

/* ---------------- DOS box (double border w/ title notch) ---------------- */
.box {
  position: relative;
  border: 3px double var(--amber);
  padding: 1.1em 1.2ch 0.9em;
  margin: 0.4em 0;
  max-width: 52ch;
}
.box-title {
  position: absolute;
  top: -0.72em; left: 1.4ch;
  background: var(--bg);
  padding: 0 0.6ch;
  color: var(--amber);
  font-size: 0.95em;
  letter-spacing: 0.05em;
}

.dir { list-style: none; }
.dir li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 1ch 2ch;
  align-items: baseline;
  padding: 0.12em 0;
}
.dir .fn { color: var(--hot); }
.dir .ft { color: var(--dim); }
.dir .fs { color: var(--dim); text-align: right; }
.dir .fs.avail { color: var(--green); }
.dir a.fn:hover { color: var(--amber); }
.dir-foot { color: var(--dim); margin-top: 0.7em; border-top: 1px dashed var(--dim); padding-top: 0.5em; }

/* ---------------- blinking cursor ---------------- */
.live { color: var(--amber); }
.cursor {
  display: inline-block;
  width: 0.62ch; height: 1.05em;
  background: var(--amber);
  vertical-align: -0.18em;
  margin-left: 0.3ch;
  box-shadow: 0 0 6px rgba(255,194,77,0.7);
  animation: blink 1.05s steps(1) infinite;
}
@keyframes blink { 0%,49%{opacity:1} 50%,100%{opacity:0} }
@media (prefers-reduced-motion: reduce){ .cursor { animation: none; } }

/* ---------------- staggered "print out" reveal ---------------- */
@keyframes print { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.boot, .block, .live { animation: print 0.5s ease-out both; animation-delay: var(--d, 0s); }
@media (prefers-reduced-motion: reduce){ .boot, .block, .live { animation: none; } }

@media (max-width: 480px){
  .dir li { grid-template-columns: 1fr auto; }
  .dir .ft { display: none; }
}

/* ---------------- live interactive prompt ---------------- */
.output { margin: 0; }
.output .echo { color: var(--hot); margin-top: 0.15em; word-break: break-word; }
.output .echo .prompt { color: var(--amber); }
.resp { padding-left: 1.4ch; max-width: 62ch; color: var(--fg); word-break: break-word; }
.resp.amber { color: var(--amber); }
.resp.em    { color: var(--hot); }
.resp.ok    { color: var(--green); }
.resp.dim   { color: var(--dim); }
.resp.pre   { white-space: pre; overflow-x: auto; }
.resp .amber{ color: var(--amber); }
.spacer { height: 0.55em; }

.prompt-line {
  display: flex; align-items: baseline; gap: 0.6ch;
  font-size: 1.08em; color: var(--hot);
  cursor: text;
  margin-top: 0.15em;
  flex-wrap: wrap;
}
.input-wrap { position: relative; display: inline-flex; align-items: baseline; min-width: 1ch; }
.cmd-input {
  font: inherit; letter-spacing: inherit;
  color: var(--hot); background: transparent; border: none; outline: none;
  caret-color: transparent;
  padding: 0; margin: 0;
  width: 2px; min-width: 2px;
  text-shadow: inherit;
}
.cmd-input::placeholder { color: var(--dim); opacity: 1; }
.mirror {
  position: absolute; left: 0; top: 0;
  visibility: hidden; pointer-events: none;
  white-space: pre; font: inherit; letter-spacing: inherit;
}
.prompt-line .cursor { margin-left: 0.05ch; }