/* ==========================================================================
   CAFlirary × ScorePlay — Phase D0: Premium Visual Experience & Design System
   ========================================================================== */

/* ──────────────────────────────────────────────────────────────────────────
   1. CAF VISUAL TOKENS & SYSTEM VARIABLES
   ────────────────────────────────────────────────────────────────────────── */
:root {
  /* Brand Palettes: CAF Official Navy Hierarchy (~70%) */
  --caf-bg: #061423;
  --caf-surface: #0b1b2b;
  --caf-surface-elevated: #10243a;
  --caf-surface-card: #0b1b2b;
  --caf-surface-hover: #142a42;
  --caf-navy: #061423;
  --caf-navy-light: #10243a;
  --caf-navy-border: rgba(215, 167, 61, 0.2);

  /* CAF Accent Gold (~15%) */
  --caf-gold: #d7a73d;
  --caf-gold-light: #e3b94f;
  --caf-gold-dark: #b88924;
  --caf-gold-dim: rgba(215, 167, 61, 0.15);
  --caf-gold-glow: rgba(215, 167, 61, 0.35);

  /* CAF Green Action & Verification (~10%) */
  --caf-green: #007a3d;
  --caf-green-hover: #009e55;
  --caf-green-vibrant: #00b86b;
  --caf-green-dim: rgba(0, 122, 61, 0.15);
  --caf-green-glow: rgba(0, 158, 85, 0.3);

  /* Contextual Live Red (~5%) */
  --caf-red: #e5252a;
  --caf-red-glow: rgba(229, 37, 42, 0.45);

  /* Typography Colors */
  --caf-text-primary: #f7f5ef;
  --caf-text-secondary: #d5dce5;
  --caf-text-muted: #8e9aaf;
  --caf-text-inverse: #061423;

  /* Borders & Dividers */
  --caf-border: rgba(215, 167, 61, 0.14);
  --caf-border-light: rgba(255, 255, 255, 0.12);
  --caf-border-gold: rgba(215, 167, 61, 0.35);
  --caf-border-focus: var(--caf-gold);

  /* Shadows & Elevation */
  --caf-shadow-sm: 0 4px 14px rgba(6, 20, 35, 0.5);
  --caf-shadow-md: 0 12px 32px rgba(6, 20, 35, 0.7);
  --caf-shadow-lg: 0 24px 64px rgba(6, 20, 35, 0.85);

  /* Border Radii */
  --caf-radius-sm: 6px;
  --caf-radius-md: 12px;
  --caf-radius-lg: 18px;
  --caf-radius-xl: 24px;
  --caf-radius-full: 9999px;

  /* Spacing Scale */
  --caf-space-1: 4px;
  --caf-space-2: 8px;
  --caf-space-3: 12px;
  --caf-space-4: 16px;
  --caf-space-6: 24px;
  --caf-space-8: 32px;
  --caf-space-12: 48px;
  --caf-space-16: 64px;

  /* Legacy & test-compatible tokens */
  --sp-brand: var(--caf-gold);
  --sp-brand-glow: var(--caf-gold-glow);
  --sp-badge-scoreplay: #f97316;
  --sp-badge-caflirary: var(--caf-green);
  --sp-dark-surface: var(--caf-surface);
  --sp-card-surface: var(--caf-surface-card);
  --sp-border: var(--caf-border);
  --sp-border-active: var(--caf-gold);
}

/* ──────────────────────────────────────────────────────────────────────────
   2. GLOBAL ATMOSPHERE & SHELL INTEGRATION
   ────────────────────────────────────────────────────────────────────────── */
body.caflirary-page,
.caflirary-page {
  background-color: var(--caf-bg) !important;
  color: var(--caf-text-primary) !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
}

body.caflirary-page .app-shell,
body.caflirary-page .main-area,
body.caflirary-page #section-library {
  background-color: var(--caf-bg) !important;
  color: var(--caf-text-primary) !important;
}

/* Desktop Sidebar Elevation */
body.caflirary-page .sidebar {
  background: var(--caf-navy) !important;
  border-right: 1px solid var(--caf-border);
}

body.caflirary-page .sb-brand {
  border-bottom: 1px solid var(--caf-border);
}

body.caflirary-page .sb-brand-name {
  color: #fff !important;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 6px;
}

body.caflirary-page .sb-brand-name span.gold-dot {
  color: var(--caf-gold-light);
}

body.caflirary-page .sb-item {
  color: var(--caf-text-secondary);
  border-left: 3px solid transparent;
}

body.caflirary-page .sb-item:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}

body.caflirary-page .sb-item.active {
  color: #fff;
  background: var(--caf-green-dim);
  border-left-color: var(--caf-green);
}

body.caflirary-page .sb-user-role {
  color: var(--caf-gold-light) !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   3. HERO / SEARCH EXPERIENCE (SECTION 4)
   ────────────────────────────────────────────────────────────────────────── */
.caflib-hero-container {
  position: relative;
  background: linear-gradient(180deg, rgba(8, 19, 33, 0.95) 0%, rgba(4, 17, 31, 0.8) 100%),
              radial-gradient(ellipse at 50% -20%, rgba(0, 122, 61, 0.25) 0%, transparent 70%);
  border: 1px solid var(--caf-border);
  border-radius: var(--caf-radius-lg);
  padding: 36px 32px 28px;
  margin-bottom: 28px;
  box-shadow: var(--caf-shadow-md);
  /* The search suggestions escape this box, so it must not clip them. */
  overflow: visible;
}

.caflib-hero-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: var(--caf-radius-lg) var(--caf-radius-lg) 0 0;
  background: linear-gradient(90deg, transparent, var(--caf-green), var(--caf-gold-light), transparent);
}

.caflib-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 122, 61, 0.2);
  border: 1px solid rgba(0, 122, 61, 0.4);
  color: #34d399;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--caf-radius-full);
  margin-bottom: 12px;
}

.caflib-hero-title {
  font-size: 34px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.5px;
  margin: 0 0 8px;
  line-height: 1.2;
}

.caflib-hero-subtitle {
  font-size: 14px;
  color: var(--caf-text-secondary);
  margin: 0 0 24px;
  max-width: 650px;
  line-height: 1.5;
}

/* Big Search Bar */
.caflib-search-bar-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 780px;
  margin-bottom: 18px;
}

.caflib-search-input {
  width: 100%;
  height: 54px;
  background: var(--caf-surface);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--caf-radius-full);
  padding: 0 110px 0 52px;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  outline: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  transition: all 0.2s ease;
}

.caflib-search-input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.caflib-search-input:focus {
  border-color: var(--caf-green);
  box-shadow: 0 0 0 3px var(--caf-green-glow), 0 6px 24px rgba(0, 0, 0, 0.4);
}

.caflib-search-icon {
  position: absolute;
  left: 20px;
  font-size: 18px;
  color: var(--caf-text-muted);
  pointer-events: none;
}

.caflib-search-shortcut {
  position: absolute;
  right: 18px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--caf-text-muted);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  pointer-events: none;
}

/* Trending Chips */
.caflib-trending-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.caflib-trending-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--caf-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: 4px;
}

.caflib-trending-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--caf-border);
  border-radius: var(--caf-radius-full);
  color: var(--caf-text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.caflib-trending-chip:hover {
  background: var(--caf-green-dim);
  border-color: var(--caf-green);
  color: #fff;
  transform: translateY(-1px);
}

/* ──────────────────────────────────────────────────────────────────────────
   4. SOURCE SELECTOR (SEGMENTED PILL SWITCH)
   ────────────────────────────────────────────────────────────────────────── */
.caflib-source-selector {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.source-toggle-group {
  display: inline-flex;
  background: var(--caf-surface);
  border: 1px solid var(--caf-border);
  border-radius: var(--caf-radius-full);
  padding: 4px;
  gap: 4px;
  box-shadow: var(--caf-shadow-sm);
}

.source-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: var(--caf-radius-full);
  border: none;
  background: transparent;
  color: var(--caf-text-secondary);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

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

.source-btn.active {
  color: #fff;
  background: var(--caf-navy-light);
  border: 1px solid var(--caf-border-light);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.source-btn[data-source="scoreplay"].active {
  background: linear-gradient(135deg, rgba(217, 119, 6, 0.25), rgba(8, 19, 33, 0.95));
  border-color: var(--caf-gold);
  color: #fff;
}

.source-btn[data-source="caflirary"].active {
  background: linear-gradient(135deg, rgba(0, 122, 61, 0.25), rgba(8, 19, 33, 0.95));
  border-color: var(--caf-green);
  color: #fff;
}

.source-tag {
  background: rgba(245, 158, 11, 0.2);
  color: var(--caf-gold-light);
  border: 1px solid rgba(245, 158, 11, 0.4);
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: var(--caf-radius-full);
  line-height: 1;
}

/* ──────────────────────────────────────────────────────────────────────────
   4.5 FEATURED & LATEST SCOREPLAY MEDIA ROW
   ────────────────────────────────────────────────────────────────────────── */
.caflib-featured-section {
  margin-bottom: 34px;
}

.caflib-featured-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.caflib-featured-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--caf-text-primary);
  display: flex;
  align-items: center;
  gap: 10px;
}

.caflib-featured-title .gold-accent {
  color: var(--caf-gold);
}

.caflib-featured-subtitle {
  font-size: 13px;
  color: var(--caf-text-secondary);
  margin-top: 3px;
}

.caflib-featured-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

@media (max-width: 1400px) {
  .caflib-featured-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (max-width: 640px) {
  .caflib-featured-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* D0.1 takeover completion: real-media hierarchy and responsive polish */
.caflib-featured-section,
.caflib-curated-section,
.caflib-source-selector {
  position: relative;
}

.caflib-feat-thumb,
.sp-tournament-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.caflib-feat-body {
  padding: 14px 15px 16px;
}

.caflib-feat-body h3 {
  margin: 0 0 6px;
  color: var(--caf-text-primary);
  font-size: 15px;
  line-height: 1.35;
}

.caflib-feat-body p,
.caflib-featured-empty {
  margin: 0;
  color: var(--caf-text-secondary);
  font-size: 13px;
}

.caflib-featured-empty {
  grid-column: 1 / -1;
  padding: 24px;
  border: 1px dashed var(--caf-border);
  border-radius: var(--caf-radius-md);
  background: var(--caf-surface-card);
}

.caf-media-fallback,
.caf-native-art,
.caf-viewer-fallback {
  background:
    radial-gradient(circle at 78% 18%, rgba(215,167,61,.28), transparent 28%),
    linear-gradient(145deg, #10243a, #061423 72%);
  color: var(--caf-gold-light);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  letter-spacing: .14em;
}

.caf-media-fallback span,
.caf-native-monogram,
.caf-viewer-fallback span {
  font-size: clamp(24px, 4vw, 46px);
  font-weight: 900;
}

.caf-media-fallback small,
.caf-native-art small,
.caf-viewer-fallback small {
  margin-top: 4px;
  color: rgba(255,255,255,.7);
  font-size: 10px;
  font-weight: 800;
}

.caf-native-art {
  width: 100%;
  height: 100%;
}

.caf-native-art i {
  position: absolute;
  right: 14px;
  bottom: 12px;
  font-style: normal;
  font-size: 18px;
  opacity: .72;
}

.sp-learning-disclosure-menu[hidden] { display: none !important; }

.sp-context-kicker {
  color: var(--caf-gold-light);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  margin-bottom: 8px;
}

.sp-media-context {
  border-left: 3px solid var(--caf-gold);
  padding: 8px 10px;
  margin-bottom: 8px;
  background: rgba(215,167,61,.08);
}

.sp-media-context span,
.sp-media-context strong { display: block; }
.sp-media-context span { color: var(--caf-gold); font-size: 10px; font-weight: 800; }
.sp-media-context strong { color: var(--caf-text-primary); font-size: 14px; margin-top: 3px; }

.sp-video-container { min-height: 100%; background: #02070c; overflow: hidden; }
.sp-video-poster-backdrop,
.caf-viewer-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sp-video-poster-backdrop { filter: brightness(.68); }
.sp-video-player { position: relative; z-index: 2; }
.caf-live-stage-cta {
  position: absolute;
  left: 28px;
  bottom: 28px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  max-width: min(72%, 520px);
  color: #fff;
  text-shadow: 0 2px 10px #000;
}
.caf-live-stage-cta span { color: #ff8b8e; font-size: 11px; font-weight: 900; letter-spacing: .12em; }
.caf-live-stage-cta strong { font-size: clamp(18px, 2.2vw, 28px); }
.caf-live-stage-cta button { border: 0; border-radius: 8px; padding: 9px 16px; background: #e5252a; color: #fff; font-weight: 800; }

.sp-team-avatar { overflow: hidden; }
.sp-team-avatar img { width: 100%; height: 100%; object-fit: contain; }
.sp-team-avatar span,
.sp-subevent-mark { color: var(--caf-gold); font-size: 14px; font-weight: 900; }
.sp-team-tabs { display: flex; gap: 8px; margin: 16px 0; overflow-x: auto; }
.sp-tournament-cover { position: absolute; inset: 0; opacity: .2; }
.sp-tournament-kicker,
.sp-tournament-title,
.sp-tournament-meta { position: relative; z-index: 1; }
.sp-tournament-kicker { color: var(--caf-gold); font-size: 11px; font-weight: 800; }
.sp-tournament-title { color: #fff; font-size: 18px; font-weight: 800; margin: 5px 0; }
.sp-tournament-meta { color: var(--caf-text-secondary); font-size: 13px; }
.sp-subevent-mark { width: 54px; height: 40px; display: grid; place-items: center; background: #10243a; border-radius: 7px; flex: 0 0 auto; }
.sp-subevent-thumb { width: 64px; height: 42px; object-fit: cover; border-radius: 7px; flex: 0 0 auto; }
.sp-subevent-copy { min-width: 0; flex: 1; }
.sp-subevent-copy strong,
.sp-subevent-copy span { display: block; }
.sp-subevent-copy strong { color: var(--caf-text-primary); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-subevent-copy span { color: var(--caf-text-secondary); font-size: 12px; margin-top: 3px; }

@media (min-width: 1500px) {
  #lib-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

@media (max-width: 640px) {
  .caflib-featured-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .caflib-feat-card { min-width: 82%; scroll-snap-align: start; }
  .caflib-source-selector { margin-inline: 0; }
  .source-toggle-group { width: max-content !important; }
  .caf-live-stage-cta { left: 16px; bottom: 18px; max-width: 80%; }
  .caf-clip-body { padding: 10px 12px 96px !important; }
  .caf-clip-video-stage { min-height: 180px !important; }
  .caf-clip-toolbar { gap: 6px !important; }
  .caf-clip-btn { padding: 7px 8px !important; font-size: 11px !important; }
  .caf-clip-form-grid { margin-top: 12px !important; }
  .caf-clip-footer { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; }
  .caf-clip-footer button { min-width: 0 !important; width: 100% !important; font-size: 11px !important; padding: 10px 7px !important; }
}

/* ──────────────────────────────────────────────────────────────────────────
   4.5 FEATURED / LATEST SCOREPLAY MEDIA (SECTION 2)
   ────────────────────────────────────────────────────────────────────────── */
.caflib-featured-section {
  margin-bottom: 32px;
}

.caflib-featured-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

@media (max-width: 1400px) {
  .caflib-featured-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (max-width: 640px) {
  .caflib-featured-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

.caflib-feat-card {
  position: relative;
  background: var(--caf-surface-card);
  border: 1px solid var(--caf-border);
  border-radius: var(--caf-radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: var(--caf-shadow-sm);
}

.caflib-feat-card:hover {
  transform: translateY(-4px);
  border-color: var(--caf-gold);
  box-shadow: var(--caf-shadow-md), 0 0 0 1px var(--caf-gold-glow);
}

.caflib-feat-thumb-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #061423;
}

.caflib-feat-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.caflib-feat-card:hover .caflib-feat-thumb {
  transform: scale(1.05);
}

.caflib-feat-body {
  padding: 12px 14px;
}

.caflib-feat-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--caf-text-primary);
  margin: 0 0 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.caflib-feat-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--caf-text-muted);
}

/* ──────────────────────────────────────────────────────────────────────────
   5. SMART COLLECTIONS & SPOTLIGHT (SECTION 7 & 13)
   ────────────────────────────────────────────────────────────────────────── */
.caflib-curated-section {
  margin-bottom: 32px;
}

.caflib-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.caflib-section-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--caf-text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.caflib-section-subtitle {
  font-size: 12px;
  color: var(--caf-text-muted);
  margin-top: 2px;
}

.caflib-collections-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

@media (max-width: 1400px) {
  .caflib-collections-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (max-width: 640px) {
  .caflib-collections-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

.caflib-collection-card {
  position: relative;
  background: var(--caf-surface-card);
  border: 1px solid var(--caf-border);
  border-radius: var(--caf-radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: var(--caf-shadow-sm);
}

.caflib-collection-card:hover {
  transform: translateY(-4px);
  border-color: var(--caf-gold);
  box-shadow: var(--caf-shadow-md), 0 0 0 1px var(--caf-gold-glow);
}

.caflib-coll-thumb-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #061423;
}

.caflib-coll-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.caflib-collection-card:hover .caflib-coll-thumb {
  transform: scale(1.05);
}

.caflib-coll-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 20, 35, 0.2) 0%, rgba(6, 20, 35, 0.88) 100%);
  pointer-events: none;
}

.caflib-coll-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(11, 27, 43, 0.9);
  backdrop-filter: blur(8px);
  color: var(--caf-gold);
  border: 1px solid var(--caf-border-gold);
  z-index: 2;
}

.caflib-coll-brand-mark {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 22px;
  height: 22px;
  opacity: 0.85;
  z-index: 2;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}

.caflib-coll-count {
  position: absolute;
  bottom: 8px;
  right: 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--caf-gold-light);
  background: rgba(6, 20, 35, 0.85);
  border: 1px solid var(--caf-border);
  padding: 2px 8px;
  border-radius: 6px;
  z-index: 2;
}

.caflib-coll-body {
  padding: 12px 14px 14px;
}

.caflib-coll-title {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 4px;
  line-height: 1.3;
}

.caflib-coll-desc {
  font-size: 11px;
  color: var(--caf-text-secondary);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Saved Searches Shortcuts (Section 14) */
.caflib-saved-searches-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.caflib-saved-search-card {
  background: var(--caf-surface);
  border: 1px solid var(--caf-border);
  border-radius: var(--caf-radius-md);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.caflib-saved-search-card:hover {
  background: var(--caf-surface-elevated);
  border-color: var(--caf-gold);
  transform: translateY(-2px);
}

.caflib-ssc-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.caflib-ssc-info {
  flex: 1;
  overflow: hidden;
}

.caflib-ssc-name {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.caflib-ssc-meta {
  font-size: 11px;
  color: var(--caf-text-muted);
}

/* ──────────────────────────────────────────────────────────────────────────
   6. COMPACT FILTER TOOLBAR (SECTION 15)
   ────────────────────────────────────────────────────────────────────────── */
.sp-filter-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.sp-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  background: var(--caf-surface);
  border: 1px solid var(--caf-border);
  border-radius: var(--caf-radius-md);
  padding: 10px 14px;
  box-shadow: var(--caf-shadow-sm);
}

.sp-type-group {
  display: flex;
  background: rgba(4, 17, 31, 0.7);
  border: 1px solid var(--caf-border);
  border-radius: var(--caf-radius-sm);
  padding: 3px;
  gap: 3px;
}

.sp-type-btn {
  padding: 6px 14px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: var(--caf-text-secondary);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.sp-type-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}

.sp-type-btn.active {
  color: #fff;
  background: var(--caf-green);
  box-shadow: 0 2px 8px var(--caf-green-glow);
}

.sp-select {
  background: var(--caf-surface-elevated);
  border: 1px solid var(--caf-border);
  color: var(--caf-text-primary);
  border-radius: var(--caf-radius-sm);
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  max-width: 220px;
  outline: none;
  transition: border-color 0.15s ease;
}

.sp-select:focus {
  border-color: var(--caf-green);
}

/* Tag Autocomplete (90k Scale Safeguard) */
.sp-tag-autocomplete-wrap {
  position: relative;
  min-width: 200px;
  flex: 1;
  max-width: 280px;
}

.sp-tag-input {
  width: 100%;
  background: var(--caf-surface-elevated);
  border: 1px solid var(--caf-border);
  border-radius: var(--caf-radius-sm);
  padding: 7px 12px;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s ease;
}

.sp-tag-input:focus {
  border-color: var(--caf-green);
}

.sp-tag-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--caf-surface-elevated);
  border: 1px solid var(--caf-border-light);
  border-radius: var(--caf-radius-md);
  max-height: 240px;
  overflow-y: auto;
  z-index: 100;
  box-shadow: var(--caf-shadow-lg);
}

.sp-tag-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 12px;
  color: var(--caf-text-secondary);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 0.15s ease, color 0.15s ease;
}

.sp-tag-opt:hover {
  background: var(--caf-green-dim);
  color: #fff;
}

.sp-tag-opt.empty {
  color: var(--caf-text-muted);
  font-style: italic;
  cursor: default;
}

.sp-tag-count {
  margin-left: auto;
  font-size: 10px;
  background: rgba(255, 255, 255, 0.08);
  padding: 2px 6px;
  border-radius: 10px;
  color: var(--caf-text-muted);
}

/* Active Filter Chips */
.sp-active-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 24px;
}

.sp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 122, 61, 0.18);
  border: 1px solid rgba(0, 122, 61, 0.4);
  color: #34d399;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--caf-radius-full);
  animation: chipFadeIn 0.2s ease;
}

@keyframes chipFadeIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

.sp-chip-x {
  border: none;
  background: transparent;
  color: #34d399;
  cursor: pointer;
  padding: 0 2px;
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
  opacity: 0.8;
}

.sp-chip-x:hover {
  opacity: 1;
  color: #fff;
}

/* ──────────────────────────────────────────────────────────────────────────
   7. MEDIA CARDS (SECTION 6 & 23)
   ────────────────────────────────────────────────────────────────────────── */
.lib-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

@media (min-width: 2400px) {
  .lib-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (max-width: 1400px) {
  .lib-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
}

@media (max-width: 1024px) {
  .lib-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (max-width: 640px) {
  .lib-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

.lib-card {
  background: var(--caf-surface-card);
  border: 1px solid var(--caf-border);
  border-radius: var(--caf-radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s ease,
              border-color 0.25s ease;
  display: flex;
  flex-direction: column;
}

.lib-card:hover {
  transform: translateY(-4px);
  border-color: var(--caf-green);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--caf-green-glow);
}

/* 16:9 Thumbnail Container */
.sp-thumb-wrap,
.lib-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #02070e;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.lib-card:hover .sp-card-img {
  transform: scale(1.03);
}

.sp-img-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #071220, #0e1e36);
  color: var(--caf-text-muted);
}

/* Badges on Thumbnail */
.source-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.source-badge.scoreplay {
  background: var(--caf-gold);
  /* Navy, not white: white on CAF gold measures 2.21:1, well under AA. Every
     other gold surface in the system already carries navy text. */
  color: #061423;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.source-badge.caflirary {
  background: var(--caf-green);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.sp-type-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(4, 17, 31, 0.85);
  backdrop-filter: blur(8px);
  color: #f1f5f9;
  border: 1px solid rgba(255, 255, 255, 0.15);
  z-index: 2;
}

.sp-duration-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(8px);
  color: var(--caf-gold-light);
  z-index: 2;
}

.sp-card-save-btn {
  position: absolute;
  bottom: 8px;
  left: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  z-index: 2;
  transition: all 0.15s ease;
}

.sp-card-save-btn:hover {
  background: var(--caf-gold);
  transform: scale(1.1);
}

.sp-card-save-btn.saved {
  background: var(--caf-gold);
  color: #fff;
}

/* Card Body */
.lib-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.lib-title {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  line-height: 1.35;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lib-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.sp-cat-tag {
  background: rgba(255, 255, 255, 0.08);
  color: var(--caf-text-secondary);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}

.sp-date-tag {
  font-size: 11px;
  color: var(--caf-text-muted);
}

.sp-event-tag {
  font-size: 11px;
  color: var(--caf-gold-light);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.lib-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.sp-verified-tag {
  font-size: 11px;
  font-weight: 700;
  color: #10b981;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ──────────────────────────────────────────────────────────────────────────
   8. SKELETON LOADERS (SECTION 18)
   ────────────────────────────────────────────────────────────────────────── */
.sp-skeleton-card {
  background: var(--caf-surface-card);
  border: 1px solid var(--caf-border);
  border-radius: var(--caf-radius-md);
  overflow: hidden;
}

.sp-skel-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(90deg, #091322 0%, #122238 50%, #091322 100%);
  background-size: 200% 100%;
  animation: spShimmer 1.5s infinite;
}

.sp-skel-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sp-skel-line {
  height: 14px;
  background: linear-gradient(90deg, #091322 0%, #122238 50%, #091322 100%);
  background-size: 200% 100%;
  border-radius: 4px;
  animation: spShimmer 1.5s infinite;
}

.sp-skel-line.w-80 { width: 80%; }
.sp-skel-line.w-50 { width: 50%; }

@keyframes spShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Empty & Error States */
.sp-empty-state,
.sp-error-container {
  grid-column: 1 / -1;
  padding: 60px 24px;
  text-align: center;
  background: var(--caf-surface);
  border: 1px dashed var(--caf-border-light);
  border-radius: var(--caf-radius-lg);
  margin: 16px 0;
}

.sp-empty-icon,
.sp-error-icon {
  font-size: 48px;
  margin-bottom: 12px;
}

.sp-empty-state h3,
.sp-error-container h3 {
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 8px;
}

.sp-empty-state p,
.sp-error-container p {
  color: var(--caf-text-secondary);
  font-size: 13px;
  max-width: 480px;
  margin: 0 auto 18px;
  line-height: 1.5;
}

/* ──────────────────────────────────────────────────────────────────────────
   9. CINEMATIC MEDIA VIEWER (SECTION 11 & 12)
   ────────────────────────────────────────────────────────────────────────── */
.sp-modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 12, 0.92);
  backdrop-filter: blur(16px);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.sp-modal-backdrop.open {
  display: flex;
}

.sp-modal-dialog {
  background: var(--caf-surface);
  border: 1px solid var(--caf-border-light);
  border-radius: var(--caf-radius-lg);
  width: 100%;
  max-width: 1100px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--caf-shadow-lg);
  animation: viewerZoom 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes viewerZoom {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

.sp-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--caf-border);
  background: var(--caf-navy);
}

.sp-modal-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  overflow: hidden;
}

.sp-modal-title-wrap .source-badge {
  position: static;
}

.sp-modal-title {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sp-modal-close {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--caf-border);
  color: var(--caf-text-secondary);
  font-size: 16px;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: var(--caf-radius-sm);
  transition: all 0.15s ease;
}

.sp-modal-close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.sp-modal-body {
  display: grid;
  grid-template-columns: 1fr 340px;
  overflow-y: auto;
  flex: 1;
}

.sp-stage {
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 480px;
  position: relative;
}

.sp-video-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.sp-video-player {
  width: 100%;
  max-height: 560px;
  outline: none;
  background: #000;
}

.sp-photo-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.sp-photo-full {
  max-width: 100%;
  max-height: 540px;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
}

.sp-other-container {
  text-align: center;
  padding: 48px 24px;
}

.sp-other-icon {
  font-size: 64px;
  margin-bottom: 14px;
}

.sp-other-type {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 8px;
}

.sp-details-panel {
  padding: 22px;
  background: var(--caf-surface-card);
  border-left: 1px solid var(--caf-border);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-y: auto;
}

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

.sp-meta-item {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 8px;
}

.sp-k {
  color: var(--caf-text-muted);
  font-weight: 600;
}

.sp-v {
  color: var(--caf-text-primary);
  font-weight: 700;
  text-align: right;
}

.sp-actions-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 24px;
}

.sp-action-btn-primary {
  background: var(--caf-green);
  color: #fff;
  border: none;
  padding: 10px 16px;
  border-radius: var(--caf-radius-sm);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.sp-action-btn-primary:hover {
  background: var(--caf-green-hover);
  box-shadow: 0 4px 14px var(--caf-green-glow);
}

.sp-action-btn-secondary {
  background: var(--caf-surface-elevated);
  border: 1px solid var(--caf-border);
  color: var(--caf-text-primary);
  padding: 9px 14px;
  border-radius: var(--caf-radius-sm);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sp-action-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--caf-border-light);
  color: #fff;
}

/* ──────────────────────────────────────────────────────────────────────────
   10. ADD TO LEARNING DRAWER / MODAL (SECTION 12)
   ────────────────────────────────────────────────────────────────────────── */
.caflib-learning-modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 12, 0.85);
  backdrop-filter: blur(12px);
  /* Must outrank Clip Studio (10000): "Add to Learning" opens from inside the
     editor and was rendering invisibly behind it at the old z-index of 1200. */
  z-index: 10500;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.caflib-learning-modal-backdrop.open {
  display: flex;
}

.caflib-learning-dialog {
  background: var(--caf-surface);
  border: 1px solid var(--caf-border-light);
  border-radius: var(--caf-radius-lg);
  width: 100%;
  max-width: 520px;
  box-shadow: var(--caf-shadow-lg);
  overflow: hidden;
  animation: viewerZoom 0.2s ease;
}

.caflib-learning-header {
  padding: 16px 20px;
  background: var(--caf-navy);
  border-bottom: 1px solid var(--caf-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.caflib-learning-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
}

.caflib-learning-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.caflib-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.caflib-form-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--caf-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.caflib-form-select,
.caflib-form-input,
.caflib-form-textarea {
  background: var(--caf-surface-elevated);
  border: 1px solid var(--caf-border);
  border-radius: var(--caf-radius-sm);
  padding: 10px 12px;
  color: #fff;
  font-size: 13px;
  outline: none;
  font-family: inherit;
}

.caflib-form-select:focus,
.caflib-form-input:focus,
.caflib-form-textarea:focus {
  border-color: var(--caf-green);
}

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

.caflib-learning-footer {
  padding: 14px 20px;
  background: var(--caf-navy);
  border-top: 1px solid var(--caf-border);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* ──────────────────────────────────────────────────────────────────────────
   11. BROWSING DRAWERS: TEAM, EVENT, PLAYER (SECTION 8, 9, 10)
   ────────────────────────────────────────────────────────────────────────── */
.sp-drawer-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 12, 0.8);
  backdrop-filter: blur(8px);
  z-index: 1050;
  justify-content: flex-end;
}

.sp-drawer-backdrop.open {
  display: flex;
}

.sp-drawer {
  width: 100%;
  max-width: 480px;
  height: 100%;
  background: var(--caf-surface);
  border-left: 1px solid var(--caf-border-light);
  display: flex;
  flex-direction: column;
  box-shadow: var(--caf-shadow-lg);
  animation: spSlideIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes spSlideIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.sp-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--caf-border);
  background: var(--caf-navy);
}

.sp-drawer-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
}

.sp-drawer-close {
  background: transparent;
  border: none;
  color: var(--caf-text-muted);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
}

.sp-drawer-close:hover {
  color: #fff;
}

.sp-drawer-body {
  padding: 22px;
  overflow-y: auto;
  flex: 1;
}

.sp-drawer-profile {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--caf-border);
}

.sp-team-avatar,
.sp-player-avatar {
  font-size: 32px;
  width: 60px;
  height: 60px;
  border-radius: var(--caf-radius-md);
  background: var(--caf-surface-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--caf-border);
  overflow: hidden;
  flex-shrink: 0;
}

.sp-p-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sp-team-info h4,
.sp-player-info h4 {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 800;
  color: #fff;
}

.sp-team-info p,
.sp-player-info p {
  margin: 0;
  font-size: 12px;
  color: var(--caf-text-secondary);
}

.sp-drawer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.sp-mini-card {
  background: var(--caf-surface-card);
  border: 1px solid var(--caf-border);
  border-radius: var(--caf-radius-sm);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.15s ease;
}

.sp-mini-card:hover {
  border-color: var(--caf-green);
  transform: translateY(-2px);
}

.sp-mini-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.sp-mini-title {
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--caf-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sp-subevent-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--caf-surface-card);
  border: 1px solid var(--caf-border);
  border-radius: var(--caf-radius-md);
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.sp-subevent-item:hover {
  background: var(--caf-surface-elevated);
  border-color: var(--caf-green);
}

.sp-sub-name {
  flex: 1;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}

.sp-sub-count {
  font-size: 11px;
  color: var(--caf-text-muted);
}

/* ──────────────────────────────────────────────────────────────────────────
   12. PLAYLIST & FAVORITES INTEGRATION
   ────────────────────────────────────────────────────────────────────────── */
.sp-playlist-item {
  border-left: 3px solid var(--caf-gold) !important;
}

.sp-thumb-small {
  background: #040c17;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp-pli-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ──────────────────────────────────────────────────────────────────────────
   13. RESPONSIVE BREAKPOINTS (SECTION 24 & 32)
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .caflib-collections-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .caflib-saved-searches-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .sp-modal-dialog {
    max-height: 95vh;
  }
  .sp-modal-body {
    grid-template-columns: 1fr;
  }
  .sp-stage {
    min-height: 340px;
  }
  .sp-details-panel {
    border-left: none;
    border-top: 1px solid var(--caf-border);
  }
}

@media (max-width: 768px) {
  .caflib-hero-container {
    padding: 24px 18px 20px;
    margin-bottom: 20px;
  }
  .caflib-hero-title {
    font-size: 24px;
  }
  .caflib-search-input {
    height: 48px;
    font-size: 13px;
    padding: 0 40px 0 44px;
  }
  .caflib-search-shortcut {
    display: none;
  }
  .source-toggle-group {
    width: 100%;
    display: flex;
    padding: 3px;
    gap: 2px;
  }
  .source-btn {
    flex: 1;
    justify-content: center;
    padding: 7px 6px;
    font-size: 11px;
    gap: 4px;
  }
  .source-btn .source-tag {
    display: none;
  }
  .sp-filter-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .sp-select,
  .sp-tag-autocomplete-wrap {
    max-width: 100%;
    width: 100%;
  }
  .caflib-collections-grid {
    grid-template-columns: 1fr;
  }
  .caflib-saved-searches-row {
    grid-template-columns: 1fr;
  }
  .sp-drawer {
    max-width: 100%;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   10. LIVE SCOREPLAY EXPERIENCE & LIVE EVENTS
   ────────────────────────────────────────────────────────────────────────── */
.caf-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(220, 38, 38, 0.95);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--caf-radius-sm);
  box-shadow: 0 2px 10px rgba(220, 38, 38, 0.45);
}

.caf-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffffff;
  animation: caf-live-pulse 1.8s infinite ease-in-out;
}

@keyframes caf-live-pulse {
  0% { transform: scale(0.9); opacity: 0.8; }
  50% { transform: scale(1.35); opacity: 1; box-shadow: 0 0 8px rgba(255, 255, 255, 0.9); }
  100% { transform: scale(0.9); opacity: 0.8; }
}

.caf-live-now-section {
  margin-bottom: 24px;
  background: linear-gradient(135deg, rgba(16, 30, 51, 0.98), rgba(6, 14, 26, 0.98));
  border: 1px solid rgba(220, 38, 38, 0.4);
  border-radius: var(--caf-radius-lg);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  position: relative;
  overflow: hidden;
}

.caf-live-now-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: #dc2626;
}

.caf-live-now-content {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
}

.caf-live-now-thumb {
  width: 140px;
  height: 78px;
  border-radius: var(--caf-radius-sm);
  overflow: hidden;
  background: #000;
  position: relative;
  flex-shrink: 0;
}

.caf-live-now-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.caf-live-now-info h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--caf-text-primary);
  display: flex;
  align-items: center;
  gap: 10px;
}

.caf-live-now-meta {
  font-size: 13px;
  color: var(--caf-text-secondary);
  display: flex;
  gap: 12px;
  align-items: center;
}

.caf-live-now-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.caf-live-now-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #dc2626;
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  border-radius: var(--caf-radius-md);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.4);
}

.caf-live-now-cta:hover {
  background: #ef4444;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(220, 38, 38, 0.55);
}

.caf-live-empty-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: rgba(16, 30, 51, 0.45);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: var(--caf-radius-md);
  color: var(--caf-text-secondary);
  font-size: 13px;
  margin-bottom: 24px;
}

.caf-live-empty-banner .empty-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--caf-text-muted);
}

/* Live Quick Filter Pill */
.sp-filter-chip.filter-chip-live {
  background: rgba(220, 38, 38, 0.15);
  border-color: rgba(220, 38, 38, 0.4);
  color: #fca5a5;
  font-weight: 700;
}

.sp-filter-chip.filter-chip-live.active {
  background: #dc2626;
  color: #ffffff;
  border-color: #dc2626;
  box-shadow: 0 2px 10px rgba(220, 38, 38, 0.4);
}

/* ──────────────────────────────────────────────────────────────────────────
   11. CAFLIRARY CLIP STUDIO
   ────────────────────────────────────────────────────────────────────────── */
.btn-create-clip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(217, 119, 6, 0.2), rgba(217, 119, 6, 0.1));
  border: 1px solid var(--caf-gold);
  color: #fbbf24;
  padding: 8px 16px;
  border-radius: var(--caf-radius-sm);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-create-clip:hover {
  background: var(--caf-gold);
  color: #000000;
  box-shadow: 0 4px 16px rgba(217, 119, 6, 0.4);
}

/* Clip Studio Modal Overlay */
.caf-clip-studio-modal {
  position: fixed;
  inset: 0;
  background: rgba(2, 8, 16, 0.88);
  backdrop-filter: blur(16px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.caf-clip-studio-dialog {
  background: var(--caf-surface);
  border: 1px solid var(--caf-border-light);
  border-radius: var(--caf-radius-lg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.8);
  width: 100%;
  max-width: 980px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.caf-clip-header {
  padding: 16px 24px;
  border-bottom: 1px solid var(--caf-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--caf-navy);
}

.caf-clip-header h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--caf-text-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.caf-clip-close {
  background: none;
  border: none;
  color: var(--caf-text-secondary);
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}

.caf-clip-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.caf-clip-body {
  padding: 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* In a flex column a scrolling child needs both of these: without flex it
     grows to its content height and pushes the footer out of the dialog, and
     without min-height:0 the default min-height:auto stops it shrinking, so
     overflow-y never engages and the last rows clip behind the action bar. */
  flex: 1 1 auto;
  min-height: 0;
}

/* Video Preview Stage */
.caf-clip-video-stage {
  position: relative;
  background: #000;
  border-radius: var(--caf-radius-md);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  max-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.caf-clip-video-stage video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Interactive Timeline Scrubber */
.caf-timeline-container {
  background: var(--caf-surface-elevated);
  border: 1px solid var(--caf-border);
  border-radius: var(--caf-radius-md);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.caf-timeline-bar-wrapper {
  position: relative;
  height: 44px;
  background: #07101c;
  border-radius: var(--caf-radius-sm);
  border: 1px solid var(--caf-border);
  cursor: pointer;
  user-select: none;
}

.caf-timeline-range-highlight {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(0, 122, 61, 0.35);
  border-left: 3px solid var(--caf-green);
  border-right: 3px solid var(--caf-gold);
  pointer-events: none;
}

.caf-timeline-playhead {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  background: #ffffff;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
  pointer-events: none;
  z-index: 5;
}

.caf-timeline-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: ew-resize;
  z-index: 10;
  font-size: 10px;
  font-weight: 800;
  color: #ffffff;
}

.caf-timeline-handle.handle-in {
  background: var(--caf-green);
  border-radius: 4px 0 0 4px;
  transform: translateX(-100%);
}

.caf-timeline-handle.handle-out {
  background: var(--caf-gold);
  border-radius: 0 4px 4px 0;
}

/* Timecode Readout Blocks */
.caf-tc-readout-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.caf-tc-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.caf-tc-box {
  background: var(--caf-navy);
  border: 1px solid var(--caf-border);
  border-radius: var(--caf-radius-sm);
  padding: 6px 12px;
  display: flex;
  flex-direction: column;
  min-width: 110px;
}

.caf-tc-box .tc-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--caf-text-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.caf-tc-box .tc-value {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 14px;
  font-weight: 700;
  color: var(--caf-text-primary);
}

.caf-tc-duration-pill {
  padding: 6px 14px;
  border-radius: var(--caf-radius-full);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--caf-border);
  font-size: 13px;
  font-weight: 600;
  color: var(--caf-text-secondary);
}

.caf-tc-accuracy-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(0, 122, 61, 0.15);
  color: #4ade80;
  border: 1px solid rgba(0, 122, 61, 0.3);
}

/* Timeline Controls Bar */
.caf-clip-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.caf-clip-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--caf-navy);
  border: 1px solid var(--caf-border-light);
  color: var(--caf-text-primary);
  padding: 8px 14px;
  border-radius: var(--caf-radius-sm);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.caf-clip-btn:hover {
  background: var(--caf-surface-hover);
  border-color: var(--caf-green);
  color: #ffffff;
}

.caf-clip-btn.btn-preview {
  background: rgba(0, 122, 61, 0.2);
  border-color: var(--caf-green);
  color: #4ade80;
}

.caf-clip-btn.btn-preview:hover {
  background: var(--caf-green);
  color: #ffffff;
}

/* Learning Enrichment Form Fields */
.caf-clip-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.caf-clip-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.caf-clip-field.field-full {
  grid-column: 1 / -1;
}

.caf-clip-field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--caf-text-secondary);
}

.caf-clip-input,
.caf-clip-select,
.caf-clip-textarea {
  background: var(--caf-surface-elevated);
  border: 1px solid var(--caf-border);
  border-radius: var(--caf-radius-sm);
  padding: 10px 14px;
  color: var(--caf-text-primary);
  font-size: 13px;
  transition: border-color 0.2s;
}

.caf-clip-input:focus,
.caf-clip-select:focus,
.caf-clip-textarea:focus {
  border-color: var(--caf-green);
  outline: none;
}

.caf-clip-textarea {
  resize: vertical;
  min-height: 60px;
}

/* Progress & Feedback State Banner */
.caf-clip-progress-banner {
  padding: 12px 18px;
  border-radius: var(--caf-radius-sm);
  font-size: 13px;
  display: none;
  align-items: center;
  gap: 12px;
}

.caf-clip-progress-banner.state-processing {
  display: flex;
  background: rgba(217, 119, 6, 0.15);
  border: 1px solid var(--caf-gold);
  color: #fbbf24;
}

.caf-clip-progress-banner.state-ready {
  display: flex;
  background: rgba(0, 122, 61, 0.15);
  border: 1px solid var(--caf-green);
  color: #4ade80;
}

.caf-clip-progress-banner.state-error {
  display: flex;
  background: rgba(220, 38, 38, 0.15);
  border: 1px solid #dc2626;
  color: #fca5a5;
}

/* Footer Actions */
.caf-clip-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--caf-border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  background: var(--caf-navy);
}

.btn-save-ref {
  background: var(--caf-surface-elevated);
  border: 1px solid var(--caf-border-light);
  color: var(--caf-text-primary);
  padding: 10px 20px;
  border-radius: var(--caf-radius-md);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-save-ref:hover {
  background: var(--caf-surface-hover);
  border-color: var(--caf-gold);
}

.btn-download-clip {
  background: var(--caf-green);
  border: 1px solid var(--caf-green-hover);
  color: #ffffff;
  padding: 10px 22px;
  border-radius: var(--caf-radius-md);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
  box-shadow: 0 4px 14px var(--caf-green-glow);
}

.btn-download-clip:hover {
  background: var(--caf-green-hover);
  box-shadow: 0 6px 20px rgba(0, 122, 61, 0.5);
}

.btn-download-clip:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Saved Clips Drawer & List */
.caf-saved-clips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.caf-saved-clip-card {
  background: var(--caf-surface-card);
  border: 1px solid var(--caf-border);
  border-radius: var(--caf-radius-md);
  overflow: hidden;
  transition: transform 0.2s, border-color 0.2s;
  cursor: pointer;
}

.caf-saved-clip-card:hover {
  transform: translateY(-2px);
  border-color: var(--caf-gold);
}

.caf-saved-clip-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
}

.caf-saved-clip-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.caf-saved-clip-info {
  padding: 14px;
}

.caf-saved-clip-info h4 {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--caf-text-primary);
}

.caf-saved-clip-tc {
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 12px;
  color: var(--caf-gold);
}

/* ──────────────────────────────────────────────────────────────────────────
   12. D0.1 REFINEMENTS: CONTRAST, COMPACTION & RESPONSIVE POLISH
   ────────────────────────────────────────────────────────────────────────── */

/* P0 Contrast Fix: High WCAG-compliant contrast for all Clip Studio inputs */
.caf-clip-modal input.caf-clip-input,
.caf-clip-modal select.caf-clip-select,
.caf-clip-modal textarea.caf-clip-textarea,
.caf-clip-input,
.caf-clip-select,
.caf-clip-textarea {
  background-color: #10243a !important;
  color: #f7f5ef !important;
  border: 1px solid rgba(215, 167, 61, 0.3) !important;
  border-radius: var(--caf-radius-sm) !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}

.caf-clip-input::placeholder,
.caf-clip-textarea::placeholder {
  color: #8e9aaf !important;
  opacity: 1 !important;
}

.caf-clip-input:focus,
.caf-clip-select:focus,
.caf-clip-textarea:focus {
  border-color: #d7a73d !important;
  box-shadow: 0 0 0 3px rgba(215, 167, 61, 0.25) !important;
  outline: none !important;
}

.caf-clip-field label {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--caf-gold) !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
}

/* Timeline Handles & Range styling */
.caf-timeline-handle.handle-in {
  background: var(--caf-green) !important;
  border-radius: 4px 0 0 4px !important;
  color: #ffffff !important;
  font-weight: 800 !important;
}

.caf-timeline-handle.handle-out {
  background: var(--caf-gold) !important;
  border-radius: 0 4px 4px 0 !important;
  color: #061423 !important;
  font-weight: 800 !important;
}

.caf-timeline-range-highlight {
  background: linear-gradient(90deg, rgba(0, 122, 61, 0.45) 0%, rgba(215, 167, 61, 0.45) 100%) !important;
  border-top: 2px solid var(--caf-green) !important;
  border-bottom: 2px solid var(--caf-gold) !important;
}

/* Viewer Modal Right Panel Action Hierarchy */
.sp-modal-dialog {
  background: #0b1b2b !important;
  border: 1px solid var(--caf-border-gold) !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.85) !important;
}

.sp-details-panel {
  background: #0b1b2b !important;
  border-left: 1px solid var(--caf-border) !important;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.btn-create-clip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: #10243a !important;
  border: 1.5px solid var(--caf-gold) !important;
  color: var(--caf-gold) !important;
  padding: 12px 20px !important;
  border-radius: var(--caf-radius-md) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 4px 14px rgba(215, 167, 61, 0.2) !important;
  width: 100% !important;
}

.btn-create-clip:hover {
  background: var(--caf-gold) !important;
  color: #061423 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(215, 167, 61, 0.35) !important;
}

.sp-action-btn-primary {
  background: var(--caf-green) !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(0, 122, 61, 0.35) !important;
}

.sp-action-btn-primary:hover {
  background: var(--caf-green-hover) !important;
  transform: translateY(-1px) !important;
}

.sp-btn-learning-toggle {
  background: #10243a !important;
  border: 1px solid var(--caf-border) !important;
  color: var(--caf-text-secondary) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 10px 16px !important;
  border-radius: var(--caf-radius-md) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.sp-btn-learning-toggle:hover {
  border-color: var(--caf-gold) !important;
  color: var(--caf-text-primary) !important;
}

.sp-learning-disclosure-menu {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  background: #061423;
  border: 1px solid var(--caf-border);
  border-radius: var(--caf-radius-sm);
  margin-top: 6px;
}

.sp-disclosure-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--caf-text-primary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease;
}

.sp-disclosure-item:hover {
  background: #10243a;
  color: var(--caf-gold);
}

.sp-meta-details {
  background: #061423;
  border: 1px solid var(--caf-border);
  border-radius: var(--caf-radius-sm);
  padding: 8px 12px;
  font-size: 12px;
  color: var(--caf-text-secondary);
  margin-top: 8px;
}

.sp-meta-details summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--caf-gold);
  outline: none;
}

/* Tournament Explorer Styles */
.sp-drawer {
  background: #0b1b2b !important;
  border-left: 1px solid var(--caf-border-gold) !important;
}

.sp-drawer-header {
  border-bottom: 1px solid var(--caf-border) !important;
  background: #061423 !important;
}

.sp-tournament-hero-card {
  position: relative;
  background: linear-gradient(135deg, rgba(16, 36, 58, 0.95), rgba(6, 20, 35, 0.98));
  border: 1px solid var(--caf-border-gold);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 18px;
  overflow: hidden;
}

.sp-tournament-hero-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--caf-gold);
}

.sp-subevent-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #061423;
  border: 1px solid var(--caf-border);
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 8px;
}

.sp-subevent-card:hover {
  border-color: var(--caf-gold);
  background: #10243a;
  transform: translateX(4px);
}

/* Team Drawer Tabs */
.sp-team-tab-btn {
  padding: 6px 14px;
  border-radius: var(--caf-radius-full);
  border: 1px solid var(--caf-border);
  background: transparent;
  color: var(--caf-text-secondary);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.sp-team-tab-btn.active {
  background: var(--caf-gold);
  border-color: var(--caf-gold);
  color: #061423;
}

/* Responsive & Mobile Polishes */
@media (max-width: 768px) {
  .caf-clip-studio-modal {
    padding: 0;
  }
  .caf-clip-studio-dialog {
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
  }
  .caf-clip-form-grid {
    grid-template-columns: 1fr;
  }
  .caf-live-now-section {
    flex-direction: column;
    align-items: flex-start;
  }
  .caf-live-now-thumb {
    width: 100%;
    height: 140px;
  }
}

/* P0 Mobile Timeline Duration & Compaction Fixes (390px) */
@media (max-width: 640px) {
  .caflib-source-selector {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
    width: 100%;
    box-sizing: border-box;
  }
  .caflib-source-selector::-webkit-scrollbar {
    display: none;
  }
  .source-toggle-group {
    display: flex;
    min-width: max-content;
    padding: 3px;
    gap: 4px;
  }
  .source-btn {
    padding: 7px 14px;
    font-size: 12px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .caf-tc-readout-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .caf-tc-group {
    display: contents !important;
  }
  .caf-tc-box {
    min-width: 0 !important;
    width: 100% !important;
    padding: 6px 8px !important;
    box-sizing: border-box !important;
  }
  .caf-tc-box .tc-value {
    font-size: 12px !important;
  }
  .caf-tc-duration-pill {
    grid-column: 1 / -1 !important;
    text-align: center !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    background: rgba(215, 167, 61, 0.12) !important;
    border-color: rgba(215, 167, 61, 0.35) !important;
    color: var(--caf-gold-light) !important;
  }
  .caf-tc-accuracy-badge {
    grid-column: 1 / -1 !important;
    text-align: center !important;
    font-size: 10px !important;
    box-sizing: border-box !important;
  }
  .caf-clip-studio-modal {
    padding: 0 !important;
  }
  .caf-clip-studio-dialog {
    width: 100% !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .caf-clip-body {
    padding-bottom: 90px !important;
    overflow-y: auto !important;
  }
  .caf-clip-footer {
    position: sticky !important;
    bottom: 0 !important;
    padding: 12px 16px max(16px, env(safe-area-inset-bottom)) !important;
    background: #061423 !important;
    border-top: 1px solid var(--caf-border) !important;
    z-index: 10 !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   PHASE D: LEARNING ENRICHMENT & PEDAGOGICAL WORKFLOWS
   ────────────────────────────────────────────────────────────────────────── */
.caflib-learning-dialog {
  max-width: 580px;
}

.caflib-target-context-box {
  background: rgba(11, 27, 43, 0.7);
  border: 1px solid var(--caf-border-light);
  border-radius: var(--caf-radius-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.caflib-target-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--caf-gold-light);
}

.caflib-pedagogical-notice {
  font-size: 11px;
  color: var(--caf-text-muted);
  line-height: 1.4;
  padding: 6px 10px;
  background: rgba(215, 167, 61, 0.08);
  border-left: 3px solid var(--caf-gold);
  border-radius: 0 4px 4px 0;
}

/* My Learning Media Drawer Tabs */
.sp-learning-drawer-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 16px;
  scrollbar-width: none;
}
.sp-learning-drawer-tabs::-webkit-scrollbar {
  display: none;
}

.sp-ld-tab {
  flex-shrink: 0;
  padding: 6px 12px;
  border-radius: var(--caf-radius-full);
  font-size: 12px;
  font-weight: 700;
  border: 1px solid var(--caf-border);
  background: var(--caf-surface-elevated);
  color: var(--caf-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.sp-ld-tab:hover {
  border-color: var(--caf-green);
  color: #fff;
}

.sp-ld-tab.active {
  background: var(--caf-green);
  border-color: var(--caf-green);
  color: #fff;
}

/* Active smart collection indicator */
.caflib-collection-card.active-rule {
  border-color: var(--caf-green) !important;
  box-shadow: 0 0 0 2px var(--caf-green-glow), var(--caf-shadow-md);
}

/* Save current search button */
.sp-save-search-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(215, 167, 61, 0.15);
  border: 1px solid rgba(215, 167, 61, 0.35);
  color: var(--caf-gold-light);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: var(--caf-radius-full);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.sp-save-search-btn:hover {
  background: rgba(215, 167, 61, 0.28);
  border-color: var(--caf-gold);
  color: #fff;
}

/* ══════════════════════════════════════════════════════════════════════════
   UX FUNCTIONAL HOTFIX: ACCESSIBILITY, CONTRAST, CLIP STUDIO & TOURNAMENTS
   ══════════════════════════════════════════════════════════════════════════ */

/* 1. FILTER & SEARCH CONTRAST TOKENS */
.lib-filter-select,
.sp-select,
select.sp-select,
#sp-event-select,
#sp-team-select {
  background-color: #0d223a !important;
  color: #f0f4f8 !important;
  border: 1px solid rgba(218, 165, 32, 0.45) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
}

.lib-filter-select:focus,
.sp-select:focus,
select.sp-select:focus,
#sp-event-select:focus,
#sp-team-select:focus {
  border-color: var(--caf-gold) !important;
  box-shadow: 0 0 0 2px rgba(218, 165, 32, 0.25) !important;
  outline: none !important;
}

.lib-filter-select option,
.sp-select option,
select.sp-select option,
#sp-event-select option,
#sp-team-select option {
  background-color: #0d223a !important;
  color: #ffffff !important;
  padding: 8px 12px !important;
}

.sp-tag-input,
#sp-tag-input {
  background-color: #0d223a !important;
  color: #f0f4f8 !important;
  border: 1px solid rgba(218, 165, 32, 0.45) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
}

.sp-tag-input:focus,
#sp-tag-input:focus {
  border-color: var(--caf-gold) !important;
  box-shadow: 0 0 0 2px rgba(218, 165, 32, 0.25) !important;
  outline: none !important;
}

.sp-tag-input::placeholder,
#sp-tag-input::placeholder,
.caflib-search-input::placeholder,
#caflib-hero-search-input::placeholder,
#sp-search-input::placeholder,
#global-search-input::placeholder {
  color: rgba(240, 244, 248, 0.65) !important;
}

.caflib-search-input,
#caflib-hero-search-input,
#sp-search-input,
#global-search-input,
.search-input-wrap input {
  color: #ffffff !important;
  caret-color: var(--caf-gold) !important;
}

/* 2. SEARCH BAR & SEARCH SUGGESTIONS DROPDOWN */
.caflib-search-bar-wrap {
  position: relative;
  width: 100%;
}

.caflib-search-clear-btn {
  position: absolute;
  right: 74px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--caf-text-muted);
  font-size: 14px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.caflib-search-clear-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.caflib-search-suggestions {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #091b2c;
  border: 1px solid rgba(218, 165, 32, 0.4);
  border-radius: var(--caf-radius-md);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.7);
  z-index: 250;
  max-height: 380px;
  overflow-y: auto;
  display: none;
}

.caflib-sugg-group-title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--caf-gold);
  padding: 8px 14px 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.caflib-sugg-group-title:first-child {
  border-top: none;
}

.caflib-sugg-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  cursor: pointer;
  transition: background 0.15s ease;
  font-size: 13px;
  color: #f0f4f8;
}

.caflib-sugg-item:hover {
  background: rgba(0, 122, 61, 0.25);
  color: #fff;
}

.caflib-sugg-item .sugg-meta {
  font-size: 11px;
  color: var(--caf-text-muted);
  margin-left: auto;
}

/* 3. CLIP STUDIO PROMINENT VIDEO & TIMELINE STICKY LAYOUT */
.caf-clip-editor-sticky {
  background: #071526;
  border: 1px solid rgba(218, 165, 32, 0.25);
  border-radius: var(--caf-radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.caf-clip-video-stage {
  position: relative;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  width: 100%;
  max-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.8);
}

.caf-clip-video-stage video {
  width: 100%;
  height: 100%;
  max-height: 380px;
  object-fit: contain;
  background: #000;
}

.caf-tc-readout-row-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr) auto;
  align-items: center;
  gap: 12px;
}

@media (max-width: 768px) {
  .caf-tc-readout-row-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.caf-tc-box-current {
  background: #061e38;
  border: 1px solid rgba(218, 165, 32, 0.4);
}

.caf-tc-box-current .tc-label {
  color: var(--caf-gold);
}

.caf-tc-box-current .tc-value {
  color: #fbbf24;
}

.btn-download-clip.disabled,
.btn-download-clip:disabled {
  opacity: 0.5;
  cursor: not-allowed !important;
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #94a3b8 !important;
}

/* 4. ACTIVE SMART COLLECTION BANNER */
.caf-smart-coll-banner {
  background: linear-gradient(135deg, rgba(0, 122, 61, 0.25), rgba(9, 27, 44, 0.9));
  border: 1px solid var(--caf-green);
  border-radius: var(--caf-radius-md);
  padding: 14px 18px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: 0 4px 16px rgba(0, 122, 61, 0.15);
}

.caf-smart-coll-banner .scb-info h3 {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 4px;
}

.caf-smart-coll-banner .scb-info p {
  font-size: 12px;
  color: var(--caf-text-secondary);
  margin: 0;
}

.caf-smart-coll-banner .scb-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: var(--caf-radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.caf-smart-coll-banner .scb-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: #fff;
}

/* 5. TOURNAMENT DEDICATED DETAIL VIEW & TABS */
.caf-tourn-detail-header {
  background: linear-gradient(135deg, #091b2c 0%, #0d223a 100%);
  border: 1px solid rgba(218, 165, 32, 0.3);
  border-radius: var(--caf-radius-lg);
  padding: 20px 24px;
  margin-bottom: 20px;
}

.caf-tourn-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}

.caf-tourn-title-row h2 {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.caf-tourn-season-badge {
  background: rgba(218, 165, 32, 0.18);
  border: 1px solid var(--caf-gold);
  color: var(--caf-gold);
  font-size: 12px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 20px;
}

.caf-tourn-meta-row {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 13px;
  color: #94a3b8;
}

.caf-tourn-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 20px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.caf-tourn-tab {
  padding: 10px 18px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: #94a3b8;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.caf-tourn-tab:hover {
  color: #fff;
}

.caf-tourn-tab.active {
  color: #fbbf24;
  border-bottom-color: var(--caf-gold);
}

.caf-match-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.caf-match-card {
  background: #091b2c;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--caf-radius-md);
  padding: 14px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}

.caf-match-card:hover {
  border-color: var(--caf-gold);
  transform: translateY(-2px);
  background: #0d223a;
}

.caf-match-stage-tag {
  font-size: 11px;
  font-weight: 700;
  color: var(--caf-gold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.caf-match-teams {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
}

.caf-match-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  font-size: 11px;
  color: #94a3b8;
}

/* 6. FRIENDLY PAGINATION */
.caf-friendly-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 24px;
  margin-bottom: 12px;
}

.caf-friendly-pagination span {
  font-size: 13px;
  font-weight: 600;
  color: #cbd5e1;
}

/* 7. DASHBOARD LATEST CAF MEDIA ROW */
.caf-dash-media-section {
  margin-top: 28px;
  margin-bottom: 24px;
}

.caf-dash-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 12px;
}



/* ══════════════════════════════════════════════════════════════════════════
   NEXT UX — WAVE 1: RESULT CONTROLS, LAYOUT MODES, GROUPED SEARCH
   ══════════════════════════════════════════════════════════════════════════ */

/* 1. RESULT CONTROLS: count, order and layout sit with the results they govern */
.sp-result-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.sp-result-summary {
  font-size: 13px;
  font-weight: 700;
  color: #e2eaf2;
  letter-spacing: 0.2px;
}

.sp-result-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.sp-sort-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: #b9c8d8;
}

.sp-sort-select {
  min-width: 156px;
}

.sp-view-group {
  display: inline-flex;
  background: #0d223a;
  border: 1px solid rgba(218, 165, 32, 0.35);
  border-radius: 8px;
  overflow: hidden;
}

.sp-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: #c8d6e4;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 12px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.sp-view-btn + .sp-view-btn {
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.sp-view-btn:hover {
  background: rgba(218, 165, 32, 0.12);
  color: #ffffff;
}

.sp-view-btn.active {
  background: var(--caf-gold);
  color: #061423;
}

.sp-view-btn:focus-visible {
  outline: 2px solid var(--caf-gold);
  outline-offset: -2px;
}

/* 2. LAYOUT MODES */
.lib-grid.sp-view-compact {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
}

.lib-grid.sp-view-compact .lib-body {
  padding: 10px 12px;
}

.lib-grid.sp-view-compact .lib-title {
  font-size: 12.5px;
}

.lib-grid.sp-view-compact .lib-meta-row,
.lib-grid.sp-view-compact .lib-footer {
  display: none;
}

.lib-grid.sp-view-list {
  grid-template-columns: 1fr;
  gap: 10px;
}

.lib-grid.sp-view-list .lib-card {
  flex-direction: row;
  align-items: stretch;
}

.lib-grid.sp-view-list .lib-card:hover {
  transform: none;
}

.lib-grid.sp-view-list .sp-thumb-wrap,
.lib-grid.sp-view-list .lib-thumb {
  width: 210px;
  min-width: 210px;
  aspect-ratio: 16 / 9;
}

.lib-grid.sp-view-list .lib-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

@media (max-width: 640px) {
  .lib-grid.sp-view-list .sp-thumb-wrap,
  .lib-grid.sp-view-list .lib-thumb {
    width: 132px;
    min-width: 132px;
  }

  .sp-view-text {
    display: none;
  }
}

/* 3. GROUPED SEARCH RESULTS */
.caflib-sugg-item strong {
  color: #ffffff;
  font-weight: 700;
}

.caflib-sugg-item:focus-visible {
  outline: 2px solid var(--caf-gold);
  outline-offset: -2px;
}

.caflib-sugg-empty {
  padding: 14px 16px;
  font-size: 13px;
  color: #c2d0de;
}

/* 4. ONE CLEAR CONTROL: the browser's own search reset would duplicate ours */
.caflib-search-input::-webkit-search-cancel-button,
.caflib-search-input::-webkit-search-decoration,
#caflib-hero-search-input::-webkit-search-cancel-button,
#caflib-hero-search-input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   NEXT UX — WAVE 3: CLIP STUDIO TIMELINE, FILMSTRIP, ZOOM AND PAN
   ══════════════════════════════════════════════════════════════════════════ */

.caf-timeline-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.caf-zoom-group {
  display: inline-flex;
  gap: 6px;
}

.caf-zoom-btn {
  background: #0d223a;
  border: 1px solid rgba(218, 165, 32, 0.35);
  color: #e6eef6;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.caf-zoom-btn:hover {
  background: rgba(218, 165, 32, 0.16);
  border-color: var(--caf-gold);
}

.caf-zoom-btn:focus-visible {
  outline: 2px solid var(--caf-gold);
  outline-offset: 1px;
}

.caf-timeline-window {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #b9c8d8;
}

/* Filmstrip: frames captured from the video itself, so each sits above its own time */
.caf-filmstrip {
  display: flex;
  gap: 2px;
  height: 54px;
  margin-bottom: 4px;
  background: #050f1b;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 6px 6px 0 0;
  overflow: hidden;
}

.caf-film-cell {
  flex: 1 1 0;
  min-width: 0;
  background: linear-gradient(135deg, #071220, #0c1c30);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.caf-film-cell canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.caf-filmstrip.is-building .caf-film-cell:not(.is-ready) {
  animation: caf-film-pulse 1.4s ease-in-out infinite;
}

@keyframes caf-film-pulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.8; }
}

/* Time ruler */
.caf-timeline-ruler {
  position: relative;
  height: 18px;
  margin-bottom: 2px;
}

.caf-tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

.caf-tick i {
  width: 1px;
  height: 5px;
  background: rgba(255, 255, 255, 0.35);
}

.caf-tick b {
  font-size: 9.5px;
  font-weight: 700;
  color: #93a7bb;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

/* Pan bar: the window inside the whole video */
.caf-timeline-pan {
  position: relative;
  height: 12px;
  margin-top: 8px;
  background: #071220;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  cursor: grab;
}

.caf-timeline-pan:active {
  cursor: grabbing;
}

.caf-timeline-pan-window {
  position: absolute;
  top: 1px;
  bottom: 1px;
  background: rgba(218, 165, 32, 0.4);
  border: 1px solid var(--caf-gold);
  border-radius: 4px;
  min-width: 12px;
}

/* Typed start and end */
.caf-clip-range-fields {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.caf-range-field {
  display: flex;
  align-items: center;
  gap: 8px;
}

.caf-range-field span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: #b9c8d8;
}

.caf-range-field input {
  width: 132px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.caf-range-hint {
  font-size: 12px;
  color: #f2c14e;
}

@media (max-width: 640px) {
  .caf-filmstrip {
    height: 44px;
  }

  .caf-timeline-toolbar {
    gap: 8px;
  }

  .caf-zoom-btn {
    padding: 5px 9px;
    font-size: 11.5px;
  }

  .caf-clip-range-fields {
    gap: 10px;
  }

  .caf-range-field input {
    width: 112px;
  }
}

/* Keep the whole editing surface — video, timeline, range fields — visible together */
.caf-clip-video-stage {
  max-height: 320px;
}

.caf-clip-editor-sticky {
  gap: 10px;
}

/* An empty strip would read as broken, so it collapses until it holds real frames.
   It stays in the layout: a display:none strip could never measure its own width. */
.caf-filmstrip:empty,
.caf-filmstrip.is-unavailable {
  height: 0;
  margin: 0;
  border-width: 0;
  overflow: hidden;
}

@media (max-width: 640px) {
  .caf-clip-video-stage {
    max-height: 210px;
  }
}

/* Legible IN and OUT grips at any zoom */
.caf-timeline-handle {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  min-width: 30px;
  padding: 0 4px;
  justify-content: center;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════════
   NEXT UX — WAVE 1: MEDIA-FIRST HOME AND CONTEXTUAL MEDIA DETAIL
   ══════════════════════════════════════════════════════════════════════════ */

.caf-home-hero {
  position: relative;
  background: linear-gradient(180deg, rgba(8, 19, 33, 0.96) 0%, rgba(4, 17, 31, 0.82) 100%),
              radial-gradient(ellipse at 50% -30%, rgba(0, 122, 61, 0.28) 0%, transparent 70%);
  border: 1px solid var(--caf-border);
  border-radius: var(--caf-radius-lg);
  padding: 40px 32px 30px;
  margin-bottom: 26px;
}

.caf-home-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: var(--caf-radius-lg) var(--caf-radius-lg) 0 0;
  background: linear-gradient(90deg, transparent, var(--caf-green), var(--caf-gold-light), transparent);
}

.caf-home-hero-badge {
  display: inline-block;
  background: rgba(0, 122, 61, 0.2);
  border: 1px solid rgba(0, 122, 61, 0.42);
  color: #34d399;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--caf-radius-full);
  margin-bottom: 14px;
}

.caf-home-hero-title {
  font-size: 36px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.6px;
  margin: 0 0 8px;
  line-height: 1.15;
}

.caf-home-hero-sub {
  font-size: 14.5px;
  color: var(--caf-text-secondary);
  margin: 0 0 22px;
  max-width: 620px;
}

.caf-home-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #0d223a;
  border: 1px solid rgba(218, 165, 32, 0.45);
  border-radius: var(--caf-radius-md);
  padding: 12px 16px;
  max-width: 760px;
}

.caf-home-search-wrap:focus-within {
  border-color: var(--caf-gold);
  box-shadow: 0 0 0 2px rgba(218, 165, 32, 0.22);
}

.caf-home-search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #ffffff;
  font-size: 15px;
  font-weight: 500;
  caret-color: var(--caf-gold);
}

.caf-home-search-input::placeholder {
  color: rgba(240, 244, 248, 0.62);
}

.caf-home-search-clear {
  background: transparent;
  border: none;
  color: #c2d0de;
  font-size: 14px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}

.caf-home-search-clear:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

.caf-home-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.caf-home-chip {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #dbe6f0;
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 13px;
  border-radius: var(--caf-radius-full);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.caf-home-chip:hover {
  border-color: var(--caf-gold);
  background: rgba(218, 165, 32, 0.14);
}

.caf-home-section {
  margin-bottom: 30px;
}

.caf-home-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.caf-home-section-title {
  font-size: 18px;
  font-weight: 800;
  color: #f6fafd;
  margin: 0;
  letter-spacing: -0.2px;
}

.caf-home-section-sub {
  font-size: 12.5px;
  color: #93a7bb;
  margin: 4px 0 0;
}

.caf-home-see-all {
  background: transparent;
  border: none;
  color: var(--caf-gold);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.caf-home-see-all:hover {
  text-decoration: underline;
}

.caf-home-empty {
  font-size: 13px;
  color: #93a7bb;
  margin: 0;
  padding: 18px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: var(--caf-radius-md);
}

.caf-home-skeleton {
  height: 148px;
  border-radius: var(--caf-radius-md);
  background: linear-gradient(90deg, #08192b 25%, #0d2540 50%, #08192b 75%);
  background-size: 200% 100%;
  animation: caf-home-shimmer 1.4s linear infinite;
}

@keyframes caf-home-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.caf-home-media-row,
.caf-home-competition-row,
.caf-home-collection-row,
.caf-home-workshop-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.caf-home-media-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  background: var(--caf-surface-card);
  border: 1px solid var(--caf-border);
  border-radius: var(--caf-radius-md);
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.caf-home-media-card:hover {
  transform: translateY(-3px);
  border-color: var(--caf-green);
}

.caf-home-media-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: #02070e;
  overflow: hidden;
}

.caf-home-media-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.caf-home-media-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #4c6a86;
  font-weight: 800;
  letter-spacing: 2px;
}

.caf-home-media-kind,
.caf-home-media-duration {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(6, 20, 35, 0.86);
  color: #e8f0f7;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 4px;
}

.caf-home-media-duration {
  top: auto;
  left: auto;
  right: 8px;
  bottom: 8px;
  text-transform: none;
}

.caf-home-media-body {
  display: block;
  padding: 12px 13px 14px;
}

.caf-home-media-title {
  display: -webkit-box;
  font-size: 13px;
  font-weight: 700;
  color: #f2f7fb;
  line-height: 1.35;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.caf-home-media-meta {
  display: block;
  font-size: 11.5px;
  color: #93a7bb;
  margin-top: 5px;
}

.caf-home-comp-card,
.caf-home-collection-card,
.caf-home-workshop-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  padding: 18px;
  min-height: 132px;
}

/* The competition card carries its mark edge to edge, so its padding moves off
   the card and onto the text block underneath. */
.caf-home-comp-card {
  padding: 0;
  gap: 0;
  overflow: hidden;
}

.caf-home-comp-visual { display: block; }
.caf-home-comp-visual .caf-artwork { border-radius: 0; }

.caf-home-comp-text {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1 1 auto;
  min-height: 0;
  padding: 13px 16px 15px;
}

.caf-home-comp-card,
.caf-home-collection-card,
.caf-home-workshop-card {
  background: linear-gradient(155deg, #0b2036, #071627);
  border: 1px solid var(--caf-border);
  border-radius: var(--caf-radius-md);
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.caf-home-comp-card:hover,
.caf-home-collection-card:hover,
.caf-home-workshop-card:hover {
  border-color: var(--caf-gold);
  transform: translateY(-3px);
}

.caf-home-comp-season {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: var(--caf-gold);
  text-transform: uppercase;
}

.caf-home-comp-name,
.caf-home-collection-name,
.caf-home-workshop-name {
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.3;
}

.caf-home-comp-facts,
.caf-home-collection-desc,
.caf-home-workshop-meta {
  font-size: 12px;
  color: #9fb2c5;
  line-height: 1.4;
}

.caf-home-comp-open {
  margin-top: auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--caf-gold);
}

.caf-home-continue {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  background: linear-gradient(135deg, rgba(0, 122, 61, 0.22), rgba(7, 22, 39, 0.9));
  border: 1px solid rgba(0, 158, 85, 0.4);
  border-radius: var(--caf-radius-md);
}

.caf-home-continue-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #4ade80;
}

.caf-home-continue-title {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  margin-top: 4px;
}

.caf-home-continue-btn {
  background: var(--caf-green);
  border: none;
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  padding: 10px 18px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
}

.caf-home-stats {
  gap: 12px;
}

/* Media detail breadcrumb */
.sp-media-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
  font-size: 12px;
}

.sp-crumb-link {
  background: transparent;
  border: none;
  color: var(--caf-gold);
  font-size: 12px;
  font-weight: 700;
  padding: 2px 3px;
  cursor: pointer;
  border-radius: 4px;
}

.sp-crumb-link:hover {
  text-decoration: underline;
}

.sp-crumb-link:focus-visible {
  outline: 2px solid var(--caf-gold);
  outline-offset: 1px;
}

.sp-crumb {
  color: #a9bccf;
  font-weight: 600;
  padding: 2px 3px;
}

.sp-crumb.is-current {
  color: #e6eef6;
  font-weight: 700;
}

.sp-crumb-sep {
  color: #64809b;
}

@media (max-width: 1100px) {
  .caf-home-media-row,
  .caf-home-competition-row,
  .caf-home-collection-row,
  .caf-home-workshop-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .caf-home-hero {
    padding: 26px 18px 22px;
  }

  .caf-home-hero-title {
    font-size: 26px;
  }

  .caf-home-media-row,
  .caf-home-competition-row,
  .caf-home-collection-row,
  .caf-home-workshop-row {
    grid-template-columns: 1fr;
  }

  .caf-home-continue {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   NEXT UX — WAVE 3 COMPLETION: SAVED CLIPS, MORE FILTERS, MOBILE FILTER SHEET
   ══════════════════════════════════════════════════════════════════════════ */

.caf-saved-clips {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.caf-saved-clips-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #b9c8d8;
  margin: 0 0 10px;
}

.caf-saved-clips-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

.caf-saved-clip {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  padding: 11px 13px;
  background: #091b2c;
  border: 1px solid var(--caf-border);
  border-left: 3px solid var(--caf-green);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.15s ease;
}

.caf-saved-clip:hover {
  border-color: var(--caf-gold);
  border-left-color: var(--caf-gold);
  transform: translateY(-2px);
}

.caf-saved-clip-range {
  font-family: 'SF Mono', 'Consolas', monospace;
  font-size: 12px;
  font-weight: 800;
  color: var(--caf-gold);
}

.caf-saved-clip-title {
  font-size: 12.5px;
  font-weight: 700;
  color: #f2f7fb;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.caf-saved-clip-context {
  font-size: 11.5px;
  color: #93a7bb;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* More filters */
.sp-more-filters {
  min-width: 150px;
}

.sp-more-filters summary {
  list-style: none;
  cursor: pointer;
  background: #0d223a;
  border: 1px solid rgba(218, 165, 32, 0.35);
  color: #e6eef6;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 8px;
}

.sp-more-filters summary::-webkit-details-marker {
  display: none;
}

.sp-more-filters summary::after {
  content: ' ▾';
  color: var(--caf-gold);
}

.sp-more-filters[open] summary::after {
  content: ' ▴';
}

.sp-more-filters-body {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px;
}

.sp-more-field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.sp-more-field span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #b9c8d8;
}

.sp-more-field input[type="date"] {
  color-scheme: dark;
}

/* Filter sheet: a button on small screens, plain toolbar on desktop */
.sp-filter-sheet-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  background: #0d223a;
  border: 1px solid rgba(218, 165, 32, 0.45);
  color: #f0f4f8;
  font-size: 13.5px;
  font-weight: 800;
  padding: 11px 16px;
  border-radius: 10px;
  cursor: pointer;
  width: 100%;
  justify-content: center;
}

.sp-filter-count {
  background: var(--caf-gold);
  color: #061423;
  font-size: 11px;
  font-weight: 800;
  min-width: 20px;
  padding: 1px 7px;
  border-radius: var(--caf-radius-full);
}

.sp-filter-sheet-head,
.sp-filter-sheet-actions {
  display: none;
}

@media (max-width: 760px) {
  .sp-filter-sheet-toggle {
    display: flex;
  }

  .sp-filter-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1400;
    max-height: 86vh;
    overflow-y: auto;
    display: none;
    flex-direction: column;
    gap: 14px;
    padding: 18px 18px calc(18px + env(safe-area-inset-bottom, 0px));
    background: #071627;
    border-top: 1px solid rgba(218, 165, 32, 0.4);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -18px 44px rgba(0, 0, 0, 0.6);
  }

  .sp-filter-row.sheet-open .sp-filter-bar {
    display: flex;
  }

  .sp-filter-row.sheet-open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(3, 10, 18, 0.66);
    z-index: 1390;
  }

  .sp-filter-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .sp-filter-sheet-head h3 {
    font-size: 16px;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
  }

  .sp-filter-sheet-close {
    background: transparent;
    border: none;
    color: #c2d0de;
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
  }

  .sp-filter-sheet-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    position: sticky;
    bottom: 0;
    padding-top: 10px;
    background: #071627;
  }

  .sp-filter-sheet-actions button {
    width: 100%;
    justify-content: center;
  }

  .sp-type-group,
  .sp-select,
  .sp-tag-autocomplete-wrap,
  .sp-more-filters {
    width: 100%;
  }

  body.caf-sheet-open {
    overflow: hidden;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   NEXT UX — WAVE 4: LEARNING MOMENTS, RELATED MEDIA, PINNED
   ══════════════════════════════════════════════════════════════════════════ */

.sp-panel-title {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #b9c8d8;
  margin: 0 0 10px;
}

.sp-context,
.sp-transcript,
.sp-mediainfo,
.sp-incidents,
.sp-moments,
.sp-related {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.sp-incidents-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
}

.sp-incident {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: #091b2c;
  border: 1px solid var(--caf-border);
  border-left: 3px solid var(--caf-gold);
  border-radius: 8px;
}

.sp-incident-jump {
  background: rgba(218, 165, 32, 0.14);
  border: 1px solid rgba(218, 165, 32, 0.4);
  color: var(--caf-gold);
  font-family: 'SF Mono', 'Consolas', monospace;
  font-size: 12px;
  font-weight: 800;
  padding: 5px 9px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}

.sp-incident-jump:hover {
  background: var(--caf-gold);
  color: #061423;
}

.sp-incident-body {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.sp-incident-label {
  font-size: 12.5px;
  font-weight: 700;
  color: #f2f7fb;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A provider-derived suggestion: gold and dashed, deliberately unlike the solid
   green CAF learning styling used for a Law an instructor has confirmed. */
.sp-incident-law {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--caf-gold);
  background: rgba(215, 167, 61, 0.12);
  border: 1px dashed rgba(215, 167, 61, 0.45);
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.sp-incident-people {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  width: 100%;
}

.sp-incident-player {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #b9c8d8;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  cursor: pointer;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-incident-player:hover {
  border-color: var(--caf-gold);
  color: #ffffff;
}

.sp-incident-clip {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #dbe6f0;
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
}

.sp-incident-clip:hover {
  border-color: var(--caf-green);
  color: #ffffff;
}

.sp-moments-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
}

.sp-moment {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: #091b2c;
  border: 1px solid var(--caf-border);
  border-left: 3px solid var(--caf-green);
  border-radius: 8px;
}

.sp-moment-jump {
  background: rgba(218, 165, 32, 0.14);
  border: 1px solid rgba(218, 165, 32, 0.4);
  color: var(--caf-gold);
  font-family: 'SF Mono', 'Consolas', monospace;
  font-size: 12px;
  font-weight: 800;
  padding: 5px 9px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}

.sp-moment-jump:hover {
  background: var(--caf-gold);
  color: #061423;
}

.sp-moment-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sp-moment-label {
  font-size: 12.5px;
  font-weight: 700;
  color: #f2f7fb;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-moment-target {
  font-size: 11px;
  color: #93a7bb;
  text-transform: capitalize;
}

.sp-moment-clip {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #dbe6f0;
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
}

.sp-moment-clip:hover {
  border-color: var(--caf-green);
  color: #ffffff;
}

/* Related media */
.sp-related-scope {
  font-size: 11.5px;
  color: #93a7bb;
  margin: 0 0 8px;
}

.sp-related-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
}

.sp-related-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: left;
  background: transparent;
  border: 1px solid var(--caf-border);
  border-radius: 8px;
  overflow: hidden;
  padding: 0 0 7px;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.sp-related-item:hover {
  border-color: var(--caf-green);
}

.sp-related-item img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.sp-related-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #071220, #0e1e36);
  color: #4c6a86;
  font-weight: 800;
  letter-spacing: 1px;
}

/* Two columns, and a title allowed two lines. At three columns with
   white-space: nowrap a real CAF title — "Referees Open Day (CAF Women's
   Africa Cup of Nations)" — had room for about eight characters, which is how
   every card came to read "HARDLIGH…". A related card exists to be recognised;
   a fragment that identifies nothing is worse than no card at all. */
.sp-related-title {
  font-size: 11.5px;
  line-height: 1.35;
  color: #cfdcea;
  padding: 0 7px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Pinning */
.caf-comp-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.caf-comp-pin {
  background: #0d223a;
  border: 1px solid rgba(218, 165, 32, 0.4);
  color: #e6eef6;
  font-size: 12.5px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
}

.caf-comp-pin:hover {
  border-color: var(--caf-gold);
}

.caf-comp-pin.is-pinned {
  background: var(--caf-gold);
  color: #061423;
  border-color: var(--caf-gold);
}

.caf-home-pin-kind {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--caf-gold);
}

@media (max-width: 640px) {
  .sp-related-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .caf-comp-detail-head {
    flex-direction: column;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   MEDIA INTELLIGENCE — football context, transcript, media information
   ══════════════════════════════════════════════════════════════════════════ */

.sp-context-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sp-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  max-width: 100%;
  padding: 4px 10px;
  border-radius: 999px;
  background: #091b2c;
  border: 1px solid var(--caf-border);
  color: #dbe6f0;
  font-size: 11.5px;
  text-align: left;
}

.sp-chip.is-actionable { cursor: pointer; }
.sp-chip.is-actionable:hover { border-color: var(--caf-gold); color: #ffffff; }

.sp-chip-kind {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--caf-gold);
  flex: 0 0 auto;
}

.sp-chip-label {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Transcript */
.sp-transcript-head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.sp-transcript-lang {
  background: transparent;
  border: 1px solid var(--caf-border);
  color: #b9c8d8;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  cursor: pointer;
}

.sp-transcript-lang.is-active {
  background: rgba(215, 167, 61, 0.16);
  border-color: rgba(215, 167, 61, 0.4);
  color: var(--caf-gold);
}

.sp-transcript-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 240px;
  overflow-y: auto;
}

.sp-transcript-line {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 5px 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.sp-transcript-line:hover { background: rgba(255, 255, 255, 0.04); }

.sp-transcript-line.is-current {
  background: rgba(215, 167, 61, 0.12);
  border-color: rgba(215, 167, 61, 0.32);
}

.sp-transcript-time {
  flex: 0 0 auto;
  font-family: 'SF Mono', 'Consolas', monospace;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--caf-gold);
  padding-top: 1px;
}

.sp-transcript-text { font-size: 12px; color: #dbe6f0; line-height: 1.45; }

/* Related media reasons */
.sp-related-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }

.sp-related-reasons { display: flex; flex-wrap: wrap; gap: 4px; }

.sp-related-reason {
  font-size: 10px;
  font-weight: 700;
  color: #7fd8a8;
  background: rgba(0, 122, 61, 0.14);
  border: 1px solid rgba(0, 122, 61, 0.3);
  padding: 1px 7px;
  border-radius: 999px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Media information */
.sp-mediainfo-summary {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #b9c8d8;
  cursor: pointer;
}

.sp-mediainfo-list { margin: 10px 0 0; display: flex; flex-direction: column; gap: 5px; }

.sp-mediainfo-row { display: flex; justify-content: space-between; gap: 12px; }

.sp-mediainfo-row dt { font-size: 11.5px; color: #93a7bb; margin: 0; }
.sp-mediainfo-row dd { font-size: 11.5px; color: #f2f7fb; font-weight: 700; margin: 0; text-align: right; }

/* Where a learning moment has been used — the institutional-memory line. */
.sp-moment-usage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  color: #93a7bb;
  margin-top: 2px;
}

.sp-usage-chip {
  font-weight: 700;
  color: #7fd8a8;
  background: rgba(0, 122, 61, 0.16);
  border: 1px solid rgba(0, 122, 61, 0.34);
  padding: 1px 7px;
  border-radius: 999px;
}

/* The details panel is narrow, and an incident carries a timecode, a name, a
   suggested Law, player chips and a clip action. Below a comfortable width
   those stopped fitting on one row and the Clip button collided with the Law
   badge, so the row becomes two lines with the action on its own. */
@media (max-width: 1500px) {
  .sp-incident {
    flex-wrap: wrap;
    row-gap: 6px;
  }

  .sp-incident-body {
    flex: 1 1 auto;
    min-width: 0;
  }

  .sp-incident-clip {
    order: 3;
    margin-left: auto;
  }

  .sp-incident-label {
    white-space: normal;
    line-height: 1.3;
  }
}

/* Automatic transcript: named for what it is, collapsed by default. */
.sp-transcript-summary {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #b9c8d8;
  cursor: pointer;
}

.sp-transcript-lang-label {
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--caf-gold);
  text-transform: none;
}

.sp-transcript-note {
  margin: 8px 0 10px;
  font-size: 11px;
  line-height: 1.5;
  color: #7a8ea3;
}

/* ── Confirmed vs Suggested Law ───────────────────────────────────────────
   A Suggested Law comes from the provider's logged action vocabulary. A
   Confirmed Law is an instructor's judgement. They are drawn differently on
   purpose — dashed gold for a suggestion, the solid form control for the
   confirmation — so the record can never blur the two. */
.caf-clip-label-note {
  font-weight: 500;
  color: var(--caf-text-muted);
  text-transform: none;
  letter-spacing: 0;
}

.caf-clip-suggested {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  padding: 8px 10px;
  border: 1px dashed var(--caf-gold);
  border-radius: var(--caf-radius-sm, 8px);
  background: rgba(215, 167, 61, 0.07);
}

.caf-clip-suggested-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--caf-gold-light);
}

.caf-clip-suggested-apply {
  border: 1px solid rgba(215, 167, 61, 0.5);
  background: transparent;
  color: var(--caf-gold-light);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
}

.caf-clip-suggested-apply:hover,
.caf-clip-suggested-apply:focus-visible {
  background: rgba(215, 167, 61, 0.18);
  outline: none;
}

.caf-clip-suggested-note {
  flex-basis: 100%;
  font-size: 11px;
  color: var(--caf-text-muted);
}

/* ── Context chips: the ones that locate a media get room to say so ───────
   Competition, Stage and Match carry full official names. Squeezed inline they
   truncated to "Zamalek vs USM Alger (CAF Confedera…", which is not context at
   all. These take the panel's full width and wrap to a second line instead of
   cutting; the short tags keep flowing inline beside each other. */
.sp-context-chips .sp-chip.is-wide {
  flex: 1 0 100%;
  align-items: flex-start;
  border-radius: 10px;
  padding: 6px 10px;
}

.sp-context-chips .sp-chip.is-wide .sp-chip-label {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.4;
}

.sp-context-chips .sp-chip.is-wide .sp-chip-kind {
  padding-top: 2px;
}

/* ── Clipping offered only where it can actually work ─────────────────────
   CREATE CLIP used to sit fully enabled beside a "Playback Unavailable"
   panel, promising an editor that could not open. It now reflects the same
   truth the player does, and says why in one line rather than leaving a
   dead control. */
.btn-create-clip.is-unavailable,
.btn-create-clip[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.6);
}

.btn-create-clip.is-unavailable:hover,
.btn-create-clip[disabled]:hover {
  transform: none;
  box-shadow: none;
}

.sp-clip-unavailable-note {
  margin: -2px 0 2px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--caf-text-muted);
}

/* ── Clip Studio footer: the two real actions lead ────────────────────────
   MP4 export needs server-side video processing this deployment does not run.
   As a full-size third button it read as a broken headline feature; as a note
   it says the same true thing without claiming a third of the action bar. */
.caf-clip-export-note {
  align-self: center;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--caf-text-muted);
  opacity: 0.85;
  cursor: default;
  white-space: nowrap;
}

/* ── The sticky footer must not sit on the last rows ───────────────────────
   The action bar floats over the scrolling body, so the body has to reserve
   its height. An earlier attempt used scroll-padding-bottom, which only
   affects scroll snapping and reserved no space at all — the timecode readout
   stayed hidden under the footer. Real padding is what was needed. */
.caf-clip-studio-dialog .caf-clip-form-grid { padding-bottom: 8px; }

/* ── Clip Studio density ──────────────────────────────────────────────────
   The editor was reported as oversized and hard to scan. The video and
   filmstrip stay dominant — they are the work — while the readouts, controls
   and form around them tighten so the whole editor fits a laptop screen. */
.caf-clip-studio-dialog .caf-tc-box { padding: 7px 10px; }
.caf-clip-studio-dialog .caf-tc-box .tc-label { font-size: 9px; letter-spacing: 0.6px; }
.caf-clip-studio-dialog .caf-tc-box .tc-value { font-size: 13px; }
.caf-clip-studio-dialog .caf-clip-btn { padding: 6px 12px; font-size: 12px; }
.caf-clip-studio-dialog .caf-clip-field label { font-size: 10.5px; }
.caf-clip-studio-dialog .caf-clip-input,
.caf-clip-studio-dialog .caf-clip-select,
.caf-clip-studio-dialog .caf-clip-textarea { padding: 8px 11px !important; font-size: 12.5px !important; }
.caf-clip-studio-dialog .caf-clip-textarea { min-height: 62px; }
.caf-clip-studio-dialog .caf-clip-form-grid { gap: 11px; }
.caf-clip-studio-dialog .caf-clip-header h2,
.caf-clip-studio-dialog .caf-clip-title { font-size: 15px; }

/* ── Football context, grouped ────────────────────────────────────────────
   Where a media sits in CAF football is a different kind of fact from how the
   provider labelled it. Flat, a "video" tag looked as important as the match.
   Two small groups keep structure first without hiding anything. */
.sp-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sp-chip-group + .sp-chip-group { margin-top: 12px; }

.sp-chip-group-title {
  flex: 1 0 100%;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--caf-text-muted);
  margin-bottom: 1px;
}

/* ══════════════════════════════════════════════════════════════════════════
   CLIP STUDIO — the selection lives on the frames
   ══════════════════════════════════════════════════════════════════════════
   The clip range used to be a thin bar beneath the filmstrip, so a reader had
   to map a position on that bar back onto the pictures above it. Drawing the
   selection over the frames means the frames themselves show the clip: what
   is outside it dims, the chosen span stays bright, and the playhead is a line
   across the pictures. Everything is a layer — the frames, extraction, zoom,
   pan and snapping underneath are unchanged.
   ══════════════════════════════════════════════════════════════════════════ */

.caf-filmstrip-stage {
  position: relative;
  margin-bottom: 4px;
  cursor: crosshair;
  user-select: none;
}

.caf-filmstrip-stage .caf-filmstrip { margin-bottom: 0; }

.caf-strip-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 6px 6px 0 0;
  overflow: hidden;
}

/* Outside the clip is dimmed rather than hidden: the surrounding action is
   still the context an instructor is judging the boundary against. */
.caf-strip-shade {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(4, 12, 22, 0.66);
}

.caf-strip-shade-left { left: 0; }

.caf-strip-selection {
  position: absolute;
  top: 0;
  bottom: 0;
  pointer-events: auto;
  cursor: grab;
  border-top: 2px solid var(--caf-green-vibrant, #00b86b);
  border-bottom: 2px solid var(--caf-green-vibrant, #00b86b);
  box-shadow: inset 0 0 0 9999px rgba(0, 184, 107, 0.12);
}

.caf-filmstrip-stage.is-dragging .caf-strip-selection { cursor: grabbing; }

/* Grips sit inside the selection so a narrow clip cannot push them off the
   strip, and they are wide enough to grab on a touch screen. */
.caf-strip-grip {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 12px;
  background: var(--caf-green-vibrant, #00b86b);
  cursor: ew-resize;
  pointer-events: auto;
}

.caf-strip-grip::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 14px;
  transform: translate(-50%, -50%);
  background: rgba(4, 12, 22, 0.75);
  border-radius: 2px;
}

.caf-strip-grip-in { left: 0; border-radius: 4px 0 0 4px; }
.caf-strip-grip-out { right: 0; border-radius: 0 4px 4px 0; }

/* The length of the clip, on the clip. */
.caf-strip-length {
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: #061423;
  background: var(--caf-green-vibrant, #00b86b);
  padding: 1px 7px;
  border-radius: 999px;
  white-space: nowrap;
  pointer-events: none;
}

/* A clip too narrow to label loses the badge rather than overflowing it. */
.caf-strip-selection.is-narrow .caf-strip-length { display: none; }
.caf-strip-selection.is-narrow .caf-strip-grip { width: 7px; }
.caf-strip-selection.is-narrow .caf-strip-grip::after { display: none; }

.caf-strip-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--caf-gold-light, #e3b94f);
  box-shadow: 0 0 6px rgba(227, 185, 79, 0.8);
  pointer-events: none;
}

/* ── House clip lengths ───────────────────────────────────────────────────
   A referee clips to a standard length far more often than they hand-drag
   one. These set the span from the current IN point in a single click. */
.caf-clip-lengths {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 6px;
}

.caf-clip-lengths-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--caf-text-muted);
  margin-right: 2px;
}

.caf-len-btn {
  background: #10243a;
  border: 1px solid rgba(215, 167, 61, 0.3);
  color: #dbe6f0;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.caf-len-btn:hover {
  border-color: var(--caf-gold);
  color: #ffffff;
  background: #16304c;
}

.caf-len-btn:focus-visible {
  outline: 2px solid var(--caf-gold-light);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .caf-strip-grip { width: 16px; }
  .caf-clip-lengths { gap: 5px; }
  .caf-len-btn { padding: 4px 9px; font-size: 11px; }
}

/* The distinguishing part of a related card's name, with its length beside
   it, so eight cards from one event no longer read as eight copies. */
.sp-related-meta {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #93a7bb;
  letter-spacing: 0.2px;
}