/* Step illustrations: app/views/public/illustrations/{key}.php
 *
 * Each partial is one decorative <svg class="ill ill-{key}" viewBox="0 0 240 160">. Its shapes carry
 * only the classes below, so every colour is set here:
 *   (no class)  outline only: --ill-line stroke, no fill (inherited from .ill)
 *   ill-bg      soft fill, no outline (background blob, chart areas)
 *   ill-pp      paper fill + outline (phone screens, cards, documents)
 *   ill-sf      soft fill + outline (secondary shapes)
 *   ill-ac      accent fill + outline (the highlight of each scene)
 *   ill-on      lines drawn on an accent fill (tick, arrow, ¥, @)
 *   ill-hd      heading bar (thick --ill-line)
 *   ill-ph      placeholder bar (thick --ill-muted)
 *   ill-dot     solid --ill-line fill (small dots)
 *   ill-pf      perforated edge (dotted outline)
 * Colours: --ill-line (from --ink), --ill-paper (--paper), --ill-soft (blob, tinted by the accent),
 * --ill-accent (the exchange's --ex), --ill-on-accent (--ex-ink, black or white to read on --ex) and
 * --ill-muted (placeholder bars). Exchange pages set --ex and --ex-ink on an ancestor.
 * Strokes are 2.4 user units and scale with the image: 2px when it is 200px wide.
 */
.ill {
  --ill-line: var(--ink, #1b1d22);
  --ill-paper: var(--paper, #fff);
  --ill-accent: var(--ex, #c8102e);
  --ill-on-accent: var(--ex-ink, #fff);
  --ill-soft: #f0ede6;
  --ill-muted: #cac8c3;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  fill: none;
  stroke: var(--ill-line);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .ill {
    --ill-soft: color-mix(in srgb, var(--ill-accent) 10%, var(--bg, #f7f5f0));
    --ill-muted: color-mix(in srgb, var(--line, #e4e0d6) 80%, var(--muted, #646a75));
  }
}
@media (prefers-color-scheme: dark) {
  .ill {
    --ill-soft: #2b2e35;
    --ill-muted: #404248;
  }
  @supports (color: color-mix(in srgb, red 50%, blue)) {
    .ill {
      /* A faint tint only: more turns yellow accents olive on the dark ground. */
      --ill-soft: color-mix(in srgb, var(--ill-accent) 6%, var(--line, #2d3038));
      --ill-muted: color-mix(in srgb, var(--line, #2d3038) 80%, var(--muted, #8d8b86));
    }
  }
}
@media (forced-colors: active) {
  .ill {
    --ill-line: CanvasText;
    --ill-paper: Canvas;
    --ill-soft: Canvas;
    --ill-accent: Highlight;
    --ill-on-accent: HighlightText;
    --ill-muted: GrayText;
  }
}
.ill .ill-bg { fill: var(--ill-soft); stroke: none; }
.ill .ill-pp { fill: var(--ill-paper); }
.ill .ill-sf { fill: var(--ill-soft); }
.ill .ill-ac { fill: var(--ill-accent); }
.ill .ill-on { fill: none; stroke: var(--ill-on-accent); }
.ill .ill-hd { fill: none; stroke-width: 5; }
.ill .ill-ph { fill: none; stroke: var(--ill-muted); stroke-width: 5; }
.ill .ill-dot { fill: var(--ill-line); stroke: none; }
.ill .ill-pf { fill: var(--ill-paper); stroke-dasharray: 0 4; }