/* Positively Pedestrian: player and episode-page additions (2026-10-04).
   Tokens first, then the previous/next pager. The interactive player,
   mini bar and transcript flag are added below by the player work. */

.ep-pager { display: grid; gap: .5rem; margin-top: .25rem; }
.ep-pager-link {
    display: flex; align-items: center; gap: .75rem;
    padding: .5rem .75rem; min-height: 44px;
    background: var(--subtle); border: 1px solid var(--border-lt); border-radius: var(--radius);
    color: var(--text); text-decoration: none;
}
.ep-pager-link:hover { border-color: var(--border); text-decoration: none; }
.ep-pager-link img { width: 48px; height: 48px; flex: none; border-radius: 6px; object-fit: cover; }
.ep-pager-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.ep-pager-dir { font: 700 .68rem var(--ff-h); letter-spacing: .08em; text-transform: uppercase; color: var(--text-mid); }
.ep-pager-title { font: 700 .9rem var(--ff-h); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-pager-date { font-size: .75rem; color: var(--text-mid); }
.ep-pager-next { text-align: left; }
@media (min-width: 640px) { .ep-pager { grid-template-columns: 1fr 1fr; } }

/* ── Player tokens ───────────────────────────────────────────────────────────
   The player card follows the site's light tokens; a manual dark theme (when
   the rest of the site gets one) only needs [data-theme="dark"] overrides here. */
:root {
    --pp-bar:        var(--border-lt);
    --pp-buffered:   var(--border);
    --pp-played:     var(--text-link);
    --pp-tick:       var(--dark);
    --pp-thumb:      var(--dark);
    --pp-btn-bg:     var(--card);
    --pp-btn-fg:     var(--text);
    --pp-btn-border: var(--border);
    --pp-play-bg:    var(--dark);
    --pp-play-fg:    #fff;
    --pp-warn:       var(--amber);
}
:root[data-theme="dark"] {
    --pp-bar:        #3a3733;
    --pp-buffered:   #5a564f;
    --pp-played:     #7ee08c;
    --pp-tick:       #f5f0e8;
    --pp-thumb:      #f5f0e8;
    --pp-btn-bg:     #2b2825;
    --pp-btn-fg:     #f5f0e8;
    --pp-btn-border: #6b665d;
    --pp-play-bg:    #f5f0e8;
    --pp-play-fg:    #231f20;
    --pp-warn:       #ffb454;
}

/* ── Hero player ─────────────────────────────────────────────────────────── */
.pp-player[hidden], .pp-resume[hidden], .pp-error[hidden], .pp-menu[hidden], .pp-tip[hidden],
.pp-btn[hidden], .pp-minibar[hidden], .pp-mini-art[hidden] { display: none !important; }

.pp-player { display: flex; flex-direction: column; gap: .25rem; }
.pp-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.pp-spacer { flex: 1 1 0; min-width: 0; }

.pp-btn {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    min-width: 44px; min-height: 44px; padding: 0 .5rem;
    background: var(--pp-btn-bg); color: var(--pp-btn-fg);
    border: 1px solid var(--pp-btn-border); border-radius: 999px;
    font: 700 .8rem var(--ff-h); line-height: 1;
}
.pp-btn:hover { border-color: var(--pp-btn-fg); }
.pp-btn--play { min-width: 52px; min-height: 52px; background: var(--pp-play-bg); color: var(--pp-play-fg); border-color: var(--pp-play-bg); }
.pp-btn--play:hover { border-color: var(--pp-play-bg); filter: brightness(1.15); }
.pp-btn--text { padding: 0 .75rem; border-radius: 8px; }
.pp-btn--icon { padding: 0; }

.pp-icon-pause, .pp-icon-muted { display: none; }
.pp-btn[aria-pressed="true"] .pp-icon-play { display: none; }
.pp-btn[aria-pressed="true"] .pp-icon-pause { display: inline; }
.pp-btn--icon[aria-pressed="true"] .pp-icon-vol { display: none; }
.pp-btn--icon[aria-pressed="true"] .pp-icon-muted { display: inline; }
.pp-player.is-buffering .pp-btn--play { opacity: .7; cursor: progress; }

.pp-time { font: 400 .8rem var(--ff-m); color: var(--text-mid); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Resume chip */
.pp-resume { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .25rem; }
.pp-chip {
    min-height: 44px; padding: 0 .9rem; border-radius: 999px;
    background: var(--pp-btn-bg); color: var(--pp-btn-fg); border: 1px solid var(--pp-btn-border);
    font: 700 .8rem var(--ff-h);
}
.pp-chip--main { background: var(--pp-play-bg); color: var(--pp-play-fg); border-color: var(--pp-play-bg); }
.pp-chip:hover { filter: brightness(1.1); }

/* Scrubber: 44 px tall hit area around a 6 px bar; ticks and thumb rise above the bar for 3:1 contrast. */
.pp-scrub { position: relative; height: 44px; margin-top: .125rem; cursor: pointer; touch-action: pan-y; user-select: none; }
.pp-track { position: absolute; left: 0; right: 0; top: 50%; height: 6px; transform: translateY(-50%); background: var(--pp-bar); border-radius: 3px; }
.pp-buffered, .pp-played { position: absolute; inset: 0; border-radius: 3px; transform-origin: left center; transform: scaleX(0); }
.pp-buffered { background: var(--pp-buffered); }
.pp-played { background: var(--pp-played); }
.pp-ticks { position: absolute; left: 0; right: 0; top: 50%; height: 16px; transform: translateY(-50%); pointer-events: none; }
.pp-tick { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--pp-tick); opacity: .75; }
.pp-thumb {
    position: absolute; top: 50%; left: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px;
    border-radius: 50%; background: var(--pp-thumb); border: 2px solid var(--card); box-shadow: 0 1px 4px rgba(0,0,0,.35);
    pointer-events: none;
}
.pp-tip {
    position: absolute; bottom: calc(100% - 4px); left: 0; transform: translateX(-50%);
    max-width: 90%; padding: .25rem .5rem; border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    background: var(--dark); color: #fff; font: 600 .72rem var(--ff-h); pointer-events: none; z-index: 3;
}

/* Speed menu */
.pp-speedwrap { position: relative; }
.pp-menu {
    position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 20; min-width: 96px; list-style: none;
    padding: .25rem; background: var(--card); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.18);
}
.pp-menu-item {
    display: block; width: 100%; min-height: 44px; padding: 0 .75rem; text-align: left;
    background: none; border: 0; border-radius: 6px; color: var(--text); font: 600 .85rem var(--ff-h);
}
.pp-menu-item:hover { background: var(--subtle); }
.pp-menu-item[aria-checked="true"] { color: var(--text-link); }
.pp-menu-item[aria-checked="true"]::after { content: " \2713"; }

.pp-error { margin: .25rem 0 0; font-size: .85rem; color: var(--pp-warn); }
.pp-error a { color: inherit; }

.pp-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Shortcut help dialog */
.pp-help { max-width: min(92vw, 28rem); padding: 1.25rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); color: var(--text); }
.pp-help::backdrop { background: rgba(0,0,0,.5); }
.pp-help h3 { font: 800 1rem var(--ff-h); margin-bottom: .5rem; }
.pp-help dl { display: grid; grid-template-columns: auto 1fr; gap: .35rem .9rem; margin-bottom: 1rem; font-size: .9rem; line-height: 1.4; }
.pp-help dt { font-weight: 700; }
.pp-help kbd { font: 600 .8rem var(--ff-m); padding: .05rem .35rem; border: 1px solid var(--border); border-radius: 4px; background: var(--subtle); }
.pp-help-opt { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; font-size: .9rem; min-height: 44px; }
.pp-help-opt input { width: 20px; height: 20px; }

/* ── Sticky mini bar ─────────────────────────────────────────────────────── */
.pp-minibar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: flex; align-items: center; gap: .5rem;
    min-height: 64px; padding: .5rem .75rem calc(.5rem + env(safe-area-inset-bottom));
    background: var(--dark); color: #f5f0e8; box-shadow: 0 -2px 12px rgba(0,0,0,.25);
}
.pp-mini-art { width: 40px; height: 40px; flex: none; border-radius: 6px; object-fit: cover; }
.pp-mini-info {
    flex: 1 1 auto; min-width: 0; min-height: 44px; display: flex; flex-direction: column; justify-content: center;
    text-align: left; background: none; border: 0; color: inherit; font-family: var(--ff-h);
}
.pp-mini-title, .pp-mini-sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.3; }
.pp-mini-title { font-weight: 700; font-size: .85rem; }
.pp-mini-sub { font-size: .75rem; color: #d3ccc0; }
.pp-minibar .pp-btn { background: transparent; color: #f5f0e8; border-color: rgba(245,240,232,.45); }
.pp-minibar .pp-btn--play { background: #f5f0e8; color: #231f20; border-color: #f5f0e8; min-width: 48px; min-height: 48px; }
.pp-minibar :focus-visible { outline-color: #7ee08c; }
.pp-mini-skip { display: none; }
.pp-mini-progress { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: rgba(245,240,232,.25); }
.pp-mini-fill { height: 100%; background: #7ee08c; transform-origin: left center; transform: scaleX(0); }
body.has-minibar { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
@media (min-width: 480px) { .pp-mini-skip { display: inline-flex; } }

/* ── Transcript accuracy flag (tokens: Documentation/player-design.md 3.4) ─── */
:root {
    --tx-flag-unproofed-bg: #fff4d6; --tx-flag-unproofed-fg: #5c3d00; --tx-flag-unproofed-border: #8a5300;
    --tx-flag-proofed-bg:   #e3f4e6; --tx-flag-proofed-fg:   #0f4a1e; --tx-flag-proofed-border:   #2e7d45;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --tx-flag-unproofed-bg: #3a2a05; --tx-flag-unproofed-fg: #ffe3a3; --tx-flag-unproofed-border: #e0a93a;
        --tx-flag-proofed-bg:   #12301a; --tx-flag-proofed-fg:   #c8f0d0; --tx-flag-proofed-border:   #5fbf7a;
    }
}
:root[data-theme="dark"] {
    --tx-flag-unproofed-bg: #3a2a05; --tx-flag-unproofed-fg: #ffe3a3; --tx-flag-unproofed-border: #e0a93a;
    --tx-flag-proofed-bg:   #12301a; --tx-flag-proofed-fg:   #c8f0d0; --tx-flag-proofed-border:   #5fbf7a;
}
.tx-flag {
    display: flex; gap: .75rem; align-items: flex-start; margin: 0 0 1rem; padding: .75rem 1rem;
    border: 1px solid var(--tx-flag-border); border-radius: var(--radius);
    background: var(--tx-flag-bg); color: var(--tx-flag-fg); font-size: .9rem; line-height: 1.5;
}
.tx-flag--unproofed { --tx-flag-bg: var(--tx-flag-unproofed-bg); --tx-flag-fg: var(--tx-flag-unproofed-fg); --tx-flag-border: var(--tx-flag-unproofed-border); }
.tx-flag--proofed   { --tx-flag-bg: var(--tx-flag-proofed-bg);   --tx-flag-fg: var(--tx-flag-proofed-fg);   --tx-flag-border: var(--tx-flag-proofed-border); }
.tx-flag-icon { flex: none; color: var(--tx-flag-border); line-height: 0; padding-top: .15rem; }
.tx-flag-text { font-weight: 700; }
.tx-flag-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; margin-top: .25rem; }
.tx-flag-about summary { cursor: pointer; text-decoration: underline; min-height: 24px; }
.tx-flag-about p { margin-top: .5rem; }
.tx-flag-about[open] { flex-basis: 100%; }
.tx-flag-fix { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-decoration: underline; }
.tx-flag-fix[disabled] { cursor: not-allowed; text-decoration: none; opacity: .85; }
.tx-flag-count { margin-left: auto; font-size: .8rem; }
.tx-flag a, .tx-flag summary, .tx-flag-fix { color: inherit; }
@media (forced-colors: active) {
    .tx-flag { border: 2px solid CanvasText; background: Canvas; color: CanvasText; }
    .tx-flag-icon { color: CanvasText; }
}

/* ── Synchronized content (P2) ──────────────────────────────────────────────── */
/* Controls that need the module player stay hidden until it mounts. */
.pp-js-only { display: none !important; }
.player-card.is-enhanced .pp-js-only { display: inline-flex !important; }
@media (pointer: coarse) {
    .player-actions .btn-share-ep, .player-actions .btn-short { min-height: 44px; padding: 0 .9rem; }
}

/* Landing on a shared moment link */
.pp-moment { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .25rem; font: 700 .8rem var(--ff-h); color: var(--text-mid); }

/* Transcript follow-along: the block is a bounded panel while the player is mounted, so following scrolls the panel and never the page. */
.tx-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 .75rem; }
.tx-tools[hidden], .tx-tool[hidden] { display: none !important; }
.tx-tool {
    min-height: 44px; padding: 0 .9rem; border-radius: 999px;
    background: var(--pp-btn-bg); color: var(--pp-btn-fg); border: 1px solid var(--pp-btn-border);
    font: 700 .8rem var(--ff-h);
}
.tx-tool[aria-pressed="true"] { background: var(--pp-play-bg); color: var(--pp-play-fg); border-color: var(--pp-play-bg); }
.tx-tool--jump { background: var(--dark); color: #fff; border-color: var(--dark); }
.ep-transcript.is-enhanced .transcript-body--segments {
    position: relative; max-height: min(65vh, 34rem); overflow-y: auto;
    padding: .5rem .9rem; border: 1px solid var(--border-lt); border-radius: var(--radius); background: var(--card);
}
.ep-transcript.is-enhanced .tx-seg { scroll-margin-top: 0; }
.tx-seg.is-active { background: #e8f5ea; box-shadow: inset 3px 0 0 var(--green); }
:root[data-theme="dark"] .tx-seg.is-active { background: #1e3a24; }
.tx-text { min-width: 0; overflow-wrap: anywhere; }
/* The word being spoken (CSS Custom Highlight API, or the fallback span) */
::highlight(ppp-now) { background-color: #ffe08a; color: #231f20; }
.w-now { background-color: #ffe08a; color: #231f20; border-radius: 2px; }

/* Show-note cards: current card, time button, and the "Now in the show" rail */
.xcard.is-live { box-shadow: 0 0 0 2px var(--green); }
.xcard-time {
    margin-left: auto; min-height: 32px; padding: 0 .6rem; border-radius: 999px;
    background: var(--pp-btn-bg); color: var(--text-link); border: 1px solid var(--pp-btn-border);
    font: 600 .7rem var(--ff-m); letter-spacing: 0;
}
.xcard-time:hover { border-color: var(--text-link); }
@media (pointer: coarse) { .xcard-time { min-height: 44px; } }

.pp-rail { padding: .625rem .75rem; background: var(--card); border: 1px solid var(--border-lt); border-radius: var(--radius); }
.pp-rail[hidden], .pp-rail-next[hidden] { display: none !important; }
.pp-rail-title { margin: 0 0 .4rem; font: 800 .65rem var(--ff-h); letter-spacing: .1em; text-transform: uppercase; color: var(--text-mid); }
.pp-rail-list { list-style: none; display: grid; gap: .4rem; }
.pp-rail-item {
    display: flex; align-items: stretch; gap: .25rem; min-width: 0;
    background: var(--subtle); border-left: 4px solid var(--green); border-radius: 6px;
    animation: pp-rail-in .16s ease-out;
}
.pp-rail-item.is-recent { border-left-color: var(--border); }
.pp-rail-item.is-recent .pp-rail-label, .pp-rail-item.is-recent .pp-rail-type { color: var(--text-mid); }
.pp-rail-open {
    flex: 1 1 auto; min-width: 0; min-height: 44px; display: flex; flex-direction: column; justify-content: center; gap: .1rem;
    padding: .25rem .5rem; text-align: left; background: none; border: 0; color: var(--text);
}
.pp-rail-type { font: 800 .62rem var(--ff-h); letter-spacing: .1em; text-transform: uppercase; color: var(--text-link); }
.pp-rail-label { font-size: .85rem; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pp-rail-time {
    flex: none; align-self: center; min-width: 44px; min-height: 44px; padding: 0 .5rem; margin-right: .15rem;
    background: none; border: 0; color: var(--text-link); font: 600 .7rem var(--ff-m);
}
.pp-rail-next { margin: .4rem 0 0; font: 600 .75rem var(--ff-h); color: var(--text-mid); }
@keyframes pp-rail-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Share quote (selection in the transcript or on a quote card) */
.pp-quote {
    position: fixed; z-index: 60; display: flex; align-items: center; gap: .5rem;
    max-width: min(92vw, 24rem); padding: .3rem .3rem .3rem .75rem;
    background: var(--dark); color: #f5f0e8; border-radius: 999px; box-shadow: 0 4px 16px rgba(0,0,0,.3);
    font: 600 .8rem var(--ff-h); line-height: 1.3;
}
.pp-quote[hidden] { display: none !important; }
.pp-quote .pp-chip--main { background: #f5f0e8; color: #231f20; border-color: #f5f0e8; flex: none; }
.pp-quote .pp-chip--main[hidden] { display: none; }
.pp-quote-msg:empty { display: none; }
.pp-quote-msg { padding: .25rem .5rem .25rem 0; }
.pp-quote--bottom {
    left: 50%; transform: translateX(-50%); top: auto; bottom: calc(1rem + env(safe-area-inset-bottom));
    border-radius: var(--radius); width: max-content;
}
body.has-minibar .pp-quote--bottom { bottom: calc(80px + env(safe-area-inset-bottom)); }

/* ── Motion ──────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .pp-player *, .pp-minibar *, .pp-rail *, #episode-artwork { transition: none !important; animation: none !important; }
}