/* Finance applets (mathcourse/static/mathcourse/applets/finance.js): the key
 * under the chart and the Finance Solver table. */

.mcf-line { stroke-width: 3; }
.mcf-dot { fill: var(--ink); stroke: var(--paper); stroke-width: 1.5; }
.mcf-dot.is-b { fill: var(--tangerine); }
.mcf-dot.is-c { fill: var(--teal-deep); }
.mcf-dot.is-d { fill: var(--gold); }
.mcf-dot-d { fill: var(--gold); stroke: var(--paper); stroke-width: 2; }
.mcf-at-line { stroke: var(--tangerine); }

.mcf-key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 8px 0 0; padding: 0; list-style: none; font-size: 0.9rem; font-weight: 600; color: var(--ink); }
.mcf-key li { display: inline-flex; gap: 8px; align-items: center; }
.mcf-swatch { display: inline-block; width: 18px; height: 5px; border-radius: 3px; background: var(--ink); }
.mcf-swatch.is-b { background: var(--tangerine); }
.mcf-swatch.is-c { background: var(--teal-deep); }
.mcf-swatch.is-d { background: var(--gold); }

/* Amounts up to 500 000 need a wider box than the kit's. */
[data-mc-applet="compounding"] .mca-controls input.mca-typed, [data-mc-applet="rhythms"] .mca-controls input.mca-typed { width: 7.4em; }

.mcf-at { margin: 0; font-weight: 700; color: var(--ink); }

.mcf-wrap { margin-top: 18px; overflow-x: auto; }
.mcf-solver { width: 100%; max-width: 760px; border-collapse: collapse; font-size: 1rem; font-variant-numeric: tabular-nums; }
.mcf-solver caption { caption-side: top; padding: 0 0 6px; font-size: 0.86rem; color: var(--muted); text-align: left; }
.mcf-solver th, .mcf-solver td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; color: var(--ink); }
.mcf-solver thead th { font-size: 0.82rem; font-weight: 700; color: var(--muted); white-space: normal; }
.mcf-solver tbody th, .mcf-solver thead th:first-child { text-align: left; }
.mcf-solver tbody th { font-weight: 800; }
.mcf-solver tr.is-find td, .mcf-solver tr.is-find th { background: color-mix(in srgb, var(--gold) 16%, var(--paper)); font-weight: 800; }
.mcf-solver td.is-ask { color: var(--tangerine); font-weight: 800; }
.mcf-solver tr.is-total th, .mcf-solver tr.is-total td { border-top: 2px solid var(--ink); }

@media (max-width: 520px) {
    .mcf-solver { font-size: 0.86rem; }
    .mcf-solver th, .mcf-solver td { padding: 6px 4px; }
}
.mc-applet.is-full .mcf-solver { font-size: 1em; }