/* Charts and small components for this snippet, on top of stylepack default1's tokens. */
:root {
  --s-luna: #2a78d6; --s-haiku: #eb6834; --s-mercury: #1baf7a;
  --crit: #c62828; --major: #d97706; --serious-bg: #fbe9e7;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --s-luna: #3987e5; --s-haiku: #d95926; --s-mercury: #199e70; --crit: #ff7a70; --major: #f2a33a; --serious-bg: #3a2422; }
}
:root[data-theme="dark"] { --s-luna: #3987e5; --s-haiku: #d95926; --s-mercury: #199e70; --crit: #ff7a70; --major: #f2a33a; --serious-bg: #3a2422; }

.fig-svg { overflow-x: auto; }
.fig-svg svg { min-width: 560px; }
.fig-svg .node rect { fill: var(--bg); stroke: var(--rule); }
.fig-svg .node-title { fill: var(--fg); font-weight: 700; }
.fig-svg .caption { fill: var(--muted); font-style: italic; }
.fig-svg .flow { stroke: var(--accent); stroke-width: 1.6; fill: none; }
.fig-svg .arrowhead { fill: var(--accent); }
.fig-svg .lane rect { fill: var(--bg); stroke-width: 1.6; }
.fig-svg .lane-luna { stroke: var(--s-luna); } .fig-svg .lane-haiku { stroke: var(--s-haiku); } .fig-svg .lane-mercury { stroke: var(--s-mercury); }
.fig-svg .dot-luna { fill: var(--s-luna); } .fig-svg .dot-haiku { fill: var(--s-haiku); } .fig-svg .dot-mercury { fill: var(--s-mercury); }
.fig-svg .stroke-luna { stroke: var(--s-luna); } .fig-svg .stroke-haiku { stroke: var(--s-haiku); } .fig-svg .stroke-mercury { stroke: var(--s-mercury); }
.fig-svg .pt { stroke: var(--surface); stroke-width: 2; fill-opacity: .9; }
.fig-svg .ring { fill: none; stroke-width: 2.5; }
.fig-svg .ring-luna { stroke: var(--s-luna); } .fig-svg .ring-haiku { stroke: var(--s-haiku); } .fig-svg .ring-mercury { stroke: var(--s-mercury); }
.fig-svg .leader { stroke-width: 1; stroke-dasharray: 2 2; }
.fig-svg .lbl { fill: var(--fg); }
.fig-svg .col-head { fill: var(--fg); font-weight: 700; }
.fig-svg .row-id { fill: var(--fg); font-weight: 700; }
.fig-svg .row-title { fill: var(--muted); font-size: 10px; }
.fig-svg .cell { fill: var(--bg); stroke: var(--rule); }
.fig-svg .cell-serious { fill: var(--serious-bg); }
.fig-svg .acc { fill: var(--fg); font-size: 13px; font-weight: 700; }
.fig-svg .acc-fail { fill: var(--crit); }
.fig-svg .acc.total { font-size: 14px; }
.fig-svg .minor-count { fill: var(--muted); font-size: 10px; }
.fig-svg .acc-line { font-size: 12.5px; }
.fig-svg .acc-label { fill: var(--muted); }
.fig-svg .def-line { fill: var(--muted); font-size: 10px; }
.fig-svg .w-crit { fill: var(--crit); font-weight: 700; }
.fig-svg .w-major { fill: var(--major); font-weight: 700; }
.fig-svg .crit { fill: var(--crit); } .fig-svg .major { fill: var(--major); }

.caveat { border: 1px solid var(--rule); border-left: 4px solid var(--sun); border-radius: 6px; background: var(--surface); padding: 12px 16px; }
.caveat p + p { margin-top: .5em; }
.legend { display: flex; flex-wrap: wrap; gap: .3em 1.2em; font-size: .85rem; color: var(--muted); margin-top: .5em; }
.legend > span, .chip { display: inline-flex; align-items: center; gap: .4em; white-space: nowrap; }
.sw { width: .7em; height: .7em; border-radius: 50%; display: inline-block; flex: none; }
.dot-bg-luna { background: var(--s-luna); } .dot-bg-haiku { background: var(--s-haiku); } .dot-bg-mercury { background: var(--s-mercury); }
.chip { font-weight: 600; }
.key { display: inline-block; width: 0; height: 0; border-left: .38em solid transparent; border-right: .38em solid transparent; vertical-align: baseline; }
.crit-key { border-bottom: .66em solid var(--crit); } .major-key { border-bottom: .66em solid var(--major); }
.sev { font: 700 .66rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; padding: .2em .45em; border-radius: 3px; border: 1px solid currentColor; }
.sev-critical { color: var(--crit); } .sev-major { color: var(--major); } .sev-minor { color: var(--muted); }
dl.defects { grid-template-columns: 1fr; gap: .2em; }
dl.defects dt { display: flex; flex-wrap: wrap; align-items: center; gap: .6em; margin-top: .8em; }
dl.defects dd p + p { margin-top: .25em; }
.muted { color: var(--muted); }
.note { font-size: .8rem; font-weight: 400; }
.table-wrap th { white-space: normal; vertical-align: bottom; }
table.facts th[scope="row"] { font-family: var(--font-body); font-size: .9rem; font-weight: 600; letter-spacing: normal; text-transform: none; color: var(--fg); text-align: left; vertical-align: top; }
table.facts th[scope="row"] .note { display: inline-block; margin-top: .15em; }
table.facts tr.group th { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); padding-top: 1em; }
td.fail { color: var(--crit); font-weight: 700; }
ul.tldr li + li { margin-top: .45em; }
ul.case-defects li + li { margin-top: .35em; }
ul.case-defects ul { margin-top: .25em; }
details > .table-wrap, details > p, details > pre, details > ul, details > dl { margin-top: .7em; }