/*
 * Mineral Signals player instrument (SKR-461).
 *
 * Runtime markup and access decisions remain in the existing player/dock
 * components. This layer only gives their controls a consistent paper surface,
 * target geometry and responsive arrangement. It deliberately consumes the
 * shared semantic tokens from styles.css rather than redefining them here.
 */

.podcast-player,
.podcast-player-pending {
    background: var(--reading);
    border-color: var(--rule);
    border-width: 1px;
    padding: clamp(var(--s-2), 2vw, var(--s0));
}

.podcast-player__edition-label,
.podcast-player__edition-value,
.podcast-player__status,
.podcast-player__settings > summary,
.podcast-player__key,
.podcast-player__options label,
.podcast-player__editions label,
.podcast-player-dock {
    font-family: var(--font-sans);
}

/* The range remains the real control. Its generous box makes keyboard and
 * touch interaction independent of the deliberately thin visual rule below. */
.podcast-player__scrub {
    min-block-size: 44px;
    padding-block: 16px;
}

.podcast-player__bar {
    background: var(--rule);
    block-size: 2px;
}

.podcast-player__fill,
.podcast-player__chapter-bar > span {
    background: var(--ink);
}

.podcast-player__seek {
    block-size: 44px;
    inset-block-start: 0;
}

.podcast-player__seek::-webkit-slider-runnable-track {
    block-size: 44px;
}

.podcast-player__seek::-webkit-slider-thumb {
    background: var(--reading);
    border: 2px solid var(--ink);
    block-size: 16px;
    inline-size: 16px;
    margin-block-start: 14px;
}

.podcast-player__seek::-moz-range-track {
    background: transparent;
    block-size: 44px;
}

.podcast-player__seek::-moz-range-thumb {
    background: var(--reading);
    border: 2px solid var(--ink);
    block-size: 16px;
    inline-size: 16px;
}

.podcast-player__transport {
    align-items: center;
    gap: var(--s-2);
}

/* Only Play/Pause is filled. Every frequent secondary control has an explicit
 * 44px target; labels and details receive the same geometry without being
 * misrepresented as primary transport. */
.podcast-player__key,
.podcast-player__settings > summary {
    align-items: center;
    background: transparent;
    border: 1px solid var(--border);
    box-sizing: border-box;
    color: var(--ink);
    display: inline-flex;
    justify-content: center;
    min-block-size: 44px;
    min-inline-size: 44px;
    padding: 0 var(--s-2);
}

.podcast-player__key:hover,
.podcast-player__settings > summary:hover {
    background: var(--tint);
}

/* These match the legacy state selectors' specificity so an open disclosure
 * remains a quiet secondary control. The global focus outline stays visible. */
.podcast-player__settings[open] > summary {
    background: var(--tint);
    border-color: var(--border);
    color: var(--ink);
}

.podcast-player__play {
    align-items: center;
    background: var(--ink);
    border: 1px solid var(--ink);
    block-size: 56px;
    color: var(--canvas);
    display: inline-flex;
    flex: 0 0 56px;
    inline-size: 56px;
    justify-content: center;
    padding: 0;
}

.podcast-player__play:hover {
    background: var(--focus);
    border-color: var(--focus);
}

.podcast-player__play svg {
    block-size: 22px;
    inline-size: 22px;
}

.podcast-player__editions {
    gap: var(--s-3);
}

.podcast-player__editions label,
.podcast-player__options label {
    align-items: center;
    border-color: var(--border);
    min-block-size: 44px;
    padding: var(--s-4) var(--s-2);
}

.podcast-player__editions input:checked + label,
.podcast-player__options input:checked + label {
    background: var(--tint);
    border-color: var(--ink);
    color: var(--ink);
}

.podcast-player__menu {
    background: var(--reading);
    border: 1px solid var(--border);
    box-shadow: none;
}

.podcast-player__gate {
    background: var(--tint);
    border-inline-start-color: var(--focus);
}

.podcast-player__cta {
    background: transparent;
    border-color: var(--border);
    color: var(--ink);
    min-block-size: 44px;
    padding: var(--s-4) var(--s-2);
}

.podcast-player__stay {
    border-color: var(--border);
    min-block-size: 44px;
}

.podcast-player__stay:hover,
.podcast-player__stay:focus-visible {
    background: var(--tint);
    border-color: var(--border);
    color: var(--ink);
}

/* The fixed dock shares the paper instrument but keeps its episode context
 * compact. It reserves enough document space for the 56px Play/Pause target. */
.podcast-player-dock {
    background: var(--reading);
    border-block-start-color: var(--rule);
    border-block-start-width: 1px;
}

.podcast-player-dock .podcast-player__play {
    block-size: 56px;
    flex-basis: 56px;
    inline-size: 56px;
}

.podcast-player-dock .podcast-player__play svg {
    block-size: 22px;
    inline-size: 22px;
}

.podcast-player-dock .podcast-player__key {
    block-size: 44px;
    inline-size: 44px;
    min-block-size: 44px;
    min-inline-size: 44px;
    padding: 0;
}

.podcast-player-dock .podcast-player__scrub {
    min-block-size: 44px;
    padding-block: 16px;
}

.podcast-player-dock .podcast-player__seek {
    block-size: 44px;
    inset-block-start: 0;
}

.podcast-player-dock .podcast-player__seek::-webkit-slider-runnable-track,
.podcast-player-dock .podcast-player__seek::-moz-range-track {
    block-size: 44px;
}

/* These values cover the visible 56px primary control and the narrow dock's
 * second clock row. The old shorter values applied before the target rule. */
:root:has(.podcast-player-dock:not([hidden])) {
    --dock-space: 4.75rem;
}

@media (max-width: 612px) {
    :root:has(.podcast-player-dock:not([hidden])) {
        --dock-space: 7.25rem;
    }
}

@container player (max-width: 27rem) {
    .podcast-player__transport {
        display: grid;
        grid-template-columns: repeat(3, minmax(44px, 1fr));
    }

    .podcast-player__gap {
        display: none;
    }

    .podcast-player__play {
        justify-self: center;
    }

    .podcast-player__settings {
        grid-column: 1 / -1;
        justify-self: stretch;
    }

    .podcast-player__settings > summary {
        inline-size: 100%;
    }
}

@container dock (max-width: 38rem) {
    .podcast-player-dock__keys {
        gap: var(--s-3);
    }

    .podcast-player-dock__chapter-key {
        display: none;
    }
}