/*
 * Small deck additions: demo layout, simple image sizing, and the color-coding
 * tokens used in equations and prose.
 * Typography and base colors live in css/themes/<theme>.css.
 */

/* ---- Color-coded math/prose tokens ---- */
/* These match the \drift / \diff / \ctrl / \lin / \nlin MathJax macros so
   the same colors apply whether a term appears inside math or as regular
   text.  Usage in markdown:  <span class="drift">drift</span> ↔ $\drift{b}$  */
.reveal .drift     { color: #0082c8; }
.reveal .diff      { color: #3cb44b; }
.reveal .ctrl      { color: #d7a411; }
.reveal .lin       { color: #f58230; }
.reveal .nlin      { color: #911eb4; }

/* ---- Text utilities ---- */
.reveal .extra-small {
  font-size: 0.58em;
}

/* ---- Markdown shorthand: blockquote = muted caption ----
   `>  caption text`  renders as muted small (replaces <p class="muted small">).
   `>> source url`    renders extra-small (replaces <p class="muted extra-small">).
   Override Reveal's default decorated blockquote: no border, no italic, no panel. */
.reveal blockquote {
  border: none;
  padding: 0;
  margin: 0.4em auto;
  background: none;
  box-shadow: none;
  color: var(--muted, #6b7280);
  font-size: var(--size-small, 0.72em);
  font-style: normal;
  font-weight: inherit;
  max-width: 85%;
  width: auto;
  text-align: center;
  quotes: none;
}
.reveal blockquote::before,
.reveal blockquote::after { content: none; }
.reveal blockquote p { display: inline; margin: 0; }
.reveal blockquote blockquote { font-size: 0.82em; margin: 0.25em auto; }

/* ---- Corner UI (fullscreen button) ---- */
.corner-ui {
  position: fixed;
  top: 8px;
  right: 12px;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 0.4em;
  opacity: 0.4;
}
.corner-ui:hover { opacity: 1; }
.corner-ui button {
  font: 16px/1 system-ui, sans-serif;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--rule, #e5e7eb);
  background: var(--bg, #fff);
  color: var(--ink, #111827);
  border-radius: 3px;
  cursor: pointer;
}
.corner-ui button:hover {
  border-color: var(--accent, #1d4e89);
  color: var(--accent, #1d4e89);
}
@media print { .corner-ui { display: none; } }

/* ---- Slide layout ---- */
.reveal .slides section {
  padding-top: 0.8em;
}

.reveal .slides section:first-child {
  padding-top: 0;
}

/* ---- Simple slide media ---- */
.reveal img {
  max-width: 100%;
  max-height: 76vh;
  object-fit: contain;
}

.reveal .image-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
}

.reveal .image-row > * {
  flex: 1 1 0;
  min-width: 0;
}

.reveal .image-row img {
  max-height: 58vh;
}

.reveal figure {
  margin: 0;
}

.reveal figcaption {
  margin-top: 0.4em;
  color: var(--muted, #6b7280);
  font-size: var(--size-small, 0.72em);
}

.reveal mjx-container[display="true"] {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.reveal ul,
.reveal ol {
  display: inline-block;
  text-align: left;
}

.reveal .concept-triad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7em;
  max-width: 92%;
  margin: 0.75em auto 0.35em;
  align-items: stretch;
}

.reveal .concept-triad > div {
  border-top: 3px solid var(--accent, #1d4e89);
  padding: 0.45em 0.35em 0;
  text-align: center;
}

.reveal .concept-triad strong {
  display: block;
  font-size: 0.62em;
  line-height: 1.15;
}

.reveal .concept-triad span {
  display: block;
  margin-top: 0.25em;
  color: var(--muted, #6b7280);
  font-size: 0.46em;
  line-height: 1.2;
}

.reveal .center-emphasis {
  margin-top: 0.55em;
  text-align: center;
  font-size: 0.72em;
  font-weight: 650;
  color: var(--accent, #1d4e89);
}


/* ---- Demo controls ---- */
.reveal section[data-demo] {
  font-size: 0.82em;
}

.reveal section[data-demo] h2 {
  margin-bottom: 0.2em;
}

.reveal section[data-demo] p {
  margin: 0.25em 0;
}

.reveal .demo-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55em 0.8em;
  align-items: center;
  justify-content: center;
  margin: 0.35em 0 0.55em;
  font-size: 0.46em;
}
.reveal .demo-controls label {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}
.reveal .demo-controls label.wide input[type="range"] { width: 180px; }
.reveal .demo-controls button {
  font: inherit;
  padding: 0.3em 0.9em;
  border-radius: 4px;
  border: 1px solid var(--accent, #2a6ef5);
  background: var(--bg, #fff);
  color: var(--accent, #2a6ef5);
  cursor: pointer;
}
.reveal .demo-controls button:hover { background: var(--accent, #2a6ef5); color: #fff; }

.reveal .radio-group {
  border: none;
  padding: 0;
  margin: 0;
  display: inline-flex;
  gap: 0.8em;
}
.reveal .radio-group label { cursor: pointer; }

/* ---- Demo canvases ---- */
.reveal .demo-canvas { display: block; margin: 0 auto; max-width: 100%; }

#maxent, #maxent-rank { width: 100%; height: 310px; }
#maxent svg, #maxent-rank svg { width: 100%; height: 100%; }
#maxent .axis path, #maxent .axis line,
#maxent-rank .axis path, #maxent-rank .axis line { stroke: var(--muted, #9ca3af); }
#maxent .axis text, #maxent-rank .axis text { fill: var(--ink-soft, #374151); font-size: 9px; }
#maxent .candidate, #maxent-rank .candidate { fill: var(--accent, #2a6ef5); fill-opacity: 0.35; stroke: var(--accent, #2a6ef5); stroke-width: 1.2; }
#maxent .gaussian, #maxent-rank .gaussian { fill: none; stroke: var(--warn, #ef4444); stroke-width: 2; stroke-dasharray: 4 3; }
#maxent .particle, #maxent-rank .particle { fill: var(--accent, #2a6ef5); fill-opacity: 0.65; }
#maxent .entropy-text, #maxent-rank .entropy-text { font-size: 10px; fill: var(--ink, #111827); }

#histogram { width: 100%; height: 310px; }
#histogram svg { width: 100%; height: 100%; }
#histogram .bar { fill: var(--accent, #2a6ef5); fill-opacity: 0.7; }
#histogram .axis path, #histogram .axis line { stroke: var(--muted, #9ca3af); }
#histogram .axis text { fill: var(--ink-soft, #374151); font-size: 9px; }
#histogram .pdf { fill: none; stroke: var(--warn, #ef4444); stroke-width: 2; }

.reveal .split {
  display: flex;
  gap: 0.65em;
  justify-content: center;
  align-items: stretch;
}
.reveal .split .left { flex: 1.6; }
.reveal .split .right { flex: 1; }
.reveal .split canvas { width: 100%; height: auto; max-height: 42vh; border-radius: 4px; }

#wiener-ts { background: var(--bg, #fafbff); }
#wiener-2d { background: #0b1020; }
#scaling-full { background: var(--bg, #fafbff); }
#scaling-zoom { background: var(--bg, #fafbff); }
#h-scaling-full { background: var(--bg, #fafbff); }
#h-scaling-zoom { background: var(--bg, #fafbff); }
#heat-dens { background: var(--bg, #fafbff); }
#heat-grow { background: var(--bg, #fafbff); }
#fbm-path { background: var(--bg, #fafbff); }
#fbm-psd { background: var(--bg, #fafbff); }
#fractal-zoom-canvas { background: var(--bg, #fafbff); width: 100%; max-width: 940px; height: auto; border-radius: 4px; }
#ou-canvas { background: var(--bg, #fafbff); width: 100%; max-width: 840px; height: auto; border-radius: 4px; }

/* ---- Title slide ---- */
.reveal .slides section:first-child.present {
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.reveal .title-meta { margin-top: 1.5em; }
.reveal .title-meta p { margin: 0.4em 0; }
/* Selector specificity must beat `.reveal img.slide-img` so the auto-tagged
   shadow rule doesn't apply to the title logo. */
.reveal img.title-logo {
  display: block;
  margin: 2em auto 0;
  max-height: 120px;
  box-shadow: none;
  border-radius: 0;
}