/* loopmath.ai: the figures' styles, unchanged from the live site's proto.css, r2.css, r3.css, r4.css and r5.css, minus the page
   layout (now in loopmath.css). Colours come from the names loopmath.css defines. The overrides at the end fit them to the page. */

/* from proto.css: the success-cost curve, its legend and detail, the terminal, How it works's diagrams */
pre.term { background: var(--code-bg); color: var(--code-ink); border-radius: 8px; padding: 1rem 1.1rem; overflow-x: auto; line-height: 1.55; font-size: 0.82rem; margin: 0; }
pre.term .c { color: var(--code-dim); }
pre.term .p { color: #7fa7ff; user-select: none; }
/* The curve component */
.curve { background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 0.9rem 0.9rem 0.6rem; }
.curve-head { display: flex; justify-content: space-between; gap: 0.75rem; align-items: baseline; flex-wrap: wrap; margin-bottom: 0.25rem; }
.curve-head h3 { font-size: 0.95rem; margin: 0; }
.curve-body { display: grid; gap: 0.75rem; }
@media (min-width: 60rem) { .curve.wide .curve-body { grid-template-columns: minmax(0, 1.6fr) minmax(15rem, 1fr); align-items: start; } }
.curve svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: manipulation; }
.curve .axis text, .curve .lbl { font: 400 11px var(--sans); fill: var(--muted); }
.curve .lbl.strong { fill: var(--ink); font-weight: 600; }
.curve .lbl { paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.curve-head .fig { font: 600 0.72rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.curve .curve-title { font-size: 0.95rem; margin: 0.3rem 0 0.15rem; }
@media (max-width: 34rem) { .curve .reading { display: none; } }
.curve .reading { font-style: italic; font-size: 0.85rem; color: var(--ink-2); margin: 0 0 0.35rem; }
.curve .grid line { stroke: var(--rule); stroke-width: 1; }
.curve .cheapest { fill: none; stroke: var(--ink-2); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; opacity: 0.35; }
.curve .whisker { stroke-width: 1.5; stroke-linecap: round; opacity: 0.45; }
.curve .hit { fill: transparent; cursor: pointer; }
.curve .hit:focus { outline: none; }
.curve g.pt.sel .mark, .curve g.pt:hover .mark, .curve g.pt:focus-within .mark { transform-box: fill-box; transform-origin: center; transform: scale(1.25); }

.legend { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; font-size: 0.78rem; color: var(--ink-2); margin: 0.4rem 0 0.2rem; padding: 0; list-style: none; }
.legend li { display: inline-flex; align-items: center; gap: 0.35rem; }
.legend svg { width: 14px; height: 14px; }
.detail { border: 1px solid var(--rule); border-radius: 8px; padding: 0.8rem 0.9rem; font-size: 0.88rem; background: var(--bg); min-height: 11rem; }
.detail .role { font: 600 0.7rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.35rem; }
.detail .name { font-weight: 650; font-size: 1rem; margin-bottom: 0.5rem; }
.pieces { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin-bottom: 0.7rem; }
.piece { border: 1px solid var(--ink-2); border-radius: 5px; padding: 0.2rem 0.45rem; font-size: 0.76rem; line-height: 1.3; background: var(--surface); }
.piece b { display: block; font-weight: 600; }
.piece span { color: var(--muted); }
.arrow { color: var(--muted); font-size: 0.8rem; }
.pieces .seg { display: inline-flex; align-items: center; gap: 0.3rem; }
.facts { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.3rem 0.8rem; margin: 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; }
.facts dd .sub { display: block; font-size: 0.76rem; color: var(--muted); white-space: nowrap; }
.facts dd strong { font-weight: 650; }
.facts dd.def { grid-column: 1 / -1; text-align: left; font-size: 0.76rem; color: var(--muted); margin-top: -0.1rem; }
.facts .sep { grid-column: 1 / -1; border-top: 1px solid var(--rule); margin: 0.35rem 0; }
details.table-view { margin-top: 0.5rem; font-size: 0.82rem; }
details.table-view summary { cursor: pointer; color: var(--ink-2); }
.tbl-scroll { overflow-x: auto; }
table.data { border-collapse: collapse; width: 100%; margin-top: 0.5rem; font-variant-numeric: tabular-nums; }
table.data th, table.data td { text-align: left; padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--rule); white-space: nowrap; }
table.data th { font-weight: 600; color: var(--muted); }
.caption { font-size: 0.8rem; color: var(--muted); margin: 0.5rem 0 0; }
/* Terminal replay */
.replay-tabs { display: flex; gap: 0.25rem; margin-bottom: 0.5rem; overflow-x: auto; scrollbar-width: none; }
.replay-tabs button { font: 600 0.82rem/1 var(--sans); padding: 0.55rem 0.8rem; border-radius: 6px; border: 1px solid var(--rule); background: var(--surface); color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.replay-tabs button[aria-selected="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.replay-note { font-size: 0.85rem; color: var(--ink-2); margin: 0.6rem 0 0; min-height: 2.8em; }
/* Workflow shape diagrams (how it works) */
.shapes { display: grid; gap: 0.75rem; }
@media (min-width: 44rem) { .shapes { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .shapes { grid-template-columns: 1fr 1fr 1fr; } }
.shape { border: 1px solid var(--rule); border-radius: 8px; padding: 0.8rem; background: var(--surface); }
.shape h3 { font-size: 0.92rem; }
.shape code { font-size: 0.75rem; }
.flow { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; margin: 0.6rem 0 0.2rem; }
.flow .stack { display: grid; gap: 0.2rem; }
.flow .piece { font-size: 0.75rem; }
.flow .loop { font-size: 0.72rem; color: var(--accent); }
.eq { font-family: var(--mono); font-size: 0.88rem; background: var(--card); border-radius: 6px; padding: 0.6rem 0.8rem; overflow-x: auto; }
pre.term.wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
pre.term .nw { white-space: pre; }
@media (max-width: 40rem) {
  pre.term { font-size: 0.75rem; padding: 0.8rem; }
  .replay-tabs button { padding: 0.5rem 0.6rem; }
}

/* from r2.css: space for lazy figures, the shared figure frame and controls */
[data-mount="curve"] { min-height: 30rem; }
[data-mount].mounted { min-height: 0; }
.fig, .noise { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.9rem 0.9rem 0.8rem; }
.fig-svg svg, .nz-plot svg { display: block; overflow: visible; }
.fig text, .noise text { font: 400 11px var(--sans); fill: var(--muted); }
.fig .lbl { fill: var(--ink-2); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.fig .lbl.strong { fill: var(--ink); font-weight: 600; }
.fig .grid, .noise .grid { stroke: var(--rule); stroke-width: 1; }
.fig .zero { stroke: var(--ink-2); stroke-width: 1.2; }
.fig .area-cost { fill: var(--ink); opacity: 0.07; }
.fig .area-gain { fill: var(--accent); opacity: 0.14; }
.fig .line-main { stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; }
.fig .pt-accent { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.fig .pt-ring { fill: var(--surface); stroke: var(--accent); stroke-width: 2.5; }
.fig .pt-ink { fill: var(--surface); stroke: var(--ink); stroke-width: 2.5; }
.fig .pt-dot { fill: var(--dot); }
.fig .band { stroke-width: 6; stroke-linecap: round; opacity: 0.28; }
.fig .band.ink { stroke: var(--ink); }
.fig .true-line { stroke: var(--ink-2); stroke-width: 1.2; stroke-dasharray: 3 3; }
.fig .box { fill: var(--card); stroke: var(--rule); }
.fig .box.accent { stroke: var(--accent); stroke-width: 1.5; }
.fig .wire { fill: none; stroke: var(--ink-2); stroke-width: 1.2; opacity: 0.6; }
.fig .track { fill: var(--rule); }
.fig .fill { fill: var(--ink-2); }
.fig .fill.accent { fill: var(--accent); }
.fig-read { font-size: 0.92rem; color: var(--ink-2); margin: 0.6rem 0 0; min-height: 2.9em; }
.fig-ctl, .nz-ctl { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.7rem; align-items: center; }
.fig-ctl button, .nz-ctl button { font: 500 0.85rem/1.2 var(--sans); color: var(--ink); background: var(--surface); border: 1px solid var(--rule); border-radius: 6px; padding: 0.5rem 0.75rem; min-height: 2.4rem; cursor: pointer; }
.fig-ctl button:hover, .nz-ctl button:hover { border-color: var(--ink-2); }
.fig-ctl button:disabled, .nz-ctl button:disabled { opacity: 0.5; cursor: default; }
.fig-ctl .btn-run, .nz-ctl .btn-run { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.nz-ctl .btn-run.nudge { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.replay-btn { font: 500 0.8rem var(--sans); color: var(--muted); background: none; border: 0; padding: 0.4rem 0; margin-top: 0.3rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.replay-btn:disabled { opacity: 0.5; }
.curve .lbl.count { font-family: var(--mono); fill: var(--muted); font-weight: 400; }
pre.term .pending { visibility: hidden; }

/* from r3.css */
.fig svg.clip { overflow: hidden; }
.fig .lane { stroke: var(--rule); stroke-width: 1; }
.fig .tint { fill: var(--accent); opacity: 0.13; }
.fig .curtain { fill: var(--surface); }
.fig .head { stroke: var(--accent); stroke-width: 1; opacity: 0; transition: opacity 0.3s; }
.fig .ref { stroke: var(--ink-2); stroke-width: 1.2; stroke-dasharray: 4 3; }
.fig .dash { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-dasharray: 6 4; }
.fig .path-lose { fill: none; stroke: var(--ink-2); stroke-width: 2.2; stroke-linecap: round; }
.fig .switch { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 2 3; }
.fig .shade { fill: var(--ink); opacity: 0.045; }
.fig .range { opacity: 0.14; }
.fig .range.light { opacity: 0.22; }
.fig .mean { fill: none; stroke-width: 2; stroke-linejoin: round; }
.fig .note { transition: opacity 0.35s; }
.fig .lbl.role { fill: var(--accent); font-weight: 600; }
.fig .lbl.count { font-family: var(--mono); fill: var(--muted); }

.fig-key { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; margin-top: 0.55rem; font-size: 0.78rem; color: var(--ink-2); }
.fig-key span { display: inline-flex; align-items: center; gap: 0.4rem; }
.fig-key i { display: inline-block; flex: none; }
.fig-key i.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.fig-key i.ring { width: 7px; height: 7px; border-radius: 50%; border: 1.4px solid var(--ink); box-sizing: border-box; }
.fig-key i.cell { width: 11px; height: 14px; border-radius: 2px; background: color-mix(in srgb, var(--accent) 13%, var(--surface)); }
.fig-key i.sw { width: 14px; height: 3px; border-radius: 2px; background: currentColor; }
@media (prefers-reduced-motion: reduce) {
  .ledger li, .fig .note, .fig .head, .story.sticky .story-step { transition: none; }
}

/* from r4.css: the comparison table and the worked sum */
.compare { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.compare th, .compare td { text-align: left; vertical-align: top; padding: 0.6rem 0.8rem 0.6rem 0; border-top: 1px solid var(--rule); }
.compare thead th { font: 600 0.66rem var(--mono); letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); border-top: 0; padding-top: 0; }
.compare tbody th { font-weight: 600; color: var(--ink); width: 36%; }
.compare td { color: var(--ink-2); }
.compare tr.rec th, .compare tr.rec td { background: color-mix(in srgb, var(--accent) 6%, transparent); }

/* item 4, B: the expected improvement as a worked sum */
.sum { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.4rem 1.1rem; margin: 0; }
.sum div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.55rem 0; border-top: 1px solid var(--rule); }
.sum div:first-child { border-top: 0; }
.sum dt { color: var(--ink-2); font-size: 0.9rem; }
.sum dt small { display: block; color: var(--muted); font-size: 0.76rem; }
.sum dd { margin: 0; font: 600 0.95rem var(--mono); color: var(--ink); white-space: nowrap; }
.sum div.res dt, .sum div.res dd { color: var(--accent); font-weight: 600; }
.sum div.res { border-top: 1.5px solid var(--ink); }

/* from r5.css */
[data-mount="pair5"] { min-height: var(--mh, 25rem); }
[data-mount="receipt5"] { min-height: var(--mh, 12.5rem); }
[data-mount="tasks5"] { min-height: var(--mh, 39rem); }
[data-mount="tree5"] { min-height: var(--mh, 22rem); }

/* Fig. 2: your goal and the pick, as two workflow graphs */
.fig .task-pill { fill: var(--card); stroke: var(--rule); }
.fig .task-t { font: 600 12px var(--sans); fill: var(--ink); }
.fig .card { stroke-width: 1; }
.fig .card.goal { fill: var(--surface); stroke: var(--ink-2); stroke-opacity: 0.45; }
.fig .card.pick { fill: color-mix(in srgb, var(--accent) 3%, var(--surface)); stroke: var(--accent); stroke-width: 1.4; }
.fig .card-rule { stroke: var(--rule); }
.fig .role-t { font: 600 10.5px var(--mono); letter-spacing: 0.08em; fill: var(--ink); }
.fig .role-t.pick { fill: var(--accent); }
.fig .wf-name { font: 600 14px var(--sans); fill: var(--ink); }
.fig .wf-facts { font: 400 11px var(--mono); fill: var(--ink-2); }
.fig .mk-goal { fill: var(--accent); stroke: var(--surface); stroke-width: 1.5; }
.fig .mk-pick { fill: var(--surface); stroke: var(--accent); stroke-width: 2; }
.fig .st { fill: var(--surface); stroke: var(--ink); stroke-width: 1.4; }
.fig .st.acc { stroke: var(--accent); }
.fig .st-name { font: 600 12px var(--sans); fill: var(--ink); }
.fig .st-model { font: 400 11px var(--sans); fill: var(--ink-2); }
.fig .ed { stroke: var(--ink-2); stroke-width: 1.3; fill: none; }
.fig .ed.loop { stroke-dasharray: 3.5 3; }
.fig .ah { fill: var(--ink-2); }
.fig .tok { fill: var(--accent); }
.fig .wire2 { fill: none; stroke: var(--ink-2); stroke-width: 1.2; opacity: 0.7; }
.fig .loop-t { font: 400 10.5px var(--sans); fill: var(--muted); }
.fig .out-t { font: 600 12px var(--sans); fill: var(--ink); }
.fig .out-t.wait { font-weight: 400; fill: var(--muted); }
.fig .ref-box { fill: var(--ink); }
.fig .ref-t { font: 600 12.5px var(--sans); fill: var(--surface); }
.fig .ref-s { font: 400 11px var(--sans); fill: var(--surface); opacity: 0.78; }

/* "How it learns": trees of estimates, and estimates by family */
.tree5 .lvl-t { font: 600 10px var(--mono); letter-spacing: 0.08em; fill: var(--muted); }
.tree5 .tedge { fill: none; stroke: var(--rule); stroke-width: 1.5; transition: opacity 0.5s; }
.tree5 .thot { fill: none; stroke: var(--accent); stroke-width: 2.2; opacity: 0; transition: opacity 0.25s; }
.tree5 .thot.on { opacity: 1; }
.tree5 .tsplit { stroke: var(--rule); stroke-dasharray: 2 4; }
.tree5 .chip { fill: var(--surface); stroke: var(--ink-2); stroke-width: 1.2; }
.tree5 .chip.grp { fill: var(--card); stroke: var(--rule); }
.tree5 .chip.hot { stroke: var(--accent); stroke-width: 1.8; }
.tree5 .chip.fresh { stroke: var(--accent); stroke-dasharray: 3 2.5; }
.tree5 .chip-t { font: 500 11.5px var(--sans); fill: var(--ink); }
.tree5 .chip-t.grp { font-weight: 600; }
.tree5 .tnode { transition: opacity 0.5s; }
.tree5 .hide { opacity: 0; }
.tree5 .bar-bg { fill: var(--rule); }
.tree5 .bar { fill: var(--ink-2); opacity: 0.6; transform-box: fill-box; transform-origin: center; transition: transform 0.7s cubic-bezier(.2,.7,.2,1); }
.tree5 .bar.fresh { fill: var(--accent); opacity: 0.75; }
.tree5 .plus { font: 600 10.5px var(--mono); fill: var(--accent); opacity: 0; transition: opacity 0.3s; }
.tree5 .plus.on { opacity: 1; }
.tree5 .run-pill { fill: var(--ink); }
.tree5 .run-t { font: 600 11.5px var(--sans); fill: var(--surface); }
.tree5.still *, .tree5.still .bar { transition: none !important; }

/* Build-up for HTML figures: parts with --i appear in turn once their figure has the class "on" */
.js-motion [data-reveal] .rv { opacity: 0; transform: translateY(6px); transition: opacity 0.45s ease, transform 0.45s cubic-bezier(.3,.7,.2,1); transition-delay: calc(var(--i, 0) * 170ms); }
.js-motion [data-reveal].on .rv { opacity: 1; transform: none; }
[data-mount].mounted { min-height: 0; }

/* fitted to the page: square frames, mono labels, a light terminal */
.fig,.curve,.detail,.shape,.sum,pre.term,.eq{border-radius:0}
.curve,.fig{padding:16px 16px 12px}
.detail{background:var(--soft)}
.piece{border-radius:3px}
.compare{font-size:15px}
.compare thead th{font:500 12px var(--mono);letter-spacing:.04em;text-transform:none;color:var(--muted)}
.compare tbody th{font-weight:500;width:34%}
.compare th,.compare td{padding:14px 16px 14px 0}
.compare tr.rec th,.compare tr.rec td{background:rgba(var(--hue),.06)}
.compare tr.rec th{padding-left:10px}
.sum{padding:6px 18px}
.sum dt{font-size:15px}
.sum dd{font-weight:500}
.sum div.res dt,.sum div.res dd{font-weight:500}
.figcap b,.fig-key,.legend{font-family:var(--mono)}
pre.term{border:1px solid var(--rule);font-size:13px}
pre.term .p{color:var(--accent)}
.replay-tabs button{font:500 13px/1 var(--mono);border-radius:0}
.fig-ctl button{font:500 13px/1.2 var(--mono);border-radius:0}
.eq{background:var(--soft);border:1px solid var(--rule);font-size:13.5px}
.shape h3{font-weight:500}