/* ─────────────────────────────────────────────────────────────────────────────
 * comment-drum.css — the comment pickers' reel (see comment-drum.js). Loaded
 * BLOCKING by comment-picker.php and comment-winner-picker.php.
 *
 * Values from the opusfived.dev slot reel, scaled from its 3 × 34px window to
 * this stage's 5 × 56px so the box keeps the 280px it has always had (the fold,
 * the fullscreen reservations and the picker thumbnails all assume it):
 *   slot         ink mixed 4% into the surface (#efefed on #f9f9f7)
 *   inset shadow 0 2px 10px rgba(0,0,0,.13)
 *   lighting     rgba(0,0,0,.16) → clear 38%–62% → rgba(0,0,0,.16)
 *   band         top + bottom hairline, ink at 10%, exactly one row
 *   rows         monospace, letter-spacing .2em; ink 40%, the centre row 70%,
 *                the landed row semibold (in the accent there; here the accent mixed
 *                half with the ink, see .is-winner), the border accent 40%
 *
 * ⚠️ 280 = ROW 56 × VISIBLE 5 in comment-drum.js, and the band sits on row 3
 *    (112px). Change one, change both.
 * ⚠️ The default light theme defines NO --theme-* variable — every one needs its
 *    fallback here.
 * ─────────────────────────────────────────────────────────────────────────── */
.cp-reel-outer {
    --cp-drum-ink: var(--theme-text, #1a1a2e);
    position: relative;
    height: 280px;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid var(--theme-border, #e9ecef);
    background: color-mix(in srgb, var(--cp-drum-ink) 4%, var(--theme-surface, #f8f9fa));
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, .13);
    transition: border-color .5s;
}
.cp-reel-outer.is-landed {
    border-color: color-mix(in srgb, var(--cp-drum-accent, #833ab4) 40%, transparent);
}
/* The lighting that makes a flat strip read as a drum. Above the rows. */
.cp-reel-outer::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(to bottom,
        rgba(0, 0, 0, .16), rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, .16));
}

/* #cpReel is the row layer; comment-drum.js creates the rows and moves them. */
#cpReel {
    position: absolute;
    inset: 0;
    z-index: 1;
}
.cp-drum-row {
    position: absolute;
    top: 0;
    left: 1rem;
    right: 1rem;
    height: 56px;
    line-height: 56px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 1.05rem;
    letter-spacing: .2em;
    color: color-mix(in srgb, var(--cp-drum-ink) 40%, transparent);
    transition: color .3s;
    will-change: transform;
}
.cp-drum-row.is-centre {
    color: color-mix(in srgb, var(--cp-drum-ink) 70%, transparent);
}
/* ⚠️ HALF ACCENT, HALF INK — MEASURED, NOT TASTE. The reference paints the landed row in
   its accent, and so did this rule first: 18 of 42 page × theme pairs then failed WCAG AA
   for the one row that matters (comment-picker on dark 2.33:1, retweet on light 2.21:1 —
   semibold 16.8px is not "large text", so the bar is 4.5). Mixing toward the theme's own
   ink darkens the accent on light themes and lightens it on dark ones: at 60% four pairs
   still failed (4.14–4.42); at 50% all 42 pass, worst 4.73 (youtube on crypto).
   writable/ui-tools/comment-drum-check.js --only=contrast guards it. */
.cp-drum-row.is-winner {
    color: color-mix(in srgb, var(--cp-drum-accent, #833ab4) 50%, var(--cp-drum-ink));
    font-weight: 600;
}

/* #cpReelHighlight is the band: two hairlines around the centre row. */
.cp-reel-highlight {
    position: absolute;
    left: 0;
    right: 0;
    top: 112px;
    height: 56px;
    z-index: 2;
    pointer-events: none;
    border-top: 1px solid color-mix(in srgb, var(--cp-drum-ink) 10%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--cp-drum-ink) 10%, transparent);
}

.cp-reel-placeholder {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: .5rem;
    color: var(--theme-muted, #adb5bd);
    font-size: .9rem;
    pointer-events: none;
}

@media (max-width: 575.98px) {
    .cp-drum-row {
        font-size: .9rem;
        letter-spacing: .12em;
    }
}