/* App shell styling. Dark by default: the particles are the bright thing on
   the page and everything else gets out of their way.

   The palette lives in custom properties because docs 07 (stats) and 09 (race)
   render into containers this file lays out and must match without copying hex
   values. The particle colours mirror the renderer's DEFAULT_THEME in
   js/sim/render.js — canvas cannot read CSS variables, so the two lists are
   kept in step by hand. No web fonts, no framework, no external asset. */

:root {
  --bg: #0b0e13;
  --panel: #141922;
  --panel-2: #1b2230;
  --line: #2a3342;
  --ink: #dbe3f0;
  --ink-dim: #8b97ab;
  --ink-faint: #5b6678;

  /* Particle kinds, mirrored from the renderer. */
  --key: #7fb2ff;
  --doc: #ffd479;
  --ghost: #39414f;

  --accent: #7fb2ff;
  --warn: #ffd479;
  --bad: #ff8c7a;

  --radius: 6px;
  --bar-h: 52px;
  --font: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box }

html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font: 13px/1.5 var(--font);
  overflow: hidden;              /* the canvas owns the viewport */
}

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

/* --- header ------------------------------------------------------------- */

.topbar {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 0 14px;
  height: 40px;
  flex: 0 0 auto;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.brand {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  margin: 0;
  white-space: nowrap;
}

.privacy {
  margin: 0;
  color: var(--ink-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.namespace {
  margin: 0 0 0 auto;
  color: var(--ink-faint);
  white-space: nowrap;
}

/* --- stage -------------------------------------------------------------- */

.stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;                 /* so the canvas can shrink inside flex */
}

.board {
  display: block;
  width: 100%;
  height: 100%;
}

/* Doc 09 renders two boards in here and covers the single one. Empty until
   then, and an empty overlay must not eat the canvas's clicks. */
.race-mount {
  position: absolute;
  inset: 0;
  background: var(--bg);
}

.race-mount:empty { display: none }

.warnings {
  position: absolute;
  left: 12px;
  top: 12px;
  max-width: min(460px, calc(100% - 24px));
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  pointer-events: none;
}

.warnings li {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--warn);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  color: var(--ink-dim);
  font-size: 11px;
  line-height: 1.45;
}

.warnings button {
  flex: 0 0 auto;
  margin-left: auto;
  border: 0;
  background: none;
  color: var(--ink-faint);
  cursor: pointer;
  font: inherit;
  line-height: 1;
}

.warnings button:hover { color: var(--ink) }

/* --- paste sheet -------------------------------------------------------- */

/* A sheet over the canvas, not a second column: the simulation is the
   interface and this slides away once a run starts. */
.sheet {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 18px;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(2px);
  transition: opacity .18s ease, transform .18s ease;
}

.sheet[hidden] { display: none }

.sheet.closing {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}

.sheet-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(760px, 100%);
  max-height: 100%;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: 0 18px 48px rgb(0 0 0 / .45);
}

.sheet-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sheet-head h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
}

.sheet-head button { margin-left: auto; font-size: 16px }

.hint {
  margin: 0;
  color: var(--ink-faint);
  font-size: 11px;
}

.hint code, .count-field code { color: var(--ink-dim) }

.error {
  margin: 0;
  padding: 7px 9px;
  border: 1px solid var(--bad);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bad) 12%, transparent);
  color: var(--ink);
}

.error[hidden] { display: none }
.error .detail { display: block; margin-top: 3px; color: var(--ink-dim) }

textarea {
  flex: 1 1 auto;
  min-height: 180px;
  resize: none;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
  font: 12px/1.5 var(--font);
  tab-size: 2;
}

textarea:focus-visible, input:focus-visible, select:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.sheet-row {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 14px;
}

.label {
  display: block;
  margin-bottom: 4px;
  color: var(--ink-faint);
  font-size: 11px;
}

.sample-buttons { display: flex; gap: 6px; flex-wrap: wrap }

.count-field input {
  width: 12ch;
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
}

.count-field .hint { margin-top: 4px }

.sheet-row .primary { margin-left: auto }

/* --- buttons ------------------------------------------------------------ */

button {
  font: inherit;
  color: var(--ink);
  cursor: pointer;
}

.ghost, .sample-buttons button {
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
}

.ghost:hover, .sample-buttons button:hover { border-color: var(--ink-faint) }

.sample-buttons button[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--accent);
}

.primary {
  padding: 7px 16px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 18%, var(--panel-2));
  font-weight: 600;
}

.primary:hover { background: color-mix(in srgb, var(--accent) 30%, var(--panel-2)) }

/* --- transport ---------------------------------------------------------- */

.transport {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  height: var(--bar-h);
  padding: 0 12px;
  border-top: 1px solid var(--line);
  background: var(--panel);
}

.transport .play { width: 34px }

.scrub {
  flex: 1 1 auto;
  min-width: 80px;
  height: 20px;
  margin: 0;
  accent-color: var(--accent);
  background: none;
  cursor: pointer;
}

.clock {
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.speed select {
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  color: var(--ink);
  font: inherit;
}

/* Doc 07 renders into this. Empty until then, and an empty flex child with a
   gap would otherwise leave a hole in the bar. */
.stats:empty { display: none }

.stats {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .privacy { font-size: 11px; white-space: normal }
  .namespace { display: none }
  .clock { font-size: 11px }
}

@media (prefers-reduced-motion: reduce) {
  .sheet { transition: none }
}