/*
 * Station s3_relais — Der Relais-Schaltraum · Die Standleitung nach Frankfurt.
 *
 * Präfix dieser Datei: `.wr-relais__`. Er ist hier EINMAL vergeben und kommt
 * in keiner anderen Datei des Hauses vor. Nicht `.wr-schuetz__` und nicht
 * `.wr-pegel__`: Ein Präfix, das nach einem einzelnen Bauteil heißt, ist beim
 * nächsten Umbau der erste Kandidat für eine Kollision — die Hürde heißt
 * s3_relais, und so heißt ihr Namensraum.
 *
 * Was hier NICHT steht, weil es der Station gehört und schon in `game.css`
 * liegt: `.bank`, `.bank__marke`, `.nonius*`, `.tafel*`, `.blatt*`,
 * `.vermerkbogen__zeile`, `.leuchtkasten__*` — dazu `.terminal*` und
 * `.zaehlwerk` aus `terminal.css` und `.btn`/`.stamp` aus `comic.css`.
 *
 * DAS PEGELBAND IST DER EINE GEMEINSAME ANKER DIESES FALLS und steht deshalb
 * auf allen vier Schirmen gleich — dieselbe Fläche, dieselbe Schrift, derselbe
 * Balken. Es nimmt ausdrücklich NICHT die Farben der Station an: Die
 * Standleitung ist in allen vier Räumen dasselbe Blech, und ausgerechnet der
 * Anker soll auf Ansgars Papier nicht anders aussehen als an Ruths Wand.
 * Alles darunter ist bei jeder Rolle ein anderes Gerät.
 */

/* ================================================== DAS PEGELBAND (ANKER) == */

.wr-relais__pegel {
    display: grid;
    gap: var(--wr-gap-2);
    margin-bottom: var(--wr-gap-4);
    padding: var(--wr-gap-3);
    color: var(--wr-paper);
    background: var(--wr-ink);
    border: var(--wr-border-fat) solid var(--wr-ink-3);
    box-shadow: var(--wr-shadow-sm);
}

.wr-relais__pegel-zeile {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wr-gap-1) var(--wr-gap-3);
    align-items: baseline;
    justify-content: space-between;
    margin: 0;
}

.wr-relais__marke {
    font-family: var(--wr-font-amt);
    font-size: 0.72rem;
    letter-spacing: var(--wr-tracking-amt);
    text-transform: uppercase;
    color: var(--wr-paper-dim);
    overflow-wrap: anywhere;
}

/*
 * Die Zahl, die über den Tisch gerufen wird — tabellarisch und ohne
 * Trennstrich. Ein Bindestrich in einer angesagten Zahl ist eine Falle.
 */
.wr-relais__pegel-wert {
    font-family: var(--wr-font-mono);
    font-size: 2.1rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--wr-tracking-mono);
    hyphens: none;
    color: var(--wr-bernstein);
}

/*
 * Der Balken eines VU-Meters, und er ist der einzige Ort dieses Hauses, an dem
 * Bernstein als Fläche steht — genau dafür ist der Ton da (tokens.css:
 * „VU-Meter, Warnband, Bandlaufwerk").
 *
 * KEINE `transition`. Was hier fällt, fällt mit einem Schütz, und ein Zeiger,
 * der dem Schalter hinterherläuft, ist ein Zeiger, der lügt. Denselben Grund
 * hat der Balken des Wechselbands (CLAUDE.md, Abschnitt 3).
 *
 * Die Zahl steht daneben und das Zählwort darunter: Keine Farbe und keine
 * Länge ist in diesem Haus der einzige Informationsträger.
 */
.wr-relais__balken {
    height: 1.4rem;
    background: var(--wr-ink-2);
    border: 2px solid var(--wr-ink-3);
}

.wr-relais__balken-fuellung {
    display: block;
    width: var(--anteil, 0%);
    height: 100%;
    background: var(--wr-bernstein);
}

/* ================================================== RUTH: DIE SCHÜTZWAND === */

/* Jedes Gerät liegt in seinem eigenen Kasten — sonst stünden vier Dinge ohne
   Grenze nebeneinander, und auf welches ein Knopf gehört, stünde nirgends. */
.wr-relais__messer,
.wr-relais__wand {
    padding: var(--wr-gap-2);
    background: var(--wr-blech);
    border: var(--wr-border) solid var(--wr-ink-3);
}

.wr-relais__messer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wr-gap-2);
    align-items: center;
}

.wr-relais__messer .bank__marke,
.wr-relais__wand .bank__marke {
    flex-basis: 100%;
    grid-column: 1 / -1;
}

/*
 * Vier Messerschalter nebeneinander, solange der Platz reicht, sonst zwei und
 * zwei. Das Rastermaß ist die Tippfläche: 4.4rem sind siebzig Pixel, und
 * gemessen wird in BEIDE Richtungen (dev/dev.ps1 breiten, 375 px).
 */
.wr-relais__wand {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(4.4rem, 1fr));
    gap: var(--wr-gap-2);
    align-items: start;
}

.wr-relais__schuetz {
    display: flex;
    flex-direction: column;
    gap: var(--wr-gap-1);
    align-items: center;
    min-width: 4.4rem;
    min-height: 4.4rem;
    padding: 0.5rem 0.3rem;
    color: var(--wr-paper-dim);
    background: var(--wr-ink-2);
    border: var(--wr-border) solid var(--wr-ink-3);
    border-radius: 0;
    cursor: pointer;
    transition: transform var(--wr-schnell);
}

/* Gefallen: das Messer liegt in der Backe, und der Schalter sitzt tiefer. Die
   Stellung steht als Zeichnung da, die Farbe kommt nur dazu. */
.wr-relais__schuetz[data-gelegt='1'] {
    color: var(--wr-ink);
    background: var(--role-licht);
    border-color: var(--wr-ink);
    transform: translateY(3px);
}

.wr-relais__schuetz svg {
    display: block;
    width: 2.1rem;
    height: 2.1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: square;
    stroke-linejoin: miter;
}

/* Die Nummer im Guss: erhaben geschlagen, deshalb ein harter Versatz und kein
   weicher Schatten. */
.wr-relais__guss {
    font-family: var(--wr-font-display);
    font-size: 1.25rem;
    line-height: 1;
    letter-spacing: var(--wr-tracking-display);
    hyphens: none;
}

.wr-relais__schuetz[data-gelegt='1'] .wr-relais__guss {
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.4);
}

/* ================================================== SELMA: DIE QUARZWAND === */

/*
 * Zwölf Fächer ohne Nummern. Es gibt keine Reihe zum Durchprobieren — das
 * Schloss nimmt drei Ziffern, und die hat allein der Pegelschreiber. Welches
 * Fach aufgeht, ist Zeichnung und trägt keinen Wert: Die Prägung liegt
 * darunter im Streiflicht.
 */
.wr-relais__fachreihe {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wr-gap-2);
    padding: var(--wr-gap-2);
    background: var(--wr-blech);
    border: var(--wr-border) solid var(--wr-ink-3);
}

.wr-relais__fachreihe .bank__marke {
    flex-basis: 100%;
}

.wr-relais__fach {
    flex: 1 1 3rem;
    height: 2.2rem;
    background: var(--wr-ink-2);
    border: 2px solid var(--wr-ink-3);
    /* Der Griff: ein Strich Blech, keine Fläche. */
    border-bottom-width: 6px;
}

/* Gibt die Wand auf, steht die ganze Reihe unter Spannung — welches Fach es
   ist, sieht man erst am aufgeschlossenen Halter darunter. */
.wr-relais__fachreihe[data-frei='1'] .wr-relais__fach {
    border-bottom-color: var(--wr-bernstein);
}

.wr-relais__schloss {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--wr-gap-1) var(--wr-gap-2);
    align-items: end;
    margin-top: var(--wr-gap-3);
    padding: var(--wr-gap-3);
    background: var(--schirm-feld);
    border: var(--wr-border) solid var(--schirm-kante);
}

.wr-relais__schloss label {
    grid-column: 1 / -1;
    margin-bottom: 0;
    color: var(--schirm-still);
}

.wr-relais__schloss input {
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--wr-tracking-mono);
    hyphens: none;
}

/*
 * DER GRUND STEHT ALS SATZ, NIE IM `title`. Kein Telefon zeigt einen Tooltip,
 * und auf einem stumpfen Knopf zeigt ihn auch am Schreibtisch keiner.
 */
.wr-relais__grund {
    grid-column: 1 / -1;
    font-family: var(--wr-font-amt);
    font-size: 0.78rem;
    letter-spacing: var(--wr-tracking-amt);
    color: var(--schirm-still);
    overflow-wrap: anywhere;
}

/* --- Der Streiflichttisch -------------------------------------------------- */

.wr-relais__halter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wr-gap-1) var(--wr-gap-3);
    align-items: baseline;
    margin-top: var(--wr-gap-3);
    padding: var(--wr-gap-3);
    color: var(--wr-stahl);
    background: var(--wr-ink);
    border: var(--wr-border) solid var(--wr-ink-3);
}

/*
 * Liegt ein Halter darauf, streift das Licht über Bakelit statt über Blech.
 * Die Prägung ist blind geschlagen — erhaben, ohne Farbe — und steht deshalb
 * als harter Versatz da und nicht als weicher Schatten.
 */
.wr-relais__halter[data-offen='1'] {
    color: var(--wr-ink);
    background: var(--wr-paper-aged);
    border-color: var(--wr-paper);
}

.wr-relais__halter .bank__marke {
    flex-basis: 100%;
}

.wr-relais__halter[data-offen='1'] .bank__marke {
    color: var(--wr-signal-deep);
}

.wr-relais__praegung {
    font-family: var(--wr-font-display);
    font-size: 2.4rem;
    line-height: 1;
    letter-spacing: var(--wr-tracking-display);
    /* Ein Trennstrich in einem Wort, das buchstabiert wird, ist eine Falle. */
    hyphens: none;
    overflow-wrap: anywhere;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.55);
}

.wr-relais__leer {
    font-family: var(--wr-font-amt);
    font-size: 0.9rem;
    letter-spacing: var(--wr-tracking-amt);
    text-transform: uppercase;
}

.wr-relais__glas {
    margin-top: var(--wr-gap-3);
}

/* ================================================== ANSGAR: DER HEFTBOGEN == */

.wr-relais__heftbogen {
    margin-top: var(--wr-gap-3);
    padding: var(--wr-gap-3);
    background: var(--schirm-feld);
    border: var(--wr-border) solid var(--schirm-kante);
}

/* Er liegt auf Papier und braucht deshalb kein eigenes Raster: Die Zeile
   bringt `.vermerkbogen__zeile` aus game.css mit. */
.wr-relais__heftbogen .wr-relais__grund {
    display: block;
}

/*
 * KEINE BREITENREGEL FÜR DAS PEGELBAND, und das ist eine Entscheidung.
 *
 * Seine drei Zeilen stehen auf 375 px wie auf 2560 px untereinander: Marke und
 * Wert teilen sich ihre Zeile schon über `flex`, der Balken nimmt ohnehin die
 * volle Breite, und zwei Spalten ließen auf dem Schreibtisch eine davon leer.
 * Ein Umbruch, der nichts umbricht, ist eine Regel, die beim nächsten Umbau
 * jemand erklären muss.
 */