/* ════════════════════════════════════════════════════════════════════════
   1337BOT Cockpit · core/fkit.css (Lane 0) — Ergänzungen für F-Kit, Sperren, Login, Leisten, Dialog.
   Grundformen der Felder (.f, .tgl, .stp, .inp, .f-err, .dep, .adv …) stehen in shell.css (Prototyp v21).
   Nur var(--…) — Farben stehen ausschließlich in core/tokens.css.
   ════════════════════════════════════════════════════════════════════════ */

/* Laden + Login */
.cp .cp-lade{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;color:var(--text-3);font:500 12px var(--mono);letter-spacing:.14em;text-transform:uppercase}
.cp .cp-login{min-height:100%;display:flex;align-items:center;justify-content:center;padding:24px 16px}
.cp .cp-login-k{width:min(400px,100%);border:1px solid var(--border);background:var(--surface);padding:24px;display:grid;gap:14px}
.cp .cp-login-k h1{font-size:22px}
.cp .cp-login-dc{min-height:44px;justify-content:center;font-size:15px;text-align:center}
.cp .cp-login-claim{margin:0;color:var(--text-2);font-size:14px;line-height:1.45}
.cp .cp-login-hilfe{margin:0;color:var(--text-2);font-size:14px;line-height:1.45}
.cp .cp-login-pw form{display:grid;gap:8px;margin-top:8px}
.cp .cp-login-alt{margin:0;font-size:13px;color:var(--text-3)}
.cp .cp-login-alt a{color:var(--text-2)}

/* Leiste oben (Wartung, Bot offline, kein Server) */
.cp .cp-leiste{padding:8px 24px;border-bottom:1px solid var(--border);border-left:2px solid var(--ash);background:var(--surface-2);font-size:13px;color:var(--text)}
.cp .cp-leiste.warn{border-left-color:var(--accent)}

/* Sperren: Karte sichtbar, Inhalt dahinter ruhig und nicht bedienbar (inert + disabled) */
.cp .lockcard.cp-an,.cp .offcard.cp-an{display:block}
/* 26.09.2026 (Fable L12): unter der Sperrkarte steht die Seite nur als Vorschau — grau und niedrig (kein Verlauf:
   Rahmenregel „genau ein Verlauf“), damit Tester die (inerte) Oberfläche nicht für bedienbar halten. */
.cp .cp-gesperrt{opacity:.4;filter:grayscale(1);max-height:420px;overflow:hidden;border-bottom:1px dashed var(--border-2)}
.cp .cp-leer{border:1px dashed var(--border-2);padding:20px 16px;margin:0 0 24px;text-align:center}
.cp .cp-leer p{margin:0 0 12px;color:var(--text-2);font-size:14px}
.cp .cp-leer p:last-child{margin:0}
.cp .item .cp-prem{margin-left:6px;font:600 9px var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--text-3);border:1px solid var(--border-2);padding:0 4px}

/* Felder */
.cp .f [disabled],.cp .f .tgl[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
/* Platzhalter (Patrick 22.09. + Rückholung Discord 23.09., beim Zusammenführen zu EINER Regel gemacht):
   LESBAR, nicht der blasse Browser-Standard. --text-3, nicht --text-4: die Kontrast-Tabelle in
   tools/check-hell-modus.mjs führt --text-4 nur in der Klasse „gross" (≥ 4,5:1 — großer Text, Kanten), ein
   Platzhalter ist aber normalgroßer Text (Klasse „text", ≥ 7:1). Beide Farbsätze geprüft (tokens.css).
   opacity:1, weil Firefox sonst zusätzlich abblendet. Kursiv trennt das Beispiel sichtbar von einem gesetzten
   Wert: ein Platzhalter darf nie wie ein Wert aussehen. Der Selektor deckt auch die Stepper-Zahlenfelder ab
   (.cp .stp input ist nicht .inp), sonst bliebe die Schwellen-Tabelle im Leveling ohne Beispielkurve. */
.cp .inp::placeholder,.cp .stp input::placeholder{color:var(--text-3);opacity:1;font-style:italic}
.cp select.sel.inp{appearance:auto;padding:0 8px}
.cp .f-err.cp-fz{margin-top:4px}
.cp .f-err .lnk{margin-left:4px}
.cp .tgl{touch-action:manipulation}
.cp .f .tgl{min-width:44px;min-height:24px}

/* Skelett beim Laden */
.cp .cp-sk-eb{width:120px;height:16px}
.cp .cp-sk-h{height:34px;width:30%;margin:6px 0 18px}

/* Kopf der Seite */
.cp .cp-kopf-eb{margin-bottom:4px}
.cp .content>.view{display:block;opacity:1;transform:none}

/* Konto-Bereich */
.cp .acct{flex-wrap:wrap}
.cp .cp-acct-n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp #logout{margin-left:auto}

/* Dialog (Bestätigung) */
.cp .cp-dialog{background:var(--surface);color:var(--text);border:1px solid var(--accent);padding:20px;width:min(440px,92vw)}
.cp .cp-dialog::backdrop{background:var(--scrim)}
.cp .cp-dialog-t{font-weight:600;margin:0 0 6px}
.cp .cp-dialog-x{margin:0 0 16px;color:var(--text-2);font-size:14px}
.cp .cp-dialog-f{display:flex;gap:8px;flex-wrap:wrap}

/* Palette: Gruppen-Titel */
.cp .pal #pallist{max-height:min(60vh,480px);overflow:auto}
.cp .pi:focus-visible{outline-offset:-2px}

/* Funktionszeile in der Detailspalte */
.cp #insp-lk:empty{display:none}
.cp #insp-lk{padding:12px 16px 0}
.cp #insp-lk .lockcard,.cp #insp-lk .offcard,.cp #insp-lk .fnbar{margin:0}

/* Darstellung: EIN Knopf in der Kopfleiste, Glühbirne und Mond deckungsgleich übereinander (24 px in 40 px, auf schmal 44 px).
   Sichtbar ist das Ziel: data-ziel="dunkel" (im Hellen) zeigt den Mond, data-ziel="hell" (im Dunkeln) die Glühbirne.
   Übergang: Überblendung 180 ms, unter prefers-reduced-motion ohne Bewegung. Keine Farbe außer currentColor. */
.cp .cp-thema{position:relative;width:40px;min-width:40px;min-height:40px;padding:0;justify-content:center;border:1px solid transparent}
.cp .cp-thema-ic{position:absolute;left:50%;top:50%;width:24px;height:24px;margin:-12px 0 0 -12px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity 180ms var(--ease)}
.cp .cp-thema[data-ziel="hell"] .cp-thema-ic--hell,.cp .cp-thema[data-ziel="dunkel"] .cp-thema-ic--dunkel{opacity:1}
.cp .cp-thema:hover{color:var(--text);background:var(--surface-2)}
@media (prefers-reduced-motion:reduce){.cp .cp-thema-ic{transition:none}}
@media (max-width:860px){.cp .cp-thema{width:44px;min-width:44px}}