/* chrisinterface UI-Kit
   Christian Steiner · chrisinterface.com
   Version siehe Datei VERSION.

   ZEITLEISTE — die Optik der Maßstab-Leiter (das Rechnen: zeitleiter.js).
   Eine schwebende Palette über einer Seite mit Verlaufsdiagrammen:
   [Bahn mit Griff] und rechts der Stepper [− Stufe +], dazu wahlweise zwei
   Zeiten neben der Bahn. Das Markup baut das Werkzeug in seinen Mount:
       <div class="zeitleiste-mount" id="…">
         <div class="zeitleiste">
           <span class="massstab-zeit">10:00:00</span>
           <div class="massstab-bahn"><div class="massstab-griff"></div></div>
           <span class="massstab-zeit">11:54:12</span>
           <div class="massstab-stepper"><button>−</button><span class="massstab-wert">30 min</span><button>+</button></div> */

/* Waagerecht gehört die Geste uns (Ausschnitt schieben), senkrecht der Seite
   (scrollen). Ohne die Zeile entscheidet der Browser, und am Tablet blieb
   entweder das Scrollen oder das Schieben auf der Strecke. */
.massstab-bahn {
    touch-action: pan-y;
}

/* Versteckt ist wirklich weg: [hidden] verliert gegen das eigene display der
   Regel darunter, sobald eine dazukommt. */
.zeitleiste-mount[hidden] {
    display: none !important;
}

/* Eine Zeile. Der Stepper hat ein festes Anzeigefeld — nichts springt beim
   Stufenwechsel, jeder Knopf bleibt am Ort. */
.zeitleiste {
    display: flex;
    align-items: center;
    gap: var(--abstand-12);
    height: 52px;
    padding: 0 var(--abstand-12);
    background: var(--flaeche-erhaben);
    border: 1px solid var(--linie);
    border-radius: var(--rundung-mittel);
    box-shadow: var(--schatten-schwebend);
}
/* Im Mount schwebt sie: durchscheinend, ohne Rahmen. Die deckende Karte
   beantwortete die Frage nicht, die eine schwebende Palette stellt — liegt
   da etwas drunter? Jetzt scheinen die Kurven weich hindurch, Kartenfarbe
   bei 50 % mit 12 px Weichzeichnung, damit sie Stimmung sind und keine
   Konkurrenz. Der Rahmen wird durchsichtig statt entfernt, damit die 52 px
   Höhe und die Rechnung für das Seitenende unten unverändert bleiben. */
.zeitleiste-mount .zeitleiste {
    background: color-mix(in srgb, var(--flaeche-erhaben) 50%, transparent);
    border-color: transparent;
    -webkit-backdrop-filter: blur(12px) saturate(1.3);
    backdrop-filter: blur(12px) saturate(1.3);
}
/* Auf der durchscheinenden Palette wirken deckende Stepper-Knöpfe wie ein
   Kasten im Kasten — sie folgen der Palette. Die Bahn bleibt tief und
   deckend: Sie ist das Instrument. */
.zeitleiste-mount .massstab-stepper button,
.zeitleiste-mount .massstab-wert {
    background: color-mix(in srgb, var(--text) 4%, transparent);
}
.zeitleiste-mount .massstab-stepper button:hover:not(:disabled) {
    background: color-mix(in srgb, var(--text) 9%, transparent);
}
/* Der Mount schwebt im Fenster, so breit wie der Inhalt, den er steuert —
   die Bahn IST die Zeitachse der Diagramme darüber; gleich breit heißt, der
   Griff steht dort, wo man es im Diagramm sieht. Und 20 px schmaler je
   Seite: Was über etwas liegt, darf nicht dieselbe Kante haben wie das,
   worüber es liegt. 20 px über dem unteren Rand; unter den Dialogen (300)
   und dem Auswahl-Fenster (120). */
.zeitleiste-mount {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 20px;
    /* dieselbe Rechnung wie .seite (1140 minus zweimal Seitenrand), minus
       20 je Seite. Wer die Seite breiter macht, macht auch das hier breiter. */
    width: calc(100vw - 2 * var(--abstand-24) - 40px);
    max-width: calc(1140px - 2 * var(--abstand-24) - 40px);
    z-index: 100;
}
/* Wie die Seite unten endet: Die letzte Karte endet so weit über der Palette,
   wie die Palette über dem Fensterrand steht — 20 + 52 + 20 = 92. Das ERSETZT
   die 80 der Seite, es kommt nicht dazu. Ändert sich Höhe oder Abstand der
   Leiste, ändert sich hier dieselbe Zahl. */
body:has(.zeitleiste-mount:not([hidden])) .seite {
    padding-bottom: calc(20px + 52px + 20px);
}

/* Zeitanzeigen neben der Bahn. Monospace mit tabellarischen Ziffern hält die
   Breite konstant, sonst zappelte die Zahl beim Mitzählen und schöbe die
   Bahn hin und her. */
.massstab-zeit {
    font-family: var(--schriftart-mono);
    font-size: var(--schrift-xs);
    color: var(--text);
    min-width: 62px;              /* trägt HH:MM:SS ohne Zappeln */
    text-align: center;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* Der Stepper: ein geschlossenes Element aus zwei Knöpfen und einem festen
   Anzeigefeld dazwischen. */
.massstab-stepper { display: flex; align-items: center; flex-shrink: 0; }
.massstab-stepper button {
    font: inherit;
    font-size: 16px;
    width: 34px;
    height: 30px;
    cursor: pointer;
    background: var(--flaeche-erhaben);
    color: var(--text);
    border: 1px solid var(--linie);
}
.massstab-stepper button:first-child { border-radius: var(--rundung-mittel) 0 0 var(--rundung-mittel); }
.massstab-stepper button:last-child  { border-radius: 0 var(--rundung-mittel) var(--rundung-mittel) 0; }
.massstab-stepper button:hover:not(:disabled) { background: var(--flaeche-betont); }
.massstab-stepper button:disabled { color: var(--text-leise); cursor: default; }
.massstab-wert {
    width: 76px;
    height: 30px;
    line-height: 28px;
    text-align: center;
    font-size: var(--schrift-kompakt);
    color: var(--text);
    background: var(--vertieft);
    border: 1px solid var(--linie);
    border-left: none;
    border-right: none;
    font-variant-numeric: tabular-nums;
}
.massstab-bahn {
    position: relative;
    flex: 1;
    /* 11 px sichtbare Bahn in einer 30 px hohen, durchsichtigen Trefferfläche:
       Am Tablet trifft man so auch, was man sieht. */
    height: 30px;
    cursor: pointer;
}
/* die sichtbare Bahn — mittig in der Trefferfläche: (30 − 11) / 2 */
.massstab-bahn::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 9.5px;
    height: 11px;
    border-radius: 5.5px;
    background: var(--vertieft);
}
.massstab-griff {
    position: absolute;
    top: 11px;
    height: 8px;
    min-width: 28px;
    border-radius: var(--rundung-klein);
    background: var(--linie);
    cursor: grab;
}
.massstab-griff:hover { background: var(--linie-stark); }