/* The crew console.
   Every colour is a token the agents already share, so the page and the product are one thing. The
   handful of values defined here are the console's own furniture: the hairline grid behind
   everything, the two glows, and the ink the marks are drawn in. They are declared for light on
   :root and redefined for dark under both the system preference and an explicit choice, exactly the
   way tokens.css does it, so the toggle wins in either direction. */

:root {
  --rule: rgba(23, 23, 21, 0.05);
  --rule-strong: rgba(23, 23, 21, 0.075);
  --bloom-a: rgba(47, 75, 216, 0.10);
  --bloom-b: rgba(47, 75, 216, 0.045);
  --mk-line: rgba(23, 23, 21, 0.20);
  --mk-glow: rgba(47, 75, 216, 0.16);
  --tile: #ffffff;
  --tile-line: #e6e6e1;
  --track: rgba(23, 23, 21, 0.10);
  --cell: 26px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --rule: rgba(255, 255, 255, 0.045);
    --rule-strong: rgba(255, 255, 255, 0.07);
    --bloom-a: rgba(142, 162, 255, 0.13);
    --bloom-b: rgba(142, 162, 255, 0.05);
    --mk-line: rgba(255, 255, 255, 0.20);
    --mk-glow: rgba(142, 162, 255, 0.22);
    --tile: #1e1e22;
    --tile-line: #2f2f35;
    --track: rgba(255, 255, 255, 0.11);
  }
}

:root[data-theme="dark"] {
  --rule: rgba(255, 255, 255, 0.045);
  --rule-strong: rgba(255, 255, 255, 0.07);
  --bloom-a: rgba(142, 162, 255, 0.13);
  --bloom-b: rgba(142, 162, 255, 0.05);
  --mk-line: rgba(255, 255, 255, 0.20);
  --mk-glow: rgba(142, 162, 255, 0.22);
  --tile: #1e1e22;
  --tile-line: #2f2f35;
  --track: rgba(255, 255, 255, 0.11);
}

/* ------------------------------------------------------------------ ground */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, p, ul, ol, dl, dd, dt, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.skip {
  position: absolute; left: var(--s-3); top: var(--s-3); z-index: 100;
  transform: translateY(-250%);
  background: var(--surface); color: var(--ink);
  padding: var(--s-2) var(--s-4); border: 1px solid var(--line-strong); border-radius: var(--radius);
}
.skip:focus { transform: none; }

/* The board the whole thing sits on. A hairline grid and two soft glows, painted once, fixed, and
   behind everything. Nothing here moves. */
.board {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60ch 44ch at 18% -6%, var(--bloom-a), transparent 70%),
    radial-gradient(52ch 40ch at 92% 2%, var(--bloom-b), transparent 68%),
    repeating-linear-gradient(to right, var(--rule) 0 1px, transparent 1px var(--cell)),
    repeating-linear-gradient(to bottom, var(--rule) 0 1px, transparent 1px var(--cell));
}
.board::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 0, var(--ground) 78%);
}

.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--s-4); }

/* ------------------------------------------------------------------ the bar */

.bar {
  position: sticky; top: 0; z-index: 40;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .bar { background: var(--ground); }
}
.bar__in {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: 52px;
}
.brand { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.brand__mark {
  width: 26px; height: 26px; flex: none;
  border-radius: var(--radius-sm);
  background: var(--accent); color: var(--ink-inverse);
  display: grid; place-items: center;
  font-size: 10px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide);
}
.brand__name { font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); font-size: var(--text-sm); }
.bar__spacer { flex: 1 1 auto; }
.bar__stat {
  display: none;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-faint);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.bar__stat b { color: var(--ink-soft); font-weight: var(--weight-semibold); }
@media (min-width: 720px) { .bar__stat { display: inline; } }

.theme {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: var(--weight-medium);
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
}
.theme:hover { border-color: var(--accent); color: var(--accent); }
.theme svg { width: 13px; height: 13px; flex: none; }

/* ------------------------------------------------------------------ the hero */

.hero { padding: var(--s-6) 0 var(--s-5); }
.hero__in {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 940px) {
  .hero { padding: var(--s-7) 0 var(--s-6); }
  .hero__in { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: var(--s-7); }
}

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-faint);
}
.eyebrow::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}

.hero h1 {
  margin-top: var(--s-4);
  font-size: clamp(1.75rem, 5.2vw, 2.85rem);
  line-height: 1.06;
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-semibold);
  max-width: 16ch;
  text-wrap: balance;
}
.hero__lede {
  margin-top: var(--s-4);
  color: var(--ink-soft);
  max-width: 52ch;
}

/* The tally. Four readings of the crew as a whole, in the same mono the cards use for numbers. */
.tally {
  margin-top: var(--s-5);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
@media (min-width: 560px) { .tally { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tally__cell { background: var(--surface); padding: var(--s-3) var(--s-3) var(--s-3); min-width: 0; }
.tally__n {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.6rem;
  line-height: 1;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.tally__cell[data-tone="live"] .tally__n { color: var(--accent); }
.tally__cell[data-tone="wait"] .tally__n { color: var(--caution); }
.tally__k {
  display: block;
  margin-top: 6px;
  font-size: var(--text-xs);
  color: var(--ink-faint);
  line-height: var(--leading-snug);
}

/* ------------------------------------------------------------------ the crew map */

.map {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.map__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-faint);
}
.map__live { display: inline-flex; align-items: center; gap: 6px; color: var(--positive); }
.map__live i {
  width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  animation: beat 3.6s ease-in-out infinite;
}
@keyframes beat { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

.map__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border-bottom: 1px solid var(--line);
}
.node {
  position: relative;
  background: var(--surface);
  display: grid;
  place-items: center;
  gap: 4px;
  padding: 14px 4px 10px;
  cursor: pointer;
  color: var(--ink-faint);
  transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
}
.node .mk--pip { width: 40px; height: 40px; }
.node:hover, .node:focus-visible, .node[data-on="1"] { background: var(--accent-wash); }
.node[data-state="finished"] { color: var(--accent); }
.node[data-state="built"] { color: var(--caution); }
.node[data-state="planned"] { color: var(--ink-faint); }
.node[data-state="planned"] .mk { opacity: 0.5; }
.node__n {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.map__read {
  padding: var(--s-3) var(--s-4);
  min-height: 62px;
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
  border-bottom: 1px solid var(--line);
}
.map__name { font-weight: var(--weight-semibold); font-size: var(--text-sm); }
.map__sub { font-size: var(--text-xs); color: var(--ink-faint); line-height: var(--leading-snug); }

.map__read:last-child { border-bottom: 0; }

.wires { margin-top: var(--s-5); }
.wires h2 {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: var(--weight-medium);
  margin-bottom: var(--s-3);
}

/* ------------------------------------------------------------------ tags */

.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  display: inline-flex; align-items: center; gap: 5px;
  max-width: 100%;
  padding: 3px 9px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--neutral-wash);
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}
.tag b {
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
}
.tag[data-need="1"] { border-color: var(--accent-line); background: var(--accent-wash); color: var(--accent); }
.tag[data-need="1"] b { color: var(--accent); }

/* ------------------------------------------------------------------ the crew */

.crew { padding: var(--s-4) 0 var(--s-6); }
.crew__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
  flex-wrap: wrap;
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s-4);
}
.crew__head h2 {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: var(--weight-medium);
}
.crew__legend { display: flex; gap: var(--s-3); flex-wrap: wrap; font-size: var(--text-xs); color: var(--ink-faint); }
.crew__legend span { display: inline-flex; align-items: center; gap: 5px; }
.crew__legend i { width: 7px; height: 7px; border-radius: 2px; background: currentColor; }
.crew__legend span[data-state="finished"] { color: var(--accent); }
.crew__legend span[data-state="built"] { color: var(--caution); }

.grid {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 286px), 1fr));
}

.card {
  position: relative;
  display: flex; flex-direction: column;
  gap: var(--s-3);
  min-width: 0;
  padding: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--speed) var(--ease), transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
/* The hairline along the top edge. It is the only thing on the card that reacts to the pointer with
   a movement of its own, and it moves once, to the right, and stops. */
.card::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(to right, transparent, var(--accent), transparent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 420ms var(--ease);
}
a.card:hover, a.card:focus-visible, .card[data-on="1"] {
  border-color: var(--accent-line);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
a.card:hover::before, a.card:focus-visible::before, .card[data-on="1"]::before { transform: scaleX(1); }
.card[data-state="planned"] { background: var(--surface-sunken); }

.card__top { display: flex; align-items: flex-start; gap: var(--s-3); }
.card__mark {
  flex: none;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-sunken);
  color: var(--accent);
  transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.card[data-state="built"] .card__mark { color: var(--caution); }
.card[data-state="planned"] .card__mark { color: var(--ink-faint); background: var(--neutral-wash); }
a.card:hover .card__mark, a.card:focus-visible .card__mark, .card[data-on="1"] .card__mark {
  border-color: var(--accent-line);
  box-shadow: 0 0 0 4px var(--mk-glow);
}

.card__id { flex: 1 1 auto; min-width: 0; }
.card__name {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
.card__meta {
  margin-top: 5px;
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.03em;
  color: var(--ink-faint);
  text-transform: uppercase;
}
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  background: var(--neutral-wash);
  color: var(--ink-soft);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
}
.pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.pill[data-state="finished"] { border-color: var(--positive-line); background: var(--positive-wash); color: var(--positive); }
.pill[data-state="built"] { border-color: var(--caution-line); background: var(--caution-wash); color: var(--caution); }

.card__job { color: var(--ink-soft); font-size: var(--text-sm); line-height: var(--leading-snug); }

/* ------------------------------------------------------------------ the figures */

.figs {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--tile-line);
  border: 1px solid var(--tile-line);
  border-radius: var(--radius);
  overflow: hidden;
}
.fig {
  background: var(--tile);
  padding: var(--s-3) 10px 10px;
  min-width: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.fig__v {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.15rem;
  line-height: 1;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
  color: var(--ink);
  white-space: nowrap;
}
.fig__v small {
  font-size: 0.62em;
  font-weight: var(--weight-medium);
  color: var(--ink-faint);
  letter-spacing: 0;
}
.fig[data-zero="1"] .fig__v { color: var(--caution); }
.fig__k {
  font-size: 10.5px;
  line-height: 1.3;
  color: var(--ink-faint);
  overflow-wrap: anywhere;
}
/* The bar under a fraction. It is drawn to the real ratio and it is the only place on the card
   where a number is also a length. A ratio of nought keeps its track, so nought is visible. */
.fig__bar {
  height: 3px;
  border-radius: 2px;
  background: var(--track);
  overflow: hidden;
}
/* The fill is written into the page by the build, so with no script at all the bar is already at
   the right length. The script only takes it back to nought and lets it grow once. */
.fig__bar i {
  display: block; height: 100%;
  width: 100%;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(var(--fill, 1));
  transform-origin: left center;
}
.js .fig__bar i { transform: scaleX(0); transition: transform 760ms var(--ease); }
.js .is-in .fig__bar i { transform: scaleX(var(--fill, 1)); }
.fig[data-zero="1"] .fig__bar { background: repeating-linear-gradient(90deg, var(--caution-line) 0 3px, transparent 3px 6px); }

/* An agent that has produced nothing gets one cell saying so, rather than three cells of padding. */
.figs--none { grid-template-columns: 1fr; }
.figs--none .fig__v { font-size: 1rem; color: var(--ink-soft); }
.figs--none .fig__bar { background: repeating-linear-gradient(90deg, var(--track) 0 3px, transparent 3px 7px); }
.figs--none .fig__k { max-width: 46ch; }

/* ------------------------------------------------------------------ screens and the foot */

.card__rows { display: grid; gap: var(--s-3); }
.row__k {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 6px;
}
.screen {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}
.screen b {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-faint);
  font-weight: var(--weight-medium);
}

.card__note {
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--ink-faint);
  border-top: 1px solid var(--line);
  padding-top: var(--s-3);
}
.card__go {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--accent);
}
.card__go span:last-child { font-family: var(--font-mono); font-size: var(--text-xs); }
.card[data-state="built"] .card__go, .card[data-state="planned"] .card__go { color: var(--ink-faint); font-weight: var(--weight-medium); }

/* ------------------------------------------------------------------ the foot */

.foot { border-top: 1px solid var(--line); padding: var(--s-5) 0 var(--s-7); }
.foot p { color: var(--ink-faint); font-size: var(--text-sm); max-width: var(--measure); }
.foot p + p { margin-top: var(--s-3); }

/* ------------------------------------------------------------------ the marks */

.mk { display: block; overflow: visible; }
.mk__hoop, .mk__orbit { fill: none; stroke: var(--mk-line); stroke-width: 1.1; }
.mk__ticks line { stroke: var(--mk-line); stroke-width: 1; }
.mk__spokes line { stroke: var(--mk-line); stroke-width: 0.9; }
.mk__node { fill: currentColor; opacity: 0.35; }
.mk__plate { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linejoin: round; }
.mk__seed { fill: currentColor; }
.mk__pulse { fill: currentColor; opacity: 0.9; }
.mk--pip .mk__node { opacity: 0.4; }
.mk--pip .mk__plate { stroke-width: 1.4; }

/* Parallax. The mark leans towards the pointer, at most two pixels, and returns when it leaves. */
.card__mark .mk {
  transform: translate3d(calc(var(--px, 0) * 2px), calc(var(--py, 0) * 2px), 0);
  transition: transform 240ms var(--ease);
}

/* ------------------------------------------------------------------ narrow */

@media (max-width: 420px) {
  .wrap { padding: 0 var(--s-3); }
  .hero { padding: var(--s-5) 0 var(--s-4); }
  .hero h1 { max-width: none; }
  .card { padding: var(--s-3); border-radius: var(--radius); }
  .card__mark { width: 48px; height: 48px; }
  .card__mark .mk { width: 52px; height: 52px; }
  .fig { padding: 10px 8px 8px; }
  .fig__v { font-size: 1.05rem; }
  .tally__n { font-size: 1.35rem; }
  .node { padding: 10px 2px; }
}

/* ------------------------------------------------------------------ still */

/* Asked for a still page, this is a still page. The script checks the same thing and never starts
   its clock, so the marks hold the pose they were drawn in. */
@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;
  }
  .card::before { transform: scaleX(0); }
  a.card:hover, a.card:focus-visible, .card[data-on="1"] { transform: none; }
  .card__mark .mk { transform: none; }
  .map__live i { animation: none; opacity: 1; }
  .js .fig__bar i { transform: scaleX(var(--fill, 1)); }
}