/* Variantenblock (_variants.html): in der Reportliste (aufgeklappt unter der Zeile) und in der Report-Ansicht über
   den Datenbank-Statistiken (_report_variants.html). Nur Design-Tokens; der Report bettet tokens.css ein, kennt aber
   die übrigen Regeln aus app.css nicht – darum hier auch .kind, .line und .muted für den Block. */
.var-block .kind { font-size: var(--svb-size-2xs); font-weight: var(--svb-weight-bold); letter-spacing: var(--svb-tracking-wide);
  color: var(--svb-color-text-muted); border: var(--svb-border-hairline) solid var(--svb-color-border);
  border-radius: var(--svb-radius-md); padding: 0 var(--svb-space-1); }
.var-block .line { color: var(--svb-color-text-muted); font-size: var(--svb-size-sm); }
.var-block .muted { color: var(--svb-color-text-muted); }
.var-block { border: var(--svb-border-hairline) solid var(--svb-color-border); border-radius: var(--svb-radius-md);
             background: var(--svb-color-surface); overflow: hidden; }
.var-head { display: flex; align-items: baseline; gap: var(--svb-space-3); padding: var(--svb-space-2) var(--svb-space-3);
            background: var(--svb-color-surface-sunken); border-bottom: var(--svb-border-hairline) solid var(--svb-color-border);
            font-size: var(--svb-size-sm); }
.var-head .muted { font-size: var(--svb-size-xs); }
/* Schalter „nur mit Report“: blendet Varianten ohne eigenen Report aus, Gruppen ganz ohne Report samt Überschrift */
.var-opt { display: inline-flex; align-items: center; gap: var(--svb-space-1);
            font-size: var(--svb-size-xs); color: var(--svb-color-text-muted); cursor: pointer; white-space: nowrap; }
.var-opt:first-of-type { margin-left: auto; }
/* Akzentfarbe wie app.css, das der Report nicht einbindet (sonst Browser-Blau) */
.var-opt input[type=checkbox] { accent-color: var(--svb-color-accent); }
/* Schalter „Bretter“: Raster aus Karten (Bewertung, Brett, Name, Züge, Link); Bretter zeichnet das Skript in
   variants.js aus data-fen. :where hält die Regeln schwächer als das Ausblenden der übrigen Schalter. */
.var-table .board { display: none; }
.var-block:has(.var-boards :checked) :where(.var-table) { display: block; }
.var-block:has(.var-boards :checked) :where(.var-table tbody) {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--svb-space-3);
  padding: var(--svb-space-3); }
.var-block:has(.var-boards :checked) :where(.var-table tbody + tbody) {
  border-top: var(--svb-border-hairline) solid var(--svb-color-border); }
.var-block:has(.var-boards :checked) :where(.var-table tr) { display: flex; flex-direction: column; gap: var(--svb-space-1); }
.var-block:has(.var-boards :checked) :where(.var-table td) { display: block; width: auto; padding: 0; border: none;
  text-align: left; white-space: normal; }
.var-block:has(.var-boards :checked) :where(.var-table .var-group) { grid-column: 1 / -1; }
.var-block:has(.var-boards :checked) :where(.var-table .var-group th) { display: inline; padding: 0; border: none; }
.var-block:has(.var-boards :checked) :where(.var-table .board) { display: block; }
.var-block:has(.var-boards :checked) .var-table td.deep:empty { display: none; }
.var-table .board .eval { display: block; font-family: var(--svb-font-mono); font-weight: var(--svb-weight-semibold);
  font-variant-numeric: tabular-nums; }
.var-table .eval.pos { color: var(--svb-ok); }
.var-table .eval.neg { color: var(--svb-error); }
.var-table .eval.eq { color: var(--svb-color-text-muted); }
.var-table .board svg { display: block; width: 100%; height: auto; border-radius: var(--svb-radius-sm); }
/* Schalter „ohne Namen“: nur die Zugfolgen */
.var-block:has(.var-names :checked) .var-table .name { display: none; }
.var-block:has(.var-only :checked) :is(tbody.no-report, tr:not([data-report], .var-group)) { display: none; }
.var-table { width: 100%; border-collapse: collapse; font-size: var(--svb-size-sm); }
.var-table td { padding: var(--svb-space-1) var(--svb-space-3); vertical-align: top;
                border-bottom: var(--svb-border-hairline) solid var(--svb-color-border-soft); }
.var-table tbody:last-child tr:last-child td { border-bottom: none; }
.var-table .name { width: 32%; }
/* Herkunft der Variante: Lichess oder eigener Report aus Zügen/FEN */
.var-table .src { width: 1%; white-space: nowrap; }
.var-table .num { text-align: right; white-space: nowrap; width: 1%; }
/* Aktionen „Report“ und „Neu“: Links in der Form der kleinen Knöpfe (button.small in page.css, z. B. ▶ unter Meisterpartien) */
.var-table a.act { display: inline-flex; align-items: center; gap: var(--svb-space-1); min-height: 1.6rem; padding: 0 var(--svb-space-2);
  font-size: var(--svb-size-xs); font-weight: var(--svb-weight-semibold); letter-spacing: var(--svb-tracking-wide);
  color: var(--svb-color-text); text-decoration: none; background: var(--svb-color-surface);
  border: var(--svb-border-hairline) solid var(--svb-color-border); border-radius: var(--svb-radius-md); transition: background .15s; }
.var-table a.act:hover { background: var(--svb-color-accent-bg); color: var(--svb-color-text); }
.var-table a.act .ico { width: 1.1em; height: 1.1em; flex: none; }
/* „aktuell“ statt des Knopfs: gleich hoch wie er (unsichtbarer Rand), sonst ändern sich die Zeilenhöhen beim Wechsel zwischen den Reports */
.var-table .act-cur { display: inline-flex; align-items: center; min-height: 1.6rem; padding: 0 var(--svb-space-2); font-size: var(--svb-size-xs);
  border: var(--svb-border-hairline) solid transparent; }
.var-table .var-group th { text-align: left; font-size: var(--svb-size-xs); font-weight: var(--svb-weight-semibold);
                          color: var(--svb-color-text); padding: var(--svb-space-2) var(--svb-space-3) var(--svb-space-1);
                          border-bottom: var(--svb-border-hairline) solid var(--svb-color-border-soft);
                          text-transform: none; letter-spacing: normal; }
.var-table .var-group .line, .var-table .var-group .num { font-weight: var(--svb-weight-normal); }
.var-table .var-group .num { color: var(--svb-color-text-muted); text-align: right; }
.var-table tbody + tbody .var-group th { border-top: var(--svb-border-hairline) solid var(--svb-color-border); }
.var-table .hit-row td { background: var(--svb-color-accent-bg); }
.var-table mark { background: var(--svb-warn-bg); color: inherit; border-radius: 2px; padding: 0 1px; }