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

  NOTE (sanctioned first-draft exception, recorded per docs/adding-a-new-deck.md):
  the .code-block/.code-line + syntax-span, .math-code-pair, .recap-list and
  .bell-task components below are a deliberate copy of decks/python-intro's
  custom.css, not a redesign. Two decks now need them; promoting them up into
  ../../theme/slides-theme.css is the right next step but is DEFERRED until
  this deck's first live run (see this deck's README). Until then keep the
  two copies byte-compatible for the shared components.

  Everything under " Turtle Maze components" is this deck's own: printed
  physical-card styling, maze figures (img/*.svg), worksheet chips, solution slides.
*/

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

/* keep the base explicit so the em-sizes below are predictable on every host */
.reveal { font-size: 32px; }

/* ---- copied verbatim from decks/python-intro/custom.css (see note above) ---- */
/* ---- .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 */

/* 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; }

/* 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 slide ---- */
.bell-task { text-align: center; }
.bell-task h1 { margin-bottom: 0.5em; }

/* ================= Turtle Maze components (deck-specific) ================= */

/* printed physical cards: pale "paper" chips on the dark stage */
.phys-cards { display: flex; flex-wrap: wrap; gap: 0.9em 1.1em; margin: 0.8em 0 0.2em; }
.phys-card-wrap { display: flex; flex-direction: column; gap: 0.25em; }
.phys-card {
  font-family: var(--mono);
  font-size: 0.62em;
  color: #161a1e;
  background: #efeae0;
  border: 1px solid #c9c2b2;
  border-radius: 6px;
  padding: 0.55em 0.95em;
  box-shadow: 0 2px 0 rgba(0,0,0,0.35), 0 6px 14px rgba(0,0,0,0.35);
}
.card-name { font-family: var(--mono); font-size: 0.48em; color: var(--ink-dim); letter-spacing: 0.06em; text-transform: uppercase; }

/* the loop card drawn as a physical frame the body cards sit inside */
.loop-frame {
  font-family: var(--mono);
  border: 3px dashed #b9b1a0;
  border-radius: 8px;
  padding: 0.7em 0.9em 0.9em;
  background: #efeae0;
  color: #161a1e;
  box-shadow: 0 2px 0 rgba(0,0,0,0.35), 0 6px 14px rgba(0,0,0,0.35);
}
.loop-frame .frame-head { font-size: 0.6em; font-weight: 600; margin-bottom: 0.5em; }
.loop-frame .slot {
  display: inline-block; font-family: var(--mono); font-size: 0.52em;
  color: #6b6353; border: 2px dashed #c2b9a6; border-radius: 5px;
  padding: 0.35em 0.7em;
}
.loop-frame .body-card {
  display: inline-block; font-family: var(--mono); font-size: 0.56em;
  color: #161a1e; background: #f7f3ea; border: 1px solid #c9c2b2;
  border-radius: 5px; padding: 0.3em 0.6em; margin: 0.15em;
}

/* ladder slide: seven thumbnails in one row */
.ladder { display: flex; justify-content: center; align-items: flex-start; gap: 0.5em; margin-top: 0.6em; }
.ladder-card { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ladder-cap { font-family: var(--mono); font-size: 0.42em; line-height: 1.5; color: var(--ink-dim); margin: 0.5em 0 0; }
.ladder-cap strong { color: var(--accent); font-weight: 600; }
.feat { font-weight: 700; margin: 0 0.1em; }
.feat.dia { color: #CE93D8; }
.feat.trap { color: var(--danger); }
.feat.ow { color: var(--accent); }
.feat.off { color: var(--ink-dim); font-weight: 400; }

/* hook slide props */
.props { display: flex; justify-content: center; gap: 0.8em; flex-wrap: wrap; margin-top: 1.1em; }
.props .prop { font-family: var(--mono); font-size: 0.6em; color: var(--ink);
  background: var(--accent-dim); border: 1px solid var(--accent); border-radius: 4px; padding: 0.4em 0.8em; }

/* maze figures are plain <img src="img/maze-LN.svg"> generated by img/make_mazes.py */
.maze-img { display: block; border-radius: 4px; box-shadow: 0 0 0 1px var(--rule); background: var(--bg-deep); }
.maze-img.plain { box-shadow: none; background: none; }
.bell-task .maze-img { margin: 0 auto; }
.maze-row { display: flex; gap: 1.6em; align-items: flex-start; margin-top: 0.4em; }
.maze-row .task-col { flex: 1; min-width: 0; }
.maze-row.duo { justify-content: center; }
.maze-row.duo figure { margin: 0; max-width: 46%; }
.maze-row.duo figcaption { font-size: 0.55em; color: var(--ink-dim); margin-top: 0.5em; line-height: 1.4; }
.maze-row.duo figcaption strong { color: var(--accent); }
/* solution overlay: the route sits on top of the maze and fades in on click */
.maze-overlay { position: relative; flex: 0 0 auto; }
.maze-overlay .route { position: absolute; top: 0; left: 0; background: none; box-shadow: none; }
.reveal .maze-overlay img.route.fragment:not(.visible) { opacity: 0; }

/* worksheet link chip: every slide that maps to a worksheet page carries one */
.ws-row { display: flex; gap: 0.6em; flex-wrap: wrap; margin: 0.8em 0 0; }
.ws-tag { font-family: var(--mono); font-size: 0.5em; color: var(--ink); background: var(--cool-dim);
  border-left: 3px solid var(--cool); padding: 0.35em 0.8em; border-radius: 2px; }
.ws-tag::before { content: "\1F4C4  "; }

/* programmer / runner cards */
.role-cards { display: flex; align-items: stretch; gap: 1em; margin: 0.8em 0; }
.role-card { flex: 1; background: rgba(255,255,255,0.04); border-top: 3px solid var(--accent); border-radius: 2px; padding: 0.4em 1em 0.7em; }
.role-card.runner { border-top-color: var(--cool); }
.reveal .role-card h3 { margin: 0.2em 0 0.3em; font-size: 0.95em; }
.reveal .role-card h3::before { content: none; }
.role-card p { font-size: 0.72em; margin: 0.3em 0; }
.role-card .role-rule { color: var(--ink-dim); font-size: 0.62em; }
.role-arrow { align-self: center; font-family: var(--mono); font-size: 1.6em; color: var(--ink-dim); }

/* symbols legend */
.legend { list-style: none; padding: 0; margin: 0; flex: 1; }
.legend li { display: flex; align-items: center; gap: 0.8em; font-size: 0.7em; margin: 0.55em 0; }
.legend .lg-ico { flex: 0 0 auto; width: 2em; height: 2em; }
.legend .lg-inline { width: 2.4em; height: 1em; vertical-align: -0.15em; }

/* loop card = four move cards */
.equals-demo { display: flex; align-items: center; gap: 1.4em; margin: 0.8em 0 0.4em; }
.equals-demo .eq { font-family: var(--mono); font-size: 1.6em; color: var(--ink-dim); }
.card-stack { display: flex; flex-wrap: wrap; gap: 0.5em; max-width: 60%; }

/* your-turn steps */
.task-grid { display: flex; flex-direction: column; gap: 0.5em; margin-top: 0.6em; }
.tg-row { display: flex; align-items: center; gap: 0.9em; font-size: 0.85em; }
.tg-step { flex: 0 0 auto; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--accent-dim); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-weight: 600; }
.task-list { font-size: 0.85em; }
.task-list li { margin: 0.5em 0; }

/* solutions */
.sol-short { font-family: var(--mono); font-size: 0.66em; line-height: 1.7; color: var(--ink); background: rgba(255,255,255,0.04);
  border-left: 3px solid var(--accent); padding: 0.5em 0.9em; margin: 0 0 0.5em; border-radius: 2px; }
.sol-short .sol-def { color: var(--ink-dim); }
.sol-counts { font-family: var(--mono); font-size: 0.55em; color: var(--ink-dim); margin: 0 0 0.6em; }

/* chips (shared pill style) */
.tag-row { display: flex; gap: 0.6em; flex-wrap: wrap; margin: 0.6em 0; }
.tag-chip { font-family: var(--mono); font-size: 0.7em; color: var(--accent); background: var(--accent-dim); border-radius: 4px; padding: 0.3em 0.7em; }
.slide-note { font-size: 0.6em; color: var(--ink-dim); text-align: left; font-family: var(--mono); }
/* sizes bumped for the projector */
.ws-tag { font-size: 0.6em; }
.legend li { font-size: 0.8em; }
.ladder { gap: 0.8em; }
.ladder-cap { font-size: 0.55em; }
.sol-short { font-size: 0.78em; }
.sol-counts { font-size: 0.68em; }
.role-card p { font-size: 0.85em; }
.role-card .role-rule { font-size: 0.75em; }
.maze-row.duo figcaption { font-size: 0.68em; }

/* wide, larger code for the "cards are code" slides */
.math-code-pair .code-block.wide { display: block; flex: 0 1 52%; font-size: 0.85em; padding: 0.8em 0; }
.math-code-pair .code-block.wide .code-line { padding-left: 1.4em; padding-right: 1.4em; }
.math-code-pair .code-block.wide .code-line.indent { padding-left: 3.6em; }
.math-code-pair .code-block.wide .code-line.indent2 { padding-left: 5.8em; }