/* Vectors, part 2 (applets/vectors2.js): the angle between two vectors, the
 * component of a vector, the distance from a point to a line, the vector
 * product as an area and two ships. Shared classes are in maths-applets.css.
 * Colour: ink is the main object, deep teal a second one, gold a third,
 * tangerine what the reader changed or chose. */

.v2-line { display: block; }
.v2-line + .v2-line { margin-top: 4px; }
.v2-line.is-key { font-size: 1.1rem; font-weight: 800; }
.v2-v { font-weight: 800; }
.v2-nb { white-space: nowrap; }
.v2-col { display: inline-flex; flex-direction: column; align-items: center; margin: 0 0.15em; padding: 0 0.35em; border-style: solid; border-color: var(--ink); border-width: 0 2px; border-radius: 6px; vertical-align: middle; font-size: 0.92em; line-height: 1.3; }
.v2-frac { display: inline-flex; flex-direction: column; align-items: center; margin: 0 0.15em; vertical-align: middle; font-size: 0.95em; line-height: 1.3; text-align: center; }
.v2-frac .v2-n { padding: 0 0.3em 1px; border-bottom: 2px solid var(--ink); }
.v2-frac .v2-d { padding: 1px 0.3em 0; }
.v2-method { margin-top: -4px; border-left-color: var(--teal-deep); background: color-mix(in srgb, var(--teal) 10%, var(--paper)); }

.v2-head { fill: var(--ink); }
.v2-head.is-b { fill: var(--tangerine); }
.v2-head.is-c { fill: var(--teal-deep); }
.v2-head.is-d { fill: var(--gold); }
.v2-thick { stroke-width: 4.5; }
.v2-edge { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }
.v2-ring { fill: none; stroke: var(--gold); stroke-width: 4; }
.v2-halo { paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; }
.v2-across { fill: color-mix(in srgb, var(--gold) 55%, var(--ink)); }
.v2-big { font-size: 16px; font-weight: 800; }
.v2 .mca-handle-label { paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; }
.v2 .mca-handle-label.is-c { fill: var(--teal-deep); }

.v2-sw::before { content: ""; display: inline-block; width: 0.8em; height: 0.8em; margin-right: 0.5em; border: 2px solid var(--ink); border-radius: 3px; vertical-align: -1px; }
.v2-sw.is-p::before { border-color: var(--tangerine); background: color-mix(in srgb, var(--tangerine) 30%, var(--paper)); }
.v2-sw.is-t::before { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 45%, var(--paper)); }
.v2-sw.is-along::before { border-color: var(--tangerine); background: var(--tangerine); }
.v2-sw.is-across::before { border-color: var(--gold); background: var(--gold); }

/* crossarea: a × b out of or into the page, and the plane seen edge-on. */
.v2-edgeon { margin-top: 10px; }
.v2-plane { stroke: var(--ink); stroke-width: 5; stroke-linecap: round; opacity: 0.35; }
.v2-k { fill: var(--paper); stroke: var(--tangerine); stroke-width: 3; }
.v2-k-dot { fill: var(--tangerine); }
.v2-k-x { stroke: var(--tangerine); stroke-width: 3; stroke-linecap: round; }
.v2-turn { fill: none; stroke: var(--tangerine); stroke-width: 2.4; }