/* The transcriber's workspace (voice-app-iuf.13), and now the admin review
 * workspace too (voice-app-5t91.6) -- listening to N clips and acting on each
 * one is the same job for both, so it gets the same shape rather than a
 * second answer invented from scratch.
 *
 * A different job from the participant flow, and a different shape. A
 * participant holds a phone, answers one question and leaves. A transcriber
 * sits at a keyboard for an hour with headphones on, playing one clip over and
 * over. So: one clip on screen, the player and the box close enough together
 * that neither needs hunting for, and a strip along the top saying how much of
 * the batch is left.
 *
 * The transcriber's strip is a row of <button>s that a client script shows
 * and hides; the admin review page has no such script and every clip is its
 * own page load, so its chips are plain <a href> navigation instead. Both
 * shapes share the same classes -- the :visited rules below are only for the
 * anchor form, since a plain button is never "visited".
 *
 * Colour variables come from participant.css, which defines them on :root. */

.batch {
    max-width: 46rem;
}

.batch__head {
    margin-bottom: 1rem;
}

.batch__progress {
    margin-bottom: 0;
}

/* What is waiting for you, on the way in. */
.work-list li + li {
    margin-top: 0.5rem;
}

/* ── The jump strip ───────────────────────────────────────────────────
 * Every clip in the batch, always visible, so "how much is left" and "let
 * me go back to number 2" never need a scroll. */

.clip-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
}

.clip-chip,
.clip-chip:visited {
    display: inline-block;
    min-width: 2.75rem;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--mist, #dce3dd);
    border-radius: 0.4rem;
    background: var(--surface, #fff);
    color: var(--ink, #15211e);
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    cursor: pointer;
}

.clip-chip--done,
.clip-chip--done:visited {
    border-color: var(--jade, #0f5d4a);
    color: var(--jade, #0f5d4a);
}

.clip-chip--current,
.clip-chip--current:visited {
    background: var(--jade, #0f5d4a);
    border-color: var(--jade, #0f5d4a);
    color: #fff;
}

/* ── One clip ─────────────────────────────────────────────────────── */

.clip-panel__title {
    font-size: 1.05rem;
    color: var(--ink-soft, #55635e);
    margin-bottom: 0.6rem;
}

/* Full width because the play button and the scrubber are the two controls
 * this page exists for, and a transcriber reaches for them constantly. */
.clip-audio {
    width: 100%;
    margin-bottom: 0.85rem;
}

.clip-panel__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

/* Submit is the one action that ends a clip for good, so the two navigation
 * buttons sit apart from it rather than beside it. */
.clip-panel__actions .clip-step {
    margin-left: auto;
}

.clip-panel__actions .clip-step + .clip-step {
    margin-left: 0;
}

.clip-submitted {
    color: var(--jade, #0f5d4a);
    font-weight: 600;
}