/* ============================================================
   MATCHING COCKPIT MOTION — WP03 (mission matching-cockpit-ux-01KXJKXM)

   Owned by WP03: FLIP row re-ordering, live contribution micro-bars,
   band boundary marker rows, recruiter progress strip, and their
   prefers-reduced-motion fallbacks. Layout/affordance styles live in
   matching-cockpit-ux.css (WP02); engine styles in matching-cockpit.css.

   Theming: everything below resolves through the shared tokens in
   styles.css (var(--surface/--border/--text-*/--primary-color/
   --success-color/--warning-color)), so light and dark both work via
   the existing [data-theme="dark"] token overrides.
   ============================================================ */

/* ── T006 — FLIP row re-ordering ─────────────────────────────
   matching-cockpit.js sets an inverted translate3d inline, flushes
   style, then adds this class and clears the transform: the row
   transitions from its old visual position to the new ranking slot.
   Budget: ≤ 300ms (NFR-001). */
.mc-table-row.mm-flip-row {
    transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
    position: relative;
    z-index: 1; /* moving rows glide over resting ones, not under */
}

/* Stage swaps driven by renderStageOnly (slider drags, row selection)
   rebuild every row; without this, the engine's staggered ENTRANCE
   animation (matching-cockpit.css mc-fadeIn: opacity 0 + translateY)
   replays on every drag frame — rows blink and its animation transform
   overrides the FLIP transform. Initial mounts via render() don't carry
   this class and keep their entrance stagger. */
.mm-stage-rerender .mc-table tbody tr {
    animation: none !important;
}

/* ── T006 — live contribution micro-bars ─────────────────────
   Container + segment base styles come from WP02
   (matching-cockpit-ux.css .mm-contrib-slot / .mm-contrib-seg);
   here only the live-variant extras. */
.mm-contrib-live .mm-contrib-seg--excluded {
    opacity: 0.35; /* "not demanded" — visibly parked, never zero-scored */
}

/* ── T006 — band boundary marker rows ────────────────────────
   Decorative divider rows injected between bands when the list is
   score-ordered; their labels carry the LIVE cutoff values, so
   dragging a cutoff slider moves the line through the ranking. */
.mm-band-boundary td {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}
.mm-band-boundary-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 6px;
}
.mm-band-boundary-inner::before,
.mm-band-boundary-inner::after {
    content: '';
    flex: 1 1 0;
    border-top: 2px dashed var(--border);
}
.mm-band-boundary-label {
    flex: 0 0 auto;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}
.mm-band-boundary--shortlist .mm-band-boundary-inner::before,
.mm-band-boundary--shortlist .mm-band-boundary-inner::after {
    border-top-color: color-mix(in srgb, var(--success-color) 55%, var(--border));
}
.mm-band-boundary--shortlist .mm-band-boundary-label {
    color: var(--success-color);
}
.mm-band-boundary--qualified .mm-band-boundary-inner::before,
.mm-band-boundary--qualified .mm-band-boundary-inner::after {
    border-top-color: color-mix(in srgb, var(--warning-color) 55%, var(--border));
}
.mm-band-boundary--qualified .mm-band-boundary-label {
    color: var(--warning-color);
}

/* ── T007 — recruiter progress strip ─────────────────────────
   Mounted by matching-cockpit.js ABOVE #matching-content only while a
   match run is active (zero resting DOM otherwise). role="status" +
   aria-live="polite" are set in JS. */
.mm-run-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 12px;
    padding: 8px 14px;
    border: 1px solid color-mix(in srgb, var(--primary-color) 30%, var(--border));
    border-radius: var(--border-radius, 8px);
    background: color-mix(in srgb, var(--primary-color) 8%, var(--surface));
    color: var(--text-primary);
    font-size: 0.85rem;
    line-height: 1.4;
}
.mm-run-strip-dot {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--primary-color);
    animation: mm-run-pulse 1.3s ease-in-out infinite;
}
@keyframes mm-run-pulse {
    0%, 100% { opacity: 1;    transform: scale(1); }
    50%      { opacity: 0.35; transform: scale(0.72); }
}
.mm-run-strip-copy strong {
    font-variant-numeric: tabular-nums;
}
.mm-run-strip-item {
    color: var(--text-secondary);
}
.mm-run-strip-bar {
    flex: 0 1 160px;
    min-width: 80px;
    height: 6px;
    margin-left: auto;
    border-radius: 3px;
    background: color-mix(in srgb, var(--border) 80%, transparent);
    overflow: hidden;
}
.mm-run-strip-bar > i {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--primary-color);
    transition: width 480ms linear; /* glides between 1 rps poll ticks */
}

/* Completion state — brief, then the strip removes itself. */
.mm-run-strip--done {
    border-color: color-mix(in srgb, var(--success-color) 40%, var(--border));
    background: color-mix(in srgb, var(--success-color) 10%, var(--surface));
}
.mm-run-strip--done .mm-run-strip-dot {
    background: var(--success-color);
    animation: none;
}

/* Narrow widths: let the copy wrap; the bar takes the full second row. */
@media (max-width: 768px) {
    .mm-run-strip-bar {
        flex: 1 1 100%;
        margin-left: 0;
    }
}

/* ── prefers-reduced-motion ──────────────────────────────────
   Instant reorder (JS also skips the FLIP transforms entirely),
   no pulsing, no bar glide — values still update every render. */
@media (prefers-reduced-motion: reduce) {
    .mc-table-row.mm-flip-row {
        transition: none !important;
    }
    .mm-run-strip-dot {
        animation: none !important;
    }
    .mm-run-strip-bar > i {
        transition: none !important;
    }
}