/* ──────────────────────────────────────────────────────────────────────────
   Caboo feedback system — app-wide. Three surfaces, one vocabulary:
   1. Toasts (.fb-toasts / .fb-toast)         — transient, global, bottom-center
   2. Inline field errors (.fb-err + .fb-invalid) — client validation, blocking
   3. Contextual notices (.fb-notice)         — server failure tied to a step
   Warm tokens with explicit fallbacks so it renders on any page (cache-proof).
   ────────────────────────────────────────────────────────────────────────── */

:root {
  --fb-coral: var(--coral, #f8836b);
  --fb-coral-ink: var(--coral-ink, #d8492c);
  --fb-coral-tint: rgba(248, 131, 107, .14);
  --fb-ok-ink: var(--ok-ink, #4f6a39);
  --fb-ok-tint: var(--ok-tint, #eceee8);
  --fb-espresso: var(--espresso, #43301f);
  --fb-mute: var(--head-mute, #b8aea3);
  --fb-body: #6b5e51;
  --fb-rule: var(--rule, rgba(26, 22, 19, .12));
  --fb-card-shadow: 0 14px 36px -14px rgba(26, 22, 19, .34), 0 2px 8px rgba(26, 22, 19, .05);
  --fb-ease: cubic-bezier(.22, 1, .36, 1); /* ease-out-quint */
}

/* ── 1. Toasts ─────────────────────────────────────────────────────────── */
.fb-toasts {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 2147483000;
  display: flex;
  flex-direction: column-reverse; /* newest nearest the bottom edge */
  align-items: stretch;
  gap: 10px;
  width: min(420px, calc(100vw - 32px));
  pointer-events: none;
}
.fb-toast {
  pointer-events: auto;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 14px 14px 14px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--fb-rule);
  box-shadow: var(--fb-card-shadow);
  font-family: var(--font-body, "Geist", system-ui, sans-serif);
  overflow: hidden;
  animation: fb-toast-in .34s var(--fb-ease) both;
}
.fb-toast--out { animation: fb-toast-out .2s ease-in both; }

@keyframes fb-toast-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes fb-toast-out { to { opacity: 0; transform: translateY(8px); } }

.fb-toast__icon {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 9px;
  margin-top: 1px;
}
.fb-toast__icon svg { width: 18px; height: 18px; display: block; }
.fb-toast--success .fb-toast__icon { background: var(--fb-ok-tint); color: var(--fb-ok-ink); }
.fb-toast--error   .fb-toast__icon { background: var(--fb-coral-tint); color: var(--fb-coral-ink); }
.fb-toast--info    .fb-toast__icon { background: rgba(26, 22, 19, .06); color: var(--fb-espresso); }
.fb-toast--loading .fb-toast__icon { background: rgba(26, 22, 19, .05); color: var(--fb-mute); }
.fb-toast--loading .fb-toast__icon svg { animation: fb-spin .7s linear infinite; }
@keyframes fb-spin { to { transform: rotate(360deg); } }

.fb-toast__body { flex: 1 1 auto; min-width: 0; padding-top: 2px; }
.fb-toast__title { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--fb-espresso); }
.fb-toast__msg { margin: 2px 0 0; font-size: 13px; line-height: 1.45; color: var(--fb-body); }
.fb-toast__action {
  flex: 0 0 auto;
  align-self: center;
  appearance: none; border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600;
  color: var(--fb-coral-ink);
  padding: 6px 10px; border-radius: 9px;
  transition: background .15s var(--fb-ease);
}
.fb-toast__action:hover { background: var(--fb-coral-tint); }
.fb-toast__close {
  flex: 0 0 auto;
  appearance: none; border: 0; background: none; cursor: pointer;
  width: 26px; height: 26px; margin: -3px -3px 0 0;
  display: grid; place-items: center; border-radius: 7px;
  color: var(--fb-mute);
  transition: background .15s var(--fb-ease), color .15s var(--fb-ease);
}
.fb-toast__close:hover { background: rgba(26, 22, 19, .06); color: var(--fb-espresso); }
.fb-toast__close svg { width: 15px; height: 15px; }
.fb-toast__bar {
  position: absolute; left: 0; bottom: 0; height: 2px;
  width: 100%; transform-origin: left;
  background: currentColor; opacity: .5;
  animation: fb-bar var(--fb-dur, 5000ms) linear forwards;
}
.fb-toast--success .fb-toast__bar { color: var(--fb-ok-ink); }
.fb-toast--error   .fb-toast__bar { color: var(--fb-coral-ink); }
.fb-toast--info    .fb-toast__bar { color: var(--fb-espresso); }
.fb-toast:hover .fb-toast__bar { animation-play-state: paused; }
@keyframes fb-bar { to { transform: scaleX(0); } }

/* ── 2. Inline field errors ────────────────────────────────────────────── */
.fb-invalid input,
.fb-invalid .dropdown__trigger,
input.fb-invalid,
.fb-invalid.acc-input {
  border-color: var(--fb-coral-ink) !important;
  box-shadow: 0 0 0 3px var(--fb-coral-tint);
}
.fb-err {
  display: flex; align-items: flex-start; gap: 6px;
  margin: 7px 2px 0;
  font-family: var(--font-body, "Geist", system-ui, sans-serif);
  font-size: 12.5px; line-height: 1.4; font-weight: 500;
  color: var(--fb-coral-ink);
  animation: fb-err-in .2s var(--fb-ease) both;
}
.fb-err svg { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 1px; }
@keyframes fb-err-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

/* ── 3. Contextual notices ─────────────────────────────────────────────── */
.fb-notice {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 13px 15px; border-radius: 13px;
  font-family: var(--font-body, "Geist", system-ui, sans-serif);
  background: rgba(26, 22, 19, .04);
  border: 1px solid var(--fb-rule);
  animation: fb-err-in .24s var(--fb-ease) both;
}
.fb-notice--error { background: var(--fb-coral-tint); border-color: rgba(216, 73, 44, .22); }
.fb-notice__icon { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; color: var(--fb-mute); }
.fb-notice--error .fb-notice__icon { color: var(--fb-coral-ink); }
.fb-notice__body { flex: 1 1 auto; min-width: 0; }
.fb-notice__title { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--fb-espresso); }
.fb-notice__msg { margin: 2px 0 0; font-size: 13px; line-height: 1.45; color: var(--fb-body); }
.fb-notice__retry {
  flex: 0 0 auto; align-self: center;
  appearance: none; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600;
  color: var(--fb-coral-ink); background: #fff;
  border: 1px solid rgba(216, 73, 44, .3); border-radius: 9px;
  padding: 7px 13px;
  transition: background .15s var(--fb-ease);
}
.fb-notice__retry:hover { background: var(--fb-coral-tint); }

@media (prefers-reduced-motion: reduce) {
  .fb-toast, .fb-toast--out, .fb-err, .fb-notice { animation: none; }
  .fb-toast__bar { animation: fb-bar var(--fb-dur, 5000ms) linear forwards; } /* keep the timer, drop motion elsewhere */
  .fb-toast--loading .fb-toast__icon svg { animation: fb-spin .7s linear infinite; }
}