/* Integration applets (mathcourse/static/mathcourse/applets/integral.js):
 * the integral sign with its limits, the list of pieces under a speed-time
 * graph, and the discs of a solid of revolution. Colours are tokens only. */

.mci { display: inline-flex; align-items: center; margin: 0 0.12em; vertical-align: middle; }
.mci-sign { font-size: 1.8em; font-weight: 400; line-height: 0.8; }
.mci-lims { display: inline-flex; flex-direction: column; justify-content: space-between; min-height: 2.5em; margin-left: -0.05em; font-size: 0.68em; font-weight: 700; line-height: 1.1; }
.mci-lims > span { display: block; }

.mci-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.mci-list li { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 0.95rem; color: var(--ink); }
.mci-shape { min-width: 8.2em; font-weight: 800; }
.mci-sum { color: var(--muted); font-weight: 600; }
.mci-list b { font-weight: 800; color: var(--ink); }

.mci-region { fill: color-mix(in srgb, var(--ink) 7%, transparent); stroke: none; }
.mci-ghost { fill: none; stroke: var(--muted); stroke-width: 1.1; stroke-dasharray: 3 4; }
.mci-band { fill: color-mix(in srgb, var(--teal) 30%, var(--paper)); stroke: var(--teal-deep); stroke-width: 0.9; stroke-linejoin: round; }
.mci-band.is-far { fill: color-mix(in srgb, var(--teal) 16%, var(--paper)); }
.mci-strip { fill: color-mix(in srgb, var(--ink) 10%, var(--paper)); stroke: var(--ink); stroke-width: 1; stroke-linejoin: round; }
.mci-strip.is-turned { fill: color-mix(in srgb, var(--tangerine) 42%, var(--paper)); stroke: var(--tangerine); }
.mci-band.is-inner { fill: color-mix(in srgb, var(--ink) 22%, var(--paper)); stroke: var(--ink); }
.mci-face { fill: color-mix(in srgb, var(--teal) 48%, var(--paper)); stroke: var(--teal-deep); stroke-width: 1.1; stroke-linejoin: round; }
.mci-rim { fill: none; stroke: var(--gold); stroke-width: 2; stroke-dasharray: 6 4; }
.mci-rim.is-inner { stroke: var(--tangerine); }
.mci-axle { fill: none; stroke: var(--teal-deep); stroke-width: 2; stroke-dasharray: 12 4 2 4; }

.mca-btns[hidden] { display: none; }
.mca-working b { font-weight: 800; }
.mca-working sup { font-size: 0.7em; }

@media (max-width: 520px) {
    .mci-seg { max-width: 100%; }
    .mci-seg button { padding: 0 8px; font-size: 0.8rem; }
}

.mci-stack { display: grid; gap: 16px; align-content: start; }
[data-hole-row][hidden] { display: none; }
.mci-controls label { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; }
.mci-controls input[type="range"] { grid-column: 1 / -1; }
.mci-table th, .mci-table td { padding: 2px 2px; font-size: 0.88rem; }
.mci-table thead th { font-size: 0.75rem; }