/* 03-generic/_crt.css — the CRT scanline texture, borrowed from direction B but tuned NEUTRAL
   for A's flat dark-gray ground (no amber bloom). One `.crt` class on the app shell paints two
   fixed, pointer-events-none overlays over the whole viewport: scanlines + a faint vignette.
   Kept entirely in this generic layer so it never touches a component, and fully removable. */

.crt { position: relative; }

/* scanlines — subtle dark horizontal gaps. Lighter than B's (gray text has no glow to carry it),
   so long-form docs stay readable. Multiply so it darkens the lit rows without tinting them. */
.crt::before {
  content: "";
  position: fixed; inset: 0;
  z-index: 9000;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 2px,
    rgba(0, 0, 0, 0.28) 3px,
    rgba(0, 0, 0, 0.28) 3px
  );
  background-size: 100% 3px;
  mix-blend-mode: multiply;
}

/* faint vignette — the tube edges fall off. No flicker: A stays calm/static by design. */
.crt::after {
  content: "";
  position: fixed; inset: 0;
  z-index: 9001;
  pointer-events: none;
  background: radial-gradient(125% 125% at 50% 50%, transparent 60%, rgba(0, 0, 0, 0.45) 100%);
}

/* opt OUT per surface — drop the texture on a dense reading page (docs/config tables). */
.crt.is-flat::before, .crt.is-flat::after { display: none; }

/* honour reduced-motion users who also want less visual noise: keep the texture but never animate
   it (A never animates it anyway — this is future-proofing if a flicker modifier is added). */
@media (prefers-reduced-motion: reduce) {
  .crt::after { animation: none; }
}