/*
  workspace-befehl.css — Gestaltung der Befehlszeile (Strg+K) und des Fokus-Modus (Logik: workspace-befehl.js).

  Kurzbeschreibung (für Laien): im Bento-Look (Ralph 24.10.2026): weiße Karte mit großer Rundung, Auswahl grau
  hinterlegt, Pillen und Knöpfe aus dem Bento-Baukasten (workspace-bento.css) — Hauptknopf schwarz, Ring grafit. Wirkt nur in der Bento-Ansicht (html.ws-bento) — die alte Ansicht bleibt,
  wie sie ist. Während eines Fokus (html.wbf-fokus-an) sind kurze Meldungen ausgeblendet.
*/
:root.ws-bento { --wbf-schatten: 0 24px 64px rgba(20, 20, 35, .18), 0 2px 8px rgba(20, 20, 35, .08); }

/* ── Befehlszeile ── Hintergrund durchsichtig (Festlegung: keine Abdunklung hinter Dialogen) */
.wbf-ebene { display: none; }
:root.ws-bento .wbf-ebene.an { display: flex; position: fixed; inset: 0; z-index: 400; justify-content: center; align-items: flex-start;
  padding: 12vh 16px 16px; box-sizing: border-box; background: var(--marke-abdunklung, transparent); }
.wbf-fenster { width: min(640px, 100%); max-height: min(560px, 76vh); display: flex; flex-direction: column; overflow: hidden;
  background: var(--wb-karte); border: 0; border-radius: var(--wb-r, 22px); box-shadow: var(--wbf-schatten), var(--wb-rand);
  font-family: var(--marke-schrift); color: var(--wb-text); animation: wbfRein .18s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes wbfRein { from { opacity: 0; transform: translateY(-6px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wbf-fenster { animation: none; } }

.wbf-fenster .wbf-kopf { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--wb-linie); color: var(--marke-text-2); flex: none; }
.wbf-eingabe { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 400 15px var(--marke-schrift); color: var(--marke-text); }
.wbf-eingabe::placeholder { color: var(--marke-text-3); }
.wbf-modus { flex: none; padding: 5px 12px; border-radius: var(--marke-r-pill); background: var(--wb-dunkel); color: #fff; font: 600 12px var(--marke-schrift); white-space: nowrap; }
.wbf-modus[hidden] { display: none; }
.wbf-taste, .wbf-fenster .wbf-fuss kbd, .wbf-punkt kbd { font: 600 11px var(--marke-schrift); color: var(--marke-text-2); background: var(--marke-flaeche-2);
  border: 1px solid var(--marke-linie); border-radius: var(--marke-r-s); padding: 2px 6px; }

.wbf-liste { overflow-y: auto; overflow-x: hidden; padding: 8px; flex: 1 1 auto; min-height: 0; }
.wbf-gruppe { padding: 12px 12px 4px; font: 600 11px var(--marke-schrift); letter-spacing: .08em; text-transform: uppercase; color: var(--marke-text-3); }
.wbf-punkt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 12px; min-height: 40px; box-sizing: border-box; border: 0;
  border-radius: var(--wb-r-k, 14px); background: none; color: var(--marke-text); font: 500 13px var(--marke-schrift); text-align: left; cursor: pointer; }
.wbf-punkt svg { flex: none; width: 16px; height: 16px; color: var(--marke-text-2); }
.wbf-punkt .wbf-titel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wbf-punkt small { margin-left: auto; flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--marke-text-3); font-size: 12px; font-weight: 400; }
.wbf-punkt kbd { margin-left: auto; flex: none; }
.wbf-punkt small + kbd { margin-left: 8px; }
.wbf-punkt.an { background: var(--wb-weich); }
.wbf-punkt.an svg { color: var(--wb-text); }
.wbf-leer { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 24px 12px; color: var(--marke-text-2); font-size: 13px; }
.wbf-leer.wbf-links { justify-content: flex-start; padding: 16px 12px; }
.wbf-leer.fehler, .wbf-status.fehler { color: var(--marke-gefahr); }

.wbf-fenster .wbf-fuss { display: flex; flex-wrap: wrap; gap: 16px; padding: 8px 20px; border-top: 1px solid var(--wb-linie); color: var(--marke-text-3); font-size: 12px; flex: none; }
.wbf-fenster .wbf-fuss span { display: inline-flex; align-items: center; gap: 4px; }

/* Bestätigen (Anlegen) */
.wbf-frage-box { display: grid; gap: 12px; padding: 12px; }
.wbf-gross { font: 600 15px var(--marke-schrift); }
.wbf-zitat { padding: 12px 16px; border-radius: var(--wb-r-k, 14px); background: var(--wb-weich); font-size: 14px; overflow-wrap: anywhere; }
.wbf-knoepfe { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.wbf-status { min-height: 16px; font-size: 12px; color: var(--marke-text-2); }

/* Dauer-Wahl im Fokus: Pillen aus dem Bento-Baukasten (.wb-pille, aktiv grafit) */
.wbf-dauer { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 12px 4px; }
.wbf-dauer small { color: var(--marke-text-3); font-size: 12px; margin-left: 4px; }

/* ── Fokus-Ebene ── schlicht über dem Workspace, Glas statt Abdunklung */
.wbf-fokus { display: none; }
:root.ws-bento.wbf-fokus-an .wbf-fokus:not([hidden]) { display: flex; position: fixed; inset: 0; z-index: 380; align-items: center; justify-content: center;
  padding: 16px; box-sizing: border-box; background: rgba(236, 238, 242, .72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
:root.ws-bento[data-theme="dark"].wbf-fokus-an .wbf-fokus:not([hidden]) { background: rgba(11, 11, 18, .78); }
.wbf-fokus-karte { width: min(480px, 100%); display: grid; justify-items: center; gap: 12px; padding: 24px; box-sizing: border-box; text-align: center;
  background: var(--wb-karte); border: 0; border-radius: var(--wb-r, 22px); box-shadow: var(--wbf-schatten), var(--wb-rand);
  font-family: var(--marke-schrift); color: var(--wb-text); }
.wbf-fokus-kopf { font: 600 11px var(--marke-schrift); letter-spacing: .08em; text-transform: uppercase; color: var(--marke-text-3); }
.wbf-fokus-titel { font: 600 20px var(--marke-schrift); line-height: 1.3; overflow-wrap: anywhere; text-wrap: balance; }
.wbf-ring { position: relative; width: min(220px, 60vw); aspect-ratio: 1; }
.wbf-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.wbf-ring circle { fill: none; stroke-width: 8; }
.wbf-ring-grund { stroke: var(--wb-weich); }
.wbf-ring-wert { stroke: var(--wb-dunkel); stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
/* marke-ausnahme: der Timer ist die eine Bühnen-Zahl der Fokus-Ebene — größer als die Werkzeug-Leiter (20 px) */
.wbf-zeit { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 700 48px var(--marke-schrift);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.wbf-zeit.um { font-size: 20px; color: var(--marke-ok); }
.wbf-fokus-info { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--marke-text-2); }
.wbf-fokus-karte .wbf-knoepfe { justify-content: center; }
.wbf-fokus-frage { font-size: 14px; color: var(--marke-text); text-wrap: balance; }

/* Während des Fokus: kurze Meldungen und Hinweis-Einblendungen stumm */
:root.wbf-fokus-an #toastWrap, :root.wbf-fokus-an #memToastWrap, :root.wbf-fokus-an .toast { display: none !important; }

@media (max-width: 560px) {
  :root.ws-bento .wbf-ebene.an { padding-top: 16px; }
  .wbf-fenster .wbf-fuss { display: none; }
  .wbf-punkt small { display: none; }
}