/*
  StarshipOS — Engineering FTL-Antrieb (CC_042) · Warpfeld-Kern

  Seite: templates/engineering/ftl.html, Fragmente fragments/ftl-panel.html und
  fragments/jump-sequence.html :: jump-engineering-ftl. Panels, Badges, Knoepfe und die
  Reaktor-Leiste kommen aus sos-components.css; hier stehen nur die seiteneigenen Teile.

  Die Zustandsfarbe --ftl-col haengt am Panel (.ftl-state-idle|charging|ready|jumping)
  und faerbt Kern, Ringe, Spulen, volle Kondensatoren und die Feldwelle.
*/

.ftl-page {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

.ftl-page .sos-panel__title { margin: 0; }

.ftl-grid {
    --ftl-col: var(--text-muted);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr));
    gap: var(--space-md);
    align-items: start;
}
.ftl-grid.ftl-state-charging { --ftl-col: var(--accent-yellow); }
.ftl-grid.ftl-state-ready    { --ftl-col: var(--accent-green); }
.ftl-grid.ftl-state-jumping  { --ftl-col: #00e5ff; }

.ftl-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    min-width: 0;
}

.ftl-stack { display: flex; flex-direction: column; gap: var(--space-md); }
.ftl-stack--tight { gap: 6px; }

.ftl-label {
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    white-space: nowrap;
}

.ftl-ok   { font-size: var(--text-sm); color: var(--accent-green); }
.ftl-warn { margin: 0; font-size: var(--text-sm); color: var(--accent-yellow); }
.ftl-block { font-size: var(--text-sm); font-weight: 700; color: #ff7a45; }
.ftl-block.is-info { color: var(--text-muted); font-weight: 400; }
.ftl-message { font-size: var(--text-sm); color: var(--text-muted); }
.ftl-error {
    padding: 6px 10px;
    border: 1px solid var(--accent-red);
    background: var(--tint-red);
    color: var(--accent-red);
    font-size: var(--text-sm);
    border-radius: var(--radius-sm);
}
.ftl-tone-success { color: var(--accent-green); }
.ftl-tone-warning { color: var(--accent-yellow); }
.ftl-tone-neutral { color: var(--text-muted); }

.ftl-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.ftl-icon { width: 16px; height: 16px; flex-shrink: 0; }
.ftl-link { font-size: var(--text-sm); color: var(--accent-cyan); }


/* ── Sprungkette (Kopfpanel) ─────────────────────────────────────────────── */

.ftl-chain-body { display: flex; flex-direction: column; gap: 12px; }
.ftl-chain-hint { margin: 0; color: var(--text-muted); font-size: var(--text-sm); text-wrap: pretty; }
.ftl-chain-facts .ftl-chain-hint { flex: 1 1 280px; }

.ftl-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 6px;
}
.ftl-steps li {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(224, 231, 255, 0.5);
    font-size: var(--text-sm);
}
.ftl-steps li[data-state="done"]    { color: var(--accent-green); border-color: rgba(16, 185, 129, 0.5); }
.ftl-steps li[data-state="current"] { color: var(--text-primary); border-color: var(--accent-cyan); background: rgba(6, 182, 212, 0.12); }
.ftl-steps li[data-state="alert"]   { color: var(--accent-red); border-color: var(--accent-red); background: var(--tint-red); }
.ftl-step-mark { font-weight: 700; min-width: 1.2em; }
.ftl-step-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    background: var(--accent-cyan);
    transition: width var(--transition-slow);
}

.ftl-chain-facts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
    font-size: var(--text-sm);
}
.ftl-chain-fact { display: flex; align-items: center; gap: 8px; }
.ftl-ep { display: flex; gap: 3px; }
.ftl-ep-block {
    width: 14px;
    height: 14px;
    border-radius: 2px;
    border: 1px solid var(--border-color);
    background: var(--bg-panel);
}
.ftl-ep-block.is-on {
    border-color: var(--accent-green);
    background: rgba(16, 185, 129, 0.55);
    box-shadow: 0 0 4px var(--accent-green);
}

.ftl-chain-order {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--accent-yellow);
    background: var(--tint-yellow);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
}
.ftl-chain-order p { margin: 0; }
.ftl-chain-order-title {
    font-weight: 700;
    color: var(--accent-yellow);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    font-size: var(--text-xs);
}


/* ── Warpfeld-Kern ───────────────────────────────────────────────────────── */

.ftl-core-well {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 12px 0;
    background: #000510;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.ftl-core { width: 100%; max-width: 440px; height: auto; display: block; overflow: visible; }

.ftl-stop { stop-color: var(--ftl-col); }

.ftl-ticks line { stroke: var(--border-color); stroke-width: 1; stroke-linecap: round; }
.ftl-ticks line.is-major { stroke-width: 2; }
.ftl-ticks line.is-lit { stroke: var(--ftl-col); }

.ftl-ring-track { fill: none; stroke: var(--border-color); stroke-width: 4; }
.ftl-ring-arc { fill: none; stroke: var(--ftl-col); stroke-width: 2; stroke-linecap: round; }
.ftl-ring-arc--glow { stroke-width: 4; opacity: 0.8; }

.ftl-ring { fill: none; stroke: var(--ftl-col); }
.ftl-ring--c { stroke-width: 10; stroke-dasharray: 70 898; opacity: 0.18; }
.ftl-ring--a { stroke-width: 1.5; stroke-dasharray: 14 8; opacity: 0.7; }
.ftl-ring--b { stroke-width: 1; stroke-dasharray: 2 7; opacity: 0.8; }

.ftl-coil rect { fill: #0d1520; stroke: var(--border-color); stroke-width: 1; }
.ftl-coil.is-partial rect { fill: rgba(245, 158, 11, 0.2); stroke: var(--ftl-col); }
.ftl-coil.is-on rect { fill: var(--ftl-col); stroke: var(--ftl-col); }
.ftl-coil-beam { stroke: var(--ftl-col); stroke-width: 1; opacity: 0; }
.ftl-coil.is-on .ftl-coil-beam { opacity: 0.7; }

.ftl-core-glow { fill: var(--ftl-col); opacity: 0.25; }
.ftl-core-ball { opacity: 0.7; }
.ftl-core-lens { fill: #000510; fill-opacity: 0.55; stroke: var(--ftl-col); stroke-width: 1; stroke-opacity: 0.5; }
.ftl-core-kicker { fill: var(--ftl-col); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; }
.ftl-core-state { fill: var(--text-primary); font-family: var(--font-mono); font-size: 22px; font-weight: 700; letter-spacing: 0.08em; }
.ftl-core-charge { fill: var(--text-primary); opacity: 0.7; font-family: var(--font-mono); font-size: 12px; }

.ftl-corner {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: var(--text-xs);
    color: var(--text-muted);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}
.ftl-corner strong { color: var(--text-primary); font-size: var(--text-md); font-weight: 400; }
.ftl-corner--tl { top: 10px; left: 12px; }
.ftl-corner--tr { top: 10px; right: 12px; align-items: flex-end; }
.ftl-corner--bl { bottom: 10px; left: 12px; }
.ftl-corner--br { bottom: 10px; right: 12px; align-items: flex-end; }


/* ── Kondensatorbank ─────────────────────────────────────────────────────── */

.ftl-caps { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; }
.ftl-cap { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.ftl-cap span { font-size: 10px; color: var(--text-muted); text-align: center; }
.ftl-cap-cell {
    position: relative;
    height: 72px;
    background: #000510;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xs);
    overflow: hidden;
}
.ftl-cap-cell::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg, rgba(0, 5, 16, 0.7) 0 1px, transparent 1px 6px);
}
.ftl-cap-fill {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--accent-yellow);
    opacity: 0.85;
    box-shadow: 0 0 8px var(--accent-yellow);
}
.ftl-state-ready .ftl-cap-fill,
.ftl-state-jumping .ftl-cap-fill { background: var(--ftl-col); box-shadow: 0 0 8px var(--ftl-col); }


/* ── Sprungziel ──────────────────────────────────────────────────────────── */

.ftl-route {
    width: 100%;
    height: auto;
    display: block;
    background: #000510;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}
.ftl-stars circle { fill: var(--text-primary); }
.ftl-route-track { fill: none; stroke: var(--border-color); stroke-width: 2; }
.ftl-route-line { fill: none; stroke: var(--accent-cyan); stroke-width: 1.5; stroke-dasharray: 4 5; opacity: 0.9; }
.ftl-node { fill: none; stroke-width: 1.5; }
.ftl-node--here { stroke: var(--accent-green); }
.ftl-node-dot.ftl-node--here { fill: var(--accent-green); stroke: none; }
.ftl-node--target { stroke: var(--accent-cyan); }
.ftl-node-dot.ftl-node--target { fill: var(--accent-cyan); stroke: none; }
.ftl-node-pulse { fill: none; stroke: var(--accent-cyan); stroke-width: 1; opacity: 0; }
.ftl-ship path { fill: var(--text-primary); }
.ftl-route-name { fill: var(--text-primary); font-family: var(--font-mono); font-size: 11px; }
.ftl-route-sub { fill: var(--text-muted); font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; }
.ftl-route-dist { fill: var(--accent-cyan); font-family: var(--font-mono); font-size: 11px; }

.ftl-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ftl-tile {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    min-width: 0;
}
.ftl-tile strong { font-size: var(--text-lg); font-weight: 700; overflow-wrap: anywhere; }
.ftl-tiles--plain .ftl-tile { padding: 0; background: none; }
.ftl-tiles--plain .ftl-tile strong { font-size: var(--text-md); }


/* ── Ladekurve ───────────────────────────────────────────────────────────── */

.ftl-chart { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px; }
.ftl-chart-y {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2px 0;
    font-size: 10px;
    color: var(--text-muted);
    text-align: right;
}
.ftl-chart-svg,
.ftl-wave-svg {
    width: 100%;
    display: block;
    background: #000510;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}
.ftl-chart-svg { height: 160px; }
.ftl-wave-svg { height: 110px; }
.ftl-chart-x {
    display: flex;
    justify-content: space-between;
    padding-left: 28px;
    font-size: 10px;
    color: var(--text-muted);
}
.ftl-grid-line { stroke: var(--border-color); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ftl-threshold { stroke: var(--accent-red); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0.8; vector-effect: non-scaling-stroke; }
.ftl-charge-area { fill: var(--accent-yellow); opacity: 0.14; }
.ftl-reactor-line { fill: none; stroke: var(--accent-cyan); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.ftl-charge-line { fill: none; stroke: var(--accent-yellow); stroke-width: 2; vector-effect: non-scaling-stroke; }

.ftl-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
}
.ftl-legend > span { display: flex; align-items: center; gap: 6px; }
.ftl-swatch { display: inline-block; width: 14px; height: 2px; }
.ftl-swatch--charge { background: var(--accent-yellow); }
.ftl-swatch--reactor { background: var(--accent-cyan); }
.ftl-swatch--threshold { height: 0; border-top: 1px dashed var(--accent-red); }


/* ── Feldharmonik ────────────────────────────────────────────────────────── */

.ftl-wave { fill: none; vector-effect: non-scaling-stroke; }
.ftl-wave--echo { stroke: var(--accent-violet); stroke-width: 1; opacity: 0.35; }
.ftl-wave--glow { stroke: var(--ftl-col); stroke-width: 3; opacity: 0.25; }
.ftl-wave--main { stroke: var(--ftl-col); stroke-width: 1.5; }
.ftl-field-state { color: var(--ftl-col); }
.ftl-state-idle .ftl-field-state { color: var(--text-muted); }
[data-ftl="drift"].is-high { color: var(--accent-yellow); }
[data-ftl="drift"].is-low { color: var(--accent-green); }


/* ── Verlauf ─────────────────────────────────────────────────────────────── */

.ftl-log {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 220px;
    overflow-y: auto;
}
.ftl-log li {
    display: flex;
    gap: 10px;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    border-left: 2px solid var(--accent-blue);
    background: var(--bg-secondary);
    font-size: var(--text-xs);
}
.ftl-log .ftl-log--success { border-left-color: var(--accent-green); }
.ftl-log .ftl-log--danger  { border-left-color: var(--accent-red); }
.ftl-log .ftl-log--arrival { border-left-color: var(--accent-cyan); }
.ftl-log .ftl-log-empty { border-left-color: var(--border-color); color: var(--text-muted); }
.ftl-log-time { color: var(--text-muted); white-space: nowrap; }


/* ── Schmal ──────────────────────────────────────────────────────────────── */

/* ── Breit (ab 1600 px, Full HD, 4K skaliert) ─────────────────────────────
   Sprungkette und Systemwarp nebeneinander; darunter drei Spalten: Warpfeld-Kern |
   Kondensatorbank + Sprungziel | Reaktorprüfung bis Verlauf — statt Kern, Bank und Ziel
   untereinander. Die Seite darf breiter werden als die übliche Stationsbreite (1400 px), wie
   die Reaktorkontrolle, und füllt die Bildschirmhöhe: Das letzte Panel jeder Spalte reicht bis
   an den unteren Rand (Abstand dort = Innenabstand von .station-main). Ist der Inhalt höher
   als der Bildschirm, wächst die Seite wie bisher. */
@media (min-width: 1600px) {
    .station-main:has(.ftl-page) { max-width: min(2800px, 100%); display: flex; flex-direction: column; }
    .ftl-page {
        flex: 1 0 auto;
        max-width: none;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        align-items: stretch;
    }
    .ftl-page > .ftl-grid { grid-column: 1 / -1; }
    /* Systemwarp steht neben der Sprungkette, nicht darunter: kein Abstand nach oben. */
    .ftl-page > .warp-panel { margin-top: 0; }
    /* Rechte Spalte (Reaktorprüfung bis Verlauf) ist die höchste — Kurve und Welle etwas flacher. */
    .ftl-chart-svg { height: 130px; }
    .ftl-wave-svg { height: 90px; }
    .ftl-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: stretch; }
    /* Linke Spalte des Fragments: Kern links über die ganze Höhe, Bank und Ziel rechts daneben. */
    .ftl-grid > .ftl-col:first-child {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: auto 1fr;
    }
    .ftl-grid > .ftl-col:first-child > :first-child { grid-row: 1 / span 2; }
    .ftl-grid > .ftl-col > :last-child { flex: 1 0 auto; }
    .ftl-grid .sos-panel > .sos-panel__body { flex: 1 0 auto; }
    .ftl-grid .ftl-core-well { flex: 1 0 auto; align-items: center; }
}

@media (max-width: 600px) {
    .ftl-caps { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .ftl-tile strong { font-size: var(--text-md); }
    .ftl-corner strong { font-size: var(--text-sm); }
}