/*
 * Akt 3, Hürde 4: Die Äther-Einspeisung.
 *
 * Nur was DIESE Station braucht. Reglerbank, Freigabewerk, Nachschlagtafel,
 * Vermerkzeile, Blatt und Terminal stehen in `game.css` und `terminal.css` –
 * sie kommen in mehr als einer Hürde vor.
 *
 * Namensraum: `.wr-aether__…`, einmal vergeben und nirgends sonst benutzt.
 * Farben ausschliesslich über `--wr-*`, Kanten hart, keine weichen Schatten.
 */

/* =================================================== DAS SENDEFENSTER ===== */

/*
 * Es steht an Ruths Modulator mit der Restfrist und an Nuris Pult ohne sie.
 * Der Zustand hängt am Attribut, das Wort daneben sagt dasselbe noch einmal:
 * KEINE FARBE ALS EINZIGER TRÄGER.
 */
.wr-aether__fenster,
.wr-aether__stand {
    display: grid;
    gap: var(--wr-gap-1);
    padding: var(--wr-gap-3);
    background: var(--wr-ink);
    border: var(--wr-border) solid var(--wr-ink-3);
    border-left-width: var(--wr-border-fat);
}

.wr-aether__fenster[data-offen='1'],
.wr-aether__stand[data-offen='1'] {
    border-color: var(--wr-phosphor);
    background: var(--wr-phosphor-tief);
}

.wr-aether__wort {
    font-family: var(--wr-font-display);
    font-size: 1.6rem;
    line-height: 1.1;
    letter-spacing: var(--wr-tracking-display);
    color: var(--wr-paper);
    overflow-wrap: anywhere;
}

.wr-aether__fenster[data-offen='1'] .wr-aether__wort,
.wr-aether__stand[data-offen='1'] .wr-aether__wort {
    color: var(--wr-phosphor);
}

/* Eine Frist wird vorgelesen: kein Trennstrich, keine Proportionalziffern. */
.wr-aether__frist {
    font-family: var(--wr-font-mono);
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--wr-tracking-mono);
    hyphens: none;
    color: var(--wr-bernstein);
}

.wr-aether__fenster .bank__marke,
.wr-aether__stand .bank__marke {
    margin: 0;
}

/* ================================================= DIE VERRIEGELUNG ======= */

.wr-aether__verriegelung {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
    gap: var(--wr-gap-2);
    padding: var(--wr-gap-3);
    background: var(--schirm-feld);
    border: var(--wr-border) solid var(--schirm-kante);
}

.wr-aether__lampe {
    display: grid;
    gap: var(--wr-gap-1);
    padding: var(--wr-gap-2);
    background: var(--wr-ink);
    border: var(--wr-border) solid var(--wr-ink-3);
    border-top-width: var(--wr-border-fat);
}

.wr-aether__lampe[data-an='1'] {
    border-top-color: var(--wr-phosphor);
}

.wr-aether__lampe-stand {
    font-family: var(--wr-font-amt);
    font-size: 0.78rem;
    letter-spacing: var(--wr-tracking-amt);
    text-transform: uppercase;
    color: var(--wr-paper-dim);
    overflow-wrap: anywhere;
    hyphens: none;
}

.wr-aether__lampe[data-an='1'] .wr-aether__lampe-stand {
    color: var(--wr-phosphor);
}

.wr-aether__lampe .bank__marke,
.wr-aether__zaehlwerk .bank__marke {
    margin: 0;
}

.wr-aether__zaehlwerk {
    display: grid;
    gap: var(--wr-gap-1);
    justify-items: start;
}

/* ================================================= DER SENDESCHALTER ====== */

/*
 * Er steht über die volle Breite der Bank: Der Schalter meldet die drei
 * Stellwerke gebündelt mit, und ein Knopf, an dem drei Bänke hängen, gehört
 * nicht als vierte Spalte neben sie.
 */
.wr-aether__schalter {
    grid-column: 1 / -1;
    min-height: 56px;
}

/* ==================================================== DAS SENDEPULT ======= */

.wr-aether__knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wr-gap-2);
}

.wr-aether__stand {
    margin-bottom: var(--wr-gap-3);
}

/*
 * Der gedruckte Kanal. Er steht gross und einzeln, nicht als dritte Zeile im
 * Protokollstreifen: Nach dem zweiten Durchgang liegen dort drei Nummern, und
 * die falsche ist die alte.
 */
.wr-aether__ausdruck {
    display: grid;
    gap: var(--wr-gap-1);
    margin-bottom: var(--wr-gap-3);
    padding: var(--wr-gap-3);
    background: var(--wr-paper-durchschlag);
    border: var(--wr-border) solid var(--wr-ink);
    border-top: var(--wr-border-fat) solid var(--wr-phosphor-tief);
}

/* Eine Zahl, die über den Tisch gerufen wird, trägt nie einen Trennstrich. */
.wr-aether__nummer {
    font-family: var(--wr-font-mono);
    font-size: 2.4rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--wr-tracking-mono);
    hyphens: none;
    color: var(--wr-ink);
}

.wr-aether__ausdruck .bank__marke {
    margin: 0;
    color: var(--wr-signal-deep);
}

/* ============================================== DER KONTROLLEMPFÄNGER ===== */

.wr-aether__skala {
    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-aether__skala .bank__marke {
    flex-basis: 100%;
    margin: 0;
}

/* Der Daumen ist rund: in BEIDE Richtungen gemessen. */
.wr-aether__taste {
    width: 64px;
    height: 56px;
    font-family: var(--wr-font-mono);
    font-size: 1.3rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--wr-tracking-mono);
    hyphens: none;
    color: var(--wr-paper-dim);
    background: var(--wr-ink-2);
    border: var(--wr-border) solid var(--wr-ink-3);
    cursor: pointer;
    transition: transform var(--wr-schnell);
}

.wr-aether__taste[data-gedrueckt='1'] {
    color: var(--wr-ink);
    background: var(--role-licht);
    border-color: var(--wr-ink);
    transform: translateY(2px);
}

.wr-aether__taste[disabled] {
    cursor: default;
    opacity: 0.5;
}

/*
 * Der Schirm: ein Ausschlag und sein Name. Der Name ist die Silhouette, nicht
 * die Bedeutung – was die Form heisst, muss sie ansagen können; was sie
 * bedeutet, steht in einer Vorschrift am anderen Tisch.
 */
.wr-aether__schirm {
    display: grid;
    justify-items: center;
    gap: var(--wr-gap-2);
    margin-top: var(--wr-gap-3);
    padding: var(--wr-gap-4) var(--wr-gap-3);
    background: var(--schirm-feld);
    border-left: var(--wr-border-fat) solid var(--role-accent);
}

.wr-aether__form {
    display: block;
    width: 108px;
    height: 108px;
    color: var(--role-accent);
}

.wr-aether__form svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: square;
    stroke-linejoin: miter;
}

.wr-aether__formname {
    font-family: var(--wr-font-display);
    font-size: 1.5rem;
    line-height: 1.15;
    text-align: center;
    overflow-wrap: anywhere;
    color: var(--schirm-text);
}

.wr-aether__rauschen {
    font-family: var(--wr-font-doc);
    text-align: center;
    color: var(--schirm-still);
}

.wr-aether__schirm .bank__marke {
    margin: 0;
}

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

.wr-aether__bogen h3,
.wr-aether__bogen label {
    grid-column: 1 / -1;
    margin: 0;
}

/* Ein Name, der über den Tisch gerufen wird, trägt nie einen Trennstrich. */
.wr-aether__bogen input {
    hyphens: none;
}

/* ================================================ DIE SENDEVORSCHRIFT ===== */

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

.wr-aether__einhaengen input {
    hyphens: none;
}

/* Auf schmalen Schirmen bleiben von der zweiten Spalte vier Zeichen übrig. */
@media (max-width: 34rem) {
    .wr-aether__bogen {
        grid-template-columns: 1fr;
    }

    .wr-aether__form {
        width: 84px;
        height: 84px;
    }

    .wr-aether__taste {
        width: 56px;
    }
}