/* docs.css — every docs page is built from these classes by scripts/build-docs.mjs.
   Tokens (--bg, --text, --panel, --border, --dot, --m-*) come from /shared/site.css;
   --cat / --cat-soft are set per page from the node category. No Tailwind. */

html { transition: background-color .2s, color .2s; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 15.5px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
code { font-size: .88em; background: var(--panel2); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; }
pre { background: var(--canvas); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; overflow-x: auto; font-size: 13.5px; line-height: 1.55; margin: 0 0 16px; }
pre code { background: none; border: 0; padding: 0; font-size: inherit; }
:focus-visible { outline: 2px solid var(--cat); outline-offset: 2px; }

/* ── Shell: fixed sidebar | content ── */
.doc { padding: 56px 0 0 264px; min-height: 100vh; min-width: 0; }
.doc-content { min-width: 0; }

.doc-side {
  position: fixed; left: 0; top: 56px; bottom: 0; width: 264px; box-sizing: border-box; overflow-y: auto; z-index: 40;
  border-right: 1px solid var(--border); background: var(--canvas);
  padding: 18px 14px 40px; font-size: 13.5px;
}
.doc-side::-webkit-scrollbar { width: 4px; }
.doc-side::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }
.doc-search {
  width: 100%; box-sizing: border-box; padding: 8px 12px; font: inherit; font-size: 13px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--text);
  margin-bottom: 18px;
}
.doc-search::placeholder { color: var(--faint); }
.doc-side h5 { margin: 18px 0 4px; padding: 0 8px; font-size: 11.5px; font-weight: 600; color: var(--faint); letter-spacing: .02em; }
.doc-side a { display: block; padding: 5px 8px; border-radius: 6px; color: var(--muted); text-decoration: none; }
.doc-side a:hover { background: var(--panel2); color: var(--text); }
.doc-side a.is-active { background: var(--cat-soft); color: var(--text); font-weight: 500; }
.doc-side details > summary { list-style: none; }
.doc-side details > summary::-webkit-details-marker { display: none; }
.doc-side .cat { display: flex; align-items: center; gap: 8px; padding: 6px 8px; color: var(--text); font-weight: 500; cursor: pointer; border-radius: 6px; user-select: none; }
.doc-side .cat:hover { background: var(--panel2); }
.doc-side .cat i { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.doc-side .cat b { margin-left: auto; font-weight: 400; color: var(--faint); font-size: 12px; }
.doc-side .cat-items { padding-left: 16px; border-left: 1px solid var(--border); margin: 2px 0 6px 11px; }
.doc-side.is-filtering a.is-hidden, .doc-side.is-filtering details.is-hidden { display: none; }

/* ── Hero: the one place the canvas grid shows ── */
.doc-hero {
  margin: 0 0 40px; padding: 40px 40px 32px;
  border-bottom: 1px solid var(--border); position: relative;
  background-color: var(--canvas);
  /* The site-wide --dot (7%) reads as blank up here; the hero is the one place the grid is meant to be seen. */
  --hero-dot: rgba(255,255,255,0.16);
}
html:not(.dark) .doc-hero { --hero-dot: rgba(20,20,26,0.18); }
/* The grid itself: a colour field masked to dots. The node palette blooms in soft rings from a
   fixed spot under the fade on the left and thins to plain grey by --bloom. Static: it does not
   follow the pointer. Everything is a gradient — no edges. */
.doc-hero::before {
  --mx: 18%; --my: 50%;     /* where the bloom sits */
  --bloom: 560px;           /* how far the colour reaches before it is grey again */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at var(--mx) var(--my),
    #D8B501 0, #D2603F calc(var(--bloom) * .16), #CB4F73 calc(var(--bloom) * .32),
    #9B61C9 calc(var(--bloom) * .48), #487CDE calc(var(--bloom) * .64),
    #139948 calc(var(--bloom) * .80), var(--hero-dot) var(--bloom));
  /* Five mask layers, read bottom-up: the biggest dots only inside the inner lens, joined by the
     middle dots, both only inside the outer lens, then every normal dot. So the dots swell toward
     the pointer (docs.js sets --px/--py; off the hero the lenses sit off-canvas). */
  --dot-s: radial-gradient(circle, #000 1px, transparent 1px);
  --dot-m: radial-gradient(circle, #000 1.6px, transparent 1.9px);
  --dot-l: radial-gradient(circle, #000 2.3px, transparent 2.6px);
  -webkit-mask-image: var(--dot-s), radial-gradient(150px circle at var(--px) var(--py), #000, transparent),
    var(--dot-m), radial-gradient(70px circle at var(--px) var(--py), #000, transparent), var(--dot-l);
  mask-image: var(--dot-s), radial-gradient(150px circle at var(--px) var(--py), #000, transparent),
    var(--dot-m), radial-gradient(70px circle at var(--px) var(--py), #000, transparent), var(--dot-l);
  -webkit-mask-size: 22px 22px, 100% 100%, 22px 22px, 100% 100%, 22px 22px;
  mask-size: 22px 22px, 100% 100%, 22px 22px, 100% 100%, 22px 22px;
  -webkit-mask-repeat: repeat, no-repeat, repeat, no-repeat, repeat;
  mask-repeat: repeat, no-repeat, repeat, no-repeat, repeat;
  mask-composite: add, intersect, add, intersect, add;
  transition: --px .18s ease-out, --py .18s ease-out;
}
@property --px { syntax: '<length>'; inherits: true; initial-value: -999px; }
@property --py { syntax: '<length>'; inherits: true; initial-value: -999px; }
.doc-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(270deg, transparent 55%, var(--canvas) 100%); pointer-events: none; }
.doc-hero > * { position: relative; z-index: 1; }
.doc-hero-inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; }
.doc-crumb { font-size: 13px; color: var(--muted); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.doc-crumb i { width: 8px; height: 8px; border-radius: 50%; background: var(--cat); }
.doc-hero h1 { font-size: 34px; line-height: 1.15; letter-spacing: -.022em; font-weight: 700; margin: 0 0 10px; }
.doc-lede { font-size: 17.5px; line-height: 1.5; color: var(--muted); max-width: 40em; margin: 0 0 16px; }
.doc-hero .mono { font-size: 12.5px; color: var(--faint); }
.doc-copy {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; font: inherit; font-size: 13px; font-weight: 500;
  border: 1px solid var(--border2); border-radius: 999px; background: var(--panel); color: var(--text); cursor: pointer;
}
.doc-copy:hover { background: var(--panel2); }
.doc-hero .wf-node-pill { margin-top: 22px; cursor: default; }
.doc-hero .wf-node-pill:hover { transform: none; box-shadow: none; }
.doc-hero .wf-node-pill__label { color: var(--text); }

/* ── Body: article | on this page ── */
.doc-main { min-width: 0; display: grid; grid-template-columns: minmax(0, 760px) 200px; gap: 48px; padding: 0 40px 96px; justify-content: start; align-items: start; }
.doc-article { min-width: 0; }
.doc-article h2 { font-size: 21px; letter-spacing: -.015em; font-weight: 650; margin: 44px 0 12px; display: flex; align-items: center; gap: 10px; scroll-margin-top: 76px; }
.doc-article h2::before { content: ''; width: 5px; height: 18px; border-radius: 2px; background: var(--cat); flex: 0 0 auto; }
.doc-article h2:first-child { margin-top: 0; }
.doc-article h3 { font-size: 16.5px; font-weight: 600; margin: 26px 0 8px; scroll-margin-top: 76px; }
.doc-article p { margin: 0 0 14px; max-width: 68ch; }
.doc-article ul, .doc-article ol { padding-left: 20px; margin: 0 0 14px; max-width: 68ch; }
.doc-article li { margin-bottom: 4px; }
.doc-article strong { font-weight: 600; }

/* At a glance — the dense, machine-friendly summary */
.doc-glance { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin: 0 0 8px; }
.doc-glance div { background: var(--canvas2); padding: 14px 16px; }
.doc-glance dt { font-size: 12px; color: var(--faint); margin-bottom: 4px; }
.doc-glance dd { margin: 0; font-size: 14px; line-height: 1.45; }

/* Tables — full grid, roomy cells */
.doc-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; margin: 0 0 16px; border: 1px solid var(--border2); border-radius: 10px; overflow: hidden; }
.doc-table th { text-align: left; font-weight: 600; font-size: 12.5px; color: var(--muted); background: var(--panel2); padding: 10px 14px; border-bottom: 1px solid var(--border2); }
.doc-table td { padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: top; line-height: 1.5; }
.doc-table th + th, .doc-table td + td { border-left: 1px solid var(--border); }
.doc-table td.key { white-space: nowrap; font-weight: 500; }
.doc-table td.type { color: var(--muted); white-space: nowrap; width: 1%; }
.doc-table td.desc { color: var(--muted); }
.doc-table tr:last-child td { border-bottom: 0; }

/* Figures — screenshots framed like an app window on the canvas grid */
.doc-figure { margin: 18px 0 26px; }
.doc-figure .frame {
  position: relative; border: 1px solid var(--border2); border-radius: 12px; overflow: hidden;
  background-color: var(--m-canvas); background-image: radial-gradient(circle, var(--dot) 1px, transparent 1px); background-size: 20px 20px;
  box-shadow: 0 12px 40px -18px rgba(0,0,0,.35);
}
.doc-figure img { display: block; max-width: 100%; height: auto; margin: 0 auto; }  /* never upscaled: an inspector shot sits at its natural width on the grid */
.doc-figure figcaption { font-size: 13px; color: var(--muted); margin-top: 10px; }
.doc-figure .bar { height: 30px; display: flex; align-items: center; gap: 6px; padding: 0 12px; background: var(--m-frame); border-bottom: 1px solid var(--border); }
.doc-figure .bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--border2); }
.doc-figure .bar span { margin-left: 8px; font-size: 11.5px; color: var(--faint); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.doc-figure .ph { min-height: 150px; padding: 34px 28px; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--faint); font-size: 14px; }
.doc-figure .ph-tag { position: absolute; right: 12px; bottom: 12px; font-size: 11px; color: var(--faint); background: var(--m-frame); border: 1px solid var(--border); border-radius: 999px; padding: 3px 9px; }

/* Callouts — one style, tinted by kind */
.doc-note { border-left: 3px solid var(--cat); background: var(--panel); border-radius: 0 10px 10px 0; padding: 12px 16px; margin: 0 0 14px; max-width: 68ch; font-size: 14.5px; }
.doc-note.warn { border-left-color: #C16300; }
.doc-note p { margin: 0; }

/* Diagrams — inline SVG figures. Wires are the logo yellow. */
:root { --wire: #F4B22B; }   /* logo yellow */
.doc-figure .frame.is-diagram { padding: 16px 12px; }
.doc-figure .frame.is-diagram svg { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.doc-figure .frame.is-diagram .wire { stroke: var(--wire); }
.doc-figure .frame.is-diagram .wire-end { fill: var(--wire); }

/* Colour chip — {#RRGGBB} in Markdown */
.doc-chip { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: -1px; margin-right: 8px; border: 1px solid rgba(var(--fg), .18); }

/* Category index cards */
.doc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 8px 0 24px; }
.doc-cards a { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--canvas2); text-decoration: none; }
.doc-cards a:hover { border-color: var(--cat); }
.doc-cards b { font-weight: 600; font-size: 14.5px; }
.doc-cards span { font-size: 13px; color: var(--muted); line-height: 1.45; }

/* Related — node chips colored by their own category */
.doc-related { display: flex; flex-wrap: wrap; gap: 8px; }
.doc-related a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border: 1px solid var(--border2); border-radius: 999px; font-size: 13.5px; text-decoration: none; background: var(--panel); }
.doc-related a:hover { background: var(--panel2); }
.doc-related i { width: 8px; height: 8px; border-radius: 50%; }

.doc-foot { margin-top: 56px; padding-top: 18px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: 16px; font-size: 13px; color: var(--muted); }
.doc-foot a { text-decoration: none; }
.doc-foot a:hover { color: var(--text); }

/* On this page — sticky beside the article */
.doc-toc { position: sticky; top: 80px; max-height: calc(100vh - 100px); overflow-y: auto; font-size: 13px; }
.doc-toc h5 { margin: 0 0 8px; font-size: 11.5px; font-weight: 600; color: var(--faint); }
.doc-toc a { display: block; padding: 4px 0 4px 12px; border-left: 2px solid var(--border); color: var(--muted); text-decoration: none; }
.doc-toc a:hover, .doc-toc a.is-active { color: var(--text); border-left-color: var(--cat); }

.doc-menu { display: none; }

/* ── Responsive ── */
@media (max-width: 1240px) {
  .doc-main { grid-template-columns: minmax(0, 760px); }
  .doc-toc { display: none; }
}
@media (max-width: 960px) {
  .doc { padding-left: 0; }
  .doc-side { width: 280px; transform: translateX(-100%); transition: transform .22s ease; box-shadow: 0 0 40px rgba(0,0,0,.25); }
  .doc.nav-open .doc-side { transform: none; }
  .doc-main { padding: 0 24px 72px; }
  .doc-hero { padding: 28px 24px 26px; }
  .doc-menu { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 13px; color: var(--muted); background: none; border: 1px solid var(--border2); border-radius: 999px; padding: 5px 12px; margin-bottom: 16px; cursor: pointer; }
}
@media (max-width: 600px) {
  body { font-size: 15px; }
  .doc-main { padding: 0 16px 64px; }
  .doc-hero { padding: 24px 16px 22px; }
  .doc-hero h1 { font-size: 28px; }
  .doc-lede { font-size: 16px; }
  .doc-hero-inner { flex-direction: column; gap: 14px; }
  .doc-glance { grid-template-columns: 1fr; }
  .doc-table td.type, .doc-table th.type { display: none; }
  .doc-table td.key { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .doc-side { transition: none; } }

/* ── Links in prose: node green on the dark theme (blue is too dark on
   near-black), node blue on the light theme. Only unclassed links inside
   paragraphs, list items, table cells and callouts; sidebar, table of
   contents, related chips, cards and footer keep their own rules. */
.doc-article :is(p, li, td, blockquote) a:not([class]) {
  color: #139948;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}
html:not(.dark) .doc-article :is(p, li, td, blockquote) a:not([class]) {
  color: #487CDE;
}
.doc-article :is(p, li, td, blockquote) a:not([class]):hover {
  text-decoration-color: currentColor;
}

/* ── Tabs (`::: tabs` in docs-src): a glass card — the tab row across its
   top edge, one panel below. At desktop width every tab fits on one line;
   narrower, the row wraps rather than clipping a tab at the card's edge.
   Without docs.js every panel shows with its heading. */
.doc-tabs {
  margin: 18px 0 26px; border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
  background: color-mix(in srgb, var(--canvas2) 72%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 6px 24px rgba(0,0,0,.18);
}
.doc-tablist {
  display: none; flex-wrap: wrap; gap: 2px;
  padding: 6px 8px 0; border-bottom: 1px solid var(--border); background: var(--panel);
}
.doc-tabs.is-ready .doc-tablist { display: flex; }
.doc-tablist button {
  flex: 0 0 auto; white-space: nowrap; appearance: none; background: none; border: 0;
  border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 8px 10px;
  font: inherit; font-size: 13.5px; color: var(--muted); cursor: pointer; border-radius: 8px 8px 0 0;
}
.doc-tablist button { display: inline-flex; align-items: center; gap: 7px; }
.doc-tab-icon { width: 15px; height: 15px; flex: 0 0 auto; opacity: .85; }
.doc-tab-icon.own { opacity: 1; }
.doc-tab-icon[viewBox="18 28 64 43"] { width: 18px; } /* the Watchflows mark is wider than tall */
.doc-tablist button[aria-selected="true"] .doc-tab-icon { opacity: 1; }
.doc-tablist button:hover { color: var(--text); background: var(--panel2); }
/* Selection never changes the text's weight, so nothing moves: colour, a fill and the underline mark it. */
.doc-tablist button[aria-selected="true"] { color: var(--text); background: var(--panel2); border-bottom-color: currentColor; }
.doc-tab { padding: 18px 22px; }
.doc-tab > :first-child, .doc-tab > .doc-tab-title + * { margin-top: 0; }
.doc-tab > :last-child { margin-bottom: 0; }
.doc-tabs:not(.is-ready) .doc-tab + .doc-tab { border-top: 1px solid var(--border); }
.doc-tabs.is-ready .doc-tab { display: none; }
.doc-tabs.is-ready .doc-tab.is-active { display: block; }
.doc-tabs.is-ready .doc-tab-title { display: none; }