/* =============================================
   Watch Show Page (/watch/{slug})  --  .wsp-
   Mobile-first: single column, full-width player,
   stacked episode cards; widens at 720px+.
   ============================================= */

.wsp-shell { max-width: 960px; margin: 0 auto; padding: 0 1rem 3rem; color: var(--text-primary, #1a1a2e); }

/* Loading */
.wsp-loading { display: flex; align-items: center; justify-content: center; min-height: 50vh; }
.wsp-spinner { width: 48px; height: 48px; border: 4px solid var(--border-color, #e0e0e0); border-top-color: #00b4ff; border-radius: 50%; animation: wsp-spin 1s linear infinite; }
@keyframes wsp-spin { to { transform: rotate(360deg); } }

/* Not found */
.wsp-notfound { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 50vh; text-align: center; gap: 0.5rem; padding: 2rem 1rem; }
.wsp-notfound-title { font-size: 1.75rem; font-weight: 800; margin: 0; }
.wsp-notfound-text { color: var(--text-secondary, #666); margin: 0 0 1rem; }
.wsp-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.4rem; border: none; border-radius: 2rem; background: #00b4ff; color: white; font-weight: 700; font-size: 0.95rem; cursor: pointer; transition: filter 0.2s; }
.wsp-btn:hover { filter: brightness(1.08); }

/* Hero -- full-bleed key art
   The hero is a SIBLING of .wsp-shell in WatchShow.razor, not a child, so it runs
   edge to edge while the rest of the page keeps the shell's centered rail. That
   structure is deliberate: .wsp-shell is a centered max-width column, so a
   viewport-wide child would need either negative margins (which only cancel the
   shell's padding, not its max-width) or 100vw -- and 100vw overshoots by the
   scrollbar width, adding a horizontal scrollbar. This same component renders in
   the MAUI iOS host, where that overflow is especially unpleasant. */
.wsp-hero { position: relative; margin: 0 0 1.25rem; min-height: 240px; display: flex; align-items: flex-end; overflow: hidden; background: #10182b; }
.wsp-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wsp-hero-fallback { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 55%, #0f3460 100%); }
/* Two-axis scrim rather than one flat vertical wash: the art stays vivid through
   the middle, the bottom seats the copy, and the top band keeps the fixed top nav
   (which deliberately overlays this hero) legible against a bright frame. */
.wsp-hero-scrim {
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(8,12,24,0.34) 0%, rgba(8,12,24,0.04) 34%, rgba(8,12,24,0.70) 78%, rgba(8,12,24,0.88) 100%),
        linear-gradient(90deg, rgba(8,12,24,0.52) 0%, rgba(8,12,24,0.12) 54%, rgba(8,12,24,0) 80%);
}
/* Carries the same rail as .wsp-shell (max-width + matching side padding) so the
   hero copy's left edge lines up exactly with the episode list below it. */
.wsp-hero-inner { position: relative; z-index: 1; box-sizing: border-box; width: 100%; max-width: 960px; margin: 0 auto; padding: 0 1rem; }
/* The copy is bottom-anchored (.wsp-hero flex-end), so on a phone the top padding
   only ever adds height -- and hero height is what drives the crop there. A phone
   viewport is far narrower than 16:9, so cover matches the image to the box HEIGHT
   and trims the sides: every extra vertical pixel costs horizontal frame. Keep this
   tight, and keep the description short (clamped below) for the same reason. */
.wsp-hero-copy { padding: 2.5rem 0 1.5rem; color: white; text-shadow: 0 1px 4px rgba(0,0,0,0.45); }
.wsp-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-bottom: 0.7rem; }
.wsp-hero-count { font-size: 0.82rem; font-weight: 600; color: rgba(255,255,255,0.82); }
.wsp-title { font-size: clamp(1.9rem, 6vw, 2.3rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 0.4rem; text-shadow: 0 2px 12px rgba(0,0,0,0.5); }
.wsp-audience { display: inline-flex; align-items: center; padding: 0.2rem 0.75rem; border-radius: 1rem; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.25); font-size: 0.8rem; font-weight: 600; }
.wsp-desc { margin: 0.35rem 0 0; max-width: 640px; font-size: 0.95rem; line-height: 1.55; color: rgba(255,255,255,0.88); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* Primary action, promoted out of the episode list into the hero. */
.wsp-hero-play { display: inline-flex; align-items: center; gap: 0.55rem; margin-top: 1.3rem; padding: 0.8rem 1.6rem; border: none; border-radius: 2rem; background: #00b4ff; color: #fff; font-size: 1rem; font-weight: 800; cursor: pointer; text-shadow: none; box-shadow: 0 10px 26px rgba(0,180,255,0.34); transition: filter 0.2s, transform 0.2s; }
.wsp-hero-play:hover { filter: brightness(1.08); transform: translateY(-1px); }
.wsp-hero-play:disabled { cursor: wait; opacity: 0.75; transform: none; }
.wsp-hero-play i { font-size: 1.3rem; }

/* Player */
.wsp-player { margin: 0 -1rem 1.5rem; background: #060a14; scroll-margin-top: 80px; }
.wsp-video { display: block; width: 100%; max-height: 70vh; aspect-ratio: 16 / 9; background: black; }
.wsp-player-error { display: flex; align-items: center; gap: 0.6rem; padding: 1.5rem 1.25rem; color: #ffd9a1; font-size: 0.95rem; }
.wsp-player-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.6rem 1rem; color: rgba(255,255,255,0.85); }
.wsp-player-label { font-size: 0.85rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wsp-player-close { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: none; border-radius: 50%; background: rgba(255,255,255,0.12); color: white; cursor: pointer; transition: background 0.2s; }
.wsp-player-close:hover { background: rgba(255,255,255,0.24); }

/* Episodes */
.wsp-section-title { font-size: 1.25rem; font-weight: 800; margin: 1.5rem 0 0.9rem; }
.wsp-episode-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.wsp-episode-btn { display: flex; align-items: center; gap: 0.9rem; width: 100%; padding: 0.6rem; border: 1px solid var(--border-color, #e6e9ef); border-radius: 0.9rem; background: var(--card-background, white); color: inherit; text-align: left; cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s; position: relative; }
button.wsp-episode-btn:hover { border-color: #00b4ff; box-shadow: 0 4px 16px rgba(0,180,255,0.12); }
button.wsp-episode-btn:disabled { cursor: wait; opacity: 0.7; }
.wsp-episode.playing .wsp-episode-btn { border-color: #00b4ff; box-shadow: 0 0 0 3px rgba(0,180,255,0.12); }
.wsp-episode.locked .wsp-episode-btn { cursor: default; }

.wsp-thumb { position: relative; flex: none; width: 128px; aspect-ratio: 16 / 9; border-radius: 0.6rem; overflow: hidden; background: linear-gradient(135deg, #16213e, #0f3460); }
.wsp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wsp-thumb-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.5rem; background: rgba(8,12,24,0.25); transition: background 0.2s; }
button.wsp-episode-btn:hover .wsp-thumb-icon { background: rgba(8,12,24,0.45); }
.wsp-thumb-lock { background: rgba(8,12,24,0.55); font-size: 1.25rem; }

.wsp-episode-meta { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.wsp-episode-num { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; color: #0090cc; text-transform: uppercase; }
.wsp-episode-title { font-size: 1rem; font-weight: 700; line-height: 1.3; }
.wsp-episode-runtime { font-size: 0.8rem; color: var(--text-secondary, #666); }
.wsp-lock-tag { position: absolute; top: 0.75rem; right: 0.75rem; display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.6rem; border-radius: 1rem; background: linear-gradient(135deg, #ffaa00, #ff8a00); color: white; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em; }
/* Free-members lock badge: green (free/go), distinct from the premium gold above. */
.wsp-lock-tag-free { background: linear-gradient(135deg, #16b981, #0f9d63); }
.wsp-empty { color: var(--text-secondary, #666); padding: 1rem 0 0; }

/* Read the book: the reciprocal of the book page's "Watch the series" card -- matched
   anatomy (16:9 stage showing the book cover + a tag, then a meta row with a round
   chevron chip). Read side carries the brand-blue accent. */
.wsp-readbook { margin-top: 1.75rem; }
.wsp-readbook-card { display: block; max-width: 360px; background: #fff; border: 1px solid #E0E0E0; border-radius: 20px; overflow: hidden; color: inherit; text-decoration: none; box-shadow: 0 2px 8px rgba(2, 6, 23, 0.06); transition: box-shadow 0.22s cubic-bezier(0.22,1,0.36,1), transform 0.22s cubic-bezier(0.22,1,0.36,1); }
.wsp-readbook-card:hover { transform: translateY(-3px); box-shadow: 0 22px 46px -12px rgba(9, 16, 30, 0.22); color: inherit; }
.wsp-readbook-stage { position: relative; aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; overflow: hidden; background: radial-gradient(95% 130% at 50% 6%, #D4EEFF, #F1F9FF 74%); border-bottom: 1px solid #E7F1F9; box-shadow: inset 0 0 0 1px rgba(0, 180, 255, 0.06); }
.wsp-readbook-stage::before { content: ""; position: absolute; width: 170px; height: 170px; border-radius: 50%; top: -46px; left: -34px; background: radial-gradient(circle, rgba(0, 180, 255, 0.2), transparent 70%); }
.wsp-readbook-tag { position: absolute; top: 11px; left: 11px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.86); backdrop-filter: blur(8px); color: #0174B1; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid rgba(1, 116, 177, 0.18); box-shadow: 0 3px 8px rgba(2, 20, 50, 0.08); }
.wsp-readbook-tag i { font-size: 13px; }
.wsp-readbook-cover { position: relative; width: 90px; height: 134px; border-radius: 8px; overflow: hidden; box-shadow: 0 18px 36px -8px rgba(2, 20, 50, 0.34); background: linear-gradient(160deg, #0f3460, #0174b1); display: flex; align-items: flex-end; }
.wsp-readbook-cover::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.4), transparent); }
.wsp-readbook-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(118deg, rgba(255, 255, 255, 0.24), transparent 46%); }
.wsp-readbook-cover-title { position: relative; z-index: 1; padding: 9px; font-size: 11px; font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
/* Real cover fills the frame; the gradient behind it shows while the image loads, and the ::after gloss reads as a book sheen on top. */
.wsp-readbook-cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.wsp-readbook-meta { display: flex; align-items: center; gap: 14px; padding: 15px 16px; }
.wsp-readbook-text { flex: 1; min-width: 0; }
.wsp-readbook-eyebrow { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: #0174B1; }
.wsp-readbook-eyebrow i { font-size: 15px; }
.wsp-readbook-title { font-size: 17px; font-weight: 700; letter-spacing: -0.017em; margin-top: 5px; color: #1B2330; }
.wsp-readbook-sub { font-size: 12.5px; color: #64748B; margin-top: 3px; }
.wsp-readbook-chip { flex: none; width: 36px; height: 36px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: linear-gradient(150deg, #22C4FF, #0174B1); color: #fff; font-size: 1.35rem; box-shadow: 0 6px 14px rgba(0, 116, 177, 0.32); transition: transform 0.2s cubic-bezier(0.22,1,0.36,1); }
.wsp-readbook-card:hover .wsp-readbook-chip { transform: translateX(2px); }
body.dark-mode .wsp-readbook-card { background: #141B27; border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); }
body.dark-mode .wsp-readbook-card:hover { box-shadow: 0 24px 50px -12px rgba(0, 0, 0, 0.6); }
body.dark-mode .wsp-readbook-stage { background: radial-gradient(95% 130% at 50% 6%, rgba(0, 180, 255, 0.24), transparent 66%), linear-gradient(160deg, #16202F, #0F1824); border-bottom-color: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(0, 180, 255, 0.08); }
body.dark-mode .wsp-readbook-tag { background: rgba(10, 24, 40, 0.6); color: #38C6FF; border-color: rgba(0, 180, 255, 0.28); }
body.dark-mode .wsp-readbook-eyebrow { color: #38C6FF; }
body.dark-mode .wsp-readbook-title { color: #F1F6FB; }
body.dark-mode .wsp-readbook-sub { color: #9FB2C6; }

/* Upgrade CTA (mirrors the book page upgrade card) */
.wsp-upgrade { margin-top: 2rem; }
.wsp-upgrade-card { background: linear-gradient(135deg, #10182b 0%, #16213e 60%, #0f3460 100%); border-radius: 1.25rem; padding: 2rem 1.5rem; text-align: center; color: white; }
.wsp-upgrade-badge { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.9rem; border-radius: 1rem; background: linear-gradient(135deg, #ffaa00, #ff8a00); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 1rem; }
/* Free-first CTA badge: green (free signup), distinct from the premium gold. */
.wsp-upgrade-badge-free { background: linear-gradient(135deg, #16b981, #0f9d63); color: #fff; }
.wsp-upgrade-title { font-size: 1.5rem; font-weight: 800; margin: 0 0 0.6rem; }
.wsp-upgrade-text { margin: 0 auto 1rem; max-width: 460px; color: rgba(255,255,255,0.82); font-size: 0.95rem; line-height: 1.55; }
.wsp-upgrade-price-row { display: flex; align-items: baseline; justify-content: center; gap: 0.25rem; margin-bottom: 1.25rem; }
.wsp-upgrade-price { font-size: 2.2rem; font-weight: 800; color: #ffaa00; }
.wsp-upgrade-period { font-size: 1rem; color: rgba(255,255,255,0.7); }
.wsp-upgrade-button { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1.8rem; border: none; border-radius: 2rem; background: #00b4ff; color: white; font-size: 1rem; font-weight: 800; cursor: pointer; transition: filter 0.2s, transform 0.2s; }
.wsp-upgrade-button:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* Wider screens */
@media (min-width: 720px) {
    .wsp-shell { padding: 0 1.5rem 4rem; }
    /* Height tracks viewport WIDTH, because the source art is 16:9 and object-fit:
       cover crops it vertically as the box grows wider than 16:9. A fixed height
       would squeeze the frame into an ever-thinner band on wide screens; 36vw holds
       the visible slice at roughly two thirds of the frame across normal desktop
       widths. The 58vh term keeps a short laptop screen from being swallowed by the
       hero, and the 620px ceiling stops an ultrawide monitor from turning it into a
       wall of art the episode list hides behind. */
    .wsp-hero { margin: 0 0 1.75rem; min-height: clamp(360px, min(36vw, 58vh), 620px); }
    .wsp-hero-inner { padding: 0 1.5rem; }
    .wsp-hero-copy { padding: 6rem 0 2.5rem; }
    .wsp-title { font-size: clamp(2.2rem, 3.2vw, 3rem); }
    .wsp-desc { font-size: 1.02rem; max-width: 680px; -webkit-line-clamp: 4; }
    .wsp-player { margin: 0 0 2rem; border-radius: 1rem; overflow: hidden; }
    .wsp-thumb { width: 176px; }
    .wsp-upgrade-card { padding: 2.5rem 2rem; }
}

/* Dark mode (site theme = body.dark-mode) */
body.dark-mode .wsp-shell { color: var(--text-primary, #e0e0e0); }
body.dark-mode .wsp-episode-btn { background: var(--card-background, #1e1e1e); border-color: rgba(255,255,255,0.12); }
body.dark-mode .wsp-episode-runtime, body.dark-mode .wsp-empty, body.dark-mode .wsp-notfound-text { color: var(--text-secondary, #9aa3b2); }
body.dark-mode .wsp-episode-num { color: #35c3ff; }

/* =============================================
   Watch hub (/watch) -- shares the .wsp- family
   ============================================= */
/* Hub header -- the shared "destination page" hero: centered icon tile, title, one-line
   subtitle over a soft accent wash with a hairline base. Library (.library-header-section)
   and Connect (.social-header-section) use the same recipe. Discover is the fourth top-nav
   destination, but its full-bleed billboard is deliberately its own thing: it merchandises a
   rotating set of featured books, and Watch's cinematic surface is one level down on the show
   page (.wsp-hero), so a second billboard here would only compete with it. Scale and rhythm follow Connect, whose 800px rail is the nearer neighbor to
   this page's 960 -- deliberately reusing one of the two existing scales rather than
   introducing a third.

   The header is a SIBLING of .wsp-shell so the wash runs edge to edge, with the rail moved
   onto .wsp-hub-head-inner; see the .wsp-hero comment above for why a full-width child of
   the shell is not an option.

   The vertical ladder tracks CONNECT specifically, restated mobile-first: 6rem top / 1.5rem
   bottom on a phone, 6.5rem / 1.75rem from 481px, 7.5rem / 2.5rem from 769px (Connect steps
   DOWN at max-width 768 and 480). Library is close but not identical -- it has a fourth step
   at max-width 992 (7rem top, 56px icon) that Connect does not, so no single ladder can match
   both; Connect is the one being matched. Every band clears the
   fixed top nav by more than the plain heading this replaced did, so nothing regresses into
   it. The + var(--topnav-inset-top) term is kept -- that part is a deliberate DEVIATION from
   Library and Connect, which hard-code their clearance without it. It covers the safe-area
   inset the fixed nav adds to its own height on notched iOS / Android edge-to-edge (resolves
   to 0 on web), the same way .lv2 .hero and .kbh-hero-grid do. Library's and Connect's
   omission is a latent squeeze in the MAUI hosts; do not copy it back here to make the rules
   look identical. */
.wsp-hub-head {
    width: 100%;
    padding: calc(6rem + var(--topnav-inset-top)) 0 1.5rem;
    /* Fades to transparent rather than to an opaque page color, so one gradient serves
       both themes over whatever the page sits on -- same approach as Connect's. */
    background: radial-gradient(120% 92% at 50% -12%, rgba(0, 180, 255, 0.14) 0%, rgba(0, 180, 255, 0.04) 46%, transparent 100%);
    border-bottom: 1px solid var(--brand-divider, #E0E0E0);
    /* Outside .wsp-shell, so the shell's color rule does not reach it. */
    color: var(--text-primary, #1a1a2e);
    text-align: center;
}
/* 481 / 769 are the mobile-first inverses of Connect's max-width 480 / 768 steps. */
@media (min-width: 481px) { .wsp-hub-head { padding: calc(6.5rem + var(--topnav-inset-top)) 0 1.75rem; } }
@media (min-width: 769px) { .wsp-hub-head { padding: calc(7.5rem + var(--topnav-inset-top)) 0 2.5rem; } }

/* Carries .wsp-shell's rail, NOT Connect's container, so the header centers on the same
   column the cards below it occupy. That is also why its side padding steps at the shell's
   720px breakpoint rather than the 769px used for the header's vertical rhythm. */
.wsp-hub-head-inner { box-sizing: border-box; max-width: 960px; margin: 0 auto; padding: 0 1rem; }

.wsp-hub-icon {
    width: 60px; height: 60px; margin: 0 auto 18px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--brand-primary, #00B4FF) 0%, var(--brand-secondary, #0174B1) 100%);
    color: #FFFFFF; font-size: 1.65rem;
    box-shadow: 0 10px 28px rgba(0, 180, 255, 0.28);
}
@media (min-width: 769px) { .wsp-hub-icon { width: 72px; height: 72px; font-size: 2rem; } }
.wsp-hub-title { font-size: clamp(2rem, 6vw, 2.75rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; margin: 0; }
/* 0.75rem, not 0.5rem: Connect's subtitle margin collapses against the 0.75rem base of the
   group wrapping its icon + title, so 0.75rem is the gap that surface actually renders. */
.wsp-hub-sub { margin: 0.75rem auto 0; max-width: 460px; color: var(--text-secondary, #666); font-size: clamp(0.95rem, 2.2vw, 1.0625rem); line-height: 1.5; }

/* The hub's ribbon is a child of .wsp-shell (the show page's is a child of .wsp-page), so
   it lands directly against the header's base rule without this. */
.wsp-shell > .wsp-preview-ribbon { margin-top: 1rem; }

.wsp-hub-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1.25rem; }
.wsp-hub-card { position: relative; display: flex; align-items: flex-end; min-height: 200px; border-radius: 1rem; overflow: hidden; background: #10182b; color: white; text-decoration: none; transition: transform 0.2s, box-shadow 0.2s; }
.wsp-hub-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0, 180, 255, 0.18); color: white; }
.wsp-hub-card-fallback { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 55%, #0f3460 100%); }
.wsp-hub-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wsp-hub-card-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,15,30,0.05) 25%, rgba(10,15,30,0.85) 100%); }
.wsp-hub-card-copy { position: relative; display: flex; flex-direction: column; gap: 0.25rem; padding: 1.1rem 1.25rem; }
.wsp-hub-card-title { font-size: 1.35rem; font-weight: 800; line-height: 1.2; }
.wsp-hub-card-desc { font-size: 0.9rem; line-height: 1.45; color: rgba(255,255,255,0.85); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.wsp-hub-card-meta { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; font-weight: 600; color: rgba(255,255,255,0.75); }

/* Continue watching row */
.wsp-continue { margin-top: 1.25rem; }
.wsp-continue-row { display: flex; gap: 0.75rem; overflow-x: auto; padding-bottom: 0.5rem; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.wsp-continue-card { flex: none; width: 200px; display: flex; flex-direction: column; gap: 0.4rem; text-decoration: none; color: inherit; }
.wsp-continue-card .wsp-thumb { width: 100%; }
.wsp-continue-card:hover .wsp-thumb-icon { background: rgba(8,12,24,0.45); }
.wsp-progress-track { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,0.3); }
.wsp-progress-fill { position: absolute; left: 0; top: 0; bottom: 0; background: #ffaa00; }
.wsp-continue-meta { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.wsp-continue-show { font-size: 0.9rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wsp-continue-episode { font-size: 0.78rem; color: var(--text-secondary, #666); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Resume prompt over the paused player */
.wsp-player-stage { position: relative; }
.wsp-resume-overlay { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.9rem; background: rgba(6, 10, 20, 0.72); text-align: center; padding: 1rem; }
.wsp-resume-text { margin: 0; color: white; font-size: 1.05rem; }
.wsp-resume-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; }
.wsp-btn-ghost { background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.35); }
.wsp-btn-ghost:hover { background: rgba(255,255,255,0.24); filter: none; }

@media (min-width: 720px) {
    /* Tracks .wsp-shell's widened side padding so the rails stay aligned. */
    .wsp-hub-head-inner { padding: 0 1.5rem; }
    .wsp-hub-grid { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
    .wsp-hub-card { min-height: 240px; }
    .wsp-continue-card { width: 240px; }
}

body.dark-mode .wsp-hub-sub, body.dark-mode .wsp-continue-episode { color: var(--text-secondary, #9aa3b2); }
body.dark-mode .wsp-hub-head { color: var(--text-primary, #e0e0e0); border-bottom-color: rgba(255, 255, 255, 0.09); }

/* Admin draft preview (PreviewMode): a review surface, not a public page. A ribbon
   marks it, and each episode card carries a Draft/Published badge. Admin-only, so it
   sits above the normal card chrome rather than replacing it. */

/* The public show page is a full-bleed hero the fixed top nav deliberately overlays
   (fine there -- the hero's title is padded well clear of the nav). Preview mode
   prepends the thin ribbon as the first element, which would otherwise sit hidden
   behind that nav, so shift the whole preview surface down to clear it. Breakpoints
   mirror the top nav's own (600 / 900) where its height steps up, and the
   + var(--topnav-inset-top) covers the safe-area inset the fixed nav adds on notched
   iOS / Android edge-to-edge (resolves to 0 on web); same ladder as the hub head.
   Applied to .wsp-page (the whole surface) rather than .wsp-shell, because the
   ribbon and hero now sit OUTSIDE the shell. */
.wsp-page-preview { padding-top: calc(4.5rem + var(--topnav-inset-top)); }
@media (min-width: 601px) { .wsp-page-preview { padding-top: calc(5.5rem + var(--topnav-inset-top)); } }
@media (min-width: 901px) { .wsp-page-preview { padding-top: calc(6.25rem + var(--topnav-inset-top)); } }

/* The negative side margins bleed the ribbon out of .wsp-shell's padding on the
   Watch HUB, where it is still a child of the shell. On the show page it is a direct
   child of .wsp-page and already full width, so the bleed is cancelled there. */
.wsp-preview-ribbon { display: flex; align-items: center; gap: 0.5rem; margin: 0 -1rem 0.9rem; padding: 0.55rem 1.25rem; background: linear-gradient(135deg, #7c3aed, #4f46e5); color: #fff; font-size: 0.85rem; font-weight: 700; }
.wsp-page > .wsp-preview-ribbon { margin-left: 0; margin-right: 0; }
.wsp-preview-ribbon i { font-size: 0.95rem; }
/* The badge follows the (block-level) episode button, so it naturally flows onto its
   own line below the card. NOTE: .wsp-episode is deliberately NOT restyled here -- the
   inline badge below a full-width block button needs no change to the list item. */
.wsp-ep-badge { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.4rem; padding: 0.15rem 0.6rem; border-radius: 0.6rem; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; }
.wsp-ep-badge i { font-size: 0.72rem; }
.wsp-ep-badge-draft { background: #fde68a; color: #92400e; border: 1px solid rgba(146,64,14,0.25); }
.wsp-ep-badge-live { background: #bbf7d0; color: #065f46; border: 1px solid rgba(6,95,70,0.22); }
body.dark-mode .wsp-ep-badge-draft { background: rgba(180,120,20,0.28); color: #fcd34d; border-color: rgba(252,211,77,0.3); }
body.dark-mode .wsp-ep-badge-live { background: rgba(16,185,129,0.22); color: #6ee7b7; border-color: rgba(110,231,183,0.3); }
/* Hub-card status badge (PreviewMode): pinned to the card's top-right corner, over the
   art. Solid pill so it stays legible on any hero image. .wsp-hub-card is position:relative. */
.wsp-hub-badge { position: absolute; top: 0.6rem; right: 0.6rem; z-index: 2; display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.6rem; border-radius: 0.6rem; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; }
.wsp-hub-badge i { font-size: 0.72rem; }
.wsp-hub-badge-draft { background: #fde68a; color: #92400e; }
.wsp-hub-badge-live { background: #bbf7d0; color: #065f46; }