/* ═══════════════════════════════════════════════════════════════════════
   CRA illustration set — shared runtime CSS for INLINED SVGs.

   Each file in /assets/brand/illustrations/ ships its own copy of the rules
   below inside an SVG <style> element. That element is stripped when the SVG
   is inlined into a page, for two reasons:

     1. An SVG <style> is NOT scoped. Inlined, `.a`, `.b`, `.c`, `.m`, `.f`,
        `.q`, `.on` … become page-wide rules. This site already uses `a`, `ok`
        and `q` as class names elsewhere.
     2. The block is 1425 bytes and identical in all 20 files, so it would be
        duplicated once per illustration on the page.

   The `@media (prefers-color-scheme)` / `svg:root` fallbacks the files carry
   are deliberately NOT reproduced here. They exist so a file loaded via <img>
   or background-image still has ink; inlined, ink must inherit currentColor so
   the site's own data-theme toggle wins. That is the whole reason these are
   inlined rather than referenced.

   Regenerating: scratchpad/gen_css.py re-derives the scoped block from
   console.svg. If build_illustrations.py changes the palette, re-run it.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── the SVG's own rules, scoped ─────────────────────────────────────── */
.cra-ill-svg .a,.cra-ill-svg .b,.cra-ill-svg .c{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.cra-ill-svg .a{stroke-width:4}
.cra-ill-svg .b{stroke-width:2.5}
.cra-ill-svg .c{stroke-width:1.5}
.cra-ill-svg .p{fill:currentColor;fill-opacity:.055;stroke:currentColor;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.cra-ill-svg .f{fill:currentColor}
.cra-ill-svg .q{fill:currentColor;fill-opacity:.10}
.cra-ill-svg .r{fill:currentColor;fill-opacity:.18}
.cra-ill-svg .bl{stroke:var(--brand-500,#0057FF)}
.cra-ill-svg .cy{stroke:var(--brand-400,#1EC8FF)}
.cra-ill-svg .sl{stroke:var(--slate-gray,#5D6978)}
.cra-ill-svg .wn{stroke:var(--state-warning,#F59E0B)}
.cra-ill-svg .dg{stroke:var(--state-danger,#DC2626)}
.cra-ill-svg .ok{stroke:var(--state-success,#16A34A)}
.cra-ill-svg .blf{fill:var(--brand-500,#0057FF)}
.cra-ill-svg .cyf{fill:var(--brand-400,#1EC8FF)}
.cra-ill-svg .slf{fill:var(--slate-gray,#5D6978)}
.cra-ill-svg .wnf{fill:var(--state-warning,#F59E0B)}
.cra-ill-svg .dgf{fill:var(--state-danger,#DC2626)}
.cra-ill-svg .okf{fill:var(--state-success,#16A34A)}
.cra-ill-svg .blw{fill:var(--brand-500,#0057FF);fill-opacity:.14}
.cra-ill-svg .cyw{fill:var(--brand-400,#1EC8FF);fill-opacity:.16}
.cra-ill-svg .wnw{fill:var(--state-warning,#F59E0B);fill-opacity:.14}
.cra-ill-svg .okw{fill:var(--state-success,#16A34A);fill-opacity:.14}
.cra-ill-svg .dgw{fill:var(--state-danger,#DC2626);fill-opacity:.12}
.cra-ill-svg .on{fill:none;stroke:#081C3A;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.cra-ill-svg .dash{stroke-dasharray:7 7}
.cra-ill-svg .dash2{stroke-dasharray:3 6}
.cra-ill-svg .dash3{stroke-dasharray:2 5}
.cra-ill-svg .m{opacity:.5}
.cra-ill-svg .m2{opacity:.3}
.cra-ill-svg .m3{opacity:.16}
.cra-ill-svg .m4{opacity:.08}

/* ── the illustration element itself ─────────────────────────────────── */
.cra-ill-svg{display:block;width:100%;height:auto;color:inherit}

/* Illustrations that read as a sequence (left → right) are authored LTR.
   Arabic is the primary language, so those are mirrored under RTL. None of
   the files contains a <text> element, so a flip is always safe. */
[dir="rtl"] .cra-ill-svg.is-flip{transform:scaleX(-1)}

/* Surfaces that stay dark (or light) in both themes: pin the ink rather than
   inheriting, so the drawing does not vanish when the theme flips.
   The descendant form is not redundant. This file is linked before each page's
   own <style> block, so a single-class page rule such as
   `.video-placeholder{color:var(--text-tertiary)}` ties on specificity and
   wins on order when .cra-on-dark sits on the same element. The two-class
   selector outranks it whichever way the pin is applied. */
.cra-on-dark,.cra-on-dark .cra-ill-svg{color:#EAF0F7}
.cra-on-light,.cra-on-light .cra-ill-svg{color:#081C3A}

/* ── decorative full-bleed band behind a section ─────────────────────── */
/* `isolation:isolate` makes .cra-banded a stacking context, so the band's
   negative z-index paints above the container's own background but below all
   in-flow content — without touching a single child rule. An earlier draft
   used `.cra-banded > :not(.cra-band){position:relative;z-index:1}`; that
   selector outranks `.hero-bg` and would have flipped absolutely-positioned
   hero backdrops to `position:relative`, dropping them into normal flow. */
.cra-banded{position:relative;overflow:hidden;isolation:isolate}
.cra-band{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
  opacity:.5;
}
/* Where the container already has its own absolutely-positioned backdrop
   layers, the band has to sit above them instead. The content in those
   containers carries its own higher z-index. */
.cra-band--over{z-index:1}
/* Banners are 3:1. Below ~1200px they would shrink to a hairline, so hold a
   minimum and let the flex box centre the overflow — direction-agnostic, no
   left/right offsets. */
.cra-band>.cra-ill-svg{flex:none;width:100%;min-width:1200px}
@media(max-width:700px){.cra-band{opacity:.34}}

/* ── art block: an illustration used as content ──────────────────────── */
.cra-art{display:block;width:100%;max-width:var(--cra-art-max,520px);margin-inline:auto}

/* ── spot: a small illustration inside a card or list row ────────────── */
.cra-spot{display:block;width:100%;max-width:var(--cra-spot-max,120px)}

/* ── empty / error / placeholder states ──────────────────────────────── */
/* `align-items:center` stops the SVG being stretched, and a percentage width
   on a flex item whose container is itself auto-sized can resolve to zero, so
   the illustration is given an explicit basis rather than `width:100%`. */
.cra-state{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.cra-state>.cra-ill-svg{flex:none;width:var(--cra-state-max,260px);max-width:100%;opacity:.85}

/* ── thumbnail: illustration filling a fixed-height card header ──────── */
.cra-thumb{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:14px}
.cra-thumb>.cra-ill-svg{width:100%;height:100%;max-height:100%}