/* Complex-number applets (mathcourse/static/mathcourse/applets/complex.js):
 * working lines, arrowheads, labels with a halo, and the key colours. */

.mcx-line { display: block; margin: 3px 0; }
.mcx-line sup { font-size: 0.72em; }
.mc-applet-say sup { font-size: 0.72em; }

.mcx-head { stroke: none; fill: var(--ink); }
.mcx-head.is-b { fill: var(--tangerine); }
.mcx-head.is-c { fill: var(--teal-deep); }
.mcx-head.is-d { fill: var(--gold); }

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

.mcx-fill { fill: color-mix(in srgb, var(--ink) 8%, transparent); stroke: none; }
.mcx-unit { fill: none; stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 3 5; }
.mcx-guide { stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 4 4; fill: none; }
.mcx-outline { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linejoin: round; }
.mcx-image { fill: color-mix(in srgb, var(--tangerine) 22%, transparent); stroke: var(--tangerine); stroke-width: 2.4; stroke-linejoin: round; }

.mcx-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 20px; }
@media (max-width: 860px) {
    .mcx-pair { grid-template-columns: minmax(0, 1fr); }
}

/* sinusoidsum: the Argand diagram and the waves side by side, one board. */
.mcx-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); gap: 12px; align-items: center; }
@media (max-width: 600px) {
    .mcx-duo { grid-template-columns: minmax(0, 1fr); }
}