/* The seven checks, drawn for one message (checks.js): a small funnel beside each answer, in the hero's language. Each
   check is a numbered node on the line the message travels, in its own lane, with what it saw drawn beside it. Wide
   screens: a column beside the answer, which stays in view as the answer scrolls. Narrow ones: under the answer.
   Nothing here opens on hover: what's drawn is all there is. */
.answer { grid-template-columns: minmax(0, 1fr) 326px; gap: 30px; align-items: start; min-height: 0; }
.checks { position: sticky; top: 72px; align-self: start; padding: 2px 0 6px; }
.checks .ttl { margin: 0 0 10px 100px; font-size: 10px; letter-spacing: .16em; color: var(--label); }
.checks .flow { position: relative; }
.checks .fn { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.checks .bands { list-style: none; margin: 0; padding: 0; }
/* a lane for each check: a hairline across the funnel and its readout */
.checks .band { position: relative; min-height: 50px; padding: 8px 0 8px 100px; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; }
.checks .band + .band { border-top: 1px solid color-mix(in srgb, var(--ink-2) 16%, transparent); }
.checks .read { display: grid; gap: 5px; min-width: 0; }
.checks .nm { font: 10px/1 var(--hud); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
/* the check that decided it takes the colour of how it ended (checks.js puts out-answered | out-held | out-care | out-wait | out-raw on the figure) */
.checks .band.fired .nm { color: var(--stop-ink); }
.checks.out-answered .band.fired .nm { color: var(--ok-ink); }
.checks.out-wait .band.fired .nm { color: var(--cool-ink); }
.checks .band.idle .read { opacity: .4; }
.checks .viz { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; min-height: 16px; font: 11px/1.3 var(--mono); color: var(--ink-2); min-width: 0; }
.checks .viz b { font-weight: 600; color: var(--ink); }
.checks .viz .u { color: var(--muted); font-size: 10.5px; }
.checks .viz .arrow { color: var(--muted); }
.checks .flag { padding: 1px 5px; font: 9.5px/1.5 var(--hud); letter-spacing: .08em; text-transform: uppercase; color: var(--bad); border: 1px solid color-mix(in srgb, var(--bad) 55%, var(--rule)); }
.checks .flag.care { color: var(--hold); border-color: color-mix(in srgb, var(--hold) 55%, var(--rule)); }
.checks .flag.soft { color: var(--muted); border-color: var(--rule); }

/* the funnel */
.checks .fn .tone { fill: var(--ink-2); }
.checks .fn .side, .checks .fn .rim { fill: none; stroke: var(--ink-2); stroke-width: 1; }
.checks .fn .rim { stroke-width: 1.4; stroke: var(--ink); }
.checks .fn .axis { stroke: color-mix(in srgb, var(--ink-2) 35%, transparent); stroke-width: 1; }
.checks .fn .land { stroke: var(--rule); stroke-width: 1; }
/* the route the message took */
.checks .fn .trail { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.checks .fn .trail.answered { stroke: var(--ok); }
.checks .fn .trail.wait { stroke: var(--cool); }
.checks .fn .trail.care { stroke: var(--hold); }
.checks .fn .trail.raw { stroke: var(--bad); stroke-width: 1.4; stroke-dasharray: 2 3; }
/* a node for each check: unlit until the message reaches it; the one that decided it in ember */
.checks .fn .lead { stroke: color-mix(in srgb, var(--ink-2) 40%, transparent); stroke-width: 1; stroke-dasharray: .5 3; stroke-linecap: round; }
.checks .fn .lead.at { stroke: var(--stop); stroke-width: 1.4; }
.checks.out-answered .fn .lead.at { stroke: var(--ok); }
.checks.out-wait .fn .lead.at { stroke: var(--cool); }
.checks .fn .lead.idle { opacity: .45; }
.checks .fn .node .ring { fill: var(--stop); opacity: 0; }
.checks.out-answered .fn .node .ring { fill: var(--ok); }
.checks.out-wait .fn .node .ring { fill: var(--cool); }
.checks .fn .node .disc { fill: var(--plate); stroke: color-mix(in srgb, var(--ink-2) 50%, var(--plate)); stroke-width: 1.2; transition: fill .18s, stroke .18s; }
.checks .fn .node text { font: 600 9px/1 var(--mono); fill: var(--muted); text-anchor: middle; dominant-baseline: central; transition: fill .18s; }
.checks .fn .node.on .disc { fill: var(--ink); stroke: var(--ink); }
.checks .fn .node.on text { fill: var(--plate); }
.checks .fn .node.at .disc { fill: var(--stop); stroke: var(--stop); }
.checks.out-answered .fn .node.at .disc { fill: var(--ok); stroke: var(--ok); }
.checks.out-wait .fn .node.at .disc { fill: var(--cool); stroke: var(--cool); }
.checks .fn .node.at .ring { opacity: .2; }
.checks .fn .node.at.care .disc { fill: var(--hold); stroke: var(--hold); }
.checks .fn .node.at.care .ring { fill: var(--hold); }
.checks .fn .node.at.wait .ring { animation: ck-wait 1.1s ease-in-out infinite; }
.checks .fn .node.idle .disc { stroke: color-mix(in srgb, var(--ink-2) 28%, var(--plate)); }
.checks .fn .node.idle text { opacity: .6; }
/* the message */
.checks .fn .msg .core { fill: var(--ink); }
.checks .fn .msg .halo { fill: var(--ink); opacity: 0; }
.checks .fn .msg.going .core { fill: var(--mover); }
.checks .fn .msg.held .core { fill: var(--held); }
.checks .fn .msg.answered .core { fill: var(--ok); }
.checks .fn .msg.answered.rest .halo { fill: var(--ok); opacity: .22; }
.checks .fn .msg.held.rest .halo { fill: var(--held); opacity: .14; }
.checks .fn .msg.care .core { fill: var(--hold); }
.checks .fn .msg.care.rest .halo { fill: var(--hold); opacity: .22; }
.checks .fn .msg.raw .core { fill: var(--bad); }
.checks .fn .msg.wait { opacity: 0; }                              /* while the model writes, the node itself pulses */
.checks.none .fn .side, .checks.none .fn .rim { stroke: color-mix(in srgb, var(--bad) 60%, var(--rule)); stroke-dasharray: 3 3; }
@keyframes ck-wait { 0%, 100% { opacity: .08; } 50% { opacity: .38; } }

/* where it ended up, and how long the checks took */
.checks .end { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 40px 0 0 14px; font: 9.5px/1.4 var(--hud); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.checks .end .where { color: var(--ink); }
.checks .end .where.w-answered { color: var(--ok-ink); }
.checks .end .where.w-held { color: var(--held-ink); }
.checks .end .where.w-care { color: var(--hold); }
.checks .end .where.w-raw { color: var(--bad); }

/* 0 normalise: the message's length */
.checks .v-len .track { width: 72px; height: 4px; background: color-mix(in srgb, var(--ink-2) 20%, transparent); }
.checks .v-len .track i { display: block; height: 100%; width: var(--w); background: var(--ink-2); }
/* 1 tripwires: twelve wires, the tripped ones raised */
.checks .v-wires .strings { display: inline-flex; align-items: flex-end; gap: 4px; height: 15px; }
.checks .v-wires .strings i { width: 1.5px; height: 11px; background: color-mix(in srgb, var(--ink-2) 50%, transparent); }
.checks .v-wires .strings i.hit { width: 3px; height: 15px; background: var(--bad); }
.checks .v-wires .strings i.hit.care { background: var(--hold); }
/* 2 search / read: the closest topics, and the mark the lead has to reach */
.checks .v-bars { display: grid; gap: 7px; width: 100%; }
.checks .v-bars .row { display: grid; gap: 3px; min-width: 0; }
.checks .v-bars .line { display: grid; grid-template-columns: minmax(0, 1fr) 26px; gap: 8px; align-items: center; }
.checks .v-bars .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 12px/1.3 var(--sans); color: var(--muted); }
.checks .v-bars .row.lead .lbl { color: var(--ink); }
.checks .v-bars .track { position: relative; height: 6px; background: color-mix(in srgb, var(--ink-2) 16%, transparent); }
.checks .v-bars .track i { position: absolute; top: 0; bottom: 0; }
.checks .v-bars .track .m { left: 0; width: var(--w); background: color-mix(in srgb, var(--ink-2) 55%, transparent); }
.checks .v-bars .track .w { left: var(--at); width: var(--w); background: repeating-linear-gradient(135deg, var(--cool) 0 1.5px, transparent 1.5px 3px); }
.checks .v-bars .row.lead .track .m { background: var(--cool); }
.checks .v-bars .row.lead.short .track .m { background: var(--ink-2); }
.checks .v-bars .row.lead.short .track .w { background: repeating-linear-gradient(135deg, var(--ink-2) 0 1.5px, transparent 1.5px 3px); }
.checks .v-bars .track u { position: absolute; left: var(--at); top: -3px; bottom: -3px; width: 1.5px; background: var(--ink); }
.checks .v-bars .row:not(.lead) .track u { opacity: .22; }
.checks .v-bars b { font: 10.5px/1 var(--mono); text-align: right; color: var(--muted); font-weight: 400; }
.checks .v-bars .row.lead b { color: var(--ink); font-weight: 600; }
/* 3 scope / route: what got through */
.checks .v-gate .lines { display: inline-grid; gap: 2.5px; width: 24px; }
.checks .v-gate .lines i { display: block; height: 2px; width: var(--w, 100%); background: var(--ink-2); }
.checks .v-gate .to { padding: 1px 6px; font: 9.5px/1.5 var(--hud); letter-spacing: .1em; text-transform: uppercase; color: var(--cool-ink); border: 1px solid var(--cool); }
.checks .v-gate .stamp { padding: 1px 6px; font: 9.5px/1.5 var(--hud); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); border: 1px dashed var(--ink-2); }
.checks .v-gate .qs { display: inline-flex; gap: 3px; }
.checks .v-gate .qs i { width: 13px; height: 13px; border-radius: 50%; border: 1px solid var(--ink-2); font: 9px/12px var(--mono); font-style: normal; text-align: center; color: var(--ink-2); }
.checks .v-gate .tick { color: var(--good); font-weight: 700; }
.checks .v-gate .what { font: 12px/1.3 var(--sans); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
/* 4 premises: their numbers; a wrong one beside the right one */
.checks .v-chips .num { padding: 1px 6px; background: var(--plate-2); border: 1px solid var(--rule); color: var(--ink); }
.checks .v-chips .fix { display: inline-flex; gap: 5px; align-items: baseline; padding: 1px 6px; border-left: 2px solid var(--ok); background: color-mix(in srgb, var(--mark) 18%, var(--plate)); }
.checks .v-chips .fix s { color: var(--bad); }
.checks .v-chips .fix b { color: var(--ink); }
/* 5 answer: what the reply is made of */
.checks .v-blocks { display: grid; gap: 3px; width: 100%; }
.checks .v-blocks .blk { display: flex; gap: 7px; align-items: baseline; min-width: 0; padding: 3px 7px; border: 1px solid var(--rule); font: 11.5px/1.35 var(--sans); color: var(--ink); }
.checks .v-blocks .blk i { flex: none; font: 9px/1.5 var(--hud); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.checks .v-blocks .blk span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.checks .v-blocks .blk.model { border-color: var(--cool); }
.checks .v-blocks .blk.model i { color: var(--cool-ink); }
.checks .v-blocks .blk.approved { background: var(--plate-2); border-left: 2px solid var(--ok); }
.checks .v-blocks .blk.fixed { border-style: dashed; border-color: var(--ink-2); }
.checks .v-blocks .blk.off { opacity: .5; }
.checks .v-blocks .blk.off span { text-decoration: line-through; }
.checks .v-blocks .blk.wait { animation: ck-shimmer 1.2s ease-in-out infinite; }
@keyframes ck-shimmer { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
/* 6 check: each sentence the model wrote, kept or left out; the figures traced */
.checks .v-pills .pill { width: 22px; height: 10px; border-radius: 5px; }
.checks .v-pills .pill.ok { background: var(--good); }
.checks .v-pills .pill.no { position: relative; border: 1.5px solid var(--bad); box-sizing: border-box; }
.checks .v-pills .pill.no::after { content: ""; position: absolute; left: 2px; right: 2px; top: 50%; border-top: 1.5px solid var(--bad); transform: rotate(-18deg); }
.checks .v-pills .pill.wait { border: 1.5px dashed var(--ink-2); box-sizing: border-box; animation: ck-shimmer 1.2s ease-in-out infinite; }
.checks .v-pills .figs { display: inline-flex; gap: 2px; flex-wrap: wrap; max-width: 62px; }
.checks .v-pills .figs i { width: 5px; height: 5px; background: var(--ok); }
.checks .v-pills .mark.ok { color: var(--good); font-weight: 700; }
.checks .v-pills .mark.no { color: var(--bad); font-weight: 700; }
/* the model alone: no nodes, nothing to read out */
.checks .v-none { display: grid; gap: 2px; color: var(--bad); font: 9.5px/1.5 var(--hud); letter-spacing: .12em; text-transform: uppercase; }
.checks.none .band { min-height: 170px; }
.checks.none .nm { color: var(--bad); }

/* arriving: each lane's readout appears as the message reaches its node; bars grow, pills pop */
.checks.armed .band:not(.still) .read, .checks.armed .end { opacity: 0; }
.checks.play .band:not(.still) .read { animation: ck-in .34s both; animation-delay: calc((var(--k) - var(--from, 0)) * 160ms + 60ms); }
.checks.play .band.idle:not(.still) .read { animation-name: ck-in-dim; }
.checks.play .end { animation: ck-in .4s both; animation-delay: calc((7 - var(--from, 0)) * 160ms + 220ms); }
.checks.play .band:not(.still) .v-bars .track i, .checks.play .band:not(.still) .v-len .track i { animation: ck-grow .5s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc((var(--k) - var(--from, 0)) * 160ms + 140ms); transform-origin: left center; }
.checks.play .band:not(.still) .v-pills .pill, .checks.play .band:not(.still) .v-pills .figs i { animation: ck-pop .3s both; animation-delay: calc((var(--k) - var(--from, 0)) * 160ms + 200ms); }
@keyframes ck-in { from { opacity: 0; transform: translateX(-5px); } to { opacity: 1; transform: none; } }
@keyframes ck-in-dim { from { opacity: 0; transform: translateX(-5px); } to { opacity: .4; transform: none; } }
@keyframes ck-grow { from { transform: scaleX(0); } to { transform: none; } }
@keyframes ck-pop { from { transform: scale(.2); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .checks * { animation: none !important; transition: none !important; } }

/* narrower screens: the figure goes under the answer, at its own width */
@media (max-width: 1040px) {
  .answer { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .checks { position: static; width: min(100%, 360px); padding-top: 14px; border-top: 1px solid var(--rule); }
}

/* ------------------------------------------------------------------ signal only (see the foot of shared/super.css) */
:root[data-palette="signal"] .checks.out-care .band.fired .nm { color: var(--hold); }
:root[data-palette="signal"] .checks .v-chips .fix { background: transparent; }
:root[data-palette="signal"] :is(.checks .ttl, .checks .nm, .checks .viz .u, .checks .flag, .checks .end, .checks .v-bars b, .checks .v-gate .to, .checks .v-gate .stamp,
  .checks .v-blocks .blk i, .checks .v-none, .checks .fn .node text) { font-size: 11px; }   /* nothing under 11px */
:root[data-palette="signal"] .checks .v-gate .qs i { width: 15px; height: 15px; font-size: 11px; line-height: 14px; }