/* ── JARVIS design tokens ────────────────────────────────────────────────────
   Direction: a British scientific instrument, not a gaming HUD.
   Phosphor cyan on near-black, engineering type, hairline rules, tick marks.  */

:root {
  /* Ground */
  --bg:            #05080b;
  --bg-panel:      #0a1017;
  --bg-raised:     #0d1621;

  /* Phosphor — paler and colder than neon cyan, like a calibration screen */
  --phosphor:      #7fe9f5;
  --arc:           #35d0e8;
  --arc-deep:      #1b7c8c;

  /* Signal colours */
  --amber:         #e8a33d;
  --alert:         #ff6b5e;
  --ok:            #6ee7a8;

  /* Ink */
  --text:          #b8ced8;
  --text-quiet:    #6b8794;
  --text-faint:    #3d5461;

  /* Rules */
  --rule:          rgba(127, 233, 245, 0.13);
  --rule-strong:   rgba(127, 233, 245, 0.34);

  /* Type */
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Metrics */
  --pad: 18px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  font-size: 14px;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Scanlines + a faint vignette. Static overlay, no animation — it is atmosphere,
   not an indicator, so it must never look like it is reporting something. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background:
    repeating-linear-gradient(to bottom, rgba(127,233,245,0.014) 0 1px, transparent 1px 4px),
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.55) 100%);
}

/* ── Type roles ──────────────────────────────────────────────────────────── */

.label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-quiet);
}

.readout { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.quiet { color: var(--text-quiet); }
.faint { color: var(--text-faint); }

[hidden] { display: none !important; }

/* ── Controls ────────────────────────────────────────────────────────────── */

button {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  padding: 9px 15px;
  cursor: pointer;
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
button:hover  { background: rgba(127,233,245,0.07); border-color: var(--arc); color: var(--phosphor); }
button:active { background: rgba(127,233,245,0.14); }
button:focus-visible { outline: 2px solid var(--phosphor); outline-offset: 2px; }
button[disabled] { opacity: .4; cursor: not-allowed; }

input, textarea, select {
  font-family: var(--mono);
  font-size: 13px;
  width: 100%;
  color: var(--text);
  background: var(--bg-raised);
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 10px 12px;
}
input::placeholder, textarea::placeholder { color: var(--text-faint); }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--arc);
  box-shadow: inset 0 0 0 1px rgba(53,208,232,0.25);
}
input[type=range] { padding: 0; background: transparent; border: none; accent-color: var(--arc); }
input[type=file]  { padding: 8px; font-size: 11px; }
input[type=checkbox] { width: auto; accent-color: var(--arc); }

a { color: var(--phosphor); }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--rule-strong); }
::-webkit-scrollbar-track { background: transparent; }

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