/* Rock8 talk · shared components for the visuals.
   Opt in per visual:  <link rel="stylesheet" href="theme.css"><link rel="stylesheet" href="components.css">
   (from a subfolder: ../theme.css and ../components.css)

   SVG edges expect these markers once per <svg>:
     <defs>
       <marker id="arrow"        viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto"><path d="M0 0L10 5 0 10z" fill="#94a3b8"/></marker>
       <marker id="arrow-accent" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto"><path d="M0 0L10 5 0 10z" fill="#5be9f1"/></marker>
       <marker id="arrow-back"   viewBox="0 0 10 10" refX="1" refY="5" markerWidth="6" markerHeight="6" orient="auto"><path d="M10 0L0 5 10 10z" fill="#94a3b8"/></marker>
     </defs>
*/
:root {
  --warn: #f47174;
  --r-card: 18px; --r-chip: 8px; --r-node: 10px;
  --pad-card: 26px 34px 24px;
  --gap: 12px;
  --fs-eyebrow: 22px; --fs-title: 46px; --fs-sub: 25px; --fs-chip: 21px; --fs-footnote: 20px; --fs-legend: 20px; --fs-node: 22px;
  --stroke: 2.5px;
}

/* ── labels ─────────────────────────────────────────── */
.eyebrow { font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); line-height: 1; }
.eyebrow.accent { color: var(--accent); }
.eyebrow.warn   { color: var(--warn); }

.footnote { font-family: var(--font-mono); font-size: var(--fs-footnote); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-align: center; line-height: 1; }

/* ── card ───────────────────────────────────────────── */
.card { position: relative; box-sizing: border-box; display: flex; flex-direction: column; border-radius: var(--r-card); background: var(--surface); border: 3px solid var(--muted); padding: var(--pad-card); }
.card.accent { border-color: var(--accent); }
.card.warn   { border-color: var(--warn); }
.card.dashed { border-style: dashed; }
.card.quiet  { border-color: rgba(148,163,184,.35); }
.card > .title { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-title); letter-spacing: -.02em; line-height: 1; }
.card > .sub   { font-size: var(--fs-sub); color: var(--muted); margin-top: 10px; line-height: 1.3; }
.card b { color: var(--text); font-weight: 500; }
.card > svg { display: block; margin-top: 10px; flex: 1; min-height: 0; }
.card > .chips, .card > .legend, .card > .footnote { margin-top: 12px; }

/* ── chips ──────────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: var(--gap); }
.chip { display: inline-block; box-sizing: border-box; font-family: var(--font-mono); font-size: var(--fs-chip); line-height: 1; padding: 6px 10px; border-radius: 4px; white-space: nowrap;
        color: var(--accent); background: transparent; border: 1px solid currentColor; }
.chip.warn    { color: var(--warn); }
.chip.neutral { color: var(--muted); }
.chip.solid   { color: #0b0b0d; background: var(--accent); border-color: var(--accent); font-weight: 500; }

/* ── legend ─────────────────────────────────────────── */
.legend { display: flex; flex-wrap: wrap; gap: 6px 28px; align-items: center; font-size: var(--fs-legend); color: var(--muted); line-height: 1; }
.legend .swatch { display: inline-block; width: 18px; height: 18px; border-radius: 4px; box-sizing: border-box; border: var(--stroke) solid var(--muted); background: #16161a; margin-right: 10px; vertical-align: -3px; }
.legend .swatch.llm  { border-color: var(--accent); background: rgba(91,233,241,.10); }
.legend .swatch.rule { border-color: var(--text); }
.legend .swatch.warn { border-color: var(--warn); background: rgba(244,113,116,.08); }

.divider { height: 2px; background: linear-gradient(90deg, rgba(148,163,184,.35), rgba(148,163,184,0)); }

/* ── svg diagrams: only when a diagram needs curves. Prefer .flow / .hub above. ── */
svg text { font-family: var(--font-body); fill: var(--text); font-size: var(--fs-node); text-anchor: middle; dominant-baseline: middle; }
svg text.mono { font-family: var(--font-mono); fill: var(--accent); font-size: 18px; letter-spacing: .06em; }
svg text.mute { fill: var(--muted); font-size: 20px; }
svg text.big  { font-size: 30px; font-weight: 500; }
svg text.left { text-anchor: start; }
.node        { fill: #16161a; stroke: var(--muted); stroke-width: var(--stroke); }
.node.llm    { fill: rgba(91,233,241,.10); stroke: var(--accent); }
.node.rule   { stroke: var(--text); }
.node.human  { stroke: var(--accent); stroke-dasharray: 10 8; }
.node.warn   { fill: rgba(244,113,116,.08); stroke: var(--warn); }
.edge        { fill: none; stroke: var(--muted); stroke-width: var(--stroke); marker-end: url(#arrow); }
.edge.accent { stroke: var(--accent); marker-end: url(#arrow-accent); }
.edge.both   { marker-start: url(#arrow-back); }
.edge.dashed { stroke-dasharray: 10 8; }
.edge.plain  { marker-end: none; }

/* ── html diagrams: nodes size to their text ────────── */
/* A linear chain:  <div class="flow"><span class="step">fetch</span><i class="arrow"></i><span class="step llm" data-tag="LLM">classify</span>…</div>
   A hub:           <div class="hub"><span class="step top">…</span><i class="arrow v both"></i><span class="step left">…</span><i class="arrow both"></i><span class="step core">LLM</span>…</div> */
.diagram { flex: 1; display: grid; place-items: center; min-height: 0; }
.diagram.example { zoom: .78; }                       /* an illustration, not the main content */
.card > .eyebrow { margin-top: 14px; font-size: 18px; }
.step { position: relative; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 110px; padding: 11px 20px; border-radius: var(--r-node); border: var(--stroke) solid var(--muted); background: #16161a; font-size: var(--fs-node); line-height: 1; white-space: nowrap; color: var(--text); }
.step.llm   { border-color: var(--accent); background: rgba(91,233,241,.10); }
.step.human { border-color: var(--accent); border-style: dashed; }
.step.warn  { border-color: var(--warn); background: rgba(244,113,116,.08); }
.step.core  { border-radius: 50%; aspect-ratio: 1; padding: 28px; font-size: 30px; font-weight: 500; border-color: var(--accent); background: rgba(91,233,241,.10); }
.step[data-tag]::before { content: attr(data-tag); position: absolute; left: 50%; top: -26px; transform: translateX(-50%); font-family: var(--font-mono); font-size: 18px; letter-spacing: .06em; color: var(--accent); white-space: nowrap; }
.step.tag-below[data-tag]::before { top: auto; bottom: -26px; color: var(--muted); }   /* state tags hang under the node */
/* decision gate: a bordered hexagon that still sizes to its text */
.step.gate { border: 0; background: var(--text); padding: 14px 36px; border-radius: 0; clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 16px 100%, 0 50%); }
.step.gate::after { content: ''; position: absolute; inset: 2.5px; background: #16161a; clip-path: polygon(15px 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 15px 100%, 0 50%); z-index: 0; }
.step.gate > * , .step.gate { z-index: 1; }
.step.gate .k { font-family: var(--font-mono); color: var(--accent); font-size: 20px; }
.step .stack { display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; z-index: 1; }

.flow { display: flex; align-items: center; gap: 8px; padding-top: 30px; min-width: 0; }   /* padding leaves room for data-tag labels */
/* arrows are pure css so width is honoured: a centred line plus border-triangle heads */
.flow.dense { gap: 6px; }
.flow.dense .step { font-size: 20px; padding: 9px 14px; }
.flow.dense .step.gate { padding: 11px 20px; }
.flow.dense .arrow { width: 24px; }
.arrow { --c: var(--muted); position: relative; display: inline-block; flex: none; width: 34px; height: 16px;
         background: linear-gradient(var(--c), var(--c)) center / calc(100% - 12px) var(--stroke) no-repeat; }
.arrow::after  { content: ''; position: absolute; right: 0; top: 1px; border: 7px solid transparent; border-left: 11px solid var(--c); border-right: 0; }
.arrow.both::before { content: ''; position: absolute; left: 0; top: 1px; border: 7px solid transparent; border-right: 11px solid var(--c); border-left: 0; }
.arrow.both { background-size: calc(100% - 24px) var(--stroke); }
.arrow.accent { --c: var(--accent); }
.arrow.long   { width: 110px; }
.arrow.big    { height: 28px; background-size: calc(100% - 20px) 4px; }
.arrow.big::after { top: 2px; border-width: 12px; border-left-width: 20px; }
.arrow.v { width: 16px; height: 44px; background-size: var(--stroke) calc(100% - 24px); }
.arrow.v::after  { right: 1px; top: auto; bottom: 0; border: 7px solid transparent; border-top: 11px solid var(--c); border-bottom: 0; }
.arrow.v.both::before { left: 1px; top: 0; border: 7px solid transparent; border-bottom: 11px solid var(--c); border-top: 0; }

.arrow.plain::after, .arrow.plain::before { display: none; }   /* a bare connector, no head */

/* a branch inside a .flow:
   <div class="split"><i class="fork"></i>
     <div class="lane"><i class="arrow accent"></i><span class="step llm" data-tag="strong model">draft</span></div>
     <div class="lane"><i class="arrow accent"></i><span class="step human" data-tag="⏸ waits for a person">human review</span></div>
   <i class="merge"></i></div> */
.split { display: grid; grid-template-columns: 22px auto 22px; grid-template-rows: auto auto; row-gap: 20px; align-items: center; }
.split .lane { grid-column: 2; display: flex; align-items: center; gap: inherit; }
.split .fork, .split .merge { grid-row: 1 / span 2; align-self: stretch; margin: 22px 0; border: var(--stroke) solid var(--muted); }
.split .fork  { grid-column: 1; border-right: 0; border-radius: 16px 0 0 16px; }
.split .merge { grid-column: 3; border-left: 0;  border-radius: 0 16px 16px 0; }
/* fork only, lanes end separately. Each lane draws its own half of the bracket from its own centre,
   so the corners land on the lane arrows whatever the lane heights are. The <i class="fork"> is ignored. */
.split.open { grid-template-columns: auto; row-gap: 0; }
.split.open .fork { display: none; }
.split.open .lane { grid-column: 1; position: relative; padding: 10px 0 10px 22px; }
.split.open .lane::before { content: ''; position: absolute; left: 0; width: 22px; box-sizing: border-box; border: var(--stroke) solid var(--muted); border-right: 0; }
.split.open .lane:first-of-type::before { top: 50%; bottom: 0; border-bottom: 0; border-radius: 16px 0 0 0; }
.split.open .lane:last-of-type::before  { top: 0; bottom: 50%; border-top: 0; border-radius: 0 0 0 16px; }

.hub { display: grid; grid-template-columns: auto auto auto auto auto; grid-template-rows: auto auto auto; align-items: center; justify-items: center; row-gap: 6px; column-gap: 10px; }
.hub .top  { grid-column: 3; grid-row: 1; }
.hub .arrow.v { grid-column: 3; grid-row: 2; }
.hub .left { grid-column: 1; grid-row: 3; }
.hub .core { grid-column: 3; grid-row: 3; }
.hub .right{ grid-column: 5; grid-row: 3; }
.hub > .arrow:not(.v) { grid-row: 3; width: 84px; }

.note { font-size: 20px; color: var(--muted); text-align: center; line-height: 1.3; }

/* one-sentence "so what" under a diagram, pinned to the card bottom */
.card > .line { margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(148,163,184,.25); font-size: 26px; line-height: 1.3; color: var(--text); }
.card > .line b { color: var(--accent); font-weight: 500; }
.card > .line.warn b { color: var(--warn); }

/* meters: <dl class="meters"><dt>deterministic</dt><dd class="meter" data-fill="1"><i></i><i></i><i></i><i></i><i></i></dd>…</dl>
   fill colour follows the card: warn by default, accent inside .card.accent */
.meters { display: grid; grid-template-columns: auto 1fr; column-gap: 24px; row-gap: 12px; align-items: center; margin: auto 0 0; padding-top: 16px; border-top: 1px solid rgba(148,163,184,.25); }
.meters dt { font-family: var(--font-mono); font-size: 18px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.meters dd { margin: 0; }
.meter { --fill: var(--warn); display: flex; gap: 6px; }
.card.accent .meter { --fill: var(--accent); }
.meter i { display: block; width: 44px; height: 10px; border-radius: 3px; background: rgba(148,163,184,.18); }
.meter[data-fill="1"] i:nth-child(-n+1), .meter[data-fill="2"] i:nth-child(-n+2), .meter[data-fill="3"] i:nth-child(-n+3),
.meter[data-fill="4"] i:nth-child(-n+4), .meter[data-fill="5"] i:nth-child(-n+5) { background: var(--fill); }

/* ledger: <dl class="facts"><dt>who decides the path</dt><dd>the model, every turn</dd>…</dl>  (dd.warn / dd.accent) */
.facts { display: grid; grid-template-columns: auto 1fr; column-gap: 28px; row-gap: 12px; align-items: baseline; margin: auto 0 0; padding-top: 16px; border-top: 1px solid rgba(148,163,184,.25); }
.facts dt { font-family: var(--font-mono); font-size: 18px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 0; font-size: 26px; line-height: 1.2; color: var(--text); }
.facts dd.warn { color: var(--warn); } .facts dd.accent { color: var(--accent); }

/* ── frames: a labelled container, for nesting diagrams ─
   <div class="frame wf"><div class="eyebrow accent">workflow</div> …content… </div>   variants: .wf (accent) .st (step, muted) .ag (agent, llm tint) */
.frame { position: relative; display: inline-flex; align-items: center; gap: 8px; box-sizing: border-box; padding: 38px 18px 18px; border: var(--stroke) solid var(--muted); border-radius: 14px; background: rgba(148,163,184,.04); }
.frame > .eyebrow { position: absolute; top: 10px; left: 16px; margin: 0; font-size: 15px; }
.frame.wf { border-color: var(--accent); background: rgba(91,233,241,.04); }
.frame.ag { border-color: var(--accent); background: rgba(91,233,241,.10); }
.frame.st { border-style: dashed; }
.frame .frame { margin: 0; }
.frame.ag .step { min-width: 0; padding: 7px 14px; font-size: 19px; }

/* ── definitions strip: <dl class="defs"><dt>Tool</dt><dd>bounded action</dd>…</dl> ── */
.defs { display: grid; grid-auto-flow: column; grid-template-rows: auto auto; column-gap: 40px; row-gap: 6px; margin: 0; }
.defs dt { font-family: var(--font-display); font-weight: 500; font-size: 26px; color: var(--text); }
.defs dd { margin: 0; font-size: 21px; color: var(--muted); line-height: 1.3; }
.defs ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.defs li { position: relative; padding-left: 18px; }
.defs li::before { content: ''; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }