/* Not Financial Endorsement. One face, one cell, two inks.
   The whole page is a character grid: 9 px advance, 20 px row, <cols> columns.
   Nothing here draws a box; every rule, frame and key is made of characters. */

@font-face {
  font-family: "NFE Term";
  src: url("/fonts/nfe-term.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

:root {
  --adv: 9px;
  --row: 20px;
  --cols: 120;
  --w: calc(var(--cols) * var(--adv));

  --field: #080808;
  --ink: #f2f2f2;
  --ink-2: #b4b4b4;
  --ink-3: #8c8c8c;
}

* { box-sizing: border-box; }

html {
  background: var(--field);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--field);
  color: var(--ink);
  font-family: "NFE Term", ui-monospace, "DejaVu Sans Mono", monospace;
  font-size: 18px;
  line-height: var(--row);
  font-synthesis: none;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* the screen: a whole number of columns, centred on a whole pixel.
   will-change puts the whole terminal in its own layer, which is the only way
   to stop Chrome on Windows running its LCD subpixel filter over a face that
   is nothing but hairlines and solid blocks. */
.screen {
  width: var(--w);
  margin-left: round(down, calc((100% - var(--w)) / 2), 1px);
  margin-right: 0;
  padding: var(--row) 0 calc(var(--row) * 2);
  white-space: pre;
  will-change: transform;
  overflow-x: clip;
}

.boot { color: var(--ink-3); }

/* one row of the screen */
/* a row never clips: the hit area of a key reaches past its own row, and
   overflow:hidden here would cut it back to 20 px. The screen clips sideways
   instead, and tools/audit.mjs measures every row against the terminal width. */
.r {
  display: block;
  height: var(--row);
  line-height: var(--row);
  white-space: pre;
}

.r.tall { height: auto; }

/* inks */
.d { color: var(--ink-3); }   /* rules, separators, disabled */
.s { color: var(--ink-2); }   /* secondary text */
.i { background: var(--ink); color: var(--field); }   /* inverse video, inline */
.blk { color: var(--ink); }

/* the verdict band: the one fill on the page, three rows deep so the line it
   carries keeps a row of air above and below it and two cells at each side */
.r.inv { background: var(--ink); color: var(--field); }

/* the current line of the listing, marked the way the reference marks it: a
   character in the gutter, and the row in the primary ink */
.r.now { color: var(--ink); }

/* an interactive word: no box, a hit area that is not 20 px tall */
.k {
  color: var(--ink);
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  white-space: pre;
  position: relative;
  cursor: pointer;
  text-decoration: none;
  display: inline;
}
/* a word in a 20 px list row keeps its own row: two of them one above the
   other must not steal each other's clicks */
.k::after {
  content: "";
  position: absolute;
  inset: 0 -2px;
}
/* the navigation words sit on a frame rule with blank rows around them, so
   they can take the full 44 px */
.nav::after { inset: -12px -4px; }
.k:hover,
.k:focus-visible { background: var(--ink); color: var(--field); outline: none; }
.k:active { opacity: 0.7; }
.k[aria-disabled="true"],
.k:disabled { color: var(--ink-3); cursor: default; }
.k[aria-disabled="true"]:hover,
.k:disabled:hover { background: none; color: var(--ink-3); }

/* a key drawn as three rows of characters: the box is type, the hit area is 60 px */
/* the five keys of the coin pane are drawn three rows tall: so is the target */
.keycap::after { inset: -20px 0; }
.lit { background: var(--ink); color: var(--field); }

/* the selectable address line */
.sel { user-select: all; -webkit-user-select: all; }

/* the console */
.term { display: block; }
.log {
  height: calc(13 * var(--row));
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
.log::-webkit-scrollbar { width: 0; height: 0; }
.inputwrap {
  position: relative;
  display: inline-block;
  height: var(--row);
  vertical-align: top;
  overflow: hidden;
}
.inputwrap .cur {
  position: absolute;
  left: 0;
  top: 1px;
  vertical-align: baseline;
  pointer-events: none;
}

.selectable { cursor: pointer; }
.selectable:focus-visible { outline: 1px solid var(--ink); outline-offset: -1px; }

.z { display: block; }

/* the console input sits in the text flow and carries no chrome */
.cmd {
  font: inherit;
  line-height: var(--row);
  letter-spacing: inherit;
  color: var(--ink);
  background: none;
  border: 0;
  outline: none;
  padding: 0;
  margin: 0;
  caret-color: transparent;
  width: 100%;
}
.cmd::placeholder { color: var(--ink-3); opacity: 1; }

/* the block cursor */
.cur {
  display: inline-block;
  width: var(--adv);
  height: calc(var(--row) - 2px);
  vertical-align: -3px;
  background: var(--ink);
  animation: blink 1.06s step-end infinite;
}
.cur.off { animation: none; background: var(--ink-3); }
@keyframes blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* a line that is still printing */
.typing { color: var(--ink-2); }

.vis { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .cur { animation: none; }
}

/* the verdict band is one box, three rows deep: its line keeps a row of air
   above and below and two cells at each side, inside one fill */
.band.inv { background: var(--ink); color: var(--field); }
.band .r { height: var(--row); }

/* the display readout is made of block glyphs set side by side, and Chrome
   leaves a hairline where two of them meet. A half pixel of stroke closes it
   without moving anything off the grid. */
.blk { -webkit-text-stroke: 0.7px currentColor; }