/* The one toast and the one confirm dialog (static/js/ylux-feedback.js),
   loaded by both apps and every page that loads that script.
   Exact palette only. Status is the leading mark's shape, not a colour.
   Both float above the page, so they re-pin the light token set: they must
   stay legible when the page itself is in dark mode. Fallbacks cover pages
   that don't import ylux-tokens.css. */

.ylux-fb-stack,
.ylux-fb-overlay {
  --fb-bg: #FAFAF8; --fb-bg2: #FFFFFF; --fb-subtle: #F4F2EE;
  --fb-text: #0A0A0A; --fb-text-s: #5C5854; --fb-text-m: #6E5F52;
  --fb-cap: #C4B5A8; --fb-cap-d: #A89880;
  --fb-border: rgba(10,10,10,.08); --fb-border-s: rgba(10,10,10,.14);
  font-family: var(--font-ui, 'Sofia Sans Semi Condensed', system-ui, sans-serif);
}

.ylux-fb-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Toast ─────────────────────────────────────────────────────────────── */
.ylux-fb-stack {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: var(--z-toast, 9500);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: calc(100vw - 32px);
  pointer-events: none;
}
.ylux-fb-stack:empty { display: none; }

.ylux-fb-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 240px;
  max-width: 440px;
  padding: 12px 12px 12px 14px;
  background: var(--fb-bg2);
  color: var(--fb-text);
  border: .5px solid var(--fb-border-s);
  border-radius: var(--r-box, 14px);
  box-shadow: var(--sh-float, 0 2px 4px rgba(110,95,82,.05), 0 18px 40px rgba(110,95,82,.10));
  font-size: var(--fs-small, 13px);
  line-height: 1.45;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-quick, 200ms) var(--ease, ease), transform var(--dur-quick, 200ms) var(--ease, ease);
}
.ylux-fb-toast.is-in { opacity: 1; transform: none; }
.ylux-fb-toast.is-out { opacity: 0; transform: translateY(4px); }

.ylux-fb-mark {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-top: 0;
}
.ylux-fb-ok .ylux-fb-mark { color: var(--fb-cap-d); }
.ylux-fb-err .ylux-fb-mark { color: var(--fb-text); }
.ylux-fb-info .ylux-fb-mark { color: var(--fb-text-m); }

.ylux-fb-body { flex: 1; min-width: 0; }
.ylux-fb-title { color: var(--fb-text); overflow-wrap: anywhere; }
.ylux-fb-err .ylux-fb-title { font-weight: 500; }
.ylux-fb-sub {
  margin-top: 2px;
  color: var(--fb-text-s);
  font-size: var(--fs-meta, 12px);
  overflow-wrap: anywhere;
  white-space: pre-line;
}

.ylux-fb-action {
  flex-shrink: 0;
  align-self: center;
  padding: 5px 12px;
  border: 0;
  border-radius: var(--r-pill, 999px);
  background: var(--fb-cap);
  color: var(--fb-text);
  font: inherit;
  font-size: var(--fs-label, 11px);
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
.ylux-fb-action:hover { background: var(--fb-cap-d); }

.ylux-fb-close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill, 999px);
  background: none;
  color: var(--fb-text-m);
  cursor: pointer;
}
.ylux-fb-close:hover { color: var(--fb-text); background: var(--fb-subtle); }

.ylux-fb-action:focus-visible,
.ylux-fb-close:focus-visible,
.ylux-fb-btn:focus-visible {
  outline: 1.5px solid var(--fb-cap-d);
  outline-offset: 2px;
}

/* Above the mobile bottom nav. */
@media (max-width: 768px) {
  .ylux-fb-stack { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .ylux-fb-toast { min-width: 0; width: calc(100vw - 32px); }
}

/* ── Confirm ───────────────────────────────────────────────────────────── */
.ylux-fb-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-top, 10000);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(250,250,248,.78);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity var(--dur-quick, 200ms) var(--ease, ease);
}
.ylux-fb-overlay.is-in { opacity: 1; }

.ylux-fb-dialog {
  width: 100%;
  max-width: 400px;
  padding: 28px 28px 22px;
  background: var(--fb-bg2);
  color: var(--fb-text);
  border: .5px solid var(--fb-border-s);
  border-radius: var(--r-box, 14px);
  box-shadow: var(--sh-overlay, 0 30px 60px rgba(110,95,82,.18));
  transform: translateY(6px);
  transition: transform var(--dur-quick, 200ms) var(--ease, ease);
}
.ylux-fb-overlay.is-in .ylux-fb-dialog { transform: none; }

.ylux-fb-dlg-title {
  margin: 0;
  font-family: var(--font-editorial, 'Bodoni Moda', Georgia, serif);
  font-size: var(--fs-lead, 18px);
  font-weight: 400;
  line-height: 1.35;
  color: var(--fb-text);
  overflow-wrap: anywhere;
}
.ylux-fb-dlg-sub {
  margin: 8px 0 0;
  font-size: var(--fs-small, 13px);
  line-height: 1.55;
  color: var(--fb-text-s);
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.ylux-fb-dlg-acts {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
}
.ylux-fb-btn {
  min-width: 96px;
  padding: 10px 20px;
  border-radius: var(--r-pill, 999px);
  font: inherit;
  font-size: var(--fs-label, 11px);
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}
.ylux-fb-btn-ok {
  background: var(--fb-cap);
  color: var(--fb-text);
  border: .5px solid var(--fb-cap);
}
.ylux-fb-btn-ok:hover { background: var(--fb-cap-d); border-color: var(--fb-cap-d); }
.ylux-fb-btn-cancel {
  background: none;
  color: var(--fb-text-s);
  border: .5px solid var(--fb-border-s);
}
.ylux-fb-btn-cancel:hover { color: var(--fb-text); border-color: var(--fb-text-m); }

@media (max-width: 480px) {
  .ylux-fb-dlg-acts { flex-direction: column-reverse; }
  .ylux-fb-btn { width: 100%; }
}

[dir="rtl"] .ylux-fb-toast,
[dir="rtl"] .ylux-fb-dialog { direction: rtl; text-align: right; }
[dir="rtl"] .ylux-fb-dlg-acts { justify-content: flex-start; }

@media (prefers-reduced-motion: reduce) {
  .ylux-fb-toast, .ylux-fb-overlay, .ylux-fb-dialog { transition: none !important; transform: none !important; }
}