/*
  Deck-specific overrides on top of ../../theme/slides-theme.css: an extra
  "happy" accent for TeaPT's success state, a tighter h2 size for this
  deck's longer slide titles, and the component CSS for TeaPT / code-block /
  graph widgets that only this deck uses (migrated out of an inline <style>
  block that used to live in index.html — kept here so all deck styling
  lives in one place).
*/

:root {
  --happy:     #8fbf7a;   /* muted sage green — success / it worked */
  --happy-dim: rgba(143, 191, 122, 0.14);

  --r-h2-size: 1.1em;
}

.reveal h2 {
  max-width: 100%;
  line-height: 1.2;
  white-space: nowrap;
}

/* ---- line-numbered instruction block ---- */
.code-block {
  font-family: var(--mono);
  font-size: 0.58em;
  line-height: 1.7;
  background: rgba(255,255,255,0.04);
  border-left: 2px solid var(--rule);
  border-radius: 2px;
  padding: 0.5em 0;
  text-align: left;
}
.code-block.compact { font-size: 0.52em; }
.code-block.grid-block { font-size: 0.32em; line-height: 1.45; padding: 0.3em 0; }
/* for slides with many lines (slide 4 — the bad paste) */
.code-block.dense { font-size: 0.46em; line-height: 1.55; }
.code-line {
  display: grid;
  grid-template-columns: 2.6em minmax(0, 1fr);
  gap: 0.9em;
  padding: 0 0.8em;
  white-space: nowrap;
}
/* keep long instruction lines from stretching the panel */
.code-line .step-text {
  min-width: 0;
}
/* indented continuation lines (used inside if/elif blocks) */
.code-line.indent {
  padding-left: 2em;
  grid-template-columns: 2.6em minmax(0, 1fr);
}
.code-line .ln {
  color: var(--ink-dim);
  text-align: right;
  user-select: none;
  font-variant-numeric: tabular-nums;
}
/* "Step N:" prefix — same colour as the slide title (h2 = --accent) */
.code-line .step-n {
  color: var(--accent);
}
/* a duplicated / pasted line — keep the line number & text,
   tint the text to suggest "this got copied in" */
.code-line.paste .step-text,
.code-line.paste .step-n {
  color: var(--ink-dim);
}
.code-line.paste .ln {
  color: var(--danger);
  opacity: 0.8;
}
/* blank / to-be-filled line */
.code-line.blank .step-n,
.code-line.blank .step-text {
  color: var(--ink-dim);
  opacity: 0.45;
  font-style: italic;
}
/* highlighted instruction line (the parts relevant to a customer) */
.code-line.highlight {
  background: var(--accent-dim);
  border-left: 2px solid var(--accent);
  margin-left: -0.8em;
  padding-left: calc(0.8em - 2px);
}
/* custom fragment: highlights the whole line it lives on */
.fragment.hl { opacity: 0; transition: opacity 0.25s ease; }
.fragment.hl.visible { opacity: 1; }
.code-line:has(.fragment.hl.visible) {
  background: var(--accent-dim);
  border-left: 2px solid var(--accent);
  margin-left: -0.8em;
  padding-left: calc(0.8em - 2px);
}
/* small comment line at the foot of a slide */
.slide-note {
  font-family: var(--mono);
  font-size: 0.5em;
  color: var(--ink-dim);
  margin-top: 0.8em;
  opacity: 0.85;
}

/* ---- 2x2 grid of customers ---- */
.grid-2x2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 0.8em;
  margin-top: 0.8em;
  max-width: 70em;
  margin-left: auto;
  margin-right: auto;
}
.grid-panel {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.5em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.grid-panel .panel-label {
  font-family: var(--mono);
  font-size: 0.55em;
  color: var(--ink-dim);
  margin-bottom: 0.3em;
}
.grid-panel svg { max-width: 100%; }
.grid-panel .person-svg { color: var(--ink-dim); }
.grid-panel .speech {
  font-family: var(--mono);
  font-size: 0.62em;
  color: var(--ink);
  margin: 0.45em 0 0;
}
.grid-panel .speech strong {
  color: var(--accent);
  font-weight: 500;
}

/* ---- TeaPT robot (slideside companion on every code slide) ---- */
.with-teapt {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 2em;
  align-items: flex-start;
  margin-top: 0.4em;
}
.teapt {
  font-family: var(--mono);
  color: var(--ink);
  opacity: 0.92;
}
.teapt svg { display: block; max-width: 100%; height: auto; }
.teapt .teapt-label {
  font-size: 0.55em;
  color: var(--ink-dim);
  margin-top: 0.4em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* blink cursor on the face plate when listening */
.teapt .face-cursor {
  animation: blink 1s steps(1) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .teapt .face-cursor { animation: none; opacity: 0.35; }
}
/* busy / thinking: a small inline indicator */
.teapt .indicator {
  font-size: 0.6em;
  color: var(--ink-dim);
  margin-top: 0.5em;
  min-height: 1em;
}

/* ---- TeaPT face states ---- */
/* face parts are layered; only the matching state shows */
.teapt .face { display: none; }
.teapt[data-state="normal"] .face-normal,
.teapt[data-state="busy"] .face-busy,
.teapt[data-state="confused"] .face-confused,
.teapt[data-state="overwhelmed"] .face-overwhelmed,
.teapt[data-state="thinking"] .face-thinking,
.teapt[data-state="deciding"] .face-deciding,
.teapt[data-state="happy"] .face-happy { display: inline; }

/* ---- TeaPT svg base ---- */
.teapt-svg {
  color: var(--ink-dim);
  transition: color 0.3s ease;
}
.teapt[data-state="overwhelmed"] .teapt-svg,
.teapt[data-state="confused"] .teapt-svg {
  color: var(--danger);
}
.teapt[data-state="thinking"] .teapt-svg {
  color: var(--cool);
}
.teapt[data-state="happy"] .teapt-svg {
  color: var(--happy);
}
/* empty slot waiting for its customer */
.grid-panel.placeholder { opacity: 0.5; }
.grid-panel.placeholder .ph {
  font-family: var(--mono);
  color: var(--ink-dim);
  letter-spacing: 0.35em;
  font-size: 0.8em;
}
/* slide 3: a grid cell that swaps its empty-slot dot for the filled
   cup panel in place, so only that cell changes — not the whole slide */
.grid-cell-stack { display: grid; }
.grid-cell-stack > .grid-panel { grid-area: 1 / 1; }
/* slide 3: one note visible at a time, without the others shifting layout */
.slide-note-stack { display: grid; }
.slide-note-stack > .slide-note { grid-area: 1 / 1; margin-top: 0.8em; }
/* slide 5: customers left, live instruction list right */
.customer-lab {
  display: flex;
  gap: 1.5em;
  align-items: flex-start;
  margin-top: 0.8em;
  max-width: 70em;
}
.customer-lab .grid-2x2 { flex: 0 0 56%; margin-top: 0; margin-left: 0; margin-right: 0; }
.customer-lab .code-stack { flex: 1; min-width: 0; display: grid; }
.customer-lab .code-stack .code-block { grid-area: 1 / 1; width: 100%; min-width: 0; font-size: 0.44em; overflow: hidden; }

/* ---- popup callout ---- */
.popup {
  display: inline-block;
  background: var(--danger-dim);
  border: 2px solid var(--danger);
  border-radius: 6px;
  padding: 0.6em 1.2em;
  font-family: var(--mono);
  font-size: 0.85em;
  color: var(--danger);
  margin-top: 1em;
}

/* ---- function call styling ---- */
.fn-call {
  font-family: var(--mono);
  font-size: 0.8em;
  color: var(--accent);
  background: var(--accent-dim);
  padding: 0.3em 0.7em;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 0.6em;
}
.fn-call .fn-name { color: var(--accent); }
.fn-call .fn-arg { color: var(--ink); }
.fn-call .fn-punct { color: var(--ink-dim); }
.fn-call .fn-blank {
  color: var(--ink-dim);
  border-bottom: 1px dashed var(--ink-dim);
  padding: 0 0.2em;
}
.fn-call .fn-ctrl { color: var(--cool); }

/* ---- slide 5: 4-panel "we're managing 4 things" summary ---- */
.slide-5-stage .customer-lab { width: 100%; }
.slide-5-summary {
  margin-top: 0.4em;
  text-align: left;
}
.slide-5-summary h2 {
  font-size: 1em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid var(--rule);
}
.slide-5-summary h2 .warn {
  color: var(--danger);
  font-size: 1.1em;
  margin-left: 0.3em;
  vertical-align: -0.05em;
}
.mini-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6em;
  margin-top: 0.5em;
  max-width: 100%;
}
.mini-panel {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.45em 0.5em;
  text-align: left;
  min-width: 0;
}
.mini-panel .panel-label {
  font-family: var(--mono);
  font-size: 0.55em;
  color: var(--ink-dim);
  margin-bottom: 0.3em;
  text-align: center;
}
.mini-panel .code-block { padding: 0.3em 0; }

/* ---- slide 6: hero title that starts centred then moves to the top ---- */
.hero-title {
  font-size: 2.2em;
  text-align: left;
}
/* V1 (centred hero): give the section a real height so absolute centering works */
section.hero-only { height: 800px; }
section.hero-only .hero-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  font-size: 3em;
  color: var(--accent);
  text-align: center;
  white-space: nowrap;
}

/* nested (2-level) indent — e.g. a line inside a for-loop inside a function */
.code-line.indent2 {
  padding-left: 4em;
  grid-template-columns: 2.6em minmax(0, 1fr);
}

/* control-flow line (if / elif) inside a code block */
.code-line .step-ctrl {
  color: var(--cool);
  font-family: var(--mono);
}
.code-line:has(.step-ctrl) { padding-left: 0.8em; }

/* ---- slide 7: highlighted token inside a step-text ---- */
.code-line .hl { color: var(--accent); }

/* ---- slide 8: animated graph ---- */
.graph-and-code {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 1.5em;
  align-items: start;
  margin-top: 0.4em;
}
.graph-frame {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.4em;
}
.graph-svg {
  color: var(--ink-dim);
  width: 100%;
  height: auto;
  max-height: 280px;
  display: block;
}
/* animated line draw (auto-play graphs — not the click-through one) */
.graph-svg .graph-line:not(.fragment) {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: draw-line 1.6s ease-out forwards;
}
@keyframes draw-line {
  to { stroke-dashoffset: 0; }
}
/* data points fade in along the line (auto-play graphs) */
.graph-svg .graph-points .point:not(.fragment) {
  opacity: 0;
  fill: var(--accent);
  animation: pop-in 0.4s ease-out forwards;
}
/* click-through graph: each point is its own Reveal fragment, revealed
   in lockstep with the matching plot() call in the code panel */
.graph-svg .graph-points .point.fragment {
  fill: var(--accent);
  transform: scale(0.3);
}
.graph-svg .graph-points .point.fragment.visible {
  transform: scale(1);
}
/* click-through graph: the connecting line only draws once every point is placed */
.graph-svg .graph-line.fragment {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
}
.graph-svg .graph-line.fragment.visible {
  animation: draw-line 1.6s ease-out forwards;
}
.graph-svg .graph-points .point[data-x="0"] { animation-delay: 0.2s; }
.graph-svg .graph-points .point[data-x="1"] { animation-delay: 0.4s; }
.graph-svg .graph-points .point[data-x="2"] { animation-delay: 0.6s; }
.graph-svg .graph-points .point[data-x="3"] { animation-delay: 0.8s; }
.graph-svg .graph-points .point[data-x="4"] { animation-delay: 1.0s; }
.graph-svg .graph-points .point[data-x="5"] { animation-delay: 1.2s; }
.graph-svg .graph-points .point[data-x="6"] { animation-delay: 1.4s; }
.graph-svg .graph-points .point[data-x="7"] { animation-delay: 1.6s; }
.graph-svg .graph-points .point[data-x="8"] { animation-delay: 1.8s; }
.graph-svg .graph-points .point[data-x="9"] { animation-delay: 2.0s; }
@keyframes pop-in {
  from { opacity: 0; transform: scale(0.3); }
  to   { opacity: 1; transform: scale(1); }
}
/* SVG transform-origin fix so points scale around their own centre */
.graph-svg .point { transform-box: fill-box; transform-origin: center; }

/* ---- slide 4: highlighted offending lines ---- */
.highlight-trigger { display: none; }
.code-block.highlights-on .code-line.hl-target {
  background: var(--accent-dim);
  border-left: 2px solid var(--accent);
  margin-left: -0.8em;
  padding-left: calc(0.8em - 2px);
}
/* slide 4: label each pasted copy so the highlight reads as "copy-paste", not just "highlighted" */
.code-line .paste-copy {
  margin-left: 0.7em;
  font-family: var(--mono);
  font-size: 0.75em;
  color: var(--danger);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.code-block.highlights-on .code-line.hl-target .paste-copy { opacity: 0.85; }

/* ---- inline trailing comment on a code-line — same colour everywhere ---- */
.code-line .inline-comment { color: var(--ink-dim); }

/* ---- slide 8: maths notation paired with its code translation ---- */
.math-code-pair {
  display: flex;
  align-items: center;
  gap: 1em;
  margin: 0.7em 0;
  flex-wrap: wrap;
}
.math-code-pair .math-eq {
  font-family: var(--mono);
  font-size: 1.15em;
  color: var(--accent);
  background: var(--accent-dim);
  border-radius: 4px;
  padding: 0.35em 0.8em;
  white-space: nowrap;
}
.math-code-pair .pair-arrow {
  font-family: var(--mono);
  color: var(--ink-dim);
  font-size: 1.1em;
}
.math-code-pair .code-block { margin: 0; flex: 0 0 auto; }