/* The Calibre Brief episode producer.
   Every color is declared for light mode on the page class and re-declared
   under body[data-theme='dark'] (the site's theme mechanism), keeping text at
   readable contrast on both grounds. */

.calibre-brief-page {
    --cb-text: #14183e;
    --cb-muted: #4a5170;
    --cb-card-bg: #f6f8fc;
    --cb-card-border: rgba(20, 24, 62, 0.14);
    --cb-card-hover-border: rgba(20, 24, 62, 0.3);
    --cb-accent: #1363c6;
    --cb-accent-soft: rgba(19, 99, 198, 0.08);
    --cb-track: rgba(20, 24, 62, 0.12);
    --cb-ok: #135c34;
    --cb-ok-soft: rgba(28, 122, 70, 0.12);
    --cb-err: #b3261e;
    --cb-err-soft: rgba(179, 38, 30, 0.1);
    --cb-warn: #8a5a00;
    --cb-warn-soft: rgba(138, 90, 0, 0.12);
}

body[data-theme='dark'].calibre-brief-page {
    --cb-text: #e9edf7;
    --cb-muted: rgba(233, 239, 255, 0.75);
    --cb-card-bg: #1d2740;
    --cb-card-border: rgba(255, 255, 255, 0.14);
    --cb-card-hover-border: rgba(255, 255, 255, 0.35);
    --cb-accent: #7ce7ff;
    --cb-accent-soft: rgba(21, 172, 225, 0.14);
    --cb-track: rgba(255, 255, 255, 0.16);
    --cb-ok: #6fe3a1;
    --cb-ok-soft: rgba(111, 227, 161, 0.14);
    --cb-err: #ff8896;
    --cb-err-soft: rgba(255, 136, 150, 0.12);
    --cb-warn: #ffd47e;
    --cb-warn-soft: rgba(255, 212, 126, 0.14);
}

/* --- Voice picker --------------------------------------------------------- */

.cb-voice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 0.75rem;
}

.cb-voice-card {
    position: relative;
    display: flex;
    align-items: stretch;
    border: 2px solid var(--cb-card-border);
    border-radius: 14px;
    background: var(--cb-card-bg);
    transition: border-color 0.15s ease;
}

.cb-voice-card:hover {
    border-color: var(--cb-card-hover-border);
}

/* The radio itself is visually hidden; the whole label is the target. Checked
   and keyboard-focus states are drawn on the card so they stay obvious. */
.cb-voice-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.cb-voice-card:has(.cb-voice-radio:checked) {
    border-color: var(--cb-accent);
    background: var(--cb-accent-soft);
}

.cb-voice-card:has(.cb-voice-radio:focus-visible) {
    outline: 3px solid var(--cb-accent);
    outline-offset: 2px;
}

.cb-voice-label {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.65rem 0.25rem 0.65rem 0.9rem;
    cursor: pointer;
    min-width: 0;
}

.cb-voice-name {
    font-weight: 600;
    text-transform: capitalize;
    color: var(--cb-text);
}

.cb-voice-note {
    font-size: 0.82rem;
    line-height: 1.25;
    color: var(--cb-muted);
}

.cb-default-badge {
    background: var(--cb-accent-soft);
    color: var(--cb-accent);
    border: 1px solid var(--cb-accent);
    font-size: 0.62rem;
    text-transform: uppercase;
    vertical-align: middle;
}

.cb-voice-play {
    flex: 0 0 auto;
    align-self: center;
    width: 2.4rem;
    height: 2.4rem;
    margin-right: 0.6rem;
    border-radius: 50%;
    border: 1px solid var(--cb-card-border);
    background: transparent;
    color: var(--cb-text);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.cb-voice-play:hover {
    background: var(--cb-accent);
    border-color: var(--cb-accent);
    color: #fff;
}

body[data-theme='dark'].calibre-brief-page .cb-voice-play:hover {
    color: #14183e;
}

.cb-voice-play:focus-visible {
    outline: 3px solid var(--cb-accent);
    outline-offset: 2px;
}

.cb-voice-play[aria-pressed='true'] {
    background: var(--cb-accent);
    border-color: var(--cb-accent);
    color: #fff;
}

body[data-theme='dark'].calibre-brief-page .cb-voice-play[aria-pressed='true'] {
    color: #14183e;
}

/* --- Episode list --------------------------------------------------------- */

/* Compact cards in a responsive grid so many episodes browse comfortably;
   players stay collapsed until asked for. */
.cb-episode-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(430px, 100%), 1fr));
    gap: 1rem;
    align-items: start;
}

.cb-episode {
    border: 1px solid var(--cb-card-border);
    border-radius: 16px;
    background: var(--cb-card-bg);
    padding: 1rem 1.1rem;
    /* Room for the fixed navbar when a freshly created episode is scrolled to. */
    scroll-margin-top: 96px;
}

.cb-episode:focus-visible,
.cb-episode:focus {
    outline: 3px solid var(--cb-accent);
    outline-offset: 2px;
}

/* An opened player takes the full width of the episodes container; the grid
   is only for browsing collapsed cards. */
.cb-episode.cb-expanded {
    grid-column: 1 / -1;
}

.cb-episode-topic {
    font-size: 1rem;
    font-weight: 600;
    color: var(--cb-text);
    margin: 0;
    overflow-wrap: anywhere;
}

.cb-episode-meta {
    color: var(--cb-muted);
    font-size: 0.82rem;
}

.cb-badge {
    display: inline-block;
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: 1px solid transparent;
    white-space: nowrap;
}

.cb-badge-voice {
    background: var(--cb-accent-soft);
    border-color: var(--cb-accent);
    color: var(--cb-accent);
    text-transform: capitalize;
}

.cb-badge-running {
    background: var(--cb-accent-soft);
    border-color: var(--cb-accent);
    color: var(--cb-accent);
}

.cb-badge-complete {
    background: var(--cb-ok-soft);
    border-color: var(--cb-ok);
    color: var(--cb-ok);
}

.cb-badge-failed {
    background: var(--cb-err-soft);
    border-color: var(--cb-err);
    color: var(--cb-err);
}

.cb-badge-stalled {
    background: var(--cb-warn-soft);
    border-color: var(--cb-warn);
    color: var(--cb-warn);
}

.cb-progress {
    height: 0.5rem;
    border-radius: 999px;
    background: var(--cb-track);
    overflow: hidden;
}

.cb-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--cb-accent);
    transition: width 0.6s ease;
}

.cb-progress-fill.is-complete {
    background: var(--cb-ok);
}

.cb-progress-fill.is-failed {
    background: var(--cb-err);
}

.cb-stage {
    color: var(--cb-muted);
    font-size: 0.85rem;
}

.cb-error {
    border: 1px solid var(--cb-err);
    background: var(--cb-err-soft);
    color: var(--cb-err);
    border-radius: 10px;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    overflow-wrap: anywhere;
}

.cb-episode video {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    background: #000;
    display: block;
}

.cb-episode audio {
    width: 100%;
    display: block;
}

/* Skip link (Section 508): invisible until keyboard-focused. */
.cb-skip-link:focus {
    position: absolute;
    z-index: 2000;
    top: 8px;
    left: 8px;
    padding: 0.6rem 1rem;
    border-radius: 8px;
    background: var(--cb-accent);
    color: #fff;
    text-decoration: none;
    outline: 3px solid #fff;
}

body[data-theme='dark'].calibre-brief-page .cb-skip-link:focus {
    color: #14183e;
    outline-color: #14183e;
}

@media (prefers-reduced-motion: reduce) {
    .cb-voice-card,
    .cb-voice-play,
    .cb-progress-fill {
        transition: none;
    }

    /* The wow.js entrance animations never run for reduced-motion users. */
    .calibre-brief-page .wow {
        animation: none !important;
        transition: none !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* Public episode watch page. */
.cb-watch-wrap {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cb-watch-video {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    background: #000;
    display: block;
}

.cb-watch-youtube {
    display: flex;
    justify-content: center;
}

.cb-watch-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}