/* Concept-infographic archetypes — SELF-CONTAINED, scoped under .cig.
 *
 * Every rule is prefixed `.cig ` and the full token palette is defined ON `.cig` (theme-aware via
 * html[data-theme=dark] .cig), lifted from the locked mockups. This makes an infographic a drop-in:
 * wrap the rendered partial in <div class="cig">…</div>, link this file, and it reproduces the
 * signed-off look on ANY page — independent of (and without colliding with) that page's own theme
 * tokens or its own .panel/.node rules. The two digest surfaces have divergent themes (editorial
 * teal/vermilion vs the dated pages' blue), so self-containment keeps the catalog visually constant.
 *
 * Markup + rule bodies are verbatim from docs/mockups/archetypes-batch1.html + batch2.html. */

/* --- token palette (the locked mockup contract), scoped to the infographic --------------- */
.cig{
  --paper:#f4efe6; --raised:#fbf8f1; --node:#fbf8f1;
  --ink:#191713; --muted:#6f6757; --faint:#8c8473; --rule:#d9d1c2;
  --accent:#c8431f; --accent2:#1f5c8c;
  --cell:#e6ddcc; --cell-on:#c8431f; --soft:#e6ddcc;
  --good:#3f7d54; --warn:#c8871f; --bad:#c8431f;
  --glow:none; --panelglow:none; --tagink:#fff;
  --display:"Fraunces",Georgia,serif; --body:"Newsreader",Georgia,serif;
  --panel-grad:linear-gradient(180deg,var(--raised),var(--raised));
  --panel-radius:8px; --node-radius:6px;
  color:var(--ink);
}
html[data-theme=dark] .cig{
  --paper:#0b0d12; --raised:#13161f; --node:#1c2230;
  --ink:#e7ecf5; --muted:#8a93a6; --faint:#5b6478; --rule:#272d3b;
  --accent:#3ee0c4; --accent2:#8b7bff;
  --cell:#222a3a; --cell-on:#3ee0c4; --soft:#222a3a;
  --good:#46d17f; --warn:#e0b53e; --bad:#ef6a6a;
  --glow:0 0 8px -1px var(--accent); --panelglow:0 0 24px -8px var(--accent);
  --tagink:#08110f;
  --display:"Bricolage Grotesque",system-ui,sans-serif; --body:"Spline Sans",system-ui,sans-serif;
  --panel-grad:linear-gradient(180deg,#13161f,#181c27);
  --panel-radius:14px; --node-radius:10px;
}

/* --- shared panel + node primitives (batch 1) --------------------------------------------- */
.cig .panel{background:var(--panel-grad);border:1px solid var(--rule);border-radius:var(--panel-radius);padding:24px 28px;position:relative;overflow:hidden;box-shadow:0 24px 50px -34px rgba(0,0,0,.45)}
.cig .panel::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(500px 200px at 18% 0%, color-mix(in srgb,var(--accent) 7%,transparent), transparent 60%)}
.cig .phead{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.cig .phead .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}
.cig .phead .lbl{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.cig .ptitle{font-family:var(--display);font-weight:700;font-size:22px;line-height:1.1;margin:4px 0 20px;letter-spacing:-.01em;color:var(--ink)}

.cig .node{background:var(--node);border:1px solid var(--rule);border-radius:var(--node-radius);padding:12px 14px;text-align:center;min-width:92px}
.cig .node .t{font-family:var(--body);font-size:11px;color:var(--muted);letter-spacing:0}
.cig .node .v{font-family:var(--display);font-weight:700;font-size:14.5px;margin-top:3px}
.cig .node.hot{border-color:var(--accent);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 18%,transparent),var(--panelglow)}
.cig .node.hot .v{color:var(--accent)}

/* --- archetype 01 — speculative decoding loop --------------------------------------------- */
.cig .spec{position:relative}
.cig .specrow{display:grid;grid-template-columns:auto 22px auto 22px auto 22px auto;align-items:center}
.cig .arrow{height:1.5px;background:linear-gradient(90deg,var(--rule),color-mix(in srgb,var(--accent) 45%,var(--rule)));position:relative}
.cig .arrow::after{content:"";position:absolute;right:-1px;top:-3px;border:4px solid transparent;border-left-color:color-mix(in srgb,var(--accent) 45%,var(--rule))}
.cig .specloop{margin-top:6px;height:34px;position:relative}
.cig .specloop svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cig .specloop .lbl{position:absolute;left:50%;top:13px;transform:translateX(-50%);font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.08em;color:var(--faint);background:var(--raised);padding:0 8px}
.cig .metricstrip{display:flex;gap:0;margin-top:20px;border-top:1px solid var(--rule)}
.cig .metricstrip .m{flex:1;padding:14px 0 0;border-right:1px solid var(--rule)}
.cig .metricstrip .m:last-child{border-right:0}
.cig .metricstrip .mn{font-family:var(--display);font-weight:800;font-size:26px;line-height:1;color:var(--accent2)}
.cig .metricstrip .ml{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-top:5px}

/* --- archetype 02 — quantization bit-ladder ----------------------------------------------- */
.cig .ladder{display:flex;flex-direction:column;gap:9px}
.cig .rung{display:grid;grid-template-columns:78px 1fr 120px;align-items:center;gap:14px}
.cig .rung .tag{font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:600;color:var(--ink)}
.cig .rung .barwrap{height:26px;background:color-mix(in srgb,var(--paper) 55%,var(--rule));border-radius:var(--node-radius);overflow:hidden;position:relative}
.cig .rung .bar{height:100%;border-radius:var(--node-radius);background:linear-gradient(90deg,color-mix(in srgb,var(--accent2) 70%,var(--accent)),var(--accent));display:flex;align-items:center;padding-left:12px}
.cig .rung .bar .sz{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--tagink);font-weight:600}
.cig .rung .gauge{display:flex;align-items:center;gap:8px;font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--muted)}
.cig .rung .gauge .q{font-family:var(--display);font-weight:800;font-size:17px}
.cig .rung.cliff .gauge .q{color:var(--bad)} .cig .rung .gauge .q.ok{color:var(--good)} .cig .rung .gauge .q.mid{color:var(--warn)}
.cig .laddernote{font-family:var(--body);font-size:11.5px;color:var(--faint);margin-top:12px;letter-spacing:0}
.cig .legend .sw-ok{background:var(--good);border-color:var(--good)}
.cig .legend .sw-mid{background:var(--warn);border-color:var(--warn)}
.cig .legend .sw-cliff{background:var(--bad);border-color:var(--bad)}

/* --- archetype 03 — benchmark ranked bars ------------------------------------------------- */
.cig .lb{display:flex;flex-direction:column;gap:8px}
.cig .lb .row{display:grid;grid-template-columns:20px 150px 1fr 58px;align-items:center;gap:12px}
.cig .lb .rk{font-family:var(--display);font-weight:800;font-size:15px;color:var(--faint);text-align:right}
.cig .lb .nm{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink)}
.cig .lb .track{height:22px;background:color-mix(in srgb,var(--paper) 55%,var(--rule));border-radius:5px;overflow:hidden}
.cig .lb .fill{height:100%;border-radius:5px;background:color-mix(in srgb,var(--accent2) 26%,var(--rule))}
.cig .lb .row.podium .fill{background:color-mix(in srgb,var(--accent2) 62%,var(--rule))}  /* ranks 2-3 */
.cig .lb .row.podium .nm{color:var(--accent2);font-weight:600}
.cig .lb .row.lead .fill{background:linear-gradient(90deg,var(--accent),var(--accent2));box-shadow:var(--glow)}  /* rank 1 */
.cig .lb .row.lead .nm{color:var(--accent);font-weight:600}
.cig .lb .val{font-family:var(--display);font-weight:800;font-size:15px;text-align:right}
.cig .lbcap{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-top:12px;display:flex;justify-content:space-between}

/* --- archetype 04 — MoE routing ----------------------------------------------------------- */
.cig .moe{display:grid;grid-template-columns:auto 22px 1.5fr 22px auto;align-items:center}
.cig .experts{display:grid;grid-template-columns:repeat(16,1fr);gap:3px;background:color-mix(in srgb,var(--paper) 65%,transparent);border:1px solid var(--rule);border-radius:var(--node-radius);padding:11px}
.cig .experts i{aspect-ratio:1;border-radius:2px;background:var(--cell)}
.cig .experts i.on{background:var(--cell-on);box-shadow:var(--glow)}
.cig .moecap{font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--faint);letter-spacing:.06em;margin-top:7px;display:flex;justify-content:space-between}
.cig .moecap b{color:var(--accent)}
.cig .moe-stats{display:flex;gap:0;margin-top:20px;border-top:1px solid var(--rule)}
.cig .moe-stats .s{flex:1;padding:14px 0 0;border-right:1px solid var(--rule)} .cig .moe-stats .s:last-child{border-right:0}
.cig .moe-stats .n{font-family:var(--display);font-weight:800;font-size:24px;color:var(--accent2)}
.cig .moe-stats .l{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-top:5px}

/* --- batch 2 — SVG archetypes (venn/bubbles/pictogram/quadrant/curve/rag/timeline) -------- */
.cig .svgwrap{width:100%}
.cig .svgwrap text{font-family:var(--body)}
/* legacy engine: the SVG is a DIRECT child of .cig (kit's svg is nested in .svgwrap, so this
   never touches it). Cap it as an editorial inset — the renderer now emits viewBox-only SVGs. */
.cig > svg{display:block;width:100%;max-width:440px;height:auto;margin:10px auto}
.cig .cap{font-family:var(--body);font-size:11.5px;letter-spacing:0;color:var(--faint);margin-top:12px}
.cig .cap b{color:var(--accent)}

/* --- legend — a small key that NAMES what an encoding colour/accent/status means ----------- */
.cig .legend{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:14px;padding-top:12px;border-top:1px solid var(--rule)}
.cig .legend .lg{display:inline-flex;align-items:center;gap:7px;font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.cig .legend .sw{flex:none;width:11px;height:11px;border-radius:3px;background:var(--muted);border:1px solid var(--rule)}
.cig .legend .lg.pass .sw{background:var(--good);border-color:var(--good)}
.cig .legend .lg.warn .sw{background:var(--warn);border-color:var(--warn)}
.cig .legend .lg.fail .sw{background:var(--bad);border-color:var(--bad)}

/* pictogram (isotype icon-array) */
.cig .picto{display:flex;gap:18px;align-items:center}
.cig .iconarr{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;flex:1}
.cig .iconarr i{aspect-ratio:1;border-radius:2px;background:var(--soft)}
.cig .iconarr i.on{background:var(--accent)}
.cig .bignum{text-align:right;min-width:96px}
.cig .bignum .n{font-family:var(--display);font-weight:800;font-size:46px;line-height:.9;color:var(--accent)}
.cig .bignum .d{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:6px}

/* --- mobile: SVG archetypes scale via viewBox; collapse/shrink the flow+bar ones --------- */
@media(max-width:780px){
  .cig .panel{padding:18px 16px}
  .cig .ptitle{font-size:18px;margin-bottom:14px}
  .cig .specrow,.cig .moe{grid-template-columns:1fr;gap:8px}
  .cig .arrow{display:none}
  .cig .node{min-width:0}
  .cig .metricstrip,.cig .moe-stats{flex-wrap:wrap}
  .cig .metricstrip .mn,.cig .moe-stats .n{font-size:20px}
  .cig .rung{grid-template-columns:54px 1fr 62px;gap:8px}
  .cig .rung .gauge{gap:4px;font-size:9px}
  .cig .rung .gauge .q{font-size:13px}
  .cig .laddernote{font-size:9.5px}
  .cig .lb .row{grid-template-columns:16px 84px 1fr 44px;gap:8px}
  .cig .lb .nm{font-size:10.5px}
  .cig .lbcap{font-size:9px}
  .cig .picto{gap:10px}
  .cig .bignum{min-width:64px}
  .cig .bignum .n{font-size:34px}
}

/* ========================================================================================== */
/* Batch 3 — expanded catalog (general-purpose forms)                                          */
/* ========================================================================================== */

/* --- stat_callout — one dominant statistic as centerpiece, quiet facts beside it ---------- */
.cig .statcallout{display:grid;grid-template-columns:1fr auto;align-items:center;gap:32px;margin-top:4px}
.cig .statbig{min-width:0}
.cig .statbig .figure{font-family:var(--display);font-weight:800;font-size:84px;line-height:.92;letter-spacing:-.03em;color:var(--accent);text-shadow:var(--glow)}
.cig .statbig .figlabel{font-family:var(--body);font-size:14px;color:var(--ink);margin-top:8px;letter-spacing:0}
.cig .statbig .figdelta{font-family:var(--body);font-size:12.5px;color:var(--muted);margin-top:10px;line-height:1.4;letter-spacing:0;max-width:34ch}
.cig .statfacts{display:flex;flex-direction:column;gap:0;border-left:1px solid var(--rule);padding-left:24px;min-width:150px}
.cig .statfacts .fact{padding:11px 0;border-bottom:1px solid var(--rule)}
.cig .statfacts .fact:first-child{padding-top:0}
.cig .statfacts .fact:last-child{border-bottom:0;padding-bottom:0}
.cig .statfacts .fn{font-family:var(--display);font-weight:700;font-size:19px;line-height:1;color:var(--ink)}
.cig .statfacts .fl{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-top:6px}
@media(max-width:780px){
  .cig .statcallout{grid-template-columns:1fr;gap:20px}
  .cig .statbig .figure{font-size:60px}
  .cig .statbig .figdelta{max-width:none}
  .cig .statfacts{border-left:0;border-top:1px solid var(--rule);padding-left:0;padding-top:16px;flex-direction:row;flex-wrap:wrap;gap:18px 28px;min-width:0}
  .cig .statfacts .fact{padding:0;border-bottom:0}
  .cig .statfacts .fact:first-child{padding-top:0}
}

/* --- alert — security / risk advisory (severity drives --sev) ----------------------------- */
.cig .alert{--sev:var(--bad)}
.cig .alert::before{background:radial-gradient(500px 200px at 18% 0%, color-mix(in srgb,var(--sev) 9%,transparent), transparent 60%)}
.cig .alert .phead .dot{background:var(--sev);box-shadow:0 0 10px var(--sev)}
.cig .alert .phead .lbl{color:var(--sev)}
.cig .alert .alerthead{display:flex;align-items:flex-start;gap:13px;margin:4px 0 20px}
.cig .alert .alerthead .ptitle{margin:0;flex:1;min-width:0}
.cig .alert .badge{flex:none;font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--sev);border:1px solid var(--sev);border-radius:999px;padding:5px 11px;line-height:1;margin-top:5px;white-space:nowrap}
.cig .alert .badge.crit{background:var(--sev);color:var(--tagink);border-color:var(--sev)}
.cig .alert .facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:11px}
.cig .alert .legend .lg.sev .sw{background:var(--sev);border-color:var(--sev)}
.cig .alert .fact{background:color-mix(in srgb,var(--paper) 55%,var(--rule));border:1px solid var(--rule);border-left:3px solid var(--sev);border-radius:var(--node-radius);padding:13px 15px}
.cig .alert .fact .fn{font-family:var(--display);font-weight:800;font-size:23px;line-height:1.05;color:var(--ink);letter-spacing:-.01em}
.cig .alert .fact .fl{font-family:var(--body);font-size:12px;line-height:1.35;color:var(--muted);margin-top:5px}
.cig .alert .scope{display:flex;align-items:baseline;gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid var(--rule)}
.cig .alert .scope .sk{flex:none;font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
.cig .alert .scope .sv{font-family:var(--body);font-size:13px;line-height:1.4;color:var(--ink)}
@media(max-width:780px){
  .cig .alert .alerthead{flex-wrap:wrap;gap:9px}
  .cig .alert .facts{grid-template-columns:1fr}
  .cig .alert .fact .fn{font-size:20px}
  .cig .alert .scope{flex-direction:column;gap:5px}
}

/* --- checklist — ruleset / guardrail (pass·warn·fail rows, SVG glyphs) -------------------- */
.cig .ckl{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start}
.cig .cklcount{align-self:start;padding:10px 14px;border:1px solid var(--rule);border-radius:var(--node-radius);background:color-mix(in srgb,var(--paper) 60%,transparent);text-align:center;min-width:88px}
.cig .cklcount .n{font-family:var(--display);font-weight:800;font-size:20px;line-height:1;color:var(--accent)}
.cig .cklrows{display:flex;flex-direction:column}
.cig .cklrow{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start;padding:9px 0;border-top:1px solid var(--rule)}
.cig .cklrow:first-child{border-top:0}
.cig .cklrow .gly{width:22px;height:22px;margin-top:1px}
.cig .cklrow .gly svg{width:100%;height:100%;display:block;overflow:visible}
.cig .cklrow .gly .ring{fill:none;stroke:var(--rule);stroke-width:1.5}
.cig .cklrow .gly .mk{stroke:var(--muted)}
.cig .cklrow .gly .mkf{fill:var(--muted)}
.cig .cklrow .lab{font-family:var(--body);font-size:13.5px;line-height:1.4;color:var(--ink)}
.cig .cklrow.pass .gly .ring{stroke:color-mix(in srgb,var(--good) 55%,var(--rule))}
.cig .cklrow.pass .gly .mk{stroke:var(--good)}
.cig .cklrow.warn .gly .ring{stroke:color-mix(in srgb,var(--warn) 55%,var(--rule))}
.cig .cklrow.warn .gly .mk{stroke:var(--warn)} .cig .cklrow.warn .gly .mkf{fill:var(--warn)}
.cig .cklrow.fail{box-shadow:inset 3px 0 0 -1px color-mix(in srgb,var(--bad) 70%,transparent)}
.cig .cklrow.fail .gly .ring{stroke:color-mix(in srgb,var(--bad) 55%,var(--rule))}
.cig .cklrow.fail .gly .mk{stroke:var(--bad)}
.cig .cklrow.fail .lab{color:var(--ink)}
@media(max-width:780px){
  .cig .ckl{grid-template-columns:1fr;gap:12px}
  .cig .cklcount{justify-self:start;padding:8px 12px;min-width:0}
  .cig .cklrow{grid-template-columns:20px 1fr;gap:10px}
  .cig .cklrow .gly{width:18px;height:18px}
  .cig .cklrow .lab{font-size:12.5px}
}

/* --- pipeline — generic linear process (3-6 steps) ---------------------------------------- */
.cig .pipeflow{display:flex;align-items:stretch;gap:0;flex-wrap:nowrap}
.cig .pstep{flex:1 1 0;min-width:0;background:var(--node);border:1px solid var(--rule);border-radius:var(--node-radius);padding:13px 12px 14px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px}
.cig .pstep .pstepn{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.12em;font-weight:600;color:var(--faint);width:18px;height:18px;line-height:18px;border:1px solid var(--rule);border-radius:50%}
.cig .pstep .plabel{font-family:var(--display);font-weight:700;font-size:13.5px;line-height:1.15;letter-spacing:-.005em;color:var(--ink);overflow-wrap:anywhere;hyphens:auto}
.cig .pstep .psub{font-family:var(--body);font-size:10.5px;line-height:1.25;color:var(--muted);overflow-wrap:anywhere}
.cig .pstep.hot{border-color:var(--accent);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 18%,transparent),var(--panelglow)}
.cig .pstep.hot .pstepn{border-color:var(--accent);color:var(--accent)}
.cig .pstep.hot .plabel{color:var(--accent)}
.cig .pstep .phot-tag{font-family:"IBM Plex Mono",monospace;font-size:8.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 45%,var(--rule));border-radius:999px;padding:3px 8px;margin-top:2px;line-height:1}
.cig .parrow{flex:0 0 26px;align-self:center;height:1.5px;margin:0 -1px;background:linear-gradient(90deg,var(--rule),color-mix(in srgb,var(--accent) 45%,var(--rule)));position:relative}
.cig .parrow::after{content:"";position:absolute;right:-1px;top:-3px;border:4px solid transparent;border-left-color:color-mix(in srgb,var(--accent) 45%,var(--rule))}
@media(max-width:780px){
  .cig .pipeflow{flex-direction:column;align-items:stretch}
  .cig .pstep{padding:11px 12px}
  .cig .pstep .plabel{font-size:13px}
  .cig .parrow{flex:0 0 14px;width:1.5px;height:14px;align-self:center;margin:-1px 0;background:linear-gradient(180deg,var(--rule),color-mix(in srgb,var(--accent) 45%,var(--rule)))}
  .cig .parrow::after{right:auto;top:auto;left:-3px;bottom:-1px;border:4px solid transparent;border-left-color:transparent;border-top-color:color-mix(in srgb,var(--accent) 45%,var(--rule))}
}

/* --- process_loop — ordered steps with a recovery / loop-back arc -------------------------- */
/* reuses .pipeflow/.pstep/.parrow (pipeline). .arc marks the two nodes the back-edge joins;
   .ploopback is the band below the row holding the dashed SVG arc (preserveAspectRatio="none",
   so the % coord-system stretches to the row) + a centered label, mirroring .specloop. */
.cig .pstep.arc{border-color:color-mix(in srgb,var(--accent) 55%,var(--rule))}
.cig .pstep.arc .pstepn{border-color:var(--accent);color:var(--accent)}
.cig .ploopback{position:relative;height:46px;margin-top:6px}
.cig .ploopback svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cig .ploopback .lbl{position:absolute;left:50%;bottom:1px;transform:translateX(-50%);font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.08em;color:var(--faint);background:var(--raised);padding:0 8px}
@media(max-width:780px){
  /* row stacks vertically (shared .pipeflow rule); the horizontal arc can't track stacked nodes,
     so swap it for a single full-width loop-back rail + label that still reads top-to-bottom. */
  .cig .ploopback{height:30px}
  .cig .ploopback svg{display:none}
  .cig .ploopback::before{content:"";position:absolute;left:10%;right:10%;top:12px;height:1.5px;background:repeating-linear-gradient(90deg,var(--accent),var(--accent) 3px,transparent 3px,transparent 7px)}
  .cig .ploopback .lbl{bottom:auto;top:5px}
}

/* --- comparison — A vs B feature table (winner cell takes the accent) --------------------- */
.cig .cmptable{display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:var(--node-radius);overflow:hidden;background:color-mix(in srgb,var(--paper) 45%,transparent)}
.cig .cmphead,.cig .cmprow{display:grid;grid-template-columns:minmax(96px,1.1fr) 1fr 1fr;align-items:stretch}
.cig .cmprow{border-top:1px solid var(--rule)}
.cig .cmphead .feat{visibility:hidden;font-family:"IBM Plex Mono",monospace;font-size:10px}
.cig .cmphead .side{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:13px 16px;text-align:center;border-left:1px solid var(--rule)}
.cig .cmphead .side.left{color:var(--accent2)}
.cig .cmphead .side.right{color:var(--accent)}
.cig .cmptable .feat{font-family:var(--body);font-size:13px;line-height:1.3;color:var(--ink);padding:14px 16px;display:flex;align-items:center}
.cig .cmptable .cell{padding:14px 16px;display:flex;align-items:center;justify-content:center;text-align:center;border-left:1px solid var(--rule);position:relative}
.cig .cmptable .cell .cv{font-family:var(--body);font-size:13px;line-height:1.3;color:var(--muted);overflow-wrap:anywhere}
.cig .cmptable .cell.win{--win:var(--accent);background:color-mix(in srgb,var(--win) 11%,transparent)}
.cig .cmptable .cell.win .cv{color:var(--win);font-weight:600}
.cig .cmptable .cell.win::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--win);box-shadow:var(--glow)}
.cig .cmptable .cell.win-left{--win:var(--accent2)}   /* left side wins this row */
.cig .cmptable .cell.win-right{--win:var(--accent)}   /* right side wins this row */
.cig .cmp .legend .sw-left{background:var(--accent2);border-color:var(--accent2)}
.cig .cmp .legend .sw-right{background:var(--accent);border-color:var(--accent)}
@media(max-width:780px){
  .cig .cmphead,.cig .cmprow{grid-template-columns:minmax(72px,1fr) 1fr 1fr}
  .cig .cmphead .side{padding:9px 7px;font-size:9.5px;letter-spacing:.06em}
  .cig .cmptable .feat{font-size:11.5px;padding:11px 9px}
  .cig .cmptable .cell{padding:11px 8px}
  .cig .cmptable .cell .cv{font-size:11.5px}
  .cig .cmptable .cell.win::before{width:2px}
}

/* --- gauge — one value on a semicircular arc ---------------------------------------------- */
.cig .gaugewrap{position:relative;margin-top:4px}
.cig .gaugesvg{display:block}
.cig .gaugeval{position:absolute;left:0;right:0;bottom:6px;text-align:center;pointer-events:none}
.cig .gaugeval .gn{font-family:var(--display);font-weight:800;font-size:54px;line-height:.9;letter-spacing:-.02em;color:var(--accent)}
.cig .gaugeval .gl{font-family:var(--body);font-size:12px;color:var(--muted);margin-top:4px}
.cig .gaugemarks{display:flex;gap:0;margin-top:16px;border-top:1px solid var(--rule)}
.cig .gaugemarks .gm{flex:1;padding:14px 0 0;border-right:1px solid var(--rule);text-align:center}
.cig .gaugemarks .gm:last-child{border-right:0}
.cig .gaugemarks .gmn{display:block;font-family:var(--display);font-weight:800;font-size:22px;line-height:1;color:var(--accent2)}
.cig .gaugemarks .gml{display:block;font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-top:5px}
@media(max-width:780px){
  .cig .gaugeval .gn{font-size:42px}
  .cig .gaugeval .gl{font-size:11px}
  .cig .gaugemarks{flex-wrap:wrap}
  .cig .gaugemarks .gmn{font-size:18px}
}

/* --- layer_stack — layered composition top->bottom --------------------------------------- */
.cig .lstack{display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:var(--node-radius);overflow:hidden;background:color-mix(in srgb,var(--paper) 55%,var(--raised))}
.cig .lyr{position:relative;border-top:1px solid var(--rule)}
.cig .lyr:first-child{border-top:0}
.cig .lyr .band{display:flex;align-items:baseline;gap:14px;padding:13px 16px}
.cig .lyr .lbltxt{font-family:var(--body);font-size:14px;color:var(--ink);line-height:1.25;flex:1;min-width:0}
.cig .lyr .dtl{font-family:var(--body);font-size:11.5px;color:var(--muted);text-align:right;line-height:1.25;flex-shrink:0;max-width:46%}
.cig .lyr .prop{height:3px;background:transparent;margin-top:-1px}
.cig .lyr .prop span{display:block;height:100%;background:var(--accent2);opacity:.45;border-radius:0 2px 2px 0}
.cig .lyr.hot{background:color-mix(in srgb,var(--accent) 9%,var(--raised));box-shadow:inset 3px 0 0 0 var(--accent)}
.cig .lyr.hot .lbltxt{color:var(--accent);font-weight:600}
.cig .lyr.hot .dtl{color:color-mix(in srgb,var(--accent) 70%,var(--muted))}
.cig .lyr.hot .prop span{background:var(--accent);opacity:.85;box-shadow:var(--glow)}
@media(max-width:780px){
  .cig .lyr .band{padding:11px 12px;gap:8px}
  .cig .lyr .lbltxt{font-size:12.5px}
  .cig .lyr .dtl{font-size:10px;max-width:42%}
}

/* --- funnel — centered narrowing bars ----------------------------------------------------- */
.cig .funnel{display:flex;flex-direction:column;align-items:center}
.cig .fstage{width:100%;display:flex;flex-direction:column;align-items:center;gap:6px}
.cig .fstage .flabel{font-family:var(--body);font-size:12px;color:var(--muted);letter-spacing:0;text-align:center}
.cig .ftrack{width:100%;display:flex;justify-content:center}
.cig .fbar{height:38px;min-width:max-content;border-radius:var(--node-radius);background:color-mix(in srgb,var(--accent2) 42%,var(--rule));display:flex;align-items:center;justify-content:center;transition:width .3s ease}
.cig .fbar .fval{font-family:var(--display);font-weight:800;font-size:17px;color:var(--ink);letter-spacing:-.01em;padding:0 10px;white-space:nowrap}
.cig .fgap{width:14px;height:9px;background:color-mix(in srgb,var(--rule) 70%,transparent);clip-path:polygon(0 0,100% 0,68% 100%,32% 100%)}
.cig .fstage.key .flabel{color:var(--accent);font-weight:600}
.cig .fstage.key .fbar{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 78%,var(--accent2)),var(--accent));box-shadow:var(--glow)}
.cig .fstage.key .fbar .fval{color:var(--tagink)}
.cig .legend .sw-key{background:var(--accent);border-color:var(--accent)}
@media(max-width:780px){
  .cig .fbar{height:30px}
  .cig .fbar .fval{font-size:14px}
  .cig .fstage .flabel{font-size:10.5px}
  .cig .fgap{height:7px}
}

/* --- tiered_inventory — items sorted into named tiers, counts sum to a total ---------------- */
/* per-tier --tone is resolved from the legend colour (green/amber/red/slate -> token) so the
   count chip, the left rail, and the distribution segment all share one accent per tier. */
.cig .tinv .tone-good{--tone:var(--good)}
.cig .tinv .tone-warn{--tone:var(--warn)}
.cig .tinv .tone-bad{--tone:var(--bad)}
.cig .tinv .tone-slate{--tone:var(--muted)}
.cig .tigroups{display:flex;flex-direction:column;gap:10px}
.cig .tigroup{border:1px solid var(--rule);border-left:3px solid var(--tone);border-radius:var(--node-radius);background:color-mix(in srgb,var(--paper) 50%,transparent);padding:11px 14px}
.cig .tigroup .tihead{display:flex;align-items:baseline;gap:10px;margin-bottom:7px}
.cig .tigroup .ticount{flex:none;font-family:var(--display);font-weight:800;font-size:18px;line-height:1;color:var(--tone);min-width:24px}
.cig .tigroup .tilabel{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
.cig .tigroup .tiitems{display:flex;flex-wrap:wrap;gap:6px}
.cig .tigroup .tiitem{font-family:var(--body);font-size:12px;color:var(--ink);background:var(--node);border:1px solid var(--rule);border-radius:999px;padding:3px 10px;line-height:1.3}
.cig .tigroup .timore{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.06em;color:var(--faint);align-self:center;padding:0 2px}
.cig .tidist{display:flex;width:100%;height:9px;border-radius:999px;overflow:hidden;margin-top:16px;background:color-mix(in srgb,var(--rule) 60%,transparent)}
.cig .tidist .tiseg{height:100%;background:var(--tone);border-right:1px solid var(--raised)}
.cig .tidist .tiseg:last-child{border-right:0}
.cig .tinv .legend .lg.tone-good .sw{background:var(--good);border-color:var(--good)}
.cig .tinv .legend .lg.tone-warn .sw{background:var(--warn);border-color:var(--warn)}
.cig .tinv .legend .lg.tone-bad .sw{background:var(--bad);border-color:var(--bad)}
.cig .tinv .legend .lg.tone-slate .sw{background:var(--muted);border-color:var(--muted)}
.cig .tinv .cap .tisrc{font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--muted)}
@media(max-width:780px){
  .cig .tigroup{padding:9px 11px}
  .cig .tigroup .ticount{font-size:16px}
  .cig .tigroup .tiitem{font-size:11px;padding:3px 8px}
}

/* --- release_card — availability/release announcement (number-free; name·badge·channels·pull) -- */
.cig .relcard .relhead{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:2px}
.cig .relcard .relname{font-family:var(--display);font-weight:800;font-size:38px;line-height:1;letter-spacing:-.02em;color:var(--ink);overflow-wrap:anywhere;min-width:0}
.cig .relcard .reltags{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cig .relcard .relkind{font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent2);border:1px solid color-mix(in srgb,var(--accent2) 45%,var(--rule));border-radius:999px;padding:5px 11px;line-height:1;white-space:nowrap}
.cig .relcard .badge{font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);border-radius:999px;padding:5px 11px;line-height:1;white-space:nowrap}
.cig .relcard .relmeta{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-top:12px;font-family:var(--body);font-size:12px;color:var(--muted);letter-spacing:0}
.cig .relcard .relmeta .reldate{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.06em;color:var(--faint)}
.cig .relcard .relchannels{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.cig .relcard .relchip{font-family:var(--body);font-size:12.5px;color:var(--ink);background:var(--node);border:1px solid var(--rule);border-radius:999px;padding:5px 13px;line-height:1.3}
.cig .relcard .relpull{display:flex;align-items:center;gap:10px;margin-top:16px;background:color-mix(in srgb,var(--accent) 6%,var(--node));border:1px solid color-mix(in srgb,var(--accent) 28%,var(--rule));border-radius:var(--node-radius);padding:11px 14px;overflow-x:auto}
.cig .relcard .relpull .rpk{flex:none;font-family:"IBM Plex Mono",monospace;font-size:9px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.cig .relcard .relpull .rpc{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--accent);white-space:nowrap}
@media(max-width:780px){
  .cig .relcard .relname{font-size:28px}
  .cig .relcard .relhead{gap:10px}
  .cig .relcard .relpull .rpc{font-size:11.5px}
}

/* --- before_after — transformation contrast: two equal-width state panels + a delta arrow ---- */
/* the two sides are equal columns with a fixed-width arrow gutter between them (never an orphan);
   the `after` side and the delta chip carry the --accent (the resulting/improved state). */
.cig .bfagrid{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:0}
.cig .bfaside{border:1px solid var(--rule);border-radius:var(--node-radius);background:color-mix(in srgb,var(--paper) 45%,transparent);padding:14px 16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.cig .bfaside.after{border-color:color-mix(in srgb,var(--accent) 45%,var(--rule));background:color-mix(in srgb,var(--accent) 7%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 12%,transparent)}
.cig .bfahead{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--accent2)}
.cig .bfaside.after .bfahead{color:var(--accent)}
.cig .bfaitems{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.cig .bfaitem{font-family:var(--body);font-size:13px;line-height:1.3;color:var(--muted);overflow-wrap:anywhere}
.cig .bfaside.after .bfaitem{color:var(--ink)}
.cig .bfaarrow{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:0 14px;min-width:64px}
.cig .bfaglyph{font-family:var(--display);font-size:24px;line-height:1;color:color-mix(in srgb,var(--accent) 70%,var(--muted))}
.cig .bfadelta{font-family:"IBM Plex Mono",monospace;font-size:9.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;text-align:center;color:var(--accent);border:1px solid var(--accent);border-radius:999px;padding:4px 10px;line-height:1.2;box-shadow:var(--glow)}
@media(max-width:780px){
  .cig .bfagrid{grid-template-columns:1fr;gap:0}
  .cig .bfaside{padding:11px 13px}
  .cig .bfaitem{font-size:12px}
  .cig .bfaarrow{flex-direction:row;min-width:0;padding:10px 0}
  .cig .bfaglyph{transform:rotate(90deg)}
}

/* --- hub_spokes — compact slim SVG (economy; Task 5 visual-language v2) ------------------- */
/* Rendered via slim_spokes_svg helper; the canvas is ≤520 px wide and speaks the semantic
   palette (--sem-<key>-line per spoke, --sem-ctx-line for the hub).  The wrapper centres the
   SVG and caps its width; the shared .cig-eyebrow/.cig-head/.cig-cap carry the chrome. */
.cig .cig-hub-svg{display:flex;justify-content:center;max-width:520px;margin:12px auto 0}
/* the hub SVG is viewBox-only (no width/height attrs, 2026-07-02) — size to the container */
.cig .cig-hub-svg svg{width:100%;height:auto}

/* --- spectrum — 1-D bipolar axis with a pointer between two poles ------------------------- */
/* a self-contained inline-SVG axis: the line + ticks carry --rule/--muted, the pole end-caps +
   labels --muted, and the marker (vertical tick + filled triangle + label) --accent/--ink. The
   pole labels use the mono family for the off-track↔on-track caption feel; geometry (linear-interp
   marker x, evenly-spaced ticks, end-anchored poles) lives in the partial and scales with the
   viewBox, so the shared .svgwrap/.cap above carry the rest. */
.cig .spectrum .svgwrap text{font-family:"IBM Plex Mono",monospace}
.cig .spectrum .spectrumsvg{overflow:visible}

/* ========================================================================================== */
/* === visual-language v2 ===                                                                  */
/* Semantic palette (OKLCH seeds + relative-color derivations), variable-font type ladder,     */
/* and grain utility.  Additive — nothing above is removed or rewritten.                       */
/* ========================================================================================== */

/* --- semantic SEED tokens (light theme, scoped to .cig) ----------------------------------- */
/* Each seed encodes a category meaning; light values are muted-but-saturated OKLCH.           */
.cig{
  /* info  = primary subject / informational / blue hue  (h≈250) */
  --sem-info: oklch(0.62 0.12 250);
  /* pos   = good / gain / growth / green hue             (h≈145) */
  --sem-pos:  oklch(0.60 0.13 145);
  /* warn  = caution / amber hue                          (h≈75)  */
  --sem-warn: oklch(0.68 0.13 75);
  /* neg   = risk / loss / red hue                        (h≈25)  */
  --sem-neg:  oklch(0.58 0.14 25);
  /* alt   = secondary / alternative / purple hue         (h≈300) */
  --sem-alt:  oklch(0.58 0.12 300);
  /* cool  = cold / idle / teal hue                       (h≈195) */
  --sem-cool: oklch(0.60 0.11 195);
  /* ctx   = context / neutral / grey-blue                (h≈240) */
  --sem-ctx:  oklch(0.56 0.04 240);
}

/* --- semantic SEED tokens (dark theme) ---------------------------------------------------- */
/* Seeds shift slightly lighter (+0.08 L) for dark backgrounds; tint directions flip below.    */
html[data-theme=dark] .cig{
  --sem-info: oklch(0.70 0.12 250);
  --sem-pos:  oklch(0.68 0.13 145);
  --sem-warn: oklch(0.76 0.13 75);
  --sem-neg:  oklch(0.66 0.14 25);
  --sem-alt:  oklch(0.66 0.12 300);
  --sem-cool: oklch(0.68 0.11 195);
  --sem-ctx:  oklch(0.64 0.04 240);
}

/* --- static FALLBACK variants (used by browsers without CSS relative-color) --------------- */
/* Defined first so the @supports block below overrides them where relative-color is available.*/
/* line = the seed itself; ink = slightly darker; tint = very faint; border = light tint edge */
.cig{
  /* info */
  --sem-info-line:   oklch(0.62 0.12 250);
  --sem-info-ink:    oklch(0.54 0.12 250);
  --sem-info-tint:   oklch(0.92 0.05 250);
  --sem-info-border: oklch(0.80 0.07 250);
  /* pos */
  --sem-pos-line:    oklch(0.60 0.13 145);
  --sem-pos-ink:     oklch(0.52 0.13 145);
  --sem-pos-tint:    oklch(0.90 0.05 145);
  --sem-pos-border:  oklch(0.78 0.07 145);
  /* warn */
  --sem-warn-line:   oklch(0.68 0.13 75);
  --sem-warn-ink:    oklch(0.60 0.13 75);
  --sem-warn-tint:   oklch(0.93 0.05 75);
  --sem-warn-border: oklch(0.82 0.07 75);
  /* neg */
  --sem-neg-line:    oklch(0.58 0.14 25);
  --sem-neg-ink:     oklch(0.50 0.14 25);
  --sem-neg-tint:    oklch(0.91 0.06 25);
  --sem-neg-border:  oklch(0.79 0.08 25);
  /* alt */
  --sem-alt-line:    oklch(0.58 0.12 300);
  --sem-alt-ink:     oklch(0.50 0.12 300);
  --sem-alt-tint:    oklch(0.91 0.05 300);
  --sem-alt-border:  oklch(0.79 0.07 300);
  /* cool */
  --sem-cool-line:   oklch(0.60 0.11 195);
  --sem-cool-ink:    oklch(0.52 0.11 195);
  --sem-cool-tint:   oklch(0.91 0.04 195);
  --sem-cool-border: oklch(0.79 0.06 195);
  /* ctx */
  --sem-ctx-line:    oklch(0.56 0.04 240);
  --sem-ctx-ink:     oklch(0.48 0.04 240);
  --sem-ctx-tint:    oklch(0.90 0.02 240);
  --sem-ctx-border:  oklch(0.78 0.03 240);
}
/* Dark-theme static fallback: without this, @supports-false browsers (older Firefox/Safari)   */
/* inherit the light tints above (near-white) on a dark background. Mirrors the dark @supports  */
/* arithmetic as literals: line=seed, ink=+0.08L, tint=-0.30L & 0.40c, border=-0.18L & 0.55c.  */
html[data-theme=dark] .cig{
  /* info */
  --sem-info-line:   oklch(0.70 0.12 250);
  --sem-info-ink:    oklch(0.78 0.12 250);
  --sem-info-tint:   oklch(0.40 0.048 250);
  --sem-info-border: oklch(0.52 0.066 250);
  /* pos */
  --sem-pos-line:    oklch(0.68 0.13 145);
  --sem-pos-ink:     oklch(0.76 0.13 145);
  --sem-pos-tint:    oklch(0.38 0.052 145);
  --sem-pos-border:  oklch(0.50 0.072 145);
  /* warn */
  --sem-warn-line:   oklch(0.76 0.13 75);
  --sem-warn-ink:    oklch(0.84 0.13 75);
  --sem-warn-tint:   oklch(0.46 0.052 75);
  --sem-warn-border: oklch(0.58 0.072 75);
  /* neg */
  --sem-neg-line:    oklch(0.66 0.14 25);
  --sem-neg-ink:     oklch(0.74 0.14 25);
  --sem-neg-tint:    oklch(0.36 0.056 25);
  --sem-neg-border:  oklch(0.48 0.077 25);
  /* alt */
  --sem-alt-line:    oklch(0.66 0.12 300);
  --sem-alt-ink:     oklch(0.74 0.12 300);
  --sem-alt-tint:    oklch(0.36 0.048 300);
  --sem-alt-border:  oklch(0.48 0.066 300);
  /* cool */
  --sem-cool-line:   oklch(0.68 0.11 195);
  --sem-cool-ink:    oklch(0.76 0.11 195);
  --sem-cool-tint:   oklch(0.38 0.044 195);
  --sem-cool-border: oklch(0.50 0.061 195);
  /* ctx */
  --sem-ctx-line:    oklch(0.64 0.04 240);
  --sem-ctx-ink:     oklch(0.72 0.04 240);
  --sem-ctx-tint:    oklch(0.34 0.016 240);
  --sem-ctx-border:  oklch(0.46 0.022 240);
}

/* --- relative-color DERIVATIONS (progressive enhancement for supporting browsers) --------- */
/* The sentinel `oklch(from red l c h)` in the @supports condition is the standardised test     */
/* for CSS Relative Color Syntax (Level 5); the block is ignored by browsers that fail it.     */
/* Inside: -line mirrors seed, -ink darkens by 0.08L, -tint lightens + desaturates for bg,    */
/*         -border is midpoint — faintly tinted outline.                                        */
@supports (color: oklch(from red l c h)){
  .cig{
    /* info */
    --sem-info-line:   oklch(from var(--sem-info) l c h);
    --sem-info-ink:    oklch(from var(--sem-info) calc(l - 0.08) c h);
    --sem-info-tint:   oklch(from var(--sem-info) calc(l + 0.30) calc(c * 0.40) h);
    --sem-info-border: oklch(from var(--sem-info) calc(l + 0.18) calc(c * 0.55) h);
    /* pos */
    --sem-pos-line:    oklch(from var(--sem-pos) l c h);
    --sem-pos-ink:     oklch(from var(--sem-pos) calc(l - 0.08) c h);
    --sem-pos-tint:    oklch(from var(--sem-pos) calc(l + 0.30) calc(c * 0.40) h);
    --sem-pos-border:  oklch(from var(--sem-pos) calc(l + 0.18) calc(c * 0.55) h);
    /* warn */
    --sem-warn-line:   oklch(from var(--sem-warn) l c h);
    --sem-warn-ink:    oklch(from var(--sem-warn) calc(l - 0.08) c h);
    --sem-warn-tint:   oklch(from var(--sem-warn) calc(l + 0.30) calc(c * 0.40) h);
    --sem-warn-border: oklch(from var(--sem-warn) calc(l + 0.18) calc(c * 0.55) h);
    /* neg */
    --sem-neg-line:    oklch(from var(--sem-neg) l c h);
    --sem-neg-ink:     oklch(from var(--sem-neg) calc(l - 0.08) c h);
    --sem-neg-tint:    oklch(from var(--sem-neg) calc(l + 0.30) calc(c * 0.40) h);
    --sem-neg-border:  oklch(from var(--sem-neg) calc(l + 0.18) calc(c * 0.55) h);
    /* alt */
    --sem-alt-line:    oklch(from var(--sem-alt) l c h);
    --sem-alt-ink:     oklch(from var(--sem-alt) calc(l - 0.08) c h);
    --sem-alt-tint:    oklch(from var(--sem-alt) calc(l + 0.30) calc(c * 0.40) h);
    --sem-alt-border:  oklch(from var(--sem-alt) calc(l + 0.18) calc(c * 0.55) h);
    /* cool */
    --sem-cool-line:   oklch(from var(--sem-cool) l c h);
    --sem-cool-ink:    oklch(from var(--sem-cool) calc(l - 0.08) c h);
    --sem-cool-tint:   oklch(from var(--sem-cool) calc(l + 0.30) calc(c * 0.40) h);
    --sem-cool-border: oklch(from var(--sem-cool) calc(l + 0.18) calc(c * 0.55) h);
    /* ctx */
    --sem-ctx-line:    oklch(from var(--sem-ctx) l c h);
    --sem-ctx-ink:     oklch(from var(--sem-ctx) calc(l - 0.08) c h);
    --sem-ctx-tint:    oklch(from var(--sem-ctx) calc(l + 0.30) calc(c * 0.40) h);
    --sem-ctx-border:  oklch(from var(--sem-ctx) calc(l + 0.18) calc(c * 0.55) h);
  }

  /* Dark theme: flip tint direction (go DARKER so tints work on dark bg) */
  html[data-theme=dark] .cig{
    /* info */
    --sem-info-line:   oklch(from var(--sem-info) l c h);
    --sem-info-ink:    oklch(from var(--sem-info) calc(l + 0.08) c h);
    --sem-info-tint:   oklch(from var(--sem-info) calc(l - 0.30) calc(c * 0.40) h);
    --sem-info-border: oklch(from var(--sem-info) calc(l - 0.18) calc(c * 0.55) h);
    /* pos */
    --sem-pos-line:    oklch(from var(--sem-pos) l c h);
    --sem-pos-ink:     oklch(from var(--sem-pos) calc(l + 0.08) c h);
    --sem-pos-tint:    oklch(from var(--sem-pos) calc(l - 0.30) calc(c * 0.40) h);
    --sem-pos-border:  oklch(from var(--sem-pos) calc(l - 0.18) calc(c * 0.55) h);
    /* warn */
    --sem-warn-line:   oklch(from var(--sem-warn) l c h);
    --sem-warn-ink:    oklch(from var(--sem-warn) calc(l + 0.08) c h);
    --sem-warn-tint:   oklch(from var(--sem-warn) calc(l - 0.30) calc(c * 0.40) h);
    --sem-warn-border: oklch(from var(--sem-warn) calc(l - 0.18) calc(c * 0.55) h);
    /* neg */
    --sem-neg-line:    oklch(from var(--sem-neg) l c h);
    --sem-neg-ink:     oklch(from var(--sem-neg) calc(l + 0.08) c h);
    --sem-neg-tint:    oklch(from var(--sem-neg) calc(l - 0.30) calc(c * 0.40) h);
    --sem-neg-border:  oklch(from var(--sem-neg) calc(l - 0.18) calc(c * 0.55) h);
    /* alt */
    --sem-alt-line:    oklch(from var(--sem-alt) l c h);
    --sem-alt-ink:     oklch(from var(--sem-alt) calc(l + 0.08) c h);
    --sem-alt-tint:    oklch(from var(--sem-alt) calc(l - 0.30) calc(c * 0.40) h);
    --sem-alt-border:  oklch(from var(--sem-alt) calc(l - 0.18) calc(c * 0.55) h);
    /* cool */
    --sem-cool-line:   oklch(from var(--sem-cool) l c h);
    --sem-cool-ink:    oklch(from var(--sem-cool) calc(l + 0.08) c h);
    --sem-cool-tint:   oklch(from var(--sem-cool) calc(l - 0.30) calc(c * 0.40) h);
    --sem-cool-border: oklch(from var(--sem-cool) calc(l - 0.18) calc(c * 0.55) h);
    /* ctx */
    --sem-ctx-line:    oklch(from var(--sem-ctx) l c h);
    --sem-ctx-ink:     oklch(from var(--sem-ctx) calc(l + 0.08) c h);
    --sem-ctx-tint:    oklch(from var(--sem-ctx) calc(l - 0.30) calc(c * 0.40) h);
    --sem-ctx-border:  oklch(from var(--sem-ctx) calc(l - 0.18) calc(c * 0.55) h);
  }
}

/* --- variable-font type-ladder utility classes (.cig-scoped) ------------------------------ */
/* Fonts already loaded by gallery.py/_FONT_FACES and the digest page:                        */
/*   "Fraunces" (variable, wght 400-900, opsz) — display serif                               */
/*   "Bricolage Grotesque" (variable, wght 500-800) — grotesque, dark theme display           */
/*   "IBM Plex Mono" (400/500/600 statics loaded) — monospace                                */
/*   "Newsreader" (variable, wght 400-500) — editorial body (light theme)                     */
/*   "Spline Sans" (400-500) — clean sans (dark theme body)                                   */
/* .cig-* mirror the spec §4 role table; no new @font-face needed.                            */

/* eyebrow — category / section label (mono, small-caps feel, wide tracking) */
.cig .cig-eyebrow{
  font-family:"IBM Plex Mono",monospace;
  font-size:10px;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--faint);
  line-height:1.2;
}

/* head — display headline / takeaway (flips Fraunces↔Bricolage by theme via --display) */
.cig .cig-head{
  font-family:var(--display);
  font-weight:800;
  font-variation-settings:'wght' 800,'opsz' 40;
  font-size:22px;
  letter-spacing:-.025em;
  line-height:1.1;
  color:var(--ink);
}

/* label — item labels in data-dense tiles (Bricolage, medium-weight, slightly narrow) */
.cig .cig-label{
  font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-weight:600;
  font-variation-settings:'wght' 600;
  font-size:13px;
  letter-spacing:-.005em;
  line-height:1.25;
  color:var(--ink);
}

/* sub — gloss / supporting text (Newsreader/Spline Sans, regular, muted) */
.cig .cig-sub{
  font-family:"Newsreader",Georgia,serif;
  font-weight:400;
  font-size:12.5px;
  letter-spacing:0;
  line-height:1.45;
  color:var(--muted);
}
html[data-theme=dark] .cig .cig-sub{
  font-family:"Spline Sans",system-ui,sans-serif;
}

/* cap — caption / source line (mono, smallest, low-contrast) */
.cig .cig-cap{
  font-family:"IBM Plex Mono",monospace;
  font-weight:400;
  font-size:9.5px;
  letter-spacing:.08em;
  line-height:1.4;
  color:var(--faint);
  opacity:.75;
}

/* ========================================================================================== */
/* Batch 4 — small_multiple (editorial small-multiple grid, semantic-palette tiles)            */
/* ========================================================================================== */

/* --- small_multiple — set of like items as coloured tiles --------------------------------- */
/* Per-tile --sm-line/--sm-ink/--sm-tint/--sm-border are resolved from the semantic key class
   (sem-info, sem-pos, etc.) so every tile self-colours from the Task 1 token palette.
   Column count: 1-2 items → 2 cols; 3 items → 3 cols; 4 items → 4 cols; 5-6 items → 3 cols.
   The .span2 modifier makes the last odd item in a 3-col row span both remaining columns.   */
.cig .cig-sm{
  margin:0;padding:0;
}
.cig .cig-sm .cig-eyebrow{
  margin-bottom:6px;
}
.cig .cig-sm .cig-head{
  margin:0 0 16px;
}
.cig .cig-sm-grid{
  display:grid;
  gap:9px;
}
/* column-count classes */
.cig .cig-sm-grid.cols-1,.cig .cig-sm-grid.cols-2{grid-template-columns:repeat(2,1fr)}
.cig .cig-sm-grid.cols-3,.cig .cig-sm-grid.cols-5,.cig .cig-sm-grid.cols-6{grid-template-columns:repeat(3,1fr)}
.cig .cig-sm-grid.cols-4{grid-template-columns:repeat(4,1fr)}
/* 7+ items: fall back to 3-col auto-fill */
.cig .cig-sm-grid.cols-7,.cig .cig-sm-grid.cols-8,.cig .cig-sm-grid.cols-9,
.cig .cig-sm-grid.cols-10,.cig .cig-sm-grid.cols-11,.cig .cig-sm-grid.cols-12{
  grid-template-columns:repeat(3,1fr)
}
/* span2 — last odd tile in a 3-col row spans the remaining two columns */
.cig .cig-sm-grid .span2{grid-column:span 2}

/* tile base */
.cig .cig-sm-tile{
  position:relative;
  padding:11px 12px 12px;
  border-radius:9px;
  display:flex;
  flex-direction:column;
  gap:3px;
  overflow:hidden;
  /* semantic colour injected via sem-* classes below */
  background:var(--sm-tint, var(--node));
  border:1px solid var(--sm-border, var(--rule));
}
/* 3px left bar */
.cig .cig-sm-tile::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:3px;
  background:var(--sm-line, var(--muted));
}
/* icon */
.cig .cig-sm-ico{
  display:block;
  margin-bottom:4px;
  color:var(--sm-line, var(--muted));
  line-height:1;
}
.cig .cig-sm-ico svg{display:block}
/* label overrides cig-label default ink with the semantic ink colour */
.cig .cig-sm-label{
  color:var(--sm-ink, var(--ink));
}
/* sub uses default cig-sub (muted body) — no override needed */

/* legend swatch overrides: sem-sw-<key> sets the swatch to the semantic line colour */
.cig .cig-sm-legend .cig-sm-sw{width:11px;height:11px;border-radius:3px;border:1px solid var(--rule)}
.cig .cig-sm-sw.sem-sw-info{background:var(--sem-info-line);border-color:var(--sem-info-border)}
.cig .cig-sm-sw.sem-sw-pos{background:var(--sem-pos-line);border-color:var(--sem-pos-border)}
.cig .cig-sm-sw.sem-sw-warn{background:var(--sem-warn-line);border-color:var(--sem-warn-border)}
.cig .cig-sm-sw.sem-sw-neg{background:var(--sem-neg-line);border-color:var(--sem-neg-border)}
.cig .cig-sm-sw.sem-sw-alt{background:var(--sem-alt-line);border-color:var(--sem-alt-border)}
.cig .cig-sm-sw.sem-sw-cool{background:var(--sem-cool-line);border-color:var(--sem-cool-border)}
.cig .cig-sm-sw.sem-sw-ctx{background:var(--sem-ctx-line);border-color:var(--sem-ctx-border)}

/* --- semantic key → tile --sm-* variable assignments ------------------------------------ */
/* Each .sem-<key> class binds the four --sm-* locals so the tile rules above can be generic. */
.cig .cig-sm-tile.sem-info{
  --sm-line:var(--sem-info-line);--sm-ink:var(--sem-info-ink);
  --sm-tint:var(--sem-info-tint);--sm-border:var(--sem-info-border);
}
.cig .cig-sm-tile.sem-pos{
  --sm-line:var(--sem-pos-line);--sm-ink:var(--sem-pos-ink);
  --sm-tint:var(--sem-pos-tint);--sm-border:var(--sem-pos-border);
}
.cig .cig-sm-tile.sem-warn{
  --sm-line:var(--sem-warn-line);--sm-ink:var(--sem-warn-ink);
  --sm-tint:var(--sem-warn-tint);--sm-border:var(--sem-warn-border);
}
.cig .cig-sm-tile.sem-neg{
  --sm-line:var(--sem-neg-line);--sm-ink:var(--sem-neg-ink);
  --sm-tint:var(--sem-neg-tint);--sm-border:var(--sem-neg-border);
}
.cig .cig-sm-tile.sem-alt{
  --sm-line:var(--sem-alt-line);--sm-ink:var(--sem-alt-ink);
  --sm-tint:var(--sem-alt-tint);--sm-border:var(--sem-alt-border);
}
.cig .cig-sm-tile.sem-cool{
  --sm-line:var(--sem-cool-line);--sm-ink:var(--sem-cool-ink);
  --sm-tint:var(--sem-cool-tint);--sm-border:var(--sem-cool-border);
}
.cig .cig-sm-tile.sem-ctx{
  --sm-line:var(--sem-ctx-line);--sm-ink:var(--sem-ctx-ink);
  --sm-tint:var(--sem-ctx-tint);--sm-border:var(--sem-ctx-border);
}

/* --- mobile: collapse to 2 cols for all counts ------------------------------------------ */
@media(max-width:780px){
  .cig .cig-sm-grid.cols-4{grid-template-columns:repeat(2,1fr)}
  .cig .cig-sm-grid .span2{grid-column:span 1}
}

/* --- grain utility (.cig-grain) ----------------------------------------------------------- */
/* Applies a subtle SVG feTurbulence fractal-noise texture over hero / section backgrounds.   */
/* USAGE: add class="cig-grain" to a .panel or hero wrapper. The ::after pseudo inlines an    */
/* SVG data-URI filter at low opacity. Fixed baseFrequency/seed → fully deterministic.        */
/* For hero / section bg ONLY — not on small tiles, dense grids, or text containers (CPU).   */
.cig .cig-grain{
  position:relative;
}
.cig .cig-grain::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  opacity:.045;
  /* SVG feTurbulence grain filter inlined as a data-URI background.
     baseFrequency=0.65 numOctaves=4 seed=42 → consistent medium-grain noise.
     The rect fills the filter region so the texture tiles to any container size. */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' seed='42' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23grain)'/%3E%3C/svg%3E");
  background-repeat:repeat;
  background-size:200px 200px;
  mix-blend-mode:overlay;
}
/* Grain is lighter on dark backgrounds to avoid muddying the glow effects */
html[data-theme=dark] .cig .cig-grain::after{
  opacity:.025;
  mix-blend-mode:screen;
}

/* ===================================================================================
   trust_boundary — bounded scoped-capability card
   One capability sits inside a dashed frame; four controls ring the edge as semantic chips.
   kind mapping: scope→info  limit→warn  revoke→neg  monitor→cool
   =================================================================================== */
.cig .cig-tb{
  margin:0;padding:0;
}
.cig .cig-tb .cig-eyebrow{margin-bottom:6px}
.cig .cig-tb .cig-head{margin:0 0 16px}

/* the outer boundary frame */
.cig .cig-tb-frame{
  border:2px dashed var(--rule);
  border-radius:12px;
  padding:16px 14px 14px;
  position:relative;
  display:flex;
  flex-direction:column;
  gap:14px;
  background:var(--node);
}

/* "bounded capability" label in the frame top-left corner */
.cig .cig-tb-boundary-label{
  position:absolute;
  top:-10px;left:14px;
  padding:0 6px;
  background:var(--bg);
  font-size:9px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  line-height:1.4;
}

/* capability centerpiece chip */
.cig .cig-tb-capability{
  display:flex;
  align-items:center;
  gap:8px;
  align-self:center;
  padding:10px 18px;
  border-radius:8px;
  border:2px solid var(--rule);
  background:var(--bg);
  box-shadow:0 1px 4px rgba(0,0,0,.08);
}
.cig .cig-tb-cap-icon{
  display:flex;
  align-items:center;
  color:var(--muted);
  flex-shrink:0;
}
.cig .cig-tb-cap-icon svg{display:block;width:16px;height:16px}

/* controls grid — 2×2 */
.cig .cig-tb-controls{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
}

/* control chip base */
.cig .cig-tb-control{
  position:relative;
  padding:10px 11px 11px;
  border-radius:8px;
  display:flex;
  flex-direction:column;
  gap:2px;
  overflow:hidden;
  background:var(--tb-tint, var(--node));
  border:1px solid var(--tb-border, var(--rule));
}
/* 3px left bar (mirrors .cig-sm-tile) */
.cig .cig-tb-control::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:3px;
  background:var(--tb-line, var(--muted));
}

/* icon */
.cig .cig-tb-ctrl-ico{
  display:block;
  margin-bottom:3px;
  color:var(--tb-line, var(--muted));
  line-height:1;
}
.cig .cig-tb-ctrl-ico svg{display:block;width:14px;height:14px}

/* label uses semantic ink */
.cig .cig-tb-ctrl-label{
  color:var(--tb-ink, var(--ink));
}

/* --- kind → semantic variable bindings ------------------------------------------ */
.cig .cig-tb-control.kind-scope{
  --tb-line:var(--sem-info-line);--tb-ink:var(--sem-info-ink);
  --tb-tint:var(--sem-info-tint);--tb-border:var(--sem-info-border);
}
.cig .cig-tb-control.kind-limit{
  --tb-line:var(--sem-warn-line);--tb-ink:var(--sem-warn-ink);
  --tb-tint:var(--sem-warn-tint);--tb-border:var(--sem-warn-border);
}
.cig .cig-tb-control.kind-revoke{
  --tb-line:var(--sem-neg-line);--tb-ink:var(--sem-neg-ink);
  --tb-tint:var(--sem-neg-tint);--tb-border:var(--sem-neg-border);
}
.cig .cig-tb-control.kind-monitor{
  --tb-line:var(--sem-cool-line);--tb-ink:var(--sem-cool-ink);
  --tb-tint:var(--sem-cool-tint);--tb-border:var(--sem-cool-border);
}

/* --- mobile -------------------------------------------------------------------- */
@media(max-width:780px){
  .cig .cig-tb-controls{grid-template-columns:repeat(2,1fr)}
}

/* ===================================================================================
   memory_tiering — hot/warm/cold tiered placement diagram
   Vertical band stack; temperature → semantic key: hot→neg, warm→warn, cold→cool.
   Each band: tinted bg (--mt-tint) + coloured left rail (--mt-line) + ink (--mt-ink).
   =================================================================================== */
.cig .cig-mt{
  margin:0;padding:0;
}
.cig .cig-mt .cig-eyebrow{margin-bottom:6px}
.cig .cig-mt .cig-head{margin:0 0 16px}

/* the vertical band stack */
.cig .cig-mt-stack{
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* individual band */
.cig .cig-mt-band{
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
  padding:13px 15px 13px 18px;
  border-radius:9px;
  border:1px solid var(--mt-border, var(--rule));
  background:var(--mt-tint, var(--node));
  overflow:hidden;
}
/* coloured left rail */
.cig .cig-mt-band::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:4px;
  background:var(--mt-line, var(--muted));
}

/* left column: icon + temp label stacked */
.cig .cig-mt-band-left{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  flex:none;
  min-width:44px;
}

/* icon */
.cig .cig-mt-ico{
  display:block;
  color:var(--mt-line, var(--muted));
  line-height:1;
}
.cig .cig-mt-ico svg{display:block;width:16px;height:16px}

/* temperature label (HOT / WARM / COLD) */
.cig .cig-mt-temp{
  font-family:"IBM Plex Mono",monospace;
  font-size:9px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--mt-ink, var(--muted));
  white-space:nowrap;
}

/* body: medium (where) + holds (what) */
.cig .cig-mt-band-body{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}
.cig .cig-mt-medium{
  color:var(--mt-ink, var(--ink));
}
.cig .cig-mt-holds{
  /* inherits cig-sub defaults (muted, body font) */
}

/* --- temp → semantic variable bindings ----------------------------------------- */
.cig .cig-mt-band.sem-neg{
  --mt-line:var(--sem-neg-line);--mt-ink:var(--sem-neg-ink);
  --mt-tint:var(--sem-neg-tint);--mt-border:var(--sem-neg-border);
}
.cig .cig-mt-band.sem-warn{
  --mt-line:var(--sem-warn-line);--mt-ink:var(--sem-warn-ink);
  --mt-tint:var(--sem-warn-tint);--mt-border:var(--sem-warn-border);
}
.cig .cig-mt-band.sem-cool{
  --mt-line:var(--sem-cool-line);--mt-ink:var(--sem-cool-ink);
  --mt-tint:var(--sem-cool-tint);--mt-border:var(--sem-cool-border);
}

/* --- mobile -------------------------------------------------------------------- */
@media(max-width:780px){
  .cig .cig-mt-band{padding:11px 12px 11px 16px;gap:10px}
  .cig .cig-mt-band-left{min-width:36px}
  .cig .cig-mt-temp{font-size:8px}
  .cig .cig-mt-medium{font-size:12px}
}

/* ===================================================================================
   versus — qualitative two-stance concept contrast
   Two side-by-side stance cards, centre "vs" divider, optional verdict takeaway.
   Each side self-colours via sem-<key> binding --vs-{line,ink,tint,border} locals
   (same pattern as .cig-sm-tile and .cig-mt-band).
   Mobile: grid collapses to single column (stacked vertically).
   =================================================================================== */
.cig .cig-vs{
  margin:0;padding:0;
}
.cig .cig-vs .cig-eyebrow{margin-bottom:6px}
.cig .cig-vs .cig-head{margin:0 0 16px}

/* two-column grid with a narrow center divider column */
.cig .cig-vs-grid{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:stretch;
  gap:0;
}

/* each stance card — tinted bg + coloured left rail */
.cig .cig-vs-side{
  position:relative;
  padding:14px 16px 16px;
  border-radius:9px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:8px;
  background:var(--vs-tint, var(--node));
  border:1px solid var(--vs-border, var(--rule));
}
/* coloured left rail */
.cig .cig-vs-side::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:3px;
  background:var(--vs-line, var(--muted));
}

/* header row: icon + label */
.cig .cig-vs-side-head{
  display:flex;
  align-items:center;
  gap:7px;
}

/* icon */
.cig .cig-vs-ico{
  display:block;
  color:var(--vs-line, var(--muted));
  line-height:1;
  flex-shrink:0;
}
.cig .cig-vs-ico svg{display:block;width:16px;height:16px}

/* label uses semantic ink colour */
.cig .cig-vs-label{
  color:var(--vs-ink, var(--ink));
}

/* bullet point list */
.cig .cig-vs-points{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:5px;
}
.cig .cig-vs-point{
  display:flex;
  align-items:baseline;
  gap:6px;
  /* inherits cig-sub (muted body font) */
}
/* bullet dot */
.cig .cig-vs-point::before{
  content:"";
  flex:none;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--vs-line, var(--muted));
  margin-top:0.4em;
  opacity:.7;
}

/* center "vs" divider */
.cig .cig-vs-div{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 12px;
  font-family:"Fraunces",Georgia,serif;
  font-weight:800;
  font-variation-settings:'wght' 800,'opsz' 40;
  font-size:17px;
  letter-spacing:-.01em;
  color:var(--muted);
  user-select:none;
}

/* verdict — centred takeaway line below the grid */
.cig .cig-vs-verdict{
  margin-top:14px;
  padding:11px 16px;
  border-radius:8px;
  text-align:center;
  background:color-mix(in srgb,var(--paper) 55%,var(--rule));
  border:1px solid var(--rule);
  font-style:italic;
  /* inherits cig-sub font; override colour to be slightly stronger */
  color:var(--ink);
  opacity:.85;
}

/* --- semantic key → side --vs-* variable bindings -------------------------------- */
/* Mirrors the .cig-sm-tile pattern exactly. */
.cig .cig-vs-side.sem-info{
  --vs-line:var(--sem-info-line);--vs-ink:var(--sem-info-ink);
  --vs-tint:var(--sem-info-tint);--vs-border:var(--sem-info-border);
}
.cig .cig-vs-side.sem-pos{
  --vs-line:var(--sem-pos-line);--vs-ink:var(--sem-pos-ink);
  --vs-tint:var(--sem-pos-tint);--vs-border:var(--sem-pos-border);
}
.cig .cig-vs-side.sem-warn{
  --vs-line:var(--sem-warn-line);--vs-ink:var(--sem-warn-ink);
  --vs-tint:var(--sem-warn-tint);--vs-border:var(--sem-warn-border);
}
.cig .cig-vs-side.sem-neg{
  --vs-line:var(--sem-neg-line);--vs-ink:var(--sem-neg-ink);
  --vs-tint:var(--sem-neg-tint);--vs-border:var(--sem-neg-border);
}
.cig .cig-vs-side.sem-alt{
  --vs-line:var(--sem-alt-line);--vs-ink:var(--sem-alt-ink);
  --vs-tint:var(--sem-alt-tint);--vs-border:var(--sem-alt-border);
}
.cig .cig-vs-side.sem-cool{
  --vs-line:var(--sem-cool-line);--vs-ink:var(--sem-cool-ink);
  --vs-tint:var(--sem-cool-tint);--vs-border:var(--sem-cool-border);
}
.cig .cig-vs-side.sem-ctx{
  --vs-line:var(--sem-ctx-line);--vs-ink:var(--sem-ctx-ink);
  --vs-tint:var(--sem-ctx-tint);--vs-border:var(--sem-ctx-border);
}

/* --- mobile: stack cards vertically -------------------------------------------- */
@media(max-width:780px){
  .cig .cig-vs-grid{
    grid-template-columns:1fr;
    gap:0;
  }
  .cig .cig-vs-div{
    padding:8px 0;
    font-size:14px;
  }
  .cig .cig-vs-side{
    padding:12px 13px 13px;
  }
}

/* ===================================================================================
   config_recipe — copy-ready key=value settings card
   A framed monospace recipe panel. Single accent: --sem-info (blue hue).
   Key: muted mono. Sep (=): faint. Value: --sem-info-ink bold mono. Note: faint small.
   Subtle --sem-info-tint panel with --sem-info-border edge for the terminal feel.
   =================================================================================== */
.cig .cig-cr{
  margin:0;padding:0;
}
.cig .cig-cr .cig-eyebrow{margin-bottom:6px}
.cig .cig-cr .cig-head{margin:0 0 14px}

/* the tinted monospace recipe panel */
.cig .cig-cr-panel{
  background:var(--sem-info-tint, var(--node));
  border:1px solid var(--sem-info-border, var(--rule));
  border-radius:9px;
  padding:14px 18px;
  display:flex;
  flex-direction:column;
  gap:0;
  overflow:hidden;
}

/* individual param row */
.cig .cig-cr-row{
  display:grid;
  grid-template-columns:minmax(120px,1.2fr) 22px minmax(48px,0.8fr) 1fr;
  align-items:baseline;
  padding:8px 0;
  border-top:1px solid color-mix(in srgb,var(--sem-info-border, var(--rule)) 40%,transparent);
}
.cig .cig-cr-row:first-child{
  border-top:0;
  padding-top:4px;
}
.cig .cig-cr-row:last-child{
  padding-bottom:4px;
}

/* key — muted monospace */
.cig .cig-cr-key{
  font-family:"IBM Plex Mono",monospace;
  font-size:12.5px;
  font-weight:500;
  letter-spacing:.01em;
  color:var(--muted);
  white-space:nowrap;
}

/* separator (=) — very faint */
.cig .cig-cr-sep{
  font-family:"IBM Plex Mono",monospace;
  font-size:12.5px;
  font-weight:400;
  color:var(--faint);
  text-align:center;
  user-select:none;
}

/* value — bold, single accent (info) */
.cig .cig-cr-val{
  font-family:"IBM Plex Mono",monospace;
  font-size:13px;
  font-weight:700;
  letter-spacing:.01em;
  color:var(--sem-info-ink, var(--accent2));
}

/* note — faint small, right-aligned */
.cig .cig-cr-note{
  font-family:"IBM Plex Mono",monospace;
  font-size:9.5px;
  font-weight:400;
  letter-spacing:.04em;
  color:var(--faint);
  text-align:right;
  opacity:.8;
  padding-left:10px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* caption */
.cig .cig-cr-cap{
  margin-top:11px;
}

/* --- mobile -------------------------------------------------------------------- */
@media(max-width:780px){
  .cig .cig-cr-panel{padding:11px 13px}
  .cig .cig-cr-row{
    grid-template-columns:minmax(90px,1.1fr) 20px minmax(36px,0.7fr) 1fr;
    gap:0;
    padding:7px 0;
  }
  .cig .cig-cr-key{font-size:11px}
  .cig .cig-cr-val{font-size:11.5px}
  .cig .cig-cr-note{font-size:8.5px}
}

/* ========================================================================================== */
/* Kit engine (tier-1) — tokens + editorial INSET sizing.                                      */
/* ========================================================================================== */

/* --- kit paint/type tokens (the vocabulary kit.py primitives emit) ------------------------ */
/* Every var(--x) a primitive uses MUST be defined here (enforced by                          */
/* test_every_kit_token_is_defined_in_archetypes_css): an unresolved var() in fill/stroke     */
/* computes to black/none — a black blob in light, INVISIBLE in dark. Fonts follow the spec   */
/* §4 role table; categorical tones + empty-fill alias the theme-flipping tokens above, so    */
/* no per-theme override block is needed here.                                                */
.cig{
  --mono:"IBM Plex Mono",monospace;                    /* eyebrow / caption / data */
  --label:"Bricolage Grotesque",system-ui,sans-serif;  /* item labels (both themes) */
  --fill-empty:var(--cell);                            /* gauge empty track / node fill */
  --c1:var(--sem-info-line);                           /* categorical tones 1..5 */
  --c2:var(--sem-pos-line);
  --c3:var(--sem-warn-line);
  --c4:var(--sem-alt-line);
  --c5:var(--sem-cool-line);
}

/* --- editorial INSET sizing. A graphic supports the reading flow, it does not dominate it:  */
/* capped width on desktop, centered; fluid 100% under the cap on mobile.                     */
/* Scoped to .cig-kit so legacy/archive .cig graphics are untouched.                          */
.cig.cig-kit{max-width:480px;margin:1.4em auto;}
.cig.cig-kit .cig-head{font-size:15px;font-variation-settings:'wght' 700,'opsz' 24;font-weight:700;margin:2px 0 10px;}
.cig.cig-kit .cig-cap{margin-top:8px;}
.cig.cig-kit .svgwrap{max-width:420px;margin:0 auto;}
.cig.cig-kit .svgwrap svg{width:100%;height:auto;display:block;}
.cig.cig-kit--object_gauge .svgwrap{max-width:260px;}
.cig.cig-kit--cycle .svgwrap{max-width:300px;}
.cig.cig-kit--proportional_spheres .svgwrap{max-width:380px;}