/* =============================================================================
   Raven — base
   =============================================================================
   Reset, document defaults, typography and focus. Everything here is global;
   anything with a name belongs in components.css.
   ========================================================================== */

/* --- Reset ---------------------------------------------------------------- */

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

html, body, h1, h2, h3, h4, p, figure, blockquote, dl, dd,
ul, ol, fieldset, legend { margin: 0; padding: 0; }

ul[role="list"], ol[role="list"] { list-style: none; }

/* --- Document ------------------------------------------------------------- */

html {
  /* Rule 1 of the responsive contract: THE PAGE BODY NEVER SCROLLS
     HORIZONTALLY, AT ANY WIDTH. Wide content scrolls inside its own container
     (see .scroll-x), never by stretching the document. */
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  color-scheme: dark light;
}

body {
  min-height: 100vh;
  overflow-x: hidden;

  background: var(--bg);
  color: var(--ink);

  font-family: var(--font-sans);
  font-size: var(--fs-md);
  font-weight: var(--fw-regular);
  line-height: var(--lh);

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Tabular numerals everywhere by default. Dates, counts, ports and IPs all
     sit in columns, and proportional digits make a column of numbers ragged. */
  font-variant-numeric: tabular-nums;
}

/* --- Typography ----------------------------------------------------------- */
/* Headings are heavy and confident, SIZED TO ANCHOR A LAYOUT rather than label
   it. Much of the interface's perceived mass comes from type, and type ages
   better than texture. Letter-spacing tightens as size grows. */

h1, h2, h3, h4 {
  font-weight: var(--fw-semi);
  line-height: var(--lh-tight);
  color: var(--ink);
}

h1 { font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: var(--ls-h1); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }

/* MACHINE DATA IS ALWAYS MONOSPACE. Every hostname, IP, MAC, fingerprint and
   secret. This is FUNCTIONAL, not stylistic: monospace makes a transposed digit
   visible and distinguishes 0/O and 1/l — in a system where that distinction can
   cost an hour. */
code, kbd, samp, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.925em;   /* mono runs optically larger; equalise it */
  font-variant-ligatures: none;   /* never ligature machine data */
}

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover { color: var(--accent-strong); text-decoration: underline; }

/* --- Focus ---------------------------------------------------------------- */
/* KEYBOARD-FIRST. The people using this live on keyboards, and EVERY
   HOVER-REVEALED ACTION MUST ALSO APPEAR ON FOCUS (§5A.3) — hover-only is not
   acceptable, because keyboard and touch need the same affordance.

   :focus-visible rather than :focus, so a mouse click doesn't leave a ring, but
   never at the cost of the keyboard path. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* --- Forms ---------------------------------------------------------------- */

button, input, select, textarea {
  font: inherit;
  color: inherit;
}
button { cursor: pointer; background: none; border: none; }

/* --- Media ---------------------------------------------------------------- */

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }

/* --- Utility -------------------------------------------------------------- */

/* Wide content scrolls inside ITS OWN container, not the page (§7.1 rule 2).
   Tables, fingerprints, the subnet grid — wrap them in this. */
.scroll-x {
  overflow-x: auto;
  min-width: 0;
  -webkit-overflow-scrolling: touch;
}

/* Visually hidden but available to assistive tech. Used for the text half of
   every severity label, so meaning is NEVER carried by colour alone. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Skip link — the first tab stop on every page.
   Off-screen until focused, but it must meet the 44px touch minimum WHEN
   VISIBLE (§7.1 r3): it is a real target the moment it appears, and the people
   most likely to use it are exactly those who cannot afford a small one. */
.skip-link {
  position: absolute;
  top: 0; left: 0;
  z-index: var(--z-toast);
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  padding: var(--sp-2) var(--sp-4);
  background: var(--accent);
  color: var(--ink-on-strong);
  border-radius: var(--r);
  transform: translateY(-150%);
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus { transform: translateY(var(--sp-2)); }

/* Page shell. Generous outer whitespace is part of the look — it is what stops
   density reading as cramped. */
.page {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: var(--page-pad);
}
@media (max-width: 720px) {
  .page { padding: var(--page-pad-mobile); }
}