/* Premium speaker picker.
 *
 * THEME CONTRACT: this file must never hardcode a colour. Every colour comes
 * from a --sc-* token in css/soft-card.css, which is redefined under
 * [data-theme="dark"]. That is the only reason this component works in both
 * themes without a single [data-theme="dark"] rule of its own. See ADR-0012.
 *
 * (History: until v5.4.77 this file hardcoded the pre-Soft-Card indigo palette
 * — #f3f4f6 names on a white surface measured 1.10:1, i.e. invisible in light
 * theme. Do not reintroduce literal colours here.)
 *
 * Rows are 56px tall with 44px+ tap targets — the picker is used on phones far
 * more than on desktop, and previewing is a repeated tap-tap-tap interaction.
 */

.lexy-vp {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.lexy-vp-intro {
    margin: 0 0 4px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--sc-ink-soft);
}

.lexy-vp-empty {
    margin: 0;
    font-size: 14px;
    color: var(--sc-ink-soft);
}

.lexy-vp-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lexy-vp-lang {
    margin: 0 0 2px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sc-ink-soft);
}

.lexy-vp-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 56px;
    padding: 10px 14px;
    border: 1px solid var(--sc-line);
    border-radius: var(--sc-r-sm);
    background: var(--sc-surface);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.lexy-vp-row:hover,
.lexy-vp-row:focus-visible {
    border-color: var(--sc-accent);
    background: var(--sc-accent-soft);
    outline: none;
}

.lexy-vp-row:focus-visible {
    outline: 2px solid var(--sc-accent);
    outline-offset: 2px;
}

.lexy-vp-row.is-selected {
    border-color: var(--sc-accent);
    background: var(--sc-accent-soft);
}

/* Locked rows stay fully legible — they are the advertisement. Dimming them to
   the point of being unreadable would hide the thing being sold. */
.lexy-vp-row.is-locked .lexy-vp-name {
    color: var(--sc-ink-soft);
}

.lexy-vp-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.lexy-vp-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--sc-ink);
}

.lexy-vp-meta {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--sc-accent-strong);
}

.lexy-vp-desc {
    font-size: 12px;
    line-height: 1.35;
    color: var(--sc-ink-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.lexy-vp-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.lexy-vp-preview {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--sc-line);
    border-radius: 50%;
    background: var(--sc-surface-alt);
    color: var(--sc-ink);
    font-size: 13px;
    cursor: pointer;
    transition: transform 0.12s ease, background 0.15s ease;
}

.lexy-vp-preview:hover {
    background: var(--sc-accent-soft);
    border-color: var(--sc-accent);
}

.lexy-vp-preview:active {
    transform: scale(0.92);
}

.lexy-vp-preview.is-playing {
    background: var(--sc-accent);
    border-color: var(--sc-accent);
    color: var(--sc-accent-ink);
}

.lexy-vp-preview.is-failed {
    opacity: 0.45;
    cursor: default;
}

.lexy-vp-lock,
.lexy-vp-check {
    width: 22px;
    text-align: center;
    font-size: 15px;
}

.lexy-vp-check {
    color: var(--sc-accent-strong);
}

.lexy-vp-lock {
    color: var(--sc-ink-soft);
}

@media (prefers-reduced-motion: reduce) {
    .lexy-vp-row,
    .lexy-vp-preview {
        transition: none;
    }
}