/* Diagrams (figures/*.svg, inlined by build.mjs) and screenshots. The SVGs
   use the colour tokens from docs.css, so they follow the theme. Loaded with
   ?v=<commit>: /assets/ is cached for 30 days. */

/* ---------- screenshots */
.shot { margin: 18px 0 26px; }
.shot img {
  display: block; width: 100%; height: auto; border-radius: 10px; background: #0e1626;
  border: 1px solid var(--line); box-shadow: 0 10px 30px -18px rgb(8 14 28 / 0.45);
}
.shot figcaption, .fig figcaption { margin-top: 8px; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px; margin: 18px 0 26px; }
.gallery .shot { margin: 0; }
@media (max-width: 560px) { .gallery { grid-template-columns: 1fr; } }

/* ---------- diagrams */
.fig { margin: 22px 0 28px; padding: 18px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.fg { display: block; width: 100%; height: auto; font-family: var(--sans); overflow: visible; }
.fg-narrow { display: none; max-width: 400px; margin: 0 auto; }
@media (max-width: 640px) {
  .fig { padding: 14px 10px; }
  .fg-wide { display: none; }
  .fg-narrow { display: block; }
}
.fg-region { fill: none; stroke: var(--line-2); stroke-width: 1.2; stroke-dasharray: 5 5; }
.fg-region-t { fill: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; }
.fg-box rect { fill: var(--surface); stroke: var(--line-2); stroke-width: 1.2; }
.fg-ours rect { fill: var(--accent-soft); stroke: color-mix(in srgb, var(--accent) 45%, var(--line-2)); }
.fg-t { fill: var(--ink); font-size: 15px; font-weight: 700; text-anchor: middle; }
.fg-s { fill: var(--muted); font-size: 12.5px; text-anchor: middle; }
.fg-narrow .fg-s { font-size: 11.5px; }
.fg-line { fill: none; stroke: var(--muted); stroke-width: 1.5; }
.fg-dash { stroke-dasharray: 4 4; }
.fg-head { fill: var(--muted); }
.fg-note { fill: var(--ink-2); font-size: 12.5px; }
.fg-mono { font-family: var(--mono); font-size: 12px; }
.fg-n circle { fill: var(--ink); }
.fg-n text { fill: var(--surface); font-size: 12px; font-weight: 750; text-anchor: middle; }
.fg-start { fill: var(--ink); }
.fg-state rect { fill: var(--surface); stroke: var(--line-2); stroke-width: 1.2; }
.fg-state text { fill: var(--ink); font-family: var(--mono); font-size: 14px; font-weight: 500; text-anchor: middle; }
.fg-live rect { fill: var(--live); stroke: var(--live); }
.fg-live text { fill: #0e1626; }
.fg-end rect { fill: var(--inline-bg); }
.fg-end text { fill: var(--muted); }
.shot a { display: block; border-radius: 10px; }
.shot a:hover img { border-color: var(--muted); }