/* The product's illustrations (NEXT-LEVEL.md N8; templates/partials/illustrations.html), moved here from arctic.css
   unchanged so the public pages can draw them too (N9). The app loads this before arctic.css, which keeps the cascade
   the rules had there; the home page loads it with static/css/vg_live.css, whose tokens they read. */
/* The week's illustrations (DASHBOARD-WOW.md D6): two pixels, round caps, the accent in a dot or the plan line. */
.vg-ill{display:block;width:100%;max-width:168px;height:auto;color:var(--vg-ink-3)}
.vg-ill-frame{fill:none;stroke:var(--vg-hairline);stroke-width:2}
.vg-ill-guide{fill:none;stroke:var(--vg-hairline-strong);stroke-width:2;stroke-linecap:round}
.vg-ill-line{fill:none;stroke:var(--vg-ink-2);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vg-ill-line.is-dashed{stroke:var(--vg-ink-3);stroke-dasharray:5 6}
.vg-ill-line.is-plan{stroke:var(--vg-plan)}
.vg-ill-line.is-traded{stroke:var(--vg-traded);opacity:.55}
.vg-ill-dot{fill:var(--vg-accent);stroke:none}
.vg-ill-dot.is-open{fill:var(--vg-surface-raised);stroke:var(--vg-accent);stroke-width:2}
.vg-ill-box{fill:none;stroke:var(--vg-ink-3);stroke-width:2;stroke-linejoin:round}
.vg-ill-box.is-open{stroke:var(--vg-accent);stroke-dasharray:3 4}
.vg-ill-check{fill:none;stroke:var(--vg-accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* The set (NEXT-LEVEL.md N8, partials/illustrations.html): flat muted fills, the accent on the one point a figure is
   about, on a patch of the dot grid that fades at its edges; a solid line draws in once, and not at all with reduced
   motion. */
.vg-ill-fill{fill:var(--vg-surface-quiet);stroke:none}
.vg-ill-fill.is-accent{fill:rgba(var(--primary-rgb),.12)}
.vg-ill-arrow{fill:none;stroke:var(--vg-ink-3);stroke-width:2}
.vg-ill-ring{fill:none;stroke:var(--vg-hairline-strong);stroke-width:2}
.vg-ill-cell{fill:var(--vg-surface-quiet);stroke:var(--vg-hairline-strong);stroke-width:1.5}
.vg-ill-cell.is-dashed{fill:none;stroke-dasharray:3 3}
.vg-ill-cell.is-on{fill:rgba(var(--primary-rgb),.22);stroke:var(--vg-accent)}
.vg-ill-dot.is-quiet{fill:var(--vg-ink-3)}
.vg-ill-line.is-faded{stroke:var(--vg-ink-3);opacity:.35}
.vg-ill-stop{fill:none;stroke:var(--vg-ink-1);stroke-width:2;stroke-dasharray:2 3}
.vg-ill-wrap{position:relative;isolation:isolate;display:flex;justify-content:center;padding:.6rem .4rem}
.vg-ill-wrap::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:var(--vg-grid);background-size:var(--vg-grid-step) var(--vg-grid-step);
  -webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent);mask-image:radial-gradient(closest-side,#000 55%,transparent)}
@media (prefers-reduced-motion:no-preference){
  .vg-ill-draw [pathLength]{stroke-dasharray:1;stroke-dashoffset:1;animation:vg-ill-draw 900ms var(--vg-ease) 120ms forwards}
}
@keyframes vg-ill-draw{to{stroke-dashoffset:0}}
.vg-ill-wrap{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:12px 0 0}
.vg-ill-wrap .vg-ill{max-width:148px}
/* Where the set sits: leading a page's empty state, small beside a designed state, inline in a notice. */
.vg-ill-lead{margin:0 auto .75rem;max-width:15rem}
.vg-ill-sm .vg-ill{max-width:7.5rem}
.vg-ill-sm{justify-content:flex-start;padding:.3rem .2rem}
.vg-ill-start{justify-content:flex-start;margin-bottom:.5rem}
.vg-ill-inline{display:inline-block;width:4.5rem;margin:0 .6rem .1rem 0;vertical-align:middle}
.vg-ill-inline .vg-ill{max-width:100%}
.vg-ill-sm,.vg-ill-lead{width:fit-content}
.vg-ill-lead{margin-left:auto;margin-right:auto}
/* ---- NEXT-FIX.md F7.1: the set drawn from the product's vocabulary ---------------------------------------------- */
/* Every line at 3:1 or more against its surface in both themes (the ink tones, the plan, the break and the money
   tones); flat muted fills in the accent and the money tones; a card is the product's raised surface. */
.vg-ill{color:var(--vg-ink-2)}
.vg-ill-card{fill:var(--vg-surface-raised);stroke:var(--vg-ink-3);stroke-width:1.5}
.vg-ill-frame,.vg-ill-guide,.vg-ill-arrow,.vg-ill-ring,.vg-ill-box{stroke:var(--vg-ink-3)}
.vg-ill-line{stroke:var(--vg-ink-2)}
.vg-ill-line.is-traded{stroke:var(--vg-traded);opacity:1}
.vg-ill-gap{fill:var(--vg-break-tint);stroke:none}
.vg-ill-flag{fill:var(--vg-break);stroke:var(--vg-break);stroke-width:1.5}
.vg-ill-flag.is-open{fill:none;stroke:var(--vg-accent);stroke-dasharray:3 3}
.vg-ill-chip.is-up,.vg-ill-cell.is-up{fill:color-mix(in srgb,var(--vg-up) 30%,transparent);stroke:var(--vg-up);stroke-width:1.5}
.vg-ill-chip.is-down,.vg-ill-cell.is-down{fill:color-mix(in srgb,var(--vg-down) 26%,transparent);stroke:var(--vg-down);stroke-width:1.5}
.vg-ill-cell{stroke:var(--vg-ink-3)}
.vg-ill-candle.is-up{fill:var(--vg-up);stroke:none}
.vg-ill-candle.is-down{fill:var(--vg-down);stroke:none}
.vg-ill-badge.is-up{fill:color-mix(in srgb,var(--vg-up) 18%,transparent);stroke:var(--vg-up);stroke-width:1.5}
.vg-ill-check.is-up{stroke:var(--vg-up)}
.vg-ill-knob{fill:var(--vg-surface-raised);stroke:var(--vg-ink-1);stroke-width:1.5}
.vg-ill-stop{stroke:var(--vg-ink-1)}
.vg-ill-dial{fill:var(--vg-surface-quiet);stroke:var(--vg-ink-3);stroke-width:1.5}
.vg-ill-ring.is-break{stroke:var(--vg-break)}
/* An empty state's figure is at least 160 px tall on a wide screen (its 168 by 96 drawing at 280 px); inside This week's
   headline card a little smaller; beside a designed state or inline, small as before. */
.vg-ill-wrap .vg-ill,.vg-ill-lead .vg-ill{max-width:280px}
.vg-ill-lead{max-width:18.5rem}
.tw-headline .vg-ill-wrap .vg-ill,.tw-checklist-ill .vg-ill{max-width:200px}
.vg-ill-sm .vg-ill{max-width:7.5rem}
.vg-ill-inline .vg-ill{max-width:100%}