/* Shared reveal.js overrides for CS 486/686 lecture decks.
   Loaded BEFORE each lecture's lecture-specific custom.css so per-lecture
   rules can override these. Contains the generic typography, layout
   helpers, link styling, title-slide centering, and the persistent
   "Course page" corner widget. */

/* Tighten default heading sizes - reveal.js's defaults are too big for
   academic slides. Also strip the white theme's default `text-transform:
   uppercase` so math variables (b, m, d, n_k, ...) stay lowercase in
   slide titles. */
.reveal h1 { font-size: 1.6em; text-transform: none; }
.reveal h2 { font-size: 1.2em; line-height: 1.2; margin-bottom: 0.6em; text-transform: none; }
.reveal h3 { font-size: 1.1em; text-transform: none; }
.reveal h4, .reveal h5, .reveal h6 { text-transform: none; }
.reveal p, .reveal li { font-size: 0.85em; line-height: 1.4; }
.reveal li { margin-bottom: 0.4em; }

/* Lists shouldn't be centered, and shouldn't be allowed to overflow. */
.reveal ul, .reveal ol { display: block; margin-left: 1.2em; max-width: 100%; }
.reveal .slides section > * { max-width: 100%; }

/* Vertical centering for short hero slides (title, learning goals, etc.).
   NOTE: We do NOT override reveal.js's `transform` (carries the scale-to-
   viewport factor) or `top` (carries the computed position). Instead, make
   the section a flex column so children center within their given space. */
.reveal section.center-slide {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
}

/* Universal text wrapping defense. Long titles / long kv-grid values
   were overflowing the slide's right edge. */
.reveal h1, .reveal h2, .reveal h3,
.reveal p, .reveal li, .reveal dd, .reveal dt,
.reveal a, .reveal span, .reveal strong, .reveal em {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Footnote-style citations. In-flow (not absolute) with a top separator
   so they never collide with the bullet list above. */
.reveal .footnote {
  margin-top: 1.2em;
  padding-top: 0.5em;
  border-top: 1px solid #d1d5db;
  font-size: 0.5em;
  color: #888;
  text-align: left;
  line-height: 1.5;
}
.reveal .footnote a { font-size: inherit; }

/* "Now / Research / Before" style key-value blocks. */
.reveal .kv { display: grid; grid-template-columns: 7em 1fr; gap: 0.25em 0.8em; text-align: left; }
.reveal .kv dt { font-weight: bold; color: #1d4ed8; }
.reveal .kv dd { margin: 0; }

/* Two-column CSS-columns layout for long lists (TAs, module bullets). */
.reveal .two-col-list { column-count: 2; column-gap: 2em; text-align: left; }
.reveal .two-col-list li { break-inside: avoid; }

/* Two-column flex layout (image left + bullets right, side-by-side blocks). */
.reveal .two-col {
  display: flex;
  gap: 1.5em;
  align-items: flex-start;
  text-align: left;
}
.reveal .two-col > div { min-width: 0; }
.reveal .two-col img { width: 100%; border-radius: 4px; }

/* Italic-gray disclaimer sitting flush under the slide title. */
.reveal .opinion-disclaimer {
  font-style: italic;
  color: #6b7280;
  font-size: 0.65em;
  margin-top: -0.3em;
  margin-bottom: 0.5em;
}

/* Blue callout for an opinion / focal sentence on a slide. */
.reveal .opinion-callout {
  background: #eff6ff;
  border-left: 5px solid #1d4ed8;
  padding: 0.7em 1em;
  font-size: 0.85em;
  text-align: left;
  margin-top: 1.2em;
  color: #1e3a8a;
}
.reveal .opinion-callout strong { color: #1d4ed8; }

/* Credit avatars (tiny circular photos inline with the slide-credit line). */
.reveal .credit-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
  margin: 0 0.15em 0 0.4em;
  border: 1px solid #ddd;
}

/* Dense slides (topic outlines, "Who am I?") get smaller text. */
.reveal .dense p,
.reveal .dense li { font-size: 0.7em; line-height: 1.3; }
.reveal .dense h2 { font-size: 1.1em; }

/* Image sizing helpers - max-height in pixels (NOT vh) so they are
   measured against the 720-px slide canvas, not the browser viewport. */
.reveal img.wide { max-width: 90%; max-height: 280px; }
.reveal img.medium { max-width: 55%; max-height: 230px; }
.reveal img.narrow { max-width: 28%; max-height: 190px; }

/* Slide footer with course/lecture info. */
.reveal .slide-footer {
  position: absolute;
  bottom: 0.5em;
  left: 0.5em;
  font-size: 0.45em;
  color: #888;
}

/* Tiny photo credit caption. */
.reveal .photo-credit {
  font-size: 0.5em;
  color: #888;
  margin-top: 0.2em;
}

/* Hyperlinks - subtle blue, with hover. */
.reveal a { color: #1d4ed8; text-decoration: none; border-bottom: 1px dotted #1d4ed8; }
.reveal a:hover { color: #1e40af; border-bottom-style: solid; }

/* Title slide centering. */
.reveal .title-slide { text-align: center; }
.reveal .title-slide .course-title {
  font-size: 1.3em;
  color: #1d4ed8;
  font-weight: bold;
  margin-bottom: 0.5em;
  line-height: 1.2;
}
.reveal .title-slide .author { font-size: 1em; margin-top: 1em; }
.reveal .title-slide .credit { font-size: 0.55em; color: #666; margin-top: 2em; }

/* Persistent "back to course page" link in the top-left corner.
   Lives outside `.reveal` in the body so it doesn't move with slides.
   Icon + label always visible. Hidden when the deck is in true browser
   fullscreen (body gets `is-fullscreen` from JS on `fullscreenchange`)
   and in reveal.js's `?print-pdf` export so it doesn't end up in handouts. */
.course-home-link {
  position: fixed;
  top: 10px;
  left: 14px;
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  line-height: 1;
  color: #4b5563;
  text-decoration: none;
  border: none;
  border-radius: 6px;
  background: transparent;
  opacity: 0.75;
  transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.course-home-link svg {
  display: block;
  stroke-width: 1.8;
}
.course-home-link .course-home-label {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.course-home-link:hover {
  opacity: 1;
  color: #1d4ed8;
  background-color: rgba(29, 78, 216, 0.07);
}
body.is-fullscreen .course-home-link { display: none; }
body.print-pdf .course-home-link { display: none; }

/* ============================================================
   Shared patterns for search lectures (originally lived in L2,
   promoted here so L3+ can reuse without duplication).
   ============================================================ */

/* 8-puzzle CSS grid (reusable for initial / goal states). */
.reveal .puzzle-wrap { display: flex; gap: 2em; justify-content: center; align-items: flex-start; }
.reveal .puzzle-block { text-align: center; }
.reveal .puzzle-label { font-size: 0.7em; font-weight: bold; margin-bottom: 0.3em; color: #1f2937; }
.reveal .puzzle-grid {
  display: inline-grid;
  grid-template-columns: repeat(3, 48px);
  grid-template-rows: repeat(3, 48px);
  border: 2px solid #111827;
  background: #111827;
  gap: 1px;
}
.reveal .puzzle-grid div {
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2em;
  font-weight: 600;
  color: #111827;
}
.reveal .puzzle-grid div.empty { background: #f3f4f6; }

/* Definition / boxed block. */
.reveal .defbox {
  border: 1px solid #cbd5e1;
  border-left: 5px solid #1d4ed8;
  background: #f8fafc;
  padding: 0.7em 1em;
  text-align: left;
  margin: 0.4em 0;
}
.reveal .defbox h3 {
  font-size: 0.9em;
  margin: 0 0 0.4em 0;
  color: #1d4ed8;
}
.reveal .defbox ul { margin: 0.2em 0 0.2em 1em; }
.reveal .defbox li { font-size: 0.8em; line-height: 1.3; margin-bottom: 0.2em; }

/* Search trace SVG layout. Single SVG with reveal.js fragments. */
.reveal .search-trace { max-width: 760px; margin: 0.3em auto; text-align: center; }
.reveal .frontier-bar {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.7em;
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 0.3em 0.7em;
  margin-bottom: 0.35em;
  text-align: left;
  color: #111827;
  min-height: 1.3em;
}
.reveal .frontier-bar strong { color: #6b7280; margin-right: 0.4em; }
.reveal .frontier-bar .frontier-step { display: none; }
.reveal .frontier-bar .frontier-step.current-fragment { display: inline; }

/* Trace SVG defaults. Hard max-height so the tree never overflows the
   slide canvas regardless of viewBox aspect ratio. */
.reveal .search-trace svg {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: 420px;
  height: auto;
}
.reveal .search-trace svg .node circle {
  fill: #fff;
  stroke: #111827;
  stroke-width: 2;
}
.reveal .search-trace svg .node text {
  font-size: 16px;
  font-weight: 600;
  text-anchor: middle;
  dominant-baseline: middle;
  fill: #111827;
}
.reveal .search-trace svg .node.goal circle { fill: #fee2e2; stroke: #dc2626; }
.reveal .search-trace svg .node.goal text { fill: #991b1b; }
.reveal .search-trace svg .step-number {
  font-size: 11px;
  font-weight: bold;
  fill: #1d4ed8;
}
.reveal .search-trace svg .edge {
  stroke: #4b5563;
  stroke-width: 1.5;
  fill: none;
}
.reveal .search-trace svg .edge.dashed {
  stroke-dasharray: 4 3;
  stroke: #9ca3af;
}

/* Pseudocode block. */
.reveal pre.algo {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-left: 4px solid #1d4ed8;
  padding: 0.8em 1.2em;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.65em;
  line-height: 1.55;
  text-align: left;
  white-space: pre;
  overflow-x: auto;
  margin: 0.5em auto;
  max-width: 90%;
  color: #111827;
}
.reveal pre.algo .kw { color: #1d4ed8; font-weight: bold; }
.reveal pre.algo .cmt { color: #6b7280; font-style: italic; }

/* Algorithm property + comparison tables. */
.reveal table.props,
.reveal table.compare {
  width: 80%;
  margin: 0.5em auto;
  border-collapse: collapse;
  font-size: 0.75em;
  text-align: left;
}
.reveal table.props th,
.reveal table.compare th,
.reveal table.props td,
.reveal table.compare td {
  padding: 0.5em 0.9em;
  border-bottom: 1px solid #e5e7eb;
}
.reveal table.props th,
.reveal table.compare th {
  background: #eff6ff;
  color: #1e3a8a;
  font-weight: 600;
}
.reveal table.props th:first-child { width: 22%; }
.reveal table.compare th:first-child { width: 18%; }
.reveal table.props .ok,
.reveal table.compare .ok { color: #166534; font-weight: 600; }
.reveal table.props .no,
.reveal table.compare .no { color: #991b1b; font-weight: 600; }
.reveal table.props .meta,
.reveal table.compare .meta { color: #6b7280; font-size: 0.85em; margin-left: 0.5em; font-style: italic; font-weight: 400; }

/* Quiz Q + fragment-revealed answer pattern. */
.reveal .quiz-q { text-align: left; margin: 0.3em 0; font-size: 0.85em; }
.reveal .quiz-q strong { color: #1d4ed8; }
.reveal .quiz-options { list-style: upper-alpha; text-align: left; margin: 0.4em 0 0.4em 2em; }
.reveal .quiz-options li { font-size: 0.82em; margin-bottom: 0.2em; }
.reveal .quiz-answer {
  margin-top: 0.6em;
  padding: 0.55em 0.9em;
  background: #ecfdf5;
  border-left: 4px solid #059669;
  font-size: 0.75em;
  text-align: left;
  line-height: 1.4;
}
.reveal .quiz-answer strong { color: #065f46; }

/* Fragment-revealed list (bullets that pop in one at a time). */
.reveal .reveal-list { text-align: left; }
.reveal .reveal-list li { margin-bottom: 0.5em; }

/* Course-wide module breadcrumb (4 pills + arrows) shown at the top of every
   lecture's "Learning goals" slide so students always know where they are
   in the term arc. The current module's pill is filled with its accent
   colour; the other three are dim. */
.reveal .course-breadcrumb {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.35em;
  flex-wrap: wrap;
  margin: 0 auto 0.9em;
  font-size: 0.62em;
}
.reveal .course-breadcrumb .bc-pill {
  display: inline-block;
  padding: 0.25em 0.7em;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  color: #6b7280;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.reveal .course-breadcrumb .bc-arrow {
  color: #9ca3af;
  font-weight: 700;
}
.reveal .course-breadcrumb .bc-pill.current {
  color: #fff;
  border-color: transparent;
}
.reveal .course-breadcrumb .bc-pill.search.current   { background: #1d4ed8; }
.reveal .course-breadcrumb .bc-pill.uncert.current   { background: #a855f7; }
.reveal .course-breadcrumb .bc-pill.decision.current { background: #ea580c; }
.reveal .course-breadcrumb .bc-pill.learn.current    { background: #16a34a; }
.reveal .course-breadcrumb .bc-pill.recap.current    { background: #4b5563; }

/* PDF export:
   - Open ?print-pdf in Chrome and Print > Save as PDF.
   - Or use Decktape:
       decktape reveal https://yuntiandeng.com/slides/CS486/S26/L<n>/ CS486_S26_L<n>.pdf
*/