/* mandi.css — owned by WP-MANDI. Tokens only (docs/vfx-master-spec.md §1 rule 5).
   Motion here is transform/opacity only; every animated element settles at
   identity. The one ambient loop is the offline signal flicker on #/sync. */

/* ------------------------------------------------------------ GRADE STAMP */
/* A lot card / batch header hosts the verdict (.vfx-stamp from vfx.css). The
   wrapper's rotation is static; the inner <b> is what animates. */
.mandi-lot { position: relative; }
.mandi-lot > .vfx-stamp { top: 40%; right: var(--fc-s-4); transform: translateY(-50%) rotate(var(--vfx-rot, -8deg)); }
.mandi-lot.is-accepted { border-color: var(--fc-success); }
.mandi-stamp { position: absolute; top: var(--fc-s-2); right: var(--fc-s-2); z-index: 2; pointer-events: none; }

/* The intake grade step: an overlay host floats over the live stage. */
.mandi-stage { position: relative; }
.pip-stamp-host { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.pip-stamp-host > .vfx-stamp, .pip-stamp-host > .mandi-stamp { top: var(--fc-s-3); right: var(--fc-s-3); }

/* --------------------------------------------------------------- REGISTER */
.mandi-check { display: grid; place-items: center; width: 56px; height: 56px; margin: var(--fc-s-3) auto 0; color: var(--fc-success); }
.mandi-check > svg { display: block; }

/* --------------------------------------------------------------- POLAROIDS */
.mandi-polaroid {
  display: grid;
  gap: var(--fc-s-1);
  padding: var(--fc-s-2) var(--fc-s-2) var(--fc-s-1);
  background: var(--glass-fill-hard);
  border: 1px solid var(--line);
  border-radius: var(--fc-r-sm);
  color: inherit;
  text-align: center;
}
.mandi-polaroid > .ph { aspect-ratio: 1; display: grid; place-items: center; border-radius: var(--fc-r-xs); background: var(--on-glass-chip); }
.mandi-polaroid--add { border-style: dashed; background: transparent; cursor: pointer; }
.mandi-polaroid--add:active > .ph { transform: scale(.96); transition: transform var(--fc-m-fast) var(--fc-ease); }

/* ------------------------------------------------------------------ CLOCK */
.mandi-clock { display: inline-block; font-variant-numeric: tabular-nums; vertical-align: bottom; }

/* ------------------------------------------------------------------- SYNC */
.mandi-pip { margin: 0; }
.mandi-signal { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; color: var(--fc-danger); }
.mandi-signal > i { display: block; width: 3px; border-radius: 2px; background: currentColor; opacity: .35; }
.mandi-signal > i:nth-child(1) { height: 4px; }
.mandi-signal > i:nth-child(2) { height: 6px; }
.mandi-signal > i:nth-child(3) { height: 8px; }
.mandi-signal > i:nth-child(4) { height: 10px; }
/* Offline: the bars hunt for a signal they cannot find. Opacity only, one
   slow loop, phase-offset with negative token delays. */
.mandi-sync--offline .mandi-signal > i { animation: mandi-flicker var(--fc-m-epic) var(--fc-ease) infinite alternate; }
.mandi-sync--offline .mandi-signal > i:nth-child(2) { animation-delay: calc(var(--fc-m-quick) * -1); }
.mandi-sync--offline .mandi-signal > i:nth-child(3) { animation-delay: calc(var(--fc-m-medium) * -1); }
.mandi-sync--offline .mandi-signal > i:nth-child(4) { animation-delay: calc(var(--fc-m-slow) * -1); }
@keyframes mandi-flicker { from { opacity: .2; } to { opacity: .85; } }

/* --------------------------------------------------------- REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  .mandi-sync--offline .mandi-signal > i { animation: none; opacity: .35; }
  .mandi-polaroid--add:active > .ph { transition: none; transform: none; }
}