/* Spotsheet — The Spotted Moment (DH #516). The coverage-flip beat: Pre-selected -> Spotted.
   Ported 1:1 from "Spotted Moment.html". Compositor-only (transform + opacity). No glow,
   no gradient, no pop, no confetti — sage is applied only as meaning. Generalized to ss-*
   so any coverage row on any surface can adopt it. Reduced-motion drops the motion but the
   marker still recolors instantly, so state is always truthful. */

/* a row that hosts the flip must clip + position the sweep */
.ss-cov-host { position: relative; overflow: hidden; }

/* coverage marker — a BAR (never a dot), color = state */
.ss-covwrap { display: inline-flex; align-items: center; gap: 7px; }
.ss-covbar  { width: 14px; height: 4px; border-radius: 1px; flex-shrink: 0; transition: background .26s ease, width .26s ease; }
.ss-covlab  { font-family: var(--mono); font-size: 8px; letter-spacing: .14em; text-transform: uppercase; text-align: left; transition: color .26s ease; }
[data-cov="needs"]     .ss-covbar { background: var(--cue-amber); }
[data-cov="needs"]     .ss-covlab { color: var(--cue-amber); }
[data-cov="preselect"] .ss-covbar { background: var(--teal); }
[data-cov="preselect"] .ss-covlab { color: var(--teal); }
[data-cov="spotted"]   .ss-covbar { background: var(--as-sage); }
[data-cov="spotted"]   .ss-covlab { color: var(--as-sage); }

/* THE FLIP: one hairline sweep + a quiet settle. One frame of motion. */
.ss-sweep { position: absolute; top: 0; bottom: 0; width: 1px; left: 0; background: var(--as-sage); opacity: 0; pointer-events: none; transform: translateX(-2px); }
.ss-flip .ss-sweep { animation: ss-sweep-kf 460ms cubic-bezier(.22,.61,.36,1) forwards; }
@keyframes ss-sweep-kf {
  0%   { opacity: 0;   transform: translateX(-2px); }
  12%  { opacity: .55; }
  82%  { opacity: .55; }
  100% { opacity: 0;   transform: translateX(var(--ss-sweep-x, 900px)); }
}
.ss-flip { animation: ss-settle-kf 320ms ease-out; }
@keyframes ss-settle-kf {
  0%   { background: var(--bg-app); }
  30%  { background: var(--bg-row-sel); }
  100% { background: var(--bg-app); }
}

/* running "N of M spotted" counter — mono, PT-green numerals, no roll */
.ss-counter { font-family: var(--mono); font-feature-settings: "tnum" 1, "zero" 1; font-size: 11px; letter-spacing: .04em; color: var(--fg-dim); display: inline-flex; align-items: baseline; gap: 5px; }
.ss-counter .n   { color: var(--tc-green); transition: color .2s; }
.ss-counter .of  { color: var(--fg-faint); }
.ss-counter .m   { color: var(--fg-dim); }
.ss-counter .lab { font-size: 8px; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-dim); margin-left: 4px; }
.ss-counter.ticking .n { color: var(--fg-strong); }

@media (prefers-reduced-motion: reduce) {
  .ss-flip .ss-sweep { animation: none; opacity: 0; }
  .ss-flip { animation: none; }
}