/* Operator Lab, translated from a fixed 1920x1080 canvas to a fluid page.
   The invariants that carry the brand — 0 radius, 1px borders, mono uppercase
   kickers at 2px tracking, the near-black grid field — never scale away. */

@font-face { font-family: 'Inter'; src: url('../assets/fonts/inter-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../assets/fonts/inter-900.woff2') format('woff2'); font-weight: 900; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('../assets/fonts/jetbrains-mono-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --u: 8px;
  --header-h: 66px;
  --tabs-h: 0px;

  --fs-headline: clamp(24px, 2.6vw, 34px);
  --fs-body: clamp(14px, 1.05vw, 16px);
  --fs-mono: clamp(13px, 0.95vw, 15px);
  --fs-kicker: 12px;
  --fs-small: 12px;
}

* { box-sizing: border-box; }

/* Any rule that sets `display` outbeats the user-agent [hidden] rule, and
   several panels here are display:grid / display:flex. Restore the attribute
   as the final word so `element.hidden = true` always means hidden. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
}

body {
  min-height: 100dvh;
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--fs-body);
  line-height: 1.45;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 12%, rgba(107, 154, 239, .09), transparent 33%),
    radial-gradient(circle at 12% 88%, rgba(233, 116, 88, .06), transparent 30%),
    var(--bg);
}

/* Texture, not layout: the 48px cell stays fixed at every viewport width. */
#field-grid {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
}

h1, h2, h3, p, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }

button, input { font: inherit; color: inherit; }

a { color: var(--accent-2); }

.kicker {
  font-family: var(--mono);
  font-weight: 700;
  font-size: var(--fs-kicker);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* ── tones ────────────────────────────────────────────────────────────────
   A tone names an epistemic state. Never reuse one decoratively. */
.t-default { color: var(--text); }
.t-dir     { color: var(--accent-2); }
.t-exec    { color: var(--accent-4); }
.t-link    { color: var(--accent-3); }
.t-virtual { color: var(--text-muted); font-style: italic; }
.t-err     { color: var(--accent-warn); }
.t-ok      { color: var(--accent-4); }
.t-muted   { color: var(--text-secondary); }
.t-accent  { color: var(--accent-1); }

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

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--u);
  z-index: 1000;
  padding: 8px 14px;
  background: var(--accent-2);
  color: var(--bg);
  font-family: var(--mono);
  font-size: var(--fs-small);
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
}
.skip-link:focus { top: var(--u); }

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

::selection { background: rgba(233, 116, 88, .32); }

.scrollback::-webkit-scrollbar,
.map-tree::-webkit-scrollbar,
.pane::-webkit-scrollbar { width: 10px; height: 10px; }
.scrollback::-webkit-scrollbar-thumb,
.map-tree::-webkit-scrollbar-thumb,
.pane::-webkit-scrollbar-thumb { background: var(--border); }
.scrollback::-webkit-scrollbar-track,
.map-tree::-webkit-scrollbar-track,
.pane::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}