/*
 * Pubquiz-Abendplan: Tabelle im Editor (aufklappbarer Bereich „Abendplan“) und in der Vorschau der Abend-Karte.
 * Spec: docs/superpowers/specs/2026-10-18-pubquiz-abend-e3-design.md, A1. Aufbau: frontend/js/quizStage/planTable.js.
 * Keine Animation. Farben aus den Theme-Tokens (Kontrast ≥ 4,5:1): Text `--ink` auf `--bg-elev`, Rahmen `--line`.
 */

.pq-plan {
  min-width: 0;
  max-width: 100%;
  /* Die Tabelle scrollt im Rahmen; ihre Breite darf die Spalte des Editors (Raster) nicht über den Bildschirm weiten. */
  contain: inline-size;
  margin: 0.75rem 0;
  border: 1px solid var(--line, #6b7280);
  border-radius: 0.5rem;
  background: var(--bg-elev, #fff);
  color: var(--ink, #1a1d23);
}
.pq-plan__summary {
  min-height: 2.75rem;
  padding: 0.6rem 0.75rem;
  font-weight: 650;
  cursor: pointer;
  color: var(--ink, #1a1d23);
}
.pq-plan__host,
.pq-plan__problem,
.pq-plan__tools {
  margin: 0;
  padding: 0 0.75rem 0.75rem;
}
.pq-plan__problem:empty {
  display: none;
}
.pq-plan__problem {
  padding-bottom: 0.5rem;
  font-weight: 650;
  color: var(--ink, #1a1d23);
}

/* Tabelle in einem Rahmen, der in schmalen Feldern waagrecht scrollt (per Tastatur erreichbar). */
.pq-plan__body {
  min-width: 0;
  max-width: 100%;
}
.pq-plan__scroll {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line, #6b7280);
  border-radius: 0.5rem;
  background: var(--bg-elev, #fff);
}
.pq-plan__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  line-height: 1.4;
}
.pq-plan__caption {
  padding: 0.5rem 0.6rem;
  text-align: left;
  font-weight: 650;
  color: var(--ink, #1a1d23);
}
.pq-plan__body--compact .pq-plan__caption {
  /* Die Karte nennt den Abschnitt schon in der Überschrift: Beschriftung nur für Hilfstechnik. */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.pq-plan__table th,
.pq-plan__table td {
  padding: 0.35rem 0.6rem;
  border-top: 1px solid var(--line, #6b7280);
  vertical-align: top;
  text-align: left;
  color: var(--ink, #1a1d23);
}
.pq-plan__table thead th {
  font-weight: 650;
  background: var(--bg-soft, #e8ecf0);
}
.pq-plan__table tbody th {
  font-weight: 650;
  white-space: nowrap;
}
.pq-plan__cell--level,
.pq-plan__cell--points,
.pq-plan__cell--duration {
  white-space: nowrap;
}
.pq-plan__row--pause th,
.pq-plan__row--pause td {
  background: var(--bg-soft, #e8ecf0);
}
.pq-plan__total th,
.pq-plan__total td {
  font-weight: 650;
  border-top-width: 2px;
}
.pq-plan__notes {
  margin: 0.5rem 0 0;
  padding-left: 1.2rem;
  font-size: 0.95rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* Fragen-Gedächtnis: „Einige Fragen werden wiederholt.“ fällt durch Schrift auf, nicht nur durch Farbe. */
.pq-plan__repeat {
  font-weight: 600;
}

/* Knopf „Gelerntes zurücksetzen“ in der Zeile der Zwischenzeit. */
.pq-plan__gap-reset {
  margin-left: 0.5rem;
}

/* Werkzeuge unter der Tabelle: Startzeit, Pause einfügen, Kurve. */
.pq-plan__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1.25rem;
}
.pq-plan__tool {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem;
  min-width: 0;
}
.pq-plan__tools .field {
  margin: 0;
}

/* Pause in der Rundenliste. */
.qe-level--pause {
  border-style: dashed;
}