/* The tehas game view: the factory as a 16-bit overworld. See DESIGN.md.
   Square corners, flat fills, hard shadows, one typeface at 16px and 32px. */

@font-face {
  font-family: Topaz;
  src: url("./TopazPlus_a1200_v1.0.ttf") format("truetype");
  font-display: block;
}

:root {
  --brass: #ea3;
  --verdigris: #276;
  --rust: #712;
  --moss: #694;
  --moss-shade: #473;
  --steel: #ccd;
  --bone: #eec;
  --bone-shade: #dca;
  --brass-light: #fc6;
  --ink: #222;
  --outline: #111;
  --slate: #445;
  --hairline: #aab;
  --crt-black: #111;
  --crt-amber: #fc6;
  --crt-dim: #aab;
  --go: #8a5;
  --fail: #a32;

  --shadow-card: 4px 4px 0 #333;
  --shadow-sign: 8px 8px 0 #352;
  --ring: 0 0 0 4px var(--brass);

  /* Height of the sticky header, for everything that sticks or scrolls under it. */
  --header: 80px;

}

* { box-sizing: border-box; }

html { background: var(--moss); }

body {
  margin: 0;
  background-color: var(--moss);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' shape-rendering='crispEdges'%3E%3Cpath fill='%238a5' d='M16 24h8v8h-8zM24 16h8v8h-8zM88 80h8v8h-8zM96 72h8v8h-8zM64 8h8v8h-8zM32 104h8v8h-8z'/%3E%3C/svg%3E");
  color: var(--ink);
  font: 16px/24px Topaz, "Courier New", monospace;
  font-synthesis: none;
  -webkit-font-smoothing: none;
  overflow-x: clip;
}

h1, h2, h3, p, ol, ul, dl, dd { margin: 0; padding: 0; }
h1, h2, h3 { font-size: inherit; font-weight: 400; }
h1, h2 { font-size: 32px; line-height: 32px; }
ol, ul { list-style: none; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
img { display: block; }
[hidden] { display: none !important; }

:focus-visible { outline: 4px solid var(--ink); outline-offset: 4px; }

.skip {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 10;
  padding: 8px 16px;
  background: var(--brass);
  border: 4px solid var(--outline);
}
.skip:focus { top: 16px; }

/* Motion. Everything moves in steps, like sprite frames: nothing eases, nothing
   blurs. One-shot moves answer something the viewer did or mark data arriving.
   The only loops are a cursor and lamps that blink while a cycle really runs. */

@keyframes pop-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes row-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@keyframes latch { from { background: var(--brass); color: var(--ink); } to { background: transparent; } }
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes lamp { 0%, 49% { background: var(--brass-light); } 50%, 100% { background: var(--rust); } }
@keyframes gate-shut { 0%, 49% { background: var(--brass); } 50%, 100% { background: var(--bone); } }

.station, .door, .monitor { animation: pop-in 240ms steps(3, end) backwards; }
.station:nth-child(2) { animation-delay: 60ms; }
.station:nth-child(3) { animation-delay: 120ms; }
.station:nth-child(4) { animation-delay: 180ms; }
.monitor { animation-delay: 240ms; }
.door:nth-child(1) { animation-delay: 300ms; }
.door:nth-child(2) { animation-delay: 340ms; }
.door:nth-child(3) { animation-delay: 380ms; }
.door:nth-child(4) { animation-delay: 420ms; }
.door:nth-child(5) { animation-delay: 460ms; }
.door:nth-child(6) { animation-delay: 500ms; }

.is-changed { animation: latch 320ms steps(2, end); }

/* A ticket number in flight from where it was pressed to the monitor. */
.flyer {
  position: fixed;
  z-index: 20;
  padding: 0 4px;
  margin: 0 0 0 -4px;
  background: var(--crt-black);
  color: var(--crt-amber);
  transform-origin: 0 0;
  pointer-events: none;
}
/* While a number is on its way the screen is blank: the old ticket goes at once. */
.monitor.is-receiving .screen > * { visibility: hidden; }
.monitor.is-receiving { box-shadow: var(--ring), var(--shadow-sign); }
.rows.is-fresh li { animation: row-in 120ms steps(2, end) both; }
.rows.is-fresh li:nth-child(2) { animation-delay: 24ms; }
.rows.is-fresh li:nth-child(3) { animation-delay: 48ms; }
.rows.is-fresh li:nth-child(4) { animation-delay: 72ms; }
.rows.is-fresh li:nth-child(5) { animation-delay: 96ms; }
.rows.is-fresh li:nth-child(6) { animation-delay: 120ms; }
.rows.is-fresh li:nth-child(7) { animation-delay: 144ms; }
.rows.is-fresh li:nth-child(n + 8) { animation-delay: 168ms; }

.cursor { display: inline-block; width: 8px; height: 16px; margin-left: 8px; vertical-align: -2px; background: var(--crt-amber); animation: blink 1s steps(1, end) infinite; }

.monitor-title { display: flex; justify-content: space-between; align-items: center; }
.monitor-led { width: 16px; height: 8px; background: var(--slate); border: 0; box-shadow: 0 0 0 4px var(--outline); margin-right: 4px; }
body[data-factory="live"] .monitor-led { animation: lamp 1.2s steps(1, end) infinite; }
body[data-factory="live"] .console-state::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  background: var(--rust);
  animation: blink 1.2s steps(1, end) infinite;
}
.gate[data-state="paused"] { animation: gate-shut 1.6s steps(1, end) infinite; }

/* Things you can press stand up off the field when pointed at. */
.door:hover, .button:hover:not(:disabled) { transform: translate(-4px, -4px); }
.door:hover { box-shadow: 12px 12px 0 #352; }
.button:hover:not(:disabled) { box-shadow: 8px 8px 0 #333; }

@media (prefers-reduced-motion: reduce) {
  .station, .door, .monitor, .is-changed, .rows.is-fresh li,
  .cursor, .monitor-led, .console-state::before, .gate[data-state="paused"] { animation: none !important; }
  body[data-factory="live"] .monitor-led { background: var(--brass-light); }
}

/* Header band */

.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0 16px;
  padding: 8px 24px;
  background: var(--steel);
  border-bottom: 4px solid var(--outline);
  box-shadow: 0 8px 0 var(--brass);
  margin-bottom: 8px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 32px;
  line-height: 32px;
  text-decoration: none;
}
.source {
  padding: 4px 12px;
  background: var(--bone);
  border: 4px solid var(--outline);
}
.source[data-kind="sample"], .source[data-kind="stale"] { background: var(--brass); }
/* The fresh live queue is the normal case and needs no tag. */
.source[data-kind="live"] { display: none; }
.menu { display: flex; align-items: center; gap: 0 16px; margin-left: auto; }
/* The factory state tag closes the header, at the far right. */
.topbar > .gate { flex: none; margin-left: 8px; white-space: nowrap; }
.menu a, .repo { padding: 12px 0; text-decoration: none; white-space: nowrap; }
.menu a:hover, .repo:hover { text-decoration: underline; text-underline-offset: 4px; }
.repo { text-decoration: underline; text-underline-offset: 4px; }

/* The stage. Wide: the floor, the doors and the board in one column with the
   work order monitor fixed beside them, so the first screen is the whole
   status. Narrow: one column, the stations stacked. */

.stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 336px;
  grid-template-areas:
    "head head"
    "line monitor"
    "doors monitor"
    "board monitor"
    "lab monitor"
    "console monitor"
    "energy energy"
    "break break";
  column-gap: 24px;
  max-width: 1488px;
  margin: 0 auto;
  padding: 0 24px;
}
.floor, .desk { display: contents; }
/* --fold-pad and --fold-gap are set by fitFold() in game-view.js so the first
   screen sits centred in the window and the board starts below it. */
.floor-head { grid-area: head; padding-top: var(--fold-pad, 32px); }
.line { grid-area: line; }
.doors { grid-area: doors; }
.monitor-wrap { grid-area: monitor; }
.board-wrap { grid-area: board; margin-top: var(--fold-gap, 72px); }
.break-room { grid-area: break; margin-top: 96px; }

.floor-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-bottom: 24px; }
.gate { padding: 0 8px; background: var(--bone); border: 4px solid var(--outline); }
.gate[data-state="running"] { background: var(--go); }
.gate[data-state="paused"] { background: var(--brass); }
.gate[data-state="failed"] { background: var(--fail); color: var(--bone); }

/* The floor: four stations side by side */

.line { position: relative; }

.stations {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.station { display: grid; }

.sign {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 8px;
  display: flex;
  flex-direction: column;
  background: var(--bone);
  border: 4px solid var(--outline);
  box-shadow: var(--shadow-sign);
}
.station.is-filtered .sign { box-shadow: var(--ring), var(--shadow-sign); }
/* Content-box, so the border sits outside the picture and the 240:130 art fills its frame exactly. */
.scene { box-sizing: content-box; width: calc(100% - 8px); height: auto; aspect-ratio: 240 / 130; border: 4px solid var(--outline); }

.sign h2 {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 8px;
  margin-top: 8px;
}
.sign h2 b { font-weight: 400; color: var(--verdigris); }
.station[data-stage="running"] h2 b,
.station[data-stage="review"] h2 b { color: var(--rust); }

.slot-label { margin-top: 8px; padding-top: 8px; border-top: 4px solid var(--hairline); color: var(--slate); }
.slot { flex: 1; min-height: 80px; }
.empty-slot { color: var(--slate); }

.ticket {
  display: block;
  width: calc(100% + 8px);
  padding: 4px;
  margin: 0 -4px;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}
.ticket b { font-weight: 400; color: var(--rust); }
/* Two lines keep every sign the same height; the monitor shows the full title. */
.ticket span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.ticket:hover, .ticket.is-current { background: var(--brass-light); }

.see-all {
  min-height: 48px;
  margin-top: 8px;
  padding: 12px 0 4px;
  text-align: left;
  background: none;
  border: 0;
  color: var(--verdigris);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.see-all:hover { color: var(--ink); }

/* Doors: where everything else on the page is */

.doors {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 32px;
}
.door {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-height: 64px;
  padding: 4px 16px;
  background: var(--steel);
  border: 4px solid var(--outline);
  box-shadow: var(--shadow-sign);
  text-decoration: none;
}
.door b, .door small { display: block; font: inherit; }
.door small { color: var(--slate); }
.door i { font-style: normal; font-size: 32px; line-height: 32px; }
.door:hover { background: var(--bone); }
.door:active { transform: translate(8px, 8px); box-shadow: none; }
.door.is-alert { background: var(--brass); }
.door.is-alert small { color: var(--ink); }
.door.is-alert:hover { background: var(--brass-light); }

/* The work order on a monitor */

.monitor {
  position: sticky;
  top: calc(var(--header) + 16px);
  display: flex;
  flex-direction: column;
  min-height: var(--monitor-height, 0);
  padding: 0 16px 16px;
  background: var(--bone-shade);
  border: 4px solid var(--outline);
  box-shadow: var(--shadow-sign);
}
.monitor-title { padding: 12px 0; }
.screen {
  flex: 1;
  min-height: 336px;
  padding: 16px;
  background: var(--crt-black);
  border: 4px solid var(--outline);
  color: var(--crt-amber);
}
.order-title { margin-top: 16px; overflow-wrap: anywhere; }
.order-number { font-size: 32px; line-height: 32px; }
.order-facts { margin-top: 16px; color: var(--crt-dim); }
.order-facts div { display: grid; grid-template-columns: 64px 1fr; gap: 8px; }
/* The four facts about the ticket's history stand apart from stage and labels. */
.order-facts div:nth-child(3) { margin-top: 16px; }
.order-facts dd { color: var(--crt-amber); overflow-wrap: anywhere; }
.order-foot { margin-top: 16px; }
.order-link { color: var(--crt-dim); }
.order-link a { color: var(--bone); text-underline-offset: 4px; }
.order-link a:focus-visible { outline-color: var(--crt-amber); }
.monitor-base {
  position: absolute;
  left: 50%;
  top: 100%;
  width: 96px;
  height: 16px;
  margin: 4px 0 0 -48px;
  background: var(--outline);
  box-shadow: -32px 16px 0 var(--outline), 32px 16px 0 var(--outline);
}

/* The issue board */

.board {
  scroll-margin-top: calc(var(--header) + 16px);
  background: var(--bone);
  border: 4px solid var(--outline);
  box-shadow: var(--shadow-sign);
}
.board:focus-visible { outline-offset: 8px; }
.board-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0 24px;
  padding: 12px 16px;
  background: var(--steel);
  border-bottom: 4px solid var(--outline);
}
.board-all { text-underline-offset: 4px; }
.board-all:hover { color: var(--verdigris); }
.board-tools { display: flex; flex-wrap: wrap; align-items: end; gap: 16px; padding: 16px; }
.board-tools label { display: grid; gap: 4px; color: var(--slate); }
.board-tools label:first-child { flex: 1 1 240px; }
.board-tools input, .board-tools select {
  width: 100%;
  height: 48px;
  padding: 0 12px;
  background: var(--bone);
  border: 4px solid var(--outline);
  border-radius: 0;
  color: var(--ink);
}
.board-tools input::placeholder { color: var(--slate); opacity: 1; }

.rows { border-top: 4px solid var(--outline); }
.row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 16px;
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  cursor: pointer;
}
.rows li:last-child .row { border-bottom: 0; }
.row b { font-weight: 400; color: var(--rust); }
.row .row-title { overflow-wrap: anywhere; }
.row .row-stage { color: var(--slate); text-align: right; }
.row:hover { background: var(--steel); }
.row.is-current { background: var(--brass-light); }
.row.is-current .row-stage { color: var(--ink); }
.row:focus-visible { outline-offset: -4px; }
.rows-note { padding: 24px 16px; }

/* The Protolab: tickets at the prototype stage, labelled tehas:prototype, beside the lab at work */

.lab {
  grid-area: lab;
  margin-top: 72px;
  scroll-margin-top: calc(var(--header) + 16px);
  background: var(--bone);
  border: 4px solid var(--outline);
  box-shadow: var(--shadow-sign);
}
.lab-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0 24px;
  padding: 12px 16px;
  background: var(--steel);
  border-bottom: 4px solid var(--outline);
}
.lab-body { display: grid; grid-template-columns: minmax(0, 1fr) 440px; }
.lab .rows { border-top: 0; }
.lab .has-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; border-bottom: 1px solid var(--hairline); }
.lab .has-link:last-child { border-bottom: 0; }
.lab .has-link .row { border-bottom: 0; }
.row-open { display: grid; place-items: center; min-width: 72px; padding: 0 16px; color: var(--verdigris); text-underline-offset: 4px; }
.row-open:hover { background: var(--steel); color: var(--ink); }
.row-open:focus-visible { outline-offset: -4px; }
.lab-scene { margin: 0; padding: 16px; background: var(--bone-shade); }
.lab-scene img { box-sizing: content-box; width: 400px; height: 280px; border: 4px solid var(--outline); }
.lab-scene figcaption { margin-top: 8px; color: var(--slate); }

/* The production console: the running cycle's output, live from the factory */

.console {
  grid-area: console;
  margin-top: 72px;
  scroll-margin-top: calc(var(--header) + 16px);
  background: var(--bone-shade);
  border: 4px solid var(--outline);
  box-shadow: var(--shadow-sign);
}
.console-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 24px;
  padding: 12px 16px;
  background: var(--steel);
  border-bottom: 4px solid var(--outline);
}
.console-state { padding: 0 8px; background: var(--bone); border: 4px solid var(--outline); }
.console-state[data-state="live"] { background: var(--brass); }
.console-body { padding: 16px; }
.console-cycle { overflow-wrap: anywhere; }
.console-step { min-height: 24px; color: var(--slate); overflow-wrap: anywhere; }
#console-out {
  height: 400px;
  margin: 8px 0 0;
  padding: 16px;
  overflow: auto;
  background: var(--crt-black);
  border: 4px solid var(--outline);
  color: var(--crt-amber);
  font: inherit;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
#console-out:focus-visible { outline-offset: 4px; }
#console-out:empty::before { content: attr(data-empty); color: var(--crt-dim); }
.console-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; margin-top: 8px; }
.console-bar label { display: flex; align-items: center; gap: 12px; min-height: 48px; cursor: pointer; }
.console-bar input { width: 24px; height: 24px; margin: 0; accent-color: var(--verdigris); }
.console-bar span { color: var(--slate); }

/* Buttons */

.button {
  display: inline-grid;
  place-items: center;
  min-height: 48px;
  padding: 0 16px;
  background: var(--bone);
  border: 4px solid var(--outline);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  text-decoration: none;
}
.button-primary { background: var(--brass); }
.button:hover { background: var(--steel); }
.button-primary:hover { background: var(--brass-light); }
.button:active { transform: translate(4px, 4px); box-shadow: none; }
.button:disabled { color: var(--slate); background: var(--bone-shade); box-shadow: none; cursor: not-allowed; }
.file-button { position: relative; }
.file-button input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-button:focus-within { outline: 4px solid var(--ink); outline-offset: 4px; }

/* Breakroom */

.break-room {
  scroll-margin-top: calc(var(--header) + 16px);
  background: var(--bone-shade);
  border: 4px solid var(--outline);
  box-shadow: var(--shadow-sign);
}
.break-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0 24px;
  padding: 12px 16px;
  background: var(--steel);
  border-bottom: 4px solid var(--outline);
}
.cabinet {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  margin: 16px;
  background: var(--crt-black);
  border: 4px solid var(--outline);
}
.cabinet canvas {
  display: block;
  width: calc(100% - 8px);
  height: auto;
  aspect-ratio: 480 / 272;
  margin: 4px;
  image-rendering: pixelated;
  touch-action: none;
  background: var(--crt-black);
}
.cabinet-side { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px 16px; background: var(--bone); }
.cabinet-help, .cabinet-word { color: var(--slate); }
.readout { display: flex; gap: 24px; }
.readout dd { font-size: 32px; line-height: 32px; color: var(--verdigris); }
.cabinet-message { flex: 1; }
.cabinet-side .button { align-self: start; min-width: 120px; }

/* Footer: the data source, then the signature */

.footer {
  margin-top: 96px;
  padding: 32px 24px 40px;
  background: var(--bone-shade);
  border-top: 4px solid var(--outline);
}
.data-dock {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px 32px;
  max-width: 1440px;
  margin: 0 auto;
  scroll-margin-top: calc(var(--header) + 16px);
}
.data-dock p { max-width: 65ch; margin-top: 8px; }
.data-actions { display: flex; flex-wrap: wrap; gap: 16px; }
.footer-note { max-width: 1440px; margin: 24px auto 0; color: var(--slate); }
.footer-note a { color: var(--ink); text-underline-offset: 4px; }
.ascii { margin-top: 40px; display: grid; justify-content: center; }
.ascii pre { margin: 0; font: 16px/16px Topaz, monospace; }
.credit { max-width: 80ch; margin: 16px auto 0; text-align: center; color: var(--slate); }
.credit a { color: var(--ink); text-underline-offset: 4px; }

/* Below the width that fits four stations and the monitor side by side, the
   page is one column. */

/* Just above the single-column width the header is tight: close the gaps so it
   stays on one row. */
@media (min-width: 1280px) and (max-width: 1359px) {
  .topbar, .menu { gap: 0 12px; }
  .topbar > .gate { margin-left: 0; }
}

@media (max-width: 1279px) {
  :root { --header: 128px; }
  .topbar { flex-wrap: wrap; }
  .menu { order: 3; flex-basis: 100%; margin-left: 0; overflow-x: auto; scrollbar-width: none; }
  .menu::-webkit-scrollbar { display: none; }
  .topbar > .gate { margin-left: auto; }
  .stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "floor" "doors" "desk" "energy" "break";
  }
  .floor { display: block; grid-area: floor; }
  .floor-head, .line { grid-area: auto; }
  .floor-head { padding-top: 24px; }
  /* The monitor stays in view only while the board is on screen. */
  .desk { display: block; grid-area: desk; padding-top: 72px; }
  .monitor-wrap { padding-top: 0; position: sticky; top: var(--header); z-index: 2; }
  .monitor { position: static; display: block; min-height: 0; max-width: 720px; }
  .screen { min-height: 0; }
  .monitor-base { display: none; }
  .board-wrap { margin-top: 40px; }
  .lab { grid-area: auto; margin-top: 40px; }
  .console { grid-area: auto; margin-top: 40px; }

  .stations { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .sign {
    max-width: 720px;
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    grid-template-rows: auto auto 1fr auto;
    column-gap: 16px;
  }
  .scene { grid-row: 1 / -1; width: 240px; align-self: start; }
  .sign h2 { margin-top: 0; }
  .slot { min-height: 0; }
  .doors { margin-top: 40px; max-width: 720px; }
}

@media (max-width: 899px) {
  .lab-body { grid-template-columns: minmax(0, 1fr); }
  .lab-scene img { width: calc(100% - 8px); max-width: 400px; height: auto; aspect-ratio: 400 / 280; }
  .cabinet { grid-template-columns: minmax(0, 1fr); }
  .doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 699px) {
  #console-out { height: 320px; padding: 8px; }
  .stage { padding: 0 16px; }
  :root { --header: 120px; }
  .topbar { padding: 8px 8px 0; gap: 0 8px; }
  .source, .topbar > .gate { padding: 4px 8px; }
  .menu { padding: 0 8px; }
  .brand img { width: 64px; height: 40px; }
  .brand span { display: none; }

  .sign { display: flex; max-width: none; }
  .scene { width: calc(100% - 8px); }
  .sign h2 { margin-top: 8px; }

  .doors { gap: 16px 12px; }
  .door { padding: 8px; }

  .board-tools label { flex: 1 1 100%; }
  .row { grid-template-columns: 56px minmax(0, 1fr); row-gap: 0; }
  .row .row-stage { grid-column: 2; text-align: left; }
  .order-title, .order-facts, .order-foot { margin-top: 8px; }
  /* On a phone the monitor stays over the board, so the history facts pair up. */
  .order-facts { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .order-facts div:nth-child(-n + 2) { grid-column: 1 / -1; }
  .order-facts div:nth-child(3) { margin-top: 0; }
  .order-facts div:nth-child(n + 3) { grid-template-columns: 1fr; gap: 0; margin-top: 8px; }

  /* The logo is 77 columns wide: at half size it is Topaz at its native 8px. */
  .ascii pre { font: 8px/8px Topaz, monospace; }
  .footer { padding: 24px 16px 32px; }
}