/* Implementation-level corrections, loaded after the Nocturne stylesheet and
   the design's own inline rules. Nothing here changes the design's intent —
   it settles details the design document left to the browser's defaults. */

/* Leaflet stacks its control container at z-index 1000, which floated the
   zoom buttons over the evidence dialog's z-index:900 backdrop. 500 keeps the
   map chrome above the tile/overlay panes (400) and under any modal. */
.leaflet-top,
.leaflet-bottom { z-index: 500; }

/* The repeat directive is replaced by its rows at boot; hide it in the frame
   before that so an unknown inline element never reserves a line box. */
sc-for { display: none; }

/* Triage rows keep their severity rule on the leading edge, so the selected
   mark is a tint plus a brighter border rather than a second inset rule. */
.sa-anom:hover { background: color-mix(in srgb, var(--color-text) 5%, transparent); }
.sa-anom[aria-selected="true"] {
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
}

/* Pickable list rows — community filter, influential nodes. Same selected
   language as the nav and the avatar roster: accent tint, leading rule. */
.sa-pick:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); }
.sa-pick[aria-selected="true"] {
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
  box-shadow: inset 2px 0 0 var(--color-accent);
  color: var(--color-accent-200);
}

/* Media frames on OSINT items.
   The original assets are not bundled with the prototype, so what renders is a
   derived preview: the per-item gradient supplies the tone, this rule adds the
   scanline-and-vignette treatment that marks it as a processed frame rather
   than a photograph. The badges are positioned siblings and paint above. */
.sa-media { isolation: isolate; }
.sa-media::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(233, 233, 237, .028) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(115deg, rgba(233, 233, 237, .014) 0 1px, transparent 1px 14px),
    radial-gradient(125% 100% at 50% 38%, transparent 40%, rgba(13, 15, 24, .55) 100%);
}
.sa-media[data-id]:hover::before { background-color: rgba(145, 132, 217, .07); }

/* OSINT collection cards. The card itself is the select target, so it takes a
   pointer and an accent edge when chosen; inner buttons stay real buttons. */
.sa-card { transition: border-color .12s, box-shadow .12s; }
.sa-card:hover { border-color: var(--color-neutral-700); }
.sa-card[aria-selected="true"] {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent), 0 6px 18px rgba(0, 0, 0, .45);
}

/* Avatar roster rows — the selected mark follows `.sa-nav[aria-current]`:
   an accent tint plus an inset rule on the leading edge. */
.sa-av:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); }
.sa-av[aria-selected="true"] {
  background: color-mix(in srgb, var(--color-accent) 13%, transparent);
  box-shadow: inset 2px 0 0 var(--color-accent);
}

/* The marquee and pulse animations run indefinitely — stand them down for
   readers who ask for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}