/* Reset and typography. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

/* One restrained glow over a fine dot grid, anchored to the viewport so it never
   appears to slide out from behind the panels above it — the same restrained
   "engineered, not tinted" texture the deployed agent-network sites use (see
   nsdeploy/generate.py::_theme_css), so the console and the sites it produces read
   as one family instead of two unrelated products. ~6% ink and a single soft accent
   wash: enough to feel considered, never enough to compete with content sitting on
   top of it. The map view supplies its own full-bleed artwork over this, so it is
   harmless there too. */
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(1100px 620px at 50% -18%,
      color-mix(in srgb, var(--accent) 9%, transparent) 0%, transparent 70%),
    radial-gradient(color-mix(in srgb, var(--text-primary) 6%, transparent) 1px, transparent 1px),
    radial-gradient(color-mix(in srgb, var(--text-primary) 6%, transparent) 1px, transparent 1px),
    var(--surface-page);
  background-size: auto, 28px 28px, 28px 28px, auto;
  background-position: 50% 0, 0 0, 14px 14px, 0 0;
  background-attachment: fixed, fixed, fixed, fixed;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 650;
  letter-spacing: -0.012em;
  line-height: 1.25;
}
h1 { font-size: 1.15rem; }
h2 { font-size: 1.02rem; }
h3 { font-size: 0.92rem; }

p { margin: 0; }

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover { color: var(--accent-hover); }

code,
kbd,
pre {
  font-family: var(--font-mono);
  font-size: 0.86em;
}

/* Visible focus everywhere, but only for keyboard users. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* Screen-reader-only text: carries meaning the icon alone would not. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

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