/* ============================================================================
 * CAUGHT brand layer, shared by every page (landing, map, SCOURED, legal, 404).
 *
 * Each page keeps its own stylesheet for its own layout; this file holds only
 * what must be IDENTICAL across them, so the site reads as one product:
 *   - the night palette of the landing page's film, used for every top bar
 *   - one type stack (the pages used to differ: Inter-first vs system-first)
 *   - the wordmark
 *   - the status dots: red = CAUGHT, amber = in review, green = resolved,
 *     the same three lights as the landing page's legend.
 * Load it BEFORE the page stylesheet, so the page can build on these tokens.
 * ========================================================================== */

:root {
  /* Night: the top bars and the landing page. */
  --brand-night:   #04070d;
  --brand-night-2: #0c1320;
  --brand-ink:     #e9eef4;
  --brand-ink-2:   #b3c0cf;
  --brand-ink-3:   #8595a8;
  --brand-line:    rgba(233, 238, 244, 0.12);
  --brand-link:    #7fb6e6;   /* 8.9:1 on --brand-night */
  --brand-link-hi: #a9d0f2;

  /* Status lights. Vivid on night; pages on light surfaces use their own
   * deeper equivalents for text, but the DOT is always one of these. */
  --light-caught:   #ff4b3e;
  --light-review:   #f2b441;
  --light-resolved: #3ddc84;
  --light-detected: #f4f1ea;

  --font-brand: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* The wordmark. Always letter-spaced caps, whatever page it sits on. */
.wordmark {
  font-family: var(--font-brand);
  font-weight: 800; letter-spacing: 0.2em;
  color: inherit; text-decoration: none;
}

/* A status light: a small dot with a soft halo, like the film's flashes.
 * Use beside a word ("CAUGHT", "Review"), never instead of one. */
.sdot {
  display: inline-block; flex: none;
  width: 0.55em; height: 0.55em; border-radius: 50%;
  margin-right: 0.45em; vertical-align: 0.08em;
  background: currentColor;
}
.sdot-caught   { background: var(--light-caught);   box-shadow: 0 0 0 0.18em rgba(255, 75, 62, 0.18); }
.sdot-review   { background: var(--light-review);   box-shadow: 0 0 0 0.18em rgba(242, 180, 65, 0.18); }
.sdot-resolved { background: var(--light-resolved); box-shadow: 0 0 0 0.18em rgba(61, 220, 132, 0.18); }
.sdot-detected { background: var(--light-detected); box-shadow: 0 0 0 0.18em rgba(244, 241, 234, 0.18); }

/* Loading placeholder for a number that hasn't arrived yet. */
.is-loading {
  color: transparent !important;
  background: linear-gradient(90deg, rgba(127,127,127,0.14) 25%, rgba(127,127,127,0.26) 50%, rgba(127,127,127,0.14) 75%);
  background-size: 200% 100%;
  border-radius: 6px;
  animation: brand-shimmer 1.4s linear infinite;
  min-width: 2.2ch; display: inline-block;
}
@keyframes brand-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .is-loading { animation: none; } }