/* The Functions "Explore" applets (transformgraph, inverse, composite,
 * closest). The shared classes are in maths-applets.css. */

.mca-controls [hidden], .mcf-group[hidden], .mca-checks [hidden] { display: none; }
.mcf-group { display: grid; gap: 12px; }
.mcf-pick { display: grid; gap: 8px; margin-bottom: 14px; }
.mcf-asym { stroke: var(--muted); stroke-width: 1.4; stroke-dasharray: 7 5; }
.mcf-asym.is-b { stroke: var(--tangerine); stroke-width: 1.8; }
.mcf-halo { paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; }
.mcf-pts { margin-top: 0; }
.mcf-pts dd { font-weight: 800; color: var(--ink); }
.mcf-line { display: block; }
.mcf-line + .mcf-line { margin-top: 4px; }
.mcf-mini { margin-top: 14px; }

.mcf-box { fill: var(--paper); stroke: var(--ink); stroke-width: 2.4; }
.mcf-box.is-f { stroke: var(--teal-deep); }
.mcf-box.is-bad { stroke: var(--tangerine); stroke-dasharray: 5 4; }
.mcf-val { fill: color-mix(in srgb, var(--gold) 20%, var(--paper)); stroke: var(--ink); stroke-width: 1.6; }
.mcf-val.is-end { fill: color-mix(in srgb, var(--tangerine) 26%, var(--paper)); stroke: var(--tangerine); stroke-width: 2.4; }
.mcf-arrow { fill: none; stroke: var(--ink); stroke-width: 2; }
.mcf-arrowhead { fill: var(--ink); }
.mcf-text { font-size: 14px; font-weight: 800; fill: var(--ink); text-anchor: middle; pointer-events: none; }
.mcf-text.is-f { fill: var(--teal-deep); }
.mcf-text.is-small { font-size: 11px; font-weight: 700; }
.mcf-row-name { font-size: 13px; font-weight: 800; fill: var(--ink); }
.mcf-row-name.is-off { fill: var(--muted); }
.mcf-row-line { stroke: var(--line); stroke-width: 1; }
.mcf-step { fill: none; stroke: var(--tangerine); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.mca-dot.is-gold { fill: var(--gold); stroke: var(--ink); stroke-width: 2; }