/* Vectors applets (mathcourse/static/mathcourse/applets/vectors.js):
 * column vectors, bold vector letters, arrowheads and the colour keys. */

.mcv-work { font-weight: 500; }
.mcv-work strong, .mcv-say strong { font-weight: 900; }
.mcv-line { display: block; margin: 2px 0; }
.mcv-line .is-1 { font-weight: 800; color: var(--ink); }
.mcv-line .is-2 { font-weight: 800; color: var(--teal-deep); }

.mcv-col { display: inline-flex; flex-direction: column; align-items: center; margin: 0 0.18em; padding: 0 0.32em; border-left: 2px solid currentColor; border-right: 2px solid currentColor; border-radius: 4px; font-size: 0.92em; font-weight: 700; line-height: 1.2; vertical-align: middle; }

.mcv-head { stroke: none; fill: var(--ink); }
.mcv-head.is-b { fill: var(--tangerine); }
.mcv-head.is-c { fill: var(--teal-deep); }
.mcv-head.is-d { fill: var(--gold); }
.mcv-wide { stroke-width: 9; opacity: 0.55; }

.mcv-lab { font-size: 15px; font-weight: 500; fill: var(--ink); pointer-events: none; paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; }
.mcv-lab.is-b { fill: var(--tangerine); }
.mcv-lab.is-c { fill: var(--teal-deep); }
.mcv-lab.is-d { fill: color-mix(in srgb, var(--gold) 55%, var(--ink)); }
.mcv-lab.is-soft { fill: var(--muted); }
.mcv-b { font-weight: 900; }

.mcv-table th.mcv-sec { padding-top: 12px; text-align: left; font-size: 0.9rem; font-weight: 800; color: var(--ink); }
.mcv-table th.mcv-sec.is-2 { color: var(--teal-deep); }
.mcv-table tbody th strong { color: var(--ink); }
.mcv-table input[aria-invalid="true"] { border-color: var(--tangerine); background: color-mix(in srgb, var(--tangerine) 12%, var(--paper)); }
.mca-controls input[type="range"].is-off { opacity: 0.4; }