/* ===== Checked at the gate: a shield, four checks, every reviewed piece with its verdict ===== */
.gate .container { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: start; }
.gate-side { position: sticky; top: 120px; display: grid; gap: var(--space-lg); }
.gate-side .lead { margin-top: 0; max-width: 40ch; color: var(--color-muted); }

/* the shield: an outlined crest, a scan passing down it, a check drawn once */
.gate-shield { width: 84px; height: 98px; filter: drop-shadow(0 0 22px var(--opal-1a)); }
.gate-shield svg { width: 100%; height: 100%; overflow: visible; }
.sh-fill { fill: var(--color-paper-3); }
.sh-edge { fill: none; stroke: var(--color-ink-2); stroke-width: 1.5; stroke-linejoin: round; }
.sh-scan { fill: var(--opal-2a); }
.sh-check { fill: none; stroke: var(--opal-2); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 80; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .sh-scan { animation: sh-scan 3.6s var(--ease-in-out) infinite; }
  .sh-check { animation: sh-draw 900ms var(--ease-out) 400ms both; }
}
@keyframes sh-scan { 0% { translate: 0 -30px; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { translate: 0 140px; opacity: 0; } }
@keyframes sh-draw { from { stroke-dashoffset: 80; } to { stroke-dashoffset: 0; } }

.gate-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-xs); }
.gate-steps li { display: flex; align-items: center; gap: var(--space-sm); color: var(--color-ink-2); font-size: var(--text-sm); }
.gate-steps .ico { width: 18px; height: 18px; color: var(--opal-2); flex: none; }
.gate-sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2xs) var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--color-rule); color: var(--color-muted); font-size: var(--text-sm); }
.gate-sum b { font: 500 var(--text-lg)/1 var(--font-display); color: var(--color-ink); font-variant-numeric: tabular-nums; }
.gate-sum .dot { width: 8px; height: 8px; margin-left: var(--space-xs); border-radius: 50%; }
.dot--ok { background: var(--ok); }
.dot--warn { background: var(--warn); }
.dot--bad { background: var(--risk); }
.gate-note { margin-top: 0; font-size: var(--text-sm); }

/* the list: fixed columns, so nothing shifts whatever the verdict */
.checks { display: grid; margin: 0; padding: 0; border-top: 0; }
.ck-row { display: grid; grid-template-columns: minmax(0, 1fr) 11.5rem 96px; gap: var(--space-md); align-items: center; min-height: 64px; border-bottom: 1px solid var(--color-rule); }
.ck-head { min-height: 40px; font-size: 12px; color: var(--ink-quiet, var(--color-muted)); }
.ck-row > span:first-child { display: grid; gap: var(--space-3xs); min-width: 0; }
.ck-row b { font: 500 var(--text-lg)/1.2 var(--font-display); letter-spacing: -0.015em; }
.ck-row small { font-size: 12px; color: var(--ink-quiet, var(--color-muted)); }
.ck-row code { font: 400 12.5px/1.3 var(--font-code); color: var(--color-muted); }
.ck-row > span:last-child { justify-self: end; }
.vd { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 88px; min-height: 28px; border-radius: var(--radius-pill); font: 500 12px/1 var(--font-body); font-style: normal; }
.vd::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.vd--ok { background: var(--ok-a); color: var(--ok); }
.vd--warn { background: var(--warn-a); color: var(--warn); }
@media (prefers-reduced-motion: no-preference) {
  .js.fx .gate .checks:not(.is-in) .ck-row:not(.ck-head) { opacity: 0; translate: 0 8px; }
  .js.fx .gate .ck-row:not(.ck-head) { transition: opacity 460ms var(--ease-out), translate 460ms var(--ease-out); transition-delay: calc(var(--r, 0) * 55ms); }
}

@media (max-width: 60rem) {
  .gate .container { grid-template-columns: minmax(0, 1fr); }
  .gate-side { position: static; }
}
@media (max-width: 40rem) {
  .ck-row { grid-template-columns: minmax(0, 1fr) 96px; }
  .ck-row code { grid-column: 1; grid-row: 2; padding-bottom: var(--space-xs); }
  .ck-head > span:nth-child(2) { display: none; }
}
.gate-sum b.c-ok { color: var(--ok); }
.gate-sum b.c-warn { color: var(--warn); }

.ck-row > :nth-child(2) { justify-self: start; text-align: left; }
/* live watch: verdict dots ping out of step, a scan passes down the list, the head says it is watching */
.checks { position: relative; }
.ck-live { display: inline-flex; align-items: center; gap: var(--space-xs); justify-self: end; color: var(--ok); }
.ck-live i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.vd::before { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .ck-live i::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid currentColor; animation: ping 2.4s var(--ease-out) infinite; animation-delay: var(--pd, 0s); pointer-events: none; }
  .ck-live i::after { inset: -1px; }
  .vd::before { animation: vd-ping 2.4s var(--ease-out) infinite; animation-delay: var(--pd, 0s); }
  .ck-row:nth-child(3n) .vd { --pd: 0.8s; } .ck-row:nth-child(3n+1) .vd { --pd: 1.6s; }
}
@keyframes ping { 0% { scale: 1; opacity: 0.9; } 100% { scale: 3.2; opacity: 0; } }
@keyframes vd-ping { 0% { box-shadow: 0 0 0 0 currentColor; } 70%, 100% { box-shadow: 0 0 0 6px transparent; } }

/* laser sweep: one crisp line that fades at its ends, a pixel trail on a canvas, a brief glitch on each row */
.ck-trail { position: absolute; left: 0; width: 100%; pointer-events: none; z-index: 1; }
.ck-beam { position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 2; pointer-events: none; opacity: 0; background: linear-gradient(90deg, transparent, var(--opal-2) 18%, var(--color-ink) 50%, var(--opal-2) 82%, transparent); box-shadow: 0 0 10px var(--opal-2), 0 0 26px var(--opal-2a); }
.ck-row { position: relative; z-index: 0; }
.ck-row.is-scan > * { animation: ck-glitch 360ms steps(6) both; }
@keyframes ck-glitch {
  0% { translate: 0 0; filter: none; text-shadow: none; }
  20% { translate: -1px 0; filter: blur(0.5px); text-shadow: 1px 0 var(--opal-1), -1px 0 var(--opal-2); }
  40% { translate: 1px 0; filter: none; text-shadow: -1px 0 var(--opal-1), 1px 0 var(--opal-2); clip-path: inset(10% 0 35% 0); }
  60% { translate: 0 0; filter: blur(0.3px); text-shadow: 1px 0 var(--opal-2); clip-path: inset(0 0 0 0); }
  80% { translate: -0.5px 0; filter: none; text-shadow: none; }
  100% { translate: 0 0; filter: none; text-shadow: none; }
}