/* Accordo illustration engine: paint, layout switching and motion for scenes built by engine.mjs. See DESIGN.md. */
.illo-scene { container-type: inline-size; position: relative; width: 100%; }
.illo-art { display: block; width: 100%; height: auto; }
.illo-svg { --illo-stroke: 1.25px; --illo-detail: 0.7px; --illo-hatch-w: 0.55px; display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font-body); }

/* Line weights are in drawing units (px inside an SVG is a user unit), so lines scale with the drawing, as in the
   commissioned art: about 1.25px outlines, 0.7px detail and 0.55px hatching at the size each layout is drawn for. */
.illo-wide { --illo-stroke: 1.25px; --illo-detail: 0.7px; --illo-hatch-w: 0.55px; }
.illo-narrow { --illo-stroke: 1.5px; --illo-detail: 0.85px; --illo-hatch-w: 0.65px; }

/* One layout shows at a time. Wide above 40rem of available width, narrow below; data-layout pins one (the lab does).
   Inlined hand-built art (.illo-art, from tools/inline-art.mjs) switches the same way. */
.illo-narrow { display: none; }
@container (max-width: 40rem) { .illo-scene:not([data-layout]) .illo-wide { display: none; } .illo-scene:not([data-layout]) .illo-narrow { display: block; } }
.illo-scene[data-layout="narrow"] .illo-wide { display: none; }
.illo-scene[data-layout="narrow"] .illo-narrow { display: block; }

/* Paint: every shape is outlined in the line colour; a class picks its fill from the tokens. */
.illo-svg :is(path, rect, polygon, polyline, ellipse, circle, line) { fill: none; stroke: var(--illo-line); stroke-width: var(--illo-stroke); stroke-linejoin: round; stroke-linecap: round; }
.illo-svg .i-paper { fill: var(--illo-paper); }
.illo-svg .i-tint { fill: var(--illo-tint); }
.illo-svg .i-tint-2 { fill: var(--illo-tint-2); }
.illo-svg .i-shade { fill: var(--illo-shade); }
.illo-svg .i-signal { fill: var(--illo-signal); }
.illo-svg .i-signal-soft { fill: var(--illo-signal-soft); }
.illo-svg .i-magenta { fill: var(--illo-magenta); }
.illo-svg .i-orange { fill: var(--illo-orange); }
.illo-svg .i-peach { fill: var(--illo-peach); }
.illo-svg .i-sky { fill: var(--illo-sky); }
.illo-svg .i-nostroke { stroke: none; }
.illo-svg :is(.i-rule, .i-detail, .i-chrome *, .i-plan rect, .illo-decor *, .i-back) { stroke-width: var(--illo-detail); }
.illo-svg .i-dot { fill: var(--illo-line); stroke: none; }
.illo-svg .i-rule-strong { stroke-width: var(--illo-detail); }
.illo-svg .i-tick { stroke: var(--illo-paper); }
.illo-svg .i-signature { stroke: var(--illo-signal); stroke-width: var(--illo-detail); }
.illo-svg .i-signal-line { stroke: var(--illo-signal); }
.illo-svg .i-flow, .illo-svg .i-flow-head { stroke: var(--illo-signal); stroke-width: var(--illo-stroke); }
.illo-svg .i-flow { stroke-dasharray: 0.01 4; stroke-width: calc(var(--illo-stroke) * 1.3); }
.illo-svg .i-hatch { stroke: none; }
.illo-svg .i-hatch-line { stroke: var(--illo-hatch); stroke-width: var(--illo-hatch-w); stroke-linecap: butt; }

/* Type on the art: tokens for ink, the body face. Labels are quiet: muted ink on a hairline, no box. */
.illo-svg text { stroke: none; fill: var(--illo-line); font-family: var(--font-body); }
.illo-svg .i-signal-text { fill: var(--illo-signal); }
.illo-svg .i-muted { fill: var(--illo-line); opacity: 0.72; }
.illo-svg .i-coin-mark { fill: var(--illo-line); font-weight: 400; }
.illo-svg .i-label { fill: var(--color-ink-2); font-weight: 500; }
.illo-svg :is(.i-label, .i-label-sub) { stroke: var(--color-paper); stroke-width: 3px; stroke-linejoin: round; paint-order: stroke; }
.illo-svg .i-label-sub { fill: var(--color-muted); }
.illo-svg .i-leader { stroke: var(--color-rule-strong); stroke-width: 0.6px; }
.illo-svg .i-leader-dot { fill: var(--color-rule-strong); stroke: none; }
[data-theme="dark"] .illo-svg .i-signal-text { fill: var(--color-accent); }
[data-theme="dark"] .illo-svg .i-signature { stroke: var(--color-accent); }

/* Build-up: only when motion.js arms the scene (so no-JS and reduced motion get the finished picture).
   Opacity and translate only. translate composes with a group's own transform attribute, so hand-built
   stations (<g id="station-…">) can rise too. --i staggers a batch that enters together. */
.illo-scene.is-armed :is(.illo-step, [data-station], [id^="station-"]) { opacity: 0; translate: 0 var(--illo-rise, 14px); transition: opacity var(--dur-long) var(--ease-out), translate var(--dur-long) var(--ease-out); transition-delay: var(--delay, 0ms); }
.illo-scene.is-armed :is(.illo-step, [data-station], [id^="station-"]).is-in { opacity: 1; translate: none; }
.illo-scene.is-reset :is(.illo-step, [data-station], [id^="station-"]) { transition: none; }

/* The one idle motion: the map pin over booth 201 bobs, only once the scene is built and while it is on screen. */
@keyframes illo-bob { to { translate: 0 -4px; } }
.illo-scene.is-live .illo-idle { animation: illo-bob 2.8s var(--ease-in-out) infinite alternate; }
.illo-scene.is-live.is-offscreen .illo-idle { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .illo-scene :is(.illo-step, [data-station], [id^="station-"]) { opacity: 1 !important; translate: none !important; transition: none !important; }
  .illo-scene .illo-idle { animation: none !important; }
}