/* Formation flying article: static figures, the formation-change animation
 * and the "be the wingman" game. Shares tokens with home.css / article.css. */
.fm-jet { fill: var(--ink); }
.fm-jet.lead { fill: var(--magenta); }
.fm-ref { stroke: var(--blue); stroke-width: 2; stroke-dasharray: 6 5; fill: none; }
.fm-arc { stroke: var(--ink-soft); stroke-width: 1.4; stroke-dasharray: 5 5; fill: none; }
.fm-arc.out { stroke: var(--magenta); stroke-dasharray: none; stroke-width: 2.4; }
.fm-arc.in { stroke: var(--blue); stroke-dasharray: none; stroke-width: 2.4; }
.fm-dot { fill: var(--ink-soft); }
.fm-sky { fill: color-mix(in srgb, var(--blue) 10%, var(--card)); }
.fm-hit { fill: none; stroke: var(--magenta); stroke-width: 2.5; }
.fm-hit.on { stroke: #2f855a; }
.fm-cross { stroke: var(--magenta); stroke-width: 2.5; stroke-linecap: round; fill: none; }
.fm-cross.on { stroke: #2f855a; }
.fm-buttons { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.fm-buttons button, .fm-start { font: 600 15px var(--body); padding: 9px 14px; border-radius: 999px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); cursor: pointer; }
.fm-buttons button[aria-pressed="true"], .fm-start { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.fm-buttons button:focus-visible, .fm-start:focus-visible { outline: 2px solid var(--magenta); outline-offset: 2px; }
.widget.fm { grid-template-columns: 1fr; }
.fm-stage { display: block; width: 100%; max-width: 520px; height: auto; margin: 0 auto; touch-action: none; border-radius: 12px; }
.fm-bar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.fm-score { font: 600 18px var(--mono); color: var(--ink); }
.prose .fm-legend { list-style: none; padding: 0; margin: 10px 4px 0; padding: 0; display: grid; gap: 4px; font: 600 13px/1.4 var(--mono); }
.prose .fm-legend li { font-size: 13px; margin: 0; }
.fm-legend li::before { content: ""; display: inline-block; width: 18px; height: 3px; margin-right: 8px; vertical-align: middle; border-radius: 2px; }
.fm-legend .out { color: var(--magenta); } .fm-legend .out::before { background: var(--magenta); }
.fm-legend .in { color: var(--blue); } .fm-legend .in::before { background: var(--blue); }