/* BCR surgical premium layer — presentation-only corrections.
   Content, route ownership, media controllers, and authentication remain
   owned by the existing application. */
:root {
  --bcr-surgical-ink: #070611;
  --bcr-surgical-indigo: #0e1028;
  --bcr-surgical-plum: #1a1029;
  --bcr-surgical-violet: #b79cff;
  --bcr-surgical-electric: #62b7ff;
  --bcr-surgical-magenta: #d96bbd;
  --bcr-surgical-paper: #f5f1ff;
  --bcr-surgical-muted: rgba(229, 222, 249, .72);
  --bcr-surgical-line: rgba(220, 211, 255, .14);
  --bcr-surgical-surface: rgba(10, 9, 24, .46);
}

html,
html body {
  background-color: var(--bcr-surgical-ink) !important;
  background-image: linear-gradient(180deg, #070611 0%, #0b0a1b 48%, #080711 100%) !important;
  background-attachment: fixed !important;
  color: var(--bcr-surgical-paper) !important;
}

html body {
  overflow-x: hidden !important;
}

html body #root {
  position: relative !important;
  isolation: isolate !important;
  background: transparent !important;
}

/* The atmosphere is one continuous layer. Only transform and opacity animate. */
html body #root::before,
html body #root::after {
  content: "" !important;
  position: fixed !important;
  z-index: 0 !important;
  display: block !important;
  pointer-events: none !important;
  filter: none !important;
  will-change: transform, opacity !important;
  border-radius: 999px !important;
  transform-origin: center !important;
  animation-direction: alternate !important;
  animation-iteration-count: infinite !important;
}

html body #root::before {
  width: min(118vw, 1600px) !important;
  height: min(118vw, 1600px) !important;
  top: -52vw !important;
  right: -36vw !important;
  opacity: .20 !important;
  background: radial-gradient(ellipse at center, rgba(126, 95, 255, .54) 0%, rgba(47, 139, 255, .18) 38%, transparent 92%) !important;
  animation: bcrAtmosphereViolet 32s ease-in-out infinite !important;
}

html body #root::after {
  width: min(104vw, 1360px) !important;
  height: min(104vw, 1360px) !important;
  left: -44vw !important;
  bottom: -46vw !important;
  opacity: .14 !important;
  background: radial-gradient(ellipse at center, rgba(217, 107, 189, .42) 0%, rgba(84, 76, 225, .18) 40%, transparent 94%) !important;
  animation: bcrAtmosphereBlue 38s ease-in-out -11s infinite !important;
}

@keyframes bcrAtmosphereViolet {
  0% { transform: translate3d(-3vw, -2vh, 0) scale(.97); opacity: .16; }
  50% { transform: translate3d(1vw, 2vh, 0) scale(1.02); opacity: .22; }
  100% { transform: translate3d(5vw, 5vh, 0) scale(1.06); opacity: .18; }
}

@keyframes bcrAtmosphereBlue {
  0% { transform: translate3d(2vw, 4vh, 0) scale(.98); opacity: .11; }
  50% { transform: translate3d(0, 0, 0) scale(1.03); opacity: .16; }
  100% { transform: translate3d(5vw, -4vh, 0) scale(1.08); opacity: .13; }
}

html body #root > * {
  position: relative !important;
  z-index: 1 !important;
}

/* Shared translucent shells keep Home, Episodes, Tracks, Schedule, Apply,
   Latest, Cuts, reminders, and the footer visually fused. */
html body :is(#videos, #bcr-shorts, #events, #reminders, footer#contact,
  .section-latest, .section-episodes, .section-tracks, .section-schedule,
  .section-events, .section-channels, .section-community, .section-apply) {
  background-color: var(--bcr-surgical-surface) !important;
  background-image: linear-gradient(180deg, rgba(20, 16, 43, .24), rgba(7, 6, 17, .40)) !important;
  border-color: var(--bcr-surgical-line) !important;
}

html body .site-header {
  background: rgba(7, 6, 17, .78) !important;
  border-bottom: 1px solid rgba(220, 211, 255, .12) !important;
  box-shadow: 0 16px 42px rgba(2, 2, 10, .24) !important;
  -webkit-backdrop-filter: blur(18px) saturate(125%) !important;
  backdrop-filter: blur(18px) saturate(125%) !important;
}

/* Keep the header dock in its existing position, with a quieter edge. */
html body .site-header .player-dock,
html body .player-dock {
  border: 1px solid rgba(232, 238, 255, .17) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .30), inset 0 1px 0 rgba(255, 255, 255, .07) !important;
}

/* The queue is a local panel. The page stays visually unchanged behind it. */
html body .bcr-player-backdrop {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html body[data-bcr-player-expanded='true'] .bcr-player-backdrop {
  background: transparent !important;
  opacity: 0 !important;
  visibility: visible !important;
  pointer-events: none !important;
}

html body .player-dock[data-expanded='true'] .player-panel,
html body .site-header .player-dock[data-expanded='true'] .player-panel {
  border: 1px solid rgba(220, 211, 255, .18) !important;
  box-shadow: 0 22px 48px rgba(2, 2, 12, .42), inset 0 1px 0 rgba(255, 255, 255, .07) !important;
}

/* Latest cards use a consistent editorial frame and a quieter metadata rail. */
html body #videos .card-row,
html body .section-latest .card-row {
  gap: clamp(16px, 1.65vw, 24px) !important;
  scroll-padding-inline: 10px !important;
  scrollbar-width: none !important;
}

html body #videos .card-row::-webkit-scrollbar,
html body .section-latest .card-row::-webkit-scrollbar,
html body #bcr-shorts .bcr-shorts-row::-webkit-scrollbar {
  display: none !important;
}

html body #videos .bcr-latest-session-card,
html body .section-latest .bcr-latest-session-card {
  flex: 0 0 clamp(300px, 24vw, 372px) !important;
  width: clamp(300px, 24vw, 372px) !important;
  overflow: hidden !important;
  border: 1px solid rgba(220, 211, 255, .16) !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, rgba(24, 19, 49, .70), rgba(7, 6, 17, .78)) !important;
  box-shadow: 0 18px 42px rgba(2, 2, 10, .22), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
  transform: none !important;
}

html body #videos .bcr-latest-session-card .media-image,
html body .section-latest .bcr-latest-session-card .media-image {
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  border-radius: 17px 17px 0 0 !important;
}

html body #videos .bcr-latest-session-card .media-image img,
html body #videos .bcr-latest-session-card .media-image video,
html body .section-latest .bcr-latest-session-card .media-image img,
html body .section-latest .bcr-latest-session-card .media-image video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  image-rendering: auto !important;
}

html body #videos .bcr-latest-session-card .media-body,
html body .section-latest .bcr-latest-session-card .media-body {
  min-height: 116px !important;
  padding: 17px 18px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 11px !important;
  background: transparent !important;
}

html body #videos .bcr-latest-session-card .media-body h3,
html body .section-latest .bcr-latest-session-card .media-body h3 {
  margin: 0 !important;
  min-height: 2.5em !important;
  color: rgba(249, 246, 255, .95) !important;
  font-size: .92rem !important;
  line-height: 1.28 !important;
  letter-spacing: .045em !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  text-wrap: balance !important;
}

html body #videos .bcr-latest-session-card .tag-row,
html body .section-latest .bcr-latest-session-card .tag-row {
  min-height: 18px !important;
  margin: auto 0 0 !important;
  padding-top: 11px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  border-top: 1px solid rgba(220, 211, 255, .12) !important;
}

html body #videos .bcr-latest-session-card .tag-row .tag,
html body .section-latest .bcr-latest-session-card .tag-row .tag {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--bcr-surgical-muted) !important;
  font: 800 10px/1.2 var(--label, "Sora", sans-serif) !important;
  letter-spacing: .14em !important;
}

html body #videos .bcr-latest-session-card .tag-row .tag + .tag::before,
html body .section-latest .bcr-latest-session-card .tag-row .tag + .tag::before {
  content: "\00B7" !important;
  margin-inline: 2px !important;
  color: rgba(183, 156, 255, .75) !important;
}

html body #videos .bcr-latest-session-card:hover,
html body #videos .bcr-latest-session-card:focus-visible,
html body .section-latest .bcr-latest-session-card:hover,
html body .section-latest .bcr-latest-session-card:focus-visible {
  border-color: rgba(183, 156, 255, .45) !important;
  box-shadow: 0 22px 48px rgba(8, 4, 25, .30), 0 0 0 1px rgba(183, 156, 255, .12) !important;
}

/* Archive episode cards share the same quiet frame as Latest. The content and
   approved artwork stay untouched; only the metadata treatment is softened so
   the archive reads as one considered collection instead of a row of pills. */
html body .section-episodes .bcr-stable-episode-card {
  overflow: hidden !important;
  border: 1px solid rgba(220, 211, 255, .16) !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, rgba(24, 19, 49, .66), rgba(7, 6, 17, .80)) !important;
  box-shadow: 0 18px 42px rgba(2, 2, 10, .22), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
  transform: none !important;
}

html body .section-episodes .bcr-stable-episode-card .media-image {
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  border-radius: 17px 17px 0 0 !important;
}

html body .section-episodes .bcr-stable-episode-card .media-image img,
html body .section-episodes .bcr-stable-episode-card .media-image video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  image-rendering: auto !important;
}

html body .section-episodes .bcr-stable-episode-card .media-body {
  min-height: 116px !important;
  padding: 16px 17px 15px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  background: transparent !important;
}

html body .section-episodes .bcr-stable-episode-card .media-body h3 {
  margin: 0 !important;
  min-height: 2.55em !important;
  color: rgba(249, 246, 255, .95) !important;
  font-size: .88rem !important;
  line-height: 1.3 !important;
  letter-spacing: .045em !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  text-wrap: balance !important;
}

html body .section-episodes .bcr-stable-episode-card .tag-row {
  min-height: 18px !important;
  margin: auto 0 0 !important;
  padding-top: 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  border-top: 1px solid rgba(220, 211, 255, .12) !important;
}

html body .section-episodes .bcr-stable-episode-card .tag-row .tag {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--bcr-surgical-muted) !important;
  font: 800 10px/1.2 var(--label, "Sora", sans-serif) !important;
  letter-spacing: .14em !important;
}

html body .section-episodes .bcr-stable-episode-card .tag-row .tag + .tag::before {
  content: "\00B7" !important;
  margin-inline: 2px !important;
  color: rgba(183, 156, 255, .75) !important;
}

html body .section-episodes .bcr-stable-episode-card:hover,
html body .section-episodes .bcr-stable-episode-card:focus-visible {
  border-color: rgba(183, 156, 255, .42) !important;
  box-shadow: 0 22px 48px rgba(8, 4, 25, .30), 0 0 0 1px rgba(183, 156, 255, .12) !important;
}

/* Tracks are intentionally compact archive tiles. A restrained edge and
   fixed artwork ratio make long titles and varied cover art feel consistent. */
html body .section-tracks .track-grid {
  gap: clamp(16px, 1.55vw, 22px) !important;
}

html body .section-tracks .track-card {
  overflow: hidden !important;
  border: 1px solid rgba(220, 211, 255, .15) !important;
  border-radius: 17px !important;
  background: linear-gradient(145deg, rgba(24, 19, 49, .64), rgba(7, 6, 17, .80)) !important;
  box-shadow: 0 16px 36px rgba(2, 2, 10, .20), inset 0 1px 0 rgba(255, 255, 255, .05) !important;
  transform: none !important;
}

html body .section-tracks .track-thumb {
  aspect-ratio: 1 / 1 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

html body .section-tracks .track-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  image-rendering: auto !important;
}

html body .section-tracks .track-body {
  min-width: 0 !important;
  padding: 1px 0 1px !important;
  gap: 6px !important;
}

html body .section-tracks .track-label {
  color: rgba(183, 156, 255, .82) !important;
  letter-spacing: .14em !important;
}

html body .section-tracks .track-body h3 {
  min-width: 0 !important;
  color: rgba(249, 246, 255, .95) !important;
  letter-spacing: .045em !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
}

html body .section-tracks .track-body small {
  color: var(--bcr-surgical-muted) !important;
  letter-spacing: .04em !important;
}

html body .section-tracks .track-card:hover,
html body .section-tracks .track-card:focus-visible {
  border-color: rgba(183, 156, 255, .42) !important;
  box-shadow: 0 20px 44px rgba(8, 4, 25, .30), 0 0 0 1px rgba(183, 156, 255, .12) !important;
}

/* Cuts remain a distinct rail, with clear controls and measured breathing room. */
html body #bcr-shorts .bcr-shorts-row {
  display: flex !important;
  align-items: stretch !important;
  gap: clamp(16px, 1.7vw, 24px) !important;
  scroll-padding-inline: 10px !important;
  scrollbar-width: none !important;
}

html body #bcr-shorts .bcr-short-card {
  flex: 0 0 clamp(180px, 16vw, 224px) !important;
  width: clamp(180px, 16vw, 224px) !important;
  min-width: clamp(180px, 16vw, 224px) !important;
  border: 1px solid rgba(220, 211, 255, .17) !important;
  border-radius: 20px !important;
  box-shadow: 0 16px 38px rgba(2, 2, 10, .20), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
}

html body #bcr-shorts .bcr-shorts-controls button,
html body #videos .latest-inline-btn {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  border: 1px solid rgba(220, 211, 255, .28) !important;
  background: rgba(12, 11, 29, .76) !important;
  box-shadow: 0 10px 22px rgba(2, 2, 12, .24), inset 0 1px 0 rgba(255, 255, 255, .07) !important;
}

html body #bcr-shorts .bcr-shorts-controls button:hover,
html body #bcr-shorts .bcr-shorts-controls button:focus-visible,
html body #videos .latest-inline-btn:hover,
html body #videos .latest-inline-btn:focus-visible {
  border-color: var(--bcr-surgical-violet) !important;
  background: rgba(112, 79, 205, .28) !important;
}

/* Reminders stay useful but occupy less vertical space. */
@media (min-width: 900px) {
  html body #reminders .reminder-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(14px, 1.6vw, 22px) !important;
  }

  html body #reminders .reminder-card {
    min-height: 204px !important;
    padding: clamp(20px, 2vw, 26px) !important;
    border-radius: 20px !important;
  }
}

/* About, Connect, and Contact read as equal panels; social marks stay on one row. */
html body footer#contact .footer-grid {
  gap: clamp(14px, 1.8vw, 24px) !important;
}

@media (min-width: 900px) {
  html body footer#contact .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch !important;
  }

  html body footer#contact .footer-col {
    min-height: 220px !important;
    padding: 24px !important;
    border: 1px solid rgba(220, 211, 255, .14) !important;
    border-radius: 20px !important;
    background: linear-gradient(145deg, rgba(22, 17, 45, .64), rgba(7, 6, 17, .72)) !important;
    box-shadow: 0 18px 42px rgba(2, 2, 10, .18), inset 0 1px 0 rgba(255, 255, 255, .05) !important;
  }
}

html body footer#contact .footer-col > .footer-title {
  width: 100% !important;
  text-align: center !important;
  align-self: center !important;
}

html body footer#contact .footer-col:nth-of-type(2) {
  align-items: center !important;
}

html body footer#contact .footer-col:nth-of-type(2) .footer-links {
  width: 100% !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 14px !important;
}

html body footer#contact .footer-col:nth-of-type(2) > a.footer-link,
html body footer#contact .footer-col:nth-of-type(2) > a.footer-link.bcr-logo-only-link {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: transparent !important;
  font-size: 0 !important;
}

html body footer#contact .footer-col:nth-of-type(2) > a.footer-link:hover,
html body footer#contact .footer-col:nth-of-type(2) > a.footer-link:focus-visible {
  transform: translateY(-2px) !important;
  background: rgba(183, 156, 255, .10) !important;
}

html body footer#contact .footer-col:nth-of-type(2) .footer-link-icon,
html body footer#contact .footer-col:nth-of-type(2) .footer-link-icon img,
html body footer#contact .footer-col:nth-of-type(2) .footer-link svg {
  width: 25px !important;
  height: 25px !important;
  min-width: 25px !important;
  min-height: 25px !important;
}

@media (max-width: 720px) {
  html,
  html body {
    background-attachment: scroll !important;
  }

  html body #root::before {
    width: 132vw !important;
    height: 132vw !important;
    top: -62vw !important;
    right: -66vw !important;
    opacity: .18 !important;
  }

  html body #root::after {
    width: 118vw !important;
    height: 118vw !important;
    left: -58vw !important;
    bottom: -54vw !important;
    opacity: .13 !important;
  }

  /* Keep the destinations visible; allow a compact horizontal scroller only
     when a device is too narrow for all labels at once. */
  html body .bcr-mobile-primary-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 2px !important;
    width: calc(100% - 20px) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    white-space: nowrap !important;
  }

  html body .bcr-mobile-primary-nav::-webkit-scrollbar { display: none !important; }

  html body .bcr-mobile-primary-nav a {
    flex: 0 0 auto !important;
    min-height: 44px !important;
    padding-inline: 9px !important;
    font-size: 9px !important;
    letter-spacing: .04em !important;
  }

  html body #top .hero-text h1,
  html body #top .hero-content h1 {
    max-width: 100% !important;
    font-size: clamp(2rem, 10vw, 2.8rem) !important;
    line-height: .93 !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    text-wrap: balance !important;
  }

  html body #top .hero-text {
    max-width: 100% !important;
  }

  html body #videos .bcr-latest-session-card,
  html body .section-latest .bcr-latest-session-card {
    flex-basis: min(84vw, 348px) !important;
    width: min(84vw, 348px) !important;
    border-radius: 17px !important;
  }

  html body #videos .bcr-latest-session-card .media-body,
  html body .section-latest .bcr-latest-session-card .media-body {
    min-height: 108px !important;
    padding: 15px 16px 15px !important;
  }

  html body #videos .bcr-latest-session-card .media-body h3,
  html body .section-latest .bcr-latest-session-card .media-body h3 {
    font-size: .86rem !important;
    letter-spacing: .035em !important;
  }

  /* Keep the Latest rail controls visible on touch screens. They sit over the
     card row with a comfortable hit area; the row remains swipeable beneath. */
  html body #videos .latest-inline-nav {
    display: flex !important;
    visibility: visible !important;
    pointer-events: none !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    left: 4px !important;
    right: 4px !important;
  }

  html body #videos .latest-inline-nav button {
    display: inline-flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  html body #bcr-shorts .bcr-shorts-row {
    display: flex !important;
    gap: 16px !important;
    padding-inline: 2px !important;
  }

  html body #bcr-shorts .bcr-short-card {
    flex-basis: min(56vw, 220px) !important;
    width: min(56vw, 220px) !important;
    min-width: min(56vw, 220px) !important;
  }

  html body #bcr-shorts .bcr-shorts-controls button,
  html body #videos .latest-inline-btn {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
  }

  html body footer#contact .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  html body footer#contact .footer-col {
    min-height: 0 !important;
    padding: 20px !important;
    border-radius: 18px !important;
  }

  html body footer#contact .footer-col:nth-of-type(2) .footer-links {
    gap: 12px !important;
  }

  html body footer#contact .footer-col:nth-of-type(2) > a.footer-link,
  html body footer#contact .footer-col:nth-of-type(2) > a.footer-link.bcr-logo-only-link {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body #root::before,
  html body #root::after,
  html body #videos .bcr-latest-session-card,
  html body #bcr-shorts .bcr-short-card,
  html body footer#contact .footer-link {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}