/* Spieltagsnavigation und die Ansicht des abgerechneten Spieltags.
 *
 * Eigene Datei und nicht in wettschein.css: Die entsteht aus index.html und
 * wird von build-plugin.php bei jedem Lauf neu geschrieben - alles von Hand
 * Ergaenzte waere danach weg. Farben und Masse kommen aus denselben
 * CSS-Variablen, damit beide Ansichten wie eine aussehen.
 */

/* ---------- Spieltagsnavigation ---------- */
.qlapp .qlnav{max-width:1240px;margin:14px auto 0;padding:0 20px;display:flex;gap:8px;flex-wrap:wrap}
.qlapp .qlnav-punkt{display:flex;align-items:baseline;gap:6px;text-decoration:none;
  border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:5px 13px;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.qlapp .qlnav-punkt b{font-family:var(--disp);font-size:14px;letter-spacing:0;color:var(--ink-2)}
.qlapp .qlnav-punkt:hover{border-color:var(--accent);color:var(--accent-2)}
.qlapp .qlnav-punkt.an{border-color:var(--accent);background:var(--accent-bg);color:var(--accent-2)}
.qlapp .qlnav-punkt.an b{color:var(--accent-2)}
/* Die Gesamtansicht gehoert zu keinem Spieltag - der Abstand sagt das, bevor
 * jemand den Text liest. */
.qlapp .qlnav-gesamt{margin-left:auto}
@media(max-width:640px){.qlapp .qlnav-gesamt{margin-left:0}}

.qlapp .banklab b.gut{color:var(--win)}
.qlapp .banklab b.schlecht{color:var(--loss)}

/* ---------- Abgerechnete Scheine ---------- */
.qlab .game.gewonnen{border-color:var(--win)}
.qlab .game.verloren{opacity:.72}
.qlab .ghead .einsatz{font-family:var(--mono);font-size:12.5px;color:var(--ink-3);white-space:nowrap}
.qlab .chip.gut{background:var(--win-bg);border-color:var(--win);color:var(--win);font-family:var(--mono);font-weight:600}
.qlab .chip.schlecht{background:var(--loss-bg);border-color:var(--loss);color:var(--loss);
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase}

.qlab .opts{padding:12px 16px;display:grid;gap:7px}
.qlab .leg u{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.qlab .leg .zeichen{font-family:var(--mono);font-weight:700;flex:none}
.qlab .leg.gewonnen u{color:var(--ink)}
.qlab .leg.gewonnen .zeichen{color:var(--win)}
.qlab .leg.verloren .zeichen{color:var(--loss)}
.qlab .leg .stand{font-family:var(--mono);font-size:11px;padding:1px 6px;border-radius:99px;
  background:var(--surface-2);color:var(--ink-2);flex:none}

/* ---------- Ergebnisliste ---------- */
.qlab .ergebnisse{background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.qlab .ergebnisse .zeile{display:grid;grid-template-columns:1fr 62px 1fr 52px;align-items:center;gap:10px;
  padding:9px 16px;border-bottom:1px solid var(--line);font-size:14px}
.qlab .ergebnisse .zeile:last-child{border-bottom:0}
.qlab .ergebnisse .heim{text-align:right}
.qlab .ergebnisse .stand{font-family:var(--mono);font-weight:600;font-size:15px;text-align:center;
  background:var(--surface-2);border-radius:6px;padding:3px 0}
.qlab .ergebnisse .halbzeit{font-family:var(--mono);font-size:11px;color:var(--ink-3);text-align:right}

/* ---------- Tabelle ---------- */
.qlab .rang{max-height:none}
.qlab .rzeile{display:grid;grid-template-columns:26px 1fr auto auto;align-items:center;gap:10px;
  padding:9px 16px;border-bottom:1px solid var(--line);font-size:13.5px}
.qlab .rzeile:last-child{border-bottom:0}
.qlab .rzeile.selbst{background:var(--accent-bg)}
.qlab .rzeile .platz{font-family:var(--mono);font-size:12px;color:var(--ink-3);text-align:right}
.qlab .rzeile .name{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qlab .rzeile .tag{font-family:var(--mono);font-size:11.5px}
.qlab .rzeile .tag.gut{color:var(--win)}
.qlab .rzeile .tag.schlecht{color:var(--ink-3)}
/* Das Vermoegen steht in der Spieltagstabelle nur zur Einordnung daneben - die
 * Reihenfolge macht der Spieltag, also gehoert ihm die kraeftige Spalte. */
.qlab .rzeile .gesamt{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.qlab .rzeile .konto{font-family:var(--mono);font-size:13.5px;font-weight:600;
  font-variant-numeric:tabular-nums;min-width:76px;text-align:right}
.qlab .rzeile .konto.gut{color:var(--win)}
.qlab .rzeile .konto.schlecht{color:var(--ink-3)}

@media(max-width:1040px){
.qlab .ergebnisse .zeile{grid-template-columns:1fr 58px 1fr;row-gap:0}
.qlab .ergebnisse .halbzeit{display:none}
}

/* ---------- Alle Tipps ---------- */
.qlab .tipps{display:grid;gap:8px}
.qlab .tipps details{background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.qlab .tipps details[open]{border-color:var(--line-2)}
.qlab .tipps summary{display:grid;grid-template-columns:26px 1fr auto auto;align-items:center;gap:12px;
  padding:11px 16px;cursor:pointer;list-style:none;font-size:14px}
.qlab .tipps summary::-webkit-details-marker{display:none}
.qlab .tipps summary:hover{background:var(--surface-2)}
.qlab .tipps summary .platz{font-family:var(--mono);font-size:12px;color:var(--ink-3);text-align:right}
.qlab .tipps summary .name{font-family:var(--disp);font-weight:600;font-size:16px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qlab .tipps summary .quote{font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.qlab .tipps summary .konto{font-family:var(--mono);font-size:14px;font-weight:600;
  font-variant-numeric:tabular-nums;min-width:82px;text-align:right}
.qlab .tipps summary .konto.gut{color:var(--win)}
.qlab .tipps summary .konto.schlecht{color:var(--ink-3)}
.qlab .tipps details[open] summary{border-bottom:1px solid var(--line);background:var(--surface-2)}
.qlab .tipps .games{padding:12px 16px;gap:10px}
.qlab .tipps .game{background:var(--paper)}

@media(max-width:640px){
.qlab .tipps summary{grid-template-columns:22px 1fr auto;row-gap:2px}
.qlab .tipps summary .quote{grid-column:2 / -1}
}

/* ---------- Gesamtansicht: Kurve ---------- */
/* Sieht aus wie .panel, ist aber keins: .panel klebt unter der Kopfleiste
 * (position:sticky), weil es im Wettschein in der schmalen Spalte neben den
 * Partien mitlaufen soll. Ueber die volle Breite gestellt bliebe das Diagramm
 * dagegen stehen, waehrend die Gesamttabelle darunter hochscrollt - und deren
 * stehende Spielerspalte laege dann mitten in der Kurve. */
.qlges .qlkurvenfeld{background:var(--surface);border:1px solid var(--line);border-radius:10px;
  box-shadow:var(--shadow);padding:16px 16px 12px}
.qlges .qlkurve{display:block;width:100%;height:auto;color:var(--ink-3);overflow:visible}
.qlges .qlkurve .netz{stroke:var(--line);stroke-width:1}
/* Die Nulllinie ist keine Gitterlinie unter vielen: An ihr entscheidet sich,
 * ob jemand ueber oder unter seinem Einsatz steht. */
.qlges .qlkurve .netz.null{stroke:var(--line-2);stroke-width:1.5}
.qlges .qlkurve .achse{fill:currentColor;font-family:var(--mono);font-size:13px}
.qlges .qlkurve .kurve{fill:none;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;opacity:.62}
.qlges .qlkurve .kurve.selbst{stroke-width:4;opacity:1}
.qlges .qlkurve .ecke{opacity:.62}
.qlges .qlkurve .ecke.selbst{opacity:1;stroke:var(--surface);stroke-width:2}

.qlges .qllegende{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px;
  padding-top:12px;border-top:1px solid var(--line)}
.qlges .qllegende span{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-2)}
.qlges .qllegende span.selbst{color:var(--ink);font-weight:600}
.qlges .qllegende i{width:14px;height:3px;border-radius:2px;flex:none}

/* ---------- Gesamtansicht: Tabelle ---------- */
/* Waagerecht scrollbar statt umbrechend: Bei 34 Spieltagen bekommt man die
 * Spalten nicht mehr auf einen Bildschirm, und ein Umbruch machte aus der
 * Tabelle eine Liste, in der sich nichts mehr vergleichen laesst. Der Name
 * bleibt beim Schieben stehen, sonst weiss man nicht mehr, wessen Zahlen man
 * gerade ansieht. */
.qlges .qlgtab{background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow-x:auto}
.qlges .qlgtab table{border-collapse:collapse;width:100%;font-size:13.5px}
.qlges .qlgtab th,.qlges .qlgtab td{padding:9px 14px;text-align:right;white-space:nowrap;
  border-bottom:1px solid var(--line)}
.qlges .qlgtab tbody tr:last-child th,.qlges .qlgtab tbody tr:last-child td{border-bottom:0}
.qlges .qlgtab thead th{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);font-weight:500;background:var(--surface-2)}
.qlges .qlgtab .spieler{position:sticky;left:0;z-index:1;text-align:left;
  background:var(--surface);box-shadow:1px 0 0 var(--line)}
.qlges .qlgtab thead .spieler{background:var(--surface-2)}
.qlges .qlgtab tbody tr.selbst .spieler,.qlges .qlgtab tbody tr.selbst td{background:var(--accent-bg)}
.qlges .qlgtab .spieler .platz{font-family:var(--mono);font-size:12px;color:var(--ink-3);
  display:inline-block;min-width:18px}
.qlges .qlgtab .spieler .name{font-weight:600}
.qlges .qlgtab .konto{font-family:var(--mono);font-weight:600;font-size:14px;
  font-variant-numeric:tabular-nums}
.qlges .qlgtab .num{font-family:var(--mono);color:var(--ink-3);font-variant-numeric:tabular-nums}
.qlges .qlgtab td.st{font-family:var(--mono);font-variant-numeric:tabular-nums;line-height:1.35}
.qlges .qlgtab td.st b{display:block;font-weight:500;color:var(--ink-2)}
.qlges .qlgtab td.st i{display:block;font-style:normal;font-size:11.5px}
.qlges .qlgtab td.st i.gut{color:var(--win)}
.qlges .qlgtab td.st i.schlecht{color:var(--ink-3)}
.qlges .qlgtab td.st i.aus{color:var(--ink-3);opacity:.7}

.qlges .qlfussnote{margin:14px 2px 0;font-size:13px;color:var(--ink-3);max-width:70ch}

@media(max-width:640px){
.qlges .qlgtab th,.qlges .qlgtab td{padding:8px 10px}
.qlges .qlkurve .achse{font-size:17px}
}