/* base.css — the ONE sheet every #05070d page links FIRST: document surface,
   control face, validation states, .hidden. Palette tokens live in
   colors.css (imported below; JS reads the same file via src/palette.js).
   Page sheets carry deltas only. Layering: colors → base → (harness | hangar) → page.
   fx-editor + gas-look-demo keep own palettes on purpose: not linked.
   Accent face is scoped to BUTTONS (`button.on` / `button.primary`) — a bare
   `.on`/`.sel` would collide with corvette #steerMark.on (a div, opacity-based)
   and hangar .shipCard.sel (a div, own face). ID-scoped page rules outrank
   it (#perfBtn.on red, missiles #list button.on) — that is the intent. */

@import url(./colors.css);

/* ---- surface: app page, no scroll (sound.css undoes: it's a document) ---- */
html, body { margin: 0; height: 100%; background: var(--bg); overflow: hidden;
  font: 13px/1.5 Consolas, monospace; color: var(--ink); }
canvas { display: block; }

/* ---- control face: bg/border/radius/font shared; color+padding = page delta ---- */
input, select, button {
  background: var(--ctl); color: var(--ink-ctl); border: 1px solid var(--line);
  border-radius: 4px; font: inherit;
}
button { cursor: pointer; }
button:hover { background: var(--ctl-hover); }
/* accent face: toggled-on (.on) or the page's primary action (.primary).
   Specificity (0,1,1): any #id rule on the same button wins. */
button.on, button.primary { background: var(--acc); border-color: var(--acc-line); color: var(--ink-hi); }
/* boot/status log under a menu or editor; pages override margin only */
#bootlog { margin-top: 8px; color: var(--dim); white-space: pre-wrap; font-size: 11px; }

/* ---- editor validation: save round-trip sets these (sound, missiles, mounts) ---- */
input.saved, select.saved { border-color: var(--ok); }
input.bad,   select.bad   { border-color: var(--err); }

.hidden { display: none !important; }