/* Nur was das Design-System nicht kennt: Diagrammflaeche, Rangzeile, Auswahl.
   Farben, Groessen und Abstaende kommen ausschliesslich aus den Tokens. */

/* --- Meldung nach einer Aktion ------------------------------------- */
.lp-flash { padding-top: var(--dt-space-lg); padding-bottom: 0; }
.lp-flash__text {
  font-size: var(--dt-body-size);
  border-left: 3px solid var(--dt-status-ok-ctx);
  padding-left: var(--dt-space-sm);
}
.lp-flash__text--err { border-left-color: var(--dt-status-err-ctx); }

/* --- Formular und Kopfzeilen --------------------------------------- */
.lp-form { display: flex; gap: var(--dt-space-sm); flex-wrap: wrap; align-items: center; }
.lp-form .dt-field { min-width: 18rem; }

.lp-headrow {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--dt-space-md); flex-wrap: wrap;
}
.lp-sort { display: flex; gap: var(--dt-space-xs); flex-wrap: wrap; }

/* ---------- Rangfarben ----------
   Die einzige Abweichung dieses Projekts von „genau ein Akzent" (DESIGN.md).
   Begruendung: die Farbe steht hier nicht fuer Anklickbarkeit, sondern
   verschluesselt einen Wert — den Rang, den Riot selbst seit jeher farbig
   fuehrt. Sie taucht ausschliesslich in der Minigrafik auf, nie an einem Link,
   einem Knopf oder einer Flaeche. Die Werte sind mitteltonig gewaehlt, damit
   sie auf heller und auf dunkler Flaeche gleichermassen lesbar bleiben. */
:root {
  --lp-tier-iron:        #7d6f68;
  --lp-tier-bronze:      #b0764a;
  --lp-tier-silver:      #93a3af;
  --lp-tier-gold:        #d5a441;
  --lp-tier-platinum:    #3fa8ab;
  --lp-tier-emerald:     #2ea36f;
  --lp-tier-diamond:     #6b7fe0;
  --lp-tier-master:      #a367d6;
  --lp-tier-grandmaster: #d1555c;
  --lp-tier-challenger:  #47b9ef;
  --lp-tier-unranked:    var(--dt-ink-muted-48);
}

/* Minigrafik in der Tabelle: schmal, ruhig, ohne Achsen. */
.lp-spark { width: 108px; height: 26px; margin-top: var(--dt-space-xxs); cursor: help; }

/* ---------- Zeilenaktionen ----------
   Nur Zeichen: Stern (merken), Winkel (Details), Kreuz (entfernen). Beschriftet
   sind sie ueber title und aria-label.

   Die Flaeche bleibt trotzdem --dt-touch-target gross (DESIGN.md: alles
   Anfassbare mindestens so gross) — sichtbar ist davon nur das Zeichen, der
   Rest ist durchsichtig. Schlank aussehen und schlank zu treffen sein sind
   zwei verschiedene Dinge. */
.lp-aktionen { text-align: right; }
.lp-aktionen__reihe {
  display: flex; gap: 0; justify-content: flex-end; align-items: center;
}
.lp-akt {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--dt-touch-target); height: var(--dt-touch-target);
  background: none; border: 0; padding: 0;
  color: var(--dt-ink-muted-48);
  font-size: 1.05rem; line-height: 1; text-decoration: none;
  border-radius: var(--dt-radius-full);
  cursor: pointer;
  transition: color .12s ease;
}
.lp-akt:hover, .lp-akt:focus-visible { color: var(--dt-link); text-decoration: none; }
.lp-akt:focus-visible { outline: 2px solid var(--dt-primary-focus); outline-offset: -6px; }
.lp-akt--weg { font-size: .95rem; }
/* Der Winkel fuer "Details" steht in vielen Schriften etwas hoch. */
.lp-akt[href^="/account/"]:not(.lp-akt--weg) { font-size: 1.3rem; }

/* Der Stern erscheint erst, wenn lp.js laeuft — ein Knopf, der ohne
   JavaScript nichts tut, waere schlimmer als keiner. Dasselbe gilt fuer den
   Hinweis unter der Tabelle. */
.lp-fav, .lp-fav-hinweis { display: none; }
.lp-js .lp-fav-hinweis { display: block; }
.lp-js .lp-fav { display: inline-flex; }
.lp-fav[aria-pressed="true"] { color: var(--dt-link); }

/* Markierte Zeile: ein ruhiger Streifen, keine Umsortierung. */
.lp-ist-fav > td { background: var(--dt-surface-chip); }

/* Der Kontoname ist Text, kein Link — angeklickt wird rechts. */
.lp-konto { font-weight: var(--dt-weight-semi); }

/* ---------- Zeitraum und Anzahl ---------- */
.lp-filter { margin-top: var(--dt-space-lg); display: grid; gap: var(--dt-space-xs); }
.lp-filterzeile {
  display: flex; align-items: center; gap: var(--dt-space-xs); flex-wrap: wrap;
}
.lp-filter__label { min-width: 5.5rem; }

/* Sprungziel der Sortierlinks. Die Unterleiste klebt oben — ohne diesen
   Abstand verschwindet die Ueberschrift beim Sprung darunter. */
.lp-anchor { scroll-margin-top: calc(var(--dt-subnav-height) + var(--dt-space-md)); }

/* --- Rang in der Tabelle ------------------------------------------- */
.lp-rank { display: inline-flex; align-items: center; gap: var(--dt-space-xs); }
.lp-rank__icon { width: 28px; height: 28px; object-fit: contain; }

/* Der Live-Hinweis beschreibt einen Zustand, keine Aktion — darum ein
   Statusfarbton und kein Akzent. */
.lp-live { color: var(--dt-status-ok-ctx); }

/* --- Diagramm ------------------------------------------------------ */
.lp-chartbox {
  overflow-x: auto;
  /* Auf schmalen Fenstern darf gescrollt werden, statt die Linie zu stauchen. */
}
.lp-chart { width: 100%; min-width: 30rem; height: auto; display: block; }
.lp-chart__axis {
  font-family: var(--dt-font-text);
  font-size: var(--dt-fine-print-size);
  fill: var(--dt-fg);
  opacity: .55;
}
.lp-chart__series {
  font-family: var(--dt-font-text);
  font-size: var(--dt-caption-size);
  fill: var(--dt-fg);
}
.lp-chart circle { cursor: help; }

/* --- Vergleich ----------------------------------------------------- */
.lp-picklist {
  display: grid; gap: var(--dt-space-xs);
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}
.lp-pick { display: inline-flex; align-items: center; gap: var(--dt-space-xs); }

.lp-legend {
  list-style: none; padding: 0;
  margin-top: var(--dt-space-md);
  display: flex; gap: var(--dt-space-lg); flex-wrap: wrap;
  font-size: var(--dt-caption-size);
}
.lp-legend li { display: inline-flex; align-items: center; gap: var(--dt-space-xs); }
/* Die Linienprobe wiederholt Strichmuster und Deckkraft aus charts.py —
   Reihenfolge und Werte muessen dort und hier gleich bleiben. */
.lp-legend__line {
  display: inline-block; width: 2.5rem; height: 0;
  border-top: 2px solid var(--dt-primary);
}
.lp-legend__line--0 { opacity: 1;   }
.lp-legend__line--1 { opacity: .9;  border-top-style: dashed; }
.lp-legend__line--2 { opacity: .8;  border-top-style: dotted; }
.lp-legend__line--3 { opacity: .72; border-top-style: dashed; }
.lp-legend__line--4 { opacity: .64; border-top-style: dotted; }
.lp-legend__line--5 { opacity: .58; border-top-style: dashed; }

/* Auswahlchips: das Kaestchen tritt zurueck, der Chip traegt den Zustand. */
.dt-chip--selectable input { margin-right: var(--dt-space-xxs); }

.dt-table td { vertical-align: top; }