/* CVLX-NET teletext frame. Tokens live in tokens.css; this file never adds a hex
   that is not derived from them, except pure black/white ink on colour keys. */

*, *::before, *::after { box-sizing: border-box; }

:root {
  /* rem, not px, so a larger browser default font size carries through. */
  --tt-fs: clamp(0.9375rem, 0.9vw + 0.6875rem, 1.375rem);
  --tt-gap: 16px;
  color-scheme: dark;
}

html {
  background: var(--cvl-bg);
  color: var(--cvl-ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--cvl-mono);
  font-size: var(--tt-fs);
  line-height: 1.45;
  background-color: var(--cvl-bg);
  background-image:
    linear-gradient(to right, var(--cvl-grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--cvl-grid-line) 1px, transparent 1px);
  background-size: var(--cvl-grid-step) var(--cvl-grid-step);
  overflow-x: hidden;
}

/* ---------- helpers ---------- */
.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.vh-focus:focus {
  position: static !important;
  width: auto; height: auto;
  margin: 0 0 0 1ch;
  clip: auto; clip-path: none;
}
/* The header's Go key, once it is shown on focus, is a lime key like the rest. */
.pin .vh-focus:focus {
  min-width: 24px;
  min-height: 24px;
  padding: 0 0.8ch;
  font: 600 0.8em/1 var(--cvl-mono);
  letter-spacing: 0.08em;
  color: #000;
  background: var(--cvl-lime);
  border: 0;
  border-radius: 0;
}
[hidden] { display: none !important; }

.skip {
  position: absolute;
  left: 8px; top: -100px;
  z-index: 100;
  background: var(--cvl-lime);
  color: #000;
  padding: 0.5em 1ch;
  font-weight: 600;
  text-decoration: none;
}
.skip:focus { top: 8px; }

:focus-visible {
  outline: 3px solid var(--cvl-lime);
  outline-offset: 2px;
}

a { color: var(--cvl-lime); }
p a, li p a { text-decoration: underline; text-underline-offset: 0.2em; }

code, kbd { font: inherit; }
code { color: var(--cvl-lime); }
kbd {
  border: 1px solid var(--cvl-border-control);
  background: var(--cvl-surface);
  padding: 0 0.4ch;
}

/* ---------- the set and the screen ---------- */
.tv {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

.screen {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0.6em var(--tt-gap) 0.8em;
  background:
    radial-gradient(ellipse at 50% 38%, rgba(146, 250, 17, 0.045), transparent 68%),
    var(--cvl-bg);
  text-shadow: var(--cvl-text-glow-ink);
}

.tv-badge { display: none; }

@media (min-width: 760px) {
  /* On a desk the set grows with the window (about 18px at 760 wide, 25px at
     1920, 29px at 2560), but never so tall a short window loses the page. */
  :root { --tt-fs: clamp(1.0625rem, min(0.586vw + 0.875rem, 1.9vh + 0.4375rem), 1.875rem); }
  body { padding: 4vh 2rem 6vh; }
  .tv {
    width: fit-content;
    max-width: 100%;
    padding: 20px 20px 40px;
    background: linear-gradient(180deg, #1A1D16 0%, var(--cvl-surface) 55%, #050604 100%);
    border: 2px solid;
    border-color: var(--cvl-border-control) var(--cvl-border) var(--cvl-border) var(--cvl-border-control);
    box-shadow: 0 0 0 1px #000, 0 40px 90px rgba(0, 0, 0, 0.85);
  }
  .screen {
    width: calc(46ch + 2 * var(--tt-gap));
    max-width: 100%;
    min-height: calc(100vh - 10vh - 66px);
    min-height: calc(100dvh - 10vh - 66px);
    border: 1px solid #000;
    box-shadow:
      inset 0 0 70px rgba(0, 0, 0, 0.95),
      inset 0 0 3px rgba(146, 250, 17, 0.25);
  }
  .tv-badge {
    display: flex;
    align-items: center;
    gap: 0.8em;
    position: absolute;
    left: 50%; bottom: 12px;
    transform: translateX(-50%);
    margin: 0;
    font: 600 11px/1 var(--cvl-mono);
    letter-spacing: 0.35em;
    color: var(--cvl-ink-dim);
    text-shadow: none;
  }
  .tv-led {
    width: 7px; height: 7px;
    background: var(--cvl-lime);
    box-shadow: var(--cvl-lime-glow);
  }
  /* Two classes: this block sits above the base .hdr-exit rule. */
  .hdr .hdr-exit { display: inline-block; }
}

/* A tall page on a desk keeps the header and the coloured keys on the glass,
   like a set: the page scrolls between them. Short windows and phones keep
   the plain flow. */
@media (min-width: 760px) and (min-height: 560px) {
  html {
    scroll-padding-top: calc(var(--tt-fs) * 5.5);
    scroll-padding-bottom: calc(var(--tt-fs) * 4.5);
  }
  .screen { padding-top: 0; }
  .top {
    position: sticky;
    top: 0;
    z-index: 2;
    margin: 0 calc(-1 * var(--tt-gap));
    padding: 0.6em var(--tt-gap) 0.2em;
    background: var(--cvl-bg);
  }
  .fastext {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin: 0 calc(-1 * var(--tt-gap));
    padding: 0.5em calc(0.5 * var(--tt-gap));
    background: var(--cvl-bg);
    box-shadow: 0 -0.8em 0.9em -0.5em #000;
  }
}

/* ---------- header row ---------- */
.hdr {
  display: flex;
  align-items: center;
  gap: 1.5ch;
  white-space: nowrap;
  min-height: 1.8em;
}
.pin { display: flex; align-items: center; }
.pin label { display: flex; }
.pin-p { color: var(--cvl-ink); }
#pin {
  width: 3.4ch;
  font: inherit;
  font-weight: 600;
  color: var(--cvl-lime);
  text-shadow: var(--cvl-text-glow-lime);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 0.15em 0;
  caret-color: var(--cvl-lime);
}
#pin:focus { border-bottom-color: var(--cvl-lime); }
#pin:focus-visible { outline-offset: 3px; }
.hdr.entering #pin { color: var(--cvl-amber); }
.svc {
  color: var(--cvl-ink);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none;
  padding: 0.15em 0;
}
.svc:hover { color: var(--cvl-lime); }
/* Way back to the main site, shown in the header on a desk (the footer has it everywhere). */
.hdr-exit {
  display: none;
  padding: 0.1em 0.6ch;
  font-size: 0.8em;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--cvl-ink-dim);
  text-decoration: none;
  text-shadow: none;
  border: 1px solid var(--cvl-border-control);
}
.hdr-exit:hover { color: #000; background: var(--cvl-lime); border-color: var(--cvl-lime); }
@media (hover: hover) {
  #pin:hover:not(:focus) { border-bottom-color: var(--cvl-lime-dim); }
  .news-pause:hover { color: var(--cvl-lime); border-color: var(--cvl-lime); }
}
a, button { touch-action: manipulation; }
.clock {
  margin-left: auto;
  color: var(--cvl-amber);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 349px) { .ck-day { display: none; } }

/* ---------- newsflash ---------- */
.news {
  display: flex;
  align-items: center;
  gap: 1ch;
  margin: 0.2em calc(-1 * var(--tt-gap)) 0;
  padding: 0.15em var(--tt-gap);
  background: var(--cvl-surface);
  border-block: 1px solid var(--cvl-border);
}
.news-tag {
  flex: none;
  background: var(--cvl-amber);
  color: #000;
  font-weight: 600;
  font-size: 0.8em;
  letter-spacing: 0.08em;
  padding: 0.1em 0.6ch;
  text-shadow: none;
}
.news-line {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: pre;
  text-overflow: clip;
  color: var(--cvl-ink);
}
.news-pause {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--cvl-border-control);
  color: var(--cvl-ink);
  cursor: pointer;
}
.news-icon {
  width: 10px; height: 10px;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}
.news-pause[aria-pressed="true"] .news-icon {
  border: 0;
  width: 0; height: 0;
  border-left: 9px solid currentColor;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

/* ---------- page body ---------- */
.page {
  flex: 1 0 auto;
  padding: 0.8em 0 1.2em;
}
.page:focus { outline: none; }
.page > :first-child { margin-top: 0.4em; }
p { margin: 0.6em 0; max-width: 46ch; }
.lede { color: var(--cvl-amber); }
.hint { color: var(--cvl-ink-dim); font-size: 0.85em; }
.dim { color: var(--cvl-ink-dim); }

.band {
  margin: 1.1em 0 0.5em;
  padding: 0.12em 0.6ch;
  font: 600 1em/1.4 var(--cvl-mono);
  letter-spacing: 0.08em;
  text-shadow: none;
}
.band-lime  { background: var(--cvl-key-lab); color: var(--cvl-key-lab-ink); }
.band-blue  { background: var(--cvl-key-lifepunch); color: var(--cvl-key-lifepunch-ink); }
.band-teal  { background: var(--cvl-key-cleverchameleon); color: var(--cvl-key-cleverchameleon-ink); }
.band-red   { background: var(--cvl-key-kinetix); color: var(--cvl-key-kinetix-ink); }
.band-amber { background: var(--cvl-amber); color: #000; }
.band-ink   { background: var(--cvl-lime-dim); color: var(--cvl-ink); }

/* Double-height title, the teletext way: the running font, one row wide and
   two rows tall. (A pixel face stretched 2x aliases against the scanlines.)
   Declared after .band and with two classes so the band's padding and
   font never override the room the scaled text needs. */
.band.dh {
  margin: 0 0 0.7em;
  padding: 0.28em 0.6ch 1.32em;
  font-family: var(--cvl-mono);
  font-weight: 600;
  font-size: 1.15em;
  line-height: 1;
  letter-spacing: 0.08em;
}
.dh > span {
  display: inline-block;
  transform: scaleY(2);
  transform-origin: 0 0;
}

/* index rows with dot leaders */
.idx { list-style: none; margin: 0.3em 0 1em; padding: 0; }
.idx a {
  display: flex;
  align-items: baseline;
  gap: 0.8ch;
  min-height: 1.75em;
  padding: 0.2em 0.6ch;
  color: var(--cvl-ink);
  text-decoration: none;
}
.idx-t { flex: 0 1 auto; }
.idx-dots {
  flex: 1 1 2ch;
  min-width: 2ch;
  border-bottom: 3px dotted var(--cvl-border-control);
  transform: translateY(-0.28em);
}
.idx-n {
  flex: none;
  color: var(--cvl-lime);
  font-weight: 600;
  text-shadow: var(--cvl-text-glow-lime);
}
.idx a:hover,
.idx a:focus-visible {
  background: var(--cvl-lime);
  color: #000;
  text-shadow: none;
}
.idx a:hover .idx-n,
.idx a:focus-visible .idx-n { color: #000; text-shadow: none; }
.idx a:hover .idx-dots,
.idx a:focus-visible .idx-dots { border-bottom-color: #000; }
.idx a:focus-visible { outline-color: var(--cvl-ink); }

.key {
  flex: none;
  width: 1.7em;
  text-align: center;
  font-weight: 600;
  text-shadow: none;
}
.key-blue { background: var(--cvl-key-lifepunch); color: var(--cvl-key-lifepunch-ink); }
.key-teal { background: var(--cvl-key-cleverchameleon); color: var(--cvl-key-cleverchameleon-ink); }
.key-red  { background: var(--cvl-key-kinetix); color: var(--cvl-key-kinetix-ink); }

/* ---------- mosaic graphics (2x3 sextant cells) ---------- */
.mos { display: block; width: 100%; line-height: 0; text-shadow: none; }
.mr { display: flex; }
.sx {
  flex: 1 1 0;
  aspect-ratio: 2 / 3;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
}
.sx b { display: block; box-shadow: 0 0 0 0.4px currentColor; }
.sx .p0 { grid-area: 1 / 1; } .sx .p1 { grid-area: 1 / 2; }
.sx .p2 { grid-area: 2 / 1; } .sx .p3 { grid-area: 2 / 2; }
.sx .p4 { grid-area: 3 / 1; } .sx .p5 { grid-area: 3 / 2; }
.k1 { background: var(--cvl-voxel-1); color: var(--cvl-voxel-1); }
.k2 { background: var(--cvl-voxel-2); color: var(--cvl-voxel-2); }
.k3 { background: var(--cvl-voxel-3); color: var(--cvl-voxel-3); }
.kL { background: var(--cvl-lime); color: var(--cvl-lime); }
.kd { background: var(--cvl-lime-dim); color: var(--cvl-lime-dim); }
.kw { background: var(--cvl-ink); color: var(--cvl-ink); }
.kb { background: var(--cvl-key-lifepunch); color: var(--cvl-key-lifepunch); }
.kt { background: var(--cvl-key-cleverchameleon); color: var(--cvl-key-cleverchameleon); }
.kr { background: var(--cvl-key-kinetix); color: var(--cvl-key-kinetix); }
.ka { background: var(--cvl-amber); color: var(--cvl-amber); }
.km { background: var(--cvl-muted); color: var(--cvl-muted); }
.mos-sep .sx { gap: 2px; }
.mos-sep .sx b { box-shadow: none; }
.mos-mark { max-width: 32ch; }
.mos-mark .kL { box-shadow: 0 0 0 0.4px currentColor, 0 0 10px rgba(146, 250, 17, 0.55); }
.mos-art { max-width: 24ch; margin: 0.4em 0 0.8em; }
.mos-snow { max-width: 100%; }

.hero { margin: 0.4em 0 0.6em; }
.hero-sub {
  margin: 0.7em 0 0;
  color: var(--cvl-lime);
  font-size: 0.8em;
  letter-spacing: 0.14em;
  text-shadow: var(--cvl-text-glow-lime);
}

/* ---------- status lamps ---------- */
.lamps { list-style: none; margin: 0.4em 0 1em; padding: 0; display: grid; gap: 0.45em; }
.lamp {
  display: grid;
  grid-template-columns: 1.1em minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.15em 1ch;
}
/* A compact lamp wraps its state under the name rather than splitting the name. */
.lamps-compact .lamp { display: flex; flex-wrap: wrap; align-items: center; }
.lamp-name { font-weight: 600; overflow-wrap: break-word; }
.lamp-state { font-weight: 600; font-size: 0.85em; letter-spacing: 0.06em; }
.lamp-when { grid-column: 2 / -1; color: var(--cvl-ink-dim); font-size: 0.78em; }
.lamp-dot {
  display: inline-block;
  width: 0.95em; height: 0.95em;
  vertical-align: -0.1em;
  background: transparent;
  border: 2px solid var(--cvl-muted);
}
.lamp-live .lamp-dot, .lamp-dot-live {
  background: var(--cvl-lime);
  border-color: var(--cvl-lime);
  box-shadow: var(--cvl-lime-glow);
  animation: lamp-pulse 2.4s steps(2, jump-none) infinite;
}
.lamp-dev .lamp-dot, .lamp-dot-dev { background: var(--cvl-amber); border-color: var(--cvl-amber); }
.lamp-live .lamp-state { color: var(--cvl-lime); }
.lamp-dev .lamp-state { color: var(--cvl-amber); }
.lamp-none .lamp-state { color: var(--cvl-ink-dim); }
@keyframes lamp-pulse { 50% { opacity: 0.55; box-shadow: none; } }

.legend { display: grid; gap: 0.35em; margin: 1em 0; font-size: 0.85em; }
.legend > div { display: grid; grid-template-columns: minmax(0, 19ch) 1fr; gap: 1ch; }
.legend dt { font-weight: 600; display: flex; gap: 1ch; align-items: center; }
.legend dd { margin: 0; color: var(--cvl-ink-dim); }

/* ---------- P200 loop ---------- */
.loop {
  list-style: none;
  margin: 0.6em 0 0.4em;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.3em 2.4ch;
}
.loop li {
  position: relative;
  display: grid;
  gap: 0.25em;
  align-content: start;
  padding: 0.5em 1ch 0.6em;
  border: 2px solid var(--cvl-lime-dim);
  background: var(--cvl-surface);
}
.loop li:nth-child(3) { grid-column: 2; grid-row: 2; }
.loop li:nth-child(4) { grid-column: 1; grid-row: 2; }
.loop li::after {
  position: absolute;
  color: var(--cvl-lime);
  text-shadow: var(--cvl-text-glow-lime);
  line-height: 1;
}
.loop li:nth-child(1)::after { content: "\25B6"; right: -1.75ch; top: 50%; transform: translateY(-50%); }
.loop li:nth-child(2)::after { content: "\25BC"; bottom: -1.2em; left: 50%; transform: translateX(-50%); }
.loop li:nth-child(3)::after { content: "\25C0"; left: -1.75ch; top: 50%; transform: translateY(-50%); }
.loop li:nth-child(4)::after { content: "\25B2"; top: -1.2em; left: 50%; transform: translateX(-50%); }
.loop-n {
  justify-self: start;
  min-width: 1.6em;
  text-align: center;
  background: var(--cvl-lime);
  color: #000;
  font-weight: 600;
  text-shadow: none;
}
.loop-t { font-weight: 600; color: var(--cvl-lime); letter-spacing: 0.04em; overflow-wrap: anywhere; }
.loop-d { color: var(--cvl-ink-dim); font-size: 0.82em; line-height: 1.35; }
.gate-note { color: var(--cvl-ink); }
.gate-mark { color: var(--cvl-amber); }

/* ---------- P210 rules ---------- */
.rule { border-left: 4px solid var(--cvl-lime); padding: 0.15em 0 0.15em 1.5ch; margin: 1.1em 0; }
.rule-h { margin: 0 0 0.3em; font: 600 1em/1.35 var(--cvl-mono); color: var(--cvl-lime); letter-spacing: 0.06em; text-shadow: var(--cvl-text-glow-lime); }
.rule-n { background: var(--cvl-lime); color: #000; padding: 0 0.4ch; margin-right: 0.6ch; text-shadow: none; }
.rule p { margin: 0; }

/* ---------- branch facts ---------- */
.facts { display: grid; gap: 0.5em; margin: 1em 0; }
.facts > div { display: grid; grid-template-columns: 11ch minmax(0, 1fr); gap: 1ch; align-items: baseline; }
.facts dt { color: var(--cvl-ink-dim); letter-spacing: 0.06em; font-size: 0.85em; }
.facts dd { margin: 0; }
.facts .lamps { margin: 0; }
.swatch { display: inline-block; width: 1em; height: 1em; vertical-align: -0.12em; margin-right: 0.8ch; }
.swatch-lime { background: var(--cvl-key-lab); }
.swatch-blue { background: var(--cvl-key-lifepunch); }
.swatch-teal { background: var(--cvl-key-cleverchameleon); }
.swatch-red { background: var(--cvl-key-kinetix); }

/* ---------- P400 ledger ---------- */
.ledger { list-style: none; margin: 0.6em 0; padding: 0; }
.ledger li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 0.2em 2ch;
  padding: 0.7em 0;
  border-bottom: 1px dashed var(--cvl-border-control);
}
.led-o { justify-self: start; background: var(--cvl-amber); color: #000; padding: 0 0.5ch; font-weight: 600; text-shadow: none; }
.led-d { color: var(--cvl-amber); }
.led-t { grid-column: 1 / -1; }

/* ---------- P600 sysop log ---------- */
.syslog { list-style: none; margin: 0.6em 0; padding: 0; display: grid; gap: 0.9em; }
.syslog li { border-left: 3px solid var(--cvl-lime-dim); padding: 0.15em 0 0.15em 1.5ch; }
.sl-h { color: var(--cvl-lime); font-weight: 600; }
.sl-meta { color: var(--cvl-ink-dim); font-size: 0.78em; }
.sl-b { margin: 0.25em 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- forms ---------- */
.tform { display: grid; gap: 1em; margin: 0.6em 0 1em; max-width: 46ch; }
.field { display: grid; gap: 0.3em; position: relative; }
.field label { color: var(--cvl-lime); font-weight: 600; letter-spacing: 0.06em; font-size: 0.9em; }
.opt { color: var(--cvl-ink-dim); font-weight: 400; letter-spacing: 0; }
.count { position: absolute; right: 0; top: 0.1em; color: var(--cvl-ink-dim); font-size: 0.78em; }
input:not(#pin), textarea, select {
  width: 100%;
  font: inherit;
  color: var(--cvl-ink);
  background: var(--cvl-bg);
  border: 2px solid var(--cvl-border-control);
  border-radius: 0;
  padding: 0.45em 0.8ch;
  caret-color: var(--cvl-lime);
  text-shadow: none;
}
textarea { resize: vertical; min-height: 6em; }
select { cursor: pointer; }
input:not(#pin):focus, textarea:focus, select:focus { border-color: var(--cvl-lime); }
/* Matches the specificity of input:not(#pin) above, so a marked field always shows red. */
input:not(#pin)[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--cvl-key-kinetix); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ts-box { min-height: 65px; }
.form-msg { min-height: 1.45em; margin: 0; color: var(--cvl-amber); }
.form-msg.ok { color: var(--cvl-lime); }
.form-msg.err { color: var(--cvl-key-kinetix); }

.btn {
  justify-self: start;
  font: 600 1em/1 var(--cvl-mono);
  letter-spacing: 0.08em;
  background: var(--cvl-lime);
  color: #000;
  border: 2px solid var(--cvl-lime);
  border-radius: 0;
  padding: 0.65em 1.4ch;
  min-height: 44px;
  cursor: pointer;
  text-shadow: none;
  box-shadow: 4px 4px 0 var(--cvl-lime-dim);
}
.btn:hover { background: var(--cvl-ink); border-color: var(--cvl-ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--cvl-lime-dim); }
.btn:focus-visible { outline-color: var(--cvl-ink); outline-offset: 4px; }
.btn[disabled] { cursor: progress; background: var(--cvl-border-control); border-color: var(--cvl-border-control); color: var(--cvl-ink); box-shadow: none; }
.btn-teal { background: var(--cvl-key-cleverchameleon); border-color: var(--cvl-key-cleverchameleon); }
.btn-ghost { background: transparent; color: var(--cvl-lime); box-shadow: none; }
.btn-ghost:hover { background: var(--cvl-lime); color: #000; }
.btn[aria-pressed="true"]:not(.btn-ghost) { background: var(--cvl-amber); border-color: var(--cvl-amber); }
.btn-ghost[aria-pressed="true"] { color: var(--cvl-amber); border-color: var(--cvl-amber); }

/* ---------- P888 keys table ---------- */
.keys { width: 100%; border-collapse: collapse; font-size: 0.88em; margin: 0.5em 0 1em; }
.keys th { text-align: left; color: var(--cvl-amber); border-bottom: 2px solid var(--cvl-amber); padding: 0.3em 1ch 0.3em 0; letter-spacing: 0.06em; }
.keys td { padding: 0.45em 1ch 0.45em 0; border-bottom: 1px dashed var(--cvl-border-control); vertical-align: top; }
.keys td:first-child { white-space: nowrap; }

/* ---------- P700 ---------- */
.split { display: grid; grid-template-columns: 8ch minmax(0, 1fr); gap: 2ch; align-items: center; }
.split .mos-art { margin: 0; }

/* ---------- fastext bar ---------- */
.fastext { margin: 0 calc(-0.5 * var(--tt-gap)); }
.fastext ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}
.fx {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  min-height: 3.1em;
  height: 100%;
  padding: 0.35em 0.7ch 0.45em;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.15;
  text-decoration: none;
  text-shadow: none;
}
.fx-k { font-size: 0.75em; }
/* Labels break only at word boundaries or the <wbr> in CLEVER<wbr>CHAMELEON. */
.fx-l { font-size: clamp(0.72rem, 3.2vw, 0.9em); overflow-wrap: normal; }
.fx-lab { background: var(--cvl-key-lab); color: var(--cvl-key-lab-ink); }
.fx-lifepunch { background: var(--cvl-key-lifepunch); color: var(--cvl-key-lifepunch-ink); }
.fx-cleverchameleon { background: var(--cvl-key-cleverchameleon); color: var(--cvl-key-cleverchameleon-ink); }
.fx-kinetix { background: var(--cvl-key-kinetix); color: var(--cvl-key-kinetix-ink); }
.fx:hover { box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.35); }
.fx:focus-visible { outline: 3px solid var(--cvl-ink); outline-offset: 2px; }
.fx.armed, .fx.fired { box-shadow: inset 0 0 0 3px var(--cvl-ink), inset 0 0 0 5px #000; }

/* ---------- footer ---------- */
.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.2em 2ch;
  padding-top: 0.5em;
  font-size: 0.78em;
  color: var(--cvl-ink-dim);
}
.ledger-line { margin: 0; max-width: none; }
.ledger-line a { color: var(--cvl-amber); }
.foot-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 2ch; }
.foot-links a, .linkish {
  display: inline-block;
  min-height: 24px;
  padding: 0.35em 0;
  color: var(--cvl-ink-dim);
  font: inherit;
  letter-spacing: 0.04em;
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
  text-shadow: none;
}
.foot-links a:hover, .linkish:hover { color: var(--cvl-lime); text-decoration: underline; }
.linkish[aria-pressed="true"] { color: var(--cvl-amber); }

/* ---------- boot handshake ---------- */
.boot {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1.6em;
  padding: 8vh max(var(--tt-gap), 8vw);
  background: #000;
}
html.booting .boot[hidden] { display: flex !important; animation: boot-failsafe 0s linear 8s forwards; }
@keyframes boot-failsafe { to { visibility: hidden; } }
.boot-log {
  margin: 0;
  min-height: 11em;
  font: 400 var(--tt-fs)/1.5 var(--cvl-mono);
  color: var(--cvl-lime);
  text-shadow: var(--cvl-text-glow-lime);
  white-space: pre-wrap;
}
.boot-log .cursor { animation: cursor-blink 1s steps(1) infinite; }
@keyframes cursor-blink { 50% { opacity: 0; } }
.boot-skip { box-shadow: none; }

/* the set switching on: the picture opens out from a bright line */
html.switch-on .screen { animation: crt-on 0.48s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes crt-on {
  0% { transform: scale(0.75, 0.006); filter: brightness(4); }
  40% { transform: scale(1, 0.006); filter: brightness(3); }
  100% { transform: none; filter: none; }
}

/* CRT canvas sits over everything but never takes a click. */
.crt {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 80;
  pointer-events: none;
}

/* ---------- plain mode: no CRT, no motion, high-contrast plain face ---------- */
html.plain { --tt-fs: clamp(1rem, 0.5vw + 0.875rem, 1.25rem); }
html.plain body { background-image: none; font-family: var(--cvl-font); line-height: 1.6; }
html.plain *, html.plain *::before, html.plain *::after {
  text-shadow: none !important;
  animation: none !important;
  transition: none !important;
}
html.plain .tv { padding: 0; border: 0; background: none; box-shadow: none; }
html.plain .tv-badge { display: none; }
html.plain .screen { background: var(--cvl-bg); box-shadow: none; }
html.plain .band.dh { font-family: var(--cvl-font); font-size: 1.5em; padding: 0.3em 0.6ch; letter-spacing: 0.02em; }
html.plain .fx { letter-spacing: 0; }html.plain .dh > span { transform: none; }
html.plain .news-line { white-space: normal; text-overflow: clip; }
html.plain .hint, html.plain .dim, html.plain .loop-d, html.plain .lamp-when,
html.plain .legend dd, html.plain .facts dt, html.plain .foot, html.plain .foot-links a,
html.plain .linkish, html.plain .sl-meta, html.plain .count { color: var(--cvl-ink); }
html.plain .lede { color: var(--cvl-ink); font-weight: 600; }
html.plain .idx a, html.plain .foot-links a { text-decoration: underline; }
html.plain .mos-mark .kL { box-shadow: 0 0 0 0.4px currentColor; }
html.plain .lamp-live .lamp-dot { box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

@media (forced-colors: active) {
  .lamp-dot, .swatch, .key, .fx, .band, .sx b { forced-color-adjust: none; }
}