/*
 * Deferred styling for the Northwind portal: everything that does not paint
 * above the fold.
 *
 * As of ADR-0019 this file contains no Anastatica chrome at all. The HUD and
 * the lifecycle card used to live here; they are now built by the runtime
 * inside its own shadow root, so the host page carries neither their markup nor
 * their styles. What is left is the portal's own texture and table chrome.
 *
 * The shell document lives inside a 14,336 B budget — the TCP initial
 * congestion window — so the inlined <style> block carries only what the first
 * paint actually needs: tokens, frame, sidebar, top bar, hero, KPI row, table.
 *
 * This sheet is loaded with `media="print"` and promoted to `all` on load,
 * which is the one way to fetch a stylesheet without blocking render.
 */

/* ---- Halftone ASCII dither ------------------------------------------------
 *
 * The "procedural SVG/CSS halftone dither shader" of ADR-0012 §3, built from
 * two stacked layers and no asset request:
 *
 *   - a repeating-radial-gradient dot matrix at a 4px pitch, which is the
 *     halftone screen itself;
 *   - an inline SVG <pattern> of monospace glyphs, which is the ASCII half.
 *
 * One fixed overlay rather than a per-surface background: the frame is a grid
 * whose children paint their own backgrounds, so texture applied to the
 * container would survive only in the gutters. A film over the whole viewport
 * is both what the reference looks like and a single rule.
 *
 * Opacity is deliberately near the threshold of perception. This is
 * atmosphere; body-text contrast must not move.
 */
:root {
  --dither-dots: repeating-radial-gradient(
    circle at 0 0,
    rgba(255, 255, 255, 0.5) 0 0.5px,
    transparent 0.5px 4px
  );
  --dither-glyphs: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='%23fff' font-family='monospace' font-size='11'%3E%3Ctext x='4' y='14'%3E%2F%3C/text%3E%3Ctext x='38' y='9'%3E.%3C/text%3E%3Ctext x='72' y='20'%3E%3A%3C/text%3E%3Ctext x='103' y='12'%3E-%3C/text%3E%3Ctext x='19' y='42'%3E%23%3C/text%3E%3Ctext x='58' y='36'%3E%2B%3C/text%3E%3Ctext x='88' y='48'%3E.%3C/text%3E%3Ctext x='9' y='68'%3E%3D%3C/text%3E%3Ctext x='45' y='74'%3E%2A%3C/text%3E%3Ctext x='79' y='63'%3E%2F%3C/text%3E%3Ctext x='110' y='71'%3E%3A%3C/text%3E%3Ctext x='26' y='96'%3E.%3C/text%3E%3Ctext x='63' y='104'%3E-%3C/text%3E%3Ctext x='95' y='92'%3E%23%3C/text%3E%3Ctext x='7' y='114'%3E%2B%3C/text%3E%3C/g%3E%3C/svg%3E");
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  /* Above the HUD (z-index 9) so the film is uniform across the screen. */
  z-index: 50;
  pointer-events: none;
  background-image: var(--dither-glyphs), var(--dither-dots);
  background-size: 120px 120px, 4px 4px;
  opacity: 0.05;
}

/* The dither is static by design, but honour the preference anyway: a dense
 * high-frequency pattern is a vestibular trigger independent of motion. */
@media (prefers-reduced-motion: reduce) {
  body::after {
    background-image: none;
  }
}

/* ---- Focus: the one signature accent -------------------------------------
 * Nothing is focused at first paint, so this can arrive late. */
:where(a, button, input):focus-visible {
  outline: none;
  animation: sweep var(--dur-sweep) linear infinite;
}
@keyframes sweep {
  0% {
    box-shadow: 0 0 0 1.5px #ff5b5b;
  }
  25% {
    box-shadow: 0 0 0 1.5px #ffd60a;
  }
  50% {
    box-shadow: 0 0 0 1.5px #3ddc84;
  }
  75% {
    box-shadow: 0 0 0 1.5px #4facfe;
  }
  100% {
    box-shadow: 0 0 0 1.5px #ff5b5b;
  }
}
@media (prefers-reduced-motion: reduce) {
  :where(a, button, input):focus-visible {
    animation: none;
    box-shadow: 0 0 0 1.5px var(--text-primary);
  }
}

/* ---- Table chrome --------------------------------------------------------- */
#rows {
  max-height: min(62vh, 680px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* The runtime patches the heavy boundary itself. Once the page observes that
 * computed result, rows below the scrollport may skip layout and paint while
 * remaining real DOM nodes. This is the browser-native payoff demonstrated by
 * the repair: no virtual list, worker, or reduced row count. */
#catalog-grid[data-runtime-contained] #rows > .ok-row {
  content-visibility: auto;
  contain-intrinsic-block-size: 38px;
}

#rows > .ok-row[data-i] {
  display: block;
  min-height: 38px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ok-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 10px;
}