/* 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;
}
.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;
  }
}