/* ════════════════════════════════════════════════════════════════
 * formstube · Controlling · fs-burger-twin.css
 * Welle 268 v2 Step 2 · 2026-05-25 · Marc-Direktive
 * ════════════════════════════════════════════════════════════════
 * FAB-Twin Burger · Mobile-Sekundär-Nav mit der gleichen DNA wie
 * fs-fab-menu.css. Slide-In von rechts.
 *
 * Brand-Sprache (1:1 wie fs-fab-option):
 *   - Hex-Icons 40px mit Ink-Body + Lime-15%-Tint-Underlay
 *   - Mona-Sans-Bold (800) Title + Geist-Mono-uppercase Sub
 *   - Stagger-In von rechts + Reverse-Stagger Out
 *   - Charcoal-Card + Graphite-Border, Hover/Active → Lime-Border
 *
 * ⚠ ERSETZT die alte .mobile-nav-Markup. FAB selbst bleibt
 *   komplett unverändert (fs-fab-menu.css greift weiter).
 * ════════════════════════════════════════════════════════════════ */

/* ─── Backdrop · gleiche Blur-Sprache wie FAB ─────────────────── */
.bt-backdrop {
  position: fixed; inset: 0;
  background: rgba(10, 10, 12, 0);
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  transition: background 0.32s, backdrop-filter 0.32s;
  z-index: 9400; pointer-events: none;
}
.bt-backdrop.is-open {
  background: rgba(10, 10, 12, 0.62);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  pointer-events: auto;
}

/* ─── Drawer · Slide-In von rechts ────────────────────────────── */
.bt-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(380px, 88vw);
  background: var(--ink, #0A0A0C);
  border-left: 1px solid var(--accent, #D8FF3C);
  z-index: 9500; pointer-events: none;
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex; flex-direction: column;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  visibility: hidden;
}
.bt-drawer.is-open {
  transform: translateX(0);
  pointer-events: auto; visibility: visible;
  box-shadow: -20px 0 60px rgba(0,0,0,0.5);
}
.bt-drawer.is-closing { visibility: visible; pointer-events: none; }

/* ─── Drawer-Header ───────────────────────────────────────────── */
.bt-head {
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--graphite, #2A2C30);
  display: flex; align-items: center; gap: 12px;
  flex-shrink: 0;
}
.bt-head-marker {
  width: 24px; height: 24px;
  background: var(--accent, #D8FF3C);
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  flex-shrink: 0;
}
.bt-head-title {
  font-family: 'Mona Sans', sans-serif; font-weight: 900; font-stretch: 125%;
  font-size: 18px; color: var(--paper, #F0F0F0); flex: 1; line-height: 1; margin: 0;
}
.bt-head-title .dot { color: var(--accent, #D8FF3C); }
.bt-head-close {
  width: 36px; height: 36px; display: grid; place-items: center;
  color: var(--stone, #888); transition: color 0.15s;
  background: none; border: 0; cursor: pointer; padding: 0;
}
.bt-head-close:active { color: var(--accent, #D8FF3C); }

/* Cmd+K Quick-Trigger im Drawer-Header */
.bt-head-cmdk {
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 10px;
  background: rgba(216,255,60,0.06);
  border: 1px solid rgba(216,255,60,0.25);
  color: var(--accent, #D8FF3C);
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: .08em;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.12s;
  margin-right: 6px;
}
.bt-head-cmdk:hover {
  background: rgba(216,255,60,0.12);
  border-color: var(--accent, #D8FF3C);
}
.bt-head-cmdk:active { transform: translateY(1px); }
.bt-head-cmdk svg { opacity: .9; }

/* ─── Live-Search ─────────────────────────────────────────────── */
.bt-search {
  margin: 12px 14px 8px;
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--graphite, #2A2C30);
  padding: 12px 14px;
  min-height: 44px;
  transition: border-color 0.15s, background 0.15s;
}
.bt-search:focus-within {
  border-color: var(--accent, #D8FF3C);
  background: rgba(216,255,60,0.04);
}
.bt-search svg { color: var(--stone, #888); flex-shrink: 0; width: 18px; height: 18px; }
.bt-search input {
  flex: 1; background: none; border: 0;
  color: var(--paper, #F0F0F0);
  font-family: Inter, sans-serif;
  font-size: 15px; line-height: 1.2; outline: none; padding: 0;
  min-height: 20px;
}
.bt-search input::placeholder { color: var(--fg-mute, #6E6E72); }

/* ─── Scrollbarer Body ────────────────────────────────────────── */
.bt-body {
  flex: 1; overflow-y: auto;
  padding: 10px 14px 24px;
  -webkit-overflow-scrolling: touch;
}

/* ─── Section-Labels · gleiche Sprache wie fs-fab-option-sub ──── */
.bt-section {
  font-family: 'Geist Mono', monospace; font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--stone, #888);
  padding: 16px 4px 10px;
}
.bt-section:first-child { padding-top: 6px; }

/* ═══════════════════════════════════════════════════════════════
   ITEM · DNA-IDENTISCH zu .fs-fab-option
   ═══════════════════════════════════════════════════════════════ */
.bt-item {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px;
  background: var(--charcoal, #151517);
  border: 1px solid var(--graphite, #2A2C30);
  margin-bottom: 8px;
  text-decoration: none;
  color: var(--paper, #F0F0F0);
  opacity: 0;
  transform: translateX(20px) scale(0.96);
  transition: opacity 0.3s,
              transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.2s,
              background 0.15s;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
.bt-drawer.is-open .bt-item {
  opacity: 1; transform: none;
}
.bt-item:active {
  transform: scale(0.97);
  background: rgba(216,255,60,0.04);
  border-color: var(--accent, #D8FF3C);
}
.bt-item:hover, .bt-item:focus-visible {
  border-color: var(--accent, #D8FF3C);
  outline: none;
}
.bt-item.is-active {
  border-color: var(--accent, #D8FF3C);
  background: linear-gradient(90deg, rgba(216,255,60,0.06) 0%, var(--charcoal, #151517) 50%);
}

/* Stagger-Delays · 1-20 */
.bt-drawer.is-open .bt-item:nth-child(1)  { transition-delay: 0.06s; }
.bt-drawer.is-open .bt-item:nth-child(2)  { transition-delay: 0.09s; }
.bt-drawer.is-open .bt-item:nth-child(3)  { transition-delay: 0.12s; }
.bt-drawer.is-open .bt-item:nth-child(4)  { transition-delay: 0.15s; }
.bt-drawer.is-open .bt-item:nth-child(5)  { transition-delay: 0.18s; }
.bt-drawer.is-open .bt-item:nth-child(6)  { transition-delay: 0.21s; }
.bt-drawer.is-open .bt-item:nth-child(7)  { transition-delay: 0.24s; }
.bt-drawer.is-open .bt-item:nth-child(8)  { transition-delay: 0.27s; }
.bt-drawer.is-open .bt-item:nth-child(9)  { transition-delay: 0.30s; }
.bt-drawer.is-open .bt-item:nth-child(10) { transition-delay: 0.33s; }
.bt-drawer.is-open .bt-item:nth-child(11) { transition-delay: 0.36s; }
.bt-drawer.is-open .bt-item:nth-child(12) { transition-delay: 0.39s; }
.bt-drawer.is-open .bt-item:nth-child(13) { transition-delay: 0.42s; }
.bt-drawer.is-open .bt-item:nth-child(14) { transition-delay: 0.45s; }
.bt-drawer.is-open .bt-item:nth-child(15) { transition-delay: 0.48s; }
.bt-drawer.is-open .bt-item:nth-child(16) { transition-delay: 0.51s; }
.bt-drawer.is-open .bt-item:nth-child(17) { transition-delay: 0.54s; }
.bt-drawer.is-open .bt-item:nth-child(18) { transition-delay: 0.57s; }
.bt-drawer.is-open .bt-item:nth-child(19) { transition-delay: 0.60s; }
.bt-drawer.is-open .bt-item:nth-child(20) { transition-delay: 0.63s; }

/* Reverse-Stagger Close */
.bt-drawer.is-closing .bt-item {
  opacity: 0;
  transform: translateX(20px) scale(0.96);
}
.bt-drawer.is-closing .bt-item:nth-last-child(1)  { transition-delay: 0.00s; }
.bt-drawer.is-closing .bt-item:nth-last-child(2)  { transition-delay: 0.03s; }
.bt-drawer.is-closing .bt-item:nth-last-child(3)  { transition-delay: 0.06s; }
.bt-drawer.is-closing .bt-item:nth-last-child(4)  { transition-delay: 0.09s; }
.bt-drawer.is-closing .bt-item:nth-last-child(5)  { transition-delay: 0.12s; }
.bt-drawer.is-closing .bt-item:nth-last-child(6)  { transition-delay: 0.15s; }
.bt-drawer.is-closing .bt-item:nth-last-child(7)  { transition-delay: 0.18s; }
.bt-drawer.is-closing .bt-item:nth-last-child(8)  { transition-delay: 0.21s; }

/* ─── Hex-Icon · 1:1 wie fs-fab-option-icon ───────────────────── */
.bt-item-icon {
  flex: 0 0 40px; width: 40px; height: 40px;
  background: var(--ink, #0A0A0C);
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.bt-item-icon::before {
  content: '';
  position: absolute; inset: 2px;
  background: var(--accent, #D8FF3C);
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  opacity: 0.15;
  transition: opacity 0.2s;
}
.bt-item-icon svg {
  width: 18px; height: 18px;
  position: relative; z-index: 1;
  stroke: var(--accent, #D8FF3C);
  fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.bt-item.is-active .bt-item-icon::before { opacity: 0.35; }

/* ─── Label · 1:1 wie fs-fab-option-label ─────────────────────── */
.bt-item-label {
  display: flex; flex-direction: column; gap: 1px;
  flex: 1; min-width: 0;
}
.bt-item-title {
  font-family: 'Mona Sans', sans-serif;
  font-weight: 800; font-size: 14px;
  line-height: 1.15; color: var(--paper, #F0F0F0);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bt-item-sub {
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone, #888);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ─── Badges ──────────────────────────────────────────────────── */
.bt-item-badge {
  flex: 0 0 auto;
  font-family: 'Geist Mono', monospace; font-size: 9px;
  letter-spacing: 0.08em; padding: 2px 6px;
  background: var(--accent, #D8FF3C);
  color: var(--ink, #0A0A0C);
  font-weight: 700;
}
.bt-item-badge.is-warn { background: var(--warn, #FFB13C); }
.bt-item-badge.is-danger { background: #FF6B7A; color: var(--paper, #F0F0F0); }

/* ─── Chevron · 1:1 wie fs-fab-option-arrow ───────────────────── */
.bt-item-arrow {
  flex: 0 0 auto;
  color: var(--stone, #888); font-size: 18px;
  transition: color 0.2s, transform 0.2s;
}
.bt-item:active .bt-item-arrow,
.bt-item:hover .bt-item-arrow {
  color: var(--accent, #D8FF3C);
  transform: translateX(3px);
}

/* ─── User-Footer ─────────────────────────────────────────────── */
.bt-footer {
  border-top: 1px solid var(--graphite, #2A2C30);
  padding: 14px;
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,0.02);
  flex-shrink: 0;
}
.bt-footer-avatar {
  width: 32px; height: 32px;
  background: var(--accent, #D8FF3C);
  color: var(--ink, #0A0A0C);
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  display: grid; place-items: center;
  font-family: 'Mona Sans', sans-serif; font-weight: 900; font-stretch: 125%;
  font-size: 12px;
}
.bt-footer-name {
  font-family: 'Mona Sans', sans-serif; font-weight: 700; font-size: 13px;
  flex: 1; color: var(--paper, #F0F0F0);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bt-footer-logout {
  color: var(--fg-mute, #6E6E72);
  font-family: 'Geist Mono', monospace; font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 6px 8px; background: none; border: 0; cursor: pointer;
  transition: color 0.15s;
  text-decoration: none;
}
.bt-footer-logout:active { color: #FF6B7A; }

/* ─── Empty-State bei Suche ───────────────────────────────────── */
.bt-empty {
  padding: 40px 20px; text-align: center;
  color: var(--fg-mute, #6E6E72); font-size: 13px;
  display: none;
}
.bt-body.is-empty .bt-empty { display: block; }