/* RegTriage post. Diagrams, chart legend, result strip and table
   details. Fonts inherit from the site theme (cosmo). Light only. */

:root {
  --surface:   #ffffff;
  --ink:       #14181b;
  --muted:     #5d6672;
  --rule:      #c6ccd6;
  --rule-soft: #dfe3ea;
  --accent:    #a41f43;
  --accent-bg: #f6e6ea;
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100; --s5: #e87ba4; --s6: #008300;
}

/* diagrams (inline SVG) */
.scroller { overflow-x: auto; padding-bottom: 6px; }
.scroller > svg { display: block; min-width: 620px; width: 100%; height: auto; }
.diagram { color: var(--ink); }
.box   { fill: var(--surface); stroke: var(--rule); stroke-width: 1.25; }
.ghost { fill: none; stroke: var(--rule); stroke-width: 1.25; stroke-dasharray: 5 4; }
.band  { fill: var(--accent-bg); stroke: none; }
.flow  { fill: none; stroke: currentColor; stroke-width: 1.4; }
.name  { font-family: var(--bs-font-sans-serif); font-weight: 600; font-size: 15px; fill: var(--ink); }
.sub   { font-family: var(--bs-font-sans-serif); font-size: 11.5px; fill: var(--muted); }
.mono  { font-family: var(--bs-font-monospace); font-size: 10.5px; fill: var(--muted); }
.edge  { font-family: var(--bs-font-sans-serif); font-size: 11px; fill: var(--muted); }
.hotname { font-family: var(--bs-font-sans-serif); font-weight: 600; font-size: 12.5px; fill: var(--accent); }
.hotmono { font-family: var(--bs-font-monospace); font-size: 10px; fill: var(--accent); }

/* result strip under the first diagram */
.strip {
  display: flex; flex-wrap: wrap; gap: 10px 36px; align-items: baseline;
  border-top: 1px solid var(--rule-soft);
  margin: 4px 0 24px; padding-top: 12px;
  font-size: .9rem; color: var(--muted);
}
.strip b {
  font-family: var(--bs-font-monospace); font-size: 1.15rem; font-weight: 500;
  color: var(--ink); font-variant-numeric: tabular-nums; margin-left: 6px;
}
.strip .hi b { color: var(--accent); }

/* SOP and note snippets are hard-wrapped near 78 columns; wrap rather than scroll */
pre code, pre.sourceCode code, div.sourceCode pre { white-space: pre-wrap; word-break: break-word; }

/* tables */
table td:first-child, table th:first-child { font-family: var(--bs-font-monospace); font-size: .9em; white-space: nowrap; }
table td, table th { font-variant-numeric: tabular-nums; }

/* per-rule bar chart, inline SVG, with a run filter */
.rules-chart { display: block; width: 100%; height: auto; }
.bar { fill: var(--c); }
.run-filter {
  display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 0;
  font-size: .8rem; color: var(--muted); font-family: var(--bs-font-monospace);
}
.run-filter label { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.run-filter input { margin: 0; }

/* chart legend */
.legend {
  list-style: none; padding: 0; margin: -6px 0 18px;
  display: flex; flex-wrap: wrap; gap: 4px 18px;
  font-size: .85rem; color: var(--muted);
}
.legend li { margin: 0; display: flex; align-items: center; gap: 7px; }
.legend b { font-family: var(--bs-font-monospace); font-weight: 500; color: var(--ink); }
.sw { display: inline-block; width: 14px; height: 3px; background: var(--c); border-radius: 2px; }
.s1 { --c: var(--s1); } .s2 { --c: var(--s2); } .s3 { --c: var(--s3); }
.s4 { --c: var(--s4); } .s5 { --c: var(--s5); } .s6 { --c: var(--s6); }