/*
  StarshipOS — Reaktorkontrolle (Neugestaltung)

  Seite: templates/engineering/reactor.html, Fragmente fragments/reactor-gauge.html (Kern,
  Energiekette, Kühlkreislauf, Temperaturverlauf), reactor-start.html (Brennstabkammern),
  reactor-maintenance.html :: reactor-maintenance-summary (Wartung) und reactor-integrity.html.
  Panels, Badges und Knöpfe kommen aus sos-components.css; hier stehen nur die seiteneigenen Teile.

  Farbe des Kerns: --rx-col hängt an [data-tone] (nominal · warning · danger · off) und färbt
  Skala, Wabenkern, Heißleitung und Verlaufskurve.
*/

.rx-page {
    --rx-well: #000510;
    --rx-dim: #374151;
    --rx-hair: #1f2d3d;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    min-width: 0;
}

.rx-page .sos-panel__title { margin: 0; }
.rx-panel { min-width: 0; }

[data-tone="nominal"] { --rx-col: var(--accent-blue); }
[data-tone="warning"] { --rx-col: var(--accent-yellow); }
[data-tone="danger"]  { --rx-col: var(--accent-red); }
[data-tone="off"]     { --rx-col: var(--text-muted); }

/* ── Raster ── */
.rx-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}
.rx-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}
@media (min-width: 720px) {
    .rx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rx-col--fuel,
    .rx-col--integrity { grid-column: 1 / -1; }
}
@media (min-width: 1200px) {
    .rx-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); }
    .rx-col--fuel { grid-column: auto; }
}
/* Breit: Wartung und Bauteil-Integrität als vierte Spalte neben den Brennstabkammern. */
@media (min-width: 1600px) {
    .rx-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr); }
    .rx-col--integrity { grid-column: auto; }
}
/* Sehr breit (Full HD, 4K skaliert): Spalte 4 bekommt so viel Breite, dass die Bauteilgruppen
   nebeneinander stehen (Container-Abfragen unten) — sonst ist sie die lange Liste, die die Seite
   über die Bildschirmhöhe treibt. */
@media (min-width: 1800px) {
    .rx-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.7fr); }
}
/* Vier Spalten: Das Raster füllt die Bildschirmhöhe, das letzte Panel jeder Spalte reicht bis
   an den unteren Rand (Abstand dort = Innenabstand von .station-main, wie über der Energiekette).
   Ist der Inhalt höher als der Bildschirm, wächst die Seite wie bisher. */
@media (min-width: 1600px) {
    .station-main:has(.rx-page) { display: flex; flex-direction: column; }
    .rx-page { flex: 1 0 auto; }
    .rx-grid { flex: 1 0 auto; align-items: stretch; }
    .rx-col > :last-child { flex: 1 0 auto; }
}
/* Die Seite darf breiter werden als die übliche Stationsbreite (1400 px), wie Taktik und CIC —
   auf großen Bildschirmen bis an den Rand statt in einer Mittelspalte. */
.station-main:has(.rx-page) { max-width: min(2800px, 100%); }

/* ── Gemeinsame Bausteine ── */
.rx-label {
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
}
.rx-note {
    font-size: var(--text-sm);
    color: var(--text-muted);
    text-wrap: pretty;
    margin: 0;
}
.rx-error { margin: 0; color: var(--accent-red); font-size: var(--text-sm); }
.rx-stack { display: flex; flex-direction: column; gap: 12px; }
.rx-stack--tight { gap: 6px; }
.rx-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.rx-row > .rx-note { flex: 1 1 200px; }
.rx-row--split { justify-content: space-between; }
.rx-well {
    position: relative;
    background: var(--rx-well);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.rx-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.rx-icon circle:first-child[r="3"] { fill: currentColor; }

.rx-hint {
    margin: 0;
    min-height: 1.2em;
    font-size: var(--text-sm);
    color: var(--text-muted);
    text-wrap: pretty;
}
.rx-hint[data-tone="success"] { color: var(--accent-green); }
.rx-hint[data-tone="info"]    { color: var(--text-primary); }
.rx-hint[data-tone="accent"]  { color: var(--accent-cyan); }
.rx-hint[data-tone="warning"] { color: var(--accent-yellow); }
.rx-hint[data-tone="danger"]  { color: var(--accent-red); font-weight: 700; }

/* ── Energiekette ── */
.rx-chain {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
@media (min-width: 720px) { .rx-chain { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .rx-chain { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; } }

.rx-chain-node {
    --rx-node: var(--text-muted);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-top: 2px solid var(--rx-node);
    border-radius: var(--radius-md);
    min-width: 0;
}
.rx-chain-node[data-tone="success"] { --rx-node: var(--accent-green); }
.rx-chain-node[data-tone="warning"] { --rx-node: var(--accent-yellow); }
.rx-chain-node[data-tone="danger"]  { --rx-node: var(--accent-red); }
.rx-chain-node[data-tone="info"]    { --rx-node: var(--accent-blue); }
.rx-chain-node .rx-label { white-space: nowrap; }
.rx-chain-value {
    font-size: var(--text-lg);
    font-weight: 700;
    white-space: nowrap;
    color: var(--rx-node);
}
.rx-chain-node[data-tone="success"] .rx-chain-value { color: var(--text-primary); }
.rx-chain-sub {
    font-size: var(--text-xs);
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Verbindungspfeile nur auf dem Desktop, in der Farbe des vorigen Glieds */
@media (min-width: 1200px) {
    .rx-chain-node[data-prev-tone]:not([data-prev-tone=""])::before,
    .rx-chain-node[data-prev-tone]:not([data-prev-tone=""])::after {
        content: "";
        position: absolute;
        top: 50%;
        pointer-events: none;
    }
    .rx-chain-node::before {
        left: -19px;
        width: 13px;
        border-top: 1px dashed var(--rx-link, var(--rx-hair));
    }
    .rx-chain-node::after {
        left: -6px;
        margin-top: -4px;
        border-top: 4px solid transparent;
        border-bottom: 4px solid transparent;
        border-left: 5px solid var(--rx-link, var(--rx-hair));
    }
    .rx-chain-node[data-prev-tone="success"] { --rx-link: var(--accent-green); }
    .rx-chain-node[data-prev-tone="warning"] { --rx-link: var(--accent-yellow); }
    .rx-chain-node[data-prev-tone="danger"]  { --rx-link: var(--accent-red); }
    .rx-chain-node[data-prev-tone="info"]    { --rx-link: var(--accent-blue); }
    .rx-chain-node[data-prev-tone="muted"]   { --rx-link: var(--text-muted); }
}

/* ── Reaktorkern ── */
.rx-core-body { display: flex; flex-direction: column; gap: 14px; }
.rx-core-well {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 0 4px;
}
.rx-core-svg {
    display: block;
    width: 100%;
    max-width: 440px;
    aspect-ratio: 1 / 1;
    height: auto;
    overflow: visible;
    font-family: var(--font-mono);
}
.rx-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;
}
.rx-corner strong { color: var(--text-primary); font-size: var(--text-md); font-weight: 400; letter-spacing: 0.02em; }
.rx-corner--tl { top: 10px; left: 12px; }
.rx-corner--tr { top: 10px; right: 12px; align-items: flex-end; }
.rx-corner--bl { bottom: 10px; left: 12px; }
.rx-corner--br { bottom: 10px; right: 12px; align-items: flex-end; }
/* Schmal: die unteren Eckwerte unter die Skala schieben, statt die Kerntemperatur zu überdecken */
@media (max-width: 560px) {
    .rx-core-well { padding-bottom: 52px; }
    .rx-corner { font-size: 10px; }
    .rx-corner strong { font-size: var(--text-sm); }
}

.rx-arc-track  { fill: none; stroke: var(--rx-hair); stroke-width: 4; }
.rx-arc-warn   { fill: none; stroke: var(--accent-yellow); stroke-width: 3; opacity: 0.75; }
.rx-arc-danger { fill: none; stroke: var(--accent-red); stroke-width: 3; opacity: 0.75; }
.rx-arc-glow   { fill: none; stroke: var(--rx-col); stroke-width: 5; opacity: 0.7; }
.rx-arc-value  { fill: none; stroke: var(--rx-col); stroke-width: 2; stroke-linecap: round; }
.rx-arc-marker { fill: var(--rx-col); stroke: var(--rx-well); stroke-width: 2; }
.rx-tick { stroke: var(--rx-hair); stroke-width: 1; stroke-linecap: round; }
.rx-tick.is-major { stroke-width: 2; }
.rx-tick.is-lit { stroke: var(--rx-col); }
.rx-scale-label { fill: var(--text-muted); font-size: 9px; }
.rx-ring {
    fill: none;
    stroke: var(--rx-col);
    stroke-width: 1.5;
    stroke-dasharray: 3 9;
    opacity: 0.45;
    transform-origin: 200px 200px;
    animation: rx-spin 36s linear infinite;
}
.rx-containment { fill: var(--rx-well); stroke: var(--rx-hair); stroke-width: 1; }
.rx-hex--fuel {
    fill: var(--rx-col);
    stroke: var(--rx-col);
    stroke-width: 0.75;
    animation: rx-flicker 2.4s ease-in-out infinite;
}
.rx-hex--rod { fill: #0d1520; stroke: var(--text-muted); stroke-width: 1; }
.rx-rod { fill: var(--text-muted); transition: r 400ms ease; }
.rx-rod.is-in { fill: var(--text-primary); }
.rx-core-cap   { fill: var(--text-muted); font-size: 9px; letter-spacing: 0.2em; }
.rx-core-temp  { fill: var(--text-primary); font-size: 24px; font-weight: 700; letter-spacing: 0.04em; }
.rx-core-state { fill: var(--rx-col); font-size: 10px; letter-spacing: 0.2em; }
[data-tone="off"] .rx-hex--fuel,
[data-tone="off"] .rx-ring { animation: none; }

@keyframes rx-spin { to { transform: rotate(360deg); } }
@keyframes rx-flicker { 0%, 100% { opacity: 1; } 50% { opacity: 0.78; } }

/* Drossel */
.rx-throttle { display: flex; flex-direction: column; gap: 8px; }
.rx-throttle-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.rx-throttle-values { font-size: var(--text-sm); color: var(--text-muted); }
.rx-throttle-values strong { color: var(--text-primary); }
.rx-throttle-values .rx-throttle-target { color: var(--accent-yellow); }
.rx-detents-wrap { position: relative; }
.rx-detents {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr));
    gap: 4px;
}
.rx-detent {
    height: 44px;
    min-width: 0;
    padding: 0 0 4px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    border: 1px solid var(--rx-hair);
    border-radius: var(--radius-xs);
    background: #0d1520;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--transition-fast, 150ms), border-color var(--transition-fast, 150ms);
}
.rx-detent:hover:not(:disabled) { border-color: var(--accent-yellow); color: var(--text-primary); }
.rx-detent:focus-visible { outline: 2px solid var(--accent-yellow); outline-offset: 2px; }
.rx-detent:disabled { cursor: not-allowed; opacity: 0.55; }
.rx-detent.is-filled { background: rgba(245, 158, 11, 0.5); border-color: var(--accent-yellow); color: var(--text-primary); }
.rx-detent.is-filled.is-overdrive { background: rgba(239, 68, 68, 0.5); border-color: var(--accent-red); }
.rx-detent.is-locked { background: repeating-linear-gradient(45deg, #111827 0 3px, #0d1520 3px 6px); }
.rx-detent.is-locked.is-filled { background: rgba(245, 158, 11, 0.18); }
.rx-output-marker {
    position: absolute;
    top: -5px;
    bottom: -5px;
    width: 2px;
    background: var(--text-primary);
    box-shadow: 0 0 4px var(--text-primary);
    transform: translateX(-50%);
    pointer-events: none;
    transition: left 400ms ease;
}
.rx-throttle-scale {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.rx-throttle-scale .rx-od { color: var(--accent-red); }

.rx-commands { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.rx-commands a.sos-btn { text-decoration: none; }

/* ── Kühlkreislauf ── */
.rx-loop-svg { display: block; width: 100%; height: auto; font-family: var(--font-mono); }
.rx-flow {
    fill: none;
    stroke-width: 2;
    stroke-dasharray: 6 6;
    animation: rx-flow 1.2s linear infinite;
}
.rx-flow--hot  { stroke: var(--rx-col); }
.rx-flow--cold { stroke: var(--accent-cyan); }
[data-tone="off"] .rx-flow { animation-duration: 4s; }
.rx-loop-core { fill: var(--rx-well); stroke: var(--rx-col); stroke-width: 1.5; }
.rx-loop-core-temp { fill: var(--rx-col); font-size: 11px; font-weight: 700; }
.rx-svg-cap { fill: var(--text-muted); font-size: 9px; letter-spacing: 0.15em; }
.rx-svg-val { fill: var(--text-primary); font-size: 9px; }
.rx-loop-hx { fill: var(--rx-well); stroke-width: 1; stroke: var(--accent-green); }
.rx-loop-hx[data-tone="warning"] { stroke: var(--accent-yellow); }
.rx-loop-hx[data-tone="danger"]  { stroke: var(--accent-red); }
.rx-loop-hx-coil { fill: none; stroke: var(--accent-cyan); stroke-width: 1; opacity: 0.8; }

.rx-pump { --rx-pump: var(--accent-cyan); }
.rx-pump[data-tone="warning"] { --rx-pump: var(--accent-yellow); }
.rx-pump[data-tone="danger"]  { --rx-pump: var(--accent-red); }
.rx-pump[data-tone="info"]    { --rx-pump: var(--accent-blue); }
.rx-pump[data-tone="muted"]   { --rx-pump: var(--rx-dim); }
.rx-pump-line {
    fill: none;
    stroke: var(--rx-pump);
    stroke-width: 1.5;
    stroke-dasharray: 2 5;
    opacity: 0.7;
}
.rx-pump[data-state="active"] .rx-pump-line {
    stroke-dasharray: 6 6;
    opacity: 1;
    animation: rx-flow 1.2s linear infinite;
}
.rx-pump-body { fill: var(--rx-well); stroke: var(--rx-pump); stroke-width: 1.5; }
.rx-pump-rotor line { stroke: var(--rx-pump); stroke-width: 1.5; stroke-linecap: round; }
.rx-pump[data-state="active"] .rx-pump-rotor { animation: rx-spin 1s linear infinite; }
.rx-pump-label { fill: var(--text-primary); font-size: 10px; font-weight: 700; }
.rx-pump-text { fill: var(--text-muted); font-size: 9px; }
.rx-pump[data-state="active"] .rx-pump-text,
.rx-pump[data-state="bridged"] .rx-pump-text { fill: var(--rx-pump); }

@keyframes rx-flow { to { stroke-dashoffset: -12; } }

.rx-balance { display: flex; flex-direction: column; gap: 6px; }
.rx-balance-scale {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
}
.rx-balance-track {
    position: relative;
    height: 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.rx-balance-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    opacity: 0.85;
    background: var(--accent-green);
    transition: left 400ms ease, width 400ms ease;
}
.rx-balance-fill[data-tone="danger"] { background: var(--accent-red); }
.rx-balance-mid {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: var(--text-primary);
    opacity: 0.6;
}
.rx-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rx-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    min-width: 0;
}
.rx-stat strong { font-size: var(--text-lg); }
.rx-stat strong[data-tone="success"] { color: var(--accent-green); }
.rx-stat strong[data-tone="danger"]  { color: var(--accent-red); }

/* ── Temperaturverlauf ── */
.rx-chart {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px;
    height: 160px;
}
.rx-chart-axis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2px 0;
    font-size: 10px;
    color: var(--text-muted);
    text-align: right;
}
.rx-chart-well svg { display: block; width: 100%; height: 100%; }
.rx-zone-danger { fill: var(--accent-red); opacity: 0.09; }
.rx-zone-warn   { fill: var(--accent-yellow); opacity: 0.08; }
.rx-grid-line   { stroke: var(--rx-hair); vector-effect: non-scaling-stroke; }
.rx-threshold   { stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; opacity: 0.8; }
.rx-threshold--danger { stroke: var(--accent-red); }
.rx-threshold--warn   { stroke: var(--accent-yellow); }
.rx-chart-area { fill: var(--rx-col); opacity: 0.14; }
.rx-chart-line { fill: none; stroke: var(--rx-col); stroke-width: 2; vector-effect: non-scaling-stroke; }
.rx-chart-time {
    display: flex;
    justify-content: space-between;
    padding-left: 34px;
    font-size: 10px;
    color: var(--text-muted);
}
.rx-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);
}
.rx-legend > span { display: flex; align-items: center; gap: 6px; }
.rx-legend i { display: inline-block; width: 14px; }
.rx-legend-line   { height: 2px; background: var(--rx-col); }
.rx-legend-warn   { height: 8px; background: rgba(245, 158, 11, 0.3); }
.rx-legend-danger { height: 8px; background: rgba(239, 68, 68, 0.3); }

/* ── Wartung ── */
.rx-phases {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}
.rx-phases::before {
    content: "";
    position: absolute;
    left: 8.33%;
    right: 8.33%;
    top: 7px;
    height: 1px;
    background: var(--border-color);
}
.rx-phases li {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    text-align: center;
    overflow-wrap: break-word;
    hyphens: auto;
}
.rx-phases i {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid var(--rx-hair);
    background: #0d1520;
    box-sizing: border-box;
}
.rx-phases li[data-state="done"] { color: var(--accent-green); }
.rx-phases li[data-state="done"] i { border-color: var(--accent-green); background: rgba(16, 185, 129, 0.5); }
.rx-phases li[data-state="now"] { color: var(--text-primary); }
.rx-phases li[data-state="now"] i { border-color: var(--accent-yellow); background: var(--accent-yellow); box-shadow: 0 0 6px var(--accent-yellow); }
.rx-row a.sos-btn { text-decoration: none; }
.rx-maint-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    font-size: var(--text-xs);
    color: var(--text-muted);
}
.rx-maint-facts b { color: var(--text-primary); }

/* ── Brennstabkammern ── */
.rx-chamber {
    --rx-chamber: var(--text-muted);
    display: flex;
    gap: 12px;
    padding: 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    min-width: 0;
}
.rx-chamber[data-tone="success"] { --rx-chamber: var(--accent-green); }
.rx-chamber[data-tone="warning"] { --rx-chamber: var(--accent-yellow); }
.rx-chamber[data-tone="danger"]  { --rx-chamber: var(--accent-red); }
.rx-chamber[data-tone="info"]    { --rx-chamber: var(--accent-blue); }
.rx-rod-tube {
    position: relative;
    flex: 0 0 40px;
    height: 112px;
    background: var(--rx-well);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.rx-rod-fill {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--rx-chamber);
    opacity: 0.8;
    box-shadow: 0 0 10px var(--rx-chamber);
    transition: height 400ms ease;
}
.rx-rod-grid {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg, rgba(0, 5, 16, 0.75) 0 1px, transparent 1px 11px);
}
.rx-rod-axis {
    position: absolute;
    left: 50%;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: rgba(224, 231, 255, 0.25);
}
.rx-chamber-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.rx-chamber-info > strong { font-size: var(--text-md); }
.rx-chamber-status {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--rx-chamber);
}
.rx-chamber-rod, .rx-chamber-ramp { font-size: var(--text-xs); color: var(--text-muted); overflow-wrap: anywhere; }
.rx-chamber-values {
    margin-top: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.rx-chamber-values > div { display: flex; flex-direction: column; }
.rx-chamber-values .rx-label { font-size: 10px; }
.rx-chamber-values strong { font-size: var(--text-md); }

.rx-cycle-wrap { display: flex; flex-direction: column; gap: 6px; }
.rx-cycle {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 4px;
}
.rx-cycle li {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 5px 6px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(224, 231, 255, 0.5);
    font-size: 10px;
    min-width: 0;
}
.rx-cycle li strong { font-size: var(--text-xs); }
.rx-cycle li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rx-cycle li[data-state="done"] { border-color: rgba(16, 185, 129, 0.5); color: var(--accent-green); }
.rx-cycle li[data-state="next"] { border-color: var(--accent-cyan); background: rgba(6, 182, 212, 0.12); color: var(--text-primary); }
@media (max-width: 480px) {
    .rx-cycle { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Tabs Kammern / Lager */
.rx-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border-color);
}
.rx-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    margin-bottom: -1px;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid transparent;
    border-bottom-color: var(--border-color);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    cursor: pointer;
}
.rx-tab:hover { color: var(--text-primary); }
.rx-tab:focus-visible { outline: 2px solid var(--accent-yellow); outline-offset: 1px; }
.rx-tab.is-active {
    color: var(--text-primary);
    background: var(--bg-secondary);
    border-color: var(--border-color);
    border-bottom-color: var(--bg-secondary);
    box-shadow: inset 0 2px 0 var(--accent-yellow);
}
.rx-tab-count {
    font-weight: 400;
    color: var(--text-muted);
    padding: 0 5px;
    border: 1px solid var(--rx-hair);
    border-radius: var(--radius-xs);
}

/* Kammerliste: Kacheln, scrollt ab drei Reihen — 2 oder 20 Kammern, gleiche Höhe */
.rx-chamber-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 6px;
    max-height: 212px;
    overflow-y: auto;
    padding: 2px;
    scrollbar-width: thin;
}
.rx-chamber-tile {
    --rx-chamber: var(--text-muted);
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 7px 9px;
    min-width: 0;
    text-align: left;
    cursor: pointer;
    font-family: var(--font-mono);
    color: var(--text-primary);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--rx-chamber);
    border-radius: var(--radius-sm);
}
.rx-chamber-tile:hover { border-color: var(--text-muted); border-left-color: var(--rx-chamber); }
.rx-chamber-tile:focus-visible { outline: 2px solid var(--accent-yellow); outline-offset: 1px; }
.rx-chamber-tile.is-selected { background: rgba(245, 158, 11, 0.10); border-color: var(--accent-yellow); border-left-color: var(--rx-chamber); }
.rx-chamber-tile[data-tone="success"] { --rx-chamber: var(--accent-green); }
.rx-chamber-tile[data-tone="warning"] { --rx-chamber: var(--accent-yellow); }
.rx-chamber-tile[data-tone="danger"]  { --rx-chamber: var(--accent-red); }
.rx-chamber-tile[data-tone="info"]    { --rx-chamber: var(--accent-blue); }
.rx-chamber-tile-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.rx-chamber-tile-head strong { font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rx-chamber-tile-fill { font-size: var(--text-xs); color: var(--rx-chamber); font-weight: 700; }
.rx-chamber-tile-bar {
    display: block;
    height: 5px;
    background: var(--rx-dim);
    border-radius: 1px;
    overflow: hidden;
}
.rx-chamber-tile-bar i { display: block; height: 100%; background: var(--rx-chamber, var(--accent-green)); transition: width 400ms ease; }
.rx-chamber-tile-status, .rx-chamber-tile-burn {
    font-size: 10px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rx-chamber-tile-status { text-transform: uppercase; letter-spacing: 0.05em; color: var(--rx-chamber); }

.rx-chamber-values small { font-size: 10px; color: var(--text-muted); }
.rx-chamber-burn { grid-column: 1 / -1; }

.rx-rod-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.rx-rod-load { display: flex; flex-direction: column; gap: 6px; }
.rx-select {
    flex: 1 1 200px;
    min-width: 0;
    padding: 5px 8px;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-primary);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}
.rx-select:focus-visible { outline: 2px solid var(--accent-yellow); outline-offset: 1px; }

/* Lager: Zeilen, scrollt ab sechs Stäben */
.rx-spare-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 264px;
    overflow-y: auto;
    padding: 2px;
    scrollbar-width: thin;
}
.rx-spare-row {
    --rx-chamber: var(--accent-green);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(50px, 90px) auto;
    grid-template-areas: "id bar fill" "id burn burn";
    align-items: center;
    gap: 2px 10px;
    padding: 6px 9px;
    text-align: left;
    cursor: pointer;
    font-family: var(--font-mono);
    color: var(--text-primary);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}
.rx-spare-row:hover:not(:disabled) { border-color: var(--text-muted); }
.rx-spare-row:focus-visible { outline: 2px solid var(--accent-yellow); outline-offset: 1px; }
.rx-spare-row.is-chosen { background: rgba(245, 158, 11, 0.10); border-color: var(--accent-yellow); }
.rx-spare-row.is-empty { --rx-chamber: var(--text-muted); opacity: 0.55; cursor: not-allowed; }
.rx-spare-id { grid-area: id; display: flex; flex-direction: column; min-width: 0; }
.rx-spare-id strong { font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rx-spare-id small { font-size: 10px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rx-spare-row .rx-chamber-tile-bar { grid-area: bar; }
.rx-spare-fill { grid-area: fill; font-size: var(--text-xs); text-align: right; white-space: nowrap; }
.rx-spare-burn { grid-area: burn; font-size: 10px; color: var(--text-muted); text-align: right; white-space: nowrap; }

/* ── Bauteil-Integrität ── */
.rx-parts { display: flex; flex-direction: column; gap: 10px; }
.rx-part-group { display: flex; flex-direction: column; gap: 2px; }
.rx-part-group-name {
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide, 0.1em);
    padding-bottom: 3px;
    margin-bottom: 2px;
    border-bottom: 1px solid var(--border-color);
}
.rx-part {
    --rx-part: var(--accent-green);
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 5px 8px;
    min-height: 30px;
    text-align: left;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--text-primary);
    background: #111827;
    border: 1px solid var(--rx-hair);
    border-radius: var(--radius-sm);
}
.rx-part:hover { border-color: var(--text-muted); }
.rx-part:focus-visible { outline: 2px solid var(--accent-yellow); outline-offset: 1px; }
.rx-part.is-selected { background: rgba(245, 158, 11, 0.10); border-color: var(--accent-yellow); }
.rx-part[data-tone="warning"] { --rx-part: var(--accent-yellow); }
.rx-part[data-tone="danger"]  { --rx-part: var(--accent-red); }
.rx-part[data-tone="info"]    { --rx-part: var(--accent-blue); }
.rx-part-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rx-part); box-shadow: 0 0 4px var(--rx-part); }
.rx-part-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rx-part-name small { color: var(--text-muted); font-size: var(--text-xs); }
.rx-part[data-tone="info"] .rx-part-name small { color: var(--accent-blue); }
.rx-part-symptom {
    text-align: right;
    white-space: nowrap;
    color: var(--rx-part);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
}
.rx-part[data-tone="success"] .rx-part-symptom { color: var(--text-muted); font-weight: 400; }

.rx-part-detail {
    --rx-part: var(--accent-green);
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--rx-part);
    border-radius: var(--radius-md);
}
.rx-part-detail[data-tone="warning"] { --rx-part: var(--accent-yellow); }
.rx-part-detail[data-tone="danger"]  { --rx-part: var(--accent-red); }
.rx-part-detail[data-tone="info"]    { --rx-part: var(--accent-blue); }
.rx-part-detail-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.rx-part-detail-head strong { font-size: var(--text-md); }
.rx-part-detail-status {
    font-size: var(--text-xs);
    color: var(--rx-part);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
}
.rx-part-desc { font-size: var(--text-sm); color: var(--text-primary); text-wrap: pretty; }
.rx-part-detail .rx-note { font-size: var(--text-xs); }

/* Breit: Gruppen nebeneinander (ab 560 px), gewähltes Bauteil rechts daneben (ab 1100 px)
   statt alles untereinander. */
.rx-col--integrity { container-type: inline-size; }
@container (min-width: 560px) {
    .rx-integrity-panel .rx-parts {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 12px;
        align-items: start;
    }
}
@container (min-width: 1100px) {
    .rx-integrity-panel > .sos-panel__body {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
        align-items: start;
    }
    .rx-integrity-panel > .sos-panel__body > :not(.rx-parts):not(.rx-part-detail) { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
    .rx-ring, .rx-hex--fuel, .rx-flow, .rx-pump-line, .rx-pump-rotor { animation: none !important; }
}