/* ═══════════════════════════════════════════════════════════════
   Helm · Flugsteuerung — zwei virtuelle Sticks, Schubhebel, Vorwahl

   Gebaut fuer ein Tablet quer in zwei Haenden: Die Daumen liegen auf
   den Sticks, der Schubhebel sitzt dazwischen. Nichts scrollt, nichts
   bricht je nach Breite um — die Bedienelemente stehen immer am selben
   Ort, sonst muss der Pilot hinschauen statt aufs Fenster.
   ═══════════════════════════════════════════════════════════════ */

.flight-deck {
    --stick-size: clamp(180px, 30vmin, 300px);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    /* Eigenes Layout ohne Kopf- und Fussleisten: das Bedienfeld hat den ganzen Bildschirm. */
    min-height: 100vh;
    min-height: 100dvh;
    padding: max(var(--space-md), env(safe-area-inset-top)) max(var(--space-md), env(safe-area-inset-right))
             max(var(--space-md), env(safe-area-inset-bottom)) max(var(--space-md), env(safe-area-inset-left));
    /* Kein Markieren/Kontextmenue beim Halten; Zoomen/Scrollen sperren die Bedienelemente
       selbst (touch-action), damit die Seite hochkant noch scrollbar bleibt. */
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

body.flight-body {
    margin: 0;
    background: var(--bg-primary);
    color: var(--text-primary);
}

/* ── Kopfzeile ────────────────────────────────────────────────────── */
.flight-hud {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm) var(--space-md);
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--station-accent);
    border-radius: var(--radius-lg);
    padding: var(--space-sm) var(--space-md);
}

.flight-hud-values {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
}

.flight-hud-item {
    display: flex;
    flex-direction: column;
    min-width: 4.5rem;
}

.flight-hud-label {
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-secondary);
}

.flight-hud-value {
    font-family: var(--font-mono);
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.flight-hud-switches {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
}

.flight-back {
    color: var(--station-accent);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.5rem 0.875rem;
}

/* Kippschalter */
.flight-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    min-height: 44px;
}

.flight-toggle input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.flight-toggle-track {
    position: relative;
    width: 48px;
    height: 26px;
    border-radius: 13px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-strong, var(--border-color));
    transition: background 0.15s;
}

.flight-toggle-track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--text-secondary);
    transition: transform 0.15s, background 0.15s;
}

.flight-toggle input:checked + .flight-toggle-track {
    background: color-mix(in srgb, var(--station-accent) 35%, transparent);
}

.flight-toggle input:checked + .flight-toggle-track::after {
    transform: translateX(22px);
    background: var(--station-accent);
}

.flight-toggle input:focus-visible + .flight-toggle-track {
    outline: 2px solid var(--station-accent);
    outline-offset: 2px;
}

.flight-toggle-text {
    font-size: var(--text-sm);
    color: var(--text-primary);
}

.flight-hud-value--alarm {
    color: var(--accent-red);
}

/* ── Bedienfeld ───────────────────────────────────────────────────── */
.flight-controls {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-md);
    align-items: stretch;
}

.flight-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
}

.flight-zone-label {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-secondary);
}

/* ── Virtueller Stick ─────────────────────────────────────────────── */
.vstick {
    position: relative;
    width: var(--stick-size);
    height: var(--stick-size);
    border-radius: 50%;
    background:
        radial-gradient(circle, transparent 0 32%, color-mix(in srgb, var(--station-accent) 10%, transparent) 33% 34%, transparent 35%),
        var(--bg-secondary);
    border: 2px solid var(--border-color);
    touch-action: none;
    cursor: grab;
}

.vstick--active {
    border-color: var(--station-accent);
    cursor: grabbing;
}

.vstick--held .vstick-knob {
    /* Stick bleibt stehen (Zentrieren aus): sichtbar machen, dass weiter gesteuert wird. */
    box-shadow: 0 0 0 3px var(--accent-yellow);
}

.vstick-cross {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(var(--border-color), var(--border-color)) center / 1px 100% no-repeat,
        linear-gradient(var(--border-color), var(--border-color)) center / 100% 1px no-repeat;
    border-radius: 50%;
    opacity: 0.6;
}

.vstick-knob {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 38%;
    height: 38%;
    margin: -19% 0 0 -19%;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--station-accent) 70%, white), var(--station-accent));
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
    pointer-events: none;
    will-change: transform;
}

.vstick--rcs .vstick-knob {
    background: radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--accent-blue, var(--station-accent)) 70%, white), var(--accent-blue, var(--station-accent)));
}

/* ── Schubhebel ───────────────────────────────────────────────────── */
.throttle-block {
    display: flex;
    gap: var(--space-md);
    align-items: stretch;
    height: calc(var(--stick-size) * 1.25);
}

.throttle-lever {
    display: flex;
    gap: 0.375rem;
    touch-action: none;
    cursor: ns-resize;
}

.throttle-lever:focus-visible {
    outline: 2px solid var(--station-accent);
    outline-offset: 4px;
    border-radius: var(--radius-md);
}

.throttle-scale {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-secondary);
    text-align: right;
}

.throttle-track {
    position: relative;
    width: 64px;
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    overflow: hidden;
}

.throttle-zero {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    margin-top: -1px;
    background: var(--text-secondary);
    opacity: 0.6;
}

.throttle-fill {
    position: absolute;
    left: 0;
    right: 0;
    background: color-mix(in srgb, var(--accent-green) 45%, transparent);
}

.throttle-fill--reverse {
    background: color-mix(in srgb, var(--accent-red) 45%, transparent);
}

.throttle-handle {
    position: absolute;
    left: -2px;
    right: -2px;
    height: 22px;
    margin-top: -11px;
    border-radius: var(--radius-sm);
    background: var(--text-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

.throttle-presets-v {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.375rem;
}

.throttle-preset {
    flex: 1;
    min-height: 44px;
    min-width: 5rem;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text-primary);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
}

.throttle-preset--reverse {
    color: var(--accent-red);
}

.throttle-preset--active {
    border-color: var(--station-accent);
    background: color-mix(in srgb, var(--station-accent) 25%, var(--bg-secondary));
}

/* Feinflug: Hebel und Anzeige in Gelb, damit niemand den kurzen Hebelweg fuer den vollen haelt. */
.throttle-block--fine .throttle-track {
    border-color: var(--accent-yellow);
}

.throttle-block--fine .throttle-scale {
    color: var(--accent-yellow);
}

.throttle-readout.throttle-readout--fine {
    color: var(--accent-yellow);
}

.throttle-readout {
    font-family: var(--font-mono);
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--text-primary);
}

/* ── Roll-Schieber ────────────────────────────────────────────────── */
.roll-slider {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: var(--stick-size);
    touch-action: none;
    cursor: ew-resize;
}

.roll-mark {
    font-size: 1.25rem;
    color: var(--text-secondary);
}

.roll-track {
    position: relative;
    flex: 1;
    height: 48px;
    border-radius: 24px;
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
}

.roll-slider.vstick--active .roll-track {
    border-color: var(--station-accent);
}

.roll-center {
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 50%;
    width: 2px;
    margin-left: -1px;
    background: var(--border-color);
}

.roll-knob {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border-radius: 50%;
    background: var(--station-accent);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
    pointer-events: none;
    will-change: transform;
}

.roll-slider.vstick--held .roll-knob {
    box-shadow: 0 0 0 3px var(--accent-yellow);
}

/* ── RCS vor/zurueck ──────────────────────────────────────────────── */
.rcs-axial {
    display: flex;
    gap: var(--space-sm);
}

.rcs-axial-btn {
    min-height: 44px;
    padding: 0 0.875rem;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    touch-action: none;
    cursor: pointer;
}

.rcs-axial-btn--active {
    border-color: var(--station-accent);
    color: var(--station-accent);
}

/* ── Hochkant / schmale Bildschirme ───────────────────────────────── */
@media (max-width: 760px) {
    .flight-controls {
        grid-template-columns: 1fr 1fr;
    }
    .flight-zone--center {
        grid-column: 1 / -1;
        order: -1;
    }
    /* Sechs Vorwahl-Tasten à 44 px plus Abstände: darunter ragt −100 % aus dem Feld. */
    .throttle-block {
        height: 300px;
    }
}

/* Andock-Anflug (Fragment der Dock-Station) — Nebeninfo, nicht Hauptanzeige. */
.flight-zone .dock-approach {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    text-align: center;
    max-width: var(--stick-size);
}