/* sysc's figures, as sysf's: what the pages share beyond the kit. Colours are the kit's tokens, so
   both themes hold. */
.figwrap { overflow-x: auto; }
.fig { width: 100%; height: auto; display: block; }
.fig.min { min-width: 600px; }
.fig .ttl { font: 600 12px var(--body); fill: var(--ink); pointer-events: none; }
.fig .lbl { font: 10.5px var(--mono); fill: var(--ink); pointer-events: none; }
.fig .sm { font: 9.5px var(--mono); fill: var(--muted); pointer-events: none; }
.fig .box { fill: var(--sheet); stroke: var(--rule); stroke-width: 1; transition: fill .2s, stroke .2s, opacity .2s; }
.fig .box.pick { cursor: pointer; }
.fig .box.user { fill: var(--user-bg); stroke: var(--user); }
.fig .box.proven { fill: var(--proven-bg); stroke: var(--proven); }
.fig .box.trusted { fill: var(--trusted-bg); stroke: var(--trusted); }
.fig .box.dev { fill: var(--dev-bg); stroke: var(--dev); }
.fig .box.hw { fill: var(--hw-bg); stroke: var(--hw); }
.fig .box.bad { fill: var(--bad-bg); stroke: var(--bad); stroke-width: 2; }
.fig .box.part { fill: var(--sheet); stroke: var(--part); stroke-width: 2.4; }
.fig .box.on { stroke: var(--part); stroke-width: 2.4; }
.fig .box.ghost { fill: transparent; stroke: var(--rule); stroke-dasharray: 3 3; }
.fig .box.dim, .fig .lbl.dim, .fig .sm.dim, .fig .wire.dim { opacity: .3; }
.fig .wire { stroke: var(--rule); stroke-width: 1.4; fill: none; }
.fig .wire.on { stroke: var(--part); stroke-width: 2.4; }
.fig .wire.bad { stroke: var(--bad); stroke-width: 2.4; }
.fig .wire.ok { stroke: var(--proven); stroke-width: 2.4; }
.fig .brace { stroke: var(--part); stroke-width: 1.6; fill: none; }
.fig .tick { stroke: var(--rule); stroke-width: 1; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 0.8rem; color: var(--muted); }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; margin-right: 5px; border: 1px solid var(--rule); }
.legend i.user { background: var(--user-bg); border-color: var(--user); }
.legend i.proven { background: var(--proven-bg); border-color: var(--proven); }
.legend i.trusted { background: var(--trusted-bg); border-color: var(--trusted); }
.legend i.dev { background: var(--dev-bg); border-color: var(--dev); }
.legend i.hw { background: var(--hw-bg); border-color: var(--hw); }
.legend i.bad { background: var(--bad-bg); border-color: var(--bad); }
.legend i.ghost { background: none; border-style: dashed; }
.said { font-family: var(--mono); font-size: .84rem; background: var(--paper); border-radius: 5px; padding: 8px 10px; margin-top: 8px; white-space: pre-wrap; overflow-wrap: anywhere; min-height: 3.4em; }
.said b { font-weight: 600; }
.said .bad { color: var(--bad); }
.said .ok { color: var(--proven); }
.cases { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.plain td, .plain th { padding: 5px 8px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; font-size: .9rem; }
.plain { border-collapse: collapse; width: 100%; }
.plain td:first-child { white-space: nowrap; }