/* ==========================================================================
   Leaderboard — die Zeitentafel

   Dunkel, schmal gesetzt, mit einem Farbband links an jeder Zeile: so
   sehen Zeitentafeln im Motorsport aus. Alles steht linksbündig
   untereinander — Strecke, dann Klasse, dann die zehn Zeiten.
   ========================================================================== */

.trl {
  --trl-grund:  #0b0b0f;
  --trl-zeile:  #101016;
  --trl-zeile2: #0d0d12;
  --trl-linie:  #1e1e26;
  --trl-text:   #f2f2f5;
  --trl-blass:  #8d8d99;

  --trl-gold:   #c9a227;
  --trl-silber: #b4b4bf;
  --trl-bronze: #b07238;
  --trl-akzent: #c01424;
  --trl-purpur: #b14dff;

  max-width: 1180px;
  margin: 0 auto;
  padding: 0 0 30px;
  color: var(--trl-text);
  background: var(--trl-grund);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.4;
}

/* --- Strecke, Strich, Titel, Klassen ------------------------------------ */

.trl-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 0 32px;
}

/* Der Block um den Seiteninhalt bringt 56 Pixel Polsterung mit; unter
   der Ueberschrift ist das zu viel. Die Tafel holt sie zur Haelfte
   zurueck, die Reihe selbst braucht dann keine eigene mehr. */
/* Der Shortcode steht im Inhaltsblock, und dessen erste Kachel setzt
   den oberen Rand zurueck — deshalb mit dem Block davor im Selektor. */
.entry-content .trl,
.wp-block-post-content .trl { margin-top: -30px; }
.trl-reihe.ist-strecken { padding-top: 0; }

.trl-reihe button {
  padding: 10px 20px;
  font-family: inherit;
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #b6b6c0;
  background: #16161d;
  border: 1px solid #24242e;
  border-radius: 3px;
  cursor: pointer;
  transition: color .12s, background .12s, border-color .12s;
}

.trl-reihe button:hover { color: var(--trl-text); border-color: #3a3a48; }

.trl-reihe button.ist-an {
  color: #fff;
  background: var(--trl-akzent);
  border-color: var(--trl-akzent);
}

/* Die Klassen stehen kleiner als die Strecken — sie hängen an ihnen. */
.trl-reihe.ist-klassen button {
  padding: 7px 14px;
  font-size: 12px;
  letter-spacing: .08em;
}

.trl-reihe.ist-klassen button i {
  margin-left: 6px;
  font-style: normal;
  font-size: 11px;
  opacity: .6;
}

.trl-strich {
  height: 0;
  margin: 20px 32px 18px;
  border: 0;
  border-top: 1px solid var(--trl-linie);
}

/* Streckenname links, Hausrekord rechts am Rand — beide auf der
   Grundlinie, damit die kleine Schrift nicht zu schweben scheint. */
.trl-kopfzeile {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin: 0 32px 14px;
}

.trl-titel {
  margin: 0;
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--trl-text);
}

/* Zwei Zeilen, beide rechtsbuendig: das Wort darueber, darunter
   Fahrer, Zeit und Streckentemperatur. Der Block schliesst unten mit
   dem Streckennamen ab — mit `baseline` sass die erste Zeile auf dessen
   Grundlinie und die zweite schob alles darunter nach unten. */
.trl-rekord {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  min-width: 0;
  text-align: right;
}

.trl-rekord-wort {
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #5c5c68;
}

.trl-rekord-wert {
  display: flex;
  align-items: baseline;
  gap: 9px;
  min-width: 0;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.trl-rekord-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #9a9aa6;
}

/* Purpur wie im Zeitmessstand: die schnellste Runde ueberhaupt. */
.trl-rekord-wert b {
  font-weight: 700;
  font-size: 16px;
  color: var(--trl-purpur);
}

/* KEIN EIGENER HINWEISKASTEN. Das Theme bringt einen mit: `functions.php`
   horcht auf jedes `data-tip` und zeichnet `.tr-tip`. Ein zweiter Kasten
   hier zeigte beide gleichzeitig, halb uebereinander. Hier bleibt nur der
   Mauszeiger. */
.trl-rekord-wert b[data-tip] { cursor: help; }

/* --- Die Tafel ---------------------------------------------------------- */

/* Der Name braucht nicht die halbe Breite — den Platz bekommt das
   Fahrzeug, dahinter stehen Datum, Temperatur und die Zeiten. */
.trl-spalten,
.trl-zeile {
  display: grid;
  grid-template-columns:
    58px 34px 270px minmax(0, 1fr) 110px 110px 140px 110px;
  align-items: center;
}

.trl-spalten {
  /* 18px mehr links: Die Zeilen darunter tragen ein 4px-Farbband und
     14px Abstand, sonst stuenden die Ueberschriften daneben. */
  padding: 18px 32px 8px 50px;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #70707c;
}

/* Jede Ueberschrift steht genau ueber ihrer Spalte: dieselbe Polsterung
   wie die Zelle darunter. */
.trl-spalten > :nth-child(3) { padding-left: 8px; }
.trl-spalten > :nth-child(5) { padding-right: 12px; }

/* Die Temperatur steht mittig in ihrer Spalte — ein Strich und „20,6 °C“
   sind verschieden lang, rechtsbuendig wirkte das unruhig. */
.trl-spalten > :nth-child(6) { text-align: center; }
.trl-spalten > :nth-child(7) { padding-right: 10px; }
.trl-spalten > :nth-child(8) { padding-right: 14px; }

.trl-spalten .ist-rechts,
.trl-zeile .trl-datum,
.trl-zeile .trl-zeit,
.trl-zeile .trl-delta { text-align: right; }

.trl-zeile .trl-temp { text-align: center; }

.trl-tafel { padding: 0 32px; }

.trl-zeile {
  height: 44px;
  margin-bottom: 2px;
  padding-left: 14px;
  background: var(--trl-zeile);
  border-left: 4px solid #2a2a34;
}

.trl-zeile:nth-child(even) { background: var(--trl-zeile2); }

.trl-zeile.ist-eins  { background: #17130a; border-left-color: var(--trl-gold); }
.trl-zeile.ist-zwei  { border-left-color: var(--trl-silber); }
.trl-zeile.ist-drei  { border-left-color: var(--trl-bronze); }

.trl-pos {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #8d8d99;
}

.trl-zeile.ist-eins .trl-pos { color: var(--trl-gold); }
.trl-zeile.ist-zwei .trl-pos { color: var(--trl-silber); }
.trl-zeile.ist-drei .trl-pos { color: var(--trl-bronze); }

/* Der Pokal steht zwischen Platz und Namen — nur bei den ersten drei. */
.trl-pokal {
  display: flex;
  align-items: center;
}

.trl-pokal svg {
  width: 21px;
  height: 21px;
}

.trl-zeile.ist-eins .trl-pokal { color: var(--trl-gold); }
.trl-zeile.ist-zwei .trl-pokal { color: var(--trl-silber); }
.trl-zeile.ist-drei .trl-pokal { color: var(--trl-bronze); }

.trl-name {
  min-width: 0;
  padding-left: 8px;
  font-size: 17px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Wann gefahren wurde und bei welcher Streckentemperatur — eigene
   Spalten, nicht mehr klein unter dem Namen. */
.trl-datum {
  padding-right: 12px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--trl-blass);
  white-space: nowrap;
}

.trl-temp {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--trl-blass);
  white-space: nowrap;
}

.trl-wagen {
  min-width: 0;
  font-size: 13.5px;
  color: var(--trl-blass);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trl-zeit {
  padding-right: 10px;
  font-size: 23px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.trl-zeile.ist-eins .trl-zeit { color: #e3c25c; }

.trl-delta {
  padding-right: 14px;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  color: #7f7f8b;
}

/* --- Fuss --------------------------------------------------------------- */

.trl-fuss {
  margin-top: 16px;
  padding: 16px 32px 0;
  border-top: 1px solid var(--trl-linie);
  font-size: 12px;
  color: #70707c;
}

/* --- Schmaler Bildschirm ------------------------------------------------ */

@media (max-width: 860px) {
  .trl-titel { font-size: 30px; }

  .trl-spalten,
  .trl-zeile { grid-template-columns: 40px 26px minmax(0, 1fr) 90px; }

  /* Fahrzeug, Datum, Temperatur und Abstand ruecken weg — auf dem
     Telefon zaehlen Platz, Name und Zeit. */
  .trl-spalten > :nth-child(4),
  .trl-zeile .trl-wagen,
  .trl-spalten > :nth-child(5),
  .trl-zeile .trl-datum,
  .trl-spalten > :nth-child(6),
  .trl-zeile .trl-temp,
  .trl-spalten > :nth-child(8),
  .trl-zeile .trl-delta { display: none; }

  .trl-pokal svg { width: 17px; height: 17px; }
  .trl-zeit { font-size: 19px; }
  .trl-reihe, .trl-tafel, .trl-fuss { padding-inline: 16px; }
  .trl-spalten { padding-left: 34px; padding-right: 16px; }
  .trl-strich, .trl-kopfzeile { margin-inline: 16px; }

  /* Auf dem Telefon steht der Rekord unter dem Namen statt daneben. */
  .trl-kopfzeile { display: block; }
  .trl-rekord { margin-top: 6px; text-align: left; }
}