/* Hide mermaid source code under rendered diagrams.
   The :not(:has(..)) prevents cascade to ancestor blocks -
   only the innermost ls-block owning .dac-container matches. */
.ls-block:has(.dac-container):not(:has(.block-children .dac-container)) .block-children .extensions__code {
  display: none !important;
}

/* ============================================================
   PRESENTATION MODE — custom slide engine (custom.js)
   Activated via html.ls-pres-mode class.
   Each top-level .ls-block becomes a full-viewport slide.
   ============================================================ */

/* --- Fullscreen takeover ----------------------------------- */
html.ls-pres-mode {
  overflow: hidden !important;
}

html.ls-pres-mode body {
  overflow: hidden !important;
}

/* Hide all Logseq chrome */
html.ls-pres-mode .cp__header,
html.ls-pres-mode #left-sidebar,
html.ls-pres-mode .left-sidebar-inner,
html.ls-pres-mode .cp__right-sidebar,
html.ls-pres-mode .cp__right-sidebar-inner,
html.ls-pres-mode #search,
html.ls-pres-mode .page-title,
html.ls-pres-mode .breadcrumb,
html.ls-pres-mode .page-hierarchy,
html.ls-pres-mode .page-properties {
  display: none !important;
}

/* Fill viewport */
html.ls-pres-mode .cp__sidebar-main-content,
html.ls-pres-mode #main-container,
html.ls-pres-mode #main-content-container {
  margin: 0 !important;
  padding: 0 !important;
  max-width: 100vw !important;
  width: 100vw !important;
  height: 100vh !important;
}

/* --- Hide all top-level blocks, show only active ----------- */
html.ls-pres-mode .page-blocks-inner > .ls-block,
html.ls-pres-mode .page > .relative > .ls-block,
html.ls-pres-mode .blocks-container > .ls-block {
  display: none !important;
}

html.ls-pres-mode .ls-block.ls-pres-active {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  padding: 3vh 5vw !important;
  overflow-y: auto !important;
  background: var(--ls-primary-background-color, #002b36) !important;
  box-sizing: border-box !important;
}

/* --- Hide outliner artifacts in slides --------------------- */
html.ls-pres-mode .ls-pres-active .bullet-container,
html.ls-pres-mode .ls-pres-active .bullet,
html.ls-pres-mode .ls-pres-active .block-children-left-border,
html.ls-pres-mode .ls-pres-active .block-properties,
html.ls-pres-mode .ls-pres-active .block-properties-inner,
html.ls-pres-mode .ls-pres-active .collapsed-indicator,
html.ls-pres-mode .ls-pres-active .block-control,
html.ls-pres-mode .ls-pres-active .block-control-wrap,
html.ls-pres-mode .ls-pres-active [class*="block-control"],
html.ls-pres-mode .ls-pres-active .page-property-key,
html.ls-pres-mode .ls-pres-active .page-properties {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Hide collapsed sections — SPA sets data-collapsed to a DB-id, not "true" */
html.ls-pres-mode .ls-pres-active .ls-block[data-collapsed],
html.ls-pres-mode .ls-pres-active .ls-block.collapsed {
  display: none !important;
}

/* JS-tagged hidden blocks (collapsed section headers detected at runtime) */
html.ls-pres-mode .ls-pres-active .ls-pres-hidden {
  display: none !important;
}

/* Hide Logseq page-ref brackets in slides */
html.ls-pres-mode .ls-pres-active .bracket,
html.ls-pres-mode .ls-pres-active .page-reference .bracket {
  display: none !important;
  font-size: 0 !important;
}

/* Hide property lines rendered as inline text (e.g. "subtitle:: ...") */
html.ls-pres-mode .ls-pres-active .page-property,
html.ls-pres-mode .ls-pres-active .block-property {
  display: none !important;
}

/* Flatten indentation for slides */
html.ls-pres-mode .ls-pres-active .ls-block {
  margin-left: 0 !important;
}

html.ls-pres-mode .ls-pres-active .block-children {
  margin-left: 0.6em !important;
}

/* ---- Typography ------------------------------------------- */
html.ls-pres-mode .ls-pres-active h1 {
  font-size: 2.4em !important;
  margin-bottom: 0.4em !important;
  border-bottom: 2px solid rgba(255,255,255,0.15);
  padding-bottom: 0.3em;
  line-height: 1.2 !important;
}

html.ls-pres-mode .ls-pres-active h2 {
  font-size: 1.7em !important;
  margin-bottom: 0.35em !important;
  line-height: 1.25 !important;
}

html.ls-pres-mode .ls-pres-active h3 {
  font-size: 1.3em !important;
  margin-bottom: 0.3em !important;
  line-height: 1.3 !important;
}

html.ls-pres-mode .ls-pres-active p,
html.ls-pres-mode .ls-pres-active li,
html.ls-pres-mode .ls-pres-active td,
html.ls-pres-mode .ls-pres-active th {
  font-size: 0.85em !important;
  line-height: 1.55 !important;
}

/* Tighter list spacing */
html.ls-pres-mode .ls-pres-active ul,
html.ls-pres-mode .ls-pres-active ol {
  margin: 0.2em 0 !important;
}

html.ls-pres-mode .ls-pres-active li {
  margin-bottom: 0.15em !important;
}

/* Hierarchical list markers */
html.ls-pres-mode .ls-pres-active ol ol {
  list-style-type: upper-roman;
}

html.ls-pres-mode .ls-pres-active ol ol ol {
  list-style-type: lower-latin;
}

html.ls-pres-mode .ls-pres-active ul ul {
  list-style-type: circle;
}

html.ls-pres-mode .ls-pres-active ul ul ul {
  list-style-type: square;
}

/* Bold = amber, italic = blue — visible on projection */
html.ls-pres-mode .ls-pres-active strong {
  color: #ffcc80;
}

html.ls-pres-mode .ls-pres-active em {
  color: #b3e5fc;
}

/* ---- Images ----------------------------------------------- */
html.ls-pres-mode .ls-pres-active img {
  max-height: 55vh !important;
  max-width: 90% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block;
  margin: 0.5em auto !important;
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

/* Hero slides (JS-detected): image/video fills available space */
html.ls-pres-mode .ls-pres-active.ls-pres-hero img {
  max-height: 80vh !important;
  max-width: 98% !important;
}

html.ls-pres-mode .ls-pres-active.ls-pres-hero video {
  max-height: 80vh !important;
  max-width: 98% !important;
}

/* ---- Videos ----------------------------------------------- */
html.ls-pres-mode .ls-pres-active video {
  max-height: 55vh !important;
  max-width: 90% !important;
  width: auto !important;
  display: block;
  margin: 0.5em auto !important;
  border-radius: 6px;
}

/* ---- iframes (live demos, embeds) ------------------------- */
html.ls-pres-mode .ls-pres-active iframe {
  width: 100% !important;
  height: 50vh !important;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  margin: 0.5em 0 !important;
  pointer-events: auto !important;
}

/* ---- Embedded content ({{embed}}) ------------------------- */
html.ls-pres-mode .ls-pres-active .embed-block,
html.ls-pres-mode .ls-pres-active .embedded {
  max-height: 60vh !important;
  overflow: auto;
}

/* ---- Tables ----------------------------------------------- */
html.ls-pres-mode .ls-pres-active table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 0.72em !important;
  margin: 0.5em 0 !important;
}

html.ls-pres-mode .ls-pres-active th {
  background: rgba(255,255,255,0.08) !important;
  font-weight: 700 !important;
  text-align: left !important;
  padding: 0.4em 0.6em !important;
  border-bottom: 2px solid rgba(255,255,255,0.2) !important;
}

html.ls-pres-mode .ls-pres-active td {
  padding: 0.3em 0.6em !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

html.ls-pres-mode .ls-pres-active tr:hover td {
  background: rgba(255,255,255,0.03);
}

/* ---- Code blocks ------------------------------------------ */
html.ls-pres-mode .ls-pres-active pre {
  width: 100% !important;
  max-height: 45vh !important;
  overflow: auto !important;
  font-size: 0.6em !important;
  line-height: 1.45 !important;
  border-radius: 6px !important;
  padding: 0.8em !important;
  margin: 0.4em 0 !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

html.ls-pres-mode .ls-pres-active code {
  font-size: 0.85em !important;
  background: rgba(255,255,255,0.06);
  padding: 0.1em 0.3em;
  border-radius: 3px;
}

html.ls-pres-mode .ls-pres-active pre code {
  background: transparent;
  padding: 0;
}

/* ---- Block quotes / citations ----------------------------- */
html.ls-pres-mode .ls-pres-active blockquote {
  border-left: 4px solid #ffcc80 !important;
  padding: 0.5em 1em !important;
  margin: 0.5em 0 !important;
  font-style: italic;
  background: rgba(255,204,128,0.05);
  border-radius: 0 6px 6px 0;
  font-size: 0.78em !important;
}

/* ---- Horizontal rules ------------------------------------- */
html.ls-pres-mode .ls-pres-active hr {
  border: none !important;
  height: 2px !important;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.2) 20%,
    rgba(255,255,255,0.2) 80%,
    transparent
  ) !important;
  margin: 1em 0 !important;
}

/* ---- Links ------------------------------------------------ */
html.ls-pres-mode .ls-pres-active a {
  color: #82b1ff !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
  pointer-events: auto !important;
}

/* ---- Mermaid diagrams ------------------------------------- */
html.ls-pres-mode .ls-pres-active .mermaid,
html.ls-pres-mode .ls-pres-active .dac-container {
  max-height: 55vh !important;
  overflow: auto;
  display: flex;
  justify-content: center;
}

html.ls-pres-mode .ls-pres-active .mermaid svg {
  max-height: 50vh !important;
  max-width: 100% !important;
  height: auto !important;
}

/* ============================================================
   Controls overlay (injected by custom.js)
   ============================================================ */
#ls-pres-controls {
  position: fixed;
  bottom: 1.5em;
  right: 1.5em;
  z-index: 10001;
  display: flex;
  align-items: center;
  gap: 0.5em;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 0.4em 0.8em;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1);
  opacity: 0.35;
  transition: opacity 0.3s;
  pointer-events: auto !important;
}

#ls-pres-controls:hover {
  opacity: 1;
}

#ls-pres-counter {
  color: rgba(255,255,255,0.8);
  font-size: 0.85em;
  font-variant-numeric: tabular-nums;
  min-width: 3.5em;
  text-align: center;
}

#ls-pres-controls button {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.8);
  font-size: 1.1em;
  cursor: pointer;
  border-radius: 4px;
  padding: 0.15em 0.5em;
  line-height: 1;
  transition: background 0.2s, border-color 0.2s;
}

#ls-pres-controls button:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.4);
}

/* ============================================================
   Blackout mode  (press 'b')
   ============================================================ */
html.ls-pres-blackout .ls-pres-active {
  background: #000 !important;
}

html.ls-pres-blackout .ls-pres-active > * {
  visibility: hidden !important;
}

html.ls-pres-blackout #ls-pres-controls {
  opacity: 0.15;
}