/* ============================================
   Apple Education Video Library — Design System
   Dark theme, liquid glass, Apple typography

   Tenant-type scoping (Phase 1 of Live Broadcast support):
   This file is the design system for ON-DEMAND VIDEO tenants
   (the original Morpheus product). When live-broadcast tenants ship,
   layout differences live alongside these rules — scope live-only
   overrides with [data-tenant-type="live"] .selector { ... }.
   The html element gets data-tenant-type set on portal load (app.js)
   and on every admin tenant switch (admin.js → renderTenantSelector).
   ============================================ */

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg-primary: #000000;
  --bg-secondary: #0d0d0d;
  --bg-tertiary: #161616;
  --glass-bg: rgba(255, 255, 255, 0.03);
  --glass-bg-hover: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.06);
  --glass-border-hover: rgba(255, 255, 255, 0.12);
  --glass-border-top: rgba(255, 255, 255, 0.12);
  --text-primary: rgba(255, 255, 255, 0.92);
  --text-secondary: rgba(255, 255, 255, 0.56);
  /* WCAG 1.4.3 (Cora, 2026-10-02): every text token must reach 4.5:1 on --bg-primary/-secondary/
     -tertiary. 0.36 measured 3.1-3.4:1; 0.50 is 5.0-5.3:1. Check any new value against all three. */
  --text-tertiary: rgba(255, 255, 255, 0.50);
  --accent-blue: #0071e3;
  --accent-blue-hover: #0077ed;
  --accent-green: #30d158;
  --accent-purple: #bf5af2;
  --accent-orange: #ff9f0a;
  --accent-red: #ff375f;
  --accent-cyan: #64d2ff;
  --accent-yellow: #ffd60a;
  --accent-tan: #ac8e68;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 48px rgba(0, 0, 0, 0.5);
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --nav-height: 52px;
  --content-max: 980px;
  --sidebar-width: 240px;
}

html {
  font-size: 16px;
  /* Kill Safari/Chrome native swipe-down-to-refresh — content is mostly
     static, so the gesture only causes accidental reloads. body has this
     too, but newer Safari treats <html> as the scroll root. */
  overscroll-behavior-y: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
  overscroll-behavior-y: none;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

a { color: var(--accent-blue); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--accent-blue-hover); }

img { max-width: 100%; height: auto; display: block; }

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
h1 { font-size: 2.5rem; letter-spacing: -0.025em; }
h2 { font-size: 1.75rem; letter-spacing: -0.02em; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.1rem; }

.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.75rem; }

/* --- Layout Utilities --- */
.container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 22px;
}

.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-20 { gap: 20px; }
.gap-24 { gap: 24px; }

/* --- Channel Background Glow --- */
.channel-bg-glow {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  min-width: 1400px;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  transition: opacity 1s ease;
  background: transparent;
  opacity: 1;
}

#channel-bg-glow-next {
  opacity: 0;
}

/* ---- Background ambient glow: DISABLED on Morpheus 2.0 tenant pages (2026-06-18).
   Hidden via CSS only — updateBgGlow() in app.js still computes the accent
   gradient, so re-enabling is just deleting this rule. Landing page (.av-landing)
   keeps its own bloom and is intentionally excluded. ---- */
html[data-page-style="morpheus2"] body:not(.av-landing) #channel-bg-glow,
html[data-page-style="morpheus2"] body:not(.av-landing) #channel-bg-glow-next {
  display: none;
}

body > *:not(.channel-bg-glow):not(.modal-overlay):not(.toast):not(.nav-bar) {
  position: relative;
  z-index: 1;
}

/* --- Glass Components --- */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
}

.glass-card {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid var(--glass-border);
  border-top-color: var(--glass-border-top);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
  overflow: hidden;
}

.glass-card:hover {
  transform: translateY(-2px);
  border-color: var(--glass-border-hover);
  border-top-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.glass-panel {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.02) 100%);
  backdrop-filter: blur(60px) saturate(200%);
  -webkit-backdrop-filter: blur(60px) saturate(200%);
  border: 1px solid var(--glass-border);
  border-top-color: var(--glass-border-top);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* --- Navigation Bar --- */
/* Floating glass island: .nav-bar is a fixed, out-of-flow wrapper pinned to
   the top of the viewport so ALL page content (channel header, section
   buttons, grids) scrolls underneath it. The glass treatment lives on
   .nav-inner so the pill detaches from the edges and the page colors scroll/
   refract beneath it. `main` gets a matching top offset so the first content
   isn't hidden on load. Developer-style tenants reset to a flat bar below. */
.nav-bar {
  position: fixed;
  top: 12px;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 0 22px;
  background: transparent;
  border-bottom: none;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

main {
  padding-top: calc(var(--nav-height) + 32px);
}

.nav-bar .nav-inner {
  position: relative;
  max-width: var(--content-max);
  margin: 0 auto;
  width: 100%;
  height: var(--nav-height);
  padding: 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  pointer-events: auto;
  background: rgba(29, 29, 31, 0.66);
  backdrop-filter: saturate(180%) blur(30px);
  -webkit-backdrop-filter: saturate(180%) blur(30px);
  border: 1px solid var(--glass-border);
  border-top-color: var(--glass-border-top);
  border-radius: 18px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.nav-brand {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  letter-spacing: -0.01em;
}

.nav-brand .apple-logo {
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
  opacity: 0.9;
  position: relative;
  top: -1px;
}

.internal-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--accent-blue);
  border-radius: 980px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

/* --- Search --- */
.search-wrapper {
  position: relative;
  flex: 0 1 320px;
  margin-left: auto;
}

.search-input {
  width: 100%;
  height: 36px;
  padding: 0 12px 0 36px;
  font-size: 0.875rem;
  font-family: inherit;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  outline: none;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.search-input::placeholder { color: var(--text-tertiary); }

.search-input:focus {
  border-color: var(--accent-blue);
  background: rgba(255, 255, 255, 0.08);
}

.search-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: var(--text-tertiary);
}

.search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border: none;
  background: rgba(255,255,255,0.15);
  border-radius: 50%;
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.search-clear.visible { display: flex; }

.nav-links {
  display: flex;
  gap: 8px;
}

.nav-link {
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: color var(--transition-fast), background var(--transition-fast);
}

.nav-link:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.06);
}

.nav-link.active {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.08);
}

/* --- Channel Header (combined banner + switcher) --- */
.channel-header {
  padding: 64px 0 24px;
}

.channel-header-inner {
  display: flex;
  align-items: stretch;
  gap: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-top-color: var(--glass-border-top);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.015) 100%);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  min-height: 220px;
}

/* Left: active channel info */
.channel-active {
  flex: 1;
  padding: 32px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
  min-width: 0;
}

.channel-active-gradient {
  position: absolute;
  inset: 0;
  opacity: 0.07;
  pointer-events: none;
}

.channel-active-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0.18;
  pointer-events: none;
  filter: brightness(0.6) saturate(0.5);
}

.channel-active-bg > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center center;
  user-select: none;
  pointer-events: none;
}

.channel-active-content {
  position: relative;
  z-index: 1;
}

.channel-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}

.channel-eyebrow svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

.channel-title-prefix {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.channel-active-title {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 8px;
}

.channel-active-desc {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.channel-active-stats {
  display: flex;
  gap: 18px;
  margin-top: 14px;
}

.channel-stat {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  color: var(--text-tertiary);
}

.channel-stat svg {
  width: 12px;
  height: 12px;
  opacity: 0.5;
}

/* Right: channel list (switcher) */
.channel-switcher {
  width: 380px;
  flex-shrink: 0;
  border-left: 1px solid var(--glass-border);
  display: flex;
  flex-direction: column;
}

.channel-switcher-label {
  padding: 14px 18px 8px;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}

.channel-switcher-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 8px 8px;
  gap: 2px;
}

.channel-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-align: left;
  transition: all var(--transition-fast);
  width: 100%;
}

.channel-option:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}

.channel-option.active {
  background: rgba(255, 255, 255, 0.07);
  color: var(--text-primary);
}

.channel-option-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.channel-option-info {
  flex: 1;
  min-width: 0;
}

.channel-option-title {
  line-height: 1.3;
}

.channel-option-meta {
  font-size: 0.68rem;
  color: var(--text-tertiary);
  font-weight: 400;
}

.channel-option-arrow {
  width: 14px;
  height: 14px;
  color: var(--text-tertiary);
  flex-shrink: 0;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.channel-option:hover .channel-option-arrow,
.channel-option.active .channel-option-arrow {
  opacity: 1;
}

/* --- Section Headers --- */
.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-top: 16px;
}

.section-title {
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.section-count {
  font-size: 0.8rem;
  color: var(--text-tertiary);
}

/* --- Series Grid --- */
.series-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 20px;
  padding-bottom: 20px;
  transition: opacity 0.3s ease;
}

.series-grid.fading {
  opacity: 0;
}

.series-card {
  cursor: pointer;
  position: relative;
}

.series-card .card-thumbnail {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  overflow: hidden;
  background: var(--bg-tertiary);
}

.series-card .card-thumbnail-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.series-card:hover .card-thumbnail-img {
  transform: scale(1.04);
}

.series-card .card-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 60%);
}

.series-card .card-accent-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
}

.series-card .card-body {
  padding: 12px;
}

.series-card .card-title {
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.series-card .card-meta {
  font-size: 0.72rem;
  color: var(--text-tertiary);
  margin-bottom: 6px;
}

.series-card .card-desc {
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.45;
}

/* Direct video cards (single-series channels) — title + duration overlay on thumbnail */
.series-card.series-card--direct {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
}

.series-card.series-card--direct .card-body {
  flex: 1;
  overflow: hidden;
}

.series-card--direct .card-desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-duration-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  font-size: 0.68rem;
  font-weight: 500;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 3px 8px;
  border-radius: 5px;
  z-index: 2;
  letter-spacing: 0.02em;
}

.card-number-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 0.68rem;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 3px 8px;
  border-radius: 5px;
  z-index: 2;
  letter-spacing: 0.02em;
}

.series-card--direct .card-overlay-info {
  position: absolute;
  bottom: 12px;
  left: 10px;
  right: 10px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  z-index: 2;
  pointer-events: none;
}

.series-card--direct .card-overlay-title {
  font-size: 0.72rem;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 0, 0, 0.5);
  line-height: 1.3;
}

/* Chapter number badge on series cards */
.series-card .chapter-number {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* --- Chapter Icon Cards (distinct from video cards) --- */
.chapter-card {
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 36px 20px 28px;
  min-height: 200px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  transition: background 0.3s ease, backdrop-filter 0.3s ease;
}

.chapter-card:hover {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}

.chapter-card-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.7;
  transition: opacity 0.4s ease;
}

.chapter-card:hover .chapter-card-glow {
  opacity: 1;
}

.chapter-card-accent-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  opacity: 0.6;
  transition: opacity 0.25s ease;
}

.chapter-card:hover .chapter-card-accent-bar {
  opacity: 1;
}

.chapter-card-num {
  position: absolute;
  top: 10px;
  left: 12px;
  font-size: 0.7rem;
  font-weight: 700;
  opacity: 0.7;
  z-index: 1;
}

.chapter-card-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  transition: transform 0.3s ease;
}

.chapter-card:hover .chapter-card-icon {
  transform: scale(1.1);
}

.chapter-icon-svg {
  width: 44px;
  height: 44px;
}

.chapter-card-title {
  position: relative;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 6px;
  color: var(--text-primary);
}

.chapter-card-meta {
  position: relative;
  font-size: 0.75rem;
  color: var(--text-tertiary);
}

.chapter-card-active {
  background: var(--glass-bg-hover);
}

/* --- Chapter Expand Tray --- */
.chapter-expand-tray {
  grid-column: 1 / -1;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.015) 100%);
  backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid var(--glass-border);
  border-top-color: var(--glass-border-top);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  position: relative;
  overflow: hidden;
}

.chapter-expand-tray .tray-inner {
  padding: 24px;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.5s ease 0.25s, transform 0.5s ease 0.25s;
}

.chapter-expand-tray.tray-open .tray-inner {
  opacity: 1;
  transform: translateY(0);
}

.chapter-tray-pointer {
  position: absolute;
  top: -9px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 9px solid;
  transform: translateX(-10px);
}

.chapter-tray-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--glass-border);
}

.chapter-tray-title {
  font-size: 1.1rem;
  font-weight: 600;
}

.chapter-tray-desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-top: 6px;
}

.chapter-tray-count {
  font-size: 0.78rem;
  color: var(--text-tertiary);
  white-space: nowrap;
  flex-shrink: 0;
}

.chapter-expand-tray .episode-list {
  padding: 0;
}

/* --- Episode List (Series Detail View) --- */
.series-detail {
  padding-bottom: 48px;
}

.series-detail-header {
  padding: 32px 0;
}

.back-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  cursor: pointer;
  transition: all var(--transition-fast);
  margin-bottom: 20px;
}

.back-button:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--glass-border-hover);
}

.series-detail-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}

.series-detail-desc {
  font-size: 0.95rem;
  color: var(--text-secondary);
  max-width: 700px;
  line-height: 1.55;
}

.episode-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.episode-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast);
  border: 1px solid transparent;
}

.episode-item:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--glass-border);
}

.episode-item.active {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--glass-border-hover);
}

.episode-number {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.episode-thumbnail {
  flex-shrink: 0;
  width: 160px;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-tertiary);
  position: relative;
}

.episode-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.episode-info {
  flex: 1;
  min-width: 0;
}

.episode-title {
  font-size: 0.92rem;
  font-weight: 500;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.episode-desc {
  font-size: 0.78rem;
  color: var(--text-tertiary);
  line-height: 1.45;
}

.episode-duration {
  flex-shrink: 0;
  font-size: 0.78rem;
  color: var(--text-tertiary);
}

/* --- Video Player View --- */
.player-view {
  padding-top: 16px;
  padding-bottom: 48px;
}

.player-container {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  margin-bottom: 40px;
  box-shadow: 0 0 30px 4px color-mix(in srgb, var(--player-glow, #0071e3) 22%, transparent),
              0 0 60px 10px color-mix(in srgb, var(--player-glow, #0071e3) 8%, transparent);
}

.player-container video,
.player-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* Caption / subtitle cue styling */
.player-container video::cue {
  font-size: 1.2em;
  line-height: 1.4;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  border-radius: 4px;
  padding: 4px 8px;
}

.player-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  color: var(--text-secondary);
}

.player-placeholder svg {
  width: 56px;
  height: 56px;
  opacity: 0.5;
}

.player-placeholder span {
  font-size: 0.9rem;
}

.player-info {
  display: flex;
  gap: 32px;
}

.player-meta {
  flex: 1;
}

.player-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 4px;
  letter-spacing: -0.015em;
}

.player-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.share-btn {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: none;
  border: none;
  padding: 6px;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity 0.2s;
  flex-shrink: 0;
  opacity: 0.6;
  position: relative;
}
.share-btn:hover {
  opacity: 1;
}
.share-btn svg { flex-shrink: 0; }
/* "Link copied" toast — floats above the share button as a pill, fades in
   on .copied, fades back out when the class is removed (1.8s after click).
   Pointer-events:none so it doesn't intercept clicks during fade-out. */
.share-btn .share-btn-copied {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: rgba(28, 28, 30, 0.95);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 0 0.5px rgba(255, 255, 255, 0.1);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.share-btn .share-btn-copied::after {
  /* Tooltip arrow pointing down at the button */
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: rgba(28, 28, 30, 0.95);
}
.share-btn.copied .share-btn-copied {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.share-btn.copied {
  opacity: 1;
}
.light-mode .share-btn .share-btn-copied {
  background: rgba(50, 50, 50, 0.95);
  color: #fff;
}
.light-mode .share-btn .share-btn-copied::after {
  border-top-color: rgba(50, 50, 50, 0.95);
}

.player-series-label {
  font-size: 0.82rem;
  margin-bottom: 12px;
}

.player-description {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.player-sidebar {
  width: 320px;
  flex-shrink: 0;
}

.player-feedback {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--glass-border);
  --feedback-color: var(--accent-blue);
}

.feedback-prompt {
  display: flex;
  align-items: center;
  gap: 12px;
}

.feedback-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.feedback-buttons {
  display: flex;
  gap: 8px;
}

.feedback-btn {
  padding: 5px 18px;
  border-radius: 980px;
  border: 1px solid var(--feedback-color);
  background: transparent;
  color: var(--feedback-color);
  font-size: 0.8rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.feedback-btn:hover {
  background: var(--feedback-color);
  color: #000;
}

.feedback-btn.active {
  background: var(--feedback-color);
  color: #000;
}

.feedback-response {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.4s ease, opacity 0.3s ease 0.1s;
}

.feedback-response.visible {
  max-height: 200px;
  opacity: 1;
}

.feedback-response-inner {
  padding-top: 14px;
}

.feedback-thanks {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.feedback-textarea {
  width: 100%;
  min-height: 80px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  color: var(--text-primary);
  font-size: 0.82rem;
  font-family: inherit;
  resize: vertical;
  transition: border-color var(--transition-fast);
}

.feedback-textarea:focus {
  outline: none;
  border-color: var(--feedback-color);
}

.feedback-textarea::placeholder {
  color: var(--text-tertiary);
}

.feedback-disclaimer {
  font-size: 0.72rem;
  color: var(--text-tertiary);
  margin-top: 8px;
}

.feedback-submit {
  margin-top: 10px;
  padding: 6px 20px;
  border-radius: 980px;
  border: 1px solid var(--feedback-color);
  background: transparent;
  color: var(--feedback-color);
  font-size: 0.8rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.feedback-submit:hover {
  background: var(--feedback-color);
  color: #fff;
}

.player-nav {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.player-nav-btn {
  flex: 1;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.player-nav-btn:hover:not(:disabled) {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  color: var(--text-primary);
}

.player-nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.up-next-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  margin-bottom: 10px;
}

.up-next-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 360px;
  overflow-y: auto;
}

.up-next-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.up-next-item:hover {
  background: rgba(255, 255, 255, 0.04);
}

.up-next-item.current {
  background: rgba(255, 255, 255, 0.06);
}

.up-next-num {
  font-size: 0.72rem;
  color: var(--text-tertiary);
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.up-next-title {
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Search Results --- */
.search-results {
  padding: 24px 0 48px;
}

.search-results .episode-list {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 8px;
}

.search-results .episode-item {
  background: rgba(255, 255, 255, 0.02);
  margin-bottom: 4px;
}

.search-results .episode-item:last-child {
  margin-bottom: 0;
}

.search-results .episode-item:nth-child(even) {
  background: rgba(255, 255, 255, 0.04);
}

.search-results-header {
  margin-bottom: 24px;
}

.search-results-title {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.search-results-count {
  font-size: 0.82rem;
  color: var(--text-tertiary);
}

.no-results {
  text-align: center;
  padding: 80px 20px;
  color: var(--text-tertiary);
}

.no-results h3 {
  font-size: 1.2rem;
  margin-bottom: 8px;
  color: var(--text-secondary);
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  border: none;
  transition: all var(--transition-fast);
}

.btn-primary {
  background: linear-gradient(to bottom, #1a8cff 0%, var(--accent-blue) 100%);
  color: white;
  box-shadow: 0 1px 4px rgba(0, 113, 227, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.btn-primary:hover {
  background: linear-gradient(to bottom, #2e96ff 0%, var(--accent-blue-hover) 100%);
  box-shadow: 0 2px 8px rgba(0, 113, 227, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.btn-secondary {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.04) 100%);
  color: var(--text-primary);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.btn-secondary:hover {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.06) 100%);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Green affirmative action. Used for "Mark Event as Completed and Archive" —
   archiving is a normal, wanted end-of-broadcast step, not a destructive one, so it
   should not wear the same red as Delete. Mirrors .btn-danger's tinted-fill shape so
   the two read as the same family. */
.btn-success {
  background: rgba(48, 209, 88, 0.15);
  color: var(--accent-green);
  border: 1px solid rgba(48, 209, 88, 0.25);
}

.btn-success:hover {
  background: rgba(48, 209, 88, 0.24);
  border-color: rgba(48, 209, 88, 0.4);
}

.btn-danger {
  background: rgba(255, 55, 95, 0.15);
  color: var(--accent-red);
  border: 1px solid rgba(255, 55, 95, 0.2);
}

.btn-danger:hover {
  background: rgba(255, 55, 95, 0.25);
}

.btn-sm {
  padding: 5px 12px;
  font-size: 0.78rem;
}

.btn-icon {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-border);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.btn-icon:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.btn-icon-danger {
  color: #ff3b30;
  border-color: rgba(255, 59, 48, 0.4);
}

.btn-icon-danger:hover {
  background: rgba(255, 59, 48, 0.15);
  color: #ff453a;
  border-color: rgba(255, 59, 48, 0.6);
}

/* --- Forms (Admin) --- */
.form-group {
  margin-bottom: 16px;
}

.form-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 9px 12px;
  font-size: 0.875rem;
  line-height: 1.4;
  font-family: inherit;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color var(--transition-fast);
  box-sizing: border-box;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--accent-blue);
}

.form-textarea {
  min-height: 80px;
  resize: vertical;
}

.form-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='rgba(255,255,255,0.4)' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}

.form-toggle {
  position: relative;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
}

.form-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.form-toggle .toggle-slider {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.form-toggle .toggle-slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background: white;
  border-radius: 50%;
  transition: transform var(--transition-fast);
}

/* The real checkbox is visually hidden (opacity/size 0), so keyboard focus has to show on the
   slider it drives (Cora, WCAG 2.4.7). focus-visible: keyboard only, not on click. */
.form-toggle input:focus-visible + .toggle-slider {
  outline: 2px solid var(--accent-blue, #0071e3);
  outline-offset: 2px;
}

.form-toggle input:checked + .toggle-slider {
  background: var(--accent-green);
}

.form-toggle input:checked + .toggle-slider::before {
  transform: translateX(18px);
}

/* Light mode: the off-state track + white knob were white-on-white (invisible).
   Use a visible gray track so the off switch reads on light surfaces. */
.light-mode .form-toggle .toggle-slider {
  background: rgba(0, 0, 0, 0.22);
}

.form-color-input {
  width: 40px;
  height: 32px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  padding: 2px;
}

/* --- Admin Layout --- */
body.admin-page {
  height: 100vh;
  overflow: hidden;
}

.admin-layout {
  display: flex;
  flex: 1;
  height: calc(100vh - var(--nav-height));
  overflow: hidden;
}

.admin-sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  padding: 20px 16px 0;
  border-right: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.015);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.sidebar-item {
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  gap: 10px;
  border: none;
  background: none;
  font-family: inherit;
  width: 100%;
  /* Prevent badge-driven line wrap on items like "Manage Requests" or
     "Pending Requests" where the trailing red badge would otherwise push
     the text onto a second line. */
  white-space: nowrap;
  text-align: left;
}

/* Hide tenant-type-specific sidebar items by default until <html> gets a
   data-tenant-type / data-tenant-audience attribute set by admin.js (or
   pre-set from localStorage cache in admin.html's <head>). Eliminates the
   flash where all sections render briefly on initial load before the JS
   toggles visibility. The JS keeps the inline style toggling in sync after
   data loads — these CSS rules just suppress the initial flash. Covers all
   four combinations: internal/external × on_demand/live. */
:root:not([data-tenant-type="live"]) .sidebar-item[data-live-only] { display: none !important; }
:root[data-tenant-type="live"] .sidebar-item[data-on-demand-only] { display: none !important; }
:root:not([data-tenant-audience="external"]) .sidebar-item[data-external-only] { display: none !important; }
:root:not([data-tenant-audience="internal"]) .sidebar-item[data-internal-only] { display: none !important; }

.sidebar-item:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.06);
}

.sidebar-item.active {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.08);
}

.sidebar-item svg {
  width: 18px;
  height: 18px;
  opacity: 0.6;
}

.admin-main {
  flex: 1;
  padding: 24px 32px;
  overflow-y: auto;
}

.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.admin-title {
  font-size: 1.4rem;
  font-weight: 600;
}

/* --- Admin List Items --- */
.admin-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-list-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  transition: border-color var(--transition-fast);
}

.admin-list-item:hover {
  border-color: var(--glass-border-hover);
}

.admin-list-item .drag-handle {
  cursor: grab;
  color: var(--text-tertiary);
  padding: 2px;
}

.admin-list-item .drag-handle:active {
  cursor: grabbing;
}

.admin-list-item .item-color {
  width: 8px;
  height: 32px;
  border-radius: 4px;
  flex-shrink: 0;
}

.admin-list-item .item-info {
  flex: 1;
  min-width: 0;
}

.admin-list-item .item-title {
  font-size: 0.9rem;
  font-weight: 500;
}

.admin-list-item .item-subtitle {
  font-size: 0.75rem;
  color: var(--text-tertiary);
}

.admin-list-item .item-actions {
  display: flex;
  gap: 6px;
}

/* --- Tenant Admin Chips --- */
.tenant-admin-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  min-width: 200px;
  max-width: 280px;
}
.tenant-admin-chip:hover {
  background: rgba(255, 255, 255, 0.09);
}
.tenant-admin-chip .tenant-admin-remove {
  opacity: 0;
  transition: opacity 0.15s;
}
.tenant-admin-chip:hover .tenant-admin-remove {
  opacity: 1;
}
.admin-search-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.15s;
}
.admin-search-item:hover, .admin-search-item.highlighted {
  background: rgba(255, 255, 255, 0.08);
}
.admin-search-item:first-child {
  border-radius: 10px 10px 0 0;
}
.admin-search-item:last-child {
  border-radius: 0 0 10px 10px;
}
.admin-search-item:only-child {
  border-radius: 10px;
}

/* --- Modal --- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  /* visibility, not just opacity: a transparent overlay still left the closed modal's buttons and
     fields in the Tab order and in the accessibility tree (Cora). The 0.25s delay lets the fade-out
     finish before it hides; opening flips it visible immediately. */
  visibility: hidden;
  transition: opacity var(--transition-base), visibility 0s linear 0.25s;
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: all;
  visibility: visible;
  transition: opacity var(--transition-base), visibility 0s;
}

.modal {
  width: 90%;
  max-width: 560px;
  max-height: 85vh;
  overflow-y: auto;
  padding: 28px;
  background: var(--bg-secondary);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  transform: scale(0.96);
  transition: transform var(--transition-base);
}

.modal.modal-wide {
  max-width: 880px;
  padding: 36px 40px;
}

.modal.modal-wide .form-group {
  margin-bottom: 18px;
}

.modal-overlay.active .modal {
  transform: scale(1);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.modal-title {
  font-size: 1.15rem;
  font-weight: 600;
}

.modal-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: background var(--transition-fast);
}

.modal-close:hover {
  background: rgba(255, 255, 255, 0.14);
}

.modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 24px;
}

/* --- Icon Picker --- */
.icon-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 6px;
}

.icon-picker-option {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 2px solid transparent;
  background: var(--glass-bg);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  padding: 0;
}

.icon-picker-option svg {
  width: 24px;
  height: 24px;
}

.icon-picker-option:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
}

.icon-picker-option.selected {
  border-color: var(--accent-blue);
  background: rgba(0, 113, 227, 0.15);
}

/* Header image upload */
.header-image-upload {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.header-image-previews {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.header-image-preview-col {
  flex: 1;
  min-width: 0;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.header-image-preview-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-tertiary);
}

.header-image-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 1.742 / 1;   /* multi-channel hero: .channel-active ≈ 556×320 (sits beside the channel switcher) */
  border-radius: var(--radius-md);
  border: 1px dashed var(--glass-border-hover);
  background-color: rgba(255, 255, 255, 0.02);
  overflow: hidden;
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
}
.header-image-preview--single {
  aspect-ratio: 2.937 / 1;   /* single-channel hero: full-width .channel-active, no switcher */
}

/* Channel modal: two-column top (text fields + live composite preview) */
.channel-top-grid { display: flex; gap: 22px; align-items: flex-start; }
.channel-top-fields { flex: 1 1 0; min-width: 0; }
.channel-top-preview { flex: 0 0 380px; max-width: 380px; }
.channel-top-preview > .form-label { display: block; margin-bottom: 8px; }
@media (max-width: 760px) {
  .channel-top-grid { flex-direction: column; }
  .channel-top-preview { flex-basis: auto; max-width: none; width: 100%; }
}

/* Segmented tabs (composite preview + crop boxes) */
.composite-tabs, .crop-tabs { display: inline-flex; align-self: flex-start; gap: 2px; padding: 3px; border-radius: 9px; background: rgba(127,127,127,0.14); margin-bottom: 10px; }
.composite-tab, .crop-tab {
  appearance: none; border: 0; background: none; cursor: pointer; font: inherit;
  font-size: 0.74rem; font-weight: 600; color: var(--text-secondary);
  padding: 5px 12px; border-radius: 7px; transition: background .15s, color .15s;
}
.composite-tab.active, .crop-tab.active { background: var(--bg-secondary); color: var(--text-primary); box-shadow: 0 1px 3px rgba(0,0,0,0.18); }

/* Live composite header preview — faithful mini of the real .channel-header-inner
   (light look: image washed over white glass, white left-scrim, accent glow, outer
   float shadow). Multi = hero + a grayed channel-list area; single = full-width hero. */
.channel-composite {
  position: relative; width: 100%; display: flex; overflow: hidden;
  aspect-ratio: 2.925 / 1;
  border-radius: 14px; border: 1px solid rgba(0, 0, 0, 0.08);
  background: #f2f2f4;
  box-shadow: 0 14px 40px rgba(0,0,0,0.20), 0 3px 10px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.9);
}
.composite-hero { position: relative; flex: 0 0 59.4%; min-width: 0; overflow: hidden; }
.channel-composite[data-comp="single"] .composite-hero { flex-basis: 100%; }
.channel-composite[data-comp="single"] .composite-switcher { display: none; }
.composite-switcher {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px;
  padding: 8px 7px;
  background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(244,246,249,0.72));
  border-left: 1px solid rgba(0,0,0,0.06);
}
.composite-ch-label { font-size: 0.276rem; font-weight: 700; letter-spacing: 0.07em; color: rgba(0,0,0,0.42); padding: 1px 6px 3px; }
.composite-ch { display: flex; align-items: center; gap: 4px; padding: 4px 6px; border-radius: 6px; font-size: 0.324rem; color: #1d1d1f; line-height: 1.1; }
.composite-ch.active { background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.12); font-weight: 600; }
.composite-ch-dot { width: 4px; height: 4px; border-radius: 50%; flex: 0 0 auto; }
.composite-ch-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.composite-ch-count { font-size: 0.276rem; color: rgba(0,0,0,0.42); flex: 0 0 auto; }
.composite-ch-chev { color: rgba(0,0,0,0.3); font-size: 0.42rem; flex: 0 0 auto; }
.composite-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0.62; filter: brightness(0.92) saturate(1.05);
  z-index: 0; user-select: none; pointer-events: none;
}
.composite-accent {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.18;
  background: linear-gradient(135deg, var(--comp-accent, var(--accent-blue)) 0%, transparent 64%);
}
.composite-scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(105deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.66) 32%, rgba(255,255,255,0.30) 52%, rgba(255,255,255,0) 74%);
}
.composite-text {
  position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column;
  justify-content: center; padding: 0 14px; gap: 3px; color: #1d1d1f;
}
.composite-kicker { display: inline-flex; align-items: center; gap: 3px; font-size: 0.22rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--comp-accent, var(--accent-blue)); text-shadow: 0 0 12px rgba(255,255,255,0.85); }
.composite-kicker svg { width: 7px; height: 7px; fill: currentColor; }
.composite-prefix { font-size: 0.315rem; font-weight: 600; color: rgba(0,0,0,0.7); text-shadow: 0 0 12px rgba(255,255,255,0.85); }
.composite-title { font-size: 0.8rem; font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; text-shadow: 0 0 18px rgba(255,255,255,0.8), 0 1px 2px rgba(255,255,255,0.6); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.composite-desc { margin-top: 3px; font-size: 0.39rem; line-height: 1.3; color: rgba(0,0,0,0.78); text-shadow: 0 0 10px rgba(255,255,255,0.9); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.composite-desc[hidden] { display: none; }
.composite-stats { display: flex; gap: 12px; margin-top: 6px; }
.composite-stat { display: inline-flex; align-items: center; gap: 4px; font-size: 0.276rem; font-weight: 500; color: rgba(0,0,0,0.6); text-shadow: 0 0 10px rgba(255,255,255,0.9); }
.composite-stat svg { width: 5px; height: 5px; }
.composite-kicker[hidden], .composite-prefix[hidden] { display: none; }
.header-image-preview-col[hidden] { display: none; }

/* Tenant co-admin listing as a compact table; caps height (~4 rows) then scrolls */
.coadmin-list { min-height: 44px; max-height: 232px; overflow-y: auto; border: 1px solid var(--glass-border); border-radius: 10px; }
.coadmin-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.coadmin-table thead th {
  position: sticky; top: 0; z-index: 1; text-align: left;
  font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-tertiary); padding: 9px 12px;
  background: var(--bg-secondary, #1c1c1e); border-bottom: 1px solid var(--glass-border);
}
.coadmin-table td { padding: 7px 12px; border-bottom: 1px solid rgba(127,127,127,0.14); color: var(--text-primary); white-space: nowrap; }
.coadmin-table tbody tr:last-child td { border-bottom: 0; }
.coadmin-cell-avatar { width: 40px; }
.coadmin-avatar { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 600; color: #fff; }
.coadmin-cell-email { color: var(--text-secondary); }
.coadmin-cell-action { width: 40px; text-align: right; }

/* Chapter-button preview inside the admin chapter modal — mirror the main-page card */
.chapter-preview { display: flex; }
/* Chapter modal: the preview column hugs the card width and sits at the right
   edge, so the left fields fill the rest (no dead space on the right). */
.chapter-top-preview { flex: 0 0 240px; max-width: 240px; }
.chapter-preview .chapter-card {
  width: 100%; max-width: 240px; aspect-ratio: 1 / 1; cursor: default;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 22px;
}
.chapter-preview .chapter-card:hover {
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
}

.header-image-preview .header-image-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transform-origin: center center;
  transition: transform 0.15s ease-out;
  pointer-events: none;
  user-select: none;
}

.header-image-preview:active {
  cursor: grabbing;
}

.header-image-empty {
  color: var(--text-tertiary);
  font-size: 0.82rem;
  pointer-events: none;
}

.header-image-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

.header-image-overlay span {
  color: #fff;
  font-size: 0.78rem;
  font-weight: 500;
  background: rgba(0, 0, 0, 0.6);
  padding: 6px 14px;
  border-radius: 6px;
}

.header-image-preview:hover .header-image-overlay {
  opacity: 1;
}

.header-image-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* --- Toast Notification --- */
.toast {
  position: fixed;
  top: 68px;
  right: 24px;
  bottom: auto;
  left: auto;
  padding: 12px 20px;
  border-radius: var(--radius-md);
  background: rgba(30, 30, 30, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  color: var(--text-primary);
  font-size: 0.85rem;
  box-shadow: var(--shadow-md);
  z-index: 9999;
  transform: translateY(-20px);
  opacity: 0;
  transition: all var(--transition-base);
  pointer-events: none;
}

.toast.visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.toast.success { border-left: 3px solid var(--accent-green); }
.toast.error { border-left: 3px solid var(--accent-red); }

/* --- Placeholder Thumbnails --- */
.placeholder-thumb {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.15);
}

/* --- Drag & Drop --- */
.dragging {
  opacity: 0.5;
}

.drag-over {
  border-color: var(--accent-blue) !important;
  background: rgba(0, 113, 227, 0.05) !important;
}

/* --- Scrollbar --- */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* --- View States --- */
.view { display: none; }
.view.active { display: block; }

/* --- Responsive --- */
@media (max-width: 900px) {
  .channel-header-inner { flex-direction: column; }
  .channel-active { padding: 24px; }
  .channel-active-title { font-size: 1.3rem; }
  .channel-switcher {
    width: 100%;
    border-left: none;
    border-top: 1px solid var(--glass-border);
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .channel-switcher::-webkit-scrollbar { display: none; }
  .channel-switcher-label { display: none; }
  .channel-switcher-list {
    flex-direction: row;
    padding: 8px;
    gap: 4px;
    flex: 1;
  }
  .channel-option { white-space: nowrap; flex-shrink: 0; }
  .channel-active-stats { gap: 14px; }
  .player-info { flex-direction: column; }
  .player-sidebar { width: 100%; }
  .series-grid { grid-template-columns: repeat(2, 1fr); }
  .episode-thumbnail { width: 88px; }
}

@media (max-width: 700px) {
  .nav-bar { padding: 10px 12px 0; }
  .nav-links { display: none; }
  .search-wrapper { flex: 1; }
  .container { padding: 0 16px; }
  h1 { font-size: 1.75rem; }
  .series-grid { grid-template-columns: 1fr; }
  .admin-sidebar { display: none; }
}

/* --- iPhone / small mobile --- */
@media (max-width: 480px) {
  /* Channel title: allow wrapping */
  .channel-active-title {
    font-size: 1.15rem;
    white-space: normal;
    word-wrap: break-word;
  }

  /* Channel switcher: vertical stack, show all */
  .channel-switcher {
    overflow-x: visible;
    flex-direction: column;
  }
  .channel-switcher-list {
    flex-direction: column;
    gap: 4px;
  }
  .channel-option {
    white-space: normal;
  }

  /* Episode items: stacked layout for mobile */
  .episode-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
  }

  /* Thumbnail full width */
  .episode-thumbnail {
    width: 100%;
  }
  .episode-number {
    top: 25px;
    left: 25px;
  }

  /* Info below thumbnail */
  .episode-info {
    order: 0;
  }
  .episode-title {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }
  .episode-duration {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    margin-top: 1px;
  }

  .episode-desc {
    margin-top: 4px;
  }

  /* Compact channel stats */
  .channel-active-stats {
    flex-wrap: wrap;
    gap: 10px;
  }
  .channel-active-desc {
    font-size: 0.8rem;
  }
}

/* --- Admin mobile tenant selector --- */
.admin-mobile-tenant {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.02);
}
.admin-mobile-tenant select {
  flex: 1;
  min-width: 0;
}
.admin-mobile-tenant .mobile-tenant-open {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.admin-mobile-tenant .mobile-tenant-open:hover {
  border-color: var(--glass-border-hover);
  color: var(--text-primary);
}

@media (max-width: 700px) {
  .admin-mobile-tenant { display: flex; }
}

/* --- Admin mobile menu --- */
.admin-mobile-menu {
  display: none;
  padding: 12px 16px;
  border-bottom: 1px solid var(--glass-border);
  gap: 6px;
  overflow-x: auto;
}

@media (max-width: 700px) {
  .admin-mobile-menu { display: flex; }
  /* Stack admin list item actions below text on mobile */
  .admin-list-item {
    flex-wrap: wrap;
  }
  .admin-list-item .item-info {
    flex-basis: calc(100% - 60px); /* leave room for drag handle + color swatch */
  }
  .admin-list-item .item-actions {
    flex-basis: 100%;
    justify-content: flex-start;
    padding-top: 8px;
  }
}

/* Mobile admin separator + orange items */
.mobile-admin-sep {
  width: 1px;
  align-self: stretch;
  background: rgba(255, 149, 0, 0.3);
  flex-shrink: 0;
  margin: 0 2px;
}

.mobile-admin-item {
  color: rgba(255, 149, 0, 0.85) !important;
}
.mobile-admin-item.active {
  color: #ff9500 !important;
  background: rgba(255, 149, 0, 0.12) !important;
  border-color: rgba(255, 149, 0, 0.3) !important;
}

/* --- Empty State --- */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-tertiary);
}

.empty-state svg {
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  opacity: 0.3;
}

.empty-state h3 {
  font-size: 1.1rem;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

/* --- Footer --- */
.site-footer {
  border-top: 1px solid var(--glass-border);
  background: rgba(29, 29, 31, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  color: rgba(255, 255, 255, 0.56);
  font-size: 0.75rem;
  line-height: 1.5;
  margin-top: 0;
}

.footer-content {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 16px 22px;
  position: relative;
}

.footer-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  margin-bottom: 10px;
  position: relative;
}

.footer-apple-logo {
  display: inline-block;
  width: 14px;
  height: 17px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 17'%3E%3Cpath fill='%23999' d='M13.21 5.77a3.68 3.68 0 0 0-2.17 3.36 3.55 3.55 0 0 0 2.15 3.26 8.17 8.17 0 0 1-1.09 2.26c-.68.99-1.39 1.97-2.5 1.99-1.1.02-1.45-.65-2.7-.65-1.26 0-1.65.63-2.69.67-1.07.04-1.89-1.07-2.58-2.05C.31 12.73-.63 9.43.62 7.15A3.79 3.79 0 0 1 3.82 5.4c1.06-.02 2.06.71 2.7.71.65 0 1.87-.88 3.15-.75.54.02 2.04.22 3 1.64-.08.05-1.79 1.04-1.77 3.12zM9.14.37A3.6 3.6 0 0 1 10 2.93a3.09 3.09 0 0 1-2.03 2.12 3.33 3.33 0 0 1-.87-2.42A3.56 3.56 0 0 1 9.14.37z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.7;
  transition: opacity 0.15s ease;
}

.footer-apple-logo:hover {
  opacity: 1;
}

.footer-chevron {
  color: rgba(255, 255, 255, 0.3);
  font-size: 1rem;
  line-height: 1;
}

.footer-tenant-name {
  color: rgba(255, 255, 255, 0.56);
  font-size: 0.75rem;
}

/* The "Apple Video" home link reads as plain breadcrumb text (not link-blue),
   just clickable. */
.footer-home-link {
  color: rgba(255, 255, 255, 0.56);
  font-size: 0.75rem;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--transition-fast);
}
.footer-home-link:hover { color: rgba(255, 255, 255, 0.92); }

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.footer-copyright {
  margin: 0;
  color: rgba(255, 255, 255, 0.56);  /* WCAG contrast (Cora 2026-10-02) */
  font-size: 0.75rem;
}

.footer-legal-links {
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-legal-links a {
  color: rgba(255, 255, 255, 0.48);
  text-decoration: none;
  font-size: 0.75rem;
  transition: color 0.15s ease;
}

.footer-legal-links a:hover {
  color: rgba(255, 255, 255, 0.8);
}

.footer-divider {
  color: rgba(255, 255, 255, 0.2);
  font-size: 0.7rem;
}

.footer-admin-link {
  color: rgba(255, 255, 255, 0.56);  /* WCAG contrast (Cora 2026-10-02) */
}

.footer-admin-link:hover {
  color: rgba(255, 255, 255, 0.56);
}

.footer-internal-badge {
  margin: 6px 0 0;
  font-size: 0.7rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.56);  /* WCAG contrast (Cora 2026-10-02) */
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

@media (max-width: 600px) {
  .footer-legal {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

details[open] > summary .disclosure-arrow { transform: rotate(90deg); }

/* ==================== Diagnostics ==================== */
.diag-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.diag-card { padding: 0; overflow: hidden; }
.diag-card-full { grid-column: 1 / -1; }
.diag-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--glass-border);
}
.diag-card-header h3 {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
}
.diag-card-body { padding: 16px; }
.diag-kv-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  font-size: 0.8rem;
}
.diag-label { color: var(--text-secondary); }
.diag-value { color: var(--text-primary); font-weight: 500; }
.diag-warn { color: var(--accent-orange); }
.diag-error { color: var(--accent-red); font-size: 0.8rem; }
.diag-loading { color: var(--text-tertiary); font-size: 0.8rem; }

.diag-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}
.diag-dot-ok { background: var(--accent-green); }
.diag-dot-miss { background: var(--accent-red); }

.diag-badges { display: flex; flex-wrap: wrap; gap: 10px; }
.diag-badge {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  flex: 1;
  min-width: 140px;
}
.diag-badge strong { font-size: 0.82rem; }
.diag-badge span { opacity: 0.7; font-size: 0.72rem; }
.diag-badge-ok { background: rgba(48, 209, 88, 0.1); border: 1px solid rgba(48, 209, 88, 0.3); color: var(--accent-green); }
.diag-badge-fail { background: rgba(255, 55, 95, 0.1); border: 1px solid rgba(255, 55, 95, 0.3); color: var(--accent-red); }

.diag-dir-list { display: flex; flex-direction: column; gap: 6px; }
.diag-dir-item {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 8px 10px;
  background: rgba(255,255,255,0.02);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
}
.diag-dir-item strong { color: var(--text-primary); }
.diag-dir-item span { color: var(--text-secondary); }

.diag-log-output {
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 12px;
  font-family: 'SF Mono', Menlo, Monaco, monospace;
  font-size: 0.7rem;
  line-height: 1.5;
  color: var(--text-secondary);
  max-height: 400px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

.btn-xs {
  font-size: 0.65rem;
  padding: 3px 10px;
  border-radius: 6px;
  margin-left: auto;
}

@media (max-width: 768px) {
  .diag-grid { grid-template-columns: 1fr; }
}

/* ============================================
   Light Mode — Platform Admin Experimental
   .light-mode overrides all :root vars
   ============================================ */

/* Smooth transition for theme switching */
body, body * {
  transition-property: background-color, color, border-color, box-shadow;
  transition-duration: 0s;
}
.theme-transitioning, .theme-transitioning * {
  transition-duration: 0.3s !important;
  transition-timing-function: ease !important;
}

.light-mode {
  /* --- Core variables --- */
  --bg-primary: #ffffff;
  --bg-secondary: #f5f5f7;
  --bg-tertiary: #ececee;
  --glass-bg: rgba(0, 0, 0, 0.04);
  --glass-bg-hover: rgba(0, 0, 0, 0.07);
  --glass-border: rgba(0, 0, 0, 0.10);
  --glass-border-hover: rgba(0, 0, 0, 0.18);
  --glass-border-top: rgba(0, 0, 0, 0.14);
  --text-primary: rgba(0, 0, 0, 0.88);
  /* WCAG 1.4.3: 0.52 / 0.32 measured 4.1-4.3:1 / 2.2:1 on the light surfaces; these are 6.0 / 5.0+. */
  --text-secondary: rgba(0, 0, 0, 0.62);
  --text-tertiary: rgba(0, 0, 0, 0.57);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 24px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 48px rgba(0, 0, 0, 0.16);
}

/* --- Nav bar --- */
.light-mode .nav-bar .nav-inner {
  background: rgba(245, 245, 247, 0.42);
  border-color: rgba(0, 0, 0, 0.08);
  border-top-color: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22), 0 3px 8px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.light-mode .search-input {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: var(--text-primary);
}
.light-mode .search-input::placeholder {
  color: rgba(0, 0, 0, 0.57);  /* WCAG contrast (Cora 2026-10-02) */
}
.light-mode .search-input:focus {
  background: rgba(0, 0, 0, 0.02);
  border-color: var(--accent-blue);
}

/* --- Footer --- */
.light-mode .site-footer {
  background: #f5f5f7;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
}
.light-mode .footer-apple-logo::before {
  filter: brightness(0);
}
.light-mode .footer-copyright,
.light-mode .footer-legal-links a,
.light-mode .footer-tenant-name,
.light-mode .footer-home-link,
.light-mode .footer-chevron,
.light-mode .footer-breadcrumb,
.light-mode .footer-divider,
.light-mode .footer-internal-badge {
  color: rgba(0, 0, 0, 0.57);  /* WCAG contrast (Cora 2026-10-02) */
}
.light-mode .footer-home-link:hover { color: rgba(0, 0, 0, 0.75); }
.light-mode .footer-legal-links a:hover {
  color: rgba(0, 0, 0, 0.75);
}
.light-mode .footer-breadcrumb {
  border-bottom-color: rgba(0, 0, 0, 0.2);
}

/* --- Background glow — deep color splash on white --- */
.light-mode .channel-bg-glow {
  opacity: 0.85;
}

/* --- Channel header glass --- */
.light-mode .channel-active-bg {
  opacity: 0.28;
}
.light-mode .channel-header-inner {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.35) 100%);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.light-mode .channel-switcher {
  border-left-color: rgba(0, 0, 0, 0.08);
}
.light-mode .channel-option.active {
  background: rgba(0, 0, 0, 0.08);
}
.light-mode .channel-option:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* --- Channel header & tabs --- */
.light-mode .channel-tab {
  color: rgba(0, 0, 0, 0.62);  /* WCAG contrast (Cora 2026-10-02) */
}
.light-mode .channel-tab:hover {
  color: rgba(0, 0, 0, 0.75);
  background: rgba(0, 0, 0, 0.04);
}
.light-mode .channel-tab.active {
  color: rgba(0, 0, 0, 0.88);
  background: rgba(0, 0, 0, 0.06);
}

/* --- Series / Chapter cards --- */
.light-mode .series-card {
  background: rgba(220, 220, 225, 0.35);
  border: 1px solid rgba(0, 0, 0, 0.10);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.10);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  will-change: transform;
}
.light-mode .series-card:hover {
  background: rgba(220, 220, 225, 0.5);
  border-color: rgba(0, 0, 0, 0.16);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.16);
}
.light-mode .series-card .card-accent-bar {
  opacity: 1;
}

.light-mode .chapter-card {
  background: rgba(220, 220, 225, 0.38);
  border: 1px solid rgba(0, 0, 0, 0.10);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.08);
  will-change: transform;
}
.light-mode .chapter-card:hover {
  background: rgba(220, 220, 225, 0.5);
  border-color: rgba(0, 0, 0, 0.16);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24), 0 2px 8px rgba(0, 0, 0, 0.1);
}
.light-mode .chapter-card-glow {
  opacity: 1;
}
.light-mode .chapter-card-accent-bar {
  opacity: 1 !important;
}
/* --- Auto-darken chapter colors for light mode contrast --- */
.light-mode .chapter-card-title {
  color: color-mix(in oklch, var(--chapter-color) 85%, black) !important;
  text-shadow: none;
}
.light-mode .chapter-card-num {
  color: color-mix(in oklch, var(--chapter-color) 85%, black) !important;
  text-shadow: none;
}
.light-mode .chapter-card-icon svg {
  stroke: color-mix(in oklch, var(--chapter-color) 85%, black) !important;
  filter: none;
}
/* --- Auto-darken chapter colors on tray & player page (light mode) --- */
.light-mode .chapter-tray-title {
  color: color-mix(in oklch, var(--chapter-color) 85%, black) !important;
  text-shadow: none;
}
.light-mode .player-series-label .series-link {
  color: color-mix(in oklch, var(--chapter-color) 75%, black) !important;
  text-shadow: none;
}
.light-mode .share-btn {
  color: color-mix(in oklch, var(--chapter-color) 85%, black) !important;
  filter: none;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.06);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 8px;
  align-self: flex-start;
  padding: 6px;
}
.light-mode .share-btn:hover {
  background: rgba(0, 0, 0, 0.09);
}
.light-mode .player-feedback .feedback-btn {
  --feedback-color: color-mix(in oklch, var(--chapter-color) 85%, black);
  text-shadow: none;
}
.light-mode .player-feedback .feedback-btn:hover,
.light-mode .player-feedback .feedback-btn.active {
  color: #fff;
}
/* --- Chapter tray / expanded area --- */
.light-mode .chapter-tray {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.06);
}

/* --- Video cards --- */
.light-mode .video-card {
  background: rgba(220, 220, 225, 0.38);
  border: 1px solid rgba(0, 0, 0, 0.10);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.10);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  will-change: transform;
}
.light-mode .video-card:hover {
  background: rgba(220, 220, 225, 0.5);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.16);
}

/* --- Placeholder thumbnails --- */
.light-mode .placeholder-thumb {
  color: rgba(0, 0, 0, 0.5);
}

/* --- Breadcrumb / back link --- */
.light-mode .breadcrumb a,
.light-mode .back-link {
  color: var(--accent-blue);
}

/* --- Back button + nav button (both modes) --- */
.light-mode .player-container {
  box-shadow: 0 0 30px 4px color-mix(in srgb, color-mix(in oklch, var(--player-glow, #0071e3) 75%, black) 30%, transparent),
              0 0 60px 10px color-mix(in srgb, color-mix(in oklch, var(--player-glow, #0071e3) 75%, black) 12%, transparent);
}
.light-mode .back-button {
  background: rgba(255, 255, 255, 0.75);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.light-mode .back-button:hover {
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
}
.light-mode .player-nav-btn {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.light-mode .episode-item.active {
  background: rgba(0, 0, 0, 0.06);
}
.light-mode .episode-item:hover {
  background: rgba(0, 0, 0, 0.04);
}
.light-mode .up-next-item.current {
  background: rgba(0, 0, 0, 0.08);
}
.light-mode .up-next-item:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* --- Search results light-mode background --- */
.light-mode .search-results .episode-list {
  background: rgba(255, 255, 255, 0.65);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

/* --- Theme toggle in footer --- */
.theme-toggle {
  margin-left: auto;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.5);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.theme-toggle:hover {
  color: rgba(255, 255, 255, 0.8);
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.06);
}
.theme-toggle svg {
  width: 16px;
  height: 16px;
}
.light-mode .theme-toggle {
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.50);  /* WCAG contrast (Cora 2026-10-02) */
}
.light-mode .theme-toggle:hover {
  color: rgba(0, 0, 0, 0.7);
  border-color: rgba(0, 0, 0, 0.25);
  background: rgba(0, 0, 0, 0.04);
}

/* Admin panel theme toggle (in nav bar) */
.admin-theme-toggle {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.5);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-left: 8px;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.admin-theme-toggle:hover {
  color: rgba(255, 255, 255, 0.8);
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.06);
}
.admin-theme-toggle svg {
  width: 14px;
  height: 14px;
}
.light-mode .admin-theme-toggle {
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.50);  /* WCAG contrast (Cora 2026-10-02) */
}
.light-mode .admin-theme-toggle:hover {
  color: rgba(0, 0, 0, 0.7);
  border-color: rgba(0, 0, 0, 0.25);
  background: rgba(0, 0, 0, 0.04);
}

/* --- Sidebar (admin page) --- */
.light-mode .admin-sidebar {
  background: #f5f5f7;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}
.light-mode .admin-mobile-tenant {
  background: rgba(0, 0, 0, 0.02);
  border-bottom-color: rgba(0, 0, 0, 0.1);
}
.light-mode .sidebar-item {
  color: rgba(0, 0, 0, 0.6);
}
.light-mode .sidebar-item:hover {
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.8);
}
.light-mode .sidebar-item.active {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.88);
}

/* --- Admin main area --- */
.light-mode .admin-main {
  background: var(--bg-primary);
}

/* --- Glass panels (charts, containers) --- */
.light-mode .glass-panel {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.4) 100%);
  border-color: rgba(0, 0, 0, 0.10);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* --- Admin list rows (channels, chapters, videos) --- */
.light-mode .admin-row {
  border-color: rgba(0, 0, 0, 0.08);
}
.light-mode .admin-row:hover {
  background: rgba(0, 0, 0, 0.02);
}

/* --- Forms & inputs --- */
.light-mode .form-input,
.light-mode .form-select,
.light-mode .form-textarea {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.12);
  color: var(--text-primary);
}
.light-mode .form-input:focus,
.light-mode .form-select:focus,
.light-mode .form-textarea:focus {
  border-color: var(--accent-blue);
  background: #fff;
}

/* --- Modal --- */
.light-mode .modal-overlay {
  background: rgba(0, 0, 0, 0.4);
}
.light-mode .modal {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.2);
}

/* --- Toast --- */
.light-mode .toast {
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
}

/* --- Buttons --- */
.light-mode .btn-secondary {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.12);
  color: var(--text-primary);
}
.light-mode .btn-secondary:hover {
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.18);
}
.light-mode .btn-icon {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.65);
}
.light-mode .btn-icon:hover {
  background: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.85);
}

/* --- Feedback widget --- */
.light-mode .feedback-widget {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

/* --- Search results --- */
.light-mode .search-result-item {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.light-mode .search-result-item:hover {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* --- Scrollbar --- */
.light-mode ::-webkit-scrollbar-track {
  background: transparent;
}
.light-mode ::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
}
.light-mode ::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

/* ============================================================
   PAGE STYLE: Apple Developer Video Style (alternate layout)
   Activated when <html data-page-style="developer">.
   Two views:
     - Landing (data-dev-view="landing"): channels as big
       collection banners in a grid.
     - Channel detail (data-dev-view="channel"): filterable
       video listing with sidebar chapter filters.
   Supports dark (default) and light (.light-mode) modes.
   ============================================================ */

/* ---- Root palette ---- */
[data-page-style="developer"] {
  --dev-bg: #000;
  --dev-surface: #1d1d1f;
  --dev-surface-hover: #2a2a2d;
  --dev-border: rgba(255, 255, 255, 0.12);
  --dev-text: #f5f5f7;
  --dev-text-secondary: #a1a1a6;
  --dev-text-tertiary: #6e6e73;
  --dev-accent: #2997ff;
  --dev-radius: 18px;
  --dev-radius-sm: 10px;
}

[data-page-style="developer"].light-mode {
  --dev-bg: #fbfbfd;
  --dev-surface: #ffffff;
  --dev-surface-hover: #f5f5f7;
  --dev-border: rgba(0, 0, 0, 0.12);
  --dev-text: #1d1d1f;
  --dev-text-secondary: #515154;
  --dev-text-tertiary: #6e6e73;
  --dev-accent: #0066cc;
}

[data-page-style="developer"] body {
  background: var(--dev-bg);
  color: var(--dev-text);
}

/* Suppress the cosmic backdrop + glow */
[data-page-style="developer"] #channel-bg-glow,
[data-page-style="developer"] #channel-bg-glow-next {
  display: none !important;
}

[data-page-style="developer"] main,
[data-page-style="developer"] #view-home {
  background: var(--dev-bg);
}

[data-page-style="developer"] .container {
  max-width: none;
  padding: 0;
}

[data-page-style="developer"] #channel-header {
  background: var(--dev-bg);
  padding: 0;
  min-height: 0;
}

[data-page-style="developer"] #series-grid {
  max-width: none;
  padding: 0;
  margin: 0;
}

/* ============================================================
   LANDING VIEW: channels as collection banners
   ============================================================ */
[data-page-style="developer"][data-dev-view="landing"] #channel-header {
  border-bottom: 1px solid var(--dev-border);
}

[data-page-style="developer"] .dev-landing-header {
  max-width: 980px;
  margin: 0 auto;
  padding: 72px 32px 32px;
}

[data-page-style="developer"] .dev-landing-title {
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--dev-text);
  margin: 0 0 12px 0;
}

[data-page-style="developer"] .dev-landing-desc {
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--dev-text-secondary);
  max-width: 700px;
  line-height: 1.5;
  margin: 0;
}

[data-page-style="developer"][data-dev-view="landing"] #series-grid {
  max-width: 980px;
  margin: 0 auto;
  padding: 32px 32px 96px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 28px;
}

@media (max-width: 720px) {
  [data-page-style="developer"][data-dev-view="landing"] #series-grid {
    grid-template-columns: 1fr;
    padding: 32px 16px 64px;
    gap: 20px;
  }
}

/* Channel collection banner */
[data-page-style="developer"] .dev-channel-card {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--dev-radius);
  overflow: hidden;
  cursor: pointer;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid var(--dev-border);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease;
}

[data-page-style="developer"] .dev-channel-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transform-origin: center center;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

[data-page-style="developer"].light-mode .dev-channel-card {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

[data-page-style="developer"] .dev-channel-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35);
}

[data-page-style="developer"].light-mode .dev-channel-card:hover {
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.15);
}

[data-page-style="developer"] .dev-channel-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.35) 45%,
    rgba(0, 0, 0, 0) 75%);
  pointer-events: none;
  z-index: 1;
}

[data-page-style="developer"] .dev-channel-card-content {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 22px;
  color: #fff;
  z-index: 2;
}

[data-page-style="developer"] .dev-channel-card-kicker {
  display: none;
}

[data-page-style="developer"] .dev-channel-card-title {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 6px 0;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

[data-page-style="developer"] .dev-channel-card-subtitle {
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 10px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

[data-page-style="developer"] .dev-channel-card-meta {
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
}

[data-page-style="developer"] .dev-empty {
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 24px;
  color: var(--dev-text-secondary);
  text-align: center;
}

/* ============================================================
   CHANNEL DETAIL VIEW: video listing with chapter filters
   ============================================================ */
[data-page-style="developer"][data-dev-view="channel"] #channel-header {
  border-bottom: 1px solid var(--dev-border);
}

[data-page-style="developer"] .dev-channel-header {
  max-width: 980px;
  margin: 0 auto;
  padding: 40px 32px 28px;
}

@media (max-width: 900px) {
  [data-page-style="developer"] .dev-channel-header {
    padding-left: 32px;
  }
}

[data-page-style="developer"] .dev-breadcrumb {
  font-size: 0.875rem;
  color: var(--dev-text-tertiary);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}

[data-page-style="developer"] .dev-breadcrumb-home {
  color: var(--dev-accent);
  text-decoration: none;
  font-weight: 500;
}

[data-page-style="developer"] .dev-breadcrumb-home:hover {
  text-decoration: underline;
}

[data-page-style="developer"] .dev-breadcrumb-sep {
  color: var(--dev-text-tertiary);
  font-size: 1rem;
}

[data-page-style="developer"] .dev-breadcrumb-current {
  color: var(--dev-text);
  font-weight: 500;
}

[data-page-style="developer"] .dev-channel-kicker {
  display: none;
}

[data-page-style="developer"] .dev-channel-title {
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--dev-text);
  margin: 0 0 12px 0;
}

[data-page-style="developer"] .dev-channel-desc {
  font-size: 1.05rem;
  color: var(--dev-text-secondary);
  max-width: 800px;
  line-height: 1.5;
  margin: 0 0 28px 0;
}

[data-page-style="developer"] .dev-channel-search {
  position: relative;
  max-width: 100%;
  margin-top: 12px;
}

[data-page-style="developer"] .dev-channel-search-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--dev-text-tertiary);
  pointer-events: none;
}

[data-page-style="developer"] .dev-channel-search-input {
  width: 100%;
  padding: 14px 16px 14px 46px;
  background: var(--dev-surface);
  border: 1px solid var(--dev-border);
  border-radius: 12px;
  color: var(--dev-text);
  font-size: 0.95rem;
  font-family: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}

[data-page-style="developer"] .dev-channel-search-input:focus {
  outline: none;
  border-color: var(--dev-accent);
  background: var(--dev-surface-hover);
}

[data-page-style="developer"] .dev-channel-search-input::placeholder {
  color: var(--dev-text-tertiary);
}

/* Main grid — Apple uses 980px centered with sidebar absolutely positioned off to the left */
[data-page-style="developer"][data-dev-view="channel"] #series-grid {
  display: block;
  grid-template-columns: none;
  gap: 0;
  max-width: 980px;
  margin: 0 auto;
  padding: 24px 32px 96px;
  position: relative;
}

@media (max-width: 1400px) {
  [data-page-style="developer"][data-dev-view="channel"] #series-grid {
    padding: 24px 16px 64px;
  }
}

/* Sidebar */
/* Sidebar hangs off to the LEFT of the 980px container.
   Apple uses `position: absolute; left: -244px` on their .sidebar-container. */
[data-page-style="developer"] .dev-sidebar,
[data-page-style="developer"] .dev-all-sidebar {
  position: absolute;
  width: 220px;
  left: -244px;
  top: 24px;
}

@media (max-width: 1500px) {
  [data-page-style="developer"] .dev-sidebar,
  [data-page-style="developer"] .dev-all-sidebar {
    left: -200px;
    width: 180px;
  }
}

@media (max-width: 1400px) {
  /* Stack sidebar above the video grid on narrow viewports */
  [data-page-style="developer"] .dev-sidebar,
  [data-page-style="developer"] .dev-all-sidebar {
    position: static;
    width: 100%;
    margin-bottom: 32px;
  }
}

[data-page-style="developer"] .dev-sidebar-section {
  margin-bottom: 32px;
}

[data-page-style="developer"] .dev-sidebar-heading {
  font-size: 1rem;
  font-weight: 600;
  color: var(--dev-text);
  margin: 0 0 16px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--dev-border);
}

[data-page-style="developer"] .dev-sidebar-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

[data-page-style="developer"] .dev-filter-option {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.12s ease;
}

[data-page-style="developer"] .dev-filter-option:hover {
  background: var(--dev-surface-hover);
}

[data-page-style="developer"] .dev-filter-option input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--dev-accent);
  cursor: pointer;
  margin: 0;
}

[data-page-style="developer"] .dev-filter-label {
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--dev-text);
  line-height: 1.3;
}

[data-page-style="developer"] .dev-filter-number {
  display: inline-block;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  margin-right: 6px;
  color: inherit;
}

[data-page-style="developer"] .dev-filter-count {
  font-size: 0.78rem;
  color: var(--dev-text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* Video grid */
[data-page-style="developer"] .dev-channel-videos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 20px;
}

@media (max-width: 900px) {
  [data-page-style="developer"] .dev-channel-videos {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  [data-page-style="developer"] .dev-channel-videos {
    grid-template-columns: 1fr;
  }
}

[data-page-style="developer"] .dev-video-card {
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
  transition: transform 0.2s ease;
}

[data-page-style="developer"] .dev-video-card:hover {
  transform: translateY(-2px);
}

[data-page-style="developer"] .dev-video-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: var(--dev-surface);
  margin-bottom: 12px;
  border: 1px solid var(--dev-border);
}

[data-page-style="developer"] .dev-video-thumb .card-thumbnail-img,
[data-page-style="developer"] .dev-video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

[data-page-style="developer"] .dev-video-thumb .placeholder-thumb {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  font-weight: 700;
  color: #fff;
}

[data-page-style="developer"] .dev-video-duration {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 4px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

[data-page-style="developer"] .dev-video-number-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  font-size: 0.95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  isolation: isolate;
  /* background is set inline to the chapter's accent color tint */
}

[data-page-style="developer"] .dev-video-number-badge-num {
  color: #000;
  mix-blend-mode: destination-out;
}

[data-page-style="developer"] .dev-video-info {
  padding: 0 4px;
}

[data-page-style="developer"] .dev-video-chapter {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--dev-text-tertiary);
  margin-bottom: 4px;
  text-transform: none;
}

[data-page-style="developer"] .dev-video-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--dev-text);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

[data-page-style="developer"] .dev-empty-state {
  grid-column: 1 / -1;
  padding: 64px 24px;
  text-align: center;
  color: var(--dev-text-secondary);
}

/* ============================================================
   Player view — shared tone-down
   ============================================================ */
[data-page-style="developer"] #view-player {
  background: var(--dev-bg);
}

[data-page-style="developer"] #player-view {
  max-width: 980px;
  margin: 0 auto;
  padding: 32px 0 0;
}

[data-page-style="developer"] #view-player > .container {
  max-width: none;
  padding: 0 32px;
}

@media (max-width: 900px) {
  [data-page-style="developer"] #view-player > .container {
    padding: 0 16px;
  }
}

/* Back button — match developer.apple.com "< Back to ..." blue link style */
[data-page-style="developer"] .back-button {
  padding: 0;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
  color: var(--dev-accent, #0066cc);
  font-size: 1rem;
  font-weight: 400;
  margin-bottom: 24px;
  box-shadow: none;
}
[data-page-style="developer"] .back-button:hover {
  background: transparent !important;
  text-decoration: underline;
  color: var(--dev-accent, #0066cc);
  transform: none;
  box-shadow: none;
}
[data-page-style="developer"] .back-button svg {
  width: 12px;
  height: 12px;
  stroke-width: 2.5;
}

/* Player container — drop the accent-color glow, use a flat subtle shadow */
[data-page-style="developer"] .player-container {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--dev-border);
}

[data-page-style="developer"] .light-mode .player-container,
[data-page-style="developer"].light-mode .player-container {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* Info panel — full-bleed gray band under the player.
   Uses a pseudo-element to extend the background to viewport edges while
   keeping the actual content centered within the 1200px column. */
[data-page-style="developer"] .player-info {
  position: relative;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 40px 0 48px;
  margin-top: 40px;
}
[data-page-style="developer"] .player-info::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  background: var(--dev-surface-hover);
  border-top: 1px solid var(--dev-border);
  border-bottom: 1px solid var(--dev-border);
  z-index: 0;
}
[data-page-style="developer"] .player-info > * {
  position: relative;
  z-index: 1;
}

/* Typography — lean closer to developer.apple.com */
[data-page-style="developer"] .player-title {
  font-size: 2.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--dev-text);
  margin-bottom: 8px;
}
[data-page-style="developer"] .player-series-label {
  font-size: 0.95rem;
  color: var(--dev-text-secondary);
  margin-bottom: 20px;
}
[data-page-style="developer"] .player-description {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--dev-text);
}

@media (max-width: 900px) {
  [data-page-style="developer"] .player-info {
    padding: 28px 0 36px;
    margin-top: 28px;
  }
  [data-page-style="developer"] .player-title {
    font-size: 1.625rem;
  }
}

/* Nav bar + footer — flat treatment (no floating island for these tenants) */
[data-page-style="developer"] .nav-bar {
  top: 0;
  padding: 0;
  height: var(--nav-height);
  background: var(--dev-bg) !important;
  border-bottom: 1px solid var(--dev-border);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  pointer-events: auto;
}

[data-page-style="developer"] main {
  padding-top: var(--nav-height);
}

[data-page-style="developer"] .nav-bar .nav-inner {
  background: transparent !important;
  border: none;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Admin panel keeps the classic flat, full-width, in-flow header. The floating
   glass island is for tenant-facing pages only; admin uses its own full-height
   .admin-layout (not body scroll), so a fixed pill would float oddly here. */
body.admin-page .nav-bar {
  position: relative;
  top: 0;
  padding: 0;
  height: var(--nav-height);
  background: rgba(29, 29, 31, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--glass-border);
  pointer-events: auto;
}

body.admin-page .nav-bar .nav-inner {
  height: auto;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* light-mode lives on <html> (documentElement); admin-page is on <body>, so this
   must be a DESCENDANT selector — a compound .light-mode.admin-page never matches
   (the two classes are on different elements) and left the nav dark in light mode. */
.light-mode .admin-page .nav-bar,
.light-mode.admin-page .nav-bar {
  background: rgba(245, 245, 247, 0.85);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

[data-page-style="developer"] .site-footer {
  background: var(--dev-bg);
  border-top: 1px solid var(--dev-border);
  color: var(--dev-text-tertiary);
}

/* Dev-style nav tabs replace the search box */
.dev-nav-tabs {
  display: none;
}
[data-page-style="developer"] .search-wrapper {
  display: none !important;
}
[data-page-style="developer"] .dev-nav-tabs {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-left: auto;
}
[data-page-style="developer"] .dev-nav-tab {
  position: relative;
  padding: 6px 0;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--dev-text-secondary);
  text-decoration: none;
  transition: color 0.12s ease;
}
[data-page-style="developer"] .dev-nav-tab:hover {
  color: var(--dev-text);
}
[data-page-style="developer"] .dev-nav-tab.active {
  color: var(--dev-text);
}
[data-page-style="developer"] .dev-nav-tab.active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--dev-accent);
  border-radius: 2px;
}

@media (max-width: 600px) {
  [data-page-style="developer"] .dev-nav-tabs {
    gap: 18px;
  }
  [data-page-style="developer"] .dev-nav-tab {
    font-size: 0.85rem;
  }
}

/* ============================================================
   DEV STYLE: All Videos view
   ============================================================ */
[data-page-style="developer"][data-dev-view="all-videos"] #channel-header {
  border-bottom: 1px solid var(--dev-border);
}

[data-page-style="developer"] .dev-all-header {
  max-width: 980px;
  margin: 0 auto;
  padding: 40px 32px 28px;
}

@media (max-width: 900px) {
  [data-page-style="developer"] .dev-all-header {
    padding-left: 32px;
  }
}

[data-page-style="developer"] .dev-all-title {
  font-size: 2.5rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--dev-text);
  margin: 0 0 20px 0;
}

[data-page-style="developer"][data-dev-view="all-videos"] #series-grid {
  display: block;
  grid-template-columns: none;
  gap: 0;
  max-width: 980px;
  margin: 0 auto;
  padding: 24px 32px 96px;
  position: relative;
}

@media (max-width: 1400px) {
  [data-page-style="developer"][data-dev-view="all-videos"] #series-grid {
    padding: 24px 16px 64px;
  }
}

[data-page-style="developer"] .dev-all-sidebar {
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding-right: 4px;
}

@media (max-width: 1400px) {
  [data-page-style="developer"] .dev-all-sidebar {
    max-height: none;
  }
}

[data-page-style="developer"] .dev-channel-group {
  border-bottom: 1px solid var(--dev-border);
  padding: 8px 0;
}

[data-page-style="developer"] .dev-channel-group:first-child {
  border-top: 1px solid var(--dev-border);
}

[data-page-style="developer"] .dev-channel-group-header {
  display: grid;
  grid-template-columns: 18px 1fr 20px;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.12s ease;
}

[data-page-style="developer"] .dev-channel-group-header:hover {
  background: var(--dev-surface-hover);
}

[data-page-style="developer"] .dev-channel-group-header input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--dev-accent);
  cursor: pointer;
  margin: 0;
}

[data-page-style="developer"] .dev-channel-group-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--dev-text);
  line-height: 1.3;
}

[data-page-style="developer"] .dev-channel-group-toggle {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--dev-text-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease;
}

[data-page-style="developer"] .dev-channel-group.expanded .dev-channel-group-toggle {
  transform: rotate(90deg);
}

[data-page-style="developer"] .dev-channel-group-children {
  display: none;
  padding: 4px 0 8px 28px;
  flex-direction: column;
  gap: 2px;
}

[data-page-style="developer"] .dev-channel-group.expanded .dev-channel-group-children {
  display: flex;
}


/* ============================================
   LIVE BROADCAST TENANT LAYOUT (Phase 2)
   Single-page layout for tenant_type='live' tenants. Reuses the existing
   Morpheus dark theme, channel-bg-glow, fonts, and footer. Player is
   front and center. Below: 2-col grid (title+description / chat).
   Schedule list below that. Scoped via [data-tenant-type="live"] for
   anything that needs to override on-demand defaults.
   ============================================ */

#view-live { padding: 48px 0 64px; }

/* Hide the nav search box on live tenants — there's only one stream page,
   nothing to search for. */
[data-tenant-type="live"] .search-wrapper { display: none; }

/* Live tenants don't have channels or "all videos" — hide the dev-style nav
   tabs (Channels / All Videos) when this tenant is a live broadcast. Also
   restore the standard Morpheus container width: dev-style normally blows
   .container out to full viewport for the on-demand banner layout, which
   makes the live broadcast page feel uncomfortably wide. */
[data-tenant-type="live"] .dev-nav-tabs { display: none !important; }
[data-page-style="developer"][data-tenant-type="live"] .container {
  max-width: var(--content-max);
  padding: 0 22px;
}

.live-view {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.live-player-wrap {
  display: flex;
  justify-content: center;
}

.live-player {
  position: relative;
  width: 100%;
  max-width: 1200px;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 18px;
  overflow: hidden;
  /* Tight colored border glow that hugs the player — same spec as the
     on-demand player (30px/4px + 60px/10px). Driven by --live-accent which
     app.js sets from stream.accentColor. The bg radial gradient (separate
     fixed-position .channel-bg-glow element) handles the soft page tint. */
  box-shadow:
    0 0 30px 4px color-mix(in srgb, var(--live-accent, #0071e3) 22%, transparent),
    0 0 60px 10px color-mix(in srgb, var(--live-accent, #0071e3) 8%, transparent);
}

.live-player video {
  width: 100%;
  height: 100%;
  display: block;
  background: #000;
}

.live-offline-poster {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--text-secondary);
  background: linear-gradient(135deg, rgba(40,40,42,0.9), rgba(20,20,22,0.95));
}

/* Overlay shown on top of the offline poster image (or by itself when there's
   no poster). Subtle dark scrim for legibility against bright photos. */
.live-offline-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  border-radius: 12px;
  color: var(--text-primary);
}
.live-offline-overlay p { margin: 0; }

.live-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 6px;
}
.live-status.live   { background: rgba(255,55,95,0.15);  color: #ff375f; }
.live-status.idle   { background: rgba(120,120,128,0.2); color: var(--text-tertiary); }
.live-status.ended  { background: rgba(120,120,128,0.2); color: var(--text-tertiary); }

.live-body {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(360px, 1.1fr);
  gap: 24px;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

@media (max-width: 880px) {
  .live-body { grid-template-columns: 1fr; }
}

.live-meta {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.live-meta-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.live-title {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.2;
}

.live-description {
  color: var(--text-secondary);
  line-height: 1.6;
  font-size: 0.95rem;
}

.live-description p { margin: 0 0 8px; }
.live-description a { color: var(--accent-blue); text-decoration: none; }
.live-description a:hover { text-decoration: underline; }

.live-chat {
  display: flex;
  flex-direction: column;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  overflow: hidden;
  /* Hard size — flex children below need min-height:0 to shrink correctly,
     and the grid parent (.live-body) won't stretch us past this height. */
  height: 460px;
  position: relative;
}

.live-chat-body {
  flex: 1 1 auto;
  /* Critical: without min-height:0 on a flex column child, this div refuses
     to shrink below its content height, defeating overflow-y:auto and
     pushing the parent past its max-height. */
  min-height: 0;
  padding: 16px;
  overflow-y: auto;
  font-size: 0.85rem;
}

.live-chat-header {
  padding: 12px 16px;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-primary);
  border-bottom: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.live-chat-header-tools {
  display: flex;
  align-items: center;
  gap: 6px;
}

.live-chat-iconbtn {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
  min-width: 30px;
  /* Centering: when iconbtn is in the input row, it stretches to match the
     input's height. Inline-flex centers the glyph (− / + / 😊) both ways
     regardless of the button's actual height. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.live-chat-iconbtn:hover { color: var(--text-primary); background: rgba(255,255,255,0.1); }

/* Input row (text + emoji + send), then optional cooldown line stacked below */
.live-chat-input-row {
  display: flex;
  align-items: stretch;
  gap: 6px;
}
.live-chat-input-row > input {
  flex: 1 1 auto;
  min-width: 0;
}

/* Emoji popover anchored to the input row */
.live-chat-emoji-popover {
  position: absolute;
  bottom: 60px;
  right: 12px;
  width: 240px;
  max-height: 200px;
  overflow-y: auto;
  background: rgba(30,30,32,0.98);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 8px;
  z-index: 6;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 2px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.live-chat-emoji-cell {
  background: transparent;
  border: 0;
  color: inherit;
  font-size: 1.1rem;
  padding: 4px 0;
  border-radius: 4px;
  cursor: pointer;
  line-height: 1;
}
.live-chat-emoji-cell:hover { background: rgba(255,255,255,0.1); }

.live-presence-toggle {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
}
.live-presence-toggle:hover { color: var(--text-primary); background: rgba(255,255,255,0.1); }

.live-presence-panel {
  position: absolute;
  top: 48px;
  right: 12px;
  width: 240px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 10px 12px;
  z-index: 5;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.live-presence-title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-tertiary);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--glass-border);
}
.live-presence-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.live-presence-row {
  font-size: 0.82rem;
  color: var(--text-secondary);
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 6px;
  word-break: break-word;
}
.live-presence-badge {
  margin-left: auto;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 1px 6px;
  border-radius: 6px;
}
.live-presence-badge.presenter { background: rgba(255,149,0,0.2); color: #ff9f0a; }
.live-presence-badge.mod { background: rgba(0,113,227,0.2); color: var(--accent-blue); }

.live-chat-placeholder {
  font-style: italic;
  margin: 0;
}

.live-chat-input {
  padding: 10px 12px;
  border-top: 1px solid var(--glass-border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.live-chat-input > input { flex: 1 1 auto; }
.live-chat-send-btn {
  /* Stretch to match the input's height (parent .live-chat-input-row uses
     align-items: stretch). Removing the old align-self: flex-end that was
     making this button shorter than the input next to it. */
  padding: 0 16px;
  background: var(--accent-blue);
  color: #fff;
  border: 0;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.live-chat-send-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.live-chat-cooldown { margin: 0; font-size: 0.75rem; }
/* Internal Q&A only — warns the asker their name is published with an approved
   question. External Q&A is anonymous and never renders this. */
.live-chat-attribution { margin: 4px 0 0; font-size: 0.7rem; line-height: 1.35; }

.live-chat-input input {
  width: 100%;
  padding: 8px 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 0.85rem;
  font-family: inherit;
}
.live-chat-input input:disabled { opacity: 0.5; cursor: not-allowed; }

/* Internal-tenant chat message rows */
.live-chat-msg { padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.live-chat-msg:last-child { border-bottom: 0; }
.live-chat-msg-head { display: flex; gap: 8px; align-items: baseline; margin-bottom: 2px; }
.live-chat-msg-name { font-weight: 600; color: var(--text-primary); font-size: 0.8rem; }
.live-chat-msg.is-moderator .live-chat-msg-name { color: var(--accent-blue); }
.live-chat-msg-time { font-size: 0.7rem; color: var(--text-tertiary); }
.live-chat-msg-body { color: var(--text-secondary); word-wrap: break-word; line-height: 1.45; }

/* External-tenant Q&A rows */
.live-qa-approved {
  background: rgba(0,113,227,0.08);
  border-left: 3px solid var(--accent-blue);
  padding: 8px 12px;
  border-radius: 6px;
  margin: 6px 0;
}
.live-qa-q-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent-blue);
  margin-bottom: 2px;
}
.live-qa-q-body { color: var(--text-primary); line-height: 1.5; }

/* --- Moderator broadcast, viewer side ---
   Visually distinct from an approved question (blue) so the audience can tell an
   official message from a peer's question at a glance. */
.live-qa-mod-message {
  background: rgba(191, 90, 242, 0.10);
  border-left: 3px solid var(--accent-purple, #bf5af2);
  padding: 8px 12px;
  border-radius: 6px;
  margin: 6px 0;
}
.live-qa-mod-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent-purple, #bf5af2);
  margin-bottom: 2px;
}
.live-qa-mod-body { color: var(--text-primary); line-height: 1.5; }

.live-qa-mine.pending {
  background: rgba(255,255,255,0.03);
  border-left: 3px solid var(--accent-orange, #ff9500);
  padding: 8px 12px;
  border-radius: 6px;
  margin: 6px 0;
  font-style: italic;
}
.live-qa-mine-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent-orange, #ff9500);
  margin-bottom: 2px;
}
.live-qa-mine-body { color: var(--text-secondary); line-height: 1.45; }

.live-qa-dm {
  background: rgba(0,113,227,0.05);
  border: 1px dashed rgba(0,113,227,0.4);
  padding: 8px 12px;
  border-radius: 6px;
  margin: 6px 0;
}
.live-qa-dm-head {
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--text-primary);
}
.live-qa-dm-tag {
  background: rgba(0,113,227,0.2);
  color: var(--accent-blue);
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 0.65rem;
  margin-left: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.live-qa-dm-body { color: var(--text-secondary); line-height: 1.45; }

/* ============================================================
   Tenant Access Gate splash overlay (passcode + email allowlist
   for external tenants)
   ============================================================ */
#tenant-access-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
#tenant-access-overlay .ag-card {
  background: var(--glass-bg, rgba(28,28,30,0.95));
  border: 1px solid var(--glass-border, rgba(255,255,255,0.12));
  border-radius: 16px;
  padding: 36px 32px;
  max-width: 400px;
  width: 100%;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6);
}
#tenant-access-overlay .ag-title {
  margin: 0 0 8px 0;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text-primary, #fff);
  text-align: center;
}
#tenant-access-overlay .ag-sub {
  margin: 0 0 24px 0;
  font-size: 0.9rem;
  color: var(--text-secondary, #a0a0a8);
  text-align: center;
  line-height: 1.45;
}
#tenant-access-overlay .ag-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-tertiary, #707075);
  margin-bottom: 6px;
}
#tenant-access-overlay .ag-input {
  display: block;
  width: 100%;
  padding: 12px 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--glass-border, rgba(255,255,255,0.12));
  border-radius: 10px;
  color: var(--text-primary, #fff);
  font-size: 1rem;
  font-family: inherit;
  box-sizing: border-box;
}
#tenant-access-overlay .ag-input[type="text"][inputmode="numeric"] {
  letter-spacing: 0.4em;
  text-align: center;
  font-family: ui-monospace, Menlo, monospace;
}
#tenant-access-overlay .ag-submit {
  display: block;
  width: 100%;
  padding: 12px 16px;
  margin-top: 20px;
  background: var(--accent-blue, #0071e3);
  color: #fff;
  border: 0;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
#tenant-access-overlay .ag-submit:disabled { opacity: 0.5; cursor: not-allowed; }
#tenant-access-overlay .ag-error {
  margin: 14px 0 0 0;
  text-align: center;
  font-size: 0.85rem;
  color: #ff4f4f;
}
/* Always in the DOM so role=alert announces it; collapse the gap while empty. */
#tenant-access-overlay .ag-error:empty { margin: 0; }

/* --- Q&A Moderation two-column layout ---
   Left: the moderation tabs. Right: broadcast preview, live public feed, composer.
   The old single-column .qa-mod-shell had max-width:960px; inside the grid it must
   flex instead, so the cap moves to the grid track. */
.qa-mod-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 20px;
  align-items: start;
  max-width: 1400px;
}
.qa-mod-layout .qa-mod-shell { max-width: none; min-width: 0; }

.qa-mod-live {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 14px;
  position: sticky;
  top: 16px;
}

/* Preview keeps the player's 16:9 box so MorpheusPlayer's absolutely-positioned
   controls land correctly — same contract as .player-container / .live-player. */
.qa-mod-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}
.qa-mod-preview video { width: 100%; height: 100%; display: block; background: #000; }
.qa-mod-preview-offline {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.78rem;
  padding: 8px;
}

.qa-mod-live-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
}
.qa-mod-live-hint { font-size: 0.68rem; font-weight: 400; }

.qa-mod-live-body {
  min-height: 160px;
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 2px;
}

.qa-live-item {
  background: rgba(0, 113, 227, 0.08);
  border-left: 3px solid var(--accent-blue);
  padding: 6px 10px;
  border-radius: 6px;
}
.qa-live-item.mod {
  background: rgba(191, 90, 242, 0.10);
  border-left-color: var(--accent-purple, #bf5af2);
}
.qa-live-label {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent-blue);
  margin-bottom: 2px;
}
.qa-live-item.mod .qa-live-label { color: var(--accent-purple, #bf5af2); }
.qa-live-body { font-size: 0.8rem; color: var(--text-primary); line-height: 1.45; word-break: break-word; }

.qa-mod-live-composer { display: flex; flex-direction: column; gap: 6px; }
.qa-mod-live-composer textarea {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  color: var(--text-primary);
  font: inherit;
  font-size: 0.82rem;
  padding: 8px 10px;
}
.qa-mod-live-composer textarea:disabled { opacity: 0.5; cursor: not-allowed; }
.qa-mod-live-note { font-size: 0.66rem; margin: 0; line-height: 1.4; }

/* Single column when there isn't room for a 380px rail — the preview and feed drop
   below the tabs rather than squeezing both. */
@media (max-width: 1100px) {
  .qa-mod-layout { grid-template-columns: minmax(0, 1fr); }
  .qa-mod-live { position: static; }
}

.qa-mod-shell { display: flex; flex-direction: column; gap: 0; max-width: 960px; }
.qa-mod-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--glass-border);
  padding: 0 4px;
  align-items: center;
}
.qa-mod-tab {
  background: transparent;
  border: 0;
  color: var(--text-secondary);
  padding: 10px 16px;
  cursor: pointer;
  font-size: 0.9rem;
  border-bottom: 2px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.qa-mod-tab:hover { color: var(--text-primary); }
.qa-mod-tab.active {
  color: var(--text-primary);
  border-bottom-color: var(--accent-blue);
  font-weight: 600;
}
.qa-mod-badge {
  background: rgba(255,255,255,0.08);
  color: var(--text-secondary);
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
}
.qa-mod-badge.has-unread { background: var(--accent-red); color: #fff; }
.qa-mod-tab.flashing {
  animation: qa-flash 0.4s ease-in-out 2;
}
@keyframes qa-flash {
  0%, 100% { background: transparent; }
  50% { background: rgba(0,113,227,0.2); }
}
.qa-mod-export {
  margin-left: auto;
  padding: 4px 12px;
  font-size: 0.8rem;
  text-decoration: none;
  color: var(--text-secondary);
  border: 1px solid var(--glass-border);
  border-radius: 6px;
}
.qa-mod-export:hover { color: var(--text-primary); }
.qa-mod-tab-content { padding: 16px 0; min-height: 280px; }

/* ---- Connected-attendee roster (Chat / Q&A Moderation, internal tenants) ----
   Reuses the qa-mod-* shell, so only the table itself needs styling. */
.chatmod-attend-summary {
  display: flex;
  gap: 20px;
  padding: 0 0 14px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.chatmod-attend-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.chatmod-attend-table th {
  text-align: left;
  padding: 8px 10px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-tertiary);
  border-bottom: 1px solid var(--glass-border);
  font-weight: 600;
}
.chatmod-attend-table td {
  padding: 10px;
  border-bottom: 1px solid var(--glass-border);
  vertical-align: middle;
}
.chatmod-attend-table tr.is-live td { background: rgba(48, 209, 88, 0.05); }
.chatmod-attend-name { font-weight: 600; }
.chatmod-attend-email {
  display: block;
  font-size: 0.72rem;
  font-family: ui-monospace, Menlo, monospace;
  margin-top: 2px;
}
.chatmod-attend-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 5px;
  font-size: 0.62rem;
  font-weight: 600;
  vertical-align: 1px;
}
.chatmod-attend-badge.presenter {
  background: rgba(10, 132, 255, 0.14);
  color: var(--accent-blue, #0a84ff);
}
.chatmod-attend-badge.mod {
  background: rgba(191, 90, 242, 0.14);
  color: var(--accent-purple, #bf5af2);
}
.chatmod-attend-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-green, #30d158);
  margin-right: 6px;
}

.qa-q-list, .qa-thread-list, .qa-mod-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.qa-q-row {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 12px 14px;
}
.qa-q-row.approved { background: rgba(0,113,227,0.05); border-color: rgba(0,113,227,0.3); }

/* Declined questions. Same layout as approved so a moderator reads both tabs the
   same way — only the colour differs, which is the whole signal. Red is reserved
   here for "we said no", NOT for danger: the row itself is inert and nothing on it
   is destructive (Return to pending is fully reversible). */
.qa-q-row.declined { background: rgba(255,55,95,0.05); border-color: rgba(255,55,95,0.3); }
.qa-q-row.declined .qa-q-tag { background: rgba(255,55,95,0.2); color: var(--accent-red); }
.qa-q-meta { display: flex; gap: 10px; align-items: baseline; margin-bottom: 6px; font-size: 0.75rem; }
.qa-q-viewer { color: var(--text-tertiary); font-family: ui-monospace, Menlo, monospace; }
.qa-q-time { color: var(--text-tertiary); margin-left: auto; }
.qa-q-tag {
  background: rgba(0,113,227,0.2);
  color: var(--accent-blue);
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.qa-q-body { color: var(--text-primary); line-height: 1.5; margin-bottom: 10px; }
.qa-q-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.qa-q-actions .btn { padding: 6px 12px; font-size: 0.8rem; }
.btn-tertiary {
  background: transparent;
  color: var(--text-tertiary);
  border: 1px solid var(--glass-border);
}

.qa-thread-row {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.12s;
}
.qa-thread-row:hover { background: rgba(255,255,255,0.06); }
.qa-thread-row-main { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.qa-thread-viewer { font-family: ui-monospace, Menlo, monospace; color: var(--text-primary); }
.qa-thread-unread {
  background: var(--accent-red);
  color: #fff;
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
}
.qa-thread-last { font-size: 0.75rem; color: var(--text-tertiary); }

.qa-thread-view { display: flex; flex-direction: column; gap: 12px; }
.qa-thread-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--glass-border);
}
.qa-thread-back {
  background: transparent;
  border: 0;
  color: var(--accent-blue);
  cursor: pointer;
  font-size: 0.85rem;
}
.qa-thread-title { font-weight: 600; color: var(--text-primary); }
.qa-thread-messages {
  background: rgba(0,0,0,0.2);
  border-radius: 10px;
  padding: 12px;
  max-height: 420px;
  min-height: 240px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.qa-thread-msg {
  padding: 8px 12px;
  border-radius: 8px;
  max-width: 80%;
}
.qa-thread-msg.from-mod {
  background: rgba(0,113,227,0.15);
  align-self: flex-end;
}
.qa-thread-msg.from-viewer {
  background: rgba(255,255,255,0.06);
  align-self: flex-start;
}
.qa-thread-msg-head { font-size: 0.7rem; color: var(--text-tertiary); margin-bottom: 4px; display: flex; gap: 8px; }
.qa-thread-msg-time { margin-left: auto; }
.qa-thread-msg-body { color: var(--text-primary); line-height: 1.45; word-wrap: break-word; }
.qa-thread-compose { display: flex; gap: 8px; align-items: flex-end; }
.qa-thread-compose textarea { flex: 1; resize: vertical; }

.qa-mod-list-row {
  display: grid;
  grid-template-columns: 1fr 1fr 32px;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
}
.qa-mod-name { font-weight: 600; color: var(--text-primary); }
.qa-mod-remove {
  background: transparent;
  color: var(--text-tertiary);
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}
.qa-mod-remove:hover { color: var(--accent-red); border-color: var(--accent-red); }

.live-schedule {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

.live-section-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 12px;
}

/* Public Upcoming / Previous events tabs. Deliberately quiet — this sits at the
   bottom of a viewer page and must not compete with the player or the schedule
   itself. Matches the existing live-section-title weight rather than introducing a
   new type scale. */
/* "Happening now" / "Current event" badge on the active schedule entry. Sized to sit
   inline with the title without pushing the row taller. The live variant borrows the
   same red as .live-status.live so the page has ONE colour for "on air". */
.live-schedule-now {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
  background: rgba(120, 120, 128, 0.2);
  color: var(--text-tertiary);
}

.live-schedule-now.is-live {
  background: rgba(255, 55, 95, 0.15);
  color: #ff375f;
}

.live-schedule-tabs {
  display: flex;
  gap: 18px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--glass-border);
}
.live-schedule-tab {
  appearance: none;
  background: none;
  border: none;
  padding: 0 0 10px 0;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-tertiary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.live-schedule-tab:hover { color: var(--text-secondary); }
.live-schedule-tab.is-active {
  color: var(--text-primary);
  border-bottom-color: currentColor;
}

.live-schedule-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.live-schedule-entry {
  display: flex;
  gap: 16px;
  padding: 12px 16px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  align-items: center;
}

/* Calendar download button at the right of each schedule entry */
.live-schedule-cal {
  position: relative;
  flex-shrink: 0;
}
.live-cal-btn {
  background: transparent;
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.live-cal-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
}
.live-cal-popover {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 50;
  background: rgba(28, 28, 30, 0.98);
  backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 4px;
  min-width: 180px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.live-cal-opt {
  background: transparent;
  border: 0;
  color: var(--text-primary);
  text-align: left;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
  font-family: inherit;
}
.live-cal-opt:hover { background: rgba(255, 255, 255, 0.08); }

/* Force [hidden] to win over inline display styles. Without this, popovers
   built with inline `display:flex` (emoji picker, calendar dropdown) ignore
   the hidden attribute and stay visible on initial render. */
[hidden] { display: none !important; }

.live-schedule-when {
  display: flex;
  flex-direction: column;
  min-width: 120px;
  font-size: 0.85rem;
}

.live-schedule-day {
  color: var(--text-primary);
  font-weight: 600;
}

.live-schedule-time {
  color: var(--text-tertiary);
  font-size: 0.75rem;
}

.live-schedule-title {
  color: var(--text-primary);
  font-weight: 500;
}
.live-schedule-meta { flex: 1; min-width: 0; }

.live-schedule-description {
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin-top: 4px;
}

.live-skeleton {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.live-skeleton-player {
  width: 100%;
  max-width: 1200px;
  aspect-ratio: 16 / 9;
  background: linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  background-size: 200% 100%;
  animation: live-skel 1.5s linear infinite;
  border-radius: 18px;
  margin: 0 auto;
}

.live-skeleton-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.live-skeleton-row > div {
  height: 320px;
  background: linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  background-size: 200% 100%;
  animation: live-skel 1.5s linear infinite;
  border-radius: 14px;
}

@keyframes live-skel {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.live-error {
  text-align: center;
  padding: 48px 24px;
  color: var(--accent-red);
}

/* ============================================================
   File-attachment cards in admin-authored descriptions.
   Same markup is emitted by the rich text editor on the admin
   side — these styles ensure they render cleanly on the public
   portal too (player page, chapter tray, channel descriptions).
   ============================================================ */
.rte-file-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  margin: 10px 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  font-family: inherit;
}
.rte-file-card .rte-file-icon {
  font-size: 1.4rem;
  line-height: 1;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
}
.rte-file-card .rte-file-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rte-file-card .rte-file-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rte-file-card .rte-file-info {
  font-size: 0.7rem;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.rte-file-card .rte-file-download {
  flex: 0 0 auto;
  background: var(--accent-blue);
  color: #fff;
  border: 0;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: inherit;
}
.rte-file-card .rte-file-download:hover { filter: brightness(1.1); }
/* The × remove button is admin-only; hide on the public portal where
   readers can't (and shouldn't) modify the description. */
.portal-page .rte-file-card .rte-file-remove,
body:not(.admin-page) .rte-file-card .rte-file-remove { display: none; }

/* ==================== Custom tooltip ====================
   Removed v1.10.46 — the floating tooltip JS handler is gone (see
   js/admin.js note). Trigger styles below are kept neutral so the
   data-tip-* attributes + m-tip-trigger class on existing markup don't
   cause stray cursor:help or layout glitches; the only effect now is
   that hovering a video name in Viewership / Feedback shows the standard
   link underline on hover (for the <a>-wrapped variants).
*/
.m-tip-trigger { /* no cursor:help — tooltip is no longer wired */ }

/* ============================================================
   MORPHEUS 2.0 (Default) — page-style skin
   ------------------------------------------------------------
   Scoped entirely under html[data-page-style="morpheus2"], set by
   app.js from tenant.pageStyle. The original "Morpheus (Default)"
   style is therefore byte-for-byte untouched — this only adds rules.

   Pass 1 (palette-only): re-grounds LIGHT MODE in Apple HIG values.
   The stock light mode is stark pure-white with low-contrast rgba
   black text ("too light"). Apple's recipe is a soft system-gray
   base, crisp glyph grays, and the system blue tuned for white.
   Only CSS variable *values* are overridden here (no structural or
   selector changes), so it cannot break layout — it can only recolor.
   Dark mode intentionally left as-is for now.
   ============================================================ */
html[data-page-style="morpheus2"].light-mode {
  /* Surfaces: soft gray base so white elevated content reads as layered,
     instead of a single flat sheet of white. (HIG: base/elevated depth.) */
  --bg-primary:   #f5f5f7;   /* was #ffffff — Apple windowless base gray   */
  --bg-secondary: #ffffff;   /* elevated cards/surfaces float in pure white */
  --bg-tertiary:  #ebebed;

  /* Text: Apple's actual glyph grays — crisper, higher contrast than the
     stock rgba(0,0,0,.88/.52/.32). Meets WCAG AA on the gray base. */
  --text-primary:   #1d1d1f; /* labelColor          */
  /* Darker than Apple's secondaryLabelColor (#6e6e73) / tertiaryLabelColor (#86868b), deliberately:
     those measured 4.3:1 and 3.0:1 on --bg-tertiary #ebebed (WCAG 1.4.3 needs 4.5:1). #6a6a6f is the
     lightest grey of that tint that clears 4.5:1 on all three surfaces (4.9 / 5.4 / 4.5). */
  --text-secondary: #636366;
  --text-tertiary:  #6a6a6f;

  /* Hairlines a touch firmer so cards/sections separate on the gray base. */
  --glass-border:       rgba(0, 0, 0, 0.10);
  --glass-border-hover: rgba(0, 0, 0, 0.16);
  --glass-border-top:   rgba(0, 0, 0, 0.14);

  /* System blue tuned for legibility on light surfaces (HIG glyph-blue). */
  --accent-blue:       #0066cc;
  --accent-blue-hover: #0071e3;

  /* Softer, more diffuse elevation than the stock light shadows. */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.14);
}

/* ============================================================
   MORPHEUS 2.0 — Pass 2: Liquid Glass redesign (both modes)
   ------------------------------------------------------------
   Bold direction: floating glass nav, cinematic hero, glass
   channel rail, and liquid cards with spring motion. All scoped
   under html[data-page-style="morpheus2"]; original style untouched.

   Glass tokens: tuned per-appearance so translucency + specular
   highlights read correctly on dark (true black base) and light
   (gray base). "Edge" = the bright specular hairline along the top
   of a glass surface that sells the Liquid Glass look.
   ============================================================ */
html[data-page-style="morpheus2"] {
  --m2-glass:        rgba(255, 255, 255, 0.055);
  --m2-glass-hover:  rgba(255, 255, 255, 0.10);
  --m2-edge:         rgba(255, 255, 255, 0.22);   /* specular top hairline */
  --m2-stroke:       rgba(255, 255, 255, 0.10);
  --m2-float:        0 12px 44px rgba(0, 0, 0, 0.60), 0 3px 10px rgba(0, 0, 0, 0.45);
  /* Compact hover shadow for rail cards — the rail track clips vertically
     (overflow-x:auto + mask), so a 44px-blur float gets sliced into a hard
     rectangle. This stays within the track's vertical padding. */
  --rail-float:      0 8px 16px rgba(0, 0, 0, 0.50), 0 2px 6px rgba(0, 0, 0, 0.40);
  --m2-blur:         blur(28px) saturate(180%);
  --m2-spring:       0.42s cubic-bezier(0.34, 1.56, 0.64, 1);  /* overshoot spring */
}
html[data-page-style="morpheus2"].light-mode {
  --m2-glass:        rgba(255, 255, 255, 0.62);
  --m2-glass-hover:  rgba(255, 255, 255, 0.82);
  --m2-edge:         rgba(255, 255, 255, 0.95);
  --m2-stroke:       rgba(0, 0, 0, 0.07);
  --m2-float:        0 14px 44px rgba(0, 0, 0, 0.20), 0 3px 10px rgba(0, 0, 0, 0.10);
  --rail-float:      0 8px 16px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* ---- 1. Floating glass nav ------------------------------------
   The bar becomes a transparent rail; the inner row becomes a
   floating, rounded glass pill that hovers over scrolling content. */
html[data-page-style="morpheus2"] .nav-bar {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: none;
  height: auto;
  padding: 12px 16px 0;
}
html[data-page-style="morpheus2"] .nav-inner {
  background: var(--m2-glass);
  -webkit-backdrop-filter: var(--m2-blur);
  backdrop-filter: var(--m2-blur);
  border: 1px solid var(--m2-stroke);
  border-radius: 22px;
  box-shadow: var(--m2-float), inset 0 1px 0 var(--m2-edge);
  padding: 9px 20px;
  max-width: calc(var(--content-max) + 40px);
}
/* Light mode: darken just the floating nav island's drop shadow (not the
   shared --m2-float used by the hero/cards/rail) so the header lifts off
   light backgrounds more clearly. */
html[data-page-style="morpheus2"].light-mode .nav-inner {
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.34), 0 4px 12px rgba(0, 0, 0, 0.20), inset 0 1px 0 var(--m2-edge);
}

/* ---- 2. Cinematic hero ----------------------------------------
   Taller, the photo reads as real imagery (not a faint wash) under
   a legibility scrim, with a glass shell + specular edge and a
   larger SF Pro Display title. */
html[data-page-style="morpheus2"] .channel-header { padding: 40px 0 28px; }
html[data-page-style="morpheus2"] .channel-header-inner {
  min-height: 320px;
  /* Glassier + tinted with the active channel's accent (--channel-accent set per
     render in app.js), reintroducing the channel colour now the page glow is gone. */
  border: 1px solid color-mix(in srgb, var(--channel-accent, #5e9eff) 34%, var(--m2-stroke));
  border-radius: 28px;
  background: var(--m2-glass);
  -webkit-backdrop-filter: blur(30px) saturate(185%);
  backdrop-filter: blur(30px) saturate(185%);
  box-shadow:
    var(--m2-float),
    inset 0 1px 0 var(--m2-edge),
    inset 0 0 55px -12px color-mix(in srgb, var(--channel-accent, #5e9eff) 20%, transparent),
    0 10px 40px -8px color-mix(in srgb, var(--channel-accent, #5e9eff) 22%, transparent);
}
html[data-page-style="morpheus2"] .channel-active-bg {
  opacity: 0.55;
  filter: brightness(0.85) saturate(1.05);
}
/* Legibility scrim behind the hero text — adapts to appearance. */
html[data-page-style="morpheus2"] .channel-active::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg,
    rgba(0, 0, 0, 0.96) 0%,
    rgba(0, 0, 0, 0.78) 34%,
    rgba(0, 0, 0, 0.40) 56%,
    rgba(0, 0, 0, 0) 80%);
}
html[data-page-style="morpheus2"].light-mode .channel-active::after {
  background: linear-gradient(105deg,
    rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.45) 45%, rgba(255, 255, 255, 0) 80%);
}
/* Hero text sits above the scrim; force light text in dark mode for
   contrast over the now-visible photo. */
html[data-page-style="morpheus2"] .channel-active-content { z-index: 2; }
html[data-page-style="morpheus2"]:not(.light-mode) .channel-active-title,
html[data-page-style="morpheus2"]:not(.light-mode) .channel-title-prefix { color: #fff; }
html[data-page-style="morpheus2"] .channel-active-title {
  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 2.3rem;
  line-height: 1.08;
  letter-spacing: -0.025em;
}
html[data-page-style="morpheus2"] .channel-active-desc { font-size: 0.9rem; max-width: 30rem; }

/* ---- 3. Glass channel rail ------------------------------------
   The switcher panel reads as its own frosted layer; options become
   glass pills with an accent glow on hover/active. */
html[data-page-style="morpheus2"] .channel-switcher {
  border-left: 1px solid var(--m2-stroke);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0));
}
html[data-page-style="morpheus2"] .channel-option {
  border-radius: 14px;
  padding: 12px 14px;
  transition: background var(--transition-base), transform var(--transition-fast);
}
html[data-page-style="morpheus2"] .channel-option:hover {
  background: var(--m2-glass-hover);
  transform: translateX(2px);
}
html[data-page-style="morpheus2"] .channel-option.active {
  background: var(--m2-glass-hover);
  box-shadow: inset 0 1px 0 var(--m2-edge), 0 4px 16px rgba(0,0,0,0.18);
}

/* ---- 4. Liquid cards + spring motion --------------------------
   Chapter cards become true glass: specular top edge, rounded,
   and a spring hover-lift with a deeper float shadow. */
html[data-page-style="morpheus2"] .chapter-card {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.14);   /* dark: a touch more opaque than --m2-glass so the page's blue ambient glow doesn't wash through */
  border: 1px solid var(--m2-stroke);
  box-shadow: inset 0 1px 0 var(--m2-edge);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  transition: transform var(--m2-spring), box-shadow var(--transition-base), background var(--transition-base), filter var(--transition-base);
}
html[data-page-style="morpheus2"] .chapter-card:hover {
  background: linear-gradient(135deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.07) 48%, rgba(255,255,255,0.11) 100%);
  transform: translateY(-8px) scale(1.015);
  box-shadow: var(--m2-float), inset 0 1px 0 var(--m2-edge);
}
html[data-page-style="morpheus2"] .chapter-card:hover .chapter-card-icon {
  transform: scale(1.14) translateY(-2px);
}

/* ---- Living glass: drifting caustic light + cursor-tracking specular sheen.
   Both layers are screen-blended and sit BEHIND the card content (z-index),
   so they light the glass without washing out the icon/title/meta. ---- */
html[data-page-style="morpheus2"] .chapter-card { isolation: isolate; }
html[data-page-style="morpheus2"] .chapter-card-glow { z-index: 0; }
html[data-page-style="morpheus2"] .chapter-card-accent-bar,
html[data-page-style="morpheus2"] .chapter-card-icon,
html[data-page-style="morpheus2"] .chapter-card-title,
html[data-page-style="morpheus2"] .chapter-card-meta { position: relative; z-index: 2; }
/* Chapter number pinned to the top-right corner, above the glass light layers. */
html[data-page-style="morpheus2"] .chapter-card-num { left: auto; right: 12px; z-index: 2; }
/* Caustics: soft lights drift across the glass via animated background-position.
   The layer stays card-sized + rounded (border-radius:inherit) because Safari
   does NOT clip blended/transformed layers to the parent's border-radius — so we
   round the pseudo itself and avoid transforms/blur that would bleed past it. */
html[data-page-style="morpheus2"].light-mode .chapter-card::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(40% 52% at 28% 32%, rgba(255,255,255,0.18), transparent 66%),
    radial-gradient(46% 58% at 72% 66%, var(--chapter-color, #ffffff), transparent 70%);
  background-size: 175% 175%, 200% 200%;
  opacity: 0.14; mix-blend-mode: screen;
  animation: chapterCaustics 15s ease-in-out infinite alternate;
}
@keyframes chapterCaustics {
  0%   { background-position: 12% 18%, 82% 72%; }
  50%  { background-position: 34% 42%, 58% 48%; }
  100% { background-position: 18% 52%, 88% 62%; }
}
/* Specular sheen that follows the cursor (--mx/--my fed by JS), brighter on hover. */
html[data-page-style="morpheus2"].light-mode .chapter-card::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(210px 210px at var(--mx, 50%) var(--my, -10%), rgba(255,255,255,0.26), transparent 60%);
  opacity: 0; mix-blend-mode: screen; transition: opacity .3s ease;
}
html[data-page-style="morpheus2"].light-mode .chapter-card:hover::after { opacity: 1; }
/* Expand tray inherits the same glass shell + rounded radius. */
html[data-page-style="morpheus2"] .chapter-expand-tray {
  border-radius: 24px;
  background: var(--m2-glass);
  border: 1px solid var(--m2-stroke);
  box-shadow: var(--m2-float), inset 0 1px 0 var(--m2-edge);
}

/* Respect reduced-motion: kill the spring lift, keep the recolor. */
@media (prefers-reduced-motion: reduce) {
  html[data-page-style="morpheus2"] .chapter-card,
  html[data-page-style="morpheus2"] .channel-option { transition: background var(--transition-base); }
  html[data-page-style="morpheus2"] .chapter-card:hover { transform: none; }
  html[data-page-style="morpheus2"].light-mode .chapter-card::before { animation: none; }
}

/* ============================================================
   MORPHEUS 2.0 — Pass 3: punch-up + cinematic hero
   ============================================================ */

/* ---- Punch up cards (esp. light mode) -------------------------
   Light cards read pale/flat because they had only an inset edge and
   a faint glow. Give them a real float shadow at rest and a richer
   gradient glow so they read as crisp Liquid Glass, not pastels. */
html[data-page-style="morpheus2"] .chapter-card {
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--m2-edge);
}
html[data-page-style="morpheus2"].light-mode .chapter-card {
  /* NOTE: the card background is set by the "Light mode glass block" rule below
     (later in the cascade, same specificity) — kept glassy there. Here we only
     kill the saturate() boost so the page's blue ambient glow isn't amplified
     through the glass. */
  -webkit-backdrop-filter: blur(12px) saturate(100%); backdrop-filter: blur(12px) saturate(100%);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.14), inset 0 1px 0 var(--m2-edge);
}
/* The accent glow sits ON TOP of the card surface and was the real source of the
   color wash — dial it down in light mode so the cards read as glass with a
   subtle accent, not a saturated color panel. */
html[data-page-style="morpheus2"].light-mode .chapter-card-glow { opacity: 0.55; }
html[data-page-style="morpheus2"].light-mode .chapter-card:hover {
  background: linear-gradient(135deg, rgba(255,255,255,0.70) 0%, rgba(255,255,255,0.45) 48%, rgba(255,255,255,0.58) 100%);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22), inset 0 1px 0 var(--m2-edge);
}
/* Slightly saturate the per-card accent glow so the color reads. */
html[data-page-style="morpheus2"] .chapter-card-glow { filter: saturate(1.25); }
html[data-page-style="morpheus2"] .chapter-card-accent-bar { height: 3px; opacity: 0.9; }

/* ---- More cinematic hero --------------------------------------
   Bolder photo + a slow ambient Ken Burns drift on the image layer
   (the container, so any inline crop transform on the <img> is kept).
   Motion is gated behind prefers-reduced-motion: no-preference. */
html[data-page-style="morpheus2"] .channel-active-bg {
  opacity: 0.62;
  filter: brightness(0.88) saturate(1.1);
}
@media (prefers-reduced-motion: no-preference) {
  html[data-page-style="morpheus2"] .channel-active-bg {
    animation: m2-kenburns 32s ease-in-out infinite alternate;
    will-change: transform;
  }
}
@keyframes m2-kenburns {
  from { transform: scale(1.06); }
  to   { transform: scale(1.16) translate(-1.5%, -1%); }
}
/* A touch more presence on the eyebrow + stats over the photo. */
html[data-page-style="morpheus2"]:not(.light-mode) .channel-active-desc,
html[data-page-style="morpheus2"]:not(.light-mode) .channel-stat { color: rgba(255,255,255,0.82); }
html[data-page-style="morpheus2"]:not(.light-mode) .channel-stat svg { opacity: 0.85; }

/* ============================================================
   MORPHEUS 2.0 — Pass 4: Featured & Popular home rail
   Horizontal Liquid Glass scroller below the chapter grid.
   Rendered by app.js renderHomeRail() (morpheus2 only).
   ============================================================ */
html[data-page-style="morpheus2"] .home-rail {
  max-width: var(--content-max);
  margin: 40px auto 20px;
  padding: 0 22px;
}
html[data-page-style="morpheus2"] .home-rail-head {
  margin: 0 0 16px;
}
html[data-page-style="morpheus2"] .home-rail-label {
  display: block;
  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1.3rem; font-weight: 600; letter-spacing: -0.02em;
  color: var(--text-primary);
}
html[data-page-style="morpheus2"] .home-rail-sub {
  display: block; margin-top: 3px;
  font-size: 0.82rem; color: var(--text-secondary);
}
/* The rail lives inside .container, which already supplies the max-width + 22px
   side padding — so .home-rail re-pads the heading ~22px to the right of the
   content column (#series-grid / .channel-header) above it. Pull the head (label
   + sub) back so it lines up with that column. NOT applied to the landing rail,
   which lives in .landing-wrap (padding:0) instead of .container. The cards/track
   are intentionally left where they are so the hover-shadow buffer is preserved. */
html[data-page-style="morpheus2"] .container .home-rail-head { margin-left: -22px; }

/* Single-channel tenants (channel switcher hidden, set via data-single-channel
   in app.js): the video listing cards' title/description body renders near-opaque
   (less of the channel glow showing through) so the text area reads clean white.
   Targets the card body; tune the alphas to taste. */
html[data-single-channel="true"][data-page-style="morpheus2"].light-mode .series-card .card-body {
  background: rgba(255, 255, 255, 0.96);
}
html[data-single-channel="true"][data-page-style="morpheus2"]:not(.light-mode) .series-card .card-body {
  background: rgba(40, 40, 42, 0.94);
}

/* Single-channel layouts have a full-width hero (no channel switcher beside it),
   so give the header text more presence to fill the extra room. */
html[data-single-channel="true"][data-page-style="morpheus2"] .channel-active-title { font-size: 2.9rem; }
html[data-single-channel="true"][data-page-style="morpheus2"] .channel-active-desc { font-size: 1.06rem; max-width: 42rem; }
html[data-single-channel="true"][data-page-style="morpheus2"] .channel-eyebrow { font-size: 0.8rem; }
html[data-single-channel="true"][data-page-style="morpheus2"] .channel-title-prefix { font-size: 1rem; }
html[data-single-channel="true"][data-page-style="morpheus2"] .channel-stat { font-size: 0.85rem; }
html[data-page-style="morpheus2"] .home-rail-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 300px;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  /* Wide horizontal padding gives the first/last cards' side shadows plenty of
     room before the track's clip edge; the matching negative margin pulls the
     track back out so cards still line up under the "Featured & Popular" heading. */
  padding: 10px 40px 34px;
  margin: 0 -40px;
  /* Make scroll-snap rest AT the padded start (scrollLeft 0) instead of
     auto-scrolling 40px into the left fade — keeps the first card under the
     heading with its shadow intact. */
  scroll-padding-inline: 40px;
  /* Hide the horizontal scrollbar. macOS uses overlay scrollbars so `thin` was
     invisible there, but Windows reserves permanent gutter space and drew a bar
     under every rail. The .rail-arrow controls (shown on hover, and on every
     pointer device — they're only display:none under @media (hover: none)) are
     the scroll affordance, so nothing becomes unreachable. Same treatment as
     .channel-switcher. */
  scrollbar-width: none;
  /* Edge fade-off: each edge's opacity is 1 (solid) by default and drops to 0
     only when its class is set, fading over a fixed 64px. Using edge OPACITY
     (not a 0-width stop) guarantees a truly solid edge when off — no sliver. */
  --fade-l-op: 1;
  --fade-r-op: 1;
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,var(--fade-l-op)) 0, #000 64px, #000 calc(100% - 88px), rgba(0,0,0,var(--fade-r-op)) calc(100% - 24px));
  mask-image: linear-gradient(to right, rgba(0,0,0,var(--fade-l-op)) 0, #000 64px, #000 calc(100% - 88px), rgba(0,0,0,var(--fade-r-op)) calc(100% - 24px));
}
html[data-page-style="morpheus2"] .home-rail-track.fade-left  { --fade-l-op: 0; }
html[data-page-style="morpheus2"] .home-rail-track.fade-right { --fade-r-op: 0; }
/* scrollbar-width above covers Firefox and Chromium 121+; this covers Safari and
   older Chrome/Edge, which is where the Windows bar actually showed up. The
   global ::-webkit-scrollbar rule only sets `width`, so a HORIZONTAL bar kept
   its default height and stayed visible. */
html[data-page-style="morpheus2"] .home-rail-track::-webkit-scrollbar { display: none; }
html[data-page-style="morpheus2"] .rail-card {
  scroll-snap-align: start;
  display: flex; flex-direction: column;   /* blockify so the markup's leading whitespace can't push the thumb down (the 10px top gap) */
  text-align: left; cursor: pointer; padding: 0; overflow: hidden;
  font-family: inherit; color: var(--text-primary);
  border: 1px solid var(--m2-stroke);
  border-top: 3px solid var(--rail-accent);   /* ties each card to its chapter */
  border-radius: 18px;
  background: var(--m2-glass);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--m2-edge);
  transition: transform var(--m2-spring), box-shadow var(--transition-base), background var(--transition-base), filter var(--transition-base);
}
html[data-page-style="morpheus2"] .rail-card:hover {
  transform: translateY(-6px);
  background: var(--m2-glass-hover);
  box-shadow: var(--rail-float), inset 0 1px 0 var(--m2-edge);
}
/* Light mode: slightly darker resting shadow on the rail cards (kept off hover
   via :not so the lift shadow still wins). */
html[data-page-style="morpheus2"].light-mode .rail-card:not(:hover) {
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.12), inset 0 1px 0 var(--m2-edge);
}
/* Featured & Popular chapter label → accent pill (light mode), matching the
   player page so low-contrast accents stay readable. */
html[data-page-style="morpheus2"].light-mode .rail-card-chapter {
  display: inline-block;
  color: var(--rail-fg, #1d1d1f);
  padding: 2px 8px; border-radius: 6px; margin-bottom: 6px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--rail-accent) 42%, white) 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, color-mix(in oklch, var(--rail-accent) 80%, white) 0%, var(--rail-accent) 100%);
}
html[data-page-style="morpheus2"] .rail-thumb {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 17px 17px 0 0;   /* clip the hover overlay to rounded top corners (Safari leaks the card's clip during the hover transform) */
  background: rgba(0, 0, 0, 0.18);
}
/* Top scrim so the badge stays legible over busy slide thumbnails. */
html[data-page-style="morpheus2"] .rail-thumb::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 58px; z-index: 1;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), transparent);
  pointer-events: none;
}
html[data-page-style="morpheus2"] .rail-thumb-img,
html[data-page-style="morpheus2"] .rail-thumb-fallback {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
html[data-page-style="morpheus2"] .rail-thumb-fallback { opacity: 0.9; }
html[data-page-style="morpheus2"] .rail-badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 3px 8px; border-radius: 999px; color: #fff;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
html[data-page-style="morpheus2"] .rail-badge--featured { background: var(--accent-blue); }
html[data-page-style="morpheus2"] .rail-duration {
  position: absolute; bottom: 10px; right: 10px; z-index: 2;
  font-size: 0.66rem; font-weight: 600; color: #fff;
  padding: 2px 7px; border-radius: 6px; background: rgba(0, 0, 0, 0.6);
}
html[data-page-style="morpheus2"] .rail-play {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.25); opacity: 0;
  transition: opacity var(--transition-base);
}
html[data-page-style="morpheus2"] .rail-play svg {
  width: 46px; height: 46px; color: #fff;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45));
}
html[data-page-style="morpheus2"] .rail-card:hover .rail-play { opacity: 1; }
html[data-page-style="morpheus2"] .rail-card-body {
  position: relative;
  padding: 12px 14px 15px;
}
/* Faint accent wash so the card tints toward its chapter color. */
html[data-page-style="morpheus2"] .rail-card-body::before {
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0.06;
  background: linear-gradient(180deg, var(--rail-accent), transparent 70%);
  pointer-events: none;
}
html[data-page-style="morpheus2"] .rail-card-chapter {
  position: relative; z-index: 1;
  font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--rail-accent); margin-bottom: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html[data-page-style="morpheus2"] .rail-card-title {
  position: relative; z-index: 1;
  font-size: 0.92rem; font-weight: 600; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
  html[data-page-style="morpheus2"] .rail-card { transition: background var(--transition-base); }
  html[data-page-style="morpheus2"] .rail-card:hover { transform: none; }
}

/* ============================================================
   MORPHEUS 2.0 — Pass 5: hero text contrast (esp. light mode)
   The brightened photo washed out the secondary-gray description.
   ============================================================ */
html[data-page-style="morpheus2"] .channel-active-desc { font-size: 0.92rem; }

/* Light mode: dim the photo behind the text column, strengthen + extend the
   scrim so it fully backs the description, and darken the copy. */
/* Light mode: keep the photo vivid, but make the scrim directional (strong only
   behind the text, clearing by the right) and add a soft white text-halo so the
   dark copy stays legible OVER the photo — instead of washing the image out. */
html[data-page-style="morpheus2"].light-mode .channel-active-bg { opacity: 0.62; }
html[data-page-style="morpheus2"].light-mode .channel-active::after {
  background: linear-gradient(105deg,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(255, 255, 255, 0.66) 32%,
    rgba(255, 255, 255, 0.30) 52%,
    rgba(255, 255, 255, 0) 74%);
}
html[data-page-style="morpheus2"].light-mode .channel-active-desc {
  color: rgba(0, 0, 0, 0.82);
  /* Wide, soft white backlight halo — bright tight core fading over a long
     range (up to 100px) so the description lifts off the photo. Subtle but
     enough to pop. */
  text-shadow:
    0 0 12px rgba(255, 255, 255, 1),
    0 0 28px rgba(255, 255, 255, 0.95),
    0 0 55px rgba(255, 255, 255, 0.78),
    0 0 95px rgba(255, 255, 255, 0.55);
}
html[data-page-style="morpheus2"].light-mode .channel-active-title {
  text-shadow: 0 0 22px rgba(255, 255, 255, 0.8), 0 1px 2px rgba(255, 255, 255, 0.6);
}
html[data-page-style="morpheus2"].light-mode .channel-title-prefix,
html[data-page-style="morpheus2"].light-mode .channel-eyebrow {
  text-shadow: 0 0 16px rgba(255, 255, 255, 0.85);
}
html[data-page-style="morpheus2"].light-mode .channel-eyebrow,
html[data-page-style="morpheus2"].light-mode .channel-stat { color: rgba(0, 0, 0, 0.6); }

/* Dark mode: nudge the description brighter + add a faint shadow for legibility
   over the photo. */
html[data-page-style="morpheus2"]:not(.light-mode) .channel-active-desc {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

/* Single-channel tenants, dark mode: the hero is full-width with no switcher
   beside it, so the header text sits over more of the (often bright) photo.
   Give it a wide, soft DARK backlight halo — the dark-mode mirror of the
   light-mode white halo above — so the white text pops off the image. Tune the
   alphas/radii to taste. */
html[data-single-channel="true"][data-page-style="morpheus2"]:not(.light-mode) .channel-active-title {
  text-shadow:
    0 0 16px rgba(0, 0, 0, 0.85),
    0 0 36px rgba(0, 0, 0, 0.7),
    0 0 70px rgba(0, 0, 0, 0.5),
    0 1px 2px rgba(0, 0, 0, 0.6);
}
html[data-single-channel="true"][data-page-style="morpheus2"]:not(.light-mode) .channel-active-desc {
  text-shadow:
    0 0 12px rgba(0, 0, 0, 0.8),
    0 0 28px rgba(0, 0, 0, 0.65),
    0 0 55px rgba(0, 0, 0, 0.45);
}
html[data-single-channel="true"][data-page-style="morpheus2"]:not(.light-mode) .channel-title-prefix,
html[data-single-channel="true"][data-page-style="morpheus2"]:not(.light-mode) .channel-stat {
  text-shadow:
    0 0 14px rgba(0, 0, 0, 0.8),
    0 0 30px rgba(0, 0, 0, 0.55);
}
/* The eyebrow is the small accent-colored (blue) kicker above the title — give
   it a touch more punch than the prefix/stat: a tighter, denser dark core plus a
   wider halo so the saturated blue lifts cleanly off the photo. */
html[data-single-channel="true"][data-page-style="morpheus2"]:not(.light-mode) .channel-eyebrow {
  text-shadow:
    0 0 8px rgba(0, 0, 0, 0.9),
    0 0 18px rgba(0, 0, 0, 0.8),
    0 0 38px rgba(0, 0, 0, 0.6),
    0 1px 2px rgba(0, 0, 0, 0.7);
}

/* ============================================================
   MORPHEUS 2.0 — Pass 6: rail arrows + player-page polish
   ============================================================ */

/* ---- Rail hover scroll-arrows ---- */
html[data-page-style="morpheus2"] .home-rail-viewport { position: relative; }
html[data-page-style="morpheus2"] .rail-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-primary);
  background: var(--m2-glass-hover);
  border: 1px solid var(--m2-stroke);
  -webkit-backdrop-filter: var(--m2-blur); backdrop-filter: var(--m2-blur);
  box-shadow: var(--m2-float);
  opacity: 0;
  transition: opacity var(--transition-base), transform var(--transition-fast);
}
html[data-page-style="morpheus2"] .rail-arrow svg { width: 20px; height: 20px; }
html[data-page-style="morpheus2"] .rail-arrow--prev { left: -6px; }
html[data-page-style="morpheus2"] .rail-arrow--next { right: -6px; }
html[data-page-style="morpheus2"] .home-rail-viewport:hover .rail-arrow { opacity: 1; }
html[data-page-style="morpheus2"] .rail-arrow:hover { transform: translateY(-50%) scale(1.08); }
html[data-page-style="morpheus2"] .rail-arrow[hidden] { display: none; }
/* Touch devices scroll by swipe — no arrows needed. */
@media (hover: none) { html[data-page-style="morpheus2"] .rail-arrow { display: none; } }

/* ---- Player page: back button = Liquid Glass pill with the chapter accent as
   a left bar + accent arrow + darker (primary) text, with breathing room. ---- */
html[data-page-style="morpheus2"] .back-button {
  margin: 22px 0 28px;
  padding: 9px 16px;
  position: relative;
  z-index: 2;                 /* sit above the video's glow shadow */
  color: var(--text-primary);
  background: var(--m2-glass);
  -webkit-backdrop-filter: var(--m2-blur);
  backdrop-filter: var(--m2-blur);
  border: 1px solid var(--m2-stroke);
  border-left: 3px solid var(--back-accent, var(--accent-blue));
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--m2-edge);
  border-radius: 14px;
}
html[data-page-style="morpheus2"] .back-button svg {
  color: inherit;
}
/* Light mode: match the bottom cards' glass exactly (now that z-index keeps the
   video glow off it, the translucency reads correctly). */
html[data-page-style="morpheus2"].light-mode .back-button {
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}

/* ---- Player glow (light mode): tuned to ~halfway between subtle and strong —
   present and vibrant, not overpowering. ---- */
html[data-page-style="morpheus2"].light-mode .player-container {
  box-shadow:
    0 0 32px 3px color-mix(in srgb, var(--player-glow, #0071e3) 65%, transparent),
    0 0 66px 16px color-mix(in srgb, var(--player-glow, #0071e3) 35%, transparent),
    0 0 130px 52px color-mix(in srgb, var(--player-glow, #0071e3) 20%, transparent);
}

/* ---- Player page (light mode): two LIGHT frosted-glass cards that match the
   home chapter/rail cards — white translucent + blur, specular top edge, a
   yellow accent bar + faint accent wash. Cohesive with the light page; the
   share button now lives inside the left card's title row, and the true accent
   (yellow) is restored on top of the accent wash. ---- */
html[data-page-style="morpheus2"].light-mode .player-info {
  background: none; border: none; box-shadow: none; padding: 0;
  align-items: flex-start;
}
html[data-page-style="morpheus2"].light-mode .player-meta,
html[data-page-style="morpheus2"].light-mode .player-sidebar {
  position: relative;
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--m2-stroke);
  border-top: 3px solid var(--player-accent, var(--accent-blue));
  border-radius: 22px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.08), inset 0 1px 0 var(--m2-edge);
  padding: 26px 28px;
}
/* Faint accent wash from the top, like the home cards. */
html[data-page-style="morpheus2"].light-mode .player-meta::before,
html[data-page-style="morpheus2"].light-mode .player-sidebar::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: 22px; opacity: 0.12;
  background: radial-gradient(ellipse at 50% 0%, var(--player-accent, var(--accent-blue)) 0%, transparent 60%);
}
html[data-page-style="morpheus2"].light-mode .player-meta > *,
html[data-page-style="morpheus2"].light-mode .player-sidebar > * { position: relative; z-index: 1; }

/* Accent elements: glassy accent pills — a white sheen at the top fading into
   the accent (no dark/black end), no drop shadow (that was the stray line), with
   adaptive dark/white BOLD text. */
html[data-page-style="morpheus2"].light-mode .player-series-label .series-link,
html[data-page-style="morpheus2"].light-mode .player-feedback .feedback-btn,
html[data-page-style="morpheus2"].light-mode .share-btn {
  color: var(--accent-fg, #1d1d1f) !important;
  font-weight: 600;
  -webkit-appearance: none; appearance: none; border: none; outline: none;
  /* Lighter, softer pill: a yellow-tinted top sheen (not pure white, so the top
     keeps a bit of contrast against the light page) over a light-accent → accent
     base, no dark/black end. */
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--chapter-color) 42%, white) 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg,
      color-mix(in oklch, var(--chapter-color) 80%, white) 0%,
      var(--chapter-color) 100%);
  background-clip: padding-box;
  box-shadow: none;
}
html[data-page-style="morpheus2"].light-mode .player-series-label .series-link {
  display: inline-block; text-shadow: none;
  padding: 2px 9px; border-radius: 7px;
}
html[data-page-style="morpheus2"].light-mode .player-feedback .feedback-btn { --feedback-color: var(--chapter-color); }
html[data-page-style="morpheus2"].light-mode .player-feedback .feedback-btn:hover,
html[data-page-style="morpheus2"].light-mode .player-feedback .feedback-btn.active {
  background: color-mix(in oklch, var(--chapter-color) 80%, black);
}
/* Share button: the base .share-btn sits at opacity:0.6 — bump to full so its
   accent gradient matches the other pills. */
html[data-page-style="morpheus2"].light-mode .share-btn { opacity: 1; border: 1px solid transparent; }

/* Share button sits top-right of the title row (both morpheus2 modes). */
html[data-page-style="morpheus2"] .player-title-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
}

/* ============================================================
   "Block of glass" chapter cards — beveled edges (bright top/left,
   shaded bottom/right to imply thickness) + a diagonal surface sheen
   + deeper blur, so each card reads like a solid translucent glass
   block with smooth corners.
   ============================================================ */
html[data-page-style="morpheus2"] .chapter-card {
  border-radius: 26px;
  -webkit-backdrop-filter: blur(26px) saturate(165%);
  backdrop-filter: blur(26px) saturate(165%);
}
/* Light mode glass block */
html[data-page-style="morpheus2"].light-mode .chapter-card {
  border: 1px solid rgba(255, 255, 255, 0.8);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.30) 48%, rgba(255,255,255,0.42) 100%);
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, 0.95),   /* top edge highlight   */
    inset 2px 0 7px rgba(255, 255, 255, 0.55),   /* left inner sheen      */
    inset 0 -5px 11px rgba(0, 0, 0, 0.10),        /* bottom thickness shade */
    inset -3px 0 8px rgba(0, 0, 0, 0.05),         /* right inner shade     */
    0 6px 16px rgba(0, 0, 0, 0.34);               /* float (tighter+darker) */
}
html[data-page-style="morpheus2"].light-mode .chapter-card:hover {
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, 0.95),
    inset 2px 0 7px rgba(255, 255, 255, 0.6),
    inset 0 -5px 11px rgba(0, 0, 0, 0.12),
    inset -3px 0 8px rgba(0, 0, 0, 0.06),
    0 14px 30px rgba(0, 0, 0, 0.14);
  /* Cast the glass's own colour beneath the card on hover — coloured light
     refracting out of the glass (drop-shadow escapes the rounded clip). */
  filter:
    drop-shadow(0 16px 30px color-mix(in srgb, var(--chapter-color, #8ab4ff) 28%, transparent))
    drop-shadow(0 7px 14px color-mix(in srgb, var(--chapter-color, #8ab4ff) 17%, transparent));
}
/* Same accent-coloured hover cast in dark mode (resting look unchanged). */
html[data-page-style="morpheus2"]:not(.light-mode) .chapter-card:hover {
  filter:
    drop-shadow(0 16px 30px color-mix(in srgb, var(--chapter-color, #8ab4ff) 28%, transparent))
    drop-shadow(0 7px 14px color-mix(in srgb, var(--chapter-color, #8ab4ff) 17%, transparent));
}
/* Dark mode glass block */
html[data-page-style="morpheus2"]:not(.light-mode) .chapter-card {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.03) 48%, rgba(255,255,255,0.06) 100%);
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, 0.30),
    inset 2px 0 7px rgba(255, 255, 255, 0.10),
    inset 0 -5px 12px rgba(0, 0, 0, 0.45),
    inset -3px 0 9px rgba(0, 0, 0, 0.30),
    0 16px 40px rgba(0, 0, 0, 0.55),
    0 6px 26px -6px color-mix(in srgb, var(--channel-accent, #8ab4ff) 20%, transparent);  /* resting glow = CHANNEL accent (uniform); hover cast switches to the card's own --chapter-color */
}

/* Subtle glass surface sheen on the hero + Featured & Popular cards — a soft,
   top-weighted diagonal light catch that ties them to the glass-block chapter
   cards. Pointer-events:none so it never blocks clicks. */
html[data-page-style="morpheus2"] .channel-header-inner,
html[data-page-style="morpheus2"] .rail-card { position: relative; }
html[data-page-style="morpheus2"] .channel-header-inner::after,
html[data-page-style="morpheus2"] .rail-card::after {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(150deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.10) 20%, transparent 44%);
}

/* Landing welcome bloom — subtle green wash behind the welcome card. Stronger
   in light mode so it actually reads against the near-white background. */
.landing-bloom {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse 95% 80% at 50% 34%,
    rgba(48,209,88,0.18) 0%, rgba(30,180,100,0.10) 24%, rgba(20,150,110,0.04) 50%, transparent 74%);
  filter: blur(80px);
}
html.light-mode .landing-bloom {
  background: radial-gradient(ellipse 95% 80% at 50% 34%,
    rgba(40,190,90,0.42) 0%, rgba(28,170,100,0.24) 24%, rgba(20,150,110,0.10) 50%, transparent 74%);
  filter: blur(70px);
}

/* ============================================================
   Landing page (no-tenant "Apple Video") — flow layout so the public
   Featured & Popular rail can sit below the welcome content.
   ============================================================ */
.landing-wrap {
  position: relative; z-index: 1;
  max-width: var(--content-max);
  margin: 0 auto;
  width: 100%;
  /* The flex gap + bottom padding are 28px (min for card→rail and rail→footer);
     the TOP padding is larger (52px) to push the welcome card further down from
     the nav. All gaps still get an equal +(free space)/3 from space-evenly, so
     the dynamic resize is preserved — the top just has a bigger floor. */
  padding: 52px 22px 28px;
  gap: 28px;
  /* .landing-wrap is a DIRECT flex child of <main> via #view-home (see the
     body.av-landing block below); flex:1 fills it from the nav's bottom to the
     footer's top, and space-evenly distributes the 3 gaps (nav→card, card→rail,
     rail→footer). Footer flush; if content exceeds the viewport it just scrolls. */
  display: flex; flex-direction: column; justify-content: space-evenly;
}
.landing-welcome {
  /* No bottom margin — the card→rail gap is one of the 3 space-evenly gaps on
     .landing-wrap, kept equal to nav→card and rail→footer. */
  max-width: 600px; margin: 0 auto; text-align: center;
}

/* Animated green glow ring around the welcome card. The card has overflow:hidden,
   so the glow lives behind it on a non-clipping stage wrapper. We animate the
   conic gradient's ANGLE (via @property) so the green hotspots sweep around the
   card edges without rotating the box itself (no visible corners), plus a slow
   opacity breathe. Sits above the body bloom, behind the card. */
@property --av-glow-angle {
  syntax: '<angle>'; initial-value: 0deg; inherits: false;
}
.landing-card-stage { position: relative; width: min(540px, calc(100vw - 48px)); margin: 0 auto; }
.landing-card-glow {
  position: absolute; inset: -14px; z-index: 0; pointer-events: none;
  border-radius: 36px;
  background: conic-gradient(from var(--av-glow-angle),
    #30d158 0%, #5fd35f 18%, #2fb8a0 34%, transparent 50%,
    #34c759 66%, #5fd35f 84%, #30d158 100%);
  filter: blur(24px);
  opacity: 0.55;
  animation: av-glow-sweep 9s linear infinite, av-glow-breathe 4.5s ease-in-out infinite;
}
html.light-mode .landing-card-glow {
  opacity: 0.7; filter: blur(26px) saturate(1.2);
  --av-glow-min: 0.55; --av-glow-max: 0.82;
}
@keyframes av-glow-sweep { to { --av-glow-angle: 360deg; } }
@keyframes av-glow-breathe { 0%, 100% { opacity: var(--av-glow-min, 0.42); } 50% { opacity: var(--av-glow-max, 0.62); } }
@media (prefers-reduced-motion: reduce) {
  .landing-card-glow { animation: none; }
}
/* While the Discover panel is open, pause the welcome-card glow sweep. The panel
   is fixed with a backdrop-filter directly over this glow; a continuously-
   animating backdrop forces the filter to recomposite every frame, which makes
   the panel's :hover states flicker on WebKit. The glow is fully hidden behind
   the panel anyway, so pausing it is invisible. */
body.discover-open .landing-card-glow { animation-play-state: paused; }
/* Glassy "block of glass" welcome card, matching the chapter cards. */
.landing-welcome-card {
  position: relative; overflow: hidden;
  z-index: 1;
  padding: 0;
  width: 100%; max-width: 540px; aspect-ratio: 1.6 / 1; margin: 0 auto;
  display: flex; flex-direction: column;
  border-radius: 26px;
  -webkit-backdrop-filter: blur(26px) saturate(165%); backdrop-filter: blur(26px) saturate(165%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  /* Dark mode: a genuinely DARK, mostly-opaque glass (not a light frosted panel)
     — reads better in dark mode, gives the light card text good contrast, and
     keeps the green glow as an edge ring. Light mode overrides below. */
  background: linear-gradient(135deg, rgba(42,44,50,0.90) 0%, rgba(28,30,36,0.86) 48%, rgba(36,38,44,0.88) 100%);
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,0.30),
    inset 2px 0 7px rgba(255,255,255,0.10),
    inset 0 -5px 12px rgba(0,0,0,0.45),
    inset -3px 0 9px rgba(0,0,0,0.30),
    0 16px 40px rgba(0,0,0,0.55);
}
/* Welcome card body fills the space (icon/title/sub centered); the Discover
   control is built into the card's bottom edge as a full-width footer button. */
.landing-welcome-body {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 40px 34px;
}
.welcome-discover-mount { width: 100%; }
.welcome-discover-mount .discover-menu { display: block; width: 100%; position: static; }
.welcome-discover-mount .discover-trigger {
  width: 100%; justify-content: center; gap: 8px;
  padding: 15px 14px; border: none; border-top: 1px solid rgba(127,127,127,0.22);
  border-radius: 0; background: rgba(127,127,127,0.06);
  font-size: 0.92rem; font-weight: 600;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.welcome-discover-mount .discover-trigger:hover { background: rgba(127,127,127,0.13); border-color: rgba(127,127,127,0.22); }

/* Faint (i) in the welcome card's top-right; hover reveals the reworded hint.
   Lives on the card stage (not the card) so the tooltip isn't clipped. */
.welcome-info {
  position: absolute; top: 14px; right: 14px; z-index: 6;
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(127,127,127,0.16); border: 1px solid rgba(127,127,127,0.3);
  color: var(--text-secondary); font-size: 0.72rem; font-weight: 700; font-style: italic;
  font-family: Georgia, 'Times New Roman', serif; line-height: 1;
  cursor: help; opacity: 0.55; transition: opacity .2s ease, background .2s ease;
}
.welcome-info:hover, .welcome-info:focus-visible { opacity: 1; background: rgba(127,127,127,0.26); outline: none; }
.welcome-info-tip {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 10;
  width: 340px; padding: 12px 14px; border-radius: 14px;
  background: rgba(28,28,30,0.66);
  -webkit-backdrop-filter: blur(24px) saturate(165%); backdrop-filter: blur(24px) saturate(165%);
  color: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 16px 40px rgba(0,0,0,0.35);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif;
  font-size: 0.74rem; font-weight: 400; font-style: normal;
  line-height: 1.5; letter-spacing: -0.01em; text-align: left;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .18s ease, visibility .18s ease, transform .18s ease; pointer-events: none;
}
.welcome-info:hover .welcome-info-tip, .welcome-info:focus-visible .welcome-info-tip {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}
.welcome-info-eg { display: block; margin-top: 6px; color: rgba(255,255,255,0.6); white-space: nowrap; }
.welcome-info-tip a { color: #5ac8fa; text-decoration: underline; }
html.light-mode .landing-welcome-card {
  border: 1px solid rgba(255, 255, 255, 0.8);
  background: linear-gradient(135deg, rgba(255,255,255,0.93) 0%, rgba(255,255,255,0.85) 48%, rgba(255,255,255,0.89) 100%);
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,0.95),
    inset 2px 0 7px rgba(255,255,255,0.55),
    inset 0 -5px 11px rgba(0,0,0,0.10),
    inset -3px 0 8px rgba(0,0,0,0.05),
    0 16px 36px rgba(0,0,0,0.16);
}
/* Diagonal surface sheen on the welcome card. */
.landing-welcome-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(150deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.10) 20%, transparent 44%);
}
.landing-welcome-card > * { position: relative; z-index: 1; }
.landing-welcome-icon { width: 60px; height: 60px; margin-bottom: 20px; opacity: 0.45; color: var(--text-secondary); }
.landing-title { margin: 0 0 14px; line-height: 1.06; }
.landing-title-pre {
  display: block; font-size: 1.4rem; font-weight: 700; letter-spacing: -0.01em;
  color: var(--text-primary);
}
.landing-title-brand {
  display: block; font-size: 2.7rem; font-weight: 700; letter-spacing: -0.03em;
  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
  background: linear-gradient(125deg, #ffe14d 0%, #5fd35f 48%, #2fb8a0 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.landing-welcome-sub { color: var(--text-secondary); font-size: 1rem; line-height: 1.6; margin: 0 auto; max-width: 19.5rem; padding: 0 2px; }
/* Caption under the card, wrapped in a soft glass pill. inline-block so it
   shrink-wraps to its text (up to a narrow max-width) and centers via
   .landing-welcome's text-align. */
.landing-hint {
  display: inline-block;
  margin: 22px auto 0; max-width: 540px;
  padding: 6px 9px; border-radius: 16px;
  font-size: 0.82rem; line-height: 1.5; text-align: center;
  text-wrap: balance;   /* even out the line lengths top vs bottom */
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(10px) saturate(150%); backdrop-filter: blur(10px) saturate(150%);
}
html.light-mode .landing-hint {
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.62);
  border-color: rgba(0, 0, 0, 0.06);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}
.landing-hint a { color: var(--accent-blue); text-decoration: underline; }
/* The landing's rail sits inside the wrap; drop its own outer margins. */
.landing-wrap .home-rail { margin: 0 auto; padding: 0; }

/* Public landing search: section labels + channel result row */
.search-section-label {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-tertiary); margin: 20px 4px 8px;
}
.channel-result { align-items: center; }
.channel-result-dot {
  width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
  margin: 0 16px 0 4px;
}

/* On the no-tenant landing, app.js renders .landing-wrap as a DIRECT child of
   #view-home (out of the .container > section > #series-grid nesting, hidden
   here). That leaves just two direct flex links — main → #view-home →
   .landing-wrap — and flex-grow reliably fills DIRECT flex children. main and
   #view-home are flex columns filling the real laid-out viewport, so the footer
   stays flush with dev tools open or closed; space-evenly on .landing-wrap
   splits the free space into 3 equal gaps (nav→card, card→rail, rail→footer).
   The footer's old 80px margin-top (removed globally) used to make the bottom
   gap bigger than the rest. */
body.av-landing .channel-header { display: none; }
body.av-landing #view-home > .container { display: none; }
body.av-landing main,
body.av-landing #view-home.active {
  display: flex; flex-direction: column; min-height: 0;
}
body.av-landing #view-home.active { flex: 1 1 auto; }
body.av-landing main { flex: 1; }              /* keep main's body-column grow */
body.av-landing .landing-wrap { flex: 1 1 auto; min-height: 0; }

/* ==================== Landing: Discover Video Tenants ==================== */
.discover-menu { position: relative; flex: 0 0 auto; }
/* Landing: push Discover + the search icon to the top-right of the nav (search
   is the last item, so it hugs the corner; Discover sits just to its left). */
body.av-landing .discover-menu { margin-left: auto; }
/* Keep the open Discover panel above all body content. */
body.av-landing .nav-bar { z-index: 1000; }
.discover-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(127,127,127,0.12);
  border: 1px solid rgba(127,127,127,0.22);
  color: var(--text-primary); font: inherit; font-size: 0.85rem; font-weight: 500;
  cursor: pointer; white-space: nowrap;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: background .18s ease, border-color .18s ease;
}
.discover-trigger:hover { background: rgba(127,127,127,0.2); border-color: rgba(127,127,127,0.32); }
.discover-chevron { width: 15px; height: 15px; transition: transform .2s ease; opacity: 0.7; }
.discover-trigger[aria-expanded="true"] .discover-chevron { transform: rotate(180deg); }

.discover-panel {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 1000;
  width: min(520px, calc(100vw - 40px)); max-height: min(70vh, 620px); overflow-y: auto;
  padding: 10px; border-radius: 20px;
  background: var(--m2-glass, rgba(30,30,32,0.9));
  border: 1px solid var(--m2-stroke, var(--glass-border));
  box-shadow: var(--m2-float, 0 18px 50px rgba(0,0,0,0.5)), inset 0 1px 0 var(--m2-edge, rgba(255,255,255,0.08));
  -webkit-backdrop-filter: blur(30px) saturate(160%); backdrop-filter: blur(30px) saturate(160%);
}
.discover-tenant { padding: 12px 12px 8px; border-radius: 14px; border: 1px solid var(--m2-stroke, rgba(255,255,255,0.12)); background: rgba(127,127,127,0.07); }
.discover-tenant + .discover-tenant { margin-top: 8px; }
.discover-tenant-head {
  display: block; width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  font: inherit; color: var(--text-primary); padding: 4px 6px 8px; border-radius: 10px;
}
.discover-tenant-head:hover { background: rgba(127,127,127,0.12); }
.discover-tenant-name { font-size: 1.02rem; font-weight: 600; letter-spacing: -0.01em; }
.discover-tenant-desc { font-size: 0.8rem; color: var(--text-secondary); margin-top: 2px; line-height: 1.35; }
.discover-channels { display: flex; flex-direction: column; gap: 4px; }
.discover-channel {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: none; border: 0; cursor: pointer; font: inherit; color: var(--text-primary);
  padding: 8px; border-radius: 12px; transition: background .15s ease;
}
.discover-channel:hover { background: rgba(127,127,127,0.14); }
.discover-channel-thumb {
  flex: 0 0 auto; width: 72px; height: 40px; border-radius: 8px; overflow: hidden;
  background-size: cover; background-position: center;
  background-color: var(--ch-accent, var(--accent-blue));
}
.discover-channel-body { min-width: 0; flex: 1; }
.discover-channel-title { font-size: 0.88rem; font-weight: 600; }
.discover-channel-desc { font-size: 0.76rem; color: var(--text-secondary); line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.discover-channel-meta { font-size: 0.72rem; color: var(--text-tertiary); margin-top: 1px; }
.discover-empty { padding: 22px; text-align: center; color: var(--text-secondary); font-size: 0.85rem; }

/* Morpheus 2.0 (landing + tenant pages): collapse the search into a
   magnifying-glass at the top-right that expands leftward on click/focus.
   flex/margin override the base wrapper's 320px basis + margin-left:auto so
   Discover (auto) + search group at the right. Developer-style tenants keep
   the full-width search box. */
html[data-page-style="morpheus2"] .search-wrapper {
  flex: 0 0 auto; margin-left: auto;
  width: 38px; min-width: 38px; cursor: pointer;
  transition: width .3s cubic-bezier(0.34,1.2,0.64,1), min-width .3s cubic-bezier(0.34,1.2,0.64,1);
}
html[data-page-style="morpheus2"] .search-wrapper.expanded,
html[data-page-style="morpheus2"] .search-wrapper:focus-within {
  width: 280px; min-width: 280px; cursor: text;
}
html[data-page-style="morpheus2"] .search-wrapper .search-input {
  opacity: 0; pointer-events: none; transition: opacity .18s ease;
}
html[data-page-style="morpheus2"] .search-wrapper.expanded .search-input,
html[data-page-style="morpheus2"] .search-wrapper:focus-within .search-input {
  opacity: 1; pointer-events: auto;
}
html[data-page-style="morpheus2"] .search-wrapper:not(.expanded):not(:focus-within) .search-clear { display: none; }

/* Narrow viewports (iOS): the expanded 280px box won't fit beside the brand/
   title, so when active it pops out of flow and overlays the whole pill
   interior (covering the title) instead of overflowing the header bounds. */
@media (max-width: 640px) {
  html[data-page-style="morpheus2"] .search-wrapper.expanded,
  html[data-page-style="morpheus2"] .search-wrapper:focus-within {
    position: absolute;
    top: 50%;
    left: 16px;
    right: 16px;
    width: auto;
    min-width: 0;
    transform: translateY(-50%);
    z-index: 5;
  }
  /* Opaque field so the brand/title behind it is fully covered while typing. */
  html[data-page-style="morpheus2"] .search-wrapper.expanded .search-input,
  html[data-page-style="morpheus2"] .search-wrapper:focus-within .search-input {
    background: var(--bg-elevated, rgba(44, 44, 46, 0.98));
  }
  .light-mode[data-page-style="morpheus2"] .search-wrapper.expanded .search-input,
  .light-mode[data-page-style="morpheus2"] .search-wrapper:focus-within .search-input {
    background: rgba(245, 245, 247, 0.98);
  }
}

/* ==================== AI Description Assist ==================== */
.ai-label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.ai-label-row .form-label { margin: 0; }
.ai-spark-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
  font: inherit; font-size: 0.72rem; font-weight: 600; line-height: 1;
  cursor: pointer; flex: 0 0 auto;
  transition: background .18s ease, border-color .18s ease, transform .12s ease;
}
.ai-spark-btn:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.28); transform: translateY(-1px); }
.ai-spark-btn:active { transform: translateY(0); }
.ai-spark-btn:disabled { opacity: .6; cursor: default; transform: none; }
.ai-spark-btn svg { display: block; }
.ai-spark-btn.ai-spark-loading svg { animation: ai-spark-spin .9s linear infinite; transform-origin: 50% 50%; }
@keyframes ai-spark-spin { to { transform: rotate(360deg); } }
html.light-mode .ai-spark-btn { background: rgba(0, 0, 0, 0.04); }
html.light-mode .ai-spark-btn:hover { background: rgba(0, 0, 0, 0.08); border-color: rgba(0, 0, 0, 0.18); }

/* Non-production environment marker — injected into .nav-brand by js/env-badge.js.
   Modelled on .internal-badge (same pill geometry) but in system yellow, which reads
   as "caution, not an error". Dark text, not white: #fff on #ffd60a is roughly 1.6:1
   and effectively unreadable, while near-black is ~14:1. */
.env-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #1d1d1f;
  background: var(--accent-yellow, #ffd60a);
  border-radius: 980px;
  vertical-align: middle;
  white-space: nowrap;
  /* The brand is a link; don't inherit its underline on hover. */
  text-decoration: none;
}
.nav-brand:hover .env-badge { text-decoration: none; }

/* Keyboard focus for the card/row <div>s made focusable in app.js (role="link"/"button"). Ring on
   keyboard focus only, never on the click that focuses them. */
.glass-card[tabindex]:focus,
.episode-item[tabindex]:focus,
.up-next-item[tabindex]:focus,
.dev-channel-card[tabindex]:focus,
.dev-video-card[tabindex]:focus { outline: none; }
.glass-card[tabindex]:focus-visible,
.episode-item[tabindex]:focus-visible,
.up-next-item[tabindex]:focus-visible,
.dev-channel-card[tabindex]:focus-visible,
.dev-video-card[tabindex]:focus-visible {
  outline: 2px solid var(--accent-blue, #0071e3);
  outline-offset: 2px;
}

/* Visually hidden but still read by screen readers (e.g. #search-status). */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* Public search results are real <a href> links; keep them looking like the <div> rows they replaced. */
a.episode-item { color: inherit; text-decoration: none; }
a.episode-item:focus { outline: none; }
a.episode-item:focus-visible { outline: 2px solid var(--accent-blue, #0071e3); outline-offset: 2px; }

/* View headings get focus on SPA navigation (app.js afterViewShown) so screen readers announce the
   new page. They are not interactive, so no focus ring. */
.view-heading-focus:focus { outline: none; }