/* ═══════════════════════════════════════════════════════════════
   CLOTO CARDS — Cards, Buttons, Chips, Badges, Toast
   ═══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   CARD
   ══════════════════════════════════════════════════════════════ */

.fbw-card {
  position: relative;
  background: var(--cloto-surface-a50);
  border: 1px solid var(--cloto-teal-a10);
  border-radius: var(--radius-lg);
  padding: 0;
  flex-shrink: 0;              /* impedisce compressione in flex column */
  cursor: pointer;
  transition: transform var(--duration-normal) var(--ease-spring),
              box-shadow var(--cloto-duration) var(--cloto-ease),
              border-color var(--cloto-duration) var(--cloto-ease);
  overflow: hidden;
  box-shadow: var(--shadow-sm),
              0 4px 8px var(--cloto-black-a8);
  transform: translateY(0);
}

.fbw-card:hover {
  border-color: var(--cloto-teal-a20);
  box-shadow: 0 2px 6px var(--cloto-black-a15),
              var(--shadow-md),
              var(--shadow-glow-teal);
  transform: translateY(-1px);
}

body.fd-light .fbw-card {
  background: var(--cloto-white-a80);
  border-color: var(--cloto-surface-a8);
  box-shadow: var(--shadow-sm),
              0 4px 8px var(--cloto-black-a3);
}

body.fd-light .fbw-card:hover {
  border-color: var(--cloto-teal-a25);
  box-shadow: 0 2px 6px var(--cloto-black-a6),
              var(--shadow-md),
              var(--shadow-glow-teal);
}

body.fd-light .fbw-card.is-selected {
  border-color: var(--cloto-teal-a45);
  box-shadow: 0 2px 6px var(--cloto-black-a5),
              var(--shadow-md),
              var(--shadow-glow-teal);
}

body.fd-light .fbw-card-short,
body.fd-light .fbw-card-preview {
  color: #4a4a56;
}

body.fd-light .fbw-card-title {
  color: var(--cloto-text-100);
}

/* ── Card States ── */
.fbw-card.is-selected {
  border-color: var(--cloto-teal-a40);
  box-shadow: 0 2px 6px var(--cloto-black-a12),
              var(--shadow-md),
              0 0 14px var(--cloto-teal-a8);
  transform: translateY(-1px);
}

.fbw-card.is-editing {
  border-color: var(--cloto-teal-a30);
}

.fbw-card.is-ancestor {
  border-color: var(--cloto-teal-a15);
}

.fbw-card.is-dimmed {
  opacity: 0.4;
}

.fbw-card.is-dragging {
  opacity: 0.5;
  transform: scale(0.97);
}

.fbw-card.is-parent {
  border-color: var(--cloto-teal-a20);
}

.fbw-card.is-first {
  border-color: var(--cloto-gold-a25);
}

.fbw-card.is-concluded {
  border-color: var(--cloto-success-a20);
}

.fbw-card.is-promoted {
  border-color: var(--cloto-gold-a30);
  background: var(--cloto-gold-a4);
}

/* Peek state: spectator reading a card (subtle, not "selected") */
.fbw-card.is-peeking {
  border-color: var(--cloto-teal-a20);
  box-shadow: 0 0 10px var(--cloto-teal-a6);
}
.fbw-card.is-peeking .fbw-card-bar {
  background: var(--cloto-teal-a35);
}

.fbw-card.is-wizard-active,
.fbw-card.is-wizard-target {
  border-color: var(--cloto-gold);
  box-shadow:
    var(--shadow-sm),
    0 4px 8px var(--cloto-black-a8),
    var(--shadow-glow-gold);
  overflow: visible !important;
  position: relative;
  transform: none;
  animation: cloto-card-pulse 2.5s ease-in-out infinite;
}
@keyframes cloto-card-pulse {
  0%, 100% {
    border-color: var(--cloto-gold);
    box-shadow:
      var(--shadow-sm),
      0 4px 8px var(--cloto-black-a8),
      var(--shadow-glow-gold);
  }
  50% {
    border-color: var(--cloto-gold-light);
    box-shadow:
      var(--shadow-sm),
      0 4px 8px var(--cloto-black-a8),
      0 0 20px var(--cloto-gold-a30);
  }
}

/* Hide left bar on wizard-active card (border pulse is enough) */
.fbw-card.is-wizard-active .fbw-card-bar {
  display: none;
}

/* "Cloto" waiting label inside active card */
.fbw-card-cloto-wait {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0 var(--space-1);
  font-size: var(--cloto-fs-xs);
  color: var(--cloto-gold);
  letter-spacing: 0.04em;
}
.fbw-card-cloto-wait .cloto-wait-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cloto-gold);
  animation: cloto-session-pulse 1.5s ease-in-out infinite;
}

/* Drop targets */
.fbw-card.drop-before {
  border-top: 2px solid var(--cloto-teal);
}
.fbw-card.drop-after {
  border-bottom: 2px solid var(--cloto-teal);
}
.fbw-card.drop-forbidden {
  opacity: 0.3;
  cursor: not-allowed;
}

/* ── Card Bar (left accent) ── */
.fbw-card-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  background: transparent;
  transition: background var(--duration-normal) var(--ease-spring);
}

.fbw-card.is-selected .fbw-card-bar { background: var(--cloto-teal); }
.fbw-card.is-promoted .fbw-card-bar { background: var(--cloto-gold); }
.fbw-card.is-concluded .fbw-card-bar { background: var(--cloto-success); }
.fbw-card.is-first .fbw-card-bar { background: var(--cloto-gold); }

/* ── Zen Button (floating, hover only) ── */
.fbw-card-zen-float {
  position: absolute;
  top: 0.4em;
  right: 0.4em;
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-spring);
  z-index: 2;
}

.fbw-card:hover .fbw-card-zen-float,
.fbw-card.is-selected .fbw-card-zen-float {
  opacity: 1;
}

/* Card action buttons */
.fbw-card-editbtn,
.fbw-card-firstbtn,
.fbw-card-zenbtn,
.fbw-card-dupebtn,
.fbw-card-exportbtn,
.fbw-card-aigenbtn,
.fbw-card-aifbbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--cloto-text-40);
  font-size: 13px;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-spring);
}

.fbw-card-editbtn:hover,
.fbw-card-firstbtn:hover,
.fbw-card-dupebtn:hover,
.fbw-card-exportbtn:hover {
  color: var(--cloto-teal);
  background: var(--cloto-teal-a8);
}

.fbw-card-zenbtn:hover {
  color: var(--cloto-teal);
  background: var(--cloto-teal-a8);
}

.fbw-card-aigenbtn:hover,
.fbw-card-aifbbtn:hover {
  color: var(--cloto-gold);
  background: var(--cloto-gold-a8);
}

/* ── Card Title ── */
.fbw-card-title {
  margin: 0;
  padding: 0;
  padding-right: 2em;
  font-size: var(--cloto-fs-md);
  font-weight: 600;
  color: var(--cloto-text-100);
  line-height: 1.35;
  word-break: break-word;
}

/* ── Card Body / Short / Preview ── */
.fbw-card-body {
  padding: var(--space-2) var(--space-7) 0;
}


.fbw-card-short {
  margin-top: 0.25em;
  margin-bottom: 0;
  height: 4.65em;               /* 3 righe × 1.55 line-height — altezza fissa */
  font-size: var(--cloto-fs-sm);
  line-height: 1.55;
  color: var(--cloto-text-70);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.fbw-card-preview {
  padding: 0.7em 1em;
  font-size: var(--cloto-fs-sm);
  color: var(--cloto-text-70);
  transition: color 600ms ease-out;
}

/* ── Card Chips ── */
.fbw-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-7);
}

.fbw-card-chips-main {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3em;
}

.fbw-card-chips-edit {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ── Card Meta (all metadata grouped below) ── */
.fbw-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3em 0.5em;
  padding: 0 1em 0.6em;
  font-size: var(--cloto-fs-xs);
}

/* ── Card Meta (scene) ── */
.fbw-card-meta-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-7);
  font-size: var(--cloto-fs-xs);
  color: var(--cloto-text-25);
}

.fbw-card-meta-scene {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--cloto-fs-xs);
  color: var(--cloto-text-25);
}

.fbw-card-storydate-inline {
  font-size: var(--cloto-fs-xs);
  color: var(--cloto-text-25);
  font-family: var(--cloto-font-mono);
}

.fbw-card-luogo-select {
  font-size: var(--cloto-fs-xs);
  padding: var(--space-1) var(--space-4);
  min-height: 22px;
}

.fbw-card-characters-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-1) 0;
}

.fbw-char-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--cloto-fs-xs);
  color: var(--cloto-text-40);
}

.fbw-scene-label {
  font-size: var(--cloto-fs-xs);
  color: var(--cloto-text-25);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── Card Footer ── */
.fbw-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--cloto-teal-a4);
  gap: var(--space-2);
}

.fbw-card-footer-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-4);
  font-size: var(--cloto-fs-xs);
  color: var(--cloto-text-25);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-spring);
}

.fbw-card-footer-btn:hover {
  color: var(--cloto-text-70);
  background: var(--cloto-teal-a6);
}

.fbw-card-footer-btn-icon {
  font-size: 12px;
}

/* Conclude button */
.fbw-card-conclude-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-4);
  font-size: var(--cloto-fs-xs);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: transparent;
  transition: all var(--duration-normal) var(--ease-spring);
}

.fbw-card-conclude-btn.is-off {
  color: var(--cloto-text-25);
}
.fbw-card-conclude-btn.is-off:hover {
  color: var(--cloto-success);
  background: var(--cloto-success-a6);
}

.fbw-card-conclude-btn.is-on {
  color: var(--cloto-success);
}
.fbw-card-conclude-btn.is-on:hover {
  color: var(--cloto-text-40);
}

/* ── Card Edit ── */
.fbw-card-edit {
  padding: var(--space-5) var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.fbw-card-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-7) var(--space-5);
}

.fbw-card-buttons-row {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* ══════════════════════════════════════════════════════════════
   BADGES
   ══════════════════════════════════════════════════════════════ */

.fbw-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-4);
  font-size: var(--cloto-fs-xs);
  font-weight: 500;
  border-radius: var(--radius-full);
  background: var(--cloto-teal-a8);
  color: var(--cloto-teal);
  border: 1px solid var(--cloto-teal-a12);
  line-height: 1.4;
}

.fbw-badge-card {
  font-size: var(--cloto-fs-2xs);
  padding: 1px var(--space-3);
  color: var(--cloto-text-40);
  background: var(--cloto-teal-a4);
  border-color: var(--cloto-teal-a6);
}

.fbw-badge-fd {
  color: var(--cloto-gold);
  background: var(--cloto-gold-a8);
  border-color: var(--cloto-gold-a15);
}

.fbw-badge-discrete {
  font-size: var(--cloto-fs-2xs);
  padding: 1px var(--space-3);
  color: var(--cloto-text-25);
  background: transparent;
  border-color: transparent;
  font-family: var(--cloto-font-mono);
}

.fbw-impl-badge {
  font-size: var(--cloto-fs-2xs);
  padding: 1px var(--space-3);
  border-radius: var(--radius-full);
  background: var(--cloto-purple-a8);
  color: var(--cloto-purple);
  border: 1px solid var(--cloto-purple-a12);
}

.fbw-wizard-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-4);
  font-size: var(--cloto-fs-xs);
  border-radius: var(--radius-full);
  background: var(--cloto-gold-a8);
  color: var(--cloto-gold);
  border: 1px solid var(--cloto-gold-a15);
}

.fbw-level-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-4);
  font-size: var(--cloto-fs-2xs);
  font-weight: 600;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ══════════════════════════════════════════════════════════════
   BUTTON VARIANTS (fbw-btn-*)
   ══════════════════════════════════════════════════════════════ */

.fbw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-7);
  min-height: 32px;
  font-family: var(--cloto-font-body);
  font-size: var(--cloto-fs-sm);
  font-weight: 500;
  color: var(--cloto-text-70);
  background: transparent;
  border: 1px solid var(--cloto-glass-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-spring);
  white-space: nowrap;
}

.fbw-btn:hover {
  color: var(--cloto-text-100);
  border-color: var(--cloto-glass-border-hover);
  background: var(--cloto-teal-a4);
}

.fbw-btn:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}

/* Primary (teal) */
.fbw-btn-primary {
  color: var(--cloto-teal);
  background: var(--cloto-teal-a8);
  border-color: var(--cloto-teal-a25);
}
.fbw-btn-primary:hover {
  background: var(--cloto-teal-a15);
  border-color: var(--cloto-teal-a40);
  color: var(--cloto-teal-light);
}

/* Secondary */
.fbw-btn-secondary {
  color: var(--cloto-text-70);
  background: transparent;
  border-color: var(--cloto-glass-border);
}

/* AI (gold) */
.fbw-btn-ai {
  color: var(--cloto-gold);
  background: var(--cloto-gold-a8);
  border-color: var(--cloto-gold-a25);
}
.fbw-btn-ai:hover {
  background: var(--cloto-gold-a15);
  border-color: var(--cloto-gold-a40);
  color: var(--cloto-gold-light);
}

/* Danger */
.fbw-btn-danger {
  color: var(--cloto-danger);
  background: var(--cloto-danger-a6);
  border-color: var(--cloto-danger-a20);
}
.fbw-btn-danger:hover {
  background: var(--cloto-danger-a12);
  border-color: var(--cloto-danger-a35);
}

/* Ghost */
.fbw-btn-ghost {
  color: var(--cloto-text-70);
  background: transparent;
  border-color: transparent;
}
.fbw-btn-ghost:hover {
  color: var(--cloto-text-100);
  background: var(--cloto-teal-a4);
}

/* Export (purple) */
.fbw-btn-export {
  color: var(--cloto-purple);
  background: var(--cloto-purple-a6);
  border-color: var(--cloto-purple-a20);
}
.fbw-btn-export:hover {
  background: var(--cloto-purple-a12);
  border-color: var(--cloto-purple-a35);
}

/* Wizard */
.fbw-btn-wizard {
  color: var(--cloto-gold);
  background: var(--cloto-gold-a8);
  border-color: var(--cloto-gold-a20);
}
.fbw-btn-wizard:hover {
  background: var(--cloto-gold-a15);
  border-color: var(--cloto-gold-a35);
}

.fbw-btn-wizard-toggle {
  color: var(--cloto-gold);
  background: var(--cloto-gold-a6);
  border-color: var(--cloto-gold-a15);
}

/* Zen */
.fbw-btn-zen {
  color: var(--cloto-teal);
  background: var(--cloto-teal-a6);
  border-color: var(--cloto-teal-a15);
}
.fbw-btn-zen:hover {
  background: var(--cloto-teal-a12);
  border-color: var(--cloto-teal-a30);
}

.fbw-btn-zen-light {
  color: var(--cloto-text-70);
}

.fbw-btn-zen-icon {
  font-size: 16px;
}

/* Card button */
.fbw-btn-card {
  padding: var(--space-2) var(--space-5);
  min-height: 28px;
  font-size: var(--cloto-fs-xs);
}

/* FD (first draft) */
.fbw-btn-fd {
  color: var(--cloto-gold);
  background: var(--cloto-gold-a8);
  border-color: var(--cloto-gold-a20);
}

/* Saved state */
.fbw-btn-saved {
  color: var(--cloto-success);
  border-color: var(--cloto-success-a20);
}

/* ══════════════════════════════════════════════════════════════
   TABS (content tabs, not header)
   ══════════════════════════════════════════════════════════════ */

.fbw-ttabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--cloto-glass-border);
  padding: 0 var(--space-7);
}

.fbw-ttab {
  padding: var(--space-4) var(--space-6);
  font-size: var(--cloto-fs-sm);
  font-weight: 500;
  color: var(--cloto-text-40);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-spring);
}

.fbw-ttab:hover {
  color: var(--cloto-text-70);
}

.fbw-ttab.is-active {
  color: var(--cloto-teal);
  border-bottom-color: var(--cloto-teal);
}

/* ══════════════════════════════════════════════════════════════
   TOAST
   ══════════════════════════════════════════════════════════════ */

.fbw-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  z-index: var(--cloto-z-toast);
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-10);
  background: var(--cloto-surface);
  border: 1px solid var(--cloto-glass-border-hover);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  color: var(--cloto-text-100);
  font-size: var(--cloto-fs-sm);
  opacity: 0;
  transition: all var(--duration-slow) var(--ease-spring);
  pointer-events: none;
}

.fbw-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* ══════════════════════════════════════════════════════════════
   WIZARD PANEL (inline, inside outline)
   ══════════════════════════════════════════════════════════════ */

.fbw-wizard-panel {
  background: var(--cloto-gold-a4);
  border: 1px solid var(--cloto-gold-a15);
  border-radius: var(--radius-lg);
  margin: var(--space-4);
  overflow: hidden;
}

.fbw-wizard-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-7);
  border-bottom: 1px solid var(--cloto-gold-a10);
}

.fbw-wizard-panel-title {
  font-size: var(--cloto-fs-sm);
  font-weight: 600;
  color: var(--cloto-gold);
}

.fbw-wizard-panel-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--cloto-text-40);
  cursor: pointer;
}

.fbw-wizard-panel-body {
  padding: var(--space-6) var(--space-7);
}

.fbw-wizard-panel-footer {
  padding: var(--space-5) var(--space-7);
  border-top: 1px solid var(--cloto-gold-a10);
  display: flex;
  gap: var(--space-4);
}

.fbw-wizard-panel-progress {
  height: 3px;
  background: var(--cloto-gold-a10);
  border-radius: var(--radius-xs);
  overflow: hidden;
  margin-top: var(--space-3);
}

/* ── Wizard Mode State ── */
.fbw-wizard-mode .fbw-col {
  border-color: var(--cloto-gold-a8);
}

/* ══════════════════════════════════════════════════════════════
   DRAFT / OUTLINE / TREE
   ══════════════════════════════════════════════════════════════ */

.fbw-draft {
  display: flex;
  gap: 0;
  flex: 1 1 auto;
  min-height: 0;
}

.fbw-draft-left {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--cloto-glass-border);
}

.fbw-draft-right {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
}

.fbw-draft-editor,
.fbw-outline-editor {
  flex: 1 1 auto;
  min-height: 200px;
  padding: var(--space-8);
  font-size: var(--cloto-fs-md);
  line-height: 1.7;
  color: var(--cloto-text-100);
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  font-family: var(--cloto-font-body);
}

.fbw-outline-snapshot {
  padding: var(--space-8);
  line-height: 1.7;
  color: var(--cloto-text-70);
}

.fbw-outline-title {
  font-size: var(--cloto-fs-lg);
  font-weight: 600;
  color: var(--cloto-text-100);
  margin-bottom: var(--space-4);
}

.fbw-outline-body {
  line-height: 1.7;
  color: var(--cloto-text-70);
}

.fbw-outline-actions,
.fbw-draft-actions {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-8);
  border-top: 1px solid var(--cloto-glass-border);
  flex-shrink: 0;
}

.fbw-draft-count {
  font-size: var(--cloto-fs-xs);
  color: var(--cloto-text-25);
  font-family: var(--cloto-font-mono);
  padding: var(--space-2) var(--space-8);
}

.fbw-branch-wc {
  font-size: var(--cloto-fs-xs);
  color: var(--cloto-text-25);
  font-family: var(--cloto-font-mono);
}

.fbw-firstdraft-panel {
  padding: var(--space-8);
}

/* ── Tree ── */
.fbw-tree {
  padding: var(--space-4);
}

.fbw-tree-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  font-size: var(--cloto-fs-sm);
  color: var(--cloto-text-70);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--duration-normal) var(--ease-spring);
}

.fbw-tree-row:hover {
  background: var(--cloto-teal-a4);
}

.fbw-tree-handle {
  cursor: grab;
  color: var(--cloto-text-25);
}

/* ── Struct Anchor + Highlight ── */
.fbw-struct-anchor {
  color: var(--cloto-teal);
  cursor: pointer;
  text-decoration: none;
}

.fbw-anchor-link {
  color: var(--cloto-teal);
  cursor: pointer;
}

.fbw-anchor-highlight {
  background: var(--cloto-teal-a10);
  border-radius: var(--radius-xs);
  padding: var(--space-1) var(--space-2);
}

/* ── No Data ── */
.fbw-no-data,
.fbw-no-chars {
  padding: var(--space-8);
  text-align: center;
  color: var(--cloto-text-25);
  font-style: italic;
  font-size: var(--cloto-fs-sm);
}

/* ── Head Progress (inline) ── */
.fbw-head-progress {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* ══════════════════════════════════════════════════════════════
   LIGHT THEME — Card & Badge Overrides
   ══════════════════════════════════════════════════════════════ */

/* Light — badges more visible on white cards */
body.fd-light .fbw-badge {
  border-color: var(--cloto-surface-a10);
}

body.fd-light .fbw-badge-card {
  color: #5a5a66;
  background: rgba(94, 198, 198, 0.07);
  border-color: var(--cloto-teal-a12);
}

body.fd-light .fbw-badge-fd {
  color: #7a5d08;
  background: var(--cloto-gold-a12);
  border-color: rgba(201, 168, 76, 0.22);
}

body.fd-light .fbw-impl-badge {
  color: #6b46c1;
  background: rgba(107, 70, 193, 0.1);
  border-color: rgba(107, 70, 193, 0.18);
}

body.fd-light .fbw-btn-primary {
  color: var(--cloto-teal);
  background: var(--cloto-teal-a8);
  border-color: var(--cloto-teal-a25);
}

body.fd-light .fbw-btn-primary:hover {
  color: #14706e;
  background: rgba(94, 198, 198, 0.14);
}

/* Compound selectors to beat body.fd-light button.button (0,2,1) */
body.fd-light .button.fbw-btn-ai,
body.fd-light .fbw-btn-ai {
  color: #7a5d08;
  background: var(--cloto-gold-a10);
  border-color: rgba(201, 168, 76, 0.28);
}

body.fd-light .button.fbw-btn-ai:hover,
body.fd-light .fbw-btn-ai:hover {
  color: #5c4506;
  background: var(--cloto-gold-a18);
  border-color: var(--cloto-gold-a45);
  box-shadow: 0 2px 8px var(--cloto-gold-a10);
}

body.fd-light .button.fbw-btn-export,
body.fd-light .fbw-btn-export {
  color: #6b46c1;
  background: rgba(107, 70, 193, 0.07);
  border-color: rgba(107, 70, 193, 0.22);
}

body.fd-light .button.fbw-btn-export:hover,
body.fd-light .fbw-btn-export:hover {
  color: #553c9a;
  background: rgba(107, 70, 193, 0.14);
  border-color: rgba(107, 70, 193, 0.4);
  box-shadow: 0 2px 8px rgba(107, 70, 193, 0.08);
}

body.fd-light .button.fbw-btn-ghost,
body.fd-light .fbw-btn-ghost {
  color: #4a4a56;
  background: transparent;
  border-color: transparent;
}

body.fd-light .button.fbw-btn-ghost:hover,
body.fd-light .fbw-btn-ghost:hover {
  color: var(--cloto-text-100);
  background: var(--cloto-teal-a6);
  border-color: var(--cloto-teal-a15);
}

body.fd-light .button.fbw-btn-primary,
body.fd-light .fbw-btn-primary {
  color: var(--cloto-teal);
  background: var(--cloto-teal-a8);
  border-color: var(--cloto-teal-a30);
}

body.fd-light .button.fbw-btn-primary:hover,
body.fd-light .fbw-btn-primary:hover {
  color: #14706e;
  background: var(--cloto-teal-a15);
  border-color: var(--cloto-teal-a45);
  box-shadow: 0 2px 8px var(--cloto-teal-a10);
}

body.fd-light .button.fbw-btn-danger,
body.fd-light .fbw-btn-danger {
  color: #c53030;
  background: rgba(197, 48, 48, 0.06);
  border-color: rgba(197, 48, 48, 0.2);
}

body.fd-light .button.fbw-btn-danger:hover,
body.fd-light .fbw-btn-danger:hover {
  color: #9b2c2c;
  background: rgba(197, 48, 48, 0.12);
  border-color: rgba(197, 48, 48, 0.35);
  box-shadow: 0 2px 8px rgba(197, 48, 48, 0.08);
}

body.fd-light .fbw-btn-danger {
  color: #c53030;
  background: rgba(197, 48, 48, 0.06);
  border-color: rgba(197, 48, 48, 0.18);
}

body.fd-light .fbw-toast {
  background: rgba(255, 255, 255, 0.92);
  border-color: var(--cloto-teal-a15);
  color: #2a2c38;
}

body.fd-light .fbw-tab.is-active,
body.fd-light .fbw-ttab.is-active {
  color: var(--cloto-teal);
  border-bottom-color: var(--cloto-teal);
}

/* ══════════════════════════════════════════════════════════════
   CARD STATES V2 — Scoped under .fbw-outline-v2
   Three visual states: unselected, selected/peeking, wizard-active
   ══════════════════════════════════════════════════════════════ */

/* State A — Unselected (default)
   Surface is #1a1c28, so rgba(26,28,40,*) is invisible on it.
   Use white-tint to lift cards above surface. Override .is-dimmed base opacity.
   Dim through muted text, NOT container opacity or background alpha. */
.fbw-outline-v2 .fbw-card,
.fbw-outline-v2 .fbw-card.is-dimmed {
  opacity: 1;
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: var(--shadow-sm), 0 2px 6px var(--cloto-black-a12);
  transition: background 600ms ease-out,
              transform var(--duration-normal) var(--ease-spring),
              box-shadow var(--duration-normal) var(--ease-spring),
              border-color 600ms ease-out;
}

.fbw-outline-v2 .fbw-card .fbw-card-title {
  font-family: var(--cloto-font-brand);
  font-weight: 500;
  color: rgba(232, 230, 225, 0.55);
  transition: color var(--duration-normal) var(--ease-spring);
}

.fbw-outline-v2 .fbw-card:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--cloto-teal-a12);
}

.fbw-outline-v2 .fbw-card:hover .fbw-card-title {
  color: var(--cloto-text-70);
}

/* Kanban locked — cards non-interactive until first expansion completes */
.kanban-locked .fbw-card {
  pointer-events: none;
  cursor: default;
  opacity: 0.7;
}

/* State B — Selected / Peeking read-only */
.fbw-outline-v2 .fbw-card.is-selected,
.fbw-outline-v2 .fbw-card.is-peeking {
  background: var(--cloto-white-a8);
  border-color: rgba(232, 230, 225, 0.20);
  box-shadow: var(--shadow-sm), var(--shadow-md);
}

.fbw-outline-v2 .fbw-card.is-selected .fbw-card-title,
.fbw-outline-v2 .fbw-card.is-peeking .fbw-card-title {
  color: var(--cloto-text-100);
}

/* State C — Card in active wizard session */
.fbw-outline-v2 .fbw-card.is-wizard-active {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--cloto-teal);
  box-shadow: var(--shadow-sm), var(--shadow-glow-teal);
  animation: none;
}

.fbw-outline-v2 .fbw-card.is-wizard-active .fbw-card-title {
  color: var(--cloto-text-100);
}

/* Gold dot pulsante (::after) */
.fbw-outline-v2 .fbw-card.is-wizard-active::after {
  content: '';
  position: absolute;
  bottom: 6px;
  right: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cloto-gold);
  box-shadow: var(--shadow-glow-gold);
  animation: cloto-session-pulse 2s ease-in-out infinite;
}

/* State D — Ghost dot on next card during expansion reveal */
.fbw-outline-v2 .fbw-card.is-wizard-next::after {
  content: '';
  position: absolute;
  bottom: 6px;
  right: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cloto-gold);
  opacity: 0.3;
  animation: none;
}

/* ── Light theme V2 card states ── */
body.fd-light .fbw-outline-v2 .fbw-card,
body.fd-light .fbw-outline-v2 .fbw-card.is-dimmed {
  opacity: 1;
  background: var(--cloto-black-a3);
  border-color: var(--cloto-black-a6);
}

body.fd-light .fbw-outline-v2 .fbw-card:hover {
  background: var(--cloto-black-a5);
  border-color: var(--cloto-black-a10);
}

body.fd-light .fbw-outline-v2 .fbw-card.is-selected,
body.fd-light .fbw-outline-v2 .fbw-card.is-peeking {
  background: var(--cloto-black-a5);
  border-color: var(--cloto-black-a15);
}

body.fd-light .fbw-outline-v2 .fbw-card.is-wizard-active {
  background: var(--cloto-white-a80);
  border-color: var(--cloto-teal);
  box-shadow: var(--shadow-sm), var(--shadow-glow-teal);
}

body.fd-light .fbw-outline-v2 .fbw-card .fbw-card-title {
  color: var(--cloto-surface-a55);
}

body.fd-light .fbw-outline-v2 .fbw-card:hover .fbw-card-title {
  color: var(--cloto-text-70);
}