/* Bylaw Ledger flow diagrams: shared styles. Load after bl-components.css. */
/* Diagram tokens map onto the site's existing tokens (bl-components.css).
   Change the site palette and every diagram follows. Only --signal is new: add it to :root once. */
:root{
  --dg-ink:var(--ink,#141f2b); --dg-surface:var(--surface,#fdfaf4); --dg-paper:var(--section,#f8f3eb); --dg-muted:var(--slate,#4f667e);
  --dg-data:var(--blue,#5a7694); --dg-signal:var(--signal,#FFCF24); --dg-bank:var(--tag,#e6e2d8); --dg-bank-line:var(--line-strong,#cfc7b5);
  --dg-today:#9a978e; --dg-line:var(--line,#ded7c8); --dg-core-sub:var(--on-dark-muted,#b8c5d4);
  --dg-font:inherit; --dg-mono:ui-monospace,"SF Mono",Menlo,monospace;
}
.bl-flow-fig{display:flex;flex-direction:column;gap:14px;margin:0}
.bl-flow-fig__frame{background:var(--dg-surface);border:1px solid var(--dg-line);border-radius:14px;padding:8px}
.bl-flow-fig svg{display:block;width:100%;height:auto;margin:0 auto}
.bl-flow-fig svg .dg-dim{opacity:.18}
.bl-flow-fig svg .dg-hi path{stroke-width:2.5}
@media (prefers-reduced-motion:no-preference){.bl-flow-fig svg g{transition:opacity .2s ease}}

.bl-flow-steps{display:flex;flex-wrap:wrap;gap:6px}
.bl-flow-steps button{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--dg-line);background:var(--dg-surface);color:var(--dg-ink);font:600 13px var(--dg-font);white-space:nowrap;cursor:pointer}
.bl-flow-steps button span{font:600 11px var(--dg-mono)}
.bl-flow-steps button[aria-pressed="true"]{background:var(--dg-ink);border-color:var(--dg-ink);color:var(--dg-surface)}
.bl-flow-steps button:focus-visible{outline:3px solid var(--dg-data);outline-offset:2px}

.bl-flow-caption{display:grid;grid-template-columns:28px 1fr;gap:12px;padding:12px 14px;border-radius:12px;background:var(--dg-surface);border:1px solid var(--dg-line)}
.bl-flow-caption b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--dg-ink);color:var(--dg-surface);font:600 12px var(--dg-mono)}
.bl-flow-caption strong{display:block;font-weight:600}
.bl-flow-caption p{margin:0;color:var(--dg-muted);font-size:14px}

.bl-flow-foot{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center}
.bl-flow-legend{display:flex;gap:14px;flex-wrap:wrap;font:600 12px var(--dg-font);color:var(--dg-muted)}
.bl-flow-legend span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.bl-flow-tag{padding:2px 8px;border-radius:5px;background:var(--dg-bank);font:600 10px var(--dg-mono);letter-spacing:.07em}

/* Mobile list (shown < 960px instead of the SVG) */
.bl-flow-list{display:none;list-style:none;padding:0;margin:0}
.bl-flow-list li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px}
.bl-flow-list__rail{display:flex;flex-direction:column;align-items:center}
.bl-flow-list__rail b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--dg-ink);color:var(--dg-surface);font:600 12px var(--dg-mono);flex:none}
.bl-flow-list li.is-rule .bl-flow-list__rail b{background:var(--dg-signal);color:var(--dg-ink)}
.bl-flow-list__rail::after{content:"";flex:1;width:2px;min-height:12px;background:var(--dg-line)}
.bl-flow-list li:last-child .bl-flow-list__rail::after{display:none}
.bl-flow-list__body{padding-bottom:14px;display:flex;flex-direction:column;gap:6px}
.bl-flow-list__body strong{font-weight:600}
.bl-flow-list__body p{margin:0;color:var(--dg-muted);font-size:13px;line-height:1.45}
.bl-flow-owner{display:inline-flex;width:fit-content;padding:2px 8px;border-radius:999px;border:1px solid;font:600 10px var(--dg-font);white-space:nowrap}
.bl-flow-owner--people{background:var(--dg-surface);border-color:var(--dg-ink)}
.bl-flow-owner--bl,.bl-flow-owner--core{background:var(--dg-surface);border-color:var(--dg-data);color:var(--dg-data)}
.bl-flow-owner--bank{background:var(--dg-bank);border-color:var(--dg-bank-line)}
.bl-flow-owner--rule{background:var(--dg-signal);border-color:var(--dg-ink)}
.bl-flow-owner--today{background:transparent;border-color:var(--dg-today);color:var(--dg-muted)}
.bl-flow-state{font:600 10px var(--dg-mono);letter-spacing:.06em;color:var(--dg-muted)}
.bl-flow-rec{font:600 10px var(--dg-mono);letter-spacing:.06em;color:var(--dg-data)}
@media (max-width:959px){.bl-flow-fig__frame,.bl-flow-steps,.bl-flow-caption{display:none}.bl-flow-list{display:block}}
.bl-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}