/* Field Ops v2 components: feedback (toast, skeleton, busy overlay, progress, result takeover). Tokens only. */

/* Toast host: top, under the safe area. Built by js/components.js (textContent only). */
/* v3, per platform. iPhone has no system toast: the nearest native pattern is the top status capsule (Copied, AirPods), so it drops from under
   the Dynamic Island as a centred capsule. Android: the M3 snackbar, bottom, above the navigation bar and the Scan FAB (it must not cover them). */
.fld-toasts { position: fixed; z-index: 120; left: var(--fld-gutter); right: var(--fld-gutter); top: calc(var(--fld-safe-top) + .5rem); max-width: calc(var(--fld-column) - 2rem); margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: .5rem; pointer-events: none; }
.fld-toast { display: flex; align-items: center; gap: .625rem; max-width: 100%; min-height: 3.125rem; padding: .375rem .5rem .375rem 1rem; border-radius: 6.25rem; background: var(--fld-ink); color: var(--fld-bg); box-shadow: 0 10px 30px var(--fld-knob-shadow); font-size: .9375rem; font-weight: 600; pointer-events: auto; transform: translateY(-160%) scale(.96); transition: transform 300ms var(--fld-ease); }
.fld-toast.is-in { transform: none; }
:root[data-platform="android"] .fld-toasts { top: auto; bottom: calc(var(--fld-safe-bottom) + 1rem); align-items: stretch; }
:root[data-platform="android"] body:has(.fld-tabbar) .fld-toasts { bottom: calc(var(--fld-tabbar-h) + var(--fld-safe-bottom) + 1rem); }   /* Scan is in the bar now (owner 2026-10-14) */
:root[data-platform="android"] .fld-toast { border-radius: .375rem; min-height: 3rem; padding: .25rem .5rem .25rem 1rem; font-size: .875rem; font-weight: 400; box-shadow: 0 3px 8px var(--fld-knob-shadow); transform: translateY(160%); transition: transform 250ms var(--fld-ease); }
:root[data-platform="android"] .fld-toast.is-in { transform: none; }
:root[data-platform="android"] .fld-toast__action { font-size: .875rem; font-weight: 600; }
.fld-toast__icon { width: 1.25rem; height: 1.25rem; flex: none; }
.fld-toast__text { flex: 1; min-width: 0; }
.fld-toast__action { min-height: var(--fld-tap); padding: 0 .75rem; border: 0; background: transparent; color: var(--fld-mark); font-weight: 700; font-size: var(--fld-fs-body); }
.fld-toast--bad .fld-toast__icon { color: var(--fld-bad); }
.fld-toast--ok .fld-toast__icon { color: var(--fld-ok); }

/* Skeleton rows instead of spinners */
.fld-skel { display: flex; flex-direction: column; gap: .75rem; }
.fld-skel__row { height: 3.5rem; border-radius: var(--fld-r-ctl); background: var(--fld-surface2); animation: fld-pulse 1.2s ease-in-out infinite alternate; }
.fld-skel__row--hero { height: 8rem; border-radius: var(--fld-r-card); }
@keyframes fld-pulse { from { opacity: .55; } to { opacity: 1; } }

/* Blocking overlay: money submit only */
.fld-busy { position: fixed; z-index: 110; inset: 0; display: grid; place-items: center; background: var(--fld-scrim); }
.fld-busy--sheet { z-index: 5; }
.fld-busy[hidden] { display: none; }
.fld-busy__box { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; min-width: 9rem; min-height: 8rem; padding: 1.25rem 1.5rem; border-radius: 1.375rem; background: var(--fld-glass); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); font-weight: 600; }   /* iPhone: a glass HUD */
:root[data-platform="android"] .fld-busy__box { min-width: 13rem; border-radius: 1.75rem; background: var(--fld-bg); font-weight: 500; }   /* Android: an M3 dialog-like card */
.fld-busy__spin { width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 3px solid var(--fld-line); border-top-color: var(--fld-brand); animation: fld-spin .8s linear infinite; }

.fld-progress { height: .5rem; border-radius: .25rem; background: var(--fld-meter-track); overflow: hidden; margin-top: .75rem; }
.fld-progress__bar { display: block; height: 100%; width: 100%; border-radius: .25rem; background: var(--fld-meter); transform: scaleX(0); transform-origin: left center; transition: transform var(--fld-dur-move) var(--fld-ease); }
.fld-progress--thin { height: .375rem; margin-top: .375rem; }

/* Scanner result takeover */
.fld-result { position: fixed; z-index: 90; left: 0; right: 0; bottom: 0; padding: 1.375rem 1.25rem calc(var(--fld-safe-bottom) + 1.5rem); border-radius: var(--fld-r-sheet) var(--fld-r-sheet) 0 0; color: var(--fld-result-ink); transform: translateY(105%); visibility: hidden; transition: transform 240ms var(--fld-ease), visibility 0s linear 240ms; }
.fld-result.is-open { transform: none; visibility: visible; transition-delay: 0s; } /* closed = off screen AND hidden from screen readers and focus (axe found an empty alertdialog with an unnamed button) */
.fld-result--ok { background: var(--fld-result-ok); }
.fld-result--bad { background: var(--fld-result-bad); }
.fld-result__word { font-size: var(--fld-fs-sub); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.fld-result__name { font-family: var(--fld-num); font-weight: 700; font-size: 1.875rem; line-height: 1.1; margin: .375rem 0 .25rem; }
.fld-result__meta { font-size: var(--fld-fs-sub); opacity: .95; }
.fld-result__ticket { display: inline-block; margin-top: .625rem; padding: .3125rem .625rem; border-radius: .625rem; background: var(--fld-lift); font-family: var(--fld-mono); font-weight: 600; font-size: var(--fld-fs-sub); }
.fld-result__btn { margin-top: 1.125rem; background: var(--fld-result-btn); color: var(--fld-result-btn-ink); }
.fld-result__btn + .fld-result__btn { margin-top: .5rem; background: transparent; color: var(--fld-result-ink); box-shadow: inset 0 0 0 1.5px var(--fld-result-ink); }

/* v3 (A+B mix). A valid ticket: an inset dark card that waits for the Admit tap (green Admit, quiet Cancel). iPhone floats it inset with all corners round. */
.fld-result[data-mode="confirm"] { background: var(--fld-surface); color: var(--fld-ink); }
.fld-result[data-mode="confirm"] .fld-result__word { color: var(--fld-ok); }
.fld-result[data-mode="confirm"] .fld-result__meta { color: var(--fld-ink2); opacity: 1; }
.fld-result[data-mode="confirm"] .fld-result__ticket { background: var(--fld-surface2); }
.fld-result[data-mode="confirm"] .fld-result__btn[data-r="primary"] { min-height: 3.5rem; background: var(--fld-ok); color: var(--fld-onok); font-size: 1.1875rem; font-weight: 800; }
.fld-result[data-mode="confirm"] .fld-result__btn + .fld-result__btn { background: transparent; color: var(--fld-ink2); box-shadow: none; }
:root:not([data-platform="android"]) .fld-result[data-mode="confirm"] { left: .5rem; right: .5rem; bottom: calc(var(--fld-safe-bottom) + .5rem); border-radius: 2.125rem; padding-bottom: 1.25rem; box-shadow: 0 -10px 40px var(--fld-knob-shadow); }
/* A refusal (already in, wrong event, not found): the whole screen turns red and stays until Dismiss. */
.fld-result--bad { top: 0; border-radius: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: calc(var(--fld-safe-top) + 2rem) 1.5rem calc(var(--fld-safe-bottom) + 2rem); }
.fld-result--bad .fld-result__word { font-size: var(--fld-fs-body); }
.fld-result--bad .fld-result__name { font-size: 2rem; }
.fld-result--bad .fld-result__btn { max-width: 22rem; margin-top: 2rem; }

/* The Admit success moment: full-screen green, a white tick that lands with the one spring, the word and the name; gone after ~1.1 s (scanner-ui.js). */
.fld-admitflash { position: fixed; z-index: 95; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; padding: 2rem; background: var(--fld-result-ok); color: var(--fld-result-ink); text-align: center; pointer-events: none; opacity: 0; transition: opacity 180ms var(--fld-ease); }
.fld-admitflash[hidden] { display: none; }
.fld-admitflash.is-on { opacity: 1; }
.fld-admitflash__tick { width: 5.5rem; height: 5.5rem; border-radius: 50%; background: var(--fld-result-btn); color: var(--fld-result-ok); display: grid; place-items: center; transform: scale(.4); }
.fld-admitflash.is-on .fld-admitflash__tick { transform: none; }   /* the spring that lands it lives in motion.css (the Admit success moment, P6-9) */
.fld-admitflash__tick .fld-i { width: 3rem; height: 3rem; stroke-width: 3; }
.fld-admitflash__word { margin-top: .75rem; font-size: var(--fld-fs-sub); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.fld-admitflash__name { font-size: 2rem; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .fld-admitflash, .fld-admitflash__tick, .fld-admitflash.is-on .fld-admitflash__tick { transition: none; transform: none; } }