/* SKEION — the alert red (assets/site/alert.css). Founder's decision, 5 October 2026; docs/build/33-scenario-e3.md §1,
   docs/build/13-design-system.md §14. Load after site.css, only on pages that show an alert.

   ONE red, for ALERT ELEMENTS ONLY:
     - the alert triangle (red outline, --alert-soft tint, white "!");
     - the critical point: the asset at risk (exposed satellite, transformer in alert);
     - the part of a gauge beyond its threshold.
   NEVER: text of any kind (a status is said in words, in --ink), buttons, the pilot call to action, links, focus rings,
   badges ("Vision" included), error messages (they stay --sev), backgrounds, panel borders, a whole "without action"
   column, map zones, uncertainty bands, windows, thresholds, physical elements (Sun, CME, magnetosphere, oval, aurora,
   currents), decor. At most 3 red elements in view and ≤ 0.5 % of a figure's area: one red focus at a time. Guided scenario
   (docs/build/35-scenario-final.md): steps 04–05, the alert of alert-refine (triangle, asset point, status mark); step 06, the
   scenes' alert symbols turn white (api.alertTone) and the red sits only in the « without action » column of the table.
   Canvas twin: SkeionScenes palette, pal.alert (assets/js/skeion-scenes.js), same value.

   Contrast (WCAG relative luminance): #FF3B3B on --bg #0A081B 5.59:1, on --bg-2 #091231 5.20:1, on the night ground of
   grid-surface rgb(14,27,46) 4.89:1; at the pulse trough (opacity 0.75) 3.51:1, 3.30:1 and 3.16:1 — a graphic element keeps
   ≥ 3:1 (1.4.11): that is why the trough is 0.75 and not 0.7 (2.89:1 on that ground). Never the colour alone: the shape (triangle,
   "!"), the word in the DOM, the position beyond the threshold mark. */
:root {
  --alert: #FF3B3B;
  --alert-soft: rgba(255, 59, 59, 0.16);   /* tint inside the triangle or a halo; never a background, a panel or a zone */
}

/* Pulse: opacity 1 → 0.75 → 1, sinusoidal, 1 Hz (one soft swell per second: far below 3 flashes/s, WCAG 2.3.1), five cycles
   from the moment the alert appears, then steady (stops within 5 s, WCAG 2.2.2). Steady under reduced motion and while the
   visitor pauses motion (.motion-paused on <html>: site.js and SkeionMotion). Restart = remove and re-add the class. */
@keyframes sk-alert-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.75; } }
.sk-alert-pulse, .sk-alert-flag.sk-alert-pulse::before { animation: sk-alert-pulse 1s ease-in-out 5; }
.sk-alert-flag.sk-alert-pulse { animation: none; }              /* a flag pulses its mark, never the status word */
.motion-paused .sk-alert-pulse, .motion-paused .sk-alert-flag.sk-alert-pulse::before { animation: none; }
@media (prefers-reduced-motion: reduce) { .sk-alert-pulse, .sk-alert-flag.sk-alert-pulse::before { animation: none; } }

/* DOM alert mark: triangle outline and tint in the alert red, white "!", 1.05 × 0.92 em on the text's x-height, decorative
   (the status word beside it carries the meaning). Two forms, same picture:
     <span class="sk-alert-mark" aria-hidden="true"></span> Strong      an element;
     <dd class="sk-alert-flag" data-alert>Strong</dd>                    a ::before on the element that holds the word
                                                                          (survives textContent updates: scene readouts).
   The colours are written in the image (#FF3B3B = --alert, #F0FCFF = --ink): a CSS variable cannot enter a data URI. */
.sk-alert-mark, .sk-alert-flag::before {
  display: inline-block; flex: none; width: 1.05em; height: 0.92em; margin-right: 0.4em; vertical-align: -0.1em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 21'%3E%3Cpath d='M12 1.6 22.6 19.6H1.4Z' fill='%23FF3B3B' fill-opacity='.16' stroke='%23FF3B3B' stroke-width='1.9' stroke-linejoin='round'/%3E%3Cpath d='M11 7.2h2v6.4h-2z' fill='%23F0FCFF'/%3E%3Ccircle cx='12' cy='16.3' r='1.15' fill='%23F0FCFF'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sk-alert-flag::before { content: ""; }
.sk-alert-mark[hidden] { display: none; }