/* /css/chapters/prologue.css: Chapter 0, "What I Cannot Create" (package C00). Tokens only; every rule is scoped
   under [data-chapter="prologue"]. Covers the plates (cast, loop, Toolbox shelf, rearrangement proof), the
   scratch line in the code primer, and the chapter widget prologue-triangle (the Pythagoras workbench). */

/* ---------------------------------------------------------------- chapter head */
[data-chapter="prologue"] .pl-epigraph {
  margin-top: var(--s-5);
  max-width: 34rem;
  border-left-color: var(--c-light);
  font-family: var(--font-serif);
  font-size: 1.15rem;
}
[data-chapter="prologue"] .pl-epigraph p { margin: 0; }

/* ---------------------------------------------------------------- prose rhythm
   layout.css's flow rule (:where(…) > * + *) has zero specificity, so base.css's `p { margin: 0 }` wins and
   consecutive paragraphs touch (docs/requests/prologue.md #5). Restore the gap locally, leaving headings alone. */
[data-chapter="prologue"] :where(.beat, .callout, .reconcile, .recap, .deep-dive, details.solution, details.hint, .ex-prompt, .ex-model, .code-task, .sidenote, .sagredo) > :not(h2, h3, h4) + :where(p, ul, ol, pre, blockquote, dl, table, .pl-scratch) {
  margin-top: var(--flow, 1em);
}

/* ---------------------------------------------------------------- inline name colors (text tokens only) */
[data-chapter="prologue"] .pl-lin { color: var(--c-lab); }
[data-chapter="prologue"] .pl-rae { color: var(--c-rocket); }
[data-chapter="prologue"] .pl-light { color: var(--c-light-text); }
[data-chapter="prologue"] .pl-inv { color: var(--c-inv); }
[data-chapter="prologue"] .pl-you { color: var(--c-you); }

/* ---------------------------------------------------------------- plates: shared label sizes */
[data-chapter="prologue"] .pl-name { font-size: 19px; font-weight: 700; letter-spacing: .01em; }
[data-chapter="prologue"] .pl-step { font-size: 15px; font-weight: 700; }
[data-chapter="prologue"] .pl-caps { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; fill: var(--ink-muted); }
[data-chapter="prologue"] .pl-say { font-size: 19px; }
[data-chapter="prologue"] .pl-loop-ic { color: var(--ink-muted); }
/* phones: plates shrink to about 0.65 of their authored size, so their small print grows to stay legible */
@media (max-width: 600px) {
  [data-chapter="prologue"] .plate .p-annot { font-size: 15px; }
  [data-chapter="prologue"] .plate .pl-step { font-size: 17px; }
  [data-chapter="prologue"] .plate .tool-name { font-size: 16px; }
  [data-chapter="prologue"] .plate .tool-state { font-size: 14px; }
}

/* areas inside squares (static plates and the workbench) */
[data-chapter="prologue"] .pl-sq-leg, [data-chapter="prologue"] .pt-sq-leg {
  fill: color-mix(in srgb, var(--ink) 6%, transparent);
  stroke: var(--ink-muted);
  stroke-width: 1.25;
  stroke-linejoin: round;
}
[data-chapter="prologue"] .pl-sq-long, [data-chapter="prologue"] .pt-sq-long {
  fill: var(--tint-inv);
  stroke: var(--c-inv);
  stroke-width: 1.25;
  stroke-linejoin: round;
}
[data-chapter="prologue"] .pl-tri {
  fill: color-mix(in srgb, var(--ink) 12%, var(--surface));
  stroke: var(--ink);
  stroke-width: 1.25;
  stroke-linejoin: round;
}
[data-chapter="prologue"] .pl-area, [data-chapter="prologue"] .pt-area {
  fill: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  paint-order: stroke;
  stroke: var(--surface);
  stroke-width: 3px;
  stroke-linejoin: round;
}
[data-chapter="prologue"] .pl-area-long, [data-chapter="prologue"] .pt-area-long { fill: var(--c-inv); }
[data-chapter="prologue"] .pl-ab { font-size: 20px; }

/* ---------------------------------------------------------------- Plate 0.3, the Toolbox shelf */
[data-chapter="prologue"] .pl-board { fill: var(--surface-2); stroke: var(--rule); stroke-width: 1.5; }
[data-chapter="prologue"] .pl-pegboard { fill: url(#pl-peg); stroke: none; }
[data-chapter="prologue"] .pl-peg-hole { fill: color-mix(in srgb, var(--ink) 16%, transparent); }
[data-chapter="prologue"] .pl-peg { fill: var(--ink-muted); }
[data-chapter="prologue"] .tool-shadow {
  fill: var(--surface);
  stroke: var(--ink-muted);
  stroke-width: 1.25;
  stroke-dasharray: 5 4;
  transition: fill var(--t-ui) var(--ease), stroke var(--t-ui) var(--ease);
}
[data-chapter="prologue"] .tool-icon {
  color: var(--ink-muted);
  opacity: .5;
  stroke-dasharray: 1.6 1.4;
  transition: color var(--t-morph) var(--ease), opacity var(--t-morph) var(--ease);
}
[data-chapter="prologue"] .tool-lock { color: var(--ink-muted); }
[data-chapter="prologue"] .tool-check { display: none; color: var(--c-ok); }
[data-chapter="prologue"] .tool-name { fill: var(--ink); font-family: var(--font-mono); font-size: 14px; }
[data-chapter="prologue"] .tool-state { fill: var(--ink-muted); font-family: var(--font-sans); font-size: 12px; }
[data-chapter="prologue"] .tool-slot[data-tool="hypotenuse"]:not(.is-earned) .tool-state { fill: var(--c-light-text); font-weight: 700; }
[data-chapter="prologue"] .tool-slot.is-earned .tool-shadow { fill: var(--tint-you); stroke: var(--c-you); stroke-dasharray: none; stroke-width: 2; }
[data-chapter="prologue"] .tool-slot.is-earned .tool-icon { color: var(--c-you); opacity: 1; stroke-dasharray: none; }
[data-chapter="prologue"] .tool-slot.is-earned .tool-lock { display: none; }
[data-chapter="prologue"] .tool-slot.is-earned .tool-check { display: inline; }
[data-chapter="prologue"] .tool-slot.is-earned .tool-name, [data-chapter="prologue"] .tool-slot.is-earned .tool-state { fill: var(--c-you); font-weight: 700; }
[data-chapter="prologue"] .tool-slot.is-borrowed .tool-icon { color: var(--ink); opacity: .85; stroke-dasharray: none; }
[data-chapter="prologue"] .tool-slot.is-borrowed .tool-shadow { stroke-dasharray: none; }
[data-chapter="prologue"] .pl-shelf-status {
  font-family: var(--font-sans);
  font-size: .85rem;
  color: var(--ink-muted);
  padding-left: var(--s-4);
  border-left: 3px solid var(--c-you);
}

/* ---------------------------------------------------------------- color legend */
[data-chapter="prologue"] .pl-colors { list-style: none; padding: 0; display: grid; gap: var(--s-2); }
[data-chapter="prologue"] .pl-colors li { display: flex; align-items: center; gap: var(--s-3); }
[data-chapter="prologue"] .pl-colors svg { flex: none; width: 48px; height: 12px; overflow: visible; }

/* ---------------------------------------------------------------- Try-it extras and the data card */
[data-chapter="prologue"] .pl-compare { font-size: .92em; }
[data-chapter="prologue"] .pl-compare > summary {
  font-family: var(--font-sans);
  font-size: .8rem;
  font-weight: 600;
  color: var(--c-lab);
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  gap: .4em;
}
[data-chapter="prologue"] .pl-compare > summary::before { content: "\25B8"; transition: transform var(--t-ui) var(--ease); }
[data-chapter="prologue"] .pl-compare[open] > summary::before { transform: rotate(90deg); }
[data-chapter="prologue"] .pl-compare > p { margin-top: var(--s-2); }
[data-chapter="prologue"] [data-goal] .try-done { margin-left: auto; font-size: .72rem; }
[data-chapter="prologue"] [data-goal].is-done { border-left-color: var(--c-ok); }
@media (prefers-reduced-motion: no-preference) {
  [data-chapter="prologue"] [data-goal] .try-done { animation: pl-pulse 300ms var(--ease) 1; }
}
@keyframes pl-pulse { from { transform: scale(.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
[data-chapter="prologue"] .pl-datacard { box-shadow: var(--shadow); }

/* ---------------------------------------------------------------- the scratch line (code primer) */
[data-chapter="prologue"] .pl-subhead { margin-top: var(--s-5); font-family: var(--font-sans); font-size: .9rem; letter-spacing: .01em; }
[data-chapter="prologue"] .pl-scratch { margin-top: var(--s-3); }
[data-chapter="prologue"] .pl-scratch .code-editor { --ce-rows: 2 !important; } /* the editor sets at least 5 rows inline; one line needs two */
[data-chapter="prologue"] .recap .pl-subhead { margin-top: var(--s-4); font-weight: 700; }
[data-chapter="prologue"] .scratch-fallback {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-s);
  padding: var(--s-3) var(--s-4);
  font-size: .82rem;
}
[data-chapter="prologue"] .scratch-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin-top: var(--s-3); }
[data-chapter="prologue"] .scratch-out {
  font-family: var(--font-mono);
  font-size: .9rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
  padding: .2em .6em;
  border-radius: var(--r-s);
  min-height: 2em;
  display: inline-flex;
  align-items: center;
  overflow-wrap: anywhere;
}
[data-chapter="prologue"] .scratch-out.is-ok { color: var(--c-you); background: var(--tint-you); font-weight: 700; }
[data-chapter="prologue"] .scratch-out.is-bad { color: var(--c-bad); background: var(--tint-bad); font-family: var(--font-sans); font-size: .82rem; }
[data-chapter="prologue"] .scratch-note { margin-top: var(--s-2); font-family: var(--font-sans); font-size: .85rem; }
[data-chapter="prologue"] .scratch-note:empty { display: none; }

/* ---------------------------------------------------------------- lab-prologue-2: the Pythagoras workbench */
/* Reserve the live widget's height so mounting doesn't shift the page. */
[data-chapter="prologue"] #lab-prologue-2 .lab-stage { min-height: 560px; }
@media (max-width: 759px) { [data-chapter="prologue"] #lab-prologue-2 .lab-stage { min-height: 820px; } }
[data-chapter="prologue"] #lab-prologue-1 .lab-stage { min-height: 940px; }
@media (max-width: 899px) { [data-chapter="prologue"] #lab-prologue-1 .lab-stage { min-height: 1210px; } }
@media (max-width: 719px) { [data-chapter="prologue"] #lab-prologue-1 .lab-stage { min-height: 1270px; } }
@media (max-width: 419px) { [data-chapter="prologue"] #lab-prologue-1 .lab-stage { min-height: 1370px; } [data-chapter="prologue"] #lab-prologue-1 .stx-mu-last { min-height: 4.35em; } }
@media (max-width: 359px) { [data-chapter="prologue"] #lab-prologue-1 .lab-stage { min-height: 1470px; } [data-chapter="prologue"] #lab-prologue-1 .stx-mu-big { min-height: 2.2em; } }

[data-chapter="prologue"] .pt-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
@container (min-width: 700px) {
  [data-chapter="prologue"] .pt-main { grid-template-columns: minmax(0, 1.35fr) minmax(14rem, 1fr); align-items: start; }
}
[data-chapter="prologue"] .pt-stage { background: var(--surface); border-radius: var(--r-m); border: 1px solid var(--rule); overflow: hidden; }
[data-chapter="prologue"] .pt-svg { display: block; width: 100%; height: auto; max-width: 560px; margin: 0 auto; touch-action: none; -webkit-user-select: none; user-select: none; }
[data-chapter="prologue"] .pt-side { display: flex; flex-direction: column; gap: var(--s-3); }
[data-chapter="prologue"] .pt-panel p { margin: 0; }
[data-chapter="prologue"] .pt-panel p + p { margin-top: 6px; }
[data-chapter="prologue"] .pt-sum { font-variant-numeric: tabular-nums; font-size: .95rem; }
[data-chapter="prologue"] .pt-c { font-variant-numeric: tabular-nums; font-size: .95rem; color: var(--c-inv); }
[data-chapter="prologue"] .pt-c-val { font-size: 1.35rem; font-weight: 700; }
[data-chapter="prologue"] .pt-c-inv { font-weight: 700; }
[data-chapter="prologue"] .pt-span { color: var(--ink-muted); }
[data-chapter="prologue"] .pt-reveal { min-height: 32px; padding: 2px 10px; font-size: .8rem; margin-top: 6px; border: 1px solid var(--rule); background: var(--surface); }
[data-chapter="prologue"] .pt-proj { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 6 4; stroke-linecap: round; }
[data-chapter="prologue"] .pt-found { list-style: none; padding: 0; margin: 2px 0 6px; display: flex; flex-wrap: wrap; gap: 6px; }
[data-chapter="prologue"] .pt-found-chip { color: var(--c-inv); border-color: color-mix(in srgb, var(--c-inv) 45%, var(--rule)); background: var(--tint-inv); font-variant-numeric: tabular-nums; }
[data-chapter="prologue"] .pt-found-empty { color: var(--ink-muted); }
[data-chapter="prologue"] .pt-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--s-2) var(--s-5); align-items: center; }
[data-chapter="prologue"] .pt-cells-btn[aria-pressed="true"] { background: var(--surface-2); }

[data-chapter="prologue"] .pt-sq { transition: none; }
[data-chapter="prologue"] .pt-cells { fill: none; stroke: color-mix(in srgb, var(--ink) 22%, transparent); stroke-width: .75; }
[data-chapter="prologue"] .pt-cells-long { stroke: color-mix(in srgb, var(--c-inv) 40%, transparent); }
[data-chapter="prologue"] .pt-handle { cursor: grab; outline: none; }
[data-chapter="prologue"] .pt-handle.is-dragging { cursor: grabbing; }
[data-chapter="prologue"] .pt-handle-ring { fill: transparent; stroke: none; }
[data-chapter="prologue"] .pt-handle-dot { fill: var(--surface); stroke: var(--ink); stroke-width: 2.5; transition: r var(--t-ui) var(--ease); }
[data-chapter="prologue"] .pt-handle:hover .pt-handle-dot, [data-chapter="prologue"] .pt-handle.is-dragging .pt-handle-dot { fill: var(--surface-2); r: 8.5; }
[data-chapter="prologue"] .pt-handle:focus-visible .pt-handle-ring { stroke: var(--focus); stroke-width: 3; fill: transparent; }
@media (prefers-reduced-motion: reduce) {
  [data-chapter="prologue"] .tool-icon, [data-chapter="prologue"] .tool-shadow, [data-chapter="prologue"] .pt-handle-dot { transition: none; }
}

/* ---------------------------------------------------------------- the muon opening (docs/redesign/prologue.md) */
[data-chapter="prologue"] .pl-orient, [data-chapter="prologue"] .pl-rulebook { margin: var(--s-6) 0; }
[data-chapter="prologue"] .pl-orient { max-width: 40rem; }
[data-chapter="prologue"] :is(.pl-orient, .pl-rulebook, .pl-key) ol { margin: var(--s-3) 0 0; padding-left: 1.5em; }
[data-chapter="prologue"] :is(.pl-orient, .pl-rulebook, .pl-key, .pl-road, .pl-suspects) li + li { margin-top: var(--s-2); }
[data-chapter="prologue"] .pl-rulebook li em { display: block; font-size: .85rem; color: var(--ink-muted); }
@media (min-width: 900px) { [data-chapter="prologue"] .pl-rulebook > .sidenote { margin: -11em calc(-1 * (var(--sn-w) + var(--sn-gap) + var(--s-5) + 1px)) 0 0; } }
[data-chapter="prologue"] .pl-part { margin-bottom: var(--s-2); font: 700 .75rem var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
[data-chapter="prologue"] .pl-key { padding: var(--s-4) var(--s-5) var(--s-3); border-bottom: 1px solid var(--rule); font-size: .92rem; }
[data-chapter="prologue"] .pl-key > details { margin-top: var(--s-2); }
[data-chapter="prologue"] .pl-key summary { font: 700 .78rem var(--font-sans); letter-spacing: .08em; text-transform: uppercase; }
[data-chapter="prologue"] .pl-key :is(.stx-mu-key-muon, .stx-mu-key-x) { display: inline-block; margin-right: .35em; vertical-align: -1px; }
@media (min-width: 900px) { [data-chapter="prologue"] .pl-key ol { columns: 2; column-gap: var(--s-6); } [data-chapter="prologue"] .pl-key li { break-inside: avoid; } }
[data-chapter="prologue"] .pl-step-no { font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink-muted); }
[data-chapter="prologue"] .pl-score { width: 100%; margin-top: var(--s-4); border-collapse: collapse; font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
[data-chapter="prologue"] .pl-score :is(th, td) { padding: var(--s-2); border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
[data-chapter="prologue"] .pl-sub, [data-chapter="prologue"] .pl-fine { display: block; font-size: .85rem; font-weight: 400; color: var(--ink-muted); }
[data-chapter="prologue"] .pl-score .pl-big td { font-size: 1.3rem; font-weight: 700; line-height: 1.2; }
[data-chapter="prologue"] .pl-dots { display: block; width: 7.5rem; max-width: 100%; height: auto; margin-bottom: var(--s-1); }
[data-chapter="prologue"] .pl-gap { margin-top: var(--s-4); text-align: center; font: 700 1.15rem var(--font-sans); }
@media (max-width: 480px) { [data-chapter="prologue"] .pl-score :is(th, td) { padding: var(--s-2) var(--s-1); } [data-chapter="prologue"] .pl-score .pl-big td { font-size: 1.1rem; } }
[data-chapter="prologue"] .pl-score thead th { font-size: 1rem; font-weight: 700; color: var(--ink); }
/* the guided lab's first card: "Muon’s clock" over its long value, so the fall-time labels keep their width */
[data-chapter="prologue"] #lab-prologue-1 .stx-panel:first-child .stx-mu-stat > :nth-child(-n+2) { grid-column: 1 / -1; }
[data-chapter="prologue"] #lab-prologue-1 .stx-panel:first-child .stx-mu-stat > b:nth-child(2) { text-align: left; font-size: .95rem; }
[data-chapter="prologue"] :is(.pl-orient, .pl-rulebook) > :is(p, ol) + :is(p, ol) { margin-top: var(--s-3); }
[data-chapter="prologue"] #lab-prologue-1 .stx-mu-big { font-size: 1.35rem; }
/* round 1 (§9): reduced-motion copy, Sagredo in the main column, the reconcile line leads, Drop above the column */
[data-chapter="prologue"] .pl-still { display: none; }
@media (prefers-reduced-motion: reduce) { [data-chapter="prologue"] .pl-motion { display: none; } [data-chapter="prologue"] .pl-still { display: inline; } }
html[data-motion="reduced"] [data-chapter="prologue"] .pl-motion { display: none; }
html[data-motion="reduced"] [data-chapter="prologue"] .pl-still { display: inline; }
[data-chapter="prologue"] .sagredo.pl-inline { float: none; width: auto; margin: var(--s-4) 0; padding: var(--s-1) 0 var(--s-1) var(--s-3); font-size: 1rem; }
[data-chapter="prologue"] .pl-rc { font-size: 1.05rem; }
[data-chapter="prologue"] #lab-prologue-1 .stx-mu-top { margin-bottom: var(--s-2); }
[data-chapter="prologue"] #lab-prologue-1 .stx-mu-last { flex: 1 1 16rem; margin: 0; min-height: 2.9em; font-size: .85rem; color: var(--ink); }