/* Episode Page Specific Styles */

.episode-hero {
    background: var(--gradient-primary);
    color: var(--color-text-on-primary);
    padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-lg);
    text-align: center;
}

/* Large episode number with the session beneath it, above the title */
.episode-hero-number {
    font-size: 4rem;
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.02em;
    margin: 0;
    opacity: 0.95;
}

.episode-hero-session {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    opacity: 0.8;
    margin: 0.35rem 0 var(--spacing-sm);
}

.episode-hero h1 {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--spacing-sm);
    font-weight: var(--font-weight-extrabold);
    line-height: 1.2;
}

.episode-subtitle {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-sm);
    opacity: 0.95;
    font-style: italic;
    color: var(--color-text-on-primary);
}

.episode-meta {
    display: flex;
    gap: 2rem;
    justify-content: center;
    font-size: 0.95rem;
    opacity: 0.9;
}

/* Hidden copy button: the duration's clock icon copies the episode title,
   subtitle, and length (copy-episode.js). Looks exactly like the plain icon. */
.copy-episode {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    color: inherit;
    font: inherit;
    line-height: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.copy-episode:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
    border-radius: 4px;
}

/* Episode Navigation */
.episode-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
    align-items: center;
    background: var(--color-bg-white);
    padding: 1.5rem;
    border-radius: 12px;
    margin: -1.5rem auto 2rem;
    box-shadow: var(--shadow-lg);
    position: relative;
    z-index: 10;
}

/* Top nav sticks to the viewport once scrolled past; sticky-nav.js toggles .is-stuck */
.episode-nav-sticky {
    position: -webkit-sticky; /* Safari < 13 */
    position: sticky;
    top: 0;
    z-index: var(--z-header);
}

.episode-nav-sticky .episode-nav {
    transition: padding var(--transition-fast), border-radius var(--transition-fast);
}

.episode-nav-sticky.is-stuck .episode-nav {
    padding: 0.6rem 1.5rem;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* Keep anchored headings (e.g. #my-notes) from hiding under the sticky nav */
html {
    scroll-padding-top: 5rem;
}

.episode-nav-left {
    justify-self: start;
}

.episode-nav-center {
    justify-self: center;
}

.episode-nav-right {
    justify-self: end;
}

/* Navigation buttons use shared .btn system from common.css */
/* Uses: .btn .btn-sm .btn-primary, .btn .btn-sm .btn-outline, .btn .btn-sm .btn-disabled */

/* Episode Player Section */
/* Uses .section-container from common.css */
.episode-player-section {
    margin-bottom: var(--spacing-lg);
}

.episode-player-section h2 {
    color: var(--color-text-dark);
    margin-bottom: 1.5rem;
    font-size: 1.8rem;
    border-bottom: 3px solid var(--color-primary);
    padding-bottom: 0.5rem;
    display: inline-block;
}

.player-container {
    margin: 1.5rem 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    container: player / inline-size;
}

.player-container iframe {
    display: block;
    max-width: 100%;
    height: 200px;
}

/* The Fireside embed shrinks its player as it narrows but its page has a white
   background, so a 200px iframe shows a white band under a short player.
   Match the iframe to the player's height at each width (measured from the
   v2 player; where it scales with width, stay ~2px short so any mismatch
   clips the player's black edge rather than showing white). */
@container player (max-width: 679px) {
    .player-container iframe { height: 130px; }
}

@container player (max-width: 619px) {
    .player-container iframe { height: calc(20cqw - 2px); }
}

@container player (max-width: 539px) {
    .player-container iframe { height: 107px; }
}

@container player (max-width: 479px) {
    .player-container iframe { height: calc(20cqw - 2px); }
}

@container player (max-width: 409px) {
    .player-container iframe { height: 80px; }
}

@container player (max-width: 299px) {
    .player-container iframe { height: 92px; }
}

/* Episode Info Grid */
.episode-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.info-card {
    background: var(--color-bg-light);
    padding: 1.5rem;
    border-radius: 12px;
    border-left: 4px solid var(--color-primary);
}

.info-card h3 {
    color: var(--color-text-dark);
    margin: 0 0 1rem 0;
    font-size: 1.2rem;
}

.info-card p {
    margin: 0.5rem 0;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.info-card strong {
    color: var(--color-text-dark);
}

/* Episode Description */
.episode-description {
    background: var(--gradient-subtle);
    padding: 1.5rem;
    border-radius: 12px;
    margin-top: 2rem;
}

.episode-description h3 {
    color: var(--color-text-dark);
    margin: 0 0 1rem 0;
    font-size: 1.2rem;
}

.episode-description p {
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0;
}

.episode-description a {
    color: var(--color-primary);
}

.episode-description a:hover {
    color: var(--color-primary-dark);
}

/* Previous versions of the notes: an accordion at the end of the notes,
   with tabs between versions once previous-versions.js runs */
.previous-versions {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border-light);
}

.pv-accordion {
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    background: var(--color-bg-light);
}

.pv-accordion > summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    color: var(--color-text-dark);
    font-weight: var(--font-weight-semibold);
    transition: background var(--transition-fast);
}

.pv-accordion > summary::-webkit-details-marker {
    display: none;
}

.pv-accordion > summary:hover {
    background: var(--color-primary-light);
}

.pv-accordion[open] > summary {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.pv-accordion > summary .icon {
    color: var(--color-primary);
}

.pv-count {
    padding: 0 0.5rem;
    border-radius: var(--radius-pill);
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-size: var(--font-size-sm);
}

.pv-chevron {
    margin-left: auto;
    transition: transform var(--transition-base);
}

.pv-accordion[open] .pv-chevron {
    transform: rotate(180deg);
}

.pv-body {
    padding: var(--spacing-xs) 1rem var(--spacing-md);
    background: var(--color-bg-white);
    border-top: 1px solid var(--color-border-light);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.pv-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: var(--spacing-sm) 0 0;
}

/* display:flex would otherwise override the hidden attribute */
.pv-tabs[hidden],
.pv-pane[hidden] {
    display: none;
}

.pv-tab {
    font: inherit;
    font-size: var(--font-size-sm);
    padding: 0.35rem 0.9rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border-light);
    background: var(--color-bg-light);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.pv-tab:hover {
    color: var(--color-text-dark);
    border-color: var(--color-primary);
}

.pv-tab.active {
    background: var(--color-fill-primary);
    border-color: var(--color-fill-primary);
    color: var(--color-text-on-primary);
}

.pv-pane + .pv-pane {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-sm);
    border-top: 2px dashed var(--color-border-light);
}

.content-area .pv-pane-label {
    margin-top: var(--spacing-sm);
}

/* With tabs, the tab names label the versions; keep headings for screen readers */
.pv-tabs-ready .pv-pane-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.pv-tabs-ready .pv-pane + .pv-pane {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* "Next episode" card at the end of the article (also Safari Reader's next-page link) */
.up-next {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--spacing-lg);
    padding: var(--spacing-sm) 1.25rem;
    border: 1px solid var(--color-border-light);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-md);
    background: var(--color-bg-light);
    color: var(--color-text-dark);
    text-decoration: none;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.up-next:hover {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
}

.up-next-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.up-next-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-primary);
}

.up-next-title {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-md);
    margin-top: 0.15rem;
}

.up-next-subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    font-style: italic;
}

.up-next-arrow {
    flex-shrink: 0;
    margin-left: var(--spacing-sm);
    width: 1.5em;
    height: 1.5em;
    color: var(--color-primary);
    transition: transform var(--transition-fast);
}

.up-next:hover .up-next-arrow {
    transform: translateX(3px);
}

/* My Notes Section (reader's own notes, stored in localStorage) */
.my-notes {
    margin-bottom: var(--spacing-lg);
}

.my-notes-intro {
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
    margin: 0 0 var(--spacing-sm);
}

.my-notes-text {
    display: block;
    width: 100%;
    min-height: 10rem;
    padding: var(--spacing-sm);
    font: inherit;
    line-height: 1.6;
    color: var(--color-text-primary);
    background: var(--color-bg-light);
    border: 2px solid var(--color-border-light);
    border-radius: var(--radius-md);
    resize: vertical;
    transition: border-color var(--transition-fast);
}

.my-notes-text:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

.my-notes-text:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

.my-notes-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

.my-notes-status {
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
}

.my-notes-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-xs);
}

/* Lighter than the page's main buttons: these are secondary tools */
.my-notes-actions .btn {
    padding: 0.4rem 0.9rem;
    border-width: 1px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.my-notes-actions .btn:hover {
    transform: none;
}

/* Clear is destructive: muted until hovered, then red */
.my-notes-actions [data-notes-action="clear"] {
    color: var(--color-text-tertiary);
    border-color: var(--color-border-light);
}

.my-notes-actions [data-notes-action="clear"]:hover {
    background: var(--color-accent-red-light);
    color: var(--color-accent-red-dark);
    border-color: var(--color-accent-red);
}

/* Export all covers every episode, so set it apart from the this-note actions */
.my-notes-actions [data-notes-action="export-all"] {
    margin-left: var(--spacing-sm);
}

/* Matches .btn-disabled in common.css */
.my-notes-actions .btn:disabled {
    background: var(--color-bg-gray);
    color: var(--color-text-light);
    border-color: var(--color-bg-gray);
    cursor: not-allowed;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Episode Notes Section */
/* Uses .section-container from common.css */
.episode-notes-section {
    margin-bottom: var(--spacing-lg);
}

.notes-header h2 {
    color: var(--color-text-dark);
    margin-bottom: 1rem;
    font-size: 1.8rem;
    border-bottom: 3px solid var(--color-primary);
    padding-bottom: 0.5rem;
    display: inline-block;
}

.notes-disclaimer {
    background: var(--color-accent-yellow-light);
    border-left: 4px solid var(--color-accent-yellow);
    padding: 1rem;
    margin: 1.5rem 0;
    border-radius: 8px;
    font-size: 0.95rem;
}

.notes-disclaimer em {
    color: var(--color-accent-yellow-dark);
}

/* Pointer to My Notes, under the disclaimer: quieter than the notes themselves */
.notes-own {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: -0.75rem 0 1.5rem;
}

.notes-own a {
    color: var(--color-primary);
}

/* Notes Content - Uses shared .content-area typography from common.css */
.notes-content {
    margin-top: var(--spacing-lg);
}

/* Responsive */
@media (max-width: 768px) {
    .episode-hero h1 {
        font-size: var(--font-size-xl);
    }

    .episode-hero-number {
        font-size: 3.25rem;
    }

    .episode-subtitle {
        font-size: var(--font-size-md);
    }

    .episode-meta {
        flex-direction: column;
        gap: var(--spacing-xs);
    }

    .episode-player-section h2,
    .notes-header h2,
    .my-notes h2 {
        font-size: var(--font-size-lg);
    }

    /* Nav stays one row (it's sticky, so it must stay short); labels shorten via .hide-mobile */
    .episode-nav,
    .episode-nav-sticky.is-stuck .episode-nav {
        gap: var(--spacing-xs);
        padding: 0.6rem;
    }

    .episode-nav .btn-sm {
        padding: 0.55rem 0.8rem;
        white-space: nowrap;
    }

    .episode-info-grid {
        grid-template-columns: 1fr;
    }
}

/* Smallest phones: the three nav buttons need tighter padding to share one row */
@media (max-width: 360px) {
    .episode-nav,
    .episode-nav-sticky.is-stuck .episode-nav {
        padding: 0.5rem;
    }

    .episode-nav .btn-sm {
        padding: 0.5rem 0.55rem;
    }
}

@media (max-width: 480px) {
    .pv-accordion > summary {
        padding: 0.75rem 0.85rem;
    }

    .pv-body {
        padding-left: 0.85rem;
        padding-right: 0.85rem;
    }

    .pv-tab {
        font-size: var(--font-size-xs);
        padding: 0.35rem 0.7rem;
    }
}

@media (max-width: 480px) {
    .my-notes-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .my-notes-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .my-notes-actions .btn {
        padding: 0.55rem 0.5rem;
    }

    .my-notes-actions [data-notes-action="export-all"] {
        grid-column: 1 / -1;
        margin-left: 0;
    }
}

/* ============================================
   FLEX GAP FALLBACKS (Safari < 14.1)
   theme-switcher.js adds html.no-flex-gap when flex `gap` is unsupported.
   Margins mirror the gap values above, per breakpoint.
   ============================================ */
.no-flex-gap .episode-meta > * + * {
    margin-left: 2rem;
}

.no-flex-gap .pv-accordion > summary > * + * {
    margin-left: 0.6rem;
}

.no-flex-gap .pv-tabs > * {
    margin-right: 0.4rem;
    margin-bottom: 0.4rem;
}

.no-flex-gap .my-notes-footer > * + * {
    margin-left: var(--spacing-sm);
}

/* Right/bottom only: Export all keeps its own left margin */
.no-flex-gap .my-notes-actions > * {
    margin-right: var(--spacing-xs);
    margin-bottom: var(--spacing-xs);
}

/* No trailing margin, or the right-aligned group shifts left */
.no-flex-gap .my-notes-actions > :last-child {
    margin-right: 0;
}

.no-flex-gap .my-notes-actions {
    margin-bottom: calc(-1 * var(--spacing-xs));
}

@media (max-width: 768px) {
    .no-flex-gap .episode-meta > * + * {
        margin-left: 0;
        margin-top: var(--spacing-xs);
    }
}

@media (max-width: 480px) {
    .no-flex-gap .my-notes-footer > * + * {
        margin-left: 0;
        margin-top: var(--spacing-sm);
    }

    /* Actions become a grid here, and grid gap works in these browsers */
    .no-flex-gap .my-notes-actions {
        margin-bottom: 0;
    }

    .no-flex-gap .my-notes-actions > * {
        margin: 0;
    }
}

/* Print: the notes as a clean document. Header block with the episode
   details, the notes with link addresses, and the reader's own note if they
   wrote one ("About This Episode" instead when there are no notes yet). Navigation, the player,
   previous versions, and the Next episode card stay on screen only. */
@media print {
    .episode-nav-sticky,
    .episode-nav,
    .player-container,
    .episode-info-grid,
    .episode-player-section > h2,
    .previous-versions,
    .up-next,
    .notes-own,
    .my-notes-intro,
    .my-notes-text,
    .my-notes-footer {
        display: none !important;
    }

    /* Episode header */
    .episode-hero {
        background: none;
        color: #000;
        text-align: left;
        padding: 0 0 0.6em;
        margin-bottom: 1.2em;
        border-bottom: 2px solid #000;
    }

    .episode-hero-number {
        font-size: 26pt;
        opacity: 1;
    }

    .episode-hero-session {
        opacity: 1;
        margin: 0.2em 0 0.4em;
    }

    .episode-hero h1 {
        font-size: 18pt;
        margin: 0 0 0.2em;
    }

    .episode-subtitle {
        font-size: 12pt;
        color: #222;
        margin: 0 0 0.4em;
    }

    .episode-meta {
        justify-content: flex-start;
        flex-direction: row;
        gap: 1.5em;
        font-size: 10pt;
        opacity: 1;
    }

    .no-flex-gap .episode-meta > * + * {
        margin: 0 0 0 1.5em;
    }

    /* About This Episode prints only when there are no notes to print
       (it's the article body then); otherwise the notes start right away */
    .episode-player-section:not([itemprop="articleBody"]) {
        display: none !important;
    }

    .episode-player-section {
        margin-bottom: 1em;
    }

    .episode-description {
        background: none;
        padding: 0;
        margin: 0;
        border-radius: 0;
    }

    /* Notes */
    .notes-header h2,
    .my-notes h2 {
        font-size: 14pt;
        border-bottom: 1px solid #000;
        margin-top: 0.4em;
    }

    .notes-disclaimer {
        background: none;
        border-left: 2px solid #000;
        padding: 0.2em 0 0.2em 0.8em;
        font-size: 9.5pt;
    }

    .notes-content a[href^="http"]::after,
    .episode-description a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 8.5pt;
        color: #444;
        word-break: break-all;
    }

    /* The reader's own note prints as text; without one the section is omitted */
    .my-notes:not(.my-notes-has-text) {
        display: none !important;
    }

    .my-notes-print {
        white-space: pre-wrap;
        border-left: 2px solid #000;
        padding-left: 0.8em;
    }

    .print-source {
        margin-top: 1.5em;
        padding-top: 0.4em;
        border-top: 1px solid #999;
        font-size: 8.5pt;
        color: #444;
    }
}