/* ═══════════════════════════════════════════════════════════════════
   fs-today-widget.css · Welle 59.1 · Tages-Overlay als floating Pill
   Stil 1:1 wie der FAB-Mode-Pill (.fs-fab-mode-pill) — passt zum Desktop-FAB.
   Default: kompakte Pill unten links. Klick → Aufgaben fliegen von links rein.
   Erneuter Klick → Aufgaben fliegen nach links raus.
   Brand: Mona Sans / Inter / Geist Mono · Lime/Modus-Akzent · Hex 1/1.
   ═══════════════════════════════════════════════════════════════════ */

.fs-tw {
  --tw-acc: var(--fab-bg, var(--module-accent, var(--accent, #D8FF3C)));
  position: fixed;
  left: 24px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 26px);
  z-index: 9390;                 /* unter FAB (9510) + Timer-Modal, über Page */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  pointer-events: none;          /* Kinder re-aktivieren selektiv */
}

/* ── Dock · horizontale Reihe: „Heute"-Pill + Live-Timer nebeneinander (Welle 60) ── */
.fs-tw-dock {
  display: flex; flex-direction: row; align-items: center; gap: 10px;
  pointer-events: none;          /* Kinder (Pill + Timer) reaktivieren selbst */
}

/* ── Aufgaben-Liste (über der Pill, fliegt von links rein) ── */
.fs-tw-list {
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 296px;
  max-width: calc(100vw - 48px);
}
.fs-tw-list.is-open { pointer-events: auto; }

.fs-tw-sec {
  font-family: 'Geist Mono', monospace;
  font-size: 0.56rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--stone, #888); padding-left: 3px; margin-top: 2px;
  /* Sektions-Label selbst auch animiert */
  transform: translateX(-120%); opacity: 0;
  transition: transform .42s cubic-bezier(.22,.61,.36,1), opacity .3s ease;
  transition-delay: calc(var(--i, 0) * 0.055s);
}
.fs-tw-list.is-open .fs-tw-sec { transform: none; opacity: 1; }

/* Karte · fliegt von links rein/raus (staggered via --i) */
.fs-tw-card {
  position: relative;
  display: flex; gap: 9px; align-items: center;
  padding: 9px 40px 9px 11px;
  background: rgba(14, 14, 16, 0.93);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 13px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
  transform: translateX(-130%); opacity: 0;
  transition: transform .42s cubic-bezier(.22,.61,.36,1), opacity .3s ease, border-color .15s;
  transition-delay: calc(var(--i, 0) * 0.055s);
}
.fs-tw-list.is-open .fs-tw-card { transform: none; opacity: var(--op, 1); }
.fs-tw-card:hover { border-color: var(--tw-acc); }
/* Hover hebt das Auslaufen auf → entfernte Karte wird voll lesbar */
.fs-tw-list.is-open .fs-tw-card:hover { opacity: 1; }
.fs-tw-card--overdue { border-left: 3px solid #FF5C5C; }
.fs-tw-card--done { background: rgba(14,14,16,0.7); padding-right: 11px; }
.fs-tw-card--done .fs-tw-card-title { text-decoration: line-through; color: var(--stone, #999); font-weight: 500; }

.fs-tw-prio { flex-shrink: 0; width: 9px; height: 9px; aspect-ratio: 1/1; clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); background: var(--stone, #888); }
.fs-tw-prio--critical { background:#FF5C5C; } .fs-tw-prio--high { background:#FFA83C; } .fs-tw-prio--mid { background: var(--tw-acc); } .fs-tw-prio--low { background: var(--stone,#888); }
.fs-tw-done-ico { flex-shrink: 0; color: var(--tw-acc); display: inline-flex; }

.fs-tw-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.fs-tw-card-title { font-family: Inter, sans-serif; font-weight: 600; font-size: 0.83rem; line-height: 1.2; color: var(--paper, #f5f5f5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-tw-card-meta { font-family: 'Geist Mono', monospace; font-size: 0.62rem; letter-spacing: 0.03em; color: var(--stone, #999); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-tw-card-meta .fs-tw-od { color: #FF7A7A; }
/* Fälligkeits-Label (heute · morgen · in N Tagen · ohne Termin); overdue erbt das Rot oben */
.fs-tw-due { color: var(--tw-acc); font-weight: 600; }

/* Abhaken-Mini-Hex im Karten-Rand */
.fs-tw-check {
  position: absolute; top: 50%; right: 7px; transform: translateY(-50%);
  width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); border-radius: 8px;
  color: var(--stone, #999); cursor: pointer; transition: all .15s;
}
.fs-tw-check:hover { background: var(--tw-acc); border-color: var(--tw-acc); color: #0A0A0C; }
.fs-tw-card.is-checking { opacity: .3 !important; transform: translateX(14px) !important; }

/* ── Pill (Default-Zustand · 1:1 FAB-Mode-Pill-Optik) ── */
.fs-tw-pill {
  pointer-events: auto;
  display: none;                 /* via .is-visible eingeblendet */
  align-items: center;
  gap: 8px;
  padding: 6px 13px 6px 10px;
  background: rgba(10, 10, 12, 0.80);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.42);
  font-family: 'Geist Mono', monospace;
  font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--paper, #F5F6F7);
  white-space: nowrap; user-select: none; cursor: pointer;
  transition: border-color .2s, transform .16s, box-shadow .2s;
}
.fs-tw-pill.is-visible { display: inline-flex; }
.fs-tw-pill:hover { border-color: var(--tw-acc); transform: translateY(-1px); box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.fs-tw-pill:active { transform: scale(.96); }
.fs-tw-pill.is-open { border-color: rgba(255,255,255,.18); }

.fs-tw-pill-dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--tw-acc); color: var(--tw-acc);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), 0 0 7px 0 currentColor;
}
.fs-tw-pill-dot.is-overdue { background: #FF5C5C; color: #FF5C5C; animation: fs-tw-pulse 1.4s ease-in-out infinite; }
@keyframes fs-tw-pulse { 0%,100%{opacity:1} 50%{opacity:.45} }

.fs-tw-pill-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--tw-acc); color: #0A0A0C;
  border-radius: 999px; font-size: 0.58rem; font-weight: 700; letter-spacing: 0;
}
.fs-tw-pill-count.is-overdue { background: #FF5C5C; color: #fff; }
.fs-tw-pill-chev { display: inline-flex; color: var(--stone, #999); transition: transform .22s var(--ease-out, ease); }
.fs-tw-pill.is-open .fs-tw-pill-chev { transform: rotate(180deg); color: var(--tw-acc); }

/* ── Mobile: über der iOS-Tab-Bar ── */
@media (max-width: 768px) {
  .fs-tw { left: 14px; bottom: calc(env(safe-area-inset-bottom, 0px) + 78px); }
  .fs-tw-list { width: calc(100vw - 28px); }
  .fs-tw-check { width: 34px; height: 34px; }
  .fs-tw-card { padding-right: 46px; }
}