/* Bank angle and stall speed (js/bankstall.js). */
.bs-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
.bs-svg { display: block; width: 100%; max-width: 520px; margin: 0 auto; }
.bs-hz { stroke: var(--line); stroke-width: 1.5; }
.bs-wing { stroke: #2b2f3e; stroke-width: 9; stroke-linecap: round; }
.bs-hub { fill: #5b6275; stroke: #2b2f3e; stroke-width: 6; }
.bs-ln { stroke-width: 3.5; stroke-linecap: round; }
.bs-hd { stroke: none; }
.bs-lift { stroke: var(--orange); fill: var(--orange); }
.bs-wt { stroke: var(--ink-3); fill: var(--ink-3); }
.bs-dash { stroke: var(--orange); stroke-width: 1.5; stroke-dasharray: 4 4; opacity: .6; }
.bs-arc { fill: none; stroke: var(--orange); stroke-width: 2.5; }
.bs-t { font: 700 14px var(--ui); }
text.bs-pink { fill: var(--orange-text); }
.bs-pink { color: var(--orange-text); }
.bs-blue { color: var(--orange-deep); }
.bs-faint { fill: var(--ink-3); }
.bs-read { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; text-align: center; margin-top: 8px; }
.bs-k { margin: 0; color: var(--ink-2); font: 600 .95rem var(--ui); }
.bs-big { margin: 0; font: 800 2.2rem/1.1 var(--ui); font-variant-numeric: tabular-nums; }
.bs-up { font-size: 1.2rem; }
.bs-eq { margin: 2px 0 0; color: var(--ink-2); font-size: .9rem; }
.bs-bar { position: relative; height: 18px; margin-top: 14px; border-radius: 99px; background: var(--canvas); border: 1px solid var(--line); }
.bs-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: var(--orange-deep); }
.bs-bar b { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--ink); }
.bs-scale { display: flex; justify-content: space-between; margin-top: 4px; font-size: .82rem; color: var(--ink-2); }
.bs-cap { margin: 12px 0 0; padding: 10px 14px; border-radius: var(--r-s); background: color-mix(in srgb, var(--amber) 28%, var(--surface)); color: var(--ink); text-align: center; }
.bs-ctl { display: grid; gap: 14px; }
.bs-range { display: grid; gap: 4px; font: 600 .95rem var(--ui); color: var(--ink-2); }
.bs-range b { color: var(--orange-text); font-weight: 800; }
.bs-range input { width: 100%; accent-color: var(--orange); }
.bs-presets { gap: 4px; }
.bs-presets .btn[aria-pressed="true"] { background: var(--sunrise); color: #fff; }
.bs-why h3 { margin: 0 0 4px; font-size: 1rem; }
.bs-why p { margin: 0 0 8px; font-size: .92rem; }
@media (max-width: 800px) { .bs-layout { grid-template-columns: minmax(0, 1fr); } }
.bs-plane { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bs-sel { display: grid; gap: 4px; font: 600 .95rem var(--ui); color: var(--ink-2); }
.bs-sel select { width: 100%; }