/* Geometry and trigonometry applets, part 2 (applets/space.js): bearings,
 * the angle between two lines, a cuboid and the grazing goat. 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 chose or changed. */

.sp-pair { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: center; }
.sp-line { display: block; }
.sp-line + .sp-line { margin-top: 6px; }
.sp-total { font-size: 1.15rem; font-weight: 800; }
.sp-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; }
.sp-sw.is-1::before { background: color-mix(in srgb, var(--ink) 16%, var(--paper)); }
.sp-sw.is-2::before { border-color: var(--teal-deep); background: color-mix(in srgb, var(--teal) 30%, var(--paper)); }
.sp-sw.is-3::before { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 50%, var(--paper)); }
.sp-sw.is-b::before { border-color: var(--tangerine); background: color-mix(in srgb, var(--tangerine) 30%, var(--paper)); }
.sp-sw.is-c::before { border-color: var(--teal-deep); background: color-mix(in srgb, var(--teal) 30%, var(--paper)); }

.sp-head { fill: var(--ink); }
.sp-hi { stroke-width: 4; }
.sp-theta { font-size: 17px; font-style: italic; fill: var(--ink); }
.sp-vertex { font-size: 15px; font-weight: 800; fill: var(--ink); pointer-events: none; }
.sp-wedge { stroke: var(--ink); stroke-width: 1.5; }
.sp-gold { fill: var(--ink); font-size: 15px; }

.sp-shed { fill: color-mix(in srgb, var(--ink) 30%, var(--paper)); stroke: var(--ink); stroke-width: 3; }
.sp-s { stroke-width: 2.2; stroke-linejoin: round; }
.sp-s1 { fill: color-mix(in srgb, var(--ink) 13%, var(--paper)); stroke: var(--ink); }
.sp-s2 { fill: color-mix(in srgb, var(--teal) 28%, var(--paper)); stroke: var(--teal-deep); }
.sp-s3 { fill: color-mix(in srgb, var(--gold) 45%, var(--paper)); stroke: color-mix(in srgb, var(--gold) 60%, var(--ink)); }
.sp-t2 { fill: var(--teal-deep); }
.sp-t3 { fill: color-mix(in srgb, var(--gold) 40%, var(--ink)); }
.sp-rope { stroke: var(--tangerine); stroke-width: 4; stroke-linecap: round; fill: none; }

.sp-sliders { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 760px) {
  .sp-pair { grid-template-columns: minmax(0, 1fr); }
  .sp-sliders { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .sp-seg { display: flex; width: 100%; border-radius: 16px; }
  .sp-seg button { flex: 1 1 50%; padding: 0 8px; }
}