/* OPERATOR 999 — base element + layout primitives. */

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Subtle CRT scanlines across everything; non-interactive. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.018) 0,
    rgba(255, 255, 255, 0.018) 1px,
    transparent 1px,
    transparent 3px
  );
  opacity: 0.6;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.95;
  font-weight: 900;
}

a { color: var(--fg); text-decoration: none; }
a:hover { color: var(--red-bright); }

::selection { background: var(--red); color: #fff; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }

* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-2); }
::-webkit-scrollbar-track { background: var(--bg-1); }

img { max-width: 100%; display: block; }

/* ── Utilities ─────────────────────────────────────────── */
.mono { font-family: var(--mono); }
.dim { color: var(--fg-dim); }
.faint { color: var(--fg-faint); }
.upper { text-transform: uppercase; }
.tabular { font-variant-numeric: tabular-nums; }
.red { color: var(--red); }
.amber { color: var(--amber); }
.green { color: var(--green); }
.right { text-align: right; }
.center { text-align: center; }
.hidden { display: none !important; }
.nowrap { white-space: nowrap; }

.label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

.hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--s3) 0;
}

.stack > * + * { margin-top: var(--s3); }
.row { display: flex; align-items: center; gap: var(--s3); }
.row--between { justify-content: space-between; }
.grow { flex: 1 1 auto; }

/* App scaffold: fixed top bar + scrollable content region. */
.app { min-height: 100%; display: flex; flex-direction: column; }
.app__main { flex: 1 1 auto; min-height: 0; }