/* MERLIN Flows. Dark by default; the same colour codes everywhere:
   code cyan, AI violet, person amber, the books slate; automatic return red
   dashed, return by a person amber dotted, stop red. The LLM's proposal, its
   own words, is red text wherever it appears. Section titles are blue.
   Offline: system fonts only. Sized to be read from across a room. */

:root {
  color-scheme: dark;
  --bg: #0d1117; --panel: #151b23; --panel2: #1b222c; --raise: #222a35;
  --ink: #e6edf3; --ink2: #c3cbd4; --muted: #929ba6; --line: #2d333b; --line2: #3d4550;
  --code: #22c3e0; --code-bg: #0e2a31;
  --llm: #b39cf5; --llm-bg: #231d3a;
  --person: #fdb022; --person-bg: #33240e;
  --books: #a7b1c2; --books-bg: #1d232c;
  --ret: #f58a9c; --stop: #f97066; --stop-bg: #3a1714;
  --esc: #fd853a; --warn: #fdb022; --ok: #47cd89;
  --proposal: #ff6b6b;
  --title: #58a6ff;
  --hatch: rgba(167, 177, 194, 0.10);
  --focus: #58a6ff;
  --token: #ffffff;
  --shadow: 0 10px 40px rgba(0, 0, 0, 0.55);
  /* Buttons: grey, raised, pressed when down. */
  --btn-top: #4b535f; --btn-bot: #39404a; --btn-ink: #f0f3f6; --btn-edge: #1c2128;
  --btn-hi: rgba(255, 255, 255, 0.14); --btn-on-top: #2b3b52; --btn-on-bot: #22314a;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f7f9; --panel: #ffffff; --panel2: #f1f3f6; --raise: #e9edf2;
  --ink: #161b22; --ink2: #333c48; --muted: #5f6875; --line: #d9dee6; --line2: #c6cdd7;
  --code: #0e7490; --code-bg: #e6f6fa;
  --llm: #6941c6; --llm-bg: #f3effd;
  --person: #b54708; --person-bg: #fff4e5;
  --books: #475467; --books-bg: #eef1f5;
  --ret: #c01048; --stop: #d92d20; --stop-bg: #fdecea;
  --esc: #c4320a; --warn: #b54708; --ok: #067647;
  --proposal: #c81e1e;
  --title: #1f6feb;
  --hatch: rgba(71, 84, 103, 0.08);
  --focus: #1f6feb;
  --token: #161b22;
  --shadow: 0 10px 40px rgba(16, 24, 40, 0.18);
  --btn-top: #f7f8fa; --btn-bot: #dfe3e8; --btn-ink: #1f2328; --btn-edge: #b3bac4;
  --btn-hi: rgba(255, 255, 255, 0.9); --btn-on-top: #dbe7fb; --btn-on-bot: #c7d8f5;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.5;
  min-height: 100vh; display: flex; flex-direction: column;
}
button, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
code, .mono { font-family: var(--mono); }

/* Buttons ---------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: linear-gradient(var(--btn-top), var(--btn-bot)); color: var(--btn-ink);
  border: 1px solid var(--btn-edge); border-radius: 7px; padding: 7px 14px;
  font-size: 15px; font-weight: 600; line-height: 1.2; white-space: nowrap; text-decoration: none;
  box-shadow: inset 0 1px 0 var(--btn-hi), 0 1px 2px rgba(0, 0, 0, 0.35);
}
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35); }
.btn[aria-pressed="true"] { background: linear-gradient(var(--btn-on-top), var(--btn-on-bot)); border-color: var(--focus); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25); }
.btn.small { font-size: 13.5px; padding: 4px 10px; border-radius: 6px; }
.btn.wide { min-width: 110px; }
.btn-group { display: inline-flex; }
.btn-group .btn { border-radius: 0; }
.btn-group .btn:first-child { border-radius: 7px 0 0 7px; }
.btn-group .btn:last-child { border-radius: 0 7px 7px 0; }
.btn-group .btn + .btn { border-left: 0; }

/* Header ------------------------------------------------------------------------ */
header.top {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  padding: 10px 18px; background: var(--panel); border-bottom: 1px solid var(--line);
}
.brand { display: flex; flex-direction: column; gap: 0; margin-right: auto; }
.brand h1 { font-size: 22px; margin: 0; letter-spacing: -0.01em; }
.brand .ver { font-size: 12px; color: var(--muted); white-space: nowrap; }
.btn.icon { min-width: 38px; padding: 7px 10px; font-size: 16px; }
.ctl { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ink2); }
.ctl select { background: var(--panel2); border: 1px solid var(--line2); border-radius: 7px; padding: 6px 8px; font-size: 15px; }
.toggles { display: inline-flex; flex-wrap: wrap; gap: 4px 14px; }
.toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; color: var(--ink2); cursor: pointer; user-select: none; }
.toggle input { accent-color: var(--code); width: 16px; height: 16px; }

.intro {
  display: flex; flex-wrap: wrap; gap: 8px 26px; align-items: center;
  padding: 10px 18px; border-bottom: 1px solid var(--line);
  font-size: 15px; color: var(--ink2);
}
.intro p { margin: 0; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.legend i { width: 14px; height: 14px; border-radius: 3px; border: 2px solid; display: inline-block; }
.legend svg { width: 32px; height: 10px; }
.legend .prop { color: var(--proposal); font-weight: 700; }

/* Main ---------------------------------------------------------------------------- */
main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.stage { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.canvas { padding: 10px 18px 4px; overflow-x: auto; }
svg.map { display: block; width: 100%; height: auto; min-width: 1100px; max-height: calc(100vh - 330px); }

/* The map ------------------------------------------------------------------------ */
.map text { font-family: var(--sans); fill: var(--ink2); }
.map .n-rect { stroke-width: 2; }
.map .node { cursor: pointer; transition: opacity 0.25s; }
.map .node:hover .n-rect, .map .node:focus-visible .n-rect { stroke-width: 3.5; }
.map .node:focus-visible { outline: none; }
.map .node.active .n-rect { stroke-width: 4; filter: drop-shadow(0 0 10px var(--glow, var(--code))); }
.map .node .badge { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; }
.map .node .title { font-size: 18px; font-weight: 700; fill: var(--ink); }
.map .node .sub { font-size: 13.5px; }
.map .node .count { font-size: 12px; font-weight: 700; fill: var(--muted); }
.map .k-code .n-rect { fill: var(--code-bg); stroke: var(--code); } .map .k-code .badge { fill: var(--code); } .map .k-code { --glow: var(--code); }
.map .k-llm .n-rect { fill: var(--llm-bg); stroke: var(--llm); } .map .k-llm .badge { fill: var(--llm); } .map .k-llm { --glow: var(--llm); }
.map .k-person .n-rect { fill: var(--person-bg); stroke: var(--person); } .map .k-person .badge { fill: var(--person); } .map .k-person { --glow: var(--person); }
.map .k-books .n-rect { fill: var(--books-bg); stroke: var(--books); } .map .k-books .badge { fill: var(--books); } .map .k-books { --glow: var(--books); }
.map .inset { cursor: pointer; }
.map .inset-r { fill: color-mix(in srgb, var(--bg) 55%, transparent); stroke: var(--muted); stroke-width: 1.8; stroke-dasharray: 2 4; stroke-linecap: round; }
.map .inset:hover .inset-r, .map .inset:focus-visible .inset-r { stroke: var(--ink2); stroke-width: 2.4; }
.map .inset:focus-visible { outline: none; }
.map .inset-b { font-size: 9.5px; font-weight: 800; letter-spacing: 0.07em; fill: var(--muted); }
.map .inset-t { font-size: 14px; font-weight: 700; fill: var(--ink2); }
.map .inset-t.big { font-size: 18px; } /* RID303: RAG beside the books, the band's size */
/* RID305: RAG is built (MERLIN Knowledge): drawn solid, as an outside system like the books. */
.map .inset.built .inset-r { fill: var(--books-bg); stroke: var(--books); stroke-width: 2; stroke-dasharray: none; }
.map .inset.built .inset-b { fill: var(--books); }
.map .inset.built .inset-t { fill: var(--ink); }
.map .inset.built .inset-s { font-style: normal; fill: var(--ink2); }
.map .inset-s { font-size: 12px; fill: var(--muted); font-style: italic; }
.map .chip-code { fill: var(--code); } .map .chip-llm { fill: var(--llm); }
.map .chip-t { font-size: 12px; font-weight: 700; fill: var(--bg); }

/* The Analyst run: Prep, the Analyst and the Consistency check are one task (RID170: brighter). */
.map .frame { fill: color-mix(in srgb, var(--title) 5%, transparent); stroke: var(--title); stroke-width: 2.4; stroke-dasharray: 8 5; }
.map .frame-t { font-size: 12.5px; font-weight: 800; letter-spacing: 0.07em; fill: var(--title); cursor: pointer; }
.map .frame-t:hover { text-decoration: underline; }
.map .edge { fill: none; stroke: var(--ink2); stroke-width: 2.2; }
.map .edge-t { font-size: 13px; fill: var(--muted); paint-order: stroke; stroke: var(--bg); stroke-width: 6px; stroke-linejoin: round; } /* a halo, so a label reads over the frame's line */
.map .edge.hit, .map .ret.hit { stroke: transparent; stroke-width: 16; cursor: pointer; }
.map .ret { fill: none; stroke-width: 2.2; }
.map .ret.auto { stroke: var(--ret); stroke-dasharray: 7 5; }
.map .ret.person { stroke: var(--person); stroke-dasharray: 1.5 5; stroke-linecap: round; stroke-width: 2.6; }
.map .ret-t { font-size: 13px; font-weight: 700; }
.map .ret-t.auto { fill: var(--ret); } .map .ret-t.person { fill: var(--person); }
.map .call { stroke: var(--books); stroke-width: 2; fill: none; }
.map .call.via { stroke-dasharray: 3 3; }
.map .call.writes { stroke: var(--ok); stroke-width: 3.6; } /* the only call that changes the books (RID178) */
.map .call-t.writes { fill: var(--ok); font-weight: 700; }
.map .call-t { font-size: 12.5px; fill: var(--muted); }
.map .gate { cursor: pointer; }
.map .gate rect { fill: var(--panel); stroke: var(--books); stroke-width: 1.8; }
.map .gate text { font-size: 12px; font-weight: 700; fill: var(--ink); font-family: var(--mono); }
.map .gate:hover rect, .map .gate.active rect { stroke: var(--focus); stroke-width: 2.6; }
.map .stop { cursor: pointer; }
.map .stop rect { fill: var(--stop); }
.map .stop text { font-size: 12.5px; font-weight: 700; fill: var(--stop); }
.map .boundary-line { stroke: var(--muted); stroke-width: 1.8; stroke-dasharray: 10 6; }
.map .boundary-t { font-size: 12px; font-weight: 700; letter-spacing: 0.07em; fill: var(--muted); cursor: pointer; }
.map .outside { fill: url(#hatch); }
.map .dim { opacity: 0.28; }
.map .edge.lit, .map .call.lit { stroke: var(--focus); stroke-width: 3.5; }
.map .token { fill: var(--token); stroke: var(--focus); stroke-width: 3; }
.map.hide-returns .ret-g { display: none; }
.map.hide-calls .call-g { display: none; }
.map.hide-boundary .boundary-g { display: none; }

/* Caption bar (the player) -------------------------------------------------------- */
.caption { border-top: 1px solid var(--line); background: var(--panel); padding: 12px 18px 14px; display: grid; gap: 10px; }
.caption .row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.caption .pos { font-family: var(--mono); font-size: 14px; color: var(--muted); }
.caption .scen { font-size: 15px; color: var(--ink2); font-weight: 600; }
.caption .text { font-size: 20px; line-height: 1.45; color: var(--ink); min-height: 2.9em; max-width: 110ch; }
.caption .where { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14.5px; color: var(--muted); }
.progress { height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; }
.progress i { display: block; height: 100%; width: 0; background: var(--focus); transition: width 0.3s; }

/* Pills, tags, chips ------------------------------------------------------------- */
.pill { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line2); color: var(--ink2); white-space: nowrap; }
.pill.scripted { border-color: var(--warn); color: var(--warn); }
.pill.captured { border-color: var(--ok); color: var(--ok); }
.who { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; border: 1px solid; white-space: nowrap; }
.who.code { color: var(--code); border-color: var(--code); background: var(--code-bg); }
.who.llm { color: var(--llm); border-color: var(--llm); background: var(--llm-bg); }
.who.person { color: var(--person); border-color: var(--person); background: var(--person-bg); }
.who.books { color: var(--books); border-color: var(--books); background: var(--books-bg); }
.tag { font-family: var(--mono); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--line2); color: var(--muted); white-space: nowrap; }
.tag.return { color: var(--ret); border-color: var(--ret); }
.tag.stop, .tag.block, .tag.refuse { color: var(--stop); border-color: var(--stop); background: var(--stop-bg); }
.tag.escalate { color: var(--esc); border-color: var(--esc); }
.tag.warn { color: var(--warn); border-color: var(--warn); }
.tag.flag { color: var(--llm); border-color: var(--llm); }
.tag.route { color: var(--books); border-color: var(--books); }
.tag.set-aside, .tag.compute { color: var(--code); border-color: var(--code); }
.tag.break { color: var(--stop); border-color: var(--stop); }
.tag.hold { color: var(--warn); border-color: var(--warn); }
.tag.fm { font-family: var(--sans); text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--llm); border-color: var(--llm); background: var(--llm-bg); }
.tag.fm.flows { border-style: dashed; }

/* A check, as a row: id, what it checks, what it decides. Clickable. */
.chk {
  display: grid; grid-template-columns: 62px 1fr auto; align-items: baseline; gap: 10px; width: 100%; text-align: left;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 7px; padding: 6px 10px; font-size: 14.5px; color: var(--ink);
}
.chk:hover { border-color: var(--focus); }
.chk .id { font-family: var(--mono); font-size: 13px; color: var(--muted); white-space: nowrap; }
.chk.note { border-style: dashed; }
.chk.sel { border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }

/* The LLM's own words ----------------------------------------------------------- */
.proposal, .json .s.proposal, .btn.proposal { color: var(--proposal); font-weight: 700; }
.in-body h2.proposal { color: var(--proposal); }
blockquote.proposal { margin: 2px 0 0; padding: 6px 10px; border-left: 3px solid var(--proposal); background: var(--panel2); border-radius: 0 6px 6px 0; font-size: 14.5px; font-style: italic; }

/* Close-up ---------------------------------------------------------------------- */
.closeup { padding: 12px 18px 26px; display: grid; gap: 16px; align-content: start; }
.minimap-wrap { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px 6px; }
.minimap-wrap .hint { font-size: 13px; color: var(--muted); margin: 0 0 2px 4px; }
svg.minimap { display: block; width: 100%; height: auto; max-height: 190px; }
.minimap text { font-family: var(--sans); }
.minimap .mm-node { cursor: pointer; }
.minimap .mm-node rect { stroke-width: 2; }
.minimap .mm-node:hover rect { stroke-width: 3.5; }
.minimap .mm-node text { font-size: 17px; font-weight: 700; fill: var(--ink); }
.minimap .mm-node.here rect { stroke-width: 5; filter: drop-shadow(0 0 8px var(--glow)); }
.minimap .mm-node.here text { font-size: 18px; }
.minimap .k-code rect { fill: var(--code-bg); stroke: var(--code); } .minimap .k-code { --glow: var(--code); }
.minimap .k-llm rect { fill: var(--llm-bg); stroke: var(--llm); } .minimap .k-llm { --glow: var(--llm); }
.minimap .k-person rect { fill: var(--person-bg); stroke: var(--person); } .minimap .k-person { --glow: var(--person); }
.minimap .k-books rect { fill: var(--books-bg); stroke: var(--books); } .minimap .k-books { --glow: var(--books); }
.minimap .mm-edge { stroke: var(--ink2); stroke-width: 2; fill: none; }
.minimap .mm-call { stroke: var(--books); stroke-width: 1.5; fill: none; stroke-dasharray: 3 3; }
.minimap .mm-boundary { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 8 5; }
.minimap .mm-here-t { font-size: 13px; font-weight: 700; fill: var(--focus); letter-spacing: 0.06em; }

.cu-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 18px; }
.cu-head .t { display: grid; gap: 6px; margin-right: auto; max-width: 100ch; }
.cu-head h2 { margin: 0; font-size: 28px; letter-spacing: -0.01em; }
.cu-head p { margin: 0; color: var(--ink2); font-size: 17px; }
.cu-nav { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.cu-grid { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(420px, 2.3fr) minmax(240px, 1fr); gap: 18px; align-items: start; }
.cu-col { display: grid; gap: 10px; align-content: start; }
h3.sec, .cu-col h3, .cu-sum h3 { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--title); }
.io { border: 1px solid var(--line); background: var(--panel); border-radius: 9px; padding: 10px 12px; display: grid; gap: 6px; }
.io.out { border-style: dashed; }
.io .h { display: flex; align-items: baseline; gap: 8px; font-weight: 700; font-size: 16px; }
.io .glyph { font-family: var(--mono); font-weight: 700; font-size: 14px; }
.io.structured .glyph { color: var(--code); } .io.narrative .glyph { color: var(--llm); }
.io ul { margin: 0; padding-left: 18px; font-size: 14.5px; color: var(--ink2); }
.io.narrative ul { font-style: italic; }
.io .btn { justify-self: start; white-space: normal; text-align: left; }
.steps { display: grid; gap: 10px; counter-reset: step; }
.step {
  position: relative; border: 1px solid var(--line); border-left: 6px solid var(--muted); background: var(--panel);
  border-radius: 9px; padding: 10px 14px 12px 16px; display: grid; gap: 8px; transition: box-shadow 0.25s, opacity 0.25s;
}
.step.code { border-left-color: var(--code); } .step.llm { border-left-color: var(--llm); }
.step.person { border-left-color: var(--person); } .step.books { border-left-color: var(--books); }
.step .h { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.step .h b { font-size: 18px; }
.step .h::before { counter-increment: step; content: counter(step); font-family: var(--mono); font-size: 13px; color: var(--muted); }
.step p { margin: 0; color: var(--ink2); font-size: 15.5px; }
.step .chks { display: grid; gap: 6px; }
.steps.playing .step { opacity: 0.45; }
.steps.playing .step.on, .step.on { opacity: 1; box-shadow: 0 0 0 3px var(--focus); }
.step-arrow { justify-self: center; color: var(--muted); font-size: 13px; line-height: 1; margin: -4px 0; }
.cu-sum { border-top: 1px solid var(--line); padding-top: 14px; display: grid; gap: 10px; }
.bars { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 15px; color: var(--ink2); align-items: center; }
.bars .n { font-family: var(--mono); font-weight: 700; color: var(--ink); }
.fms { display: flex; flex-wrap: wrap; gap: 6px; }

/* Inspector: a drawer over the page, so the map keeps its size ------------------ */
aside.inspector {
  position: fixed; top: 0; right: 0; bottom: 0; width: 520px; max-width: 94vw; z-index: 30;
  border-left: 1px solid var(--line2); background: var(--panel); box-shadow: var(--shadow);
  display: flex; flex-direction: column;
}
aside.inspector[hidden] { display: none; }
.in-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.in-head .k { font-size: 14px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--title); margin-right: auto; }
.in-body { flex: 1; overflow: auto; padding: 14px 18px 28px; display: grid; gap: 14px; align-content: start; font-size: 15.5px; }
.in-body h2 { margin: 0; font-size: 21px; line-height: 1.3; }
.in-body h2 .id { font-family: var(--mono); color: var(--muted); font-size: 16px; margin-right: 8px; }
.in-body p { margin: 0; color: var(--ink2); }
.kv { display: grid; grid-template-columns: 96px 1fr; gap: 8px 12px; font-size: 15px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; color: var(--ink); }
.row-wrap { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.stack { display: grid; gap: 6px; }
.note-box { border: 1px dashed var(--line2); border-radius: 8px; padding: 10px 12px; font-size: 14.5px; color: var(--ink2); }
.note-box.warn { border-color: var(--warn); }
.src { font-size: 14px; color: var(--muted); }
pre.text {
  margin: 0; font-family: var(--mono); font-size: 13px; line-height: 1.55; white-space: pre-wrap; word-break: break-word;
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; color: var(--ink2);
}
pre.text .fence { color: var(--llm); font-weight: 700; }
.json { font-family: var(--mono); font-size: 13px; line-height: 1.6; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; overflow-x: auto; }
.json details { margin-left: 14px; }
.json > details { margin-left: 0; }
.json summary { cursor: pointer; color: var(--ink2); list-style: none; }
.json summary::-webkit-details-marker { display: none; }
.json summary::before { content: "▸ "; color: var(--muted); }
.json details[open] > summary::before { content: "▾ "; }
.json .k { color: var(--code); }
.json .s { color: var(--ok); word-break: break-word; }
.json .n { color: var(--warn); }
.json .b { color: var(--llm); }
.json .z { color: var(--muted); }
.json .leaf { margin-left: 14px; }
.json .more { color: var(--muted); font-style: italic; }

/* Help ------------------------------------------------------------------------ */
dialog.help { border: 1px solid var(--line2); border-radius: 12px; background: var(--panel); color: var(--ink); max-width: 620px; box-shadow: var(--shadow); font-size: 16px; }
dialog.help::backdrop { background: rgba(0, 0, 0, 0.5); }
dialog.help h2 { margin: 0 0 10px; font-size: 21px; }
dialog.help table { border-collapse: collapse; font-size: 15px; }
dialog.help td { padding: 4px 14px 4px 0; vertical-align: top; }
dialog.help kbd { font-family: var(--mono); font-size: 13px; border: 1px solid var(--line2); border-bottom-width: 2px; border-radius: 4px; padding: 0 6px; }

/* The right-click note (RID170) --------------------------------------------- */
.tipcard { position: fixed; z-index: 40; width: 360px; max-width: calc(100vw - 24px); background: var(--panel); border: 1px solid var(--line2); border-radius: 10px; box-shadow: var(--shadow); padding: 12px 14px; display: grid; gap: 8px; font-size: 14.5px; }
.tipcard[hidden] { display: none; }
.tipcard h3 { margin: 0; font-size: 17px; }
.tipcard p { margin: 0; color: var(--ink2); }
.legend .hint { color: var(--muted); font-style: italic; }
.tree-ctl .btn { font-size: 13px; }

/* Templates (RID170) --------------------------------------------------------- */
.templates { padding: 12px 18px 26px; display: grid; gap: 14px; }
.tp-head { display: grid; gap: 6px; max-width: 120ch; }
.tp-head h2 { margin: 0; font-size: 28px; }
.tp-head p { margin: 0; color: var(--ink2); }
.tp-body { display: grid; grid-template-columns: minmax(250px, 320px) 1fr; gap: 18px; align-items: start; }
.tp-nav { position: sticky; top: 8px; max-height: calc(100vh - 24px); overflow: auto; display: grid; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.tp-group { display: grid; gap: 3px; }
.tp-block { justify-self: start; cursor: pointer; font-size: 12.5px; }
.tp-block.cat { font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--title); cursor: default; }
.tp-item { display: flex; gap: 8px; align-items: baseline; padding: 4px 8px; border-radius: 6px; color: var(--ink); text-decoration: none; font-size: 14.5px; }
.tp-item:hover { background: var(--panel2); }
.tp-item.on { background: var(--raise); box-shadow: inset 3px 0 0 var(--focus); }
.tp-kind { font-family: var(--mono); font-size: 11px; font-weight: 700; padding: 0 5px; border-radius: 4px; border: 1px solid var(--line2); color: var(--muted); flex: none; }
.tp-kind.k-mcp { color: var(--books); border-color: var(--books); }
.tp-kind.k-llm { color: var(--llm); border-color: var(--llm); }
.tp-kind.k-rest { color: var(--code); border-color: var(--code); }
.tp-kind.k-record { color: var(--ok); border-color: var(--ok); }
.tp-kind.k-schema, .tp-kind.k-spec { color: var(--warn); border-color: var(--warn); }
.tp-main { display: grid; gap: 14px; align-content: start; min-width: 0; }
.tp-title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tp-title h2 { margin: 0; font-size: 24px; }
.tp-title .tp-kind { font-size: 13px; padding: 2px 7px; }
.tp-kv { grid-template-columns: 110px 1fr; }
.tp-kv .who { cursor: pointer; }
.tp-note { font-size: 16px; color: var(--ink2); max-width: 110ch; margin: 0; }
.tp-content { display: grid; gap: 14px; }
.tp-msg, .tp-part { display: grid; gap: 8px; }
.tp-line { font-size: 15px; font-weight: 700; color: var(--ink); background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px; justify-self: start; }
.tp-sub { display: grid; gap: 4px; }
.tp-sub > .k { font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.tp-table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
.tp-table th { text-align: left; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--title); border-bottom: 1px solid var(--line2); padding: 6px 8px; }
.tp-table td { border-bottom: 1px solid var(--line); padding: 6px 8px; vertical-align: top; }
.tp-row { cursor: pointer; }
.tp-row:hover td { background: var(--panel2); }
.tp-filter { background: var(--panel2); border: 1px solid var(--line2); border-radius: 7px; padding: 6px 10px; font-size: 15px; color: var(--ink); min-width: 240px; }
.tp-links { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13.5px; color: var(--muted); }
.cu-diff { border-left: 4px solid var(--title); background: var(--panel); border-radius: 0 8px 8px 0; padding: 10px 14px; font-size: 15.5px; color: var(--ink2); max-width: 120ch; }

/* Visibility (RID174; toggles since RID177): five options shown in any
   combination. Things between the blocks take their option from mapLayer
   (classes L1 to L5); a block's own detail is placed here: its description
   and the Narrative check's chips with option 1, its check count with option 5. An element an event needs is shown for that
   event (.reveal) whatever the level. */
.map.hide-L1 .L1:not(.reveal), .map.hide-L2 .L2:not(.reveal), .map.hide-L3 .L3:not(.reveal),
.map.hide-L4 .L4:not(.reveal), .map.hide-L5 .L5:not(.reveal) { display: none; }
.map.hide-L1 .node .sub, .map.hide-L1 .edge-t, .map.hide-L1 .node [class^="chip-"] { display: none; }
.map.hide-L5 .node .count { display: none; }
.map .reveal { animation: flows-reveal 0.45s ease-out; }
@keyframes flows-reveal { from { opacity: 0; } }

.intro { display: grid; grid-template-columns: minmax(0, 1fr); }
.intro .legend { grid-column: 1 / -1; }
.visibility { display: flex; flex-direction: row; align-items: center; gap: 10px; flex-wrap: wrap; }
.visibility .vis-label { font-size: 12.5px; font-weight: 800; letter-spacing: 0.08em; color: var(--muted); text-transform: uppercase; }
.visibility .vis-row { display: flex; align-items: stretch; gap: 6px; flex-wrap: wrap; }
.visibility .vis-gap { width: 18px; border-left: 1px dashed var(--line2); margin-left: 12px; }
.visibility .btn.vis { font-size: 15px; padding: 5px 12px; }
.visibility .btn.vis .n { font-family: var(--mono); font-size: 13px; opacity: 0.7; margin-right: 6px; }
/* Each option is a toggle (RID177): on reads as pressed, in the title colour. */
.visibility .btn.vis[aria-pressed="true"] { color: var(--title); }

/* The Architecture tab (RID177). The switches are classes on the canvas. */
.arch-canvas { display: grid; gap: 8px; }
.arch-legend .agent-sw { border-color: var(--ink) !important; border-width: 3px !important; background: var(--panel2); }
.arch-legend .ln { display: inline-flex; align-items: center; gap: 6px; }
.arch-legend .ln::before { content: ""; width: 28px; border-top: 2.4px solid; }
.arch-legend .ln.m { color: var(--llm); } .arch-legend .ln.t { color: var(--books); }
.arch-legend .ln.k { color: var(--person); } .arch-legend .ln.k::before { border-top-style: dashed; }
svg.map.arch { max-height: calc(100vh - 290px); }
.arch text { font-family: var(--sans); fill: var(--ink2); }
.arch .az { fill: color-mix(in srgb, var(--panel) 55%, transparent); stroke: var(--line2); stroke-width: 1.5; }
.arch .az-llm { fill: color-mix(in srgb, var(--llm) 7%, transparent); stroke: var(--llm); stroke-dasharray: 9 5; stroke-width: 2; }
.arch .az-tools { fill: color-mix(in srgb, var(--books) 6%, transparent); }
.arch .az-knowledge { fill: color-mix(in srgb, var(--books) 6%, transparent); } /* RID303: RAG beside the books */
.arch .az-server { stroke: var(--code); stroke-width: 1.8; }
.arch .az-t { font-size: 12px; font-weight: 800; letter-spacing: 0.07em; fill: var(--muted); }
.arch .az-t-llm { fill: var(--llm); } .arch .az-t-server { fill: var(--code); }
.arch .ab-line { stroke: var(--muted); stroke-width: 1.8; stroke-dasharray: 10 6; }
.arch .ab-t { font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; fill: var(--muted); }
.arch .ac { cursor: pointer; transition: opacity 0.25s; }
.arch .ac:focus-visible { outline: none; }
.arch .ac-rect { stroke-width: 2; }
.arch .ac:hover .ac-rect, .arch .ac:focus-visible .ac-rect { stroke-width: 3.4; }
.arch .k-code .ac-rect { fill: var(--code-bg); stroke: var(--code); } .arch .k-code .ac-badge { fill: var(--code); }
.arch .k-llm .ac-rect { fill: var(--llm-bg); stroke: var(--llm); } .arch .k-llm .ac-badge { fill: var(--llm); }
.arch .k-person .ac-rect { fill: var(--person-bg); stroke: var(--person); } .arch .k-person .ac-badge { fill: var(--person); }
.arch .k-books .ac-rect { fill: var(--books-bg); stroke: var(--books); } .arch .k-books .ac-badge { fill: var(--books); }
.arch .k-note .ac-rect { fill: none; stroke: var(--stop); stroke-dasharray: 5 4; } .arch .k-note .ac-badge, .arch .k-note .ac-title { fill: var(--stop); }
.arch .ac-agent .ac-rect { stroke-width: 3.6; }
.arch .ac-hub .ac-rect { fill: color-mix(in srgb, var(--code) 16%, var(--bg)); stroke-width: 2.6; }
.arch .ac-badge { font-size: 10.5px; font-weight: 800; letter-spacing: 0.07em; }
.arch .ac-title { font-size: 16px; font-weight: 700; fill: var(--ink); }
.arch .ac-agent .ac-title { font-size: 19px; }
.arch .ac-sub { font-size: 12.5px; }
.arch .ac-line { font-size: 12px; fill: var(--muted); }
.arch .ac-key, .arch .ac-key-bg { display: none; }
.arch .ac-key { font-size: 11.5px; font-weight: 700; fill: var(--person); }
.arch .ac-key-bg { fill: var(--person-bg); stroke: var(--person); stroke-width: 1; }
.arch .al-line { fill: none; stroke: var(--ink2); stroke-width: 1.8; }
.arch .al-hit { fill: none; stroke: transparent; stroke-width: 14; cursor: pointer; }
.arch .k-model .al-line { stroke: var(--llm); stroke-width: 2.2; }
.arch .k-tools .al-line { stroke: var(--books); stroke-width: 2.4; }
.arch .k-key .al-line { stroke: var(--person); stroke-dasharray: 6 4; stroke-width: 2; }
.arch .k-interface .al-line { stroke: var(--ink2); stroke-width: 2; }
.arch .al-t { font-size: 12px; fill: var(--muted); paint-order: stroke; stroke: var(--bg); stroke-width: 5px; stroke-linejoin: round; }
.arch .al-t.ifc { display: none; font-family: var(--mono); font-size: 11.5px; fill: var(--ink2); }
.show-ifc .arch .al-t.ifc { display: inline; }
/* Keys and trust: the key chips show, the paths keys travel light, the rest steps back. */
.show-keys .arch .ac-key, .show-keys .arch .ac-key-bg { display: inline; }
.show-keys .arch .has-key.small .ac-sub { display: none; }
.show-keys .arch .al:not(.keypath) { opacity: 0.25; }
.show-keys .arch .keypath .al-line { stroke: var(--person); stroke-width: 3.2; }
.show-keys .arch .keypath .al-t { display: inline; fill: var(--person); font-weight: 700; }
.show-keys .arch .ac:not(.has-key):not(.ac-hub) { opacity: 0.55; }
.show-keys .arch .az-llm, .show-keys .arch .ab-line { stroke: var(--stop); }
/* Framework overlay: one level's badges, and the block list that lights what implements one. */
.arch .ac-fw { display: none; }
.show-fw-l1 .arch .fw-l1, .show-fw-l2 .arch .fw-l2 { display: inline; }
.arch .fw-b { cursor: pointer; }
.arch .fw-b rect { fill: var(--title); }
.arch .fw-b text { font-size: 11px; font-weight: 800; fill: var(--bg); font-family: var(--mono); }
.arch .fw-b.on rect { fill: var(--person); }
.arch.fw-lit .ac:not(.on) { opacity: 0.22; }
.arch.fw-lit .al { opacity: 0.2; }
.fw-panel { display: flex; flex-wrap: wrap; gap: 5px 6px; align-items: center; }
.fw-panel:empty { display: none; }
.fw-panel .fw-h { font-size: 12.5px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--title); margin-right: 4px; }
.fw-panel .fw-btn b { font-family: var(--mono); color: var(--title); }
.fw-panel .fw-btn.gap { border-style: dashed; }
.fw-panel .fw-btn.none { opacity: 0.6; }
.fw-panel .hint { font-size: 12.5px; color: var(--muted); font-style: italic; }
.pill.al-kind.k-model { color: var(--llm); } .pill.al-kind.k-tools { color: var(--books); } .pill.al-kind.k-key { color: var(--person); }

/* The AI Industry tab (RID180). Options are classes on the canvas (hide-o1 … hide-o6). */
.ind-canvas { display: grid; gap: 8px; }
svg.map.ind { max-height: none; } /* dense: full width, the page scrolls */
.ind text { font-family: var(--sans); fill: var(--ink2); }
.ind .ind-spec { font-size: 12.5px; font-weight: 800; letter-spacing: 0.08em; fill: var(--title); }
.ind .ind-spec-line { stroke: var(--title); stroke-width: 1.6; }
.ind .ind-gut-t { font-size: 13px; font-weight: 800; letter-spacing: 0.04em; fill: var(--ink); }
.ind .ind-gut-s { font-size: 12px; fill: var(--muted); }
.ind .ind-band { fill: color-mix(in srgb, var(--panel) 60%, transparent); stroke: var(--line); }
.ind .ind-band.cross { fill: color-mix(in srgb, var(--person) 6%, transparent); stroke: color-mix(in srgb, var(--person) 40%, transparent); stroke-dasharray: 6 4; }
.ind .ind-col, .ind .ind-box { cursor: pointer; transition: opacity 0.25s; }
.ind .ind-col:focus-visible, .ind .ind-box:focus-visible { outline: none; }
.ind .ind-rect { stroke-width: 1.8; }
.ind .ind-col .ind-rect { fill: color-mix(in srgb, var(--llm) 9%, var(--panel)); stroke: var(--llm); }
.ind .ind-box .ind-rect { fill: var(--panel2); stroke: var(--line2); }
.ind .ind-col:hover .ind-rect, .ind .ind-box:hover .ind-rect { stroke-width: 3; }
.ind .ind-badge { font-size: 12px; font-weight: 800; fill: var(--llm); font-family: var(--mono); }
.ind .ind-col-title { font-size: 16px; font-weight: 800; fill: var(--ink); }
.ind .ind-control { font-size: 12.5px; font-weight: 600; fill: var(--ink2); }
.ind .ind-title { font-size: 15px; font-weight: 700; fill: var(--ink); }
.ind .ind-sub { font-size: 12px; fill: var(--muted); }
.ind .ind-ex { font-size: 11.5px; fill: var(--title); }
.ind .ind-serves rect.on { fill: var(--llm); } .ind .ind-serves rect.off { fill: none; stroke: var(--line2); stroke-width: 1; }
.ind .ind-hidden-note { display: none; font-size: 13px; font-style: italic; fill: var(--muted); }
.ind .ind-cons { display: none; }
.ind .ind-cons rect { fill: var(--ok); }
.ind .ind-cons text { font-size: 10.5px; font-weight: 800; letter-spacing: 0.05em; fill: var(--bg); }
.ind .ind-cons.st-partial rect { fill: color-mix(in srgb, var(--ok) 60%, var(--warn)); }
.ind .ind-cons.st-not-used rect { fill: var(--muted); }
.ind .ind-cons.st-gap rect { fill: var(--esc); }
.ind .ind-cons.st-could rect { fill: none; stroke: var(--ok); stroke-dasharray: 3 2; } .ind .ind-cons.st-could text { fill: var(--ok); }
/* Options. */
.hide-o1 .ind .i-desc { display: none; }
.hide-o2 .ind .i-ex { display: none; }
.hide-o3 .ind .opt-3, .hide-o4 .ind .opt-4, .hide-o5 .ind .opt-5 { display: none; }
.hide-o3 .ind .hide-note-3, .hide-o4 .ind .hide-note-4, .hide-o5 .ind .hide-note-5 { display: inline; }
/* Where MERLIN sits: the badges and arcs show; what it uses stands out, the rest steps back. */
.ind-canvas:not(.hide-o6) .ind .ind-cons { display: inline; }
.ind-canvas:not(.hide-o6) .ind .cons-none:not(.cons-could) { opacity: 0.4; }
.ind-canvas:not(.hide-o6) .ind .cons-could .ind-rect { stroke: var(--ok); stroke-width: 2; stroke-dasharray: 2 4; }
.ind-canvas:not(.hide-o6) .ind .ind-col:not([class*="cons-"]) { opacity: 0.45; }
.ind-canvas:not(.hide-o6) .ind .cons-uses .ind-rect { stroke: var(--ok); stroke-width: 3; }
.ind-canvas:not(.hide-o6) .ind .cons-partial .ind-rect { stroke: var(--ok); stroke-width: 2.6; stroke-dasharray: 7 4; }
.ind-canvas:not(.hide-o6) .ind .cons-not-used .ind-rect { stroke: var(--muted); stroke-dasharray: 3 4; }
.ind-canvas:not(.hide-o6) .ind .cons-gap .ind-rect { stroke: var(--esc); stroke-width: 2.6; stroke-dasharray: 7 4; }
.ind-legend .sw-serve { width: 8px !important; height: 7px !important; background: var(--llm); border: 0 !important; border-radius: 1.5px !important; }
.ind-legend .sw-cons { border-width: 3px !important; background: transparent; }
.ind-legend .sw-cons.uses { border-color: var(--ok) !important; } .ind-legend .sw-cons.partial { border-color: var(--ok) !important; border-style: dashed !important; }
.ind-legend .sw-cons.not-used { border-color: var(--muted) !important; border-style: dotted !important; } .ind-legend .sw-cons.gap { border-color: var(--esc) !important; border-style: dashed !important; }
.ind-legend .sw-cons.could { border-color: var(--ok) !important; border-style: dotted !important; }
.hide-o6 .ind-legend .cons-key { display: none; }
.pill.off { opacity: 0.45; } .pill.on { border-color: var(--llm); color: var(--llm); }

/* Build or buy (RID194). */
.bb { max-width: 1500px; }
.bb .bb-h { font-size: 18px; color: var(--title); margin: 22px 0 8px; letter-spacing: 0.02em; }
.bb .bb-scroll { overflow-x: auto; }
.bb .bb-compare th, .bb .bb-compare td { min-width: 150px; }
.bb .bb-compare thead th { vertical-align: bottom; text-transform: none; letter-spacing: 0; color: var(--ink); font-size: 14px; }
.bb .bb-compare tbody th { color: var(--ink); font-weight: 700; min-width: 190px; }
.bb .bb-merlin { background: color-mix(in srgb, var(--ok) 9%, transparent); }
.bb .bb-opt { font-weight: 800; }
.bb .bb-sub { font-size: 12.5px; color: var(--muted); font-weight: 400; margin: 2px 0 4px; }
.bb .bb-links { font-size: 13px; }
.bb .bb-links a { color: var(--title); }
.bb .bb-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0; }
.bb .bb-two ul { margin: 6px 0 0; padding-left: 18px; }
.bb .bb-comp { font-weight: 700; color: var(--ink); min-width: 220px; }
.bb .bb-split { font-size: 13.5px; color: var(--ink2); min-width: 220px; }
.bb .bb-chip { display: inline-block; padding: 2px 8px; border-radius: 5px; font-size: 12.5px; font-weight: 800; white-space: nowrap; border: 1.5px solid; }
.bb .a-own { color: var(--ok); } .bb .a-own-std { color: var(--code); } .bb .a-framework { color: var(--llm); }
.bb .a-platform { color: var(--title); } .bb .a-buy { color: var(--person); } .bb .a-tool { color: var(--muted); } .bb .a-avoid { color: var(--stop); }
.bb .bb-roll { margin: 0 0 12px; padding-left: 22px; font-size: 15px; line-height: 1.6; }
@media (max-width: 1100px) { .bb .bb-two { grid-template-columns: 1fr; } }

/* A flex or grid rule must not show what the page hides (the landscape's
   switches and the map's, RID171). */
[hidden] { display: none !important; }

/* The landscape (RID171). What a slide shows is classes on the canvas
   (RID443; they were two switches), so moving between slides never redraws. */
.ls-canvas { display: grid; gap: 8px; }
/* The slides' control on the second line (RID443): back, the slides by number, forward, and the slide's name. */
.slides { display: inline-flex; align-items: center; gap: 6px; }
.slides .slide-step { font-size: 20px; line-height: 1; padding: 2px 12px 4px; }
.slides .slide-step:disabled { opacity: 0.35; cursor: default; }
.slides .slide-dots { display: inline-flex; gap: 3px; }
.slides .slide-dot { min-width: 30px; padding: 3px 0; font-variant-numeric: tabular-nums; }
.slides .slide-name { margin-left: 8px; font-size: 15px; color: var(--ink2); }
.slides .slide-name b { color: var(--ink); font-weight: 700; }
/* Treasury operations standing alone (RID443): slides 1 and 2. Nothing dashed,
   nothing hatched: four panels and their blocks. Level 1 shows a block's
   name in its middle; level 2 the name at its top and what it covers. */
.ls-canvas .ops-fig { display: none; }
.fig-standalone .ops-fig { display: block; }
.fig-standalone svg.landscape { display: none; }
.ls-legend .ops-key { display: none; }
.fig-standalone .ls-legend .ops-key { display: inline-flex; }
.fig-standalone .ls-legend > span:not(.ops-key) { display: none; }
svg.map.ops-fig { max-height: calc(100vh - 290px); }
.ops-fig .ops-panel { fill: var(--panel); stroke: var(--line2); stroke-width: 1.4; }
.ops-fig .ops-panel.ops-markets, .ops-fig .ops-panel.ops-systems { fill: transparent; }
.ops-fig .ops-band { font-size: 12.5px; font-weight: 800; letter-spacing: 0.07em; fill: var(--muted); }
.ops-fig .ob-rect { stroke-width: 2; }
.ops-fig .ob-core .ob-rect { fill: var(--panel2); stroke: var(--ink2); }
.ops-fig .ob-peripheral .ob-rect { fill: var(--panel2); stroke: var(--ink2); }
.ops-fig .ob-external .ob-rect { fill: var(--books-bg); stroke: var(--books); }
.ops-fig .ob-name { font-size: 17px; font-weight: 700; fill: var(--ink); }
.ops-fig .ob-title { font-size: 16.5px; font-weight: 700; fill: var(--ink); display: none; }
.ops-fig .ob-sub { font-size: 13px; fill: var(--ink2); display: none; }
.detail-2 .ops-fig .ob-name { display: none; }
.detail-2 .ops-fig .ob-title, .detail-2 .ops-fig .ob-sub { display: inline; }
.ls-legend { padding: 0 2px; }
.ls-legend .sw { width: 16px; height: 14px; border-radius: 3px; border: 2px solid; display: inline-block; }
.ls-legend .sw.core { background: var(--panel2); border-color: var(--ink2); }
.ls-legend .sw.peripheral { background: var(--panel); border-color: var(--muted); border-style: dashed; }
.ls-legend .sw.external { background: var(--books-bg); border-color: var(--books); }
.ls-legend .sw.ov { background: linear-gradient(90deg, var(--code-bg) 33%, var(--llm-bg) 33% 66%, var(--person-bg) 66%); border-color: var(--title); }
svg.map.landscape { max-height: calc(100vh - 290px); }
.landscape .ls-outside { fill: url(#ls-hatch); }
.landscape .ls-band { font-size: 12px; font-weight: 800; letter-spacing: 0.07em; fill: var(--muted); paint-order: stroke; stroke: var(--bg); stroke-width: 5px; stroke-linejoin: round; }
.landscape .ls-band.overlay { fill: var(--title); }
.landscape .lb { cursor: pointer; transition: opacity 0.25s; }
.landscape .lb:focus-visible { outline: none; }
.landscape .lb-rect { stroke-width: 2; }
.landscape .lb:hover .lb-rect, .landscape .lb:focus-visible .lb-rect { stroke-width: 3.4; }
.landscape .lb-core .lb-rect { fill: var(--panel2); stroke: var(--ink2); }
.landscape .lb-peripheral .lb-rect { fill: var(--panel); stroke: var(--muted); stroke-dasharray: 7 4; }
.landscape .lb-external .lb-rect { fill: var(--books-bg); stroke: var(--books); }
.landscape .lb-badge { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; fill: var(--muted); }
.landscape .lb-core .lb-badge { fill: var(--title); }
.landscape .lb-title { font-size: 16.5px; font-weight: 700; fill: var(--ink); }
.landscape .lb-peripheral .lb-title { fill: var(--ink2); }
.landscape .lb-sub { font-size: 13px; fill: var(--ink2); }
.landscape .lb-peripheral .lb-sub { fill: var(--muted); }
.landscape .ls-line { fill: none; stroke: var(--muted); stroke-width: 1.6; }
.landscape .k-flow .ls-line { stroke: var(--ink2); stroke-width: 2.4; }
.landscape .k-interface .ls-line { stroke: var(--books); stroke-dasharray: 3 3; }
.landscape .k-feeds .ls-line { stroke-dasharray: 6 4; }
.landscape .ls-link-t { font-size: 12px; fill: var(--muted); paint-order: stroke; stroke: var(--bg); stroke-width: 5px; stroke-linejoin: round; }
.landscape .ls-link-t.feeds { font-size: 11.5px; font-style: italic; }
.landscape .ls-tools path { fill: none; stroke: var(--books); stroke-width: 1.6; }
.landscape .ls-tools text { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; fill: var(--books); }
.landscape .ls-blank { display: none; }
.landscape .ls-blank rect { fill: none; stroke: var(--line2); stroke-width: 1.5; stroke-dasharray: 8 6; }
.landscape .ls-blank text { font-size: 15px; font-style: italic; fill: var(--muted); }
.landscape .ls-overlay, .landscape .ls-band.overlay { display: none; }
.landscape .ls-ov-link { fill: none; stroke: var(--title); stroke-width: 1.8; stroke-dasharray: 4 4; opacity: 0.85; }
.landscape .ls-ov-seq { fill: none; stroke: var(--ink2); stroke-width: 1.8; }
.hide-periphery .landscape .periph, .hide-periphery .ls-legend .periph-key { display: none; }
.hide-periphery .landscape .ls-blank { display: inline; }
.ls-legend .overlay-key { display: none; }
.show-overlay .ls-legend .overlay-key { display: inline-flex; }
.show-overlay .landscape .ls-overlay, .show-overlay .landscape .ls-band.overlay { display: inline; }
/* With the overlay on, the lines from the rest of treasury step back, so the
   blocks laid over them read first. */
.show-overlay .landscape .k-feeds { opacity: 0.3; }
.show-overlay .landscape .lb-core .lb-rect { stroke: var(--title); }

footer.foot { padding: 8px 18px; font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); background: var(--panel); }

@media (max-width: 1100px) {
  .cu-grid { grid-template-columns: 1fr; }
  .tp-body { grid-template-columns: 1fr; }
  .tp-nav { position: static; max-height: none; }
  svg.map { max-height: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* One design, end to end (RID197; cross-platform RID200). Own green, portable purple, cloud blue, existing cyan, bought orange. */
.bb .ib-legend { margin: 10px 0 6px; flex-wrap: wrap; }
.bb .ib-canvas { min-width: 1200px; }
.bb .ib-svg { width: 100%; height: auto; display: block; }
.ib-svg .ib-band { fill: var(--panel2); opacity: 0.55; }
.ib-svg .ib-band.odd { fill: var(--raise); opacity: 0.35; }
.ib-svg .ib-row-t { font-size: 15px; font-weight: 800; fill: var(--title); }
.ib-svg .ib-row-s { font-size: 12px; fill: var(--muted); }
.ib-box { --k: var(--title); cursor: pointer; }
.ib-box.k-own { --k: var(--ok); } .ib-box.k-portable { --k: var(--llm); } .ib-box.k-cloud { --k: var(--title); } .ib-box.k-existing { --k: var(--code); }
.ib-box.k-buy { --k: var(--person); } .ib-box.k-people { --k: var(--ink2); }
.ib-box .ib-rect { fill: color-mix(in srgb, var(--k) 9%, var(--panel)); stroke: var(--k); stroke-width: 1.5; }
.ib-box.k-own .ib-rect { fill: color-mix(in srgb, var(--k) 17%, var(--panel)); stroke-width: 2.6; }
.ib-box.k-buy .ib-rect { stroke-dasharray: 6 4; }
.ib-box:hover .ib-rect, .ib-box:focus-visible .ib-rect { stroke-width: 3.2; }
.ib-box .ib-kind { font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; fill: var(--k); }
.ib-box .ib-title { font-size: 14.5px; font-weight: 800; fill: var(--ink); }
.ib-box .ib-sub { font-size: 12px; fill: var(--ink2); }
.ib-box .ib-code-bg { fill: color-mix(in srgb, var(--ok) 14%, var(--panel)); }
.ib-box .ib-code-bar { fill: var(--ok); }
.ib-box .ib-code { font-size: 11.5px; font-weight: 600; fill: var(--ok); }
.ib-canvas.own-only .ib-box:not(.k-own) :is(.ib-rect, .ib-kind, .ib-title, .ib-sub, .ib-product) { opacity: 0.22; }
.ib-sw { display: inline-block; width: 16px; height: 11px; border-radius: 3px; border: 2px solid var(--title); margin-right: 6px; vertical-align: -1px; }
.ib-sw.k-own { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 25%, transparent); }
.ib-sw.k-portable { border-color: var(--llm); } .ib-sw.k-cloud { border-color: var(--title); } .ib-sw.k-existing { border-color: var(--code); }
.ib-sw.k-buy { border-color: var(--person); border-style: dashed; } .ib-sw.k-people { border-color: var(--ink2); }
.ib-sw.strip { border: 0; border-left: 4px solid var(--ok); background: color-mix(in srgb, var(--ok) 20%, transparent); }
.bb .a-people { color: var(--ink2); } .bb .a-portable { color: var(--llm); } .bb .a-cloud { color: var(--title); } .bb .a-existing { color: var(--code); }
.bb .ib-table .ib-layer { color: var(--title); font-weight: 800; vertical-align: top; min-width: 130px; }
.bb .ib-table td { min-width: 140px; }
.bb .ib-table .ib-owncode { color: var(--ok); font-weight: 600; min-width: 200px; }
.bb .ib-table tr.k-own td { background: color-mix(in srgb, var(--ok) 8%, transparent); }
.bb .ib-table tr.flash td { animation: ib-flash 1.6s ease-out; }
@keyframes ib-flash { from { background: color-mix(in srgb, var(--focus) 30%, transparent); } }
@media (prefers-reduced-motion: reduce) { .bb .ib-table tr.flash td { animation: none; outline: 2px solid var(--focus); } }
.bb .ib-table td.bb-comp { min-width: 250px; }
.bb .ib-table td:last-child { min-width: 180px; max-width: 260px; }
.bb .ib-table td:last-child .btn { white-space: normal; text-align: left; line-height: 1.3; }

/* Architecture (RID200): the deal's write path green and heavier, as on the Map; a part MERLIN lacks drawn dotted. */
.arch .al.writes .al-line { stroke: var(--ok); stroke-width: 3.6; }
.arch .al.absent .al-line { stroke-dasharray: 3 4; opacity: 0.8; }
.arch .ac.absent .ac-rect { fill: none; stroke-dasharray: 5 4; stroke-width: 1.8; }
.arch .ac.absent .ac-badge { fill: var(--muted); }
.arch .ac.absent .ac-title { fill: var(--ink2); }
.arch-legend .ln.w { color: var(--ok); } .arch-legend .ln.w::before { border-top-width: 3.6px; }
.arch-legend .absent-sw { border-style: dashed !important; border-color: var(--books) !important; background: transparent !important; }
.ib-box .ib-product { font-size: 13px; font-weight: 700; fill: var(--k); }
.ib-box.k-own .ib-product, .ib-box.k-people .ib-product { fill: var(--muted); font-weight: 600; }
.bb .ib-bar { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin: 10px 0 6px; }
.bb .ib-bar .ib-legend { margin: 0; }
.ib-clouds { display: flex; gap: 6px; align-items: center; }
.ib-clouds-h { font-weight: 800; color: var(--title); }
.bb .ib-table th.sel { color: var(--title); }
.bb .ib-table td.sel { background: color-mix(in srgb, var(--title) 10%, transparent); }
.bb .ib-table td.ib-same { color: var(--muted); font-size: 13px; text-align: center; }
.bb .ib-table td.ib-run { font-size: 13px; color: var(--ink2); min-width: 240px; }

/* Why MERLIN (RID202). */
.why { max-width: 1300px; }
.why .why-tag { font-size: 16.5px; line-height: 1.5; color: var(--ink); font-weight: 600; margin: 4px 0 6px; }
.why .why-list { margin: 0 0 8px; padding-left: 20px; font-size: 15px; line-height: 1.55; }
.why .why-list li { margin-bottom: 8px; }
.why .why-arch { margin-top: 4px; gap: 6px; }
.why .why-st { display: inline-block; padding: 1px 8px; border-radius: 5px; font-size: 12px; font-weight: 800; border: 1.5px solid; white-space: nowrap; }
.why .st-done { color: var(--ok); } .why .st-partly { color: var(--warn); } .why .st-gap { color: var(--stop); } .why .st-decide { color: var(--title); }
.why .why-open td { min-width: 170px; font-size: 14px; vertical-align: top; }
.why .why-open td.bb-comp { min-width: 190px; font-weight: 700; color: var(--ink); }
.why .why-open tr.need > td:first-child { box-shadow: inset 4px 0 0 var(--stop); }
.why .why-steps { width: 100%; min-width: 900px; height: auto; display: block; }
.why-steps .why-step rect { fill: var(--panel2); stroke: var(--title); stroke-width: 1.8; }
.why-steps .why-step.exit rect { fill: color-mix(in srgb, var(--ok) 12%, var(--panel)); stroke: var(--ok); stroke-width: 2.4; }
.why-steps .why-step-t { font-family: var(--sans); font-size: 15px; font-weight: 800; fill: var(--ink); }
.why-steps .why-step.exit .why-step-t { fill: var(--ok); }
.why-steps .why-step-s { font-family: var(--sans); font-size: 12.5px; fill: var(--ink2); }
.why-steps .why-arrow { fill: none; stroke: var(--ink2); stroke-width: 2; }
.why-steps .why-arrow.loop { stroke-dasharray: 6 4; }
.why-steps .why-arrow.out { stroke: var(--ok); stroke-width: 3; }
.why-steps .why-loop-t { font-family: var(--sans); font-size: 13px; font-style: italic; fill: var(--muted); }
.why .why-open tr.why-detail > td { background: var(--panel2); padding: 12px 16px 14px; }
.why .why-detail-in { display: grid; gap: 10px; font-size: 14px; }
.why .why-detail-in ul { margin: 6px 0 0; padding-left: 18px; }
.why .why-detail-in .bb-two { margin: 0; }
.why .why-modes td { min-width: 150px; }
.why .why-modes tr.m-local td.leaves { color: var(--ok); font-weight: 700; }
.why .why-modes tr:not(.m-local) td.leaves { color: var(--warn); font-weight: 600; }
.why .why-note { margin: 0; font-size: 13px; color: var(--ink2); }
.why .why-src { margin: 0; font-size: 12.5px; color: var(--muted); }
.why .why-src a { color: var(--title); }
.why .why-pilot { border: 2px solid var(--ok); border-radius: 10px; padding: 12px 14px; background: color-mix(in srgb, var(--ok) 6%, var(--panel)); display: grid; gap: 6px; }
.why .why-pilot p { margin: 0; }
.why .why-pilot ol, .why .why-pilot ul { margin: 4px 0 0; padding-left: 20px; }
.why .why-pilot li { margin-bottom: 4px; }
.why .why-pilot-h { font-weight: 800; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; }
.why .why-pilot-h.ok { color: var(--ok); } .why .why-pilot-h.no { color: var(--stop); }

/* The second line (RID213): each tab's controls, always in the same place,
   so the tabs on the first line never move. */
.subbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; min-height: 52px;
  padding: 7px 18px; background: var(--panel2); border-bottom: 1px solid var(--line); }
.subbar .sub-label { font-size: 12.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--title); min-width: 110px; }
.subbar #sub-back:empty { display: none; }
.subbar .sub-tabs .btn { font-size: 14.5px; padding: 6px 12px; }
.subbar [hidden] { display: none !important; }
h2 .sec-t { color: var(--muted); font-weight: 600; }
/* The first line fits one row on a laptop screen, so it never re-flows. */
header.top { gap: 10px 14px; }
header.top .btn-group .btn { font-size: 14.5px; padding: 6px 11px; }
.subbar .sub-extra { display: inline-flex; gap: 12px; align-items: center; }
.subbar .sub-extra:empty { display: none; }
.subbar .ib-clouds .btn { font-size: 14px; }
.subbar .ib-clouds-h { font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; }
.subbar .sub-extra .btn { font-size: 13.5px; padding: 4px 9px; }
/* The third level (RID375): one example or all, set off from the section tabs by a rule. */
.subbar .sub-extra .dp-subs { padding-left: 16px; border-left: 2px solid var(--line2); }
.bb .ib-bar .ib-legend { flex: 1 1 100%; min-width: 0; }
.bb .ib-holder { min-width: 0; }

/* Tabs in three groups, spread across the first line (RID215). The MERLIN
   group carries a small label over its whole width, rules on both sides. */
header.top .brand { margin-right: 0; }
header.top .views { flex: 1 1 auto; display: flex; justify-content: space-evenly; align-items: flex-end; gap: 14px; min-width: 0; }
header.top #lens { margin-left: 28px; }
.tab-group { display: flex; flex-direction: column; align-items: stretch; }
.tab-group-label { display: flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.18em; color: var(--title); margin-bottom: 3px; }
.tab-group-label::before, .tab-group-label::after { content: ""; flex: 1; border-top: 1px solid var(--title); opacity: 0.6; }
header.top { align-items: flex-end; }
header.top .brand, header.top #theme, header.top #help { align-self: center; }
.brand h1 { font-size: 20px; } .brand .ver { font-size: 11.5px; }
/* RID373: a ninth tab (Deployment). A little tighter still, so the line
   fits at 1600 pixels wide as it did with eight. */
header.top .btn-group .btn { font-size: 14px; padding: 6px 8px; }
header.top { gap: 8px 10px; }
header.top .views { gap: 10px; }
header.top #lens { margin-left: 12px; }
/* The second line (RID215): the tab's name on the left in larger blue capitals; its controls to the right. */
.subbar .sub-label { font-size: 16px; letter-spacing: 0.1em; margin-right: auto; }
/* The player above the map (RID215): controls and the scenario on one row,
   the running caption under them in a box of its own. */
.caption { border-top: 0; border-bottom: 1px solid var(--line); padding: 10px 18px 12px; gap: 8px; }
.caption .scen-wrap { margin-left: auto; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.caption .text { font-size: 16.5px; line-height: 1.5; min-height: 3em; max-width: none; padding: 8px 14px; background: var(--panel2); border-left: 4px solid var(--focus); border-radius: 6px; }
.caption .where { font-size: 13.5px; }

/* Templates (RID215): the list on the left, folded by block; the payload in
   the middle, next to the list; where it travels and its checks on the right. */
.templates { padding: 12px 18px 26px; }
.tp-body { grid-template-columns: minmax(300px, 360px) minmax(0, 1fr) minmax(300px, 380px); gap: 16px; }
.tp-body.cat { grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); }
.tp-nav { gap: 6px; padding: 10px 8px; }
.tp-legend { display: grid; gap: 6px; padding: 4px 6px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.tp-legend-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tp-key { font-size: 12px; padding: 1px 7px; border-radius: 5px; }
.tp-fold { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: 0; padding: 5px 6px; border-radius: 6px; cursor: pointer; color: var(--ink); text-align: left; font: inherit; }
.tp-fold:hover { background: var(--panel2); }
.tp-caret { display: inline-block; width: 12px; color: var(--muted); transition: transform 0.15s; }
.tp-fold.open .tp-caret { transform: rotate(90deg); }
.tp-fold .tp-block { font-size: 13.5px; cursor: pointer; }
.tp-count { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.tp-group.has-on > .tp-fold { background: var(--panel2); }
.tp-items { display: grid; gap: 2px; padding: 2px 0 6px 20px; }
.tp-items[hidden] { display: none; }
.tp-main .tp-title h2 { font-size: 21px; }
.tp-side { display: grid; gap: 12px; align-content: start; position: sticky; top: 8px; max-height: calc(100vh - 24px); overflow: auto; }
.tp-card { display: grid; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.tp-card .tp-kv { grid-template-columns: 82px 1fr; font-size: 14px; }
.tp-card .tp-note { font-size: 14px; }
.tp-checks h3 { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--title); }
.tp-checks .stack { gap: 4px; }
.tp-src { font-size: 12px; }
@media (max-width: 1300px) { .tp-body { grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); } .tp-side { grid-column: 2; position: static; max-height: none; } }
.tp-side { min-width: 0; overflow-x: hidden; }
.tp-card { min-width: 0; overflow-wrap: anywhere; }
.tp-card .kv dd { min-width: 0; overflow-wrap: anywhere; }
.tp-fold .tp-block { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-card .tp-kv { grid-template-columns: 82px minmax(0, 1fr); }
.tp-card .btn { white-space: normal; text-align: left; }

/* RID220: the descriptive paragraph runs the width of the screen on every tab
   (it was held to 100 characters, which bunched it on the left); an empty
   caption box before the first event takes no room; the narration dialog. */
#intro[hidden] { display: none; }
.caption .text:empty { display: none; }
dialog.narration { max-width: 760px; }
dialog.narration .narr-map { color: var(--ink2); border-top: 1px solid var(--line); padding-top: 10px; }
dialog.narration .narr-keys { color: var(--muted); font-size: 14px; }

/* The Platforms tab (RID222). Kinds follow Build or buy's ideal design: own
   code green, a library in your program purple, your cloud blue, the vendor
   amber, and what is not there (or kept off) muted and dashed. */
.pf { --k-own: var(--ok); --k-lib: var(--llm); --k-plat: var(--title); --k-vend: var(--warn); --k-off: var(--muted); }
.pf h2 .sec-t { font-weight: 500; }
.pf-q2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.pf-q2 p { margin: 4px 0 0; }
.pf-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; color: var(--ink2); margin: 4px 0 8px; }
.pf-legend span { display: inline-flex; align-items: center; gap: 6px; }
.pf-sw { width: 14px; height: 14px; border-radius: 3px; border: 2px solid var(--k); background: color-mix(in srgb, var(--k) 18%, transparent); display: inline-block; }
.pf-sw.k-own, .pf-c.k-own { --k: var(--k-own); } .pf-sw.k-lib, .pf-c.k-lib { --k: var(--k-lib); } .pf-sw.k-plat, .pf-c.k-plat { --k: var(--k-plat); }
.pf-sw.k-vend, .pf-c.k-vend { --k: var(--k-vend); } .pf-sw.k-off, .pf-c.k-off { --k: var(--k-off); }
.pf-sw.k-off { border-style: dashed; background: transparent; }
table.pf-matrix { border-collapse: separate; border-spacing: 4px; min-width: 1000px; width: 100%; font-size: 13.5px; }
.pf-matrix th { text-align: left; vertical-align: bottom; padding: 4px 6px; font-size: 14px; color: var(--ink); }
.pf-matrix th small { display: block; font-weight: 500; color: var(--muted); font-size: 12px; }
.pf-matrix .pf-layer { font-weight: 700; color: var(--ink); width: 15%; padding: 6px; }
.pf-c { border-left: 4px solid var(--k); background: color-mix(in srgb, var(--k) 13%, var(--panel)); border-radius: 5px; padding: 7px 8px; line-height: 1.35; color: var(--ink); }
.pf-c.k-off { background: var(--panel2); color: var(--muted); border-left-style: dashed; }
table.pf-map { min-width: 1050px; }
.pf-map .pf-stay { color: var(--ok); font-weight: 600; }
.pf-map .pf-keep { color: var(--stop); font-weight: 600; }
.pf-map tr.pf-off td:not(:first-child):not(:last-child) { color: var(--stop); }
.pf-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.pf-rules > div { border: 1px solid var(--line); border-left: 4px solid var(--ok); border-radius: 6px; padding: 10px 12px; background: var(--panel); }
.pf-rules p { margin: 4px 0 0; color: var(--ink2); }
.pf-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 22px; align-items: start; }
@media (max-width: 1100px) { .pf-body { grid-template-columns: minmax(0, 1fr); } }
.pf-fit { border-top: 1px solid var(--line); padding-top: 10px; display: grid; gap: 8px; }
.pf-fit p { margin: 0; }
.pf-verdict { font-weight: 800; }
.pf-verdict.v-yes { color: var(--ok); } .pf-verdict.v-maybe { color: var(--warn); } .pf-verdict.v-no { color: var(--stop); }
svg.pf-dg { display: block; width: 100%; height: auto; min-width: 560px; }
svg.pf-dg.wide { min-width: 900px; }
.pf-dg text { font-family: var(--sans); fill: var(--ink); font-size: 11px; }
.pf-dg .pf-t { font-weight: 700; font-size: 11.5px; }
.pf-dg .pf-s { fill: var(--ink2); font-size: 10.3px; }
.pf-dg .pf-k { font-weight: 800; font-size: 9px; letter-spacing: 0.05em; fill: var(--muted); }
.pf-dg .pf-not { fill: var(--stop); font-weight: 800; font-size: 11px; }
.pf-dg rect { stroke-width: 1.6; }
.pf-dg .pf-frame { fill: none; stroke: var(--line2); stroke-dasharray: 5 4; }
.pf-dg .pf-own { fill: color-mix(in srgb, var(--ok) 14%, var(--panel)); stroke: var(--ok); }
.pf-dg .pf-lib { fill: color-mix(in srgb, var(--llm) 14%, var(--panel)); stroke: var(--llm); }
.pf-dg .pf-plat { fill: color-mix(in srgb, var(--title) 14%, var(--panel)); stroke: var(--title); }
.pf-dg .pf-vend { fill: color-mix(in srgb, var(--warn) 14%, var(--panel)); stroke: var(--warn); }
.pf-dg .pf-off { fill: var(--panel2); stroke: var(--muted); stroke-dasharray: 4 3; }
.pf-dg .pf-ext { fill: var(--panel); stroke: var(--ink2); stroke-width: 1.2; }
.pf-dg .pf-ar { fill: none; stroke: var(--ink2); stroke-width: 1.4; }
.pf-dg .pf-arw { fill: var(--ink2); }
.pf-dg .pf-bound { stroke: var(--stop); stroke-width: 1.6; stroke-dasharray: 7 5; }

/* The narration callout (RID222): beside the box that is playing, with a
   pointer to it, inside the map's canvas so it scrolls with the map. */
.canvas { position: relative; }
.callout {
  position: absolute; z-index: 5; width: min(440px, calc(100% - 16px));
  background: var(--panel); color: var(--ink); border: 1.5px solid var(--focus); border-radius: 10px;
  box-shadow: var(--shadow); padding: 10px 14px 10px; display: grid; gap: 8px; font-size: 15px; line-height: 1.45;
  transition: left 0.25s ease, top 0.25s ease;
}
.callout::before {
  content: ''; position: absolute; left: calc(var(--px, 50%) - 8px); top: -9px; width: 14px; height: 14px;
  background: var(--panel); border-left: 1.5px solid var(--focus); border-top: 1.5px solid var(--focus); transform: rotate(45deg);
}
.callout.above::before { top: auto; bottom: -9px; transform: rotate(225deg); }
.callout .callout-n { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.callout .text { font-size: 15px; min-height: 0; padding: 0; background: none; border: 0; max-width: none; }
.callout .where { font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .callout { transition: none; } }
.callout .where { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--muted); }
.callout .where:empty { display: none; }
.callout .btn { white-space: normal; text-align: left; max-width: 100%; }

/* Deployment (RID373): where an organisation's AI system can live. Sections
   on the second line; every figure is data, drawn as plain shapes. */
.dp { --k-you: var(--ok); --k-ven: var(--warn); --k-either: var(--title); --k-none: var(--muted); }
.dp .dp-h { font-size: 18px; color: var(--title); margin: 14px 0 0; letter-spacing: 0.02em; }
.dp .dp-p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--ink2); max-width: 120ch; }
.dp .dp-pts { display: grid; gap: 8px; max-width: 120ch; }
.dp .dp-pts p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink2); }
.dp .dp-pts b, .dp .dp-steps b { color: var(--ink); }
.dp .dp-steps { margin: 0; padding-left: 26px; display: grid; gap: 6px; font-size: 15px; line-height: 1.5; color: var(--ink2); max-width: 120ch; }
.dp .dp-note { max-width: 120ch; }
.dp .dp-figure { margin: 0; display: grid; gap: 8px; }
.dp .dp-figure figcaption { font-size: 14px; color: var(--ink2); max-width: 120ch; }
.dp .dp-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); padding: 10px; }
.dp .dp-scroll.plain { border: none; background: none; padding: 0; }
.dp table.dp-table { min-width: 640px; }
.dp table.dp-table.wide { min-width: 1040px; }
.dp .dp-table td.dp-row { font-weight: 700; color: var(--ink); }
.dp .dp-c { border-left: 4px solid var(--k); background: color-mix(in srgb, var(--k) 10%, var(--panel)); }
.dp .dp-c.k-you, .dp .dp-sw.k-you { --k: var(--k-you); } .dp .dp-c.k-ven, .dp .dp-sw.k-ven { --k: var(--k-ven); }
.dp .dp-c.k-either, .dp .dp-sw.k-either { --k: var(--k-either); } .dp .dp-c.k-none, .dp .dp-sw.k-none { --k: var(--k-none); }
.dp .dp-c.k-none { background: var(--panel2); color: var(--muted); border-left-style: dashed; }
.dp .dp-who { font-family: var(--mono); font-size: 11.5px; font-weight: 700; color: var(--k); text-transform: uppercase; letter-spacing: 0.05em; }
.dp .dp-key { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; color: var(--ink2); }
.dp .dp-key span { display: inline-flex; align-items: center; gap: 6px; }
.dp .dp-sw { width: 14px; height: 14px; border-radius: 3px; border: 2px solid var(--k); background: color-mix(in srgb, var(--k) 18%, transparent); display: inline-block; }
.dp .dp-sw.k-none { border-style: dashed; background: transparent; }
.dp .dp-src { margin: 0; font-size: 12.5px; color: var(--muted); }
.dp .dp-src a { color: var(--title); }
svg.dp-fig { display: block; width: 100%; height: auto; min-width: 920px; max-width: 1280px; margin: 0 auto; }
.dp-fig text { font-family: var(--sans); fill: var(--ink); }
.dp-fig .t { font-weight: 600; font-size: 13px; }
.dp-fig .s { fill: var(--ink2); font-size: 11.5px; }
.dp-fig .al { font-family: var(--mono); font-size: 11px; font-weight: 500; }
.dp-fig .pt { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.09em; }
.dp-fig .k-control { --k: var(--title); } .dp-fig .k-build { --k: var(--ok); } .dp-fig .k-host { --k: var(--warn); } .dp-fig .k-model { --k: var(--llm); }
.dp-fig text.pt { fill: var(--k, var(--muted)); }
.dp-fig .bx { fill: var(--panel); stroke: var(--ink2); stroke-width: 1.3; }
.dp-fig .bx.inf { stroke-dasharray: 5 4; }
.dp-fig .bx.gw { fill: var(--llm-bg); stroke: var(--llm); stroke-width: 1.6; }
.dp-fig .pl { fill: var(--panel2); stroke: var(--line2); stroke-width: 1; }
.dp-fig .iso { fill: var(--panel2); stroke: var(--ok); stroke-width: 1.6; stroke-dasharray: 9 5; }
.dp-fig .nofill { fill: none; }
.dp-fig .loop { fill: none; stroke: var(--line2); stroke-width: 1.2; stroke-dasharray: 3 4; }
.dp-fig .life { stroke: var(--line2); stroke-width: 1.2; }
.dp-fig .stripe { stroke: var(--k, var(--muted)); stroke-width: 4; stroke-linecap: round; }
.dp-fig .lbg { fill: var(--bg); stroke: none; }
.dp-fig .ar { fill: none; stroke: var(--ink); stroke-width: 1.3; }
.dp-fig .ar.dsh { stroke-dasharray: 5 4; }
.dp-fig .ah { fill: var(--ink); }