/* ---------------------------------------------------------------- *
 * Tab „Suche" — öffentliche Spielersuche (PLAN-SPIELERSUCHE §7)     *
 *                                                                    *
 * Nur Desktop. Der Betreiber hat ausdrücklich gesagt, dass bis auf   *
 * Weiteres nur die PC-Fassung gebaut wird; die Tabelle erbt deshalb  *
 * ihre Maße von #hist aus css/tabs/dash.css und bekommt hier keine   *
 * eigene Telefon-Fassung.                                            *
 *                                                                    *
 * Alle Farben kommen aus css/tokens.css. Kein Wert steht hier fest — *
 * ein Skinwechsel darf diesen Tab nicht auslassen.                   *
 * ---------------------------------------------------------------- */

/* Der Satz über dem Suchfeld. Er ist keine Verzierung: jede kalte Suche
   verbraucht das Riot-Kontingent echter Leute (Plan §2.4). */
.srch-warn{
  font-size:11.5px;line-height:1.6;color:var(--ink2);
  padding:10px 14px;border-radius:var(--rw);
  box-shadow:inset 2px 2px 6px var(--lo),inset -2px -2px 6px var(--hi)}

.srch-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px}
.srch-bar input{
  flex:1;min-width:260px;border:0;outline:none;background:var(--canvas);color:var(--ink);
  font:inherit;font-size:13px;padding:10px 15px;border-radius:12px;
  box-shadow:inset 4px 4px 9px var(--lo),inset -4px -4px 9px var(--hi)}
.srch-bar input::placeholder{color:var(--ink3)}
.srch-bar input.bad{color:var(--loss)}

/* Kontingentanzeige. Sie steht auch dann da, wenn alles in Ordnung ist —
   ein Zähler, der erst bei Ärger erscheint, erklärt den Ärger nicht. */
.srch-budget{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:12px;font-size:11px;color:var(--ink3);font-variant-numeric:tabular-nums}
.srch-budget .n{color:var(--ink2);font-weight:700}
.srch-budget.off .n{color:var(--loss)}

/* Fortschritt: bewusst dieselben Klassen wie der Sync-Balken
   (.w-progwrap/.w-prog aus css/tabs/admin.css) — eine Kopie, keine
   zweite Bauart. Hier steht nur die Zeile drumherum. */
.srch-prog{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px}
.srch-prog[hidden]{display:none!important}
.srch-prog .srch-stat{font-size:11px;color:var(--ink3);font-variant-numeric:tabular-nums;
  min-width:170px}

/* Meldungen: ein Satz, kein Fehlercode. */
.srch-msg{margin-top:12px;font-size:12px;line-height:1.6;color:var(--ink2)}
.srch-msg:empty{display:none}
.srch-msg.err{color:var(--loss)}
.srch-msg.ok{color:var(--win)}
.srch-msg .why{display:block;margin-top:5px;font-size:11px;color:var(--ink3)}

/* Profilkopf des gefundenen Spielers — Anordnung nach op.gg (Betreiber,
   29.07.2026), Optik unverändert die neumorphe des Hauses.
   Was fehlt, steht nicht da: ein gesuchter Fremder hat kein Level, wenn
   summoner-v4 ausfällt, und keine Medaille, wenn er unranked ist. */
.srch-prof{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
/* `overflow:visible`, damit die Level-Plakette über den Rand ragen darf —
   genau dort sitzt sie bei op.gg. */
.srch-prof .ava{width:64px;height:64px;border-radius:50%;flex:0 0 auto;position:relative;
  display:flex;align-items:center;justify-content:center;background:var(--canvas);
  box-shadow:5px 5px 12px var(--lo),-4px -4px 10px var(--hi)}
.srch-prof .ava img{width:100%;height:100%;object-fit:cover;border-radius:50%}
/* Die Level-Plakette. Sie erscheint NUR mit Zahl — eine leere Plakette
   sähe aus wie ein Ladefehler. */
.srch-prof .ava .lvl{position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);
  min-width:26px;height:18px;padding:0 6px;border-radius:9px;background:var(--canvas);
  display:flex;align-items:center;justify-content:center;
  font-size:10.5px;font-weight:800;color:var(--ink2);font-variant-numeric:tabular-nums;
  box-shadow:3px 3px 7px var(--lo),-2px -2px 5px var(--hi)}
.srch-prof .who{display:flex;flex-direction:column;gap:3px}
.srch-prof .rid{font-size:18px;font-weight:700;color:var(--ink)}
.srch-prof .rid .tag{color:var(--ink3);font-weight:500}
.srch-prof .meta{font-size:11.5px;color:var(--ink3);letter-spacing:.4px}

/* Die Rangkästen sitzen rechts im Kopf — dort hat der Betreiber sie
   aufgezählt („Profilbild · Name#Tag · Level · Rang-Medaille · LP").
   Bis zum 29.07.2026 standen hier vier Kernzahlen; sie sind weggefallen,
   weil sie zwei Zentimeter tiefer noch einmal in der Kachelreihe stehen
   und dieselbe Zahl zweimal untereinander genau das Gedränge ist, das
   gemeldet wurde („es sieht sehr clustert aus").

   `margin-left:auto` schiebt sie an den rechten Rand; bei schmalem
   Fenster bricht die Zeile um und die Kästen rutschen unter den Namen. */
.srch-prof .srch-ranks{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap;
  justify-content:flex-end}
/* Schmales Fenster: die Kästen rücken unter den Namen statt neben ihn. Ohne
   das drängte sich „1.378S 1.363N · 50 %" (nicht umbrechbar, siehe .txt)
   gegen den Rand — und die Seite bekäme genau das seitliche Scrollen, das
   der Abnahmelauf als harte Bedingung ausschliesst. */
@media(max-width:760px){
  .srch-prof .srch-ranks{margin-left:0;flex-basis:100%;justify-content:flex-start}
}

/* ---- Champion-Auswahl über der Trefferliste -------------------------
   Filtert nur, was schon geladen ist. Der aktive Knopf ist eingelassen
   statt erhaben — dieselbe Sprache wie die Segment-Schalter des Hauses.
   Ab SRCH_CHIP_MAX Champions tritt das Auswahlfeld des Dashboards an die
   Stelle der Leiste (`.srch-chips.sel`); der Baustein `.selwrap > select`
   kommt unverändert aus css/base.css. */
.srch-chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:-2px 0 12px}
.srch-chips[hidden]{display:none!important}
.srch-chips.sel .selwrap{min-width:220px}
.srch-chips.sel select{width:100%}
.srch-chiplbl{font-size:11px;color:var(--ink3);font-weight:650}
.srch-chip{display:inline-flex;align-items:center;gap:7px;padding:5px 11px 5px 6px;
  border:0;border-radius:11px;background:var(--canvas);color:var(--ink2);
  font:inherit;font-size:11.5px;cursor:pointer;
  box-shadow:3px 3px 7px var(--lo),-2px -2px 6px var(--hi)}
.srch-chip:hover{color:var(--ink)}
.srch-chip.on{color:var(--cyan);font-weight:700;
  box-shadow:inset 3px 3px 7px var(--lo),inset -2px -2px 6px var(--hi)}
.srch-chip .cwrap,.srch-chip .cicon,.srch-chip .cfall{width:22px;height:22px}
.srch-chip .cn{max-width:104px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srch-chip .cnt{font-variant-numeric:tabular-nums;color:var(--ink3);font-weight:700}
.srch-chip.on .cnt{color:var(--cyan)}
/* Der Satz, der die Zweideutigkeit ausräumt: Liste und Kennzahlen folgen
   dem Filter, die drei Aufschlüsselungen darunter nicht. Ohne ihn stünden
   auf einer Seite zwei Nenner, und niemand wüsste, welcher wo gilt. */
.srch-chipnote{font-size:10.5px;color:var(--ink3);line-height:1.4;flex-basis:100%}

/* Der Rangkasten: Medaille links, Text rechts. Der Text steht in EINER
   Spalte untereinander — vorher lagen Werte und Bilanz übereinander und
   überlappten sich bei langen Rangnamen (gemessen 29.07.2026, Bento). */
.srch-rank{padding:9px 16px 9px 12px;border-radius:var(--rw);background:var(--canvas);
  box-shadow:4px 4px 10px var(--lo),-3px -3px 8px var(--hi);
  display:flex;align-items:center;gap:12px}
/* Feste Fläche: ob das Bild kommt oder nicht, der Text beginnt an
   derselben Stelle. Ohne Bild bleibt sie schlicht leer. */
.srch-rank .medal{width:44px;height:44px;flex:0 0 auto;display:flex;
  align-items:center;justify-content:center}
.srch-rank .medal img{width:100%;height:100%;object-fit:contain;display:block}
.srch-rank.none .medal{display:none}
/* `white-space:nowrap`: „1.378S 1.360N · 50 %" ist die längste Zeile des
   Kastens. Ohne sie brach sie auf drei Zeilen um und schob sich unter den
   Rangnamen (im Browser gesehen, 29.07.2026) — der Kasten wächst jetzt
   stattdessen mit seinem Inhalt. */
.srch-rank .txt{display:flex;flex-direction:column;gap:1px;min-width:0;white-space:nowrap}
.srch-rank .q{font-size:9.5px;color:var(--ink3);letter-spacing:.5px;text-transform:uppercase;
  font-weight:700}
.srch-rank .v{font-size:14px;font-weight:750;color:var(--ink);line-height:1.25}
.srch-rank .lp{font-size:11px;color:var(--ink2);font-variant-numeric:tabular-nums}
.srch-rank .wl{font-size:10.5px;color:var(--ink3);font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- *
 * Das Dashboard des gesuchten Spielers                              *
 *                                                                    *
 * Hier steht bewusst FAST NICHTS. Kacheln (.tiles/.tile), Wells      *
 * (.swell), Balkenlisten (.frow) und die Kartenreihe (.row3) kommen  *
 * unverändert aus css/components.css — es sind dieselben Bausteine   *
 * wie im Dashboard eines getrackten Accounts, und sie sollen auch    *
 * gleich aussehen. Nachzutragen ist nur, was es dort nicht gibt.     *
 * ---------------------------------------------------------------- */

/* ---- Eine Spalte, wie das Dashboard ---------------------------------
   Kopf, Kachelreihe, Match-Liste, Rest — alles über die volle Breite.
   Die zweispaltige op.gg-Fassung ist am 29.07.2026 zurückgebaut worden:
   in 340 px Breite drangten sich Kacheln, Balkenlisten und zwölf Wells
   zu einer Kolonne, die dreimal so hoch war wie die Tabelle daneben
   (3.967 px gegen 1.289 px, gemessen an NickJF#EUW). Ansage des
   Betreibers: „die last game soll in maximaler breite sein — maybe genau
   so aufgebaut wie das dashboard“.

   `#srchstack` ist die Kartenspalte des Hauses (`.stack` aus
   css/components.css), keine zweite Bauart. Es steht hier nur, weil ein
   `display:flex` sonst gegen das hidden-Attribut der Kinder gewönne. */
#srchstack,#srchoben,#srchunten{display:flex;flex-direction:column;gap:var(--gap)}
#srchunten[hidden],#srchdash[hidden]{display:none!important}

/* Der Nenner an JEDER Kachel: „aus 20 Spielen". Bewusst klein und
   gedämpft — er soll die Zahl begleiten, nicht mit ihr konkurrieren.
   Im Dashboard eines getrackten Accounts steht er nicht an der Kachel,
   weil dort der Filterkopf über allem sitzt; hier gibt es keinen. */
#srchdash .tile .basis{
  font-size:9.5px;line-height:1.3;color:var(--ink3);margin-top:3px;
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* Im Bento-Skin spannt die LETZTE Kachel über zwei Spalten
   (css/skin-bento.css: `.skin-bento .tiles .tile:last-child`). Das ist dort
   richtig: das Dashboard-Mosaik hat eine zwei Spalten breite Hero-Kachel und
   genau eine Lücke, die diese Schlusszelle füllt. Diese Kachelreihe hat keine
   Hero-Kachel — acht gleich große Zellen ergeben zwei volle Viererreihen, und
   die Sonderregel risse eine dritte Reihe mit einer einzelnen Kachel auf. */
.skin-bento #srchtiles .tile:last-child{grid-column:auto}

/* „Weitere Werte": so viele Zellen nebeneinander, wie hineinpassen.
   auto-fill statt fester Spaltenzahl, damit die Tafel auch dann noch
   ordentlich umbricht, wenn später Werte dazukommen — dieselbe Karte
   soll eine grössere Spielzahl nicht sprengen. */
/* `minmax(122px,…)` liess in einer Drittel-Karte (rund 250 px innen) nur
   EINE Spur zu — zwölf Zellen wurden zu einer 580 px langen Kolonne, genau
   die „1 lange line", die der Betreiber gemeldet hat. Die Karte nimmt
   deshalb jetzt die volle Breite der Hauptspalte, und die Untergrenze liegt
   niedrig genug, dass daraus sechs Zellen je Zeile werden. */
.srch-vals{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px}
.srch-vals .swell{padding:10px 12px}
.srch-vals .swell .val{font-size:18px;font-variant-numeric:tabular-nums}

/* Was leer bleibt — mit Grund. Zwei Spalten: links das Feld, rechts der
   Satz. Der Satz ist der eigentliche Inhalt der Karte und bekommt
   deshalb die Breite; die Feldnamen bleiben eine schmale Marginalie. */
.srch-gaps{display:flex;flex-direction:column;gap:2px}
.srch-gap{display:grid;grid-template-columns:190px 1fr;gap:8px 18px;
  align-items:baseline;padding:9px 8px;border-radius:10px}
.srch-gap+.srch-gap{box-shadow:inset 0 1px 0 rgba(255,255,255,.045)}
.srch-gap:hover{background:rgba(255,255,255,.035)}
.srch-gap .gk{font-size:12px;font-weight:650;color:var(--ink)}
.srch-gap .gw{font-size:11.5px;line-height:1.55;color:var(--ink3)}
@media(max-width:860px){
  .srch-gap{grid-template-columns:1fr;gap:3px}
}

/* Die Trefferliste erbt das Aussehen der Match-History — es ist dieselbe
   Zeile (historyRows), und table/th/td/.mrow-h/.drow sind in dash.css
   allgemein gesetzt. Nachzutragen ist nur, was dort an #hist hängt:
   die ganz leichte Sieg/Niederlage-Tönung. Ohne sie sähe dieselbe Zeile
   in zwei Tabellen verschieden aus.

   Ausdrücklich NICHT gesetzt wird hier `white-space` auf #srchtbl td:
   die Regel gewönne über `tr.drow>td{white-space:normal}` und legte das
   aufgeklappte Scoreboard auf eine einzige Zeile. */
#srchtbl tbody tr.mr-w>td{background-color:var(--rowwin)}
#srchtbl tbody tr.mr-l>td{background-color:var(--rowloss)}
/* Die drei Spalten ohne Wert werden gedämpft — sie sind leer, nicht kaputt.
   Der Grund steht in der Fußnote darunter. */
#srchtbl .lpna,#srchtbl .pill{opacity:.55}

/* ---- „Mehr laden" --------------------------------------------------
   Unter der Tabelle, mittig — dort hört die Liste auf, und dort entsteht
   die Frage, ob es noch mehr gibt.

   Der Satz daneben ist kein Kleingedrucktes: er sagt, was der Knopf
   KOSTET, bevor man ihn drückt (rund 21 Riot-Requests je Nachladung),
   und wenn die Besucherbremse greift, wie lange es noch dauert. Ein
   Knopf, der sich drücken lässt und dann 429 meldet, ist eine Falle. */
.srch-more{display:flex;align-items:center;justify-content:center;gap:14px;
  flex-wrap:wrap;margin-top:16px}
.srch-more[hidden]{display:none!important}
/* Ein abgeschalteter Knopf sieht flach aus statt erhaben — er ist kein
   Angebot mehr. Der Zeiger sagt es noch einmal. */
.srch-more .btn:disabled{opacity:.5;cursor:default;
  box-shadow:inset 2px 2px 6px var(--lo),inset -2px -2px 6px var(--hi)}
.srch-morenote{font-size:11px;line-height:1.55;color:var(--ink3);
  font-variant-numeric:tabular-nums;max-width:560px}
.srch-morenote:empty{display:none}

/* ---- Eingeklappt: „Was hier leer bleibt" ----------------------------
   Acht Absätze Begründung sind richtig und wichtig, aber sie sind das
   Letzte, wonach jemand sucht, der einen Spieler nachschlägt. Offen
   bleibt, was kurz ist; eingeklappt, was lang ist. Kein Aufklapper vor
   der Champion-Verteilung — der wäre ein Schritt zurück. */
.srch-fold>summary{cursor:pointer;list-style:none;display:flex;
  align-items:baseline;gap:12px;flex-wrap:wrap}
.srch-fold>summary::-webkit-details-marker{display:none}
.srch-fold>summary::after{content:"▾";margin-left:auto;color:var(--ink3);
  font-size:12px;transition:transform .15s}
.srch-fold[open]>summary::after{transform:rotate(180deg)}
.srch-fold>summary>span:first-child{font-size:15px;font-weight:700;color:var(--ink)}
.srch-fold>summary>.sub{font-size:11.5px;color:var(--ink3);line-height:1.5}
.srch-fold[open]>summary{margin-bottom:14px}

/* Fußnote. Sie sagt, WARUM drei Spalten leer sind — ohne sie sieht ein
   fehlender Wert wie ein Fehler aus. */
.srch-foot{margin-top:14px;font-size:11px;line-height:1.6;color:var(--ink3)}

/* Der leere Zustand ist ein eigener Zustand, kein Nichts. */
.srch-empty{padding:26px 18px;text-align:center;font-size:12.5px;color:var(--ink3);
  line-height:1.7}
/* „Keine Ranked-Spiele" ist der einzige leere Zustand mit einem Ausweg —
   und der steht hier als Knopf, nicht nur als Satz. */
.srch-empty .btn{display:block;margin:14px auto 0}