/* fp-live.css — styles for fp-live.js (toasts, busy buttons, new-row tint, page transitions).
 * Motion: state only, one ease-out curve, <= 250 ms for UI; reduced motion keeps colour/opacity only. */

/* ── Toast stack: above the lower-left feedback pill (22 + 44 + 18 px) ─────── */
/* The server flash (#toast) is moved into the stack by fp-live.js; hidden meanwhile so it doesn't blink twice. */
html.fp-live #toast[data-fp-toast] { display: none; }   /* only when fp-live.js runs; else it stays visible */
.fp-toasts {
  position: fixed; left: 22px; bottom: var(--fp-toast-bottom, 84px); z-index: 9999;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  max-width: min(420px, calc(100vw - 44px)); pointer-events: none;
}
.fp-toast {
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 10px 9px 16px; min-height: 44px; box-sizing: border-box; border-radius: 12px; border: 1px solid transparent;
  font: 500 13px/1.45 var(--font-sans, 'Inter', system-ui, sans-serif);
  word-break: break-word; box-shadow: 0 12px 36px rgba(0,0,0,.45);
  opacity: 1; transform: translateY(0);
  transition: opacity 220ms var(--ease-brand, cubic-bezier(.22,1,.36,1)), transform 220ms var(--ease-brand, cubic-bezier(.22,1,.36,1));
}
@starting-style { .fp-toast { opacity: 0; transform: translateY(8px); } }
.fp-toast.is-leaving { opacity: 0; transform: translateY(4px); transition-duration: 150ms; }
.fp-toast.is-ok  { background: rgba(17,28,22,.97); border-color: rgba(74,222,128,.35); color: var(--ok, #4ade80); }
.fp-toast.is-err { background: rgba(28,17,17,.97); border-color: rgba(248,113,113,.35); color: var(--err, #f87171); }
.fp-toast-icon { flex: none; }
.fp-toast-msg { flex: 1 1 auto; color: var(--fg, #f2f2f2); }
.fp-toast-x {
  flex: none; margin: -8px -4px -8px 2px; width: 36px; min-height: 36px; height: 36px; padding: 0; border: 0; border-radius: 8px;
  background: none; color: inherit; font-size: 17px; line-height: 1; cursor: pointer; opacity: .65;
}
.fp-toast-x:hover { opacity: 1; background: rgba(255,255,255,.06); }
.fp-toast-x:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; opacity: 1; }
@media (max-width: 600px) {
  .fp-toasts { left: 16px; right: 16px; max-width: none; align-items: stretch; bottom: calc(var(--fp-toast-bottom, 84px) + env(safe-area-inset-bottom, 0px)); }
}

/* ── Busy submit button: acknowledged at once, spinner only if it takes a moment ── */
@keyframes fp-spin { to { transform: rotate(360deg); } }
@keyframes fp-appear { from { opacity: 0; } to { opacity: 1; } }
[data-fp-busy] { position: relative; cursor: progress; pointer-events: none; opacity: .8; }
[data-fp-busy] { -webkit-text-fill-color: transparent; transition: -webkit-text-fill-color 0s 180ms; }
[data-fp-busy] svg, [data-fp-busy] img { opacity: 0; transition: opacity 0s 180ms; }
[data-fp-busy]::after {
  content: ''; position: absolute; inset: 0; margin: auto; width: 14px; height: 14px; box-sizing: border-box;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: fp-appear 120ms var(--ease-brand, ease-out) 180ms both, fp-spin .7s linear infinite;
}

/* Auto-submitting controls (status selects, checkboxes) while their form is on the way */
form[aria-busy="true"] :is(select, input[type="checkbox"], input[type="radio"]) {
  opacity: .6; cursor: progress; transition: opacity 120ms 150ms;
}

/* ── New row / card after an in-place update ──────────────────────────────── */
@keyframes fp-new {
  from { box-shadow: inset 0 0 0 100vmax rgba(255,106,0,.12); }
  to   { box-shadow: inset 0 0 0 100vmax rgba(255,106,0,0); }
}
.fp-new:not(tr), tr.fp-new > td, tr.fp-new > th { animation: fp-new 1600ms var(--ease-brand, ease-out) both; }

/* ── Page-to-page navigation: quick content crossfade, header stays put ───── */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: fp-vt-out 90ms var(--ease-brand, ease-out) both; }
  ::view-transition-new(root) { animation: fp-vt-in 150ms var(--ease-brand, ease-out) both; }
  @keyframes fp-vt-out { to { opacity: 0; } }
  @keyframes fp-vt-in { from { opacity: 0; } }
}
body > header { view-transition-name: fp-header; }
::view-transition-group(fp-header), ::view-transition-old(fp-header), ::view-transition-new(fp-header) { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .fp-toast { transform: none !important; transition: opacity 150ms linear; }
  @starting-style { .fp-toast { opacity: 0; transform: none; } }
  [data-fp-busy]::after { animation: fp-appear 120ms linear 180ms both, fp-spin 1.6s linear infinite; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}