/* ==========================================================================
   comp5001.css — COMP5001 add-ons to the shared UoW theme
   Loaded AFTER uow-theme.css. Only adds new classes; brand colours come from
   the theme's :root variables. The readability fixes and .ask prompt are the
   same as ACCF5002's socratic.css, so both modules look alike.

   .ask          question prompt (answer follows as fragments)
   .pseudo       pseudocode block; <span class="new"> marks lines added later
   .fig          wrapper for an SVG/image figure; .caption under it
   table.trace   step-by-step frontier trace
   .chip         small label (DFS, BFS, MAX, MIN)
   .fs-s / .fs-xs  shrink a dense slide or column
   ========================================================================== */

/* ---- Readability (reveal sets line-height: 1 on list items) -------------- */
.reveal li { line-height: 1.42; }
.reveal ul li,
.reveal ol li { margin: 0.42em 0; }
.reveal li li { margin: 0.22em 0; }
.reveal td,
.reveal th { line-height: 1.35; }
.reveal h3 { margin-bottom: 0.4em; }
.reveal .box p:last-child,
.reveal .box ul:last-child { margin-bottom: 0; }
.reveal .box ul { margin-top: 0.2em; }

/* ---- Opening question ----------------------------------------------------- */
.reveal .ask {
  position: relative;
  display: flow-root;
  margin: 0 0 0.6em 0;
  padding: 0.45em 0.8em 0.45em 2.15em;
  background: rgba(212, 239, 112, 0.30);
  border-radius: 6px;
  font-family: var(--r-heading-font);
  font-style: italic;
  font-weight: 600;
  font-size: 0.95em;
  line-height: 1.3;
  color: var(--uow-deep-purple);
}
.reveal .ask::before {
  content: "?";
  position: absolute;
  left: 0.5em;
  top: 0.5em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25em;
  height: 1.25em;
  border-radius: 50%;
  background: var(--uow-deep-purple);
  color: var(--uow-bright-green);
  font-family: var(--r-main-font);
  font-style: normal;
  font-weight: 800;
  font-size: 0.85em;
  line-height: 1;
}
.reveal .ask code { font-style: normal; font-size: 0.85em; }
.reveal .ask .mode {
  float: right;
  margin: 0.15em 0 0 0.8em;
  white-space: nowrap;
  font-family: var(--r-main-font);
  font-style: normal;
  font-weight: 700;
  font-size: 0.55em;
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--uow-deep-purple);
  border: 1.5px solid var(--uow-deep-purple);
  border-radius: 999px;
  padding: 0.25em 0.8em;
}

/* ---- Density helpers ------------------------------------------------------ */
.reveal .fs-s  { font-size: 0.84em; }
.reveal .fs-xs { font-size: 0.74em; }
.reveal .muted { color: var(--uow-deep-grey); }
.reveal .caption {
  font-size: 0.55em;
  color: var(--uow-deep-grey);
  margin-top: 0.3em;
}
.reveal .tight li { margin: 0.22em 0; }
.reveal table.compact { font-size: 21px; }
.reveal table.compact th,
.reveal table.compact td { padding: 0.25em 0.6em; }

/* ---- Inline code ----------------------------------------------------------
   Function names and file names (ACTIONS(s), RESULT(s, a), maze.py) stand out
   from the deep-purple body text: Bright Purple darkened for contrast on white
   (the same ink as the pseudocode keywords), on a light chip. Inside boxes and
   tables the chip is white so it does not merge with the tinted background. */
:root { --c5-code-ink: #6B2FB3; }
.reveal :not(pre) > code {
  color: var(--c5-code-ink);
  font-weight: 700;
  background: var(--uow-code-bg);
  border: 1px solid #E7D2FE;
  border-radius: 4px;
  padding: 0.04em 0.32em;
}
.reveal .box :not(pre) > code,
.reveal table :not(pre) > code { background: #FFFFFF; }
.reveal .box.keyidea :not(pre) > code { background: rgba(255, 255, 255, 0.12); color: var(--uow-bright-green); border-color: rgba(255, 255, 255, 0.25); }

/* ---- Pseudocode ----------------------------------------------------------- */
.reveal .pseudo {
  font-family: "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.62em;
  line-height: 1.55;
  background: var(--uow-code-bg);
  border-left: 4px solid var(--uow-bright-purple);
  border-radius: 4px;
  padding: 0.7em 1em;
  margin: 0.3em 0;
  white-space: pre;
  color: var(--uow-deep-purple);
}
.reveal .pseudo b { color: var(--uow-deep-purple); font-weight: 800; }
.reveal .pseudo .fn { color: var(--c5-code-ink); font-weight: 700; }   /* function names, as inline code */
.reveal .pseudo .new {
  background: rgba(212, 239, 112, 0.65);
  border-radius: 3px;
  padding: 0 0.25em;
  margin: 0 -0.25em;
}
.reveal .pseudo .c { color: var(--uow-deep-grey); font-style: italic; }

/* Explanation column next to pseudocode: each item starts with the line it explains */
.reveal .pseudo-help li > code:first-child { white-space: nowrap; margin-right: 0.25em; }
.reveal .pseudo-help li { margin: 0.42em 0; }
.reveal .box.keyidea code { white-space: nowrap; }
.reveal .box.definition code,
.reveal ul.facts code { white-space: nowrap; }
.reveal .box.keyidea strong { color: var(--uow-bright-green); }   /* theme's deep-purple bold is invisible here */

/* ---- Figures -------------------------------------------------------------- */
.reveal .fig { margin: 0.2em 0; text-align: center; }
.reveal .fig img,
.reveal .fig svg { display: block; margin: 0 auto; max-width: 100%; height: auto; }
.reveal img.maze { border-radius: 4px; box-shadow: 0 2px 10px rgba(41, 22, 71, 0.18); }
.reveal .legend { font-size: 0.55em; color: var(--uow-deep-grey); margin-top: 0.45em; text-align: center; }
.reveal .legend span { display: inline-block; margin: 0 0.6em; }
.reveal .legend i {
  display: inline-block; width: 0.9em; height: 0.9em; border-radius: 2px;
  vertical-align: -0.12em; margin-right: 0.3em;
}

/* SVG text and shapes inside slides */
.reveal svg text { font-family: var(--r-main-font); }
.reveal svg .fragment { transition: opacity 0.35s ease; }
.reveal svg .mono text { font-family: "SFMono-Regular", Menlo, Consolas, monospace; }

/* ---- Trace table ---------------------------------------------------------- */
.reveal table.trace { font-size: 20px; margin: 0.25em 0; width: 100%; }
.reveal table.trace th,
.reveal table.trace td { padding: 0.2em 0.55em; }
.reveal table.trace td.fr { font-family: "SFMono-Regular", Menlo, Consolas, monospace; font-size: 0.92em; }
.reveal table.trace td.out { font-weight: 800; }
.reveal table.trace tr.goal td { background: rgba(212, 239, 112, 0.55) !important; font-weight: 800; }

/* ---- Small labels ---------------------------------------------------------- */
.reveal .chip {
  display: inline-block;
  padding: 0.08em 0.55em;
  border-radius: 999px;
  font-size: 0.75em;
  font-weight: 800;
  letter-spacing: 0.03em;
  vertical-align: 0.08em;
  background: var(--uow-bright-green);
  color: var(--uow-deep-purple);
}
.reveal .chip.purple { background: var(--uow-deep-purple); color: #fff; }
.reveal .chip.lilac  { background: #E7D2FE; }

/* ---- Big number ------------------------------------------------------------ */
.reveal .hero {
  font-family: var(--r-main-font);
  font-weight: 800;
  font-size: 1.9em;
  line-height: 1;
  color: var(--uow-deep-purple);
  margin: 0.05em 0 0.15em 0;
}
.reveal .hero small {
  display: block;
  margin-top: 0.3em;
  font-size: 0.32em;
  font-weight: 600;
  color: var(--uow-deep-grey);
}

/* ---- Tick / cross list ----------------------------------------------------- */
.reveal ul.check li.yes::before,
.reveal ul.check li.no::before { font-size: 1em; font-weight: 800; top: 0; left: -1.15em; }
.reveal ul.check li.yes::before { content: "\2713"; color: #5E7A12; }
.reveal ul.check li.no::before  { content: "\2717"; color: #D1350F; }

/* ---- Maze stepper (inline SVG from tools/make_week02_figures.py) ----------
   One fragment per search step; the Play button steps through them. */
.reveal svg.stepper { width: 100%; max-width: 580px; border-radius: 4px; box-shadow: 0 2px 10px rgba(41, 22, 71, 0.18); }
.reveal .legend i.dash { background: transparent; border: 2.5px dashed #6B2FB3; box-sizing: border-box; }
.reveal .stepbar { display: flex; justify-content: center; gap: 0.5em; margin-top: 0.45em; }
.reveal .stepbtn {
  font-family: var(--r-main-font);
  font-size: 0.55em;
  font-weight: 700;
  color: var(--uow-deep-purple);
  background: #fff;
  border: 2px solid var(--uow-deep-purple);
  border-radius: 999px;
  padding: 0.3em 1em;
  cursor: pointer;
}
.reveal .stepbtn[data-act="play"] { background: var(--uow-deep-purple); color: #fff; }
.reveal .stepbtn.on { background: var(--uow-bright-green); color: var(--uow-deep-purple); }
.reveal ol.steplog { list-style: none; margin: 0.2em 0 0.5em 0; padding: 0; }
.reveal ol.steplog li { margin: 0.35em 0; padding-left: 0.7em; border-left: 4px solid #E7D2FE; }
.reveal ol.steplog li b { color: #6B2FB3; }

/* ---- Tree race ("Trace it" slide): tree + trace table per search --------- */
.reveal svg.stepper.tree { box-shadow: none; border-radius: 0; max-width: 262px; }
.reveal .tracepair { align-items: flex-start; }
.reveal .tracepair .treecol { flex: 0 0 46%; padding-right: 0.4em; }
.reveal .tracepair table.trace { font-size: 20px; }
.reveal .racehead { margin: 0 0 0.2em 0; }
.reveal .racefoot { display: flex; align-items: center; justify-content: center; gap: 1.2em; margin-top: 0.1em; }
.reveal .racefoot .caption { margin: 0; }
.reveal .racefoot .stepbar { margin-top: 0; }

/* ---- Week 3: facts, actions and Blocks World pictures ----------------------
   .fragment.mark / .fragment.strike: the text is always shown; the fragment
   only adds a highlight (a fact being checked) or a strike-through (a fact
   being deleted). Put .mark on the <code> itself; wrap it in a .strike span. */
.reveal .slides section .fragment.mark,
.reveal .slides section .fragment.strike { opacity: 1; visibility: inherit; }
.reveal :not(pre) > code.fragment.mark.visible,
.reveal .pseudo .fragment.mark.visible {
  background: rgba(212, 239, 112, 0.85);
  border-color: var(--uow-green-ink);
  box-shadow: 0 0 0 2px var(--uow-green-ink);
  border-radius: 4px;
}
.reveal .fragment.strike.visible {
  text-decoration: line-through;
  text-decoration-thickness: 3px;
  text-decoration-color: #EC3C12;
  opacity: 0.55;
}
.reveal .tf-t { color: var(--uow-green-ink); font-weight: 800; }
.reveal .tf-f { color: #D1350F; font-weight: 800; }
.reveal .tf-n { color: var(--uow-deep-grey); font-style: italic; }
.reveal ul.facts { list-style: none; margin: 0.2em 0 0.4em 0; padding: 0; }
.reveal ul.facts li { margin: 0.28em 0; }
.reveal ul.facts li .why { color: var(--uow-deep-grey); font-size: 0.85em; margin-left: 0.4em; }
.reveal ul.facts .arrow { color: var(--uow-deep-grey); font-weight: 700; margin: 0 0.25em; }
.reveal ul.facts li.added code { background: rgba(212, 239, 112, 0.6); border-color: var(--uow-green-ink); }

/* Action card: preconditions, add list, delete list */
.reveal table.card { font-size: 20px; width: 100%; margin: 0.35em 0; }
.reveal table.card th { font-size: 21px; }
.reveal table.card td:first-child { font-weight: 800; white-space: nowrap; width: 1%; }
.reveal table.card tr.add td { background: rgba(212, 239, 112, 0.38); }
.reveal table.card tr.del td { background: rgba(236, 60, 18, 0.09); }

/* Small comparison table (BFS / greedy / A*) */
.reveal table.compare { font-size: 20px; margin: 0.3em 0; }
.reveal table.compare th, .reveal table.compare td { padding: 0.2em 0.6em; text-align: center; }
.reveal table.compare td:first-child, .reveal table.compare th:first-child { text-align: left; }
.reveal table.compare tr.best td { background: rgba(212, 239, 112, 0.5) !important; font-weight: 800; }

/* Blocks World pictures and the planning search tree (tools/make_week03_figures.py) */
.reveal svg.blocks { display: block; margin: 0 auto; max-width: 100%; height: auto; }
.reveal .legend i.corner {
  background: #fff; border: 1px solid #C6C6CC; width: 1.2em; height: 1.2em;
  font-style: normal; font-size: 0.8em; font-weight: 700; color: var(--uow-deep-grey);
  text-align: right; line-height: 1; padding: 1px 2px 0 0; box-sizing: border-box; vertical-align: -0.25em;
}

/* ---- Search-cost notation: h (heuristic), g (cost so far), f = g + h ------
   Always write them as <var class="nh">h</var>, <var class="ng">g(n)</var>,
   <var class="nf">f</var> ..., in slides and notes alike, so a reader can spot
   them in a sentence. Lighter colours inside dark boxes. */
.reveal var.nh, .reveal var.ng, .reveal var.nf {
  font-family: var(--r-main-font); font-style: italic; font-weight: 800; white-space: nowrap;
}
.reveal var.nh { color: #6B2FB3; }
.reveal var.ng { color: #4E6514; }
.reveal var.nf { color: #291647; }
.reveal .box.keyidea var.nh { color: var(--uow-bright-purple); }
.reveal .box.keyidea var.ng { color: var(--uow-bright-green); }
.reveal .box.keyidea var.nf { color: #FFFFFF; }

/* ---- Week 3: logic --------------------------------------------------------
   table.tt     truth table; a row with .fragment.out is struck through when its
                fragment shows (a world ruled out), .fragment.keep turns green
   ol.kb        numbered knowledge base; fragment lines (new sentences) are green
   .worlds      2 x 2 grid of world cards (.w); .w.fragment.out is struck through
   span.fragment.mark highlights words in a sentence (like code.fragment.mark) */
.reveal .slides section .fragment.out,
.reveal .slides section .fragment.keep { opacity: 1; visibility: inherit; }
.reveal span.fragment.mark.visible {
  background: rgba(212, 239, 112, 0.85);
  box-shadow: 0 0 0 2px var(--uow-green-ink);
  border-radius: 4px;
}
.reveal table.tt { font-size: 24px; margin: 0.25em 0; }
.reveal table.tt th, .reveal table.tt td { padding: 0.13em 0.55em; text-align: center; }
.reveal table.tt td.why { text-align: left; font-size: 0.88em; color: var(--uow-deep-grey); }
.reveal table.tt tr.fragment.out.visible td {
  opacity: 0.42;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: #EC3C12;
}
.reveal table.tt tr.fragment.out.visible td.why { opacity: 1; text-decoration: none; color: #D1350F; }
.reveal table.tt tr.fragment.keep.visible td { background: rgba(212, 239, 112, 0.65) !important; font-weight: 800; }
.reveal table.tt tr.fragment.keep.visible td.why { color: var(--uow-green-ink); }
.reveal ol.kb { margin: 0.1em 0 0 1.3em; padding: 0; }
.reveal ol.kb li { margin: 0.3em 0; padding-left: 0.2em; }
.reveal ol.kb li.fragment { background: rgba(212, 239, 112, 0.45); border-radius: 4px; }
.reveal ol.kb .why { color: var(--uow-deep-grey); font-size: 0.85em; margin-left: 0.3em; }
.reveal .worlds { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45em; margin: 0.2em 0 0.5em 0; }
.reveal .worlds .w {
  border: 2.5px solid var(--uow-deep-purple); border-radius: 10px; background: #fff;
  padding: 0.3em 0.6em; font-size: 22px; line-height: 1.55;
}
.reveal .worlds .w b { color: #6B2FB3; }
.reveal .worlds .w.fragment.out.visible {
  opacity: 0.4; border-style: dashed; border-color: #EC3C12;
  text-decoration: line-through; text-decoration-color: #EC3C12; text-decoration-thickness: 3px;
}

/* ---- Print / PDF handout --------------------------------------------------- */
@media print {
  .reveal .run-bar,
  .reveal .stepbar { display: none !important; }
  /* print-pdf shows every fragment, even "fade-out" ones: drop the frontier
     outlines of squares already taken out, and the per-step rings, so the
     handout shows the finished search */
  .reveal svg.stepper .fragment.fade-out,
  .reveal svg.stepper .fragment.fade-in-then-out,
  .reveal svg.blocks .fragment.fade-out,
  .reveal svg.blocks .fragment.fade-in-then-out { display: none !important; }
}

/* ---- Bigger code block for short snippets: <pre class="big"> ------------- */
.reveal pre.big { font-size: 0.8em; }

/* ---- Tic-tac-toe minimax tree (14b) ---------------------------------------- */
.reveal .ttt-steps { display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: 0 1em; margin: 0 0 0.2em 0; }
.reveal .ttt-steps b { color: var(--c5-code-ink); }
.reveal svg.ttt-tree { display: block; width: 100%; height: auto; max-height: 420px; }