/* The chain-rule page: small worked chains, and the lab that draws a network box
   by box (assets/chain.js). It reuses the workbook tokens and the simulator's
   colour code: blue = a value going forward (rose when negative), amber = a slope
   going backward, violet = a weight or bias, teal = the right token, red = the loss. */

/* The lab band runs wider than a reading column: the network develops sideways. */
.wrap.cr-wide { max-width: 1760px; }
/* Its text keeps the reading column of the other bands; only the lab runs wide. */
.cr-text { width: 100%; max-width: 1068px; margin-inline: auto; }

.sw.fw { background: color-mix(in srgb, var(--sim-blue) 20%, var(--surface)); outline: 1.5px solid var(--sim-blue); }
.sw.gr { background: var(--sim-grad-bg); outline: 1.5px solid var(--sim-grad); }
.sw.kn { background: var(--teacher-bg); outline: 1.5px solid var(--teacher); }

/* ---------- worked chains in the text (money, rule 1) ---------- */
.cr-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
}
.cr-flow .cr-n { padding: 6px 12px; border-radius: 8px; background: var(--surface); border: 1px solid var(--rule); }
.cr-flow .cr-n b { color: var(--sim-blue); }
.cr-flow .cr-o { padding: 6px 12px; border-radius: 8px; background: var(--well); border: 1.5px solid var(--ink-2); font-weight: 700; }
.cr-flow .cr-a { color: var(--ink-3); }
.cr-flow.back .cr-a { color: var(--sim-grad); font-weight: 700; }
.cr-flow.back .cr-n b { color: var(--sim-grad-ink); }
.cr-flow .lbl { font-family: var(--f-display); font-size: var(--s-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); min-width: 7.5em; }
.cr-flows { display: grid; gap: 12px; padding: 16px 18px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); overflow-x: auto; }

/* rule 2 picture */
.cr-fig { width: 100%; max-width: 640px; height: auto; display: block; }
.cr-fig text { font-family: var(--f-mono); font-size: 13px; fill: var(--ink); text-anchor: middle; font-variant-ligatures: none; }
.cr-fig .bx { fill: var(--surface); stroke: var(--ink-2); stroke-width: 1.5; }
.cr-fig .ls { fill: var(--bad-bg); stroke: var(--bad); stroke-width: 1.5; }
.cr-fig .wr { fill: none; stroke: var(--ink-3); stroke-width: 1.5; }
.cr-fig .fw { fill: var(--sim-blue); font-weight: 700; }
.cr-fig .bk { fill: var(--sim-grad-ink); font-weight: 700; font-size: 12px; }
.cr-fig .bk-big { fill: var(--sim-grad-ink); font-weight: 800; font-size: 14px; }

/* ---------- the lab ---------- */
.cr-controls { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 28px; }
.cr-top { display: grid; grid-template-columns: minmax(0, 660px) minmax(0, 1fr); gap: 26px; align-items: start; }
@media (max-width: 1100px) { .cr-top { grid-template-columns: minmax(0, 1fr); } }
.cr-mapbox, .cr-side { display: grid; gap: 10px; align-content: start; min-width: 0; }
.cr-hist { color: var(--ink-2); overflow-wrap: anywhere; }
.cr-hist b { color: var(--ink); font-family: var(--f-display); font-weight: 600; }
.cr-side .callout ol { padding-left: 1.3em; }

.cr-map { width: 100%; max-width: 640px; height: auto; display: block; }
.cr-map text { font-family: var(--f-mono); font-size: 11px; text-anchor: middle; font-variant-ligatures: none; }
.cr-me { stroke: var(--teacher); opacity: .5; }
.cr-me.neg { stroke-dasharray: 5 4; }
.cr-me.out { stroke: var(--ink-3); stroke-width: 1; opacity: .6; }
.cr-mn { cursor: pointer; }
.cr-mn circle { fill: var(--surface); stroke: var(--ink-2); stroke-width: 1.6; transition: stroke .2s, fill .2s; }
.cr-mn:hover circle { stroke: var(--ink); }
.cr-mn:focus { outline: none; }
.cr-mn:focus-visible circle { stroke: var(--answer); stroke-width: 3; }
.cr-mn text.n { font-family: var(--f-display); font-size: 12px; font-weight: 700; fill: var(--ink); }
.cr-mn text.v { font-weight: 700; fill: var(--sim-blue); }
.cr-mn text.g { fill: var(--sim-grad-ink); font-weight: 700; font-size: 10.5px; }
.cr-mn.off circle { fill: var(--well); stroke-dasharray: 3 3; }
.cr-mn.off text.v { fill: var(--ink-3); }
.cr-mn.t circle { stroke: var(--answer); stroke-width: 2.8; }
.cr-mn.t text.n { fill: var(--answer); }
.cr-mn.end circle { fill: var(--bad-bg); stroke: var(--bad); }
.cr-mn.end text.v { fill: var(--bad); }
.cr-mn.sel circle { stroke: var(--ink); stroke-width: 3; }

.cr-stepbar { display: grid; gap: 12px; }
.cr-road .sim-stop { border: 0; cursor: pointer; font-family: var(--f-mono); font-size: 0.72rem; padding: 4px 9px; }
.cr-road .sim-stop:hover { color: var(--ink); }
.cr-road .sim-stop:not(:last-child)::after { content: "◄"; margin-left: 4px; color: var(--sim-grad); }
/* The current stop is filled amber: its arrow needs the dark ink sim.css gives it. */
.cr-road .sim-stop.cur:not(:last-child)::after { color: #241600; }
.cr-steplbl { font-family: var(--f-mono); color: var(--ink-2); }
.btn:disabled { opacity: .45; cursor: default; }

.cr-canvas {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--band);
  scrollbar-width: thin;
}
.cr-canvas:focus-visible { outline-offset: -2px; }
/* learn.css caps every svg at 100%: the box view must keep its drawn size and scroll instead. */
.cr-net { display: block; max-width: none; height: auto; }
.cr-net text { font-family: var(--f-mono); font-size: 10px; fill: var(--ink-2); font-variant-ligatures: none; }

.cr-net .cr-colh { font-family: var(--f-display); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; fill: var(--ink-2); text-anchor: middle; }
.cr-net .cr-cap { font-family: var(--f-body); font-style: italic; font-size: 12.5px; fill: var(--ink); text-anchor: middle; }
.cr-net .cr-dir { font-family: var(--f-display); font-size: 11.5px; font-weight: 600; fill: var(--sim-grad-ink); text-anchor: middle; letter-spacing: .03em; }
.cr-gline { stroke: var(--rule); stroke-width: 1.5; }
.cr-frame { fill: color-mix(in srgb, var(--surface) 50%, transparent); stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 4 4; }
.cr-net .cr-frame-lab { font-family: var(--f-display); font-size: 12px; font-weight: 700; fill: var(--ink); text-anchor: middle; }

.cr-wire { fill: none; stroke: var(--ink-3); stroke-width: 1.4; opacity: .55; transition: stroke .3s, opacity .3s; }
.cr-wire.done { stroke: var(--sim-grad); opacity: .5; }
.cr-wire.cur { stroke: var(--sim-grad); opacity: 1; stroke-width: 2.6; stroke-dasharray: 7 5; animation: crBack .7s linear infinite; }
/* The path is drawn left to right; a growing offset walks the dashes back toward the source. */
@keyframes crBack { to { stroke-dashoffset: 24; } }

.cr-elab { opacity: 0; transition: opacity .3s; pointer-events: none; }
.cr-elab.on { opacity: 1; }
.cr-elab rect { fill: var(--sim-grad-bg); stroke: color-mix(in srgb, var(--sim-grad) 60%, transparent); }
.cr-net .cr-elab text { fill: var(--sim-grad-ink); font-weight: 700; text-anchor: middle; }
.cr-elab.cur rect { fill: var(--sim-grad); stroke: var(--sim-grad); }
.cr-net .cr-elab.cur text { fill: #241600; }

.cr-box { cursor: pointer; }
.cr-box:focus { outline: none; }
.cr-rect { fill: var(--surface); stroke: var(--rule); stroke-width: 1.3; transition: stroke .25s, fill .25s; }
.cr-box:hover .cr-rect { stroke: var(--ink-2); }
.cr-box:focus-visible .cr-rect, .cr-box:focus-visible .cr-lossc { stroke: var(--answer); stroke-width: 3; }
.cr-box.done .cr-rect { stroke: color-mix(in srgb, var(--sim-grad) 70%, var(--rule)); }
.cr-box.sel .cr-rect { stroke: var(--ink); stroke-width: 2.4; }
.cr-box.cur .cr-rect { stroke: var(--sim-grad); stroke-width: 2.8; fill: var(--sim-grad-bg); }
.cr-box.moved .cr-rect, .cr-box.moved .cr-lossc { stroke: var(--sim-blue); stroke-width: 2.4; stroke-dasharray: 6 3; }
.cr-net .cr-op { fill: var(--ink-2); text-anchor: middle; font-size: 10.5px; }
.cr-net .cr-op.end { text-anchor: end; }
.cr-net .cr-k { fill: var(--teacher); font-weight: 700; }
.cr-net .cr-val { font-size: 17px; font-weight: 700; fill: var(--sim-blue); text-anchor: middle; }
.cr-net .cr-val.neg { fill: var(--sim-neg); }
.cr-net .cr-val.zero { fill: var(--ink-3); }
.cr-net .cr-sub { font-size: 9.5px; text-anchor: middle; }
.cr-net .cr-sub.g { fill: var(--sim-grad-ink); font-weight: 700; }
.cr-net .cr-sub.q { fill: var(--ink-3); }
.cr-net .cr-sub.open { fill: var(--good); font-weight: 700; }
.cr-net .cr-sub.shut { fill: var(--bad); font-weight: 700; }
.cr-chip { opacity: 0; transition: opacity .3s; }
.cr-chip.on { opacity: 1; }
.cr-chip rect { fill: var(--sim-grad-bg); stroke: var(--sim-grad); }
.cr-net .cr-chip text { fill: var(--sim-grad-ink); font-weight: 700; text-anchor: middle; }

.cr-net .cr-tok { font-family: var(--f-display); font-size: 12.5px; font-weight: 700; fill: var(--ink); }
.cr-net .cr-tok.mid { text-anchor: middle; }
.cr-net .cr-tok.t { fill: var(--answer); }
.cr-net .cr-mark { fill: var(--answer); font-weight: 700; font-family: var(--f-mono); font-size: 10px; }
.cr-bar-bg { fill: var(--well); }
.cr-bar { fill: var(--prompt); transition: width .35s ease; }
.cr-bar.t { fill: var(--answer); }
.cr-net .cr-losst { fill: var(--bad); font-weight: 800; font-size: 13px; text-anchor: middle; }
.cr-lossc { fill: var(--bad-bg); stroke: var(--bad); stroke-width: 2; }
.cr-net .cr-lossv { fill: var(--bad); font-weight: 800; font-size: 16px; text-anchor: middle; }
.cr-net .cr-dtext { fill: var(--sim-blue); font-weight: 700; text-anchor: middle; }

/* The error slope p − y: what leaves the loss and enters at the logits. Its own colour (sim.css
   --sim-err) on the wires, labels and chips that carry it, so it reads as the source of every slope. */
.cr-wire.err { stroke: var(--sim-err); stroke-width: 2.2; opacity: .85; }
.cr-elab.err rect { fill: var(--sim-err-bg); stroke: var(--sim-err); }
.cr-net .cr-elab.err text { fill: var(--sim-err-ink); }
.cr-elab.err.cur rect { fill: var(--sim-err); stroke: var(--sim-err); }
.cr-net .cr-elab.err.cur text { fill: var(--paper); }
.cr-chip.err rect { fill: var(--sim-err-bg); stroke: var(--sim-err); }
.cr-net .cr-chip.err text { fill: var(--sim-err-ink); }
.cr-net .cr-errt { fill: var(--sim-err-ink); font-weight: 700; }
.cr-net .cr-errt.q { fill: var(--ink-3); font-weight: 400; }
.cr-net .cr-errlab { font-family: var(--f-display); font-size: 11.5px; font-weight: 700; fill: var(--sim-err-ink); text-anchor: middle; }
.cr-mn text.g.err { fill: var(--sim-err-ink); }
.cr-errbox .cr-eq { background: var(--surface); }
.sw.er { background: var(--sim-err-bg); outline: 1.5px solid var(--sim-err); }

/* ---------- the LLM-part labs (assets/chain_engine.js) ---------- */
/* Each part's graph sits in bands: the level before, the part itself (focus), the level after. */
.cr-band { fill: color-mix(in srgb, var(--surface) 45%, transparent); stroke: var(--rule); stroke-dasharray: 4 4; }
.cr-band.focus { fill: color-mix(in srgb, var(--answer-bg) 32%, transparent); stroke: var(--answer); stroke-width: 1.6; stroke-dasharray: none; }
.cr-net .cr-colh.focus { fill: var(--answer); }
.cr-gline.focus { stroke: var(--answer); stroke-width: 2; }
/* An id chooses a row but sends no slope: a dashed wire that never lights up. */
.cr-wire.ref { stroke-dasharray: 3 4; opacity: .7; }
.cr-net .cr-val.int { fill: var(--ink); }
.cr-net .cr-losst.end { text-anchor: end; }
.cr-part-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
/* The index of parts: a card per group (.catches), a plain list inside each card. */
.cr-index { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.catches .cr-index li { border: 0; padding: 0; background: none; display: block; font-size: var(--s-sm); line-height: 1.4; }
.cr-index li a { font-family: var(--f-display); font-weight: 600; }
.cr-index li .muted { display: block; font-size: var(--s-xs); }

.cr-keys { font-size: 0.82rem; }

.cr-bottom { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 1100px) { .cr-bottom { grid-template-columns: minmax(0, 1fr); } }
.cr-card { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); padding: 16px 18px; display: grid; gap: 14px; min-width: 0; }
.cr-card-main { display: grid; gap: 14px; min-width: 0; }
.cr-card-h { display: grid; gap: 4px; justify-items: start; }
.cr-card-h h4 { font-size: var(--s-lg); }
.cr-three {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--well);
  font-family: var(--f-display);
  font-size: var(--s-xs);
  font-weight: 600;
  color: var(--ink-2);
}
.cr-sec { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--rule); min-width: 0; font-size: 0.95rem; }
.cr-sec > .eyebrow { margin: 0; }
.cr-eq {
  font-family: var(--f-mono);
  font-size: 0.86rem;
  background: var(--well);
  padding: 8px 12px;
  border-radius: 8px;
  overflow-x: auto;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-variant-ligatures: none;
}
.cr-nudge .readouts .ro { min-width: 104px; }
.cr-note { font-size: var(--s-sm); color: var(--ink-2); padding: 10px 12px; border-radius: 8px; background: var(--well); }
.cr-note.ok { background: var(--good-bg); color: var(--ink); }
.cr-note.off { background: var(--bad-bg); color: var(--ink); }

.cr-knobs { display: grid; gap: 10px; min-width: 0; --ph-c: var(--teacher); }
.cr-knobs > .eyebrow { margin: 0; }
.cr-kgrid { display: grid; gap: 14px; }
.cr-kh { font-family: var(--f-display); font-size: var(--s-sm); font-weight: 700; margin-bottom: 4px; }
.cr-knobs .sim-tab { font-size: 0.8rem; font-family: var(--f-mono); }
.cr-knobs .sim-tab th { font-family: var(--f-display); }
.cr-knobs tbody tr { cursor: pointer; }
.cr-knobs tbody tr:hover td { background: var(--well); }
.cr-knobs tbody tr:focus { outline: none; }
.cr-knobs tbody tr:focus-visible td { background: var(--well); box-shadow: inset 0 -2px 0 var(--answer); }

/* ---------- cheat sheet ---------- */
.cr-sheet td:first-child { min-width: 10.5em; }
.cr-sheet .cr-three { white-space: nowrap; }