/*
  Deck-specific overrides/components on top of ../../theme/slides-theme.css.

  Two small components not in the shared theme yet, built for this deck:
  - .console  — a Spyder-style ">>>" REPL block (input lines + output lines)
  - .code-block/.code-line — a line-numbered .py script block with a few
    syntax-highlight span classes (.kw/.str/.num/.cmt/.fn)
  Both are generic enough to pull up into slides-theme.css later if a
  second deck ends up needing them (see theme/README.md).
*/

:root {
  --happy:     #8fbf7a;   /* muted sage green — strings / success */
  --happy-dim: rgba(143, 191, 122, 0.14);
  --r-h2-size: 1.3em;
}

/* ---- Spyder console block: >>> input lines + output lines ---- */
.console {
  font-family: var(--mono);
  font-size: 0.68em;
  line-height: 1.9;
  background: rgba(255,255,255,0.04);
  border-left: 2px solid var(--cool);
  border-radius: 2px;
  padding: 0.6em 1.1em;
  text-align: left;
  margin: 0.6em 0;
}
.console .cline { color: var(--ink); white-space: pre-wrap; }
.console .cline .ps { color: var(--ink-dim); margin-right: 0.6em; user-select: none; }
.console .cout { color: var(--accent); padding-left: 1.9em; white-space: pre-wrap; }
.console .ccmt { color: var(--ink-dim); }

/* ---- .py script block: line-numbered, monospace ---- */
.code-block {
  font-family: var(--mono);
  font-size: 0.56em;
  line-height: 1.7;
  background: rgba(255,255,255,0.04);
  border-left: 2px solid var(--rule);
  border-radius: 2px;
  padding: 0.55em 0;
  text-align: left;
  margin: 0.6em 0;
}
.code-block.compact { font-size: 0.48em; }
/*
  Flex, not grid: a code-line's content after the line number is often
  several syntax-highlight <span>s plus raw text (kw/fn/str/num spans
  interleaved with plain text). A 2-column CSS grid treats each of those
  as its own grid item and wraps anything past the 2nd onto a new
  implicit row using the same 2 columns — silently splitting one logical
  line into several broken, overlapping ones. Flex keeps any number of
  children on one row (no wrap) since that's all these ever need to be.
*/
.code-line {
  display: flex;
  align-items: baseline;
  padding: 0 0.9em;
  white-space: pre;
}
.code-line .ln {
  flex: 0 0 2em;
  margin-right: 0.9em;
  color: var(--ink-dim);
  text-align: right;
  user-select: none;
  font-variant-numeric: tabular-nums;
}
.code-line.indent { padding-left: 2.3em; }
.code-line.indent2 { padding-left: 4.3em; }
.code-line.blank .ln { opacity: 0; }

/* syntax spans */
/* margin-right, not a literal trailing space in the markup: inside a flex
   .code-line, a whitespace-only text node sitting between two adjacent
   <span>s (e.g. "def"</span> <span>"name") is dropped entirely rather than
   collapsed to a space, so "def" and the name it's followed by would run
   together with no gap. A keyword is always followed by a space in real
   Python, so this margin is safe everywhere .kw is used. */
.kw  { color: var(--cool); margin-right: 0.35em; }              /* def if elif else for while return in and or not */
.kw.tight { margin-right: 0; }             /* keyword directly followed by punctuation, e.g. "else:" with no operand in between */
.str { color: var(--happy); }             /* "quoted text" */
.num { color: var(--accent); }            /* numeric literals */
.cmt { color: var(--ink-dim); font-style: italic; } /* # comments */
.fn  { color: var(--accent); }            /* function / variable names being defined */

/* a line that's about to be swapped for another without shifting layout
   (e.g. "# TODO" -> "return a + b") — stack two lines in the same grid cell */
.line-stack { display: grid; }
.line-stack > .code-line { grid-area: 1 / 1; }

/* f(x) <-> def bridge, maths-to-code pairing */
.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.1em;
  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; }
/* inline-block, not just flex:0 0 auto: a block box (.code-block) whose
   shrink-to-fit width depends on a flex-display grandchild (.code-line)
   is exactly the nested block-in-flex intrinsic-sizing case some engines
   get wrong, letting the code-line's content (esp. the last span, e.g.
   "= 95") render past the box it's supposed to be sized to. inline-block
   forces the well-defined CSS2.1 shrink-to-fit algorithm instead. */
.math-code-pair .code-block { display: inline-block; margin: 0; flex: 0 0 auto; }

/* inline tag row (operators, comparison symbols, type names) */
.tag-row { display: flex; gap: 0.6em; flex-wrap: wrap; margin: 0.6em 0; }
/* .tag-chip on its own (e.g. next to a code-block in .math-code-pair) still
   needs the pill styling — only the flex row layout is .tag-row-specific */
.tag-chip {
  font-family: var(--mono);
  font-size: 0.75em;
  color: var(--accent);
  background: var(--accent-dim);
  border-radius: 4px;
  padding: 0.3em 0.7em;
}

/* checklist on the closing slide */
.recap-list { list-style: none; margin: 0.6em 0 0; padding: 0; }
.recap-list li {
  font-family: var(--mono);
  font-size: 0.85em;
  padding: 0.25em 0;
  color: var(--ink-dim);
}
.recap-list li.fragment.visible { color: var(--ink); }
.recap-list li::before { content: "\2713  "; color: var(--happy); }

/* ---- opening hook: bell-task image slide + image/bullets reveal ---- */
.bell-task { text-align: center; }
.bell-task h1 { margin-bottom: 0.5em; }
.bell-task img {
  max-height: 560px;
  max-width: 90%;
  border-radius: 4px;
  box-shadow: 0 0 0 1px var(--rule);
}

.side-by-side {
  display: flex;
  align-items: center;
  gap: 2em;
  margin-top: 0.6em;
}
.side-by-side .img-col { flex: 0 0 40%; }
.side-by-side .img-col img {
  width: 100%;
  border-radius: 4px;
  display: block;
  box-shadow: 0 0 0 1px var(--rule);
}
.side-by-side .text-col { flex: 1; text-align: left; }
.side-by-side .text-col ul { list-style: none; padding: 0; margin: 0; }
.side-by-side .text-col li {
  font-family: var(--sans);
  font-size: 0.62em;
  line-height: 1.4;
  color: var(--ink);
  margin: 0 0 0.7em 0;
  padding-left: 1.2em;
  position: relative;
}
.side-by-side .text-col li::before {
  content: "\00bb";
  position: absolute;
  left: 0;
  color: var(--accent);
}