/* The regression "Explore" applets (residuals, modelfit, sinefit). The shared
 * classes are in maths-applets.css. */

.mcf-square { fill: color-mix(in srgb, var(--tangerine) 24%, transparent); stroke: var(--tangerine); stroke-width: 1.4; }

.mcf-barbox { display: grid; gap: 6px; }
.mcf-barname { display: flex; justify-content: space-between; gap: 12px; margin: 0; font-size: 0.9rem; font-weight: 700; color: var(--ink); }
.mcf-barname output { font-size: 1.1rem; font-weight: 800; color: var(--ink); }
.mcf-bar { display: block; width: 100%; height: auto; }
.mcf-track { fill: color-mix(in srgb, var(--ink) 10%, var(--paper)); stroke: var(--ink); stroke-width: 1; }
.mcf-fill { fill: var(--tangerine); }
.mcf-min { stroke: var(--teal-deep); stroke-width: 4; stroke-linecap: round; }

.mcf-table { max-width: 100%; }
.mcf-table td, .mcf-table th, .mcf-table tbody th, .mcf-table thead th { font-size: 0.9rem; font-weight: 700; color: var(--ink); }
.mcf-table thead th { color: var(--muted); font-size: 0.8rem; }
.mcf-table tbody th { width: 6.8em; text-align: left; padding-left: 6px; }
.mcf-table thead th:first-child { text-align: left; padding-left: 6px; }
.mcf-table tr.is-on th { background: color-mix(in srgb, var(--tangerine) 16%, var(--paper)); }

.mcf-seg button:disabled { opacity: 0.35; cursor: not-allowed; }

@media (max-width: 480px) {
    .mcf-table td, .mcf-table th, .mcf-table tbody th { font-size: 0.8rem; }
    .mcf-table tbody th { width: 5.6em; }
    .mcf-seg { border-radius: 22px; }
    .mcf-seg button { padding: 0 7px; font-size: 0.75rem; }
}