/* User Provided Stylesheet */

/**
 * Lecture “slide” pages: one viewport height per Marp/Myst slide, scroll-snap for paging.
 * MyST watermark: `aima-myst-branding.mjs` strips the “Made with MyST” nav link; CSS below is a fallback.
 * TOC: `aima-toc-drawer.mjs` — left nav menu opens **book** TOC from the left; on lecture pages the
 * extra button after the theme toggle opens **this lecture** outline from the right (`#aima-lecture-toc-panel`).
 * Nav controls + timeline: `aima-lecture-chrome.mjs`.
 */

a.myst-made-with-myst {
  display: none !important;
}

/* Hide the BASE_URL warning modal - CSS loaded successfully */
#myst-no-css {
  display: none !important;
}

/* --- Lecture pages: icon-only search (override MyST sm:w-64 + visible “Search” / ⌘K row) --- */
html.aima-lecture-deck .myst-top-nav button.myst-search-bar {
  width: 2.5rem !important;
  min-width: 2.5rem !important;
  max-width: 2.5rem !important;
  flex: 0 0 2.5rem !important;
  padding: 0 !important;
  gap: 0 !important;
  justify-content: center !important;
  overflow: hidden !important;
}

html.aima-lecture-deck .myst-top-nav button.myst-search-bar > *:not(svg) {
  display: none !important;
}

html.aima-lecture-deck .myst-top-nav button.myst-search-bar svg {
  width: 1.25rem !important;
  height: 1.25rem !important;
  max-width: none !important;
  padding: 0 !important;
}

/* Slide index “3 / 24” — Tailwind dark: on injected markup may not track html.dark */
html.aima-lecture-deck #aima-lecture-slide-index {
  color: rgb(87 83 78) !important;
}

html.dark body.aima-lecture-deck #aima-lecture-slide-index,
html[class~='dark'] body.aima-lecture-deck #aima-lecture-slide-index,
.dark body.aima-lecture-deck #aima-lecture-slide-index {
  color: rgb(231 229 228) !important;
}

/* --- Lecture: Captions link sits with autoplay; match header row alignment --- */
.aima-lecture-captions-link[hidden] {
  display: none !important;
}

/* --- Book TOC: left drawer (left hamburger). Lecture TOC: right drawer (right hamburger, lecture pages only). --- */

.aima-toc-scrim {
  position: fixed;
  inset: 0;
  z-index: 199;
  background: rgba(0, 0, 0, 0.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

html.aima-toc-drawer-layout body.aima-book-toc-open .aima-toc-scrim,
html.aima-toc-drawer-layout body.aima-lecture-toc-open .aima-toc-scrim {
  opacity: 1;
  pointer-events: auto;
}

/* Site-wide book outline — slides in from the LEFT */
html.aima-toc-drawer-layout .myst-primary-sidebar {
  left: 0 !important;
  right: auto !important;
  top: 60px !important;
  width: min(21rem, 100vw) !important;
  max-width: 21rem !important;
  height: calc(100dvh - 60px) !important;
  max-height: calc(100dvh - 60px) !important;
  z-index: 200 !important;
  display: block !important;
  pointer-events: auto !important;
  transform: translate3d(-100%, 0, 0);
  transition: transform 0.22s ease;
  will-change: transform;
  background: transparent !important;
  box-shadow: none;
  overflow: hidden;
}

html.aima-toc-drawer-layout body.aima-book-toc-open .myst-primary-sidebar {
  transform: translate3d(0, 0, 0);
  box-shadow: 10px 0 36px rgba(0, 0, 0, 0.12);
}

html.aima-toc-drawer-layout .myst-primary-sidebar-pointer {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  background: var(--myst-color-background, rgb(255 255 255));
  border-right: 1px solid color-mix(in srgb, currentColor 10%, transparent);
  overflow: hidden;
}

/* Per-lecture slide list — slides in from the RIGHT */
.aima-lecture-toc-panel {
  position: fixed;
  top: 60px;
  right: 0;
  width: min(21rem, 100vw);
  max-width: 21rem;
  height: calc(100dvh - 60px);
  max-height: calc(100dvh - 60px);
  z-index: 200;
  transform: translate3d(100%, 0, 0);
  transition: transform 0.22s ease;
  will-change: transform;
  background: transparent;
  pointer-events: auto;
}

body.aima-lecture-toc-open .aima-lecture-toc-panel {
  transform: translate3d(0, 0, 0);
  box-shadow: -10px 0 36px rgba(0, 0, 0, 0.12);
}

.aima-lecture-toc-panel-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--myst-color-background, rgb(255 255 255));
  border-left: 1px solid color-mix(in srgb, currentColor 10%, transparent);
  overflow: hidden;
}

html.dark .aima-lecture-toc-panel-inner,
.dark .aima-lecture-toc-panel-inner {
  background: rgb(28 25 23);
}

.aima-lecture-toc-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* Far-right lecture outline button (after theme toggle) */
#aima-lecture-toc-open-btn {
  flex-shrink: 0;
}

html.aima-toc-drawer-layout .myst-primary-sidebar-toc,
html.aima-toc-drawer-layout .myst-primary-sidebar-nav {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
}

/* Dark mode: match book-theme stone background */
html.aima-toc-drawer-layout.dark .myst-primary-sidebar-pointer,
html.dark.aima-toc-drawer-layout .myst-primary-sidebar-pointer {
  background: rgb(28 25 23);
}

html.aima-lecture-deck,
body.aima-lecture-deck {
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

/* Main article column: snap each slide block */
body.aima-lecture-deck main article article,
body.aima-lecture-deck main article {
  scroll-snap-type: y mandatory;
}

/* Slide pages: viewport minus header (60px) */
.aima-slide-page {
  height: calc(100vh - 60px);
  height: calc(100dvh - 60px);
  min-height: calc(100vh - 60px);
  min-height: calc(100dvh - 60px);
  max-height: calc(100vh - 60px);
  max-height: calc(100dvh - 60px);
  box-sizing: border-box;
  padding: 0.5rem 1rem 2.5rem;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}

/* Slide content area - scrollable if content overflows */
.aima-slide-page > *:not(.slide-tts) {
  flex-shrink: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Hide scrollbar for slide content (clean presentation look) */
.aima-slide-page > *:not(.slide-tts)::-webkit-scrollbar {
  display: none;
}
.aima-slide-page > *:not(.slide-tts) {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Prevent body scroll between slides - only snap navigation */
body.aima-lecture-deck {
  overscroll-behavior-y: contain;
}

/* Each slide is isolated - no peeking at adjacent slides */
body.aima-lecture-deck main article {
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-y: contain;
}

/* Header: slide Prev/Next + Autoplay + captions (left); timeline grows on the same row (divider on controlsRow) */
.aima-lecture-controls-row {
  border-right: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  padding-right: 0.35rem;
  margin-right: 0.15rem;
}

/* Shares one row with search/theme: grow into free space so timeline + controls stay in the bar */
#aima-lecture-header-wrap.aima-lecture-header-audio,
.aima-lecture-header-audio {
  flex: 1 1 14rem;
  min-width: 0;
  max-width: min(94vw, 64rem);
  position: relative;
  z-index: 20;
}

html.aima-lecture-deck .myst-top-nav-bar > div:last-child {
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.aima-lecture-header-audio .aima-autoplay-btn[aria-pressed="true"] {
  background: color-mix(in srgb, #2563eb 18%, transparent);
  border-color: #3b82f6;
  color: #1e3a8a;
}
html.dark .aima-lecture-header-audio .aima-autoplay-btn[aria-pressed="true"] {
  color: #dbeafe;
  border-color: #60a5fa;
  background: color-mix(in srgb, #3b82f6 30%, transparent);
}

/* YouTube-style composite timeline: one rail, tick at each slide’s narration (aima-lecture-chrome) */
.aima-lecture-timeline[hidden] {
  display: none !important;
}

.aima-lecture-timeline-inner {
  min-height: 1.45rem;
}

.aima-lecture-timeline-rail {
  position: relative;
  height: 1.4rem;
  min-width: 5rem;
  margin-top: 0;
}

.aima-lecture-timeline-ticks {
  position: absolute;
  inset: 0 0 auto 0;
  height: 0.5rem;
  z-index: 1;
  pointer-events: none;
}

.aima-lecture-timeline-tick {
  position: absolute;
  top: 0.05rem;
  left: 0;
  width: 2px;
  height: 0.4rem;
  background: color-mix(in srgb, currentColor 32%, #737373);
  border-radius: 1px;
  transform: translateX(-50%);
}

html.dark .aima-lecture-timeline-tick {
  background: color-mix(in srgb, currentColor 50%, #a8a29e);
}

.aima-lecture-timeline-track {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.1rem;
  height: 0.35rem;
  border-radius: 9999px;
  background: color-mix(in srgb, currentColor 10%, #e7e5e4);
  z-index: 0;
  overflow: hidden;
}

html.dark .aima-lecture-timeline-track {
  background: color-mix(in srgb, currentColor 18%, #1c1917);
}

.aima-lecture-timeline-fill {
  height: 100%;
  width: 0%;
  border-radius: 9999px;
  background: #dc2626;
  box-sizing: border-box;
  pointer-events: none;
}

.aima-lecture-timeline-seek {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  height: 1.3rem;
  margin: 0;
  padding: 0;
  z-index: 2;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  accent-color: #dc2626;
}

.aima-lecture-timeline-seek:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.aima-lecture-timeline-seek::-webkit-slider-runnable-track {
  height: 0.4rem;
  background: transparent;
  border: none;
}

.aima-lecture-timeline-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 0.6rem;
  height: 0.6rem;
  margin-top: -0.1rem;
  border-radius: 9999px;
  background: #dc2626;
  box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 15%, #fff);
}

.aima-lecture-timeline-seek::-moz-range-track {
  background: transparent;
  border: none;
}

.aima-lecture-timeline-seek::-moz-range-thumb {
  width: 0.6rem;
  height: 0.6rem;
  border: none;
  border-radius: 9999px;
  background: #dc2626;
  box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 15%, #fff);
}

/* In-slide TTS: visible audio player on each slide */
body.aima-lecture-deck .aima-slide-page .slide-tts {
  display: block;
  width: 100%;
  max-width: 600px;
  margin: 0.5rem 0 1rem;
}

body.aima-lecture-deck .aima-slide-page .slide-tts audio {
  width: 100%;
  height: 40px;
  border-radius: 8px;
  background: var(--myst-color-background, #f1f5f9);
}

/* Hide all anchors inside slide TTS blocks — MyST/React may re-render “Listen / Captions” after SSR */
body.aima-lecture-deck .aima-slide-page .slide-tts a {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (max-width: 640px) {
  .aima-lecture-header-audio {
    max-width: min(92vw, 100%);
  }

  .aima-lecture-controls-row .aima-autoplay-btn {
    padding-left: 0.35rem;
    padding-right: 0.35rem;
  }
}