/* L3-specific styles on top of shared/custom.css. */

/* "Five search algorithms" summary table (slide 31): widen the
   Frontier-key and Optimal? columns so "LIFO (stack)", "g(n)+h(n)" and
   "Yes  unit cost", "Yes  admissible h" don't wrap to a second line. */
.reveal table.compare {
  width: 92%;
  table-layout: fixed;
}
.reveal table.compare th:nth-child(1),
.reveal table.compare td:nth-child(1) { width: 11%; }
.reveal table.compare th:nth-child(2),
.reveal table.compare td:nth-child(2) { width: 22%; }
.reveal table.compare th:nth-child(3),
.reveal table.compare td:nth-child(3) { width: 12%; }
.reveal table.compare th:nth-child(4),
.reveal table.compare td:nth-child(4) { width: 12%; }
.reveal table.compare th:nth-child(5),
.reveal table.compare td:nth-child(5) { width: 18%; }
.reveal table.compare th:nth-child(6),
.reveal table.compare td:nth-child(6) { width: 25%; }


/* Heuristic-search graph: SVG with edge costs (blue) and h(n) labels (green). */
/* Default fill/stroke for any node circle/text that doesn't override inline.
   S (light blue) and G (light red) set fill explicitly and are excluded by
   :not([fill]); everything else gets a white-filled circle with dark text. */
.reveal .heuristic-graph .node circle:not([fill]) {
  fill: #ffffff;
  stroke: #111827;
  stroke-width: 2;
}
.reveal .heuristic-graph .node text:not([fill]) {
  fill: #111827;
}
.reveal .heuristic-graph .cost-label {
  font-size: 12px;
  font-weight: 600;
  fill: #1d4ed8;
}
/* Visit-order labels next to each node (1, 2, 3 ...). Black + italic
   keeps them visually distinct from the blue edge-cost numerals.
   The final "popped goal" step gets fill="#dc2626" inline (red), which
   overrides this.
   NOTE: the L3 heuristic-search traces sit inside `<div class="search-trace">`,
   and shared/custom.css has a more-specific rule
   `.reveal .search-trace svg .step-number { fill: #1d4ed8; }` (used by L2's
   BFS/DFS traces). We bump specificity by qualifying `svg.heuristic-graph`
   so this rule wins for L3 without disturbing L2. */
.reveal .heuristic-graph .step-number,
.reveal .search-trace svg.heuristic-graph .step-number {
  font-size: 11px;
  font-weight: 700;
  font-style: italic;
  fill: #111827;
}
.reveal .heuristic-graph .h-label {
  font-size: 11px;
  font-style: italic;
  fill: #16a34a;
}
.reveal .heuristic-graph .f-label {
  font-size: 11px;
  font-weight: bold;
  fill: #dc2626;
}

/* Inline g/h/f color hints (used in body text to match SVG color coding). */
.reveal .g-color { color: #1d4ed8; font-weight: 600; }
.reveal .h-color { color: #16a34a; font-weight: 600; }
.reveal .f-color { color: #dc2626; font-weight: 600; }

/* Three-up algorithm summary cards (Three algorithms, one knob). */
.reveal .alg-cards {
  display: flex;
  gap: 1em;
  justify-content: center;
  margin: 1em 0;
}
.reveal .alg-cards .alg-card {
  flex: 1;
  padding: 1em 0.8em;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-top: 4px solid #1d4ed8;
  border-radius: 6px;
  text-align: center;
}
.reveal .alg-cards .alg-card .alg-name {
  font-size: 0.95em;
  font-weight: 700;
  color: #1d4ed8;
  margin-bottom: 0.3em;
}
.reveal .alg-cards .alg-card .alg-key {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 1em;
  color: #111827;
  padding: 0.3em 0;
}
.reveal .alg-cards .alg-card .alg-sub {
  font-size: 0.7em;
  color: #6b7280;
  margin-top: 0.4em;
  line-height: 1.3;
}

/* Side-by-side GBFS-failure mini-panels using the existing PNGs. */
.reveal .failure-pair {
  display: flex;
  gap: 1.5em;
  justify-content: center;
  align-items: flex-start;
  margin-top: 0.5em;
}
.reveal .failure-pair > div { flex: 1; text-align: center; }
.reveal .failure-pair img {
  max-width: 100%;
  max-height: 320px;
  width: auto;
  height: auto;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
}
.reveal .failure-pair .failure-label {
  font-size: 0.9em;
  font-weight: 600;
  color: #991b1b;
  margin-top: 0.4em;
}

/* Proof / derivation block (cleaner contradiction proof for A*-optimality). */
.reveal .proof {
  background: #f9fafb;
  border-left: 4px solid #1d4ed8;
  padding: 0.7em 1em;
  text-align: left;
  margin: 0.4em auto;
  max-width: 90%;
  font-size: 0.82em;
}
.reveal .proof ol {
  margin: 0.3em 0 0 1.4em;
  padding: 0;
}
.reveal .proof li { margin-bottom: 0.4em; }
.reveal .proof .qed { color: #1d4ed8; font-weight: bold; }

/* Theorem-style block (for "Theorem: ..." statements). */
.reveal .theorem {
  background: #eff6ff;
  border-left: 4px solid #1d4ed8;
  padding: 0.6em 1em;
  text-align: left;
  margin: 0.4em auto;
  max-width: 90%;
  font-size: 0.85em;
}
.reveal .theorem strong { color: #1d4ed8; }

/* Inline frontier-as-priority-queue annotations: "(SBE: 2, SCH: 2, SBD: 10)" */
.reveal .pq-state {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

/* ============================================================
   Visual mini-diagrams added during polish pass.
   ============================================================ */

/* g/h/f path visual on slide 4 - thick colored segments. */
.reveal .gh-path { display: block; margin: 0 auto 0.4em auto; max-height: 120px; }
.reveal .gh-path .g-arc  { stroke: #1d4ed8; stroke-width: 7; fill: none; stroke-linecap: round; }
.reveal .gh-path .h-arc  { stroke: #16a34a; stroke-width: 7; fill: none; stroke-linecap: butt; stroke-dasharray: 14 10; }
.reveal .gh-path .brace  { stroke: #dc2626; stroke-width: 1.5; fill: none; }
.reveal .gh-path text    { font-size: 13px; font-weight: 600; }

/* Admissible-heuristic visual (slide 18a). */
.reveal .admissible-viz { display: block; margin: 0.3em auto; max-height: 200px; }
.reveal .admissible-viz .true-arrow { stroke: #1d4ed8; stroke-width: 2; fill: none; }
.reveal .admissible-viz .h-arrow    { stroke: #16a34a; stroke-width: 2; fill: none; stroke-dasharray: 5 3; }

/* Concentric f-contour visual (slide 19). */
.reveal .f-contour { display: block; margin: 0.3em auto; max-height: 220px; }
.reveal .f-contour .ring-inner { fill: #fee2e2; stroke: #dc2626; stroke-width: 1.5; }
.reveal .f-contour .ring-mid   { fill: #fef3c7; stroke: #d97706; stroke-width: 1.2; }
.reveal .f-contour .ring-outer { fill: #f3f4f6; stroke: #9ca3af; stroke-width: 1.2; stroke-dasharray: 4 3; }

/* Small inline diagrams sat next to pseudocode (slides 24, 25). */
.reveal .with-mini-diagram { display: flex; gap: 1em; align-items: center; }
.reveal .with-mini-diagram pre.algo { flex: 1; margin: 0; }
.reveal .cycle-mini   { width: 150px; flex-shrink: 0; }
.reveal .diamond-mini { width: 170px; flex-shrink: 0; }
.reveal .cycle-mini .strike, .reveal .diamond-mini .strike {
  stroke: #dc2626; stroke-width: 3; stroke-linecap: round;
}

/* 8-puzzle decorations for slides 20a/20b. */
.reveal .puzzle-grid .tile-misplaced { background: #fee2e2; color: #991b1b; }
.reveal .puzzle-grid .tile-correct   { background: #dcfce7; color: #166534; }
.reveal .puzzle-overlay-wrap { position: relative; display: inline-block; }
.reveal .puzzle-overlay-wrap svg.tile-arrows {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none;
}
.reveal .puzzle-overlay-wrap .tile-arrow {
  stroke: #dc2626; stroke-width: 2; fill: none; marker-end: url(#tile-arrow-head);
}
.reveal .heuristic-total {
  text-align: center; font-size: 1em; font-weight: 600; color: #1d4ed8; margin-top: 0.3em;
}

/* Two-parent visual for slide 29a. */
.reveal .two-parent-viz { display: block; margin: 0.3em auto; max-height: 240px; }
.reveal .two-parent-viz .preferred  { stroke: #1d4ed8; stroke-width: 2.5; fill: none; }
.reveal .two-parent-viz .discarded  { stroke: #dc2626; stroke-width: 2.5; fill: none; stroke-dasharray: 5 3; }

/* ============================================================
   Polish pass: icons (slide 5), GBFS-failure SVGs (14a/14b), relax mini (21), algo-card (24/25).
   ============================================================ */

/* Slide 5 - "What makes a good heuristic?" icon strip. */
.reveal .heuristic-icons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.8em;
  margin: 0.6em auto;
  max-width: 90%;
}
.reveal .heuristic-icon-card {
  padding: 0.7em 0.4em;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-top: 4px solid #1d4ed8;
  border-radius: 6px;
  text-align: center;
}
.reveal .heuristic-icon-card .icon {
  display: block;
  margin: 0 auto 0.3em auto;
  width: 44px;
  height: 44px;
}
.reveal .heuristic-icon-card .label {
  font-weight: 600;
  font-size: 0.85em;
  color: #1d4ed8;
}
.reveal .heuristic-icon-card .icon .stroke { stroke: #1d4ed8; stroke-width: 2; fill: none; }
.reveal .heuristic-icon-card .icon .accent { fill: #dbeafe; stroke: #1d4ed8; stroke-width: 2; }
.reveal .heuristic-icon-card .icon .pop    { fill: #16a34a; }

/* Slide 14a / 14b - full-slide failure SVGs (replacements for the PNGs). */
.reveal .gbfs-fail-svg {
  display: block;
  margin: 0.4em auto;
  max-height: 380px;
}
.reveal .gbfs-fail-svg .node      { font-size: 14px; font-weight: 600; text-anchor: middle; dominant-baseline: middle; }
.reveal .gbfs-fail-svg .node circle { fill: #fff; stroke: #111827; stroke-width: 2; }
.reveal .gbfs-fail-svg .node.start circle { fill: #dbeafe; stroke: #1d4ed8; }
.reveal .gbfs-fail-svg .node.goal  circle { fill: #fee2e2; stroke: #dc2626; }
.reveal .gbfs-fail-svg .edge      { stroke: #4b5563; stroke-width: 1.6; fill: none; }
.reveal .gbfs-fail-svg .edge-greedy { stroke: #dc2626; stroke-width: 4; fill: none; stroke-linecap: round; }
.reveal .gbfs-fail-svg .edge-best   { stroke: #16a34a; stroke-width: 4; fill: none; stroke-linecap: round; }
.reveal .gbfs-fail-svg .cost-label  { font-size: 12px; font-weight: 600; fill: #1d4ed8; }
.reveal .gbfs-fail-svg .h-label     { font-size: 11px; font-style: italic; fill: #16a34a; }
.reveal .gbfs-fail-svg .stuck-badge {
  font-size: 13px;
  font-weight: 700;
  fill: #991b1b;
}
.reveal .gbfs-fail-svg .stuck-x line { stroke: #dc2626; stroke-width: 4; stroke-linecap: round; }

/* Slide 21 - constraint-strike mini. */
.reveal .relax-mini {
  display: block;
  margin: 0.3em auto;
  max-height: 110px;
}
.reveal .relax-mini text { font-size: 12px; font-weight: 600; text-anchor: middle; }
.reveal .relax-mini .box-fill { fill: #f3f4f6; stroke: #4b5563; stroke-width: 1.5; }
.reveal .relax-mini .strike   { stroke: #dc2626; stroke-width: 3; stroke-linecap: round; }
.reveal .relax-mini .arrow    { stroke: #4b5563; stroke-width: 1.5; fill: none; }
.reveal .relax-mini .relax-label { fill: #dc2626; font-size: 11px; font-style: italic; font-weight: 700; }

/* Slides 24/25 - algo-card replacing dense <pre>. Mirrors the L21 .algo-card. */
.reveal .algo-card {
  background: #f9fafb;
  border: 1px solid #d1d5db;
  border-left: 4px solid #1d4ed8;
  border-radius: 6px;
  padding: 0.5em 0.8em;
  font-size: 0.82em;
  margin: 0 0 0.3em 0;
  flex: 1;
}
.reveal .algo-card .algo-title {
  font-weight: 700;
  color: #1d4ed8;
  margin-bottom: 0.2em;
  font-size: 0.9em;
}
.reveal .algo-card ol {
  margin: 0.2em 0 0.2em 1.4em;
  padding: 0;
}
.reveal .algo-card ol li { margin: 0.1em 0; }
.reveal .algo-card code {
  background: #eef2ff;
  color: #1e3a8a;
  padding: 0 0.3em;
  border-radius: 3px;
  font-size: 0.95em;
}

/* Slides 24/25 - larger side-diagrams now that the algo-card is compact. */
.reveal .cycle-mini-lg   { width: 240px; flex-shrink: 0; }
.reveal .diamond-mini-lg { width: 280px; flex-shrink: 0; }
.reveal .cycle-mini-lg .strike, .reveal .diamond-mini-lg .strike {
  stroke: #dc2626; stroke-width: 3; stroke-linecap: round;
}