/**
 * Task Sequencing Widget (Employment module) — reorder-in-place list.
 * Scoped under .task-sequencing-root. Rides inside the canonical fleet chrome
 * (UniversalHeader merged header + blue field); the ⚙ gear, Level and hints
 * toggle live in that header, so this file styles only the exercise body.
 *
 * Row anatomy (Lyda's fine-tune, slimmed 2026-08-06): a transparent row holds a
 * FIXED number anchor (outside the card) + the movable CARD (grip · sentence · ▲▼).
 * No per-card speaker and no ✓ — the CARD ITSELF is tap-to-play, and feedback is
 * border-only (sr-only text carries the state). The number stays put while cards
 * reorder past it; the card visibly lifts "out of its slot" on drag.
 *
 * Aphasia-first: big tap targets (▲▼ and grip ≥44px), high contrast, calm motion,
 * focus-visible.
 *
 * Colour notes (real fleet tokens verified against design-tokens.css):
 *   - Resting card border is a neutral GRAY (--as-card-edge fallback #d9dde4) — NOT
 *     --as-choice-edge, which is a light GREEN.
 *   - Blue accents use the FIELD tokens (--as-field-instruction #1e40af, --as-field-bg
 *     #e8f1fe). NB: --as-action-* is the fleet's mint-green action, not blue.
 *   - Wrong-spot red is deliberately PALE (#eaa8a8) — guidance, not alarm — so it
 *     intentionally does NOT use --as-danger (#dc2626, a bright alarm red).
 */

.task-sequencing-root {
    font-family: var(--as-font, inherit);
    color: var(--as-text, #1e2a44);
}

.task-sequencing-root .ts-loading,
.task-sequencing-root .ts-error,
.task-sequencing-root .ts-empty {
    text-align: center;
    padding: 32px 16px;
    color: var(--as-text, #1e2a44);
}
.task-sequencing-root .ts-empty-sub {
    color: var(--as-field-instruction, #6b7280);
    font-size: 14px;
}

/* visually-hidden text for screen readers (state + move announcements) */
.task-sequencing-root .ts-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---- body layout (tight — hint + footer should fit without scrolling) ---- */
.task-sequencing-root .ts-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* instruction — centered, sits right above the steps, with a speaker */
.task-sequencing-root .ts-instruction {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
}
.task-sequencing-root .ts-instruction-text {
    color: var(--as-field-instruction, #2563c9);
    font-weight: 700;
    font-size: 15px;
}
.task-sequencing-root .ts-instruction-audio {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--as-audio-deep, #0e7490);
    font-size: 17px;
    cursor: pointer;
}

/* ---- reorderable step list ---- */
.task-sequencing-root .ts-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* the ROW is transparent: [ number anchor ] [ card ]. Stretch so the number chip
   matches the card's height. */
.task-sequencing-root .ts-step {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

/* FIXED number anchor — outside the card, stays put while cards reorder */
.task-sequencing-root .ts-anchor {
    flex: 0 0 auto;
    display: flex;
    align-items: stretch;
    justify-content: center;
    width: 50px;
}
/* number chip — a white-filled container, full card height, blue numeral */
.task-sequencing-root .ts-pos {
    width: 44px;
    min-height: 44px;
    align-self: stretch;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 20px;
    background: var(--as-surface, #fff);
    border: 2px solid var(--as-card-edge, #d9dde4);
    color: var(--as-field-instruction, #2563c9);
    box-shadow: 0 1px 2px rgba(30, 42, 68, .06);
}

/* the MOVABLE card — bordered; grab anywhere to drag, TAP to hear the step */
.task-sequencing-root .ts-card {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    background: var(--as-surface, #fff);
    border: 2px solid var(--as-card-edge, #d9dde4);   /* resting = neutral gray */
    border-radius: 12px;
    padding: 8px 12px;
    min-height: 62px;
    cursor: grab;
    user-select: none;
    /* Touch: let the page scroll on the card body; the grip handle (touch-action:none)
       starts a drag. Mouse/pen can grab anywhere (handled in JS). */
    touch-action: pan-y;
    transition: border-color .18s ease, background-color .18s ease, box-shadow .22s ease, transform .22s ease;
}

/* feedback — border carries it, interior stays white */
.task-sequencing-root .ts-card--ok {
    border-color: var(--as-success, #178a53);
}
.task-sequencing-root .ts-card--bad {
    border-color: var(--as-danger-edge, #eaa8a8);   /* pale on purpose (not --as-danger) */
}

/* all-correct celebrate — solid green reward */
.task-sequencing-root .ts-card--done {
    background: var(--as-success, #22b573);
    border-color: var(--as-success-deep, #0f6b30);
    box-shadow: 0 3px 0 var(--as-success-deep, #0f6b30);
}
.task-sequencing-root .ts-card--done .ts-label {
    color: #fff;
}
.task-sequencing-root .ts-card--done .ts-grip {
    color: rgba(255, 255, 255, .75);
}

/* lifted while dragging — clearly "pulled up out of the slot": bigger shadow, blue
   highlight border, a touch more scale/lift (scale/translate gated below) */
.task-sequencing-root .ts-card.is-dragging {
    box-shadow: 0 20px 40px rgba(30, 42, 68, .30);
    border-color: var(--as-field-instruction, #2563c9);
    transform: scale(1.04) translateY(-6px);
    cursor: grabbing;
    z-index: 6;
}

/* drag handle (dots) — inside the card next to the sentence, ≥44px hit area */
.task-sequencing-root .ts-grip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--as-text-muted, #b3bcc9);
    font-size: 20px;
    line-height: 1;
    cursor: grab;
    touch-action: none;
}
.task-sequencing-root .ts-grip:active {
    cursor: grabbing;
}
.task-sequencing-root .ts-grip:disabled {
    cursor: default;
}

/* sentence — takes ALL the width between grip and ▲▼ (the speaker + ✓ are gone),
   so a step reads as ONE line wherever it can */
.task-sequencing-root .ts-label {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 700;
    font-size: 16px;
    line-height: var(--as-leading-normal, 1.4);
    color: var(--as-text, #1e2a44);
    /* Elementor kit title-cases <button>/list text; steps must read as written. */
    text-transform: none;
}

/* ▲▼ move buttons — accessible baseline, right edge of the card, ≥44px each */
.task-sequencing-root .ts-moves {
    flex: 0 0 auto;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.task-sequencing-root .ts-move {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    border: 1px solid var(--as-card-edge, #d9dde4);
    background: var(--as-surface-soft, #f7f8fa);
    color: var(--as-text-muted, #4a5568);
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease;
}
.task-sequencing-root .ts-move:hover:not(:disabled) {
    border-color: var(--as-field-instruction, #3b82f6);
}
.task-sequencing-root .ts-move:disabled {
    opacity: .3;
    cursor: default;
}

/* ---- Check order (green primary submit) ---- */
.task-sequencing-root .ts-check-btn {
    width: 100%;
    border: none;
    background: var(--as-success, #22b573);
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    padding: 14px;
    border-radius: 13px;
    cursor: pointer;
    text-transform: none;
    box-shadow: 0 4px 0 var(--as-success-deep, #0f6b30);
    transition: transform .06s ease, box-shadow .06s ease;
}
.task-sequencing-root .ts-check-btn:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 var(--as-success-deep, #0f6b30);
}

/* ---- divider + controls (Hint / Start over) ---- */
.task-sequencing-root .ts-divider {
    height: 1px;
    background: var(--as-field-edge, #cfe0f7);
    margin: 4px 0;
}
.task-sequencing-root .ts-controls {
    display: flex;
    gap: 10px;
}
.task-sequencing-root .ts-ctl {
    flex: 1;
    min-height: 48px;
    font-weight: 700;
    font-size: 15px;
    padding: 13px;
    border-radius: 12px;
    cursor: pointer;
    text-transform: none;
}
.task-sequencing-root .ts-ctl--hint {
    background: var(--as-hint-bg, #fdf6d8);
    border: 1px solid var(--as-hint-border, #f0d98a);
    color: var(--as-hint-text, #8a6d1a);
}
.task-sequencing-root .ts-ctl--over {
    background: var(--as-surface, #fff);
    border: 1px solid var(--as-card-edge, #e3e3ea);
    color: var(--as-text-muted, #6a6a75);
}

/* ---- success actions ---- */
.task-sequencing-root .ts-success-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
.task-sequencing-root .ts-btn {
    min-height: 48px;
    padding: 10px 18px;
    border-radius: 12px;
    border: 2px solid var(--as-card-edge, #cbd5e1);
    background: var(--as-surface, #fff);
    color: var(--as-text, #1e2a44);
    font-size: 15px;
    font-weight: 700;
    text-transform: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
.task-sequencing-root .ts-btn--primary {
    background: var(--as-field-instruction, #2563c9);
    border-color: var(--as-field-instruction, #2563c9);
    color: #fff;
}
.task-sequencing-root .ts-btn--ghost {
    background: transparent;
}

/* ---- Elementor editor preview note ---- */
.task-sequencing-root .ts-preview-note {
    padding: 24px;
    text-align: center;
    border: 2px dashed var(--as-field-edge, #cfe0f7);
    border-radius: 12px;
    color: var(--as-field-instruction, #6b7280);
}

/* ---- focus-visible (blue ring) ---- */
.task-sequencing-root .ts-grip:focus-visible,
.task-sequencing-root .ts-move:focus-visible,
.task-sequencing-root .ts-check-btn:focus-visible,
.task-sequencing-root .ts-ctl:focus-visible,
.task-sequencing-root .ts-btn:focus-visible,
.task-sequencing-root .ts-instruction-audio:focus-visible {
    outline: 3px solid var(--as-field-instruction, #2563c9);
    outline-offset: 2px;
}

/* ---- hint move: pulse in place → slow glide → soft landing ring ----
   The slow glide itself is the JS FLIP (HINT_GLIDE_MS, translate-only, so the row never
   morphs). Here we add the in-place pulse that draws the eye BEFORE the step moves, and
   the green ring where it lands. Mirrors the Categories correction-reveal feel. */
.task-sequencing-root .ts-card.ts-hint-pulse {
    animation: tsHintPulse 0.72s ease-in-out;
    z-index: 5;
}
@keyframes tsHintPulse {
    0%   { transform: scale(1);    box-shadow: 0 0 0 2px rgba(37, 99, 201, .35); }
    50%  { transform: scale(1.05); box-shadow: 0 0 0 7px rgba(37, 99, 201, .22); }
    100% { transform: scale(1);    box-shadow: 0 0 0 2px rgba(37, 99, 201, .35); }
}
/* Case A — the step is already in the right place; a GREEN pulse confirms it as the hint
   reveals it (no glide, since nothing needs to move). */
.task-sequencing-root .ts-card.ts-hint-claim {
    animation: tsHintClaim 0.72s ease-in-out;
    z-index: 5;
}
@keyframes tsHintClaim {
    0%   { transform: scale(1);    box-shadow: 0 0 0 2px rgba(22, 163, 74, .40); }
    50%  { transform: scale(1.05); box-shadow: 0 0 0 7px rgba(22, 163, 74, .25); }
    100% { transform: scale(1);    box-shadow: 0 0 0 2px rgba(22, 163, 74, .40); }
}
.task-sequencing-root .ts-card.ts-hint-land {
    animation: tsHintLand 0.6s ease-out;
}
@keyframes tsHintLand {
    0%   { box-shadow: 0 0 0 7px rgba(22, 163, 74, .45); }
    100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}

/* ---- reduced motion: kill the drag lift + transition-driven motion + hint anim ---- */
@media (prefers-reduced-motion: reduce) {
    .task-sequencing-root .ts-card,
    .task-sequencing-root .ts-card.is-dragging,
    .task-sequencing-root .ts-check-btn {
        transition: none;
        transform: none;
    }
    .task-sequencing-root .ts-card.ts-hint-pulse,
    .task-sequencing-root .ts-card.ts-hint-claim,
    .task-sequencing-root .ts-card.ts-hint-land {
        animation: none;
    }
}

/* ---- small phones (≤480px): compact single-card rows ---- */
/* Desktop is intentionally untouched; every rule here is a mobile-only override that
   fixes the cramped row (Lyda's phone review). The big win is killing the Elementor-kit
   button padding on ▲▼ (it inflates them to ~114px, which was starving the label). */
@media (max-width: 480px) {
    /* header: tighter vertical rhythm + room to scroll the controls clear of the
       fixed accessibility FAB (bottom-right) */
    .task-sequencing-root .ts-body { gap: 8px; padding-bottom: 76px; }
    .task-sequencing-root .ts-steps { gap: 8px; }
    .task-sequencing-root .ts-instruction { gap: 6px; }
    .task-sequencing-root .ts-instruction-text { font-size: 13px; }
    .task-sequencing-root .ts-instruction-audio { width: 32px; height: 32px; font-size: 15px; }

    /* number → a compact bold numeral INSIDE the card's left edge (was a big round
       badge in a left gutter). The anchor is absolutely positioned within the row, so
       the card spans FULL width and the number still stays fixed while the card lifts /
       the cards slide (it rides .ts-step, not .ts-card). pointer-events:none so it never
       intercepts a drag/tap on the card underneath. */
    .task-sequencing-root .ts-step { position: relative; gap: 0; align-items: center; }
    .task-sequencing-root .ts-anchor {
        position: absolute;
        left: 12px;
        top: 0;
        bottom: 0;
        width: auto;
        display: flex;
        align-items: center;
        z-index: 2;
        pointer-events: none;
    }
    .task-sequencing-root .ts-pos {
        width: auto;
        min-width: 0;
        height: auto;
        min-height: 0;
        align-self: center;
        border: none;
        box-shadow: none;
        background: transparent;
        border-radius: 0;
        color: var(--as-field-instruction, #2563c9);
        font-size: 18px;
        font-weight: 800;
    }

    /* card spans the full row; left padding makes room for the number. min-height
       drops to the 44px controls + padding — the stacked-arrow column that used to
       force ~100px rows is gone (see ▲▼ below). */
    .task-sequencing-root .ts-card { gap: 3px; padding: 5px 4px 5px 30px; min-height: 54px; }

    /* grip: compact touch handle (kept tall for the drag) */
    .task-sequencing-root .ts-grip { min-width: 26px; font-size: 18px; }

    /* label: full width between grip and ▲▼ (speaker + ✓ gone) — one line for
       typical steps, wraps only when genuinely long */
    .task-sequencing-root .ts-label { font-size: 15px; line-height: 1.3; }

    /* ▲▼ go SIDE BY SIDE on phones — the stacked pair (44+44 tall) was what made
       every card ~100px and pushed the hint/footer below the fold. Two 44px slots
       in a row keep the tap targets full-size while the card slims to ~54px.
       Elementor-kit button padding killed; a tight drawn box (::before) hugs each
       arrow — shrink what's drawn, not what's tappable. */
    .task-sequencing-root .ts-moves { flex-direction: row; gap: 0; }
    .task-sequencing-root .ts-move {
        width: 44px;
        min-width: 44px;
        max-width: 44px;
        height: 44px;
        min-height: 44px;
        padding: 0;
        background: transparent;
        border: none;
        position: relative;
        isolation: isolate;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--as-text-muted, #4a5568);
        font-size: 15px;
        line-height: 1;
    }
    .task-sequencing-root .ts-move::before {
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 38px;
        height: 34px;
        border-radius: 6px;
        background: var(--as-surface-soft, #f7f8fa);
        border: 1px solid var(--as-card-edge, #d9dde4);
        z-index: -1;
    }
}