/* Differential-equations applets (mathcourse/static/mathcourse/applets/diffeq.js):
 * arrowheads, the matrix boxes, the scrolling table of steps and the pair of
 * pictures. Colours are tokens only. */

.mcd-arrow { fill: var(--ink); stroke: var(--paper); stroke-width: 1; stroke-linejoin: round; }
.mcd-arrow.is-b { fill: var(--tangerine); }
.mcd-arrow.is-c { fill: var(--teal-deep); }
.mcd-tag { paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; }

.mcd-system { display: grid; gap: 10px; }
.mcd-eq { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; font-weight: 700; color: var(--ink); }
.mcd-eq .mca-num { width: 4.4em; min-height: 40px; }
.mcd-eq span { white-space: nowrap; }

.mcd-wrap { max-height: 15.5em; overflow: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.mcd-wrap .mca-table { margin: 0; }
.mcd-wrap thead th { position: sticky; top: 0; z-index: 1; background: var(--paper); }
.mcd-table th, .mcd-table td { padding: 5px 2px; font-size: 0.88rem; }
.mcd-table thead th { font-size: 0.78rem; }

.mcd-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.mcd-pair > div { min-width: 0; }
.mcd-cap { margin: 6px 2px 0; font-size: 0.85rem; font-weight: 700; color: var(--muted); }
.mcd-two { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 24px; align-items: start; }
.mcd-two > div { min-width: 0; display: grid; gap: 16px; align-content: start; }

.mcd-key { margin: 0; font-size: 0.86rem; color: var(--muted); }
.mcd-key b { color: var(--ink); }
.mca-btns .mc-ex-btn:disabled { opacity: 0.45; cursor: not-allowed; }

@media (max-width: 860px) {
    .mcd-pair, .mcd-two { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
    .mcd-seg button { padding: 0 10px; font-size: 0.82rem; }
}
.mcd-below { margin-top: 16px; }
.mc-applet > .mcd-wrap, .mc-applet > .mc-det-facts, .mc-applet > .mcd-key { margin-top: 16px; }
.mc-det-facts.mcd-facts { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }