/* =============================================
   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 */
.wsp-hero { position: relative; margin: 0 -1rem 1.25rem; min-height: 220px; 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%); }
.wsp-hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,15,30,0.15) 0%, rgba(10,15,30,0.82) 100%); }
.wsp-hero-copy { position: relative; z-index: 1; padding: 3.5rem 1.25rem 1.5rem; color: white; }
.wsp-title { font-size: 1.9rem; font-weight: 800; line-height: 1.15; margin: 0 0 0.4rem; }
.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; margin-bottom: 0.6rem; }
.wsp-desc { margin: 0.35rem 0 0; max-width: 640px; font-size: 0.95rem; line-height: 1.55; color: rgba(255,255,255,0.85); }

/* 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; }
    .wsp-hero { margin: 0 0 1.5rem; min-height: 300px; border-radius: 0 0 1.25rem 1.25rem; }
    .wsp-hero-copy { padding: 5rem 2rem 2rem; }
    .wsp-title { font-size: 2.5rem; }
    .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
   ============================================= */
/* The hub's first element is the page heading; clear the fixed top nav so it never
   tucks under it. Breakpoints mirror the top nav's own (600 / 900), where its height
   steps up -- a single 720px step left the heading clipped in the 600-720 band and
   touching the nav on desktop (>900). The + var(--topnav-inset-top) 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), matching the .lv2 / .kbh hero clearances. */
.wsp-hub-head { padding: calc(4.5rem + var(--topnav-inset-top)) 0 0.5rem; }
@media (min-width: 601px) { .wsp-hub-head { padding-top: calc(5.5rem + var(--topnav-inset-top)); } }
@media (min-width: 901px) { .wsp-hub-head { padding-top: calc(6.25rem + var(--topnav-inset-top)); } }
.wsp-hub-title { font-size: 2rem; font-weight: 800; margin: 0 0 0.25rem; }
.wsp-hub-sub { margin: 0; color: var(--text-secondary, #666); font-size: 0.95rem; }

.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) {
    .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); }

/* 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. */
.wsp-shell-preview { padding-top: calc(4.5rem + var(--topnav-inset-top)); }
@media (min-width: 601px) { .wsp-shell-preview { padding-top: calc(5.5rem + var(--topnav-inset-top)); } }
@media (min-width: 901px) { .wsp-shell-preview { padding-top: calc(6.25rem + var(--topnav-inset-top)); } }

.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-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; }