/* ==========================================================================
   Seite „Punkte“ · Modul-Code PTS · id „points“ · Route #punkte
   Skript: public/js/pages/points.js

   Kennzahlen, Rangliste (Rang · Name · Balken relativ zu Platz 1 · Stand,
   Ausgenommene auf Wunsch ausgegraut mit Tag), Regeln in drei Gruppen
   (Nachricht, passiv, Ausgenommen) und die Chat-Befehle als Nachschlag.
   Jeder Selektor beginnt mit .page-points; der Anpassen-Dialog trägt
   page-points-dialog. Nur Tokens aus tokens.css.
   ========================================================================== */

/* ---------- Rangliste ------------------------------------------------------ */

.page-points .pts-board .tbl td { padding-block: 9px; }
.page-points .pts-rank {
  width: 64px;
  font: 400 12px/1.4 var(--f-mono);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "zero" 1, "tnum" 1;
}
.page-points .pts-board th.pts-rank { font: 500 10.5px/1.2 var(--f-mono); }

/* Stand mit Haarbalken: Anteil am Spitzenwert (wie A's XP-Balken) */
.page-points .pts-score { display: inline-flex; align-items: center; justify-content: flex-end; gap: 14px; }
.page-points .pts-bar {
  display: block;
  width: 88px;
  height: 3px;
  border-radius: 1px;
  background: var(--chart-track);
  overflow: hidden;
}
.page-points .pts-bar i { display: block; height: 100%; min-width: 1px; background: var(--ink-3); }
.page-points .pts-score__v { min-width: 7ch; text-align: right; }
.page-points .pts-board tr.is-lead .pts-bar i { background: var(--ink-2); }

/* Ausgenommene (Bots, eigene Liste): grau, ohne Platz und Balken, mit Tag */
.page-points .pts-who { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.page-points .pts-board tr.is-muted .cell-2__main,
.page-points .pts-board tr.is-muted td.num.strong { color: var(--ink-3); font-weight: 400; }
.page-points .pts-board tr.is-muted .tag { color: var(--ink-3); border-style: dashed; }

/* Pult-Taste „Ausgenommene anzeigen“ so hoch wie das Suchfeld daneben */
.page-points .pts-board .pnl__actions .key { height: 30px; }

.page-points .pts-more { justify-content: space-between; align-items: center; }
.page-points .pts-more__note { font: 400 11.5px/1 var(--f-mono); color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ---------- Regeln ---------------------------------------------------------- */

.page-points .pts-group {
  display: grid;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 14px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
}
.page-points .pts-group legend { float: left; width: 100%; padding: 0; margin-bottom: 2px; color: var(--ink-2); }
.page-points .pts-group legend + * { clear: both; }

/* Ausgenommen: Bot-Schalter mit aufklappbarer Liste, eigene Logins */
.page-points .pts-ignore__bots { display: grid; gap: 8px; min-width: 0; }
.page-points .pts-ignore__bots > .field__hint { margin: 0; }
.page-points .pts-bots summary {
  width: fit-content;
  list-style: none;
  cursor: pointer;
  font: 500 11.5px/1.4 var(--f-mono);
  color: var(--ink-3);
}
.page-points .pts-bots summary::-webkit-details-marker { display: none; }
.page-points .pts-bots summary::before { content: '+ '; }
.page-points .pts-bots[open] summary::before { content: '− '; }
.page-points .pts-bots summary:hover { color: var(--ink); }
.page-points .pts-bots__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(144px, 1fr));
  gap: 2px 14px;
  margin: 8px 0 0;
  padding: 10px 12px;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--r1);
  background: var(--void);
  font: 400 11.5px/1.6 var(--f-mono);
  color: var(--ink-2);
}
.page-points .pts-bots__list li { min-width: 0; overflow-wrap: anywhere; }
.page-points .pts-bots.is-off .pts-bots__list { color: var(--ink-3); }
.page-points .pts-bots > .field__hint { display: block; margin: 6px 0 0; }
.page-points .pts-ignore textarea[aria-invalid="true"] { border-color: var(--red); }

/* ---------- Dialog: Vorschau des neuen Stands ------------------------------------- */

.page-points-dialog .pts-result {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r1);
  background: var(--void);
}
.page-points-dialog .seg { justify-self: start; }
.page-points-dialog .pts-result__v { font: 500 13px/1.3 var(--f-mono); color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---------- Schmal ------------------------------------------------------------------ */

@media (max-width: 720px) {
  /* Zahlenfelder bleiben paarweise nebeneinander – sie sind kurz */
  .page-points .pts-group .fields--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

@media (max-width: 560px) {
  .page-points .pts-board .pnl__actions { width: 100%; margin-left: 0; }
  .page-points .pts-board .pnl__actions .search { flex: 1 1 auto; }
  .page-points .pts-bots__list { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
  .page-points .pts-bar { display: none; }
  .page-points .pts-rank { width: 44px; }
  .page-points .pts-board .tbl th,
  .page-points .pts-board .tbl td { padding-inline: 10px; }
  /* „Anpassen“ als Icon-Taste; der Name bleibt für Screenreader erhalten */
  .page-points .cell-actions .btn { width: var(--ctl-h-sm); padding: 0; }
  .page-points .cell-actions .btn-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}