/* ==========================================================================
   TERMINAL — exhibition room. Loaded on a/terminal.html only.

   TIER 2 ART DIRECTION, all of it: one sequential stream, no cards, no
   columns, no grid. Monospace for everything including headings and in-page
   navigation — the record's own signature — supplied by the READER'S machine
   (the record names a class, never a face). One phosphor-derived hue and its
   dims on near-black; the restriction is the palette behaviour the record
   describes. The record (renderTerminalRecord) is the same session still
   running: every block a command and its output, down to a live prompt.

   Contrast: the record lists accessibility among the costs the language
   ACCEPTS; the museum does not. Every text tone here clears 4.5:1 on the
   ground it sits on: bright #53E08C 11.5:1, mid #3DBA72 7.6:1, dim #2E9B5E
   5.2:1 on #060A07.
   ========================================================================== */

.tm-page {
  --tm-bg: #060A07;
  --tm-bg-2: #0A120C;
  --tm-ph: #53E08C;      /* phosphor */
  --tm-ph-mid: #3DBA72;
  --tm-ph-dim: #2E9B5E;
  --tm-line: #16321F;
  --tm-mono: ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  background: var(--paper); /* shell mat; the room ground lives on main */
}

/* The room. Everything inside <main>; the shell above and below stays house. */
.tm-page main {
  background:
    /* faint scanlines — surface memory of the tube, static, decorative */
    repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 3px),
    var(--tm-bg);
  color: var(--tm-ph);
  font-family: var(--tm-mono);
}
.tm-page main .wrap { max-width: 72rem; }

.tm { padding: clamp(1.5rem, 4vw, 3.5rem) 0 0; }

/* ---- the stream --------------------------------------------------------- */
.tm-banner {
  margin: 0 0 1.4rem;
  color: var(--tm-ph-dim);
  font: 400 0.78rem/1.6 var(--tm-mono);
  white-space: pre-wrap;
  border: 1px solid var(--tm-line);
  padding: 0.75rem 0.9rem;
  max-width: 46rem;
}
.tm-cmd { margin: 1.9rem 0 0.5rem; font-size: 0.92rem; color: var(--tm-ph-mid); overflow-wrap: anywhere; }
.tm-user { color: var(--tm-ph-mid); }
.tm-path { color: var(--tm-ph-dim); }
.tm-sig { color: var(--tm-ph); padding-inline: 0.35em 0; }
.tm-c { color: var(--tm-ph); }

.tm-h1 {
  margin: 0.4rem 0 0.8rem;
  font: 700 clamp(2.6rem, 8vw, 6.5rem)/0.95 var(--tm-mono);
  letter-spacing: 0.02em;
  color: var(--tm-ph);
  /* no glow: the record calls bloom the later imitation, not the screen */
}
.tm-cursor {
  display: inline-block;
  width: 0.55em; height: 0.85em;
  margin-inline-start: 0.12em;
  background: var(--tm-ph);
  animation: tm-blink 1.1s steps(1) infinite;
  vertical-align: baseline;
}
@media (prefers-reduced-motion: reduce) { .tm-cursor { animation: none; } }
@keyframes tm-blink { 50% { opacity: 0; } }

.tm-lede { margin: 0 0 0.75rem; font-size: 1.02rem; line-height: 1.65; max-width: 58ch; color: var(--tm-ph); }
.tm-note { margin: 0; color: var(--tm-ph-dim); font-size: 0.82rem; line-height: 1.6; max-width: 58ch; }

.tm-menu { margin-top: 1.6rem; }
.tm-menu ul { list-style: none; margin: 0.3rem 0 0; padding: 0; }
.tm-menu li { margin: 0; font-size: 0.92rem; }
.tm-menu a { display: inline-flex; align-items: center; min-height: 44px; color: var(--tm-ph); text-decoration-color: var(--tm-ph-dim); text-underline-offset: 3px; }
.tm-menu a:hover { background: var(--tm-ph); color: var(--tm-bg); text-decoration: none; }

.tm-sec { margin-top: 1.2rem; }
.tm-h2 { margin: 0 0 0.9rem; font: 700 1.05rem/1.4 var(--tm-mono); letter-spacing: 0.04em; color: var(--tm-ph); }
.tm-h3 { margin: 1.4rem 0 0.5rem; font: 700 0.88rem/1.4 var(--tm-mono); color: var(--tm-ph-mid); letter-spacing: 0.04em; }
.tm-out { margin: 0 0 0.55rem; font-size: 0.92rem; line-height: 1.7; max-width: 74ch; color: var(--tm-ph); }
.tm-out b, .tm-out em { color: inherit; font-style: normal; font-weight: 700; }
.tm-out a { color: inherit; text-underline-offset: 3px; }
.tm-claim { font-size: 1.05rem; }
.tm-dim { color: var(--tm-ph-dim); }
.tm-key { display: inline-block; min-width: 11ch; color: var(--tm-ph-dim); }
.tm-kv { border-inline-start: 1px solid var(--tm-line); padding-inline-start: 0.9rem; margin: 0.75rem 0; }

/* ---- the diff demo ------------------------------------------------------ */
.tm-diff { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.2rem; margin: 1.2rem 0 0; max-width: 60rem; }
.tm-diff__item { margin: 0; }
.tm-diff__frame {
  border: 1px solid var(--tm-line);
  background: var(--tm-bg-2);
  padding: 1rem;
  min-height: 12.5rem;
  display: flex; flex-direction: column; gap: 0.55rem;
  font: 400 0.8rem/1.5 var(--tm-mono);
}
.tm-diff__frame b { font-weight: 400; color: var(--tm-ph); }
.tm-diff__frame--doc { justify-content: center; gap: 0.9rem; padding: 1.6rem; }
.tmd-t { font-size: 1.25rem; font-weight: 700 !important; }
.tmd-p { color: var(--tm-ph-mid) !important; max-width: 34ch; }
.tmd-link { text-decoration: underline; text-underline-offset: 3px; }
.tmd-c { color: var(--tm-ph-mid) !important; }
.tmd-cur { display: inline-block; width: 0.5em; height: 0.9em; background: var(--tm-ph); vertical-align: text-bottom; }
.tm-diff__verdict { margin: 0.75rem 0 0.2rem; font-size: 0.75rem; letter-spacing: 0.06em; color: var(--tm-ph-dim); }
.tm-diff__verdict[data-verdict="this"] { color: var(--tm-ph); }
.tm-diff__why { margin: 0; font-size: 0.8rem; line-height: 1.6; color: var(--tm-ph-mid); max-width: 40ch; }

/* ---- the live prompt ---------------------------------------------------- */
.tm-live { border: 1px solid var(--tm-line); background: var(--tm-bg-2); padding: 0.9rem 1rem; max-width: 60rem; }
.tm-live__scroll { max-height: 20rem; overflow-y: auto; }
.tm-live__scroll p { margin: 0 0 0.45rem; font-size: 0.9rem; line-height: 1.6; color: var(--tm-ph); overflow-wrap: anywhere; }
.tm-live__scroll .tm-echo { color: var(--tm-ph-mid); }
.tm-live__scroll .tm-err { color: var(--tm-ph-dim); }
.tm-cmd--input { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.4ch; margin: 0.3rem 0 0; }
.tm-cmd--input > span { flex: none; white-space: nowrap; }
.tm-in {
  flex: 1 1 auto; min-width: 8rem; min-height: 44px;
  background: transparent; border: 0; outline: none;
  color: var(--tm-ph); font: inherit; caret-color: var(--tm-ph);
}
.tm-in::placeholder { color: var(--tm-ph-dim); opacity: 1; }
.tm-in:focus-visible { box-shadow: 0 2px 0 var(--tm-ph); }

/* ---- the record: the session keeps running ----------------------------- */
/* reveal.js fades sections in; the record is readable without it. */
.tm-page main > section.tm-rec { opacity: 1; transform: none; transition: none; will-change: auto; }
.tm-rec { padding: 0 0 clamp(3rem, 7vw, 6rem); }
.tm-rec__w { max-width: 60rem; }
.tm-rsec { margin-top: 1.6rem; }
.tm-dl { margin: 0.75rem 0 0; }
.tm-row { display: grid; grid-template-columns: 22ch minmax(0, 1fr); column-gap: 2ch; margin: 0 0 0.35rem; }
.tm-row dt { color: var(--tm-ph-dim); }
.tm-row dd { margin: 0; }
.tm-row dd b { font-weight: 700; }
.tm-kind { color: var(--tm-ph-dim); }
.tm-ev { color: var(--tm-ph-mid); }
.tm-n { color: var(--tm-ph-mid); font-weight: 400; }
.tm-rule { margin-bottom: 0.9rem; }

/* links in the record are commands you can run: full-height targets,
   inverse video on hover, the way a selected line looks on a tube */
.tm-tap {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--tm-ph);
  text-decoration: underline; text-decoration-color: var(--tm-ph-dim); text-underline-offset: 3px;
}
.tm-tap:hover { background: var(--tm-ph); color: var(--tm-bg); text-decoration: none; }
.tm-tap:focus-visible, .tm-menu a:focus-visible { outline: 2px solid var(--tm-ph); outline-offset: 2px; }

.tm-dims { list-style: none; margin: 0.5rem 0 0; padding: 0 0 0 0.9rem; border-inline-start: 1px solid var(--tm-line); }
.tm-dimrow { display: grid; grid-template-columns: 26ch minmax(0, 1fr); column-gap: 2ch; margin: 0; padding: 0.1rem 0; border-bottom: 1px solid var(--tm-line); }
.tm-dimrow:last-child { border-bottom: 0; }
.tm-dimrow p { margin: 0; }
.tm-dimrow__k { display: flex; flex-wrap: wrap; align-items: center; }
.tm-dimrow__v { align-self: center; padding: 0.35rem 0; }
.tm-dimrow__v > p + p { margin-top: 0.25rem; }
.tm-flag { display: inline-block; margin-inline-start: 1ch; padding: 0 0.6ch; background: var(--tm-ph); color: var(--tm-bg); font-size: 0.78rem; line-height: 1.5; }
.tm-links { display: flex; flex-wrap: wrap; column-gap: 2ch; }
.tm-pal { display: flex; flex-wrap: wrap; gap: 0.3rem 2.5ch; }
.tm-swatch { display: inline-flex; align-items: center; gap: 1ch; }
.tm-swatch i { display: inline-block; width: 1.8em; height: 1.05em; border: 1px solid var(--tm-ph-dim); }

.tm-warn { margin-top: 1rem; border-inline-start: 2px solid var(--tm-ph); padding-inline-start: 0.9rem; }

.tm-tblw { max-width: 100%; overflow-x: auto; margin: 0.75rem 0; }
.tm-tblw:focus-visible { outline: 2px solid var(--tm-ph); outline-offset: 2px; }
.tm-tbl { border-collapse: collapse; font-size: 0.88rem; }
.tm-tbl th, .tm-tbl td { text-align: left; padding: 0.3rem 2ch 0.3rem 0; border-bottom: 1px solid var(--tm-line); font-weight: 400; }
.tm-tbl thead th { color: var(--tm-ph-dim); }

.tm-list { list-style: none; margin: 0.5rem 0 0; padding: 0 0 0 0.9rem; border-inline-start: 1px solid var(--tm-line); }
.tm-list li { margin: 0 0 0.35rem; }
.tm-list .tm-row { grid-template-columns: 26ch minmax(0, 1fr); align-items: start; }
.tm-nb, .tm-nb__t { margin: 0; }
.tm-nb { display: flex; flex-wrap: wrap; align-items: center; column-gap: 1ch; }
.tm-nb__t { padding-top: 0.6rem; }
.tm-nb__t em { font-style: italic; }

.tm-sec--live { margin-top: 2.4rem; }

/* ---- responsive --------------------------------------------------------- */
@media (max-width: 48rem) {
  .tm-key { min-width: 0; display: block; margin-bottom: 0.05rem; }
  .tm-h1 { overflow-wrap: anywhere; }
  .tm-row, .tm-dimrow, .tm-list .tm-row { grid-template-columns: minmax(0, 1fr); }
  .tm-nb__t { padding-top: 0; }
  .tm-row dd { margin-bottom: 0.2rem; }
  .tm-flag { margin-inline-start: 0; }
}

/* ---- read vt100 (Design Completion Campaign, 2026-09-29): the screen's own
   rendition attributes, a double-width line, the line-drawing set. One hue:
   bold is brightness, as many terminals drew it. ---- */
.tm-flag--lead { margin-inline: 0 1ch; }
.tm-vt-attrs { display: flex; flex-wrap: wrap; gap: 0.4rem 2ch; color: var(--tm-ph-mid); }
.tm-vt-bold { font-weight: 400; color: #8CFFB6; } /* 14.5:1 */
.tm-vt-u { text-decoration: underline; text-underline-offset: 0.2em; color: var(--tm-ph); }
.tm-vt-rev { background: var(--tm-ph); color: var(--tm-bg); padding-inline: 0.5ch; }
.tm-vt-blink { color: var(--tm-ph); }
@media (prefers-reduced-motion: no-preference) {
  .tm-vt-blink { animation: tm-blink 1s steps(1) 4; } /* four beats, then steady */
}
.tm-vt-dw {
  display: inline-block; margin: 0.2rem 0; transform: scaleX(2); transform-origin: left center;
  letter-spacing: 0; color: var(--tm-ph); font-size: 1rem;
}
.tm-vt-form {
  margin: 0.4rem 0; padding: 0; overflow-x: auto; max-width: 100%;
  font: 400 0.9rem/1.25 var(--tm-mono); color: var(--tm-ph); white-space: pre;
}
@media (max-width: 30rem) { .tm-vt-form { font-size: 0.72rem; } .tm-vt-dw { font-size: 0.85rem; } }