/* ═══════════════════════════════════════════════════════════════
   Helm Station Controls (CC_010) — Design-Modell v2

   Aenderungen gegenueber v1:
     - Schub-Voreinstellungen im 3er-Raster mit 48-px-Tasten statt
       schmaler Zeilen; Rueckwaerts-Werte tragen einen eigenen Ton
     - Joystick-Tasten 48 px hoch, Beschriftung 13 px statt 11 px
     - Manoevertasten mit Wirkungsangabe statt nacktem Kuerzel
     - Navigationsziel und Telemetrie als Label/Wert-Zeilen
     - ausschliesslich Tokens statt der alten rgba(0,229,255,…)-Werte
   ═══════════════════════════════════════════════════════════════ */

/* ── Helm Layout ──────────────────────────────────────────────────────── */
.helm-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    grid-template-rows: auto;
    gap: var(--space-md);
    padding: var(--space-md);
    align-items: start;
}

.helm-section {
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--station-accent);
    border-radius: var(--radius-lg);
    padding: 1.125rem;
}

.helm-section .panel-section-title {
    font-size: var(--text-md);
    font-weight: 700;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-primary);
    padding-bottom: 0.625rem;
    margin-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-color);
}

/* Zwischenueberschrift ueber einer Tastengruppe */
.helm-control-label {
    display: block;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
}

/* ── Kompass ──────────────────────────────────────────────────────────── */
.compass-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.compass-svg {
    display: block;
}

.compass-readout {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-md);
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

.compass-readout strong {
    color: var(--text-primary);
    font-weight: 700;
}

.compass-readout-hint strong {
    color: var(--station-accent);
}

.compass-error {
    color: var(--accent-red);
    font-size: var(--text-sm);
    font-family: var(--font-mono);
}

/* ── Kurs-Formular ────────────────────────────────────────────────────── */
.helm-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1.125rem;
}

.helm-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.625rem;
}

/* Kurs und Pitch werden abgelesen, nicht gelesen — darum groesser und fetter. */
.form-input--numeric {
    min-height: 44px;
    font-size: var(--text-md);
    font-weight: 600;
}

.helm-btn--block {
    width: 100%;
    min-height: var(--control-h-lg);
}

/* ── Schub ────────────────────────────────────────────────────────────── */
.speed-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
    flex-wrap: wrap;
}

.speed-bar-wrap {
    width: 44px;
    max-width: 44px;
    flex-shrink: 0;
}

.speed-bar {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 44px;
    height: 150px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    overflow: hidden;
    gap: 0;
}

.speed-bar-fill {
    background: linear-gradient(to top, #0e7490, var(--accent-cyan));
}

/* Rueckwaertsschub bleibt farblich getrennt vom Vorwaertsschub. */
.speed-bar-fill--reverse {
    background: linear-gradient(to top, #9a3412, #fb923c) !important;
}

.speed-readout {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.speed-current-label {
    font-family: var(--font-mono);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-primary);
}

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

.speed-error {
    color: var(--accent-red);
    font-size: var(--text-sm);
    width: 100%;
}

/* ── Schub-Voreinstellungen ───────────────────────────────────────────── */
.throttle-presets {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-sm);
    margin-top: 0;
}

.throttle-presets .throttle-preset-btn {
    min-height: var(--control-h-lg);
    padding: 0 var(--space-sm);
    background: var(--bg-secondary);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: var(--text-md);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
    text-transform: none;
}

.throttle-presets .throttle-preset-btn:hover {
    background: var(--bg-raised);
    border-color: var(--station-accent);
}

.throttle-presets .throttle-preset-btn--reverse {
    color: #fdba74;
}

.throttle-presets .throttle-preset-btn--active {
    background: var(--accent-cyan);
    border-color: var(--accent-cyan);
    color: #07131c;
}

.throttle-presets .throttle-preset-btn--reverse.throttle-preset-btn--active {
    background: #fb923c;
    border-color: #fb923c;
    color: #1a0e04;
}

/* ── Block-Taste ─────────────────────────────────────────────────────── */
a.helm-btn--block {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.helm-section--controls .dock-approach {
    margin-top: var(--space-md);
}

/* ── Manöver ──────────────────────────────────────────────────────────── */
.maneuver-container {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 0 0 var(--space-md);
}

.maneuver-active-label {
    font-size: var(--text-md);
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    color: var(--station-accent);
    text-transform: uppercase;
}

.maneuver-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.maneuver-buttons form {
    display: contents;
}

.maneuver-buttons .maneuver-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    width: 100%;
    min-height: var(--control-h-lg);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-secondary);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    color: var(--accent-cyan);
    text-align: left;
}

.maneuver-btn-label {
    font-size: var(--text-base);
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

.maneuver-btn-hint {
    font-size: var(--text-xs);
    font-weight: 400;
    letter-spacing: var(--tracking-tight);
    text-transform: none;
    color: var(--text-secondary);
}

.maneuver-buttons .maneuver-btn--evasive { color: var(--accent-yellow); }
.maneuver-buttons .maneuver-btn--attack  { color: var(--accent-red); }
.maneuver-buttons .maneuver-btn--orbit   { color: var(--accent-blue); }

.maneuver-buttons .maneuver-btn--active {
    background: var(--accent-cyan);
    border-color: var(--accent-cyan);
    color: #07131c;
}

.maneuver-buttons .maneuver-btn--active .maneuver-btn-hint { color: rgba(7, 19, 28, 0.8); }

.maneuver-buttons .maneuver-btn--evasive.maneuver-btn--active {
    background: var(--accent-yellow);
    border-color: var(--accent-yellow);
    color: #1a1204;
}

.maneuver-buttons .maneuver-btn--evasive.maneuver-btn--active .maneuver-btn-hint { color: rgba(26, 18, 4, 0.8); }

.maneuver-buttons .maneuver-btn--attack.maneuver-btn--active {
    background: var(--accent-red);
    border-color: var(--accent-red);
    color: #180708;
}

.maneuver-buttons .maneuver-btn--attack.maneuver-btn--active .maneuver-btn-hint { color: rgba(24, 7, 8, 0.85); }

.maneuver-buttons .maneuver-btn--orbit.maneuver-btn--active {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
    color: #061321;
}

.maneuver-buttons .maneuver-btn--orbit.maneuver-btn--active .maneuver-btn-hint { color: rgba(6, 19, 33, 0.8); }

/* ── Navigationsziel ──────────────────────────────────────────────────── */
.helm-target-display {
    margin-top: var(--space-md);
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--accent-green);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
}

.helm-target-title {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--accent-green);
    margin: 0 0 var(--space-sm);
}

.helm-target-info {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: var(--text-sm);
    padding: 3px 0;
}

.helm-target-label { color: var(--text-secondary); }

.helm-target-value {
    color: var(--text-primary);
    font-weight: 600;
    text-align: right;
}

.helm-target-value--accent {
    color: var(--station-accent);
    font-weight: 700;
}

.helm-recommendation {
    color: var(--text-secondary);
    font-size: var(--text-xs);
}

/* ── Telemetrie ───────────────────────────────────────────────────────── */
.helm-section--telemetry .telemetry-table {
    width: 100%;
}

.helm-section--telemetry .telemetry-label {
    font-size: var(--text-sm);
    font-weight: 400;
    letter-spacing: var(--tracking-tight);
    text-transform: none;
    text-align: left;
    color: var(--text-secondary);
    padding: 6px 0;
    border-bottom: 1px solid var(--border-color);
}

.helm-section--telemetry .telemetry-value {
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--text-primary);
    text-align: right;
    padding: 6px 0;
    border-bottom: 1px solid var(--border-color);
}

.telemetry-target-section,
.telemetry-autopilot-section {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-color);
}

.telemetry-target-title {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--accent-green);
    margin: 0 0 var(--space-sm);
}

.telemetry-recommendation {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin-top: var(--space-sm);
    padding: 6px 8px;
    background: var(--tint-green);
    border-radius: var(--radius-sm);
}

/* Gefahren: Schwerefeld und Verlust des Schiffs. */
.helm-hazard {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin: 0 0 var(--space-sm);
    padding: 6px 8px;
    border-left: 3px solid var(--accent-yellow);
    background: rgba(245, 158, 11, 0.12);
    border-radius: var(--radius-sm);
}
.helm-hazard strong { color: var(--accent-yellow); margin-right: 4px; }
.helm-hazard--captured,
.helm-hazard--lost {
    border-left-color: var(--accent-red);
    background: rgba(239, 68, 68, 0.14);
}
.helm-hazard--captured strong { color: var(--accent-red); }
.helm-hazard--lost { color: var(--accent-red); font-weight: 700; letter-spacing: var(--tracking-label); }

/* Autopilot-Modi teilen sich die Bedienelement-Familie. */
.telemetry-autopilot-section .helm-btn {
    min-height: var(--control-h-sm);
    padding: 0 10px;
    font-size: var(--text-xs);
}

.telemetry-autopilot-section .helm-btn--active {
    background: var(--station-accent);
    border-color: var(--station-accent);
    color: #06131c;
}

@media (max-width: 640px) {
    .helm-form-grid,
    .throttle-presets {
        grid-template-columns: 1fr 1fr;
    }
}

/* Anflug-Anzeige im RCS-Block: Zielstation, Restweg zur Andockzone, Fahrt */
.dock-approach { display: flex; flex-wrap: wrap; gap: 0.25rem 0.6rem; align-items: baseline; margin: 0.25rem 0 0.5rem; padding: 0.35rem 0.5rem; border: 1px solid rgba(124,255,212,0.25); border-radius: 4px; font-size: 0.78rem; }
.dock-approach.in-zone { border-color: rgba(0,200,83,0.7); background: rgba(0,200,83,0.08); }
.dock-approach-label { text-transform: uppercase; letter-spacing: 0.06em; color: #888; }
.dock-approach-value { font-family: monospace; color: #cfd8dc; }
.dock-approach-value.too-fast { color: #ff7a6e; }
.dock-approach-zone { color: #00c853; font-weight: bold; }
.dock-approach-step { margin-left: auto; font-family: monospace; color: #ffd600; }

/* ── Breite Bildschirme (ab 1600 px) ──────────────────────────────────────
   Ohne Scrollen (Referenz 2560×1070, 4K mit 150 %): breiter als die
   Standardhülle, die Blöcke reichen bis an den unteren Rand (wie die
   Reaktorkontrolle). 1600–1799 px: vier Spalten, Telemetrie (der längste
   Block) über beide Reihen; ab 1800 px alle sechs Blöcke in einer Reihe. */
@media (min-width: 1600px) {
    .station-main:has(.helm-layout) {
        max-width: min(2800px, 100%);
        display: flex;
        flex-direction: column;
    }
    .helm-layout {
        flex: 1 0 auto;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "compass throttle maneuver tele"
            "warp    dock     dock     tele";
        align-items: stretch;
        padding: 0;
    }
    .helm-section { min-width: 0; }
    .helm-section--compass   { grid-area: compass; }
    .helm-section--throttle  { grid-area: throttle; }
    .helm-section--maneuver  { grid-area: maneuver; }
    .helm-section--controls  { grid-area: dock; }
    .helm-section--warp      { grid-area: warp; }
    .helm-section--telemetry { grid-area: tele; }
}

@media (min-width: 1800px) {
    .helm-layout {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        grid-template-rows: 1fr;
        grid-template-areas: "compass throttle dock maneuver warp tele";
    }
}