/* Kinematics (applets/kinematics.js): a projectile, circular motion and motion
 * on a line with its graphs. Shared classes are in maths-applets.css.
 * Colour: ink is the main object (the path, the position), deep teal the
 * velocity, gold the acceleration, tangerine what the reader changed (the
 * time and the object at that time). */

.kn-line { display: block; }
.kn-line + .kn-line { margin-top: 4px; }
.kn-line:empty { display: none; }
.kn-second { margin-top: -4px; border-left-color: var(--teal-deep); background: color-mix(in srgb, var(--teal) 10%, var(--paper)); }
.kn-v { font-weight: 800; }
.kn-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; }
.kn-graphs { display: grid; gap: 6px; }
.mca-controls > .mca-controls { gap: 12px; }
.kn-low { display: grid; gap: 16px; min-width: 0; }
@media (min-width: 861px) {
    .kn-body { grid-template-rows: auto 1fr; }
    .kn-body > .mca-board { grid-column: 1; grid-row: 1; }
    .kn-body > .mca-side { grid-column: 2; grid-row: 1 / span 2; }
    .kn-body > .kn-low { grid-column: 1; grid-row: 2; align-self: start; }
}

.kn-shaft { fill: none; stroke-width: 3.2; stroke-linecap: round; }
.kn-shaft.is-r { stroke: var(--ink); stroke-width: 2; }
.kn-shaft.is-v { stroke: var(--teal-deep); }
.kn-shaft.is-a { stroke: color-mix(in srgb, var(--gold) 60%, var(--ink)); }
.kn-shaft.is-u { stroke: var(--tangerine); }
.kn-head { stroke: none; }
.kn-head.is-r { fill: var(--ink); }
.kn-head.is-v { fill: var(--teal-deep); }
.kn-head.is-a { fill: color-mix(in srgb, var(--gold) 60%, var(--ink)); }
.kn-head.is-u { fill: var(--tangerine); }
.kn-wall { stroke: color-mix(in srgb, var(--gold) 70%, var(--ink)); stroke-width: 7; stroke-linecap: butt; }
.kn-comp { fill: none; stroke: var(--muted); stroke-width: 1.4; stroke-dasharray: 4 4; }
.kn-ground { fill: color-mix(in srgb, var(--ink) 8%, transparent); stroke: none; }
.kn-pred { stroke: var(--tangerine); stroke-width: 3; }
.kn-tline { stroke: var(--tangerine); stroke-width: 2; }
.kn-turn { stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 3 4; }
.kn-track { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.kn-start { stroke: var(--ink); stroke-width: 2.4; }

.kn-label { font-size: 14px; font-weight: 800; fill: var(--ink); pointer-events: none; }
.kn-label.is-r { fill: var(--ink); }
.kn-label.is-v, .kn-label.is-c { fill: var(--teal-deep); }
.kn-label.is-a { fill: color-mix(in srgb, var(--gold) 60%, var(--ink)); }
.kn-label.is-b { fill: var(--tangerine); }
.kn-halo { paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; }