/* =====================================================================
   css/nacharbeit.css — der geführte Nacharbeits-Lauf (Paket P8,
   13.10.2026, docs/KURS-P8-NACHARBEIT-2026-10-13.md) und das Zeichen der
   Eigenschätzung unter Üben › Themen.

   Portal: nur --pp-Tokens, Schriftgrößen aus der Leiter, Abstände im
   4-px-Raster (verify-skala.js führt diese Datei in PORTAL). Präfix .nb-.
   Die Eigenschätzung ist NIE grün (S3: Grün nur für Gemessenes).
   ===================================================================== */

.nb-lauf { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 4px 16px 0; }
/* padding: .pp-modal-body hat seitlich 0 (jeder Dialog setzt seinen Rand selbst) — ohne ihn klebten Schrittliste, Fuß und „Weiter" am Dialogrand (WebKit-Abnahme 13.10.2026). */
.nb-rumpf { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 16px; min-width: 0; }
.nb-schritte { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.nb-sch {
  display: flex; align-items: flex-start; gap: 8px; text-align: left; min-width: 0;
  font: inherit; font-size: var(--pp-fs-klein); line-height: var(--pp-lh-eng);
  color: var(--pp-text-2); background: transparent; border: 1px solid transparent; border-radius: 6px;
  padding: 4px 8px; cursor: pointer;
}
.nb-sch:hover { background: var(--pp-accent-tint); color: var(--pp-text); }
.nb-sch.on { color: var(--pp-text); border-color: var(--pp-accent-line); font-weight: 600; box-shadow: inset 3px 0 0 var(--pp-accent); }
.nb-num {
  flex: none; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--pp-mono); font-size: var(--pp-fs-mini); border: 1px solid var(--pp-line);
}
.nb-sch.ok .nb-num { border-color: var(--pp-accent-line); }
.nb-name { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.nb-name small { font-weight: 400; font-size: var(--pp-fs-mini); color: var(--pp-text-2); }
.nb-koerper { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.nb-koerper .pp-h3 { margin: 0 0 4px; }
.nb-box {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0;
  border: 1px solid var(--pp-line); border-radius: 8px; padding: 8px 12px; background: var(--pp-surface);
}
.nb-box-t { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; font-size: var(--pp-fs-klein); line-height: var(--pp-lh-text); }
.nb-box-k { display: flex; flex-wrap: wrap; gap: 4px; }
.nb-marken { flex-direction: column; align-items: stretch; font-family: var(--pp-mono); font-size: var(--pp-fs-mini); }
.nb-vorschlag { cursor: pointer; }
.nb-vorschlag input { flex: none; }
/* Ein Knopf im Kasten bricht auf dem Telefon unter den Text, nie über den Rand. */
.nb-box-k .pp-btn { max-width: 100%; white-space: normal; }
.nb-cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.nb-leer { margin: 0; font-size: var(--pp-fs-klein); }
/* Die Themenwahl im Schritt „Einordnen" (VERANSTALTUNGEN-R4, p3 #8): volle
   Breite des Körpers, 44 px hoch — sie maß 433 × 21 px auf einem 390-px-
   Bildschirm (ein natives <select> ohne Erscheinungsbild überhört die Höhe
   in WebKit; Muster .pp-va-form select). */
.nb-wahl { display: flex; flex-direction: column; align-items: stretch; gap: var(--pp-sp-1); width: 100%; min-width: 0; font-size: var(--pp-fs-klein); }
.nb-wahl select {
  font: inherit; width: 100%; max-width: 100%; min-height: 44px; box-sizing: border-box; color: var(--pp-text); background-color: var(--pp-surface);
  border: 1px solid var(--pp-line-feld); border-radius: 8px; padding: var(--pp-sp-2) var(--pp-sp-8) var(--pp-sp-2) var(--pp-sp-3);
  -webkit-appearance: none; appearance: none; text-overflow: ellipsis;
  background-image: linear-gradient(45deg, transparent 50%, var(--pp-text-2) 50%), linear-gradient(135deg, var(--pp-text-2) 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.nb-cta:has(.nb-wahl) { display: block; }
.nb-eigen input { width: 100%; box-sizing: border-box; min-height: 44px; }
/* Schritt „Planen": die Zeile ist das Tippziel, das Kästchen größer (p3 #8: 12 × 12). */
.nb-vorschlag { min-height: 44px; }
.nb-vorschlag input { width: 20px; height: 20px; margin: 0; accent-color: var(--pp-accent); }
.nb-aufgaben { display: flex; flex-direction: column; gap: var(--pp-sp-2); }
.nb-aufgaben:empty { display: none; }
.nb-fuss-hinweis { margin: 0; font-size: var(--pp-fs-mini); }
.nb-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--pp-line); padding-top: 12px; }
.nb-fuss-knoepfe { display: flex; gap: 8px; margin-left: auto; }
.nb-msg:empty { display: none; }
/* Die drei Knöpfe der Einschätzung: gewählt als Rahmen und Gewicht — nie grün. */
.nb-w[aria-pressed="true"] { font-weight: 600; border-color: var(--pp-accent-line); box-shadow: inset 0 -2px 0 var(--pp-accent); }
.nb-w-wackelig[aria-pressed="true"] { color: var(--pp-warn); border-color: var(--pp-warn); box-shadow: none; }
.nb-w-nicht[aria-pressed="true"] { color: var(--pp-err); border-color: var(--pp-err); box-shadow: none; }

/* Das Zeichen unter Üben › Themen: eigene Form (Kreis-Glyphe statt Ampel-
   punkt), eigene Farbe — sitzt in der Textfarbe, nie grün. */
.nb-ns {
  flex: none; white-space: nowrap; font-size: var(--pp-fs-mini); line-height: var(--pp-lh-eng);
  color: var(--pp-text-2); border: 1px dashed var(--pp-line); border-radius: 999px; padding: 2px 8px;
}
.nb-ns-wackelig { color: var(--pp-warn); border-color: var(--pp-warn); }
.nb-ns-nicht { color: var(--pp-err); border-color: var(--pp-err); }

/* VORARBEIT (13.10.2026): der Lauf benutzt die Klassen oben unverändert;
   neu nur die Art „Vorbereiten" im Lernplan (Gegenstück zu .lp2-art-nb in
   css/prepp.css) und die Pille „vorbereitet ✓" der Jetzt-Leiste. */
.lp2-art-vb { color: var(--pp-accent-2); border-color: var(--pp-accent-line); }
.lp2-vb-ok { flex: none; white-space: nowrap; }

@media (max-width: 640px) {
  .nb-rumpf { grid-template-columns: minmax(0, 1fr); }
  .nb-schritte { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .nb-schritte::-webkit-scrollbar { display: none; }
  .nb-sch { flex: none; }
  .nb-name small { display: none; }
}
/* Handy-Schliff 13.10.2026 (docs/abnahme/handy-1013): Auf dem Telefon ist
   der Lauf ein Blatt am unteren Rand — „Weiter" stand im mittig gesetzten
   Dialog bei 390 × 844 auf halber Höhe (y = 533), sechsmal je Vorlesung
   gedrückt. Unten liegt er unter dem Daumen. Nur dieser Dialog: Er ist
   der einzige, durch den man Schritt für Schritt tippt. */
@media (max-width: 600px) {
  .pp-modal-bg:has(.nb-lauf) { align-items: flex-end; padding: 0; }
  .pp-modal:has(.nb-lauf) {
    max-height: 88vh; border-radius: 12px 12px 0 0; border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}
/* Die Schritte sind Tippziele (R3: 44 px; gemessen 30 px hoch). */
@media (pointer: coarse) {
  .nb-sch { min-height: 44px; align-items: center; }
}

/* ---- P9: Entwürfe aus der Vorlesung (docs/ENTWUERFE-P9-2026-10-13.md) ----
   Der Stand je ✎ in der Nacharbeit (kein Entwurf / wird erstellt /
   Entwurf · prüfen / übernommen) und die Marke „Entwurf · prüfen" der Zeile
   unter Üben — eine Pille wie .nb-ns. „prüfen" in der Warnfarbe (Grund zum
   Hinsehen, kein Fehler); übernommen bleibt ruhig, NIE grün (S3: grün nur
   für Gemessenes — eine übernommene Übung ist noch nicht gelöst). */
.nb-entwurf-stand, .pp-entwurf-marke {
  display: inline-block; white-space: nowrap; vertical-align: middle;
  font-size: var(--pp-fs-mini); line-height: var(--pp-lh-eng);
  color: var(--pp-text-2); border: 1px solid var(--pp-line); border-radius: 999px; padding: 2px 8px;
}
.nb-entwurf-stand.entwurf, .pp-entwurf-marke { color: var(--pp-warn); border-color: var(--pp-warn); background: var(--pp-warn-tint); }
.nb-entwurf-stand.laeuft { border-style: dashed; }
.nb-entwurf-stand.uebernommen { border-color: var(--pp-accent-line); }
.nb-entwurf-satz { font-size: var(--pp-fs-klein); }
.nb-entwurf-befund { display: block; margin-top: 4px; font-size: var(--pp-fs-mini); color: var(--pp-text-2); overflow-wrap: anywhere; }
.pp-entwurf-befunde { margin: 8px 0 0; padding-left: 20px; font-size: var(--pp-fs-klein); overflow-wrap: anywhere; }
/* Auf dem Telefon steht an einer Listenzeile nur „⋯" (css/listen.css,
   Handy-Schliff 13.10.). Ein ENTWURF ist die Ausnahme (Entscheidung Runde 5):
   Er wartet auf genau eine Entscheidung, also steht „Übernehmen" als Knopf an
   der Zeile (≥ 44 px); Verwerfen und der Rest bleiben im „⋯". Eine Klasse
   spezifischer als die Regel in listen.css (.pp-exam-row). */
@media (max-width: 600px) {
  .pp-list .pp-row.pp-exam-row > .pp-actions:has(> .pp-lmore) > [data-entwurf-akt="uebernehmen"] {
    display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap;
  }
}

/* vn1019 (docs/VN1019.md): der Routine-Block im Vorbereiten-/Nachbereiten-
   Dialog — ein Kasten (nb-box) mit dem To-do des Termins (Haken, Text,
   Zeit-Pille), seinen Anhängen und der Textzeile der Routine. */
.vn-routine { flex-direction: column; align-items: stretch; gap: 8px; }
/* fx1020-vorbereitung (Befund 6): Der Kopf des Kastens trägt aus .nb-box-t
   `flex: 1 1 200px` — in der SPALTE ist das eine Höhe: 200 px leere Fläche
   unter „Vorbereitungs-Routine vor jeder Vorlesung" (WebKit: Kasten 358 px
   ohne Inhalt). Im Kasten der Routine wächst der Kopf nicht. */
.vn-routine > .nb-box-t { flex: none; }
.vn-todo { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-radius: 8px; background: var(--pp-surface); box-shadow: inset 0 0 0 1px var(--pp-line); }
.vn-todo.ok .vn-todo-text { text-decoration: line-through; color: var(--pp-text-2); }
.vn-todo-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.vn-todo-text { font-weight: 600; }
.vn-chk { flex: none; }
.vn-anh-liste { display: flex; flex-direction: column; gap: 4px; }
.vn-anh { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: var(--pp-fs-klein); }
.vn-anh > span { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; }
/* W6 (Befund 4): Der Titel eines Anhangs ist der Knopf, der ihn öffnet
   (js/veranstaltungen.js vnTitelHtml) — er sieht aus wie ein Verweis, nimmt
   die Breite der Zeile, „Abhängen" bleibt daneben. Ohne Weg ein Text wie
   bisher. */
.vn-anh > .vn-anh-titel { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; text-align: left; }
button.vn-anh-titel {
  font: inherit; color: var(--pp-accent-2); background: transparent; border: 0; border-radius: 4px;
  padding: 2px 4px; margin: 0 -4px; cursor: pointer; line-height: var(--pp-lh-knapp);
}
button.vn-anh-titel:hover .vn-anh-name, button.vn-anh-titel:focus-visible .vn-anh-name { text-decoration: underline; }
button.vn-anh-titel:hover { background: var(--pp-accent-tint); }
@media (pointer: coarse) { button.vn-anh-titel { min-height: 44px; } }
.vn-inhalt-wahl { display: flex; flex-direction: column; gap: 4px; padding: 6px 8px; border-radius: 6px; background: var(--pp-surface-2); }