/* Hero screen (spec 11, 12, 13): boot log, then the desktop with its icons, the Ask window, and the
   scripted company demo (start window + company window). The root is an inline-size container, so
   geometry is in cqw and % and scales with the monitor. */

.scr-root {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 903 / 676; /* used only when the artboard renders alone and 100% height has no parent */
  overflow: hidden;
  container-type: inline-size;
  background: #000;
}

/* Boot (spec 11). A 640x480 box scaled to 85% of the fit (Screen.dc.html writes the scale),
   holding a 384px column. Every line types by itself from the delays computed in renderVals:
   --d start, --t typing time, --n characters, --w how long the cursor stays on the line. */
.scr-boot {
  position: absolute;
  inset: 0;
  z-index: 50;
  overflow: hidden;
  background: #000;
}
.scr-boot.is-out {
  pointer-events: none;
  animation: scr-boot-out 700ms linear forwards;
}
@keyframes scr-boot-out {
  to { opacity: 0; }
}
.scr-vga {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 640px;
  height: 480px;
  color: #fff;
  transform: translate(-50%, -50%);
}
.scr-col {
  width: 384px;
  padding-inline: 24px;
  text-align: left;
}
.scr-mark {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 32px;
  filter: drop-shadow(4px 4px 0 var(--stone-900));
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}
.scr-copy {
  margin-bottom: 4px;
}
.scr-rule {
  height: 0;
  margin-block: 12px;
  border-top: 1px dashed var(--stone-300);
}
.scr-rule--end {
  opacity: 0;
  animation: scr-in 300ms linear var(--d) forwards;
}
@keyframes scr-in {
  to { opacity: 1; }
}
/* A line takes no room until it starts, so the centred column drifts up as it types */
.scr-ln {
  position: relative;
  height: 12px;
  animation: scr-ln-wait 0s linear var(--d) backwards;
}
@keyframes scr-ln-wait {
  from, to { height: 0; }
}
.scr-ty {
  position: relative;
  display: inline-block;
  vertical-align: top;
}
.scr-tx {
  display: inline-block;
  vertical-align: top;
  white-space: pre;
  animation: scr-type var(--t) steps(var(--n), jump-start) var(--d) both;
}
@keyframes scr-type {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
/* Block cursor: rides the typing edge, shows only while its line is current, pulses softly */
.scr-cur {
  position: absolute;
  top: -1px;
  left: 0;
  width: 9px;
  height: 13px;
  background: #fff;
  visibility: hidden;
  animation:
    scr-cur-x var(--t) steps(var(--n), jump-start) var(--d) both,
    scr-cur-on var(--w) linear var(--d),
    scr-pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
}
@keyframes scr-cur-x {
  from { left: 0; }
  to { left: 100%; }
}
@keyframes scr-cur-on {
  from, to { visibility: visible; }
}
@keyframes scr-pulse {
  50% { opacity: .5; }
}
/* PLOT MAP count: a column of values stepped up behind a one-line window */
.scr-odo {
  display: inline-block;
  height: 12px;
  overflow: hidden;
  vertical-align: top;
  text-align: right;
}
.scr-odo > span {
  display: block;
  animation: scr-odo var(--w) steps(8, jump-end) var(--d) both;
}
@keyframes scr-odo {
  to { transform: translateY(-96px); }
}
.scr-skip {
  position: absolute;
  right: 40px;
  bottom: 32px;
  color: var(--stone-500);
  transition: color 150ms cubic-bezier(.4, 0, .2, 1);
}
.scr-skip .pbtn-face {
  padding: 0;
  font-size: var(--fs-cap-sm);
}
.scr-skip .pbtn-bracket {
  opacity: .6;
  transition: opacity 150ms cubic-bezier(.4, 0, .2, 1);
}
.scr-skip:hover,
.scr-skip:focus-visible {
  color: var(--stone-300);
}
.scr-skip:hover .pbtn-bracket,
.scr-skip:active .pbtn-bracket,
.scr-skip:focus-visible .pbtn-bracket {
  opacity: 1;
}

/* Desktop (spec 12) */
.scr-desk {
  position: absolute;
  inset: 0;
  z-index: 10;
  overflow: hidden;
  background: var(--stone-200);
  color: #000;
}
.scr-desk.is-on {
  animation: scr-power-on 850ms linear both;
}
@keyframes scr-power-on {
  0% { opacity: 0; }
  14% { opacity: .85; }
  28% { opacity: .1; }
  42% { opacity: .65; }
  57% { opacity: .25; }
  71% { opacity: .9; }
  100% { opacity: 1; }
}
.scr-wall {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  image-rendering: pixelated;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

/* Menubar: 8.7% tall; its row is the bottom 63% */
.scr-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8.7%;
  background: var(--stone-100);
  user-select: none;
  -webkit-user-select: none;
}
.scr-bar-row {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6cqw;
  height: 63%;
  padding-inline: 4cqw;
  color: #000;
  white-space: nowrap;
}
.scr-bar-menu {
  display: flex;
  align-items: center;
  gap: 1.6cqw;
}
.scr-logo {
  display: block;
  width: auto;
  height: 2.1cqw;
  image-rendering: pixelated;
  -webkit-user-drag: none;
}
.scr-clock {
  font-variant-numeric: tabular-nums;
}

/* Icon field and tiles: absolutely placed, hugging their content */
.scr-field {
  position: absolute;
  top: 8.7%;
  left: 2.8%;
  right: 2.8%;
  bottom: 3.6%;
}
.scr-tile {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45cqw;
  width: 10cqw;
  min-width: 88px;
  min-height: 72px;
  padding: 6px 8px;
  color: #000;
  text-align: center;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
@media (min-width: 1024px) {
  .scr-tile {
    min-width: 104px;
  }
}
.scr-tile--accent {
  color: var(--accent);
}
@media (hover: hover) {
  .scr-tile:hover {
    background: var(--accent);
    color: #fff;
  }
}
.scr-tile:focus-visible,
.scr-tile[data-selected="true"] {
  outline: none;
  background: var(--accent);
  color: #fff;
}
.scr-tile[data-dragging="true"] {
  z-index: 40;
}
.scr-glyph {
  width: 6.3cqw;
  height: 6.3cqw;
  shape-rendering: crispEdges;
}
/* the emblems are two-tone (ink plus copper); on a copper highlight the copper parts turn dark so the
   emblem still reads */
.scr-tile:focus-visible .scr-glyph path[fill="#ED670F"],
.scr-tile[data-selected="true"] .scr-glyph path[fill="#ED670F"] { fill: #1c1917; }
.scr-tile:focus-visible .scr-glyph path[fill="#963E0A"],
.scr-tile[data-selected="true"] .scr-glyph path[fill="#963E0A"] { fill: #1c1917; }
.scr-tile:focus-visible .scr-glyph path[fill="#F7AA6E"],
.scr-tile[data-selected="true"] .scr-glyph path[fill="#F7AA6E"] { fill: #3d3934; }
@media (hover: hover) {
  .scr-tile:hover .scr-glyph path[fill="#ED670F"],
  .scr-tile:hover .scr-glyph path[fill="#963E0A"] { fill: #1c1917; }
  .scr-tile:hover .scr-glyph path[fill="#F7AA6E"] { fill: #3d3934; }
}
.scr-label {
  display: block;
  max-width: 100%;
  font-weight: 700;
  line-height: 1.2;
  text-wrap: balance;
}

/* Window chrome (spec 13) */
.win {
  position: absolute;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 2px solid #000;
  background: #000;
  color: var(--stone-100);
}
.win-bar {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  height: 3.1cqw;
  padding-inline: .6cqw;
  background: #fff;
  color: #000;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.win-stripes {
  position: absolute;
  inset: .55cqw .6cqw;
  background: repeating-linear-gradient(to bottom, #000 0 1px, transparent 1px 3px);
  pointer-events: none;
}
.win-ctrls {
  position: relative;
  display: flex;
  gap: .45cqw;
  margin-left: .9cqw; /* the stripes left of the controls read as the grip */
  padding-inline: .45cqw;
  background: #fff;
}
.win-ctl {
  display: block;
  flex: none;
  width: 1.55cqw;
  height: 1.55cqw;
  color: #000;
}
.win-ctl svg {
  display: block;
  width: 100%;
  height: 100%;
  shape-rendering: crispEdges;
}
@media (hover: hover) {
  .win-ctl:hover {
    color: var(--accent);
  }
}
.win-ctl:focus-visible {
  outline: none;
  color: var(--accent);
}
.win-title {
  position: absolute;
  left: 50%;
  top: 50%;
  padding-inline: .7cqw;
  background: #fff;
  color: #000;
  font-family: var(--font-body-alt);
  font-size: var(--fs-alt-xs);
  letter-spacing: -0.25px;
  line-height: 1.2;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}
.win-body {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

/* Ask window: a terminal answering from a local FAQ */
.ask {
  width: 70cqw;
  height: 85%;
}
.ask .win-body {
  padding: 1.3cqw 1.4cqw;
}
.ask-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.ask-scroll::-webkit-scrollbar {
  display: none;
}
.ask-mark {
  display: block;
  width: 43cqw;
  max-width: 100%;
  height: auto;
  margin-bottom: 1.4cqw;
  image-rendering: pixelated;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}
.ask-line,
.ask-ps1,
.ask-in {
  font-family: var(--font-body-alt);
  font-size: var(--fs-alt-xs);
  font-weight: 400;
  letter-spacing: -0.25px;
  line-height: 1.2;
}
.ask-line {
  color: var(--stone-100);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.ask-dim {
  color: var(--stone-400);
}
.ask-ps1 {
  color: var(--accent);
  white-space: pre;
}
.ask-prompt {
  display: flex;
  flex: none;
  align-items: baseline;
  gap: .6em;
  margin-top: 1cqw;
}
.ask-in {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--stone-100);
  caret-color: var(--accent);
}

/* Start a company: the ticker prompt that opens after the boot (and on il:demo) */
.st {
  width: 44cqw;
}
.st .win-body {
  gap: 1.1cqw;
  padding: max(12px, 1.8cqw); /* room for the START bracket */
}
.st-line {
  color: var(--stone-100);
  font-family: var(--font-body-alt);
  font-size: clamp(11px, 1.55cqw, 14px);
  letter-spacing: -0.25px;
  line-height: 1.2;
}
.st-row {
  display: flex;
  align-items: stretch;
  gap: 1.2cqw;
}
.st-in {
  flex: 1 1 auto;
  min-width: 0;
  padding: .55cqw 1cqw;
  border: 1px solid var(--stone-600);
  outline: none;
  background: var(--stone-900);
  color: #fff;
  caret-color: var(--accent);
  font-family: var(--font-caption);
  font-size: clamp(13px, 2cqw, 18px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.st-in:focus {
  border-color: var(--accent);
}
.st-in::placeholder {
  color: var(--stone-500);
}
.st-go .pbtn-face {
  padding: max(5px, .6cqw) max(10px, 1.6cqw);
  font-size: clamp(11px, 1.45cqw, 14px);
}
.st-msg,
.st-demo {
  font-family: var(--font-caption);
  font-size: clamp(9px, 1.15cqw, 11px);
  font-weight: 500;
  line-height: 1.2;
}
.st-msg {
  color: var(--stone-400);
}
.st-msg.is-err {
  color: var(--copper-400);
}
.st-demo {
  color: var(--stone-300);
}
.st-demo-k {
  color: var(--accent);
}

/* The company window: a scripted wave for the typed ticker. One state change per 250ms step
   (Screen.dc.html); the typing, the agent marks and the caret are CSS. */
.dm {
  --dm-fs: clamp(9px, 1.25cqw, 12px);
  --dm-fs-s: clamp(8px, 1.05cqw, 10px);
  width: 88cqw;
  height: 86%;
}
.dm .win-body {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) minmax(0, .44fr) auto;
  grid-template-areas: "head head" "map side" "log log" "foot foot";
  gap: .9cqw;
  padding: max(12px, 1.2cqw); /* room for the button brackets */
  color: var(--stone-100);
  font-family: var(--font-mono);
  font-size: var(--dm-fs);
  line-height: 1.3;
}
.dm-head {
  grid-area: head;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2cqw;
  min-width: 0;
}
.dm-honest {
  min-width: 0;
  overflow: hidden;
  color: var(--stone-200);
  font-family: var(--font-caption);
  font-size: var(--dm-fs);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.dm-honest-k {
  color: var(--accent);
}
.dm-steps {
  display: flex;
  flex: none;
  gap: .4cqw;
}
.dm-step {
  padding: .3cqw .7cqw;
  color: var(--stone-400);
  font-family: var(--font-caption);
  font-size: var(--dm-fs-s);
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 1px var(--stone-700);
}
.dm-step.is-past {
  color: #fff;
}
.dm-step.is-now {
  background: var(--accent);
  color: #fff;
  box-shadow: none;
}
.dm-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .6cqw;
  min-width: 0;
  min-height: 0;
  padding: .8cqw .9cqw;
  background: var(--stone-900);
  box-shadow: inset 0 0 0 1px var(--stone-800);
}
.dm-label,
.dm-cap {
  color: var(--stone-400);
  font-family: var(--font-caption);
  font-size: var(--dm-fs-s);
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.dm-label {
  flex: none;
}

/* Map: four zones of 10 x 5 plots. Free plots are outlines, planned plots dark, placed plots
   copper (white for the step they land in). */
.dm-map {
  grid-area: map;
}
/* The live map: the build engine at one CSS pixel per art pixel, filling the panel */
.dm-live {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: #0b0a09;
}
.dm-live > *,
.dm-live .bv {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  min-height: 0;
}
.dm-zones {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: .7cqw;
  min-height: 0;
}
.dm-zone {
  display: flex;
  flex-direction: column;
  gap: .45cqw;
  min-width: 0;
  min-height: 0;
  padding: .5cqw;
  box-shadow: inset 0 0 0 1px var(--stone-700);
}
.dm-zone.is-void {
  box-shadow: none;
  outline: 1px dashed var(--stone-700);
  outline-offset: -1px;
}
.dm-zone-hd {
  display: flex;
  flex: none;
  justify-content: space-between;
  gap: .8cqw;
  font-size: var(--dm-fs-s);
  line-height: 1.1;
  white-space: nowrap;
}
.dm-zone-n {
  flex: none;
  color: var(--stone-200);
  font-family: var(--font-caption);
  font-weight: 500;
  text-transform: uppercase;
}
.dm-zone.is-void .dm-zone-n {
  color: var(--stone-500);
}
.dm-zone-crew {
  min-width: 0;
  overflow: hidden;
  color: var(--stone-400);
  text-overflow: ellipsis;
}
.dm-plots {
  position: relative;
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  grid-template-rows: repeat(5, minmax(0, 1fr));
  gap: max(1px, .2cqw);
  min-height: 0;
}
.dm-plot {
  display: block;
  min-width: 0;
  min-height: 0;
}
.dm-plot.is-free {
  box-shadow: inset 0 0 0 1px var(--stone-700);
}
.dm-plot.is-plan {
  background: var(--stone-800);
  box-shadow: inset 0 0 0 1px var(--stone-500);
}
.dm-plot.is-new {
  background: #fff;
}
.dm-plot.is-done {
  background: var(--accent);
}
/* Agent marks: one per crew size step, walking the zone in pixel hops */
.dm-ag {
  position: absolute;
  display: none;
  width: max(3px, .5cqw);
  height: max(3px, .5cqw);
  background: #fff;
  box-shadow: 0 0 0 1px #000;
  pointer-events: none;
}
.dm-zone.is-busy .dm-ag--a,
.dm-zone.is-crew2 .dm-ag--b,
.dm-zone.is-crew3 .dm-ag--b,
.dm-zone.is-crew3 .dm-ag--c {
  display: block;
}
.dm-ag--a {
  animation: dm-walk-a 3.6s steps(4) infinite;
}
.dm-ag--b {
  animation: dm-walk-b 4.4s steps(4) infinite;
}
.dm-ag--c {
  animation: dm-walk-c 3.1s steps(4) infinite;
}
.dm-zone:nth-child(2) .dm-ag {
  animation-delay: -1.3s;
}
.dm-zone:nth-child(3) .dm-ag {
  animation-delay: -2.2s;
}
.dm-zone:nth-child(4) .dm-ag {
  animation-delay: -.7s;
}
@keyframes dm-walk-a {
  0%, 100% { left: 12%; top: 18%; }
  30% { left: 46%; top: 18%; }
  55% { left: 46%; top: 62%; }
  80% { left: 78%; top: 62%; }
}
@keyframes dm-walk-b {
  0%, 100% { left: 70%; top: 10%; }
  25% { left: 70%; top: 70%; }
  50% { left: 30%; top: 70%; }
  75% { left: 30%; top: 30%; }
}
@keyframes dm-walk-c {
  0%, 100% { left: 40%; top: 84%; }
  35% { left: 88%; top: 84%; }
  65% { left: 88%; top: 36%; }
}

/* Planner, company and meters */
.dm-side {
  grid-area: side;
  display: flex;
  flex-direction: column;
  gap: .9cqw;
  min-width: 0;
  min-height: 0;
}
.dm-plan {
  flex: 1 1 auto;
}
.dm-plan-log,
.dm-log-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.dm-plan-log::-webkit-scrollbar,
.dm-log-list::-webkit-scrollbar {
  display: none;
}
/* Each planner line types itself in when it mounts: --n characters, 18ms apiece */
.dm-pl {
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  animation: dm-type calc(var(--n) * 18ms) steps(var(--n), jump-start) both;
}
.dm-pl::before {
  content: "> ";
  color: var(--accent);
}
@keyframes dm-type {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
.dm-caret {
  display: block;
  width: .6em;
  height: 1.15em;
  margin-top: .15em;
  background: var(--accent);
  animation: dm-blink 1s steps(1, end) infinite;
}
.dm.is-done .dm-caret {
  display: none;
}
@keyframes dm-blink {
  50% { opacity: 0; }
}
.dm-meters {
  flex: none;
  gap: .8cqw;
}
.dm-co {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .6cqw;
}
.dm-stat {
  display: flex;
  flex-direction: column-reverse; /* number above its label */
  gap: .4cqw;
  min-width: 0;
  padding: .55cqw .6cqw;
  box-shadow: inset 0 0 0 1px var(--stone-800);
}
.dm-stat .dm-cap {
  overflow: hidden;
  text-overflow: ellipsis;
}
.dm-num {
  color: #fff;
  font-family: var(--font-body-alt);
  font-size: clamp(14px, 2.5cqw, 24px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.dm-stat--hot .dm-num {
  color: var(--accent);
}
.dm-bars {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: .6cqw .9cqw;
}
.dm-row {
  display: contents;
}
.dm-val {
  color: #fff;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dm-cells {
  display: grid;
  grid-template-columns: repeat(30, minmax(0, 1fr));
  gap: max(1px, .15cqw);
  height: max(6px, .9cqw);
}
.dm-cell {
  background: var(--stone-800);
}
.dm-cell.is-on {
  background: var(--accent);
}
.dm-cells--fuel .dm-cell.is-on {
  background: var(--stone-200);
}

/* Work log and footer */
.dm-log {
  grid-area: log;
}
.dm-ll {
  overflow: hidden;
  color: var(--stone-400);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.dm-who {
  margin-right: .6em;
  color: var(--stone-200);
}
.dm-ll.is-lead .dm-who {
  color: #fff;
}
.dm-ll.is-pl .dm-who {
  color: var(--accent);
}
.dm-foot {
  grid-area: foot;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .8cqw 1.4cqw;
  min-height: max(20px, 2.5cqw);
}
.dm-status {
  flex: 1 1 24cqw;
  min-width: 0;
  color: var(--stone-200);
}
.dm-status-k {
  margin-right: .7em;
  color: var(--accent);
  font-family: var(--font-caption);
  font-weight: 500;
  text-transform: uppercase;
}
.dm-acts {
  display: flex;
  flex: none;
  gap: max(12px, 1.4cqw);
}
.dm .pbtn-face {
  padding: max(5px, .6cqw) max(8px, 1.2cqw);
  font-size: clamp(10px, 1.3cqw, 13px);
}

@media (prefers-reduced-motion: reduce) {
  .dm-pl,
  .dm-caret,
  .dm-ag {
    animation: none;
  }
}

/* Phone-sized screen (Screen.dc.html sets scr-root--narrow under 460px across): the twelve tiles fill
   the field as a 4 x 3 grid and open with a tap (no dragging, so a finger on the screen still scrolls
   the page), the menubar keeps its file menu short, and every window opens full screen. Inputs are
   16px so iPhones do not zoom the page when one is focused. */
.scr-root--narrow .scr-bar {
  height: 22px;
}
.scr-root--narrow .scr-bar-row {
  height: 16px;
  gap: 6px;
  padding-inline: 8px;
  font-size: 10px;
}
.scr-root--narrow .scr-bar-menu {
  gap: 7px;
}
.scr-root--narrow .scr-bar-menu > span:nth-child(n+5) {
  display: none;
}
.scr-root--narrow .scr-logo {
  height: 9px;
}
.scr-root--narrow .scr-field {
  top: 26px;
  left: 6px;
  right: 6px;
  bottom: 6px;
}
.scr-root--narrow .scr-tile {
  justify-content: center;
  gap: 4px;
  width: 25%;
  height: 33.2%;
  min-width: 0;
  min-height: 0;
  padding: 2px;
  touch-action: manipulation;
}
.scr-root--narrow .scr-glyph {
  width: 28px;
  height: 28px;
  flex: none;
}
.scr-root--narrow .scr-label {
  font-size: 10px;
  line-height: 1.1;
  letter-spacing: 0;
}
.scr-root--narrow .win {
  left: 4px !important;
  top: 4px !important;
  right: 4px;
  bottom: 4px;
  width: auto !important;
  height: auto !important;
}
.scr-root--narrow .win-bar {
  height: 18px;
  padding-inline: 4px;
  touch-action: auto;
}
.scr-root--narrow .win-stripes {
  inset: 4px;
}
.scr-root--narrow .win-ctrls {
  gap: 6px;
  margin-left: 6px;
  padding-inline: 4px;
}
.scr-root--narrow .win-ctl {
  width: 10px;
  height: 10px;
}
.scr-root--narrow .win-ctl:first-child {
  position: relative;
}
/* a bigger target for the close box than the pixel it draws */
.scr-root--narrow .win-ctl:first-child::after {
  content: "";
  position: absolute;
  inset: -10px;
}
.scr-root--narrow .win-title {
  font-size: 11px;
}
.scr-root--narrow .ask .win-body {
  padding: 8px;
}
.scr-root--narrow .ask-mark {
  width: 60%;
  margin-bottom: 8px;
}
.scr-root--narrow .ask-line,
.scr-root--narrow .ask-ps1 {
  font-size: 12px;
}
.scr-root--narrow .ask-prompt {
  margin-top: 6px;
}
.scr-root--narrow .ask-in {
  font-size: 16px;
}
.scr-root--narrow .st {
  top: auto !important;
}
.scr-root--narrow .st .win-body {
  justify-content: center;
  gap: 10px;
  padding: 12px 14px;
}
.scr-root--narrow .st-line {
  font-size: 13px;
}
.scr-root--narrow .st-row {
  gap: 10px;
}
.scr-root--narrow .st-in {
  padding: 4px 8px;
  font-size: 16px;
}
.scr-root--narrow .st-go .pbtn-face {
  padding: 6px 12px;
  font-size: 12px;
}
.scr-root--narrow .st-msg,
.scr-root--narrow .st-demo {
  font-size: 10px;
}
/* the company window: the head, the live map, the work log and the footer, one column */
.scr-root--narrow .dm {
  --dm-fs: 10px;
  --dm-fs-s: 9px;
}
.scr-root--narrow .dm .win-body {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) 40px auto;
  grid-template-areas: "head" "map" "log" "foot";
  gap: 5px;
  padding: 6px 8px 8px;
}
/* once the wave reports, the report and its buttons take the log's place */
.scr-root--narrow .dm.is-done .win-body {
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "head" "map" "foot";
}
.scr-root--narrow .dm.is-done .dm-log {
  display: none;
}
.scr-root--narrow .dm-honest,
.scr-root--narrow .dm-side {
  display: none;
}
.scr-root--narrow .dm-head {
  justify-content: center;
}
.scr-root--narrow .dm-steps {
  gap: 3px;
}
.scr-root--narrow .dm-step {
  padding: 3px 6px;
}
.scr-root--narrow .dm-panel {
  gap: 4px;
  padding: 5px 6px;
}
.scr-root--narrow .dm-foot {
  gap: 6px 10px;
  min-height: 0;
}
.scr-root--narrow .dm-status {
  flex-basis: 100%;
}
.scr-root--narrow .dm-acts {
  gap: 12px;
}
.scr-root--narrow .dm .pbtn-face {
  padding: 5px 8px;
  font-size: 10px;
}
.scr-root--narrow .scr-skip {
  right: 12px;
  bottom: 8px;
}

/* Pilot OS (pilotos.js): one big window on the desktop, a rail of tabs and the app beside it */
.win.os { width: 96cqw; }
.os-app {
  display: grid;
  grid-template-columns: minmax(84px, 15cqw) minmax(0, 1fr);
  gap: 0;
  height: 53cqw;
  padding: 0;
  background: #f6f5f1;
  color: #16120f;
  font-family: var(--font-body-alt);
  font-size: clamp(11px, 1.45cqw, 14px);
  line-height: 1.3;
}
.os-rail {
  display: grid;
  align-content: start;
  gap: 2px;
  padding: 6px;
  background: #cecdc9;
  border-right: 1px solid #000;
}
.os-tab {
  padding: 5px 6px;
  border: 1px solid transparent;
  background: transparent;
  color: #000;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.os-tab:hover { background: #e6e5e0; }
.os-tab.is-on { background: #000; color: #fff; }
.os-tab:focus-visible, .os-opt:focus-visible, .os-cta:focus-visible { outline: 2px solid var(--copper-500); outline-offset: 1px; }
.os-main {
  min-width: 0;
  overflow: auto;
  padding: 1.6cqw;
  scrollbar-color: #6e6a64 #e6e5e0;
}
.os-main p { margin: 0; }
.os-load { padding: 16px; color: #3d3934; }
.os-h { margin: 0 0 6px; font: 400 clamp(16px, 2.2cqw, 22px)/1.1 var(--font-heading); }
.os-p { margin-bottom: 10px !important; color: #3d3934; }
.os-sub { margin: 10px 0 4px !important; color: #6e6a64; font-size: .86em; text-transform: uppercase; letter-spacing: .04em; }
.os-row { padding: 8px 0; border-top: 1px solid #cecdc9; }
.os-who { margin-bottom: 5px !important; color: #963e0a; font-size: .86em; text-transform: uppercase; }
.os-who span { margin-left: 6px; color: #16120f; font-size: 1.16em; text-transform: none; }
.os-opts { display: flex; flex-wrap: wrap; gap: 4px; }
.os-opt {
  padding: 4px 8px;
  border: 1px solid #000;
  background: #fff;
  color: #000;
  font: inherit;
  cursor: pointer;
  box-shadow: 1px 1px 0 #000;
}
.os-opt:hover { background: #f7ba8e; }
.os-opt.is-on { background: #ed670f; box-shadow: inset 1px 1px 0 #963e0a; }
.os-hint { margin-top: 5px !important; color: #6e6a64; font-size: .92em; }
.os-go { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.os-cta {
  padding: 7px 14px;
  border: 1px solid #000;
  background: #ed670f;
  color: #000;
  font: inherit;
  cursor: pointer;
  box-shadow: 2px 2px 0 #000;
}
.os-cta:hover { background: #f69a5b; }
.os-cta:disabled { background: #cecdc9; cursor: default; }
.os-tab2 { padding: 7px 10px; border: 1px solid #000; background: #fff; font: inherit; cursor: pointer; }
.os-log {
  margin: 10px 0 0;
  padding: 8px 10px;
  overflow: auto;
  background: #000;
  color: #f7ba8e;
  font: clamp(10px, 1.3cqw, 13px)/1.45 var(--font-mono);
  white-space: pre-wrap;
}
.os-cur { display: inline-block; width: .6em; height: 1em; margin-left: 2px; background: #f7ba8e; vertical-align: -.15em; animation: os-blink 1s steps(1, end) infinite; }
@keyframes os-blink { 50% { opacity: 0; } }
.os-res { margin-top: 10px; }
.os-big { font: 400 clamp(20px, 3.2cqw, 32px)/1.1 var(--font-heading); font-variant-numeric: tabular-nums; }
.os-main .is-up { color: #963e0a; }
.os-main .is-down { color: #6e6a64; }
.os-table { width: 100%; border-collapse: collapse; font: clamp(10px, 1.25cqw, 12px)/1.3 var(--font-mono); font-variant-numeric: tabular-nums; }
.os-table th { position: sticky; top: -1.6cqw; padding: 3px 6px 3px 0; background: #f6f5f1; text-align: left; border-bottom: 1px solid #000; font-weight: 500; }
.os-table td { padding: 3px 6px 3px 0; border-bottom: 1px solid #e6e5e0; white-space: nowrap; }
.os-table tbody tr[data-do] { cursor: pointer; }
.os-table tbody tr[data-do]:hover td { background: #f7ba8e; }
.os-table tr.is-on td { background: #000; color: #fff; }
.os-table .os-spec, .os-table .os-why { white-space: normal; }
.os-gap td { padding-top: 8px; color: #6e6a64; }
.os-checks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 0 0 10px; padding: 0; list-style: none; }
.os-checks li { display: grid; gap: 1px; padding: 6px; border: 1px solid #000; background: #fff; }
.os-checks b { font-weight: 400; color: #6e6a64; text-transform: uppercase; }
.os-checks .is-yes b { color: #963e0a; }
.os-checks small { color: #6e6a64; font-size: .86em; }
.os-crew { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.os-face { padding: 4px 8px; border: 1px solid #000; background: #fff; font: inherit; cursor: pointer; }
.os-face.is-on { background: #000; color: #fff; }
.os-card { display: grid; grid-template-columns: minmax(90px, 20cqw) minmax(0, 1fr); gap: 2cqw; align-items: start; padding: 10px; background: #000; color: #f6f5f1; }
.os-card .os-p { color: #cecdc9; }
.os-card .os-hint { color: #a09c94; }
.os-fig { display: block; width: 100%; aspect-ratio: 1 / 1.22; background: no-repeat 0 100%; background-size: 400% auto; }
.os-list { display: grid; gap: 3px; margin: 0 0 10px; padding-left: 14px; }
.os-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.os-tags li { padding: 3px 7px; background: #000; color: #f7ba8e; }
.os-bars { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.os-bars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; }
.os-bars b { font-weight: 400; font-variant-numeric: tabular-nums; }
.os-bars i { grid-column: 1 / -1; display: block; width: calc(var(--w) * 100%); height: 6px; background: #ed670f; }
.os-plans { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }
.os-plans button { display: grid; gap: 1px; width: 100%; padding: 5px 7px; border: 1px solid #cecdc9; background: #fff; font: inherit; text-align: left; cursor: pointer; }
.os-plans button:hover { border-color: #000; background: #f7ba8e; }
.os-plans b { font-weight: 400; }
.os-plans span { color: #6e6a64; font-size: .92em; }
.os-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 0 0 10px; padding: 0; list-style: none; }
.os-steps li { display: grid; gap: 2px; padding: 8px; background: #000; color: #f6f5f1; }
.os-steps b { color: #f69a5b; font-weight: 400; text-transform: uppercase; }
.os-badge { display: inline-block; padding: 3px 8px; background: #ed670f; color: #000; }
.os-tools { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }
.os-tools li { display: grid; grid-template-columns: minmax(110px, 18cqw) minmax(0, 1fr); gap: 8px; padding: 3px 0; border-bottom: 1px solid #e6e5e0; }
.os-tools code { font: inherit; font-family: var(--font-mono); }
.scr-root--narrow .win.os { width: 100%; }
.scr-root--narrow .os-app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: 96cqw; }
.scr-root--narrow .os-rail { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid #000; }
.scr-root--narrow .os-tab { white-space: nowrap; }
.scr-root--narrow .os-checks, .scr-root--narrow .os-steps { grid-template-columns: minmax(0, 1fr); }
@media (prefers-reduced-motion: reduce) { .os-cur { animation: none; } }
.os-kv { display: grid; gap: 0; margin: 0 0 10px; }
.os-kv div { display: grid; grid-template-columns: minmax(110px, 18cqw) minmax(0, 1fr); gap: 8px; padding: 2px 0; border-bottom: 1px solid #e6e5e0; }
.os-kv dt { color: #6e6a64; }
.os-kv dd { margin: 0; }
.os-kv code { overflow-wrap: anywhere; }
.os-tags--soft li { background: #e6e5e0; color: #16120f; }
.os-who { margin-top: 8px !important; }

/* the terminal: real events from the recording, streaming fast, with a prompt */
.os-main:has(.os-term) { padding: 0; overflow: hidden; }
.os-term {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  height: 100%;
  background: #000;
  color: #cecdc9;
  font: clamp(9px, 1.12cqw, 11.5px)/1.32 var(--font-mono);
}
.os-code { margin: 0; padding: 6px 10px; border-bottom: 1px solid #3d3934; background: #16120f; color: #a09c94; white-space: pre; overflow: hidden; }
.os-code p { margin: 0 !important; white-space: pre; }
.os-code p.is-pc { background: #963e0a; color: #fff; }
.os-out { min-height: 0; padding: 6px 10px; overflow: hidden; }
.os-out p { margin: 0 !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-dim { color: #6e6a64; }
.t-ok { color: #f7ba8e; }
.t-no { color: #a09c94; }
.t-buy { color: #fff; }
.t-win { color: #ed670f; font-weight: 600; }
.t-cmd { color: #fff; }
.t-say { color: #f69a5b; }
.os-status { padding: 3px 10px; background: #ed670f; color: #000; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-prompt { display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-top: 1px solid #3d3934; }
.os-prompt label { color: #f69a5b; white-space: nowrap; }
.os-prompt input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: #fff; font: inherit; }
/* training and results */
.os-plan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 0 0 8px; padding: 0; list-style: none; counter-reset: st; }
.os-plan li { display: grid; gap: 2px; padding: 7px; background: #000; color: #e6e5e0; counter-increment: st; }
.os-plan b { color: #f69a5b; font-weight: 400; }
.os-plan b::before { content: counter(st) ". "; }
.os-styles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.os-styles button { display: grid; gap: 2px; padding: 7px; border: 1px solid #000; background: #fff; font: inherit; text-align: left; cursor: pointer; box-shadow: 1px 1px 0 #000; }
.os-styles button:hover { background: #f7ba8e; }
.os-styles b { font-weight: 400; }
.os-styles span { color: #6e6a64; font-size: .92em; }
.os-styles i { font-style: normal; font-variant-numeric: tabular-nums; }
.os-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; margin: 0; }
.os-stats div { display: grid; gap: 1px; padding: 5px 6px; background: #fff; border: 1px solid #cecdc9; }
.os-stats dt { color: #6e6a64; font-size: .86em; }
.os-stats dd { margin: 0; font-variant-numeric: tabular-nums; }
.os-bars--mini li { gap: 1px 8px; }
.os-bars--mini i { height: 4px; }
.os-bars--mini i.neg { background: #a09c94; }
.os-gens { display: flex; align-items: flex-end; gap: 2px; height: 70px; padding: 4px; background: #000; }
.os-gens span { display: block; background: #ed670f; }
.scr-root--narrow .os-plan, .scr-root--narrow .os-styles, .scr-root--narrow .os-stats { grid-template-columns: minmax(0, 1fr); }
.os-warn { margin: 0 0 10px !important; padding: 6px 8px; border-left: 3px solid #ed670f; background: #fff; }
.os-script { display: grid; gap: 4px; margin: 0; padding: 8px 8px 8px 28px; background: #000; color: #e6e5e0; font: clamp(10px, 1.2cqw, 12px)/1.4 var(--font-mono); }