/**
 * Buchert Audio - A/B Listen
 *
 * Selvstaendigt stylesheet. Roerer ikke style.css, saa komponenten kan
 * tilfoejes og fjernes uden risiko for resten af sitet. Tokens genbruges fra
 * :root i style.css med fallback, saa filen ogsaa staar korrekt alene
 * (fx i preview-siden under _drafts/).
 */

.ab-listen-section {
    /* Sektionens standardluft er beregnet til store tekstblokke. Lytteren er
       en kompakt kontrol og skal staa taettere paa den overskrift den hoerer
       sammen med - ellers ser den ud til at svaeve alene. */
    padding: 48px 0 8px;
}

.ab-listen {
    background: var(--bg-shell-mid, #101a24);
    border: 1px solid var(--border-shell, #1e2e3c);
    border-radius: 10px;
    padding: var(--s5, 24px);
    margin: var(--s6, 32px) 0;
    font-family: inherit;
}

/* Hoved */
.ab-listen__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s3, 12px);
    margin-bottom: var(--s4, 16px);
}

.ab-listen__question {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-label, #7a9ab0);
}

.ab-listen__axis {
    font-size: 1.05rem;
    color: var(--text-title, #c8d8ea);
    font-weight: 500;
}

/* Kildevalg */
.ab-listen__sources {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2, 8px);
    margin-bottom: var(--s4, 16px);
}

.ab-listen__source {
    background: transparent;
    border: 1px solid var(--border-button, #243848);
    color: var(--text-label, #7a9ab0);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 0.82rem;
    font-family: inherit;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.ab-listen__source:hover {
    color: var(--text-value, #c0d0e2);
    border-color: var(--border-divider, #243848);
}

.ab-listen__source[aria-selected="true"] {
    color: var(--bg-deep, #080e14);
    background: var(--text-title, #c8d8ea);
    border-color: var(--text-title, #c8d8ea);
}

/* Transport */
.ab-listen__transport {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s4, 16px);
}

.ab-listen__play {
    background: transparent;
    border: 1px solid var(--teal, #4bb8e0);
    color: var(--teal, #4bb8e0);
    border-radius: 6px;
    padding: 10px 22px;
    font-size: 0.88rem;
    font-family: inherit;
    letter-spacing: 0.04em;
    cursor: pointer;
    min-width: 96px;
    transition: background 0.15s ease, color 0.15s ease;
}

.ab-listen__play:hover,
.ab-listen__play--on {
    background: var(--teal, #4bb8e0);
    color: var(--bg-deep, #080e14);
}

/* A/B-kontakten. Bevidst stor og med to synlige tilstande - den skal
   indbyde til at blive trykket paa gentagne gange. */
.ab-listen__switch {
    display: flex;
    border: 1px solid var(--border-button, #243848);
    border-radius: 6px;
    overflow: hidden;
}

.ab-listen__ab {
    background: transparent;
    border: 0;
    color: var(--text-label, #7a9ab0);
    padding: 10px 20px;
    font-size: 0.88rem;
    font-family: inherit;
    cursor: pointer;
    min-width: 92px;
    transition: background 0.12s ease, color 0.12s ease;
}

.ab-listen__ab + .ab-listen__ab {
    border-left: 1px solid var(--border-button, #243848);
}

.ab-listen__ab:hover {
    color: var(--text-value, #c0d0e2);
}

.ab-listen__ab--on {
    background: var(--text-title, #c8d8ea);
    color: var(--bg-deep, #080e14);
}

/* Fod */
.ab-listen__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3, 12px);
    margin-top: var(--s4, 16px);
    font-size: 0.8rem;
    color: var(--text-unit, #6888a0);
}

.ab-listen__matched {
    border: 1px solid var(--border-button, #243848);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--text-label, #7a9ab0);
    white-space: nowrap;
    cursor: help;
}

/* Fokus skal vaere synligt - lytteren betjenes ogsaa med tastatur. */
.ab-listen button:focus-visible {
    outline: 2px solid var(--teal, #4bb8e0);
    outline-offset: 2px;
}

@media (max-width: 560px) {
    .ab-listen { padding: var(--s4, 16px); }
    .ab-listen__transport { gap: var(--s3, 12px); }
    .ab-listen__play,
    .ab-listen__switch { width: 100%; }
    .ab-listen__ab { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .ab-listen * { transition: none !important; }
}