/* ==========================================================================
   CrewConfirm — Toast notifications (Ticket 15.0)
   Transient feedback, shared by the manager app shell and the public site.
   Tokens only (no hardcoded color), to match _components.css / site.css.
   Position: top-right on desktop; bottom safe-area on mobile so it never covers
   the bottom nav or primary CTAs. Colour is never the only signal — each type
   has its own icon + accent.
   ========================================================================== */

.cc-toasts {
  position: fixed; top: calc(var(--cc-topbar-h, 58px) + 12px); right: 16px;
  z-index: 1000; display: flex; flex-direction: column; gap: 10px;
  width: min(380px, calc(100vw - 32px)); pointer-events: none;
}
.cc-toasts__live { display: contents; }

.cc-toast {
  pointer-events: auto; display: flex; gap: 11px; align-items: flex-start;
  background: var(--cc-surface); border: 1px solid var(--cc-line);
  border-left: 4px solid var(--cc-ink-faint);
  border-radius: var(--cc-radius-md); box-shadow: var(--cc-shadow-pop);
  padding: 13px 14px; font-size: var(--cc-text-sm); color: var(--cc-ink);
  opacity: 0; transform: translateY(-8px) scale(0.98);
  transition: opacity .22s var(--cc-ease), transform .22s var(--cc-ease);
}
.cc-toast.is-in { opacity: 1; transform: none; }
.cc-toast.is-out { opacity: 0; transform: translateY(-8px) scale(0.98); }

.cc-toast__icon { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.cc-toast__icon svg { width: 20px; height: 20px; }
.cc-toast__body { flex: 1; min-width: 0; }
.cc-toast__title { font-weight: var(--cc-weight-semi); line-height: 1.35; }
.cc-toast__msg { color: var(--cc-ink-soft); margin-top: 2px; line-height: 1.4; }
.cc-toast__close {
  flex: none; background: none; border: 0; cursor: pointer; padding: 2px;
  margin: -2px -2px 0 0; color: var(--cc-ink-faint); border-radius: var(--cc-radius-sm);
  line-height: 0;
}
.cc-toast__close svg { width: 15px; height: 15px; }
.cc-toast__close:hover { color: var(--cc-ink); }
.cc-toast__close:focus-visible { outline: none; box-shadow: var(--cc-ring); }

/* per-type accent + icon colour (icon shape also differs — not colour-only) */
.cc-toast--success { border-left-color: var(--cc-ok); }
.cc-toast--success .cc-toast__icon { color: var(--cc-ok); }
.cc-toast--error   { border-left-color: var(--cc-risk); }
.cc-toast--error   .cc-toast__icon { color: var(--cc-risk); }
.cc-toast--warning { border-left-color: var(--cc-warn); }
.cc-toast--warning .cc-toast__icon { color: var(--cc-warn); }
.cc-toast--info    { border-left-color: var(--cc-brand); }
.cc-toast--info    .cc-toast__icon { color: var(--cc-brand); }

/* mobile: dock to the bottom safe area, above the bottom nav */
@media (max-width: 680px) {
  .cc-toasts {
    top: auto; bottom: calc(var(--cc-bottom-nav-h, 62px) + env(safe-area-inset-bottom, 0px) + 12px);
    left: 16px; right: 16px; width: auto;
  }
  .cc-toast { transform: translateY(8px) scale(0.98); }
  .cc-toast.is-in { transform: none; }
  .cc-toast.is-out { transform: translateY(8px) scale(0.98); }
}

@media (prefers-reduced-motion: reduce) {
  .cc-toast { transition: opacity .2s linear; transform: none !important; }
}

/* ---- Error pages (404 / 403 / 500) -------------------------------------
   Shared by both shells (manager + public), so styled here on tokens only —
   neither _components.css nor site.css is guaranteed on both. */
.cc-errpage { max-width: 480px; margin: 0 auto; text-align: center;
  padding: clamp(40px, 8vw, 80px) 16px; }
.cc-errpage__code { font-size: var(--cc-text-xs); font-weight: var(--cc-weight-semi);
  letter-spacing: .14em; text-transform: uppercase; color: var(--cc-ink-faint);
  margin: 0 0 var(--cc-space-3); }
.cc-errpage__title { font-family: var(--cc-font-display); font-weight: 500;
  font-size: clamp(1.6rem, 4vw, 2.2rem); line-height: 1.15; color: var(--cc-ink);
  letter-spacing: -.01em; margin: 0; }
.cc-errpage__body { font-size: var(--cc-text-base, 15px); color: var(--cc-ink-soft);
  line-height: 1.55; margin: var(--cc-space-3) auto 0; max-width: 40ch; }
.cc-errpage__actions { display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center; margin-top: var(--cc-space-6); }
.cc-errbtn { display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--cc-font); font-size: 0.95rem; font-weight: var(--cc-weight-semi);
  padding: 12px 22px; border-radius: var(--cc-radius-btn, 9px);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background .15s, border-color .15s, color .15s; }
.cc-errbtn--primary { background: var(--cc-brand); color: var(--cc-on-brand); }
.cc-errbtn--primary:hover { background: var(--cc-brand-strong); }
.cc-errbtn--secondary { background: var(--cc-surface); color: var(--cc-ink-soft);
  border-color: var(--cc-line); }
.cc-errbtn--secondary:hover { border-color: var(--cc-brand-soft); color: var(--cc-brand-strong); }
.cc-errbtn:focus-visible { outline: none; box-shadow: var(--cc-ring); }