/* Silkbreath figure. Colours come from the --fg-* tokens in css/app.css. */
svg.fg { display: block; width: 100%; height: auto; aspect-ratio: 240 / 250; }
/* Each drawn part has a near colour (--n) and a far colour (--f). fg-d0 to fg-d10 say how far behind
   the body it is, so a limb fades toward the far colour in small steps and never flips. */
.fg-near { --n: var(--fg-ink); --f: var(--fg-ink-far); color: var(--n); }
.fg-far { color: var(--fg-ink-far); }
.fg-edge, .fg-trunk { fill: currentColor; }
.fg-edge { stroke: var(--fg-stage); stroke-width: 1.4; paint-order: stroke; }
.fg-trunk { stroke: currentColor; stroke-linejoin: round; }
.fg-out { fill: var(--fg-stage); stroke: var(--fg-stage); stroke-linejoin: round; }
.fg-ground { fill: var(--fg-ground); }
.fg-shadow { fill: var(--fg-shadow); }
.fg-front { fill: var(--fg-ink-far); }
.fg-face { fill: var(--fg-stage); opacity: 0.32; }
.fg-dt, .fg-dt-glow { fill: var(--fg-accent); }
.fg-trail { fill: none; stroke: var(--fg-accent); stroke-width: 2.1; stroke-dasharray: 0.1 4.6; stroke-linecap: round; stroke-linejoin: round; paint-order: stroke; }
.fg-trail-dot { fill: var(--fg-accent); stroke: var(--fg-stage); stroke-width: 1.4; }

/* sides: left and right limbs in two colours, with letters so colour is never the only cue */
.sd-l.fg-near { --n: var(--fg-left); --f: var(--fg-left-far); }
.sd-r.fg-near { --n: var(--fg-right); --f: var(--fg-right-far); }
.sd-tag { font: 700 9px/1 system-ui, sans-serif; paint-order: stroke; stroke: var(--fg-stage); stroke-width: 2.4px; }
.sd-tag.sd-l { fill: var(--fg-left); }
.sd-tag.sd-r { fill: var(--fg-right); }

/* focus: the working areas picked out */
.fg-mute.fg-near { --n: var(--fg-mute); --f: var(--fg-mute-far); }
.fg-hot.fg-near { --n: var(--fg-hot); --f: var(--fg-hot-far); }

/* depth steps (must come after every rule that sets --n and --f) */
.fg-d1 { color: color-mix(in srgb, var(--f) 10%, var(--n)); }
.fg-d2 { color: color-mix(in srgb, var(--f) 20%, var(--n)); }
.fg-d3 { color: color-mix(in srgb, var(--f) 30%, var(--n)); }
.fg-d4 { color: color-mix(in srgb, var(--f) 40%, var(--n)); }
.fg-d5 { color: color-mix(in srgb, var(--f) 50%, var(--n)); }
.fg-d6 { color: color-mix(in srgb, var(--f) 60%, var(--n)); }
.fg-d7 { color: color-mix(in srgb, var(--f) 70%, var(--n)); }
.fg-d8 { color: color-mix(in srgb, var(--f) 80%, var(--n)); }
.fg-d9 { color: color-mix(in srgb, var(--f) 90%, var(--n)); }
.fg-d10 { color: var(--f); }

/* line figure */
.ln { stroke: var(--fg-ink); stroke-linecap: round; fill: none; }
.ln.far { stroke: var(--fg-ink-far); }
.jt { fill: var(--fg-stage); stroke: var(--fg-ink); stroke-width: 1.5; }
.jt.far { stroke: var(--fg-ink-far); }
.hd { fill: var(--fg-stage); stroke: var(--fg-ink); }
.kn { fill: var(--fg-ink); }

/* equipment */
.pp-mat { fill: var(--fg-mat); stroke: var(--fg-mat-edge); stroke-width: 1; stroke-linejoin: round; }
.pp-wall { fill: var(--fg-prop); opacity: 0.4; }
.pp-edge { stroke: var(--fg-prop-edge); stroke-width: 1.4; stroke-linecap: round; }
.pp-solid { fill: var(--fg-prop); stroke: var(--fg-prop-edge); stroke-width: 1; stroke-linejoin: round; }
.pp-top { fill: var(--fg-prop-top); stroke: var(--fg-prop-edge); stroke-width: 1; stroke-linejoin: round; }
.pp-leg { stroke: var(--fg-prop-edge); stroke-linecap: round; }
.pp-bar, .pp-stick, .pp-wt { stroke: var(--fg-prop-ink); stroke-linecap: round; }
.pp-wt-f { fill: var(--fg-prop-ink); }
.pp-ring { fill: none; stroke: var(--fg-prop-ink); }
.pp-band { stroke: var(--fg-accent); stroke-linecap: round; }
.pp-roll { stroke: var(--fg-prop-edge); stroke-linecap: round; }
.pp-ball { fill: var(--fg-prop-top); stroke: var(--fg-prop-edge); stroke-width: 1.2; }

/* legacy lesson overlays */
.fg-plumb { stroke: var(--fg-left); stroke-width: 1; stroke-dasharray: 3 3; fill: none; }
.fg-mark { fill: var(--fg-left); stroke: var(--fg-stage); stroke-width: 1.5; }
.fg-mark.on { fill: var(--fg-accent); }
.fg-mark-ring { fill: none; stroke: var(--fg-accent); stroke-width: 1.2; }
.fg-orbit { fill: none; stroke: var(--fg-left); stroke-width: 2.2; stroke-dasharray: 3 3; }
.fg-orbit-dot { fill: var(--fg-accent); }

/* guide marks over the figure */
.fg-guide { stroke: var(--fg-accent); stroke-width: 2.4; stroke-linecap: round; fill: none; }
.fg-guide.dash { stroke-width: 1.2; stroke-dasharray: 2 3.5; opacity: 0.8; }
.fg-guide-dot { fill: var(--fg-stage); stroke: var(--fg-accent); stroke-width: 1.6; }
.fg-burst { stroke: var(--fg-accent); stroke-width: 2; stroke-linecap: round; }