/*
 * Nur die öffentliche Umrahmung der Live-Seite.
 *
 * Das Timing selbst wird komplett von assets/vendor/style.css gestylt – der
 * App-CSS aus Overlay Control. Eingriffe in .timing-*-Klassen bleiben auf die
 * unten einzeln begründeten Ausnahmen beschränkt: sobald hier frei gestaltet
 * wird, driftet die öffentliche Ansicht wieder von der im Overlay ab.
 */

:root {
    --public-header-height: 70px;
}

/*
 * Die Eingriffe in .timing-*-Regeln. Alle sind Anpassungen an die öffentliche
 * Seite, keine Umgestaltung:
 *
 * 1. .timing-shell steht im Overlay auf height:100vh, weil es dort das ganze
 *    Fenster füllt. Mit unserem Header darüber ergäbe das 100vh + Headerhöhe
 *    bei overflow:hidden am body – die Seite verschöbe sich um genau die
 *    Headerhöhe und ließe sich nicht zurückscrollen.
 * 2. .timing-window schaltet Textauswahl ab. Für eine OBS-Quelle richtig, für
 *    eine öffentliche Seite falsch: Zuschauer wollen Zeiten kopieren können.
 */
body.timing-window .timing-shell {
    height: calc(100vh - var(--public-header-height));
}

body.timing-window {
    -webkit-user-select: text;
    user-select: text;
}

/*
 * 3. Eckige Ecken. Die öffentliche Seite ist durchgehend kantig; das Timing-CSS
 *    aus Overlay Control zeichnet drei Abzeichen dagegen als Pillen
 *    (border-radius: 999px).
 *
 *    Warum hier und nicht in vendor/style.css: die Datei wird aus Overlay
 *    Control gespiegelt, tools/sync-renderer.php überschreibt jede Änderung
 *    daran beim nächsten Abgleich, und im Overlay selbst sollen die Abzeichen
 *    rund bleiben.
 *
 *    Bewusst namentlich statt als Sammelregel über den ganzen Timing-Bereich:
 *    der Renderer baut die Zeilen dreimal pro Sekunde neu auf, und eine Regel
 *    mit Universalselektor müsste dabei jedes Mal gegen jede Zelle geprüft
 *    werden. Kommt in Overlay Control ein weiteres Abzeichen dazu, meldet sich
 *    der Test "Timing-Abzeichen sind eckig" in tests/run.php.
 *
 *    Nicht dabei: .timing-focus-dot und .timing-battle-dot. Das sind Punkte,
 *    keine Ecken – eckig wären sie nur kaputt.
 */
/*
 * 4. Der Link zur Streckenkarte liegt in der Knopfleiste und leiht sich deren
 *    Klasse .btn. Als <a> bekommt er dadurch alles außer der Textausrichtung
 *    und der fehlenden Unterstreichung – beides gilt in Overlay Control nur für
 *    <button>. Kein Eingriff in das Aussehen, sondern der Ausgleich dafür, dass
 *    es dort kein solches Element gibt.
 */
body.timing-window .timing-top-actions a.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

body.timing-window .timing-tire-badge,
body.timing-window .timing-tire-seg,
body.timing-window .timing-marker-badge,
body.timing-window .timing-penalty-badge,
body.timing-window .timing-pitwindow-badge,
body.timing-window .status-marker {
    border-radius: 0;
}

/*
 * 5. Feste Spalte für den Timer.
 *
 *    Der Timer wechselt zwischen sehr unterschiedlich breiten Inhalten: einer
 *    laufenden Zeit, einem Rundenzähler wie "12 / 30" und Zustandswörtern von
 *    "RACE" bis "PRE-SESSION". Dazu kommt eine Stelle hinzu, sobald aus 59:59
 *    eine Stunde wird. Ohne feste Breite schob jeder dieser Wechsel SOF,
 *    Streckenname und Sessionname nach links oder rechts.
 *
 *    Die Breite ist gemessen, nicht geschätzt: längster Inhalt ist
 *    "PRE-SESSION" mit 6,82em in Segoe UI – aber 7,83em in Arial und
 *    Helvetica. Auf die fällt die Schriftkette der App zurück, wenn Segoe UI
 *    fehlt, also überall außer Windows. Maßgeblich ist deshalb der Rückfall,
 *    plus etwas Luft. Angabe in em, damit die Spalte über alle vier
 *    Schriftgrößen der Kopfzeile mitskaliert (28, 22, 20 und 18 px).
 *
 *    tabular-nums zusätzlich, damit auch innerhalb der Spalte nichts zappelt:
 *    die Ziffern der Schrift sind sonst unterschiedlich breit.
 */
body.timing-window .timing-session-timer {
    flex: 0 0 8em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    /*
     * Größer als in der gespiegelten CSS. Dort steht die Browserquelle auf
     * 22px, zwei Medienabfragen drücken sie aber auf 20 und dann 18px – und
     * die zweite (max-height: 1080px) greift auf praktisch jedem Monitor.
     * Effektiv waren es also 18px. Für eine Seite, auf der die Restzeit die
     * Hauptinformation ist, ist das zu klein.
     *
     * clamp statt fester Größe mit eigenen Medienabfragen: die Breakpoints der
     * gespiegelten Datei müssten sonst hier nachgepflegt werden. Die Obergrenze
     * ist die Grundgröße des Entwurfs, die Untergrenze bleibt über dem alten
     * Wert. Die Spalte oben ist in em angegeben und wächst automatisch mit.
     */
    font-size: clamp(22px, 1.5vw, 28px);
}

/*
 * 6. SOF, Strecke und Sessionname stehen rechts, direkt vor den Knöpfen.
 *
 *    In Overlay Control sitzen sie links neben der Uhr. Dort ist das
 *    unproblematisch; auf der öffentlichen Seite wanderten sie mit jeder
 *    Breitenänderung des Timers mit. Rechts ausgerichtet haben sie einen festen
 *    Bezugspunkt – die Knopfleiste – und bleiben stehen.
 *
 *    Der freie Platz gehört diesem Block (margin-left: auto), deshalb muss er
 *    den Knöpfen genommen werden: die gespiegelte style.css setzt dort
 *    ebenfalls margin-left: auto, und zwei solche Angaben teilen den Freiraum
 *    zwischen sich auf, statt ihn ganz vor den ersten zu legen.
 */
.public-session-meta {
    margin-left: auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

body.timing-window .timing-top-actions {
    margin-left: 0;
}

.public-header {
    height: var(--public-header-height);
    /* Fester Wert statt clamp: mit einer breitenabhängigen Angabe wandert das
       Logo beim Größerziehen des Fensters und sitzt auf Seiten, die
       unterschiedlich breit aufgebaut sind, an verschiedenen Stellen.
       Muss in app.css und live-page.css identisch sein. */
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    border-bottom: 1px solid #ffcc00;
    background: #ffcc00;
    color: #111111;
}

.public-header .brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: #111111;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .16em;
    text-decoration: none;
}

/* Farbe kommt über fill="currentColor" vom .brand (#111111 auf Gelb).
   Höhe und der Seitenabstand des Kopfes müssen mit app.css übereinstimmen,
   damit das Logo auf allen Seiten an derselben Stelle und gleich groß sitzt. */
.public-header .brand-mark {
    height: 35px;
    width: auto;
    display: block;
}

/*
 * Rechts steht der Kanalname, dort wo auf der Übersicht "LIVETIMING" steht.
 *
 * Den Freiraum bekommt das Logo (margin-right: auto), nicht der Kanalname:
 * so bleibt der Hinweis bei ausbleibenden Daten direkt links neben dem Namen,
 * unabhängig davon, ob er gerade sichtbar ist oder über hidden aus dem Layout
 * fällt.
 */
.public-header .brand {
    margin-right: auto;
}
.public-channel {
    min-width: 0;
    overflow: hidden;
    color: #111111;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .06em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
 * Kurzer Hinweis bei ausbleibenden Daten, direkt vor dem Kanalnamen. Über das
 * hidden-Attribut ist er im Normalbetrieb komplett aus dem Layout und ändert
 * die Kopfhöhe nicht – die Höhe steht ohnehin fest, weil .timing-shell mit
 * calc(100vh - Kopfhöhe) rechnet.
 */
.stale-notice {
    padding: 5px 10px;
    border-radius: 0;
    color: #ffe2e2;
    background: #8c1d1d;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

/* Auf schmalen Fenstern wurde der Kanalname früher ausgeblendet, als er noch
   Beiwerk neben "LIVETIMING" war. Jetzt ist er die eigentliche Beschriftung
   und bleibt stehen – er kürzt sich bei Platzmangel mit Auslassungspunkten. */

/*
 * Streckenkarte (trackmap.php).
 *
 * Eigene Seite, nicht als Kasten neben der Zeitentabelle. Sie gibt es nur in
 * der öffentlichen Ansicht, nicht in Overlay Control – deshalb ein eigener
 * Namensraum und keine .timing-*-Klasse.
 */
.trackmap-shell {
    /* Wie .timing-shell: die Kopfzeile steht darüber und muss abgezogen werden,
       sonst ergäbe 100vh zusammen mit ihr mehr als das Fenster. */
    height: calc(100vh - var(--public-header-height));
    padding: 8px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 8px;
}

.trackmap-bar {
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid rgba(184, 184, 184, .18);
    background: linear-gradient(180deg, rgba(16, 16, 16, .98), rgba(8, 8, 8, .98));
}

.trackmap-back {
    color: #d0d0d0;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.trackmap-back:hover {
    color: #ffcc00;
}

/* Der Streckenname rutscht nach rechts, die Sessionzeile bekommt den Platz
   dazwischen. */
.trackmap-title {
    margin-left: auto;
    color: #8a8a8a;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
}

/* Die Zeile ist dieselbe wie über der Zeitentabelle, nur eine Stufe kleiner:
   dort ist sie die Hauptinformation, hier steht sie über der Karte. Die Farben
   und Zustandsklassen kommen unverändert aus der gespiegelten style.css. */
.trackmap-session-line {
    flex: 1;
    flex-wrap: wrap;
    row-gap: 4px;
}

.trackmap-session-line .timing-session-timer {
    font-size: 20px;
}

.trackmap-session-line .timing-session-info {
    white-space: normal;
}

.trackmap-panel {
    min-height: 0;
    padding: 10px;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(184, 184, 184, .18);
    background: linear-gradient(180deg, rgba(16, 16, 16, .98), rgba(8, 8, 8, .98));
}

.trackmap-stage {
    flex: 1;
    min-height: 0;
    display: flex;
}

/* Das viewBox-Verhältnis der Karte ist je Strecke anders (Spa ist hochkant,
   Monza quer). Über preserveAspectRatio passt sich das SVG von selbst in den
   Kasten ein, deshalb hier nur die Fläche vorgeben. */
.trackmap-svg {
    width: 100%;
    height: 100%;
}

/* Strichstärken, Punktgröße und Schriftgröße stehen bewusst nicht hier: sie
   werden in live-trackmap.js aus Pixelvorgaben in SVG-Einheiten umgerechnet,
   weil jede Strecke ein anderes viewBox-Format hat. */
.trackmap-road {
    fill: none;
    stroke: #2c2c2c;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.trackmap-line {
    fill: none;
    stroke: #6b6b6b;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.trackmap-start {
    fill: #ffcc00;
}

.trackmap-car-dot {
    fill: #d8d8d8;
    stroke: #000000;
}

.trackmap-car-label {
    fill: #111111;
    font-weight: 800;
    /* Die Beschriftung sitzt auf dem Punkt; ohne das fängt sie den Zeiger ab und
       der Tooltip des Fahrzeugs erschiene nicht. */
    pointer-events: none;
}

.trackmap-car.in-pit {
    opacity: .45;
}

/*
 * Ausgeblendet wird in zwei Fällen: das Fahrzeug ist nicht auf der Strecke
 * (iRacing meldet dann lapDistPct -1), oder es wurde an die Box zurückgesetzt.
 * Im zweiten Fall springt der Punkt während der Unsichtbarkeit an die neue
 * Stelle und blendet dort wieder ein, statt quer über die Karte zu fliegen.
 *
 * Die Übergangszeit muss zu BLENDE_MS in live-trackmap.js passen.
 */
.trackmap-car {
    transition: opacity .26s ease;
}

.trackmap-car.verborgen {
    opacity: 0;
}

.trackmap-hint {
    margin: 0;
    padding: 12px 4px 4px;
    color: #8a8a8a;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
}