/* ============================================================
   Mira verify-walk. Scroll-driven verification walkthrough.
   Owned by Agent B. Imports nothing; colors/type/space come ONLY
   from tokens.css custom properties. Animation is transform +
   opacity only. Full prefers-reduced-motion fallback at bottom.
   ============================================================ */

#verify-walk {
  position: relative;
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--paper);
}
/* arch-104: the reset is wrapped in :where() so it carries ZERO
   specificity. Bare `#verify-walk *` carries ID specificity and beat
   every class rule in this file: all the module's paddings and margins
   (.vw-layer, .vw-card, .vw-check, .vw-slate...) silently computed to
   0, which is why the slide number sat jammed against the provision id,
   the winner tag sat on the card border, and Pass crowded the corner.
   The reset still applies as a default; the intended rules now win. */
:where(#verify-walk *,
#verify-walk *::before,
#verify-walk *::after) { box-sizing: border-box; margin: 0; padding: 0; }

#verify-walk button {
  font-family: var(--font-ui);
  cursor: pointer;
}
#verify-walk button:focus-visible,
#verify-walk a:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.vw-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- track + pinned stage (scroll mode) ---------- */
/* ---- arch-113: the guided scroll ----------------------------------
   The walkthrough used to be one tall box whose scroll ratio was divided
   into 11 beats, which meant a reader could stop anywhere, including
   halfway between two states, and the section read as a pinned thing
   that happened to change rather than as a sequence of panels.

   Now 11 real full-viewport blocks stack inside the track and each is a
   snap stop. scroll-snap-stop:always is the part that matters: it stops a
   fast fling at every panel instead of letting it sail past several, so
   one gesture advances exactly one panel. Snapping is declared proximity
   rather than mandatory because mandatory snapping traps keyboard and
   zoom users when content is taller than the viewport; every panel here
   is exactly one viewport, so proximity behaves the same in practice
   without the trap.

   The declaration has to sit on the scroll container, which is the page
   root. Only these panels declare scroll-snap-align, so nothing else on
   the site starts snapping. */
html { scroll-snap-type: y proximity; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-snap-type: none; }
}

.vw-track { position: relative; }
/* pulled up by one viewport so panel 1 starts exactly where the pinned
   stage lands, instead of one screen below it */
.vw-snaps {
  position: relative;
  margin-top: -100vh;
  margin-top: -100svh;
  /* arch-116: these eleven blocks are empty spacers whose entire job is
     scroll length and snap positions. They come after the stage in the
     DOM and position:sticky makes the stage its own stacking context, so
     the spacers paint ON TOP of the panel and swallow every click aimed
     at it. Nothing inside the walkthrough was clickable before this, so
     it never showed; the first real button in a layer would have been
     dead on arrival. Taking them out of hit testing costs nothing (they
     hold no content, they are aria-hidden, and scroll snapping does not
     use pointer events) and hands the panel back its own surface. */
  pointer-events: none;
}
.vw-snap {
  height: 100vh;
  height: 100svh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.vw-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.vw-mode-tap .vw-track { height: auto !important; }
.vw-mode-tap .vw-stage {
  position: relative;
  height: auto;
  min-height: 78dvh;
  overflow: visible;
}

/* Layers stack in one grid cell: the container is always as tall as
   its tallest layer, so tap mode never clips content. */
.vw-layers {
  position: relative;
  flex: 1;
  min-height: 0;
  display: grid;
}

/* ---------- layers ---------- */
.vw-layer {
  grid-area: 1 / 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2.5rem 1.25rem 3.5rem;
  opacity: 0;
  transform: translateY(34px);
  transition:
    opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}
.vw-layer.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition-delay: 0.1s;
}
.vw-layer.is-past { transform: translateY(-26px); }

.vw-eyebrow {
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 0.9rem;
}
.vw-h {
  font-size: var(--fs-h2);
  line-height: 1.15;
  font-weight: 700;
  max-width: 18em;
}
.vw-sub {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-soft);
  max-width: var(--maxw-prose);
  margin-top: 0.9rem;
}

/* step 1: the question */
.vw-question {
  font-size: var(--fs-hero);
  line-height: 1.12;
  font-weight: 700;
  max-width: 15em;
}

/* ---------- step 2: retrieval slate ---------- */
.vw-slate {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
  width: 100%;
  max-width: var(--maxw-wide);
  margin: 1.5rem auto 0;
  text-align: left;
}
.vw-card {
  background: var(--paper-raised);
  border: 1.5px solid var(--line); /* arch-58: match site card borders */
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 0.5rem 0.65rem;
  font-size: var(--fs-small);
  line-height: 1.35;
  min-width: 0;
  opacity: 0;
  transform: translateY(24px) rotate(var(--vw-r, 0deg)) scale(0.95);
  transition:
    opacity 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--vw-d, 0ms);
}
.vw-layer.is-active .vw-card { opacity: 1; transform: none; }
.vw-card .vw-rank { color: var(--ink-faint); margin-right: 0.35em; }
.vw-card .vw-id {
  color: var(--gold);
  font-weight: 700;
  overflow-wrap: anywhere;
}
.vw-card .vw-snip {
  display: block;
  color: var(--ink-soft);
  margin-top: 0.2rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.vw-card.vw-win {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), var(--shadow-card);
}
.vw-card.vw-win .vw-tag {
  display: block;
  color: var(--accent-deep);
  font-weight: 700;
  font-size: var(--fs-small);
  margin-top: 0.25rem;
}

/* ---------- step 3: the claim ---------- */
.vw-claimcard {
  background: var(--paper-raised);
  border: 1.5px solid var(--line); /* arch-58: match site card borders */
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--pad-card);
  width: 100%;
  max-width: var(--maxw-prose);
  margin: 1.5rem auto 0;
  text-align: left;
}
.vw-kv {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  margin-bottom: 0.9rem;
}
.vw-kv dt {
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.vw-kv dd { font-weight: 700; color: var(--ink); }
.vw-kv dd.vw-id { color: var(--gold); }

.vw-law {
  font-family: var(--font-law);
  font-size: 1.22rem;
  line-height: 1.5;
  border-left: 3px solid var(--gold);
  padding-left: 1rem;
  color: var(--ink);
}

/* ---------- step 4: the five checks ---------- */
.vw-checklist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  max-width: var(--maxw-prose);
  margin: 1.4rem auto 0;
  text-align: left;
}
.vw-check {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  background: var(--paper-raised);
  border: 1.5px solid var(--line); /* arch-58: match site card borders */
  border-radius: var(--radius);
  padding: 0.75rem 0.95rem;
  opacity: 0.35;
  transform: translateY(8px);
  transition:
    opacity 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
    border-color 0.5s ease;
}
.vw-check.is-on { opacity: 1; transform: none; }
.vw-check.is-now[data-pass="true"] { border-color: var(--accent); }
.vw-check.is-now[data-pass="false"] { border-color: var(--refuse); }

.vw-lamp {
  flex: none;
  width: 1.45rem;
  height: 1.45rem;
  margin-top: 0.1rem;
  border-radius: 50%;
  border: 2px solid var(--ink-faint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: var(--paper-raised);
  transition: background 0.45s ease, border-color 0.45s ease;
}
.vw-check.is-on[data-pass="true"] .vw-lamp {
  background: var(--accent);
  border-color: var(--accent);
}
.vw-check.is-on[data-pass="true"] .vw-lamp::after { content: "\2713"; }
.vw-check.is-on[data-pass="false"] .vw-lamp {
  background: var(--refuse);
  border-color: var(--refuse);
}
.vw-check.is-on[data-pass="false"] .vw-lamp::after { content: "\2715"; }

.vw-check-body { flex: 1; min-width: 0; }
.vw-check-name { font-weight: 700; font-size: var(--fs-body); }
.vw-check-catch {
  display: block;
  color: var(--ink-soft);
  font-size: var(--fs-small);
  margin-top: 0.15rem;
}
.vw-check-code {
  display: block;
  color: var(--ink-faint);
  font-size: var(--fs-small);
  margin-top: 0.15rem;
}
.vw-state {
  flex: none;
  font-weight: 700;
  font-size: var(--fs-small);
  margin-top: 0.25rem;
  opacity: 0;
  transition: opacity 0.45s ease 0.1s;
}
.vw-check.is-on .vw-state { opacity: 1; }
.vw-check[data-pass="true"] .vw-state { color: var(--accent-deep); }
.vw-check[data-pass="false"] .vw-state { color: var(--refuse); }
.vw-check .vw-why {
  display: block;
  color: var(--refuse);
  font-size: var(--fs-small);
  margin-top: 0.25rem;
}

/* ---------- step 5: verdict ---------- */
.vw-verdict-card {
  background: var(--paper-raised);
  border: 1.5px solid var(--line); /* arch-58: match site card borders */
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--pad-card);
  width: 100%;
  max-width: var(--maxw-prose);
  margin: 1.4rem auto 0;
  text-align: left;
}
.vw-seal {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--accent-wash);
  color: var(--accent-deep);
  border-radius: var(--radius-chip);
  padding: 0.4rem 0.95rem 0.4rem 0.5rem;
  font-weight: 700;
  font-size: var(--fs-small);
  margin-bottom: 0.9rem;
}
.vw-seal .vw-tick {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--paper-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
}
.vw-verdict-quote {
  font-family: var(--font-law);
  font-size: 1.35rem;
  line-height: 1.5;
  margin: 0.4rem 0 0.8rem;
}
.vw-cite {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.9rem;
  align-items: baseline;
  font-size: var(--fs-small);
  color: var(--ink-soft);
}
.vw-cite .vw-sec { color: var(--gold); font-weight: 700; }
.vw-meta {
  font-size: var(--fs-small);
  color: var(--ink-faint);
  margin-top: 0.8rem;
}
.vw-en-note {
  font-size: var(--fs-small);
  color: var(--ink-soft);
  border-top: 1px dashed var(--line);
  padding-top: 0.7rem;
  margin-top: 0.9rem;
}

/* ---------- step 6: the refusal ---------- */
.vw-seq {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--vw-d, 0ms);
}
.vw-layer.is-active .vw-seq { opacity: 1; transform: none; }

.vw-fail-q {
  font-family: var(--font-ui);
  font-size: var(--fs-h3);
  font-weight: 700;
  margin-top: 1rem;
  max-width: var(--maxw-prose);
}
.vw-fail-note {
  font-size: var(--fs-small);
  color: var(--ink-faint);
  margin-top: 0.2rem;
}
.vw-fail-steps {
  list-style: none;
  margin: 1.1rem auto 0;
  max-width: var(--maxw-prose);
  color: var(--ink-soft);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.vw-fail-steps li { margin-top: 0.2rem; }
.vw-lamps-off {
  display: flex;
  gap: 0.45rem;
  justify-content: center;
  margin-top: 1rem;
}
.vw-lamps-off span {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  border: 2px solid var(--line);
}
.vw-refusal {
  background: var(--refuse-wash);
  border: 1px solid var(--refuse);
  border-radius: var(--radius);
  padding: var(--pad-card);
  width: 100%;
  max-width: var(--maxw-prose);
  margin: 1.2rem auto 0;
  text-align: left;
}
.vw-refusal h4 {
  font-size: var(--fs-h3);
  line-height: 1.3;
  color: var(--ink);
}
.vw-refusal .vw-promise {
  color: var(--refuse);
  font-weight: 700;
  margin-top: 0.6rem;
}

/* ---------- step 7: kicker ---------- */
.vw-kick {
  font-size: var(--fs-hero);
  line-height: 1.1;
  font-weight: 700;
  max-width: 12em;
}
.vw-kick .vw-dot-accent { color: var(--accent); }

/* ---------- hint + rail + nav ---------- */
.vw-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.1rem;
  text-align: center;
  font-size: var(--fs-small);
  color: var(--ink-faint);
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.vw-hint.vw-hide { opacity: 0; }

/* ---- arch-113: the progress rail moves out of the right gutter ----
   The site already runs its own section rail as a vertical dot column on
   the left edge. A second vertical dot column on the right edge meant two
   competing rails on screen at once during the walkthrough, which is a
   large part of why the section read as two things bolted together.

   The beat dots are now a horizontal row along the bottom of the panel.
   Bottom centre rather than under the title: the title is pinned in the
   top left and anything placed beneath it lands on top of the panel
   content, which is exactly the collision this section was suffering
   from. Along the bottom the dots read as slide progress, they never
   fight the heading, and the only vertical rail left on screen is the
   site's own. */
.vw-rail {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 1.5rem;
  display: flex;
  flex-direction: row;
  gap: 0.55rem;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  z-index: 4;
}
.vw-rail li { list-style: none; display: flex; }
.vw-rail li::marker { content: ''; }
.vw-rail-legacy {
  position: absolute;
  right: 0.55rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  list-style: none;
}
.vw-dot {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: var(--radius-chip);
  border: 2px solid var(--ink-faint);
  background: transparent;
  padding: 0;
  transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}
.vw-dot[aria-current="step"] {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.2);
}

.vw-nav {
  display: flex;
  gap: 0.7rem;
  justify-content: center;
  align-items: center;
  padding: 0.4rem 1.25rem 1.6rem;
}
.vw-btn {
  font-size: var(--fs-body);
  font-weight: 700;
  min-height: 48px;
  padding: 0.6rem 1.6rem;
  border-radius: var(--radius);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--paper-raised);
}
.vw-btn:hover:not([disabled]) { background: var(--accent-deep); border-color: var(--accent-deep); } /* arch-58 */
.vw-btn:active { background: var(--accent-deep); border-color: var(--accent-deep); }
.vw-btn[disabled] { opacity: 0.4; cursor: default; }
.vw-btn-ghost {
  background: transparent;
  color: var(--accent-deep);
  border: 1px solid var(--line);
}
.vw-btn-ghost:hover:not([disabled]) { background: var(--accent-wash); border-color: var(--accent); } /* arch-58 */
.vw-dot:hover { border-color: var(--accent); } /* arch-58 */
.vw-step-count {
  font-size: var(--fs-small);
  color: var(--ink-faint);
  min-width: 6.5em;
  text-align: center;
}

.vw-error {
  padding: var(--space-section) 1.25rem;
  text-align: center;
  color: var(--ink-soft);
}

/* ---------- narrow screens (tap mode is chosen by JS < 720px) ---------- */
@media (max-width: 719px) {
  .vw-slate { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; }
  .vw-card { padding: 0.4rem 0.55rem; }
  .vw-card .vw-snip { display: none; }
  .vw-card .vw-title { display: none; }
  .vw-layer { padding: 1.75rem 1rem 2.5rem; }
  .vw-mode-tap .vw-layers { padding-right: 1.6rem; }
  .vw-law { font-size: 1.1rem; }
  .vw-verdict-quote { font-size: 1.18rem; }
}

/* ============================================================
   Reduced motion: same content, clean static stepped layout.
   JS also renders .vw-mode-static; this covers both belts.
   ============================================================ */
.vw-mode-static .vw-track { height: auto !important; }
.vw-mode-static .vw-stage {
  position: static;
  height: auto;
  min-height: 0;
  overflow: visible;
  display: block;
}
.vw-mode-static .vw-layers { position: static; display: block; }
.vw-mode-static .vw-layer {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  padding: calc(var(--space-section) / 2) 1.25rem;
  border-top: 1px solid var(--line);
}
.vw-mode-static .vw-layer:first-child { border-top: 0; }
.vw-mode-static .vw-card,
.vw-mode-static .vw-seq { opacity: 1; transform: none; }
.vw-mode-static .vw-check { opacity: 1; transform: none; }
.vw-mode-static .vw-state { opacity: 1; }
.vw-mode-static .vw-hint,
.vw-mode-static .vw-rail,
.vw-mode-static .vw-nav { display: none; }

@media (prefers-reduced-motion: reduce) {
  #verify-walk *,
  #verify-walk *::before,
  #verify-walk *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================================
   arch-104: spacing repairs after the density pass. APPENDED at
   the end of the cascade; colors/type/space still come only from
   tokens.css custom properties.
   ============================================================ */

/* The slide index number rendered flush against the provision id
   ("1" + "202-2.Chickens.8" read as one number). It is a small
   badge now, visibly separate from the gold id. */
.vw-card .vw-rank {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.25rem; height: 1.25rem; padding: 0 0.3rem;
  border-radius: var(--radius-chip);
  background: var(--paper);
  border: 1px solid var(--line);
  font-size: 0.7rem; font-weight: 700;
  color: var(--ink-faint);
  margin-right: 0.5em;
  vertical-align: 0.12em;
}

/* The "keep an eye on this one" tag sat on the card's bottom border;
   the card gains padding and the tag its own dashed separator. */
.vw-card { padding: 0.6rem 0.75rem 0.65rem; }
.vw-card.vw-win .vw-tag {
  margin-top: 0.4rem;
  padding-top: 0.35rem;
  border-top: 1px dashed var(--accent);
}

/* The Pass / Fail word crowded the check row's top-right corner. */
/* arch-113: the five checks are the tallest layer in the walkthrough.
   With every beat now a full panel, this one has to fit between the
   running header and the dot row on a 900px screen, which it missed by
   about 20px. Trimming the card padding buys that back without touching
   the type size, so nothing gets harder to read. */
.vw-check { padding: 0.6rem 1.15rem 0.6rem 1rem; }
.vw-state { margin-top: 0.3rem; margin-left: 0.5rem; }

/* Scroll mode side padding. This originally existed to keep the
   retrieval slate from running under a right-edge dot rail. The rail is
   along the bottom now, but the padding stays: it is what keeps the wide
   layers off both screen edges. */
.vw-mode-scroll .vw-layer { padding-left: 2.6rem; padding-right: 2.6rem; }

/* Narrow screens: restate the tighter card pad from the 719px block
   above (this appended block would otherwise override it), with the
   same bottom clearance for the tag. */
@media (max-width: 719px) {
  .vw-card { padding: 0.5rem 0.6rem 0.55rem; }
}

/* Narrow scroll mode (720 to 899): with the module's real padding
   restored, the two-line snippets push the sixteen-card slate past the
   pinned 100dvh stage. The snippets bow out exactly as they already do
   below 720; rank, id and the winner tag stay. */
@media (min-width: 720px) and (max-width: 899px) {
  .vw-card .vw-snip { display: none; }
}

/* ---- arch-113: short viewports --------------------------------------
   Every beat is a full panel now, so the tallest layer has to survive the
   shortest screen rather than just a roomy desktop. The five checks need
   about 654px at default spacing and a 1366x768 laptop leaves closer to
   570px between the running header and the dot row.

   First attempt was to shave padding element by element. That did not
   converge, and it was starting to cost real information (the C1..C5
   codes were the next thing to go). Scaling the layer proportionally is
   both smaller and more honest: the composition a reader gets on a
   laptop is the same one, slightly smaller, with nothing removed.

   zoom rather than transform: zoom is a real layout scale, so text stays
   crisp and the box genuinely occupies less height. transform:scale()
   would leave the original height reserved and the overflow would still
   run under the dots. Keyed to viewport HEIGHT, because height is the
   constraint that was actually being violated. */
@media (max-height: 900px) {
  .vw-mode-scroll .vw-layers { zoom: 0.92; }
  .vw-rail { bottom: 1.2rem; }
}
@media (max-height: 820px) {
  .vw-mode-scroll .vw-layers { zoom: 0.84; }
}
@media (max-height: 760px) {
  .vw-mode-scroll .vw-layers { zoom: 0.78; }
}

/* ============================================================
   arch-116: the reader takes the verbatim check

   Up to here the reader watches verification happen. On one beat, the
   one where C3 asks whether the quote is letter for letter what the law
   says, they do it instead. Two lines of text, two buttons, and the
   recorded result held back until they answer or move on.

   C3 is the check that can be handed over, because its whole evidence is
   two short strings. C1 and C2 rest on a corpus hash and C5 on the
   claim's logic; neither fits on a screen as something a reader can
   settle in five seconds. C3 does.

   The card only exists on the C3 beat: display:none is the resting
   state, so on the other four beats of this same layer the buttons are
   not merely invisible, they are not focusable, which matters because
   the layer they live in is aria-hidden on every beat that is not its
   own.
   ============================================================ */
.vw-judge {
  display: none;
  width: 100%;
  max-width: var(--maxw-prose);
  margin: 0.85rem auto 0;
  text-align: left;
  background: var(--paper-raised);
  border: 1.5px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 0.8rem 1rem 0.85rem;
}
.vw-layer.is-judging .vw-judge { display: block; }
.vw-mode-static .vw-judge { display: none; }

.vw-judge-eyebrow {
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.vw-judge-lead {
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--ink-soft);
  margin-top: 0.25rem;
}
.vw-judge-lead[hidden],
.vw-judge-eyebrow[hidden],
.vw-judge-acts[hidden] { display: none; }

/* The two texts sit side by side because that is the comparison. They
   are NOT wrapped in quotation marks anywhere in this card: the reader
   is counting characters, and decorative punctuation would be two more
   characters to discount. */
.vw-judge-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  margin-top: 0.6rem;
}
.vw-judge-side {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.5rem 0.6rem;
  min-width: 0;
}
.vw-judge-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.vw-judge-text {
  font-family: var(--font-law);
  font-size: 0.98rem;
  line-height: 1.4;
  margin-top: 0.25rem;
  overflow-wrap: anywhere;
}
/* section and provision id, spaced the way .vw-cite spaces them in the
   verdict card, so "Sec. 202-2" and "202-2.Chickens.8" do not read as one
   run-on string */
.vw-judge-src {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.7rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gold);
  margin-top: 0.3rem;
  overflow-wrap: anywhere;
}

.vw-judge-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.7rem;
}
.vw-judge-btn {
  font-size: var(--fs-small);
  min-height: 44px;
  padding: 0.5rem 1.05rem;
}
.vw-judge-out:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.vw-judge-verdict {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.35;
  margin-top: 0.7rem;
}
.vw-judge-badge {
  flex: none;
  border-radius: var(--radius-chip);
  padding: 0.1rem 0.6rem;
  font-size: var(--fs-small);
}
.vw-judge-verdict[data-pass="true"] .vw-judge-badge {
  background: var(--accent-wash);
  color: var(--accent-deep);
}
.vw-judge-verdict[data-pass="false"] .vw-judge-badge {
  background: var(--refuse-wash);
  color: var(--refuse);
}
.vw-judge-agree {
  font-size: var(--fs-small);
  font-weight: 700;
  margin-top: 0.35rem;
}
.vw-judge-note {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ink-soft);
  margin-top: 0.3rem;
}
.vw-judge-lesson {
  font-size: var(--fs-small);
  line-height: 1.5;
  font-weight: 700;
  color: var(--accent-deep);
  margin-top: 0.35rem;
}
/* Animating FROM a keyframe, never TO one. The reduced-motion block
   above kills animation outright inside this section, and a rule that
   parked the result at opacity 0 and animated it up would leave those
   readers staring at nothing. This way, killing the animation leaves the
   plain, fully visible state change, which is the whole requirement. */
.vw-judge-out > * { animation: vw-judge-in 0.45s cubic-bezier(0.22, 0.61, 0.36, 1); }
@keyframes vw-judge-in { from { opacity: 0; transform: translateY(6px); } }

/* The C3 row while its question is open: lit, current, and deliberately
   unresolved. The lamp shows a question mark instead of a tick and the
   Pass word is held, because the reader is being asked for that word. */
.vw-check.is-asking { border-color: var(--accent); }
.vw-check.is-asking .vw-state { opacity: 0; }
.vw-check.is-asking[data-pass="true"] .vw-lamp,
.vw-check.is-asking[data-pass="false"] .vw-lamp {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent-deep);
  font-weight: 700;
}
.vw-check.is-asking[data-pass="true"] .vw-lamp::after,
.vw-check.is-asking[data-pass="false"] .vw-lamp::after { content: "?"; }

/* Room for one more idea, for exactly one beat. This panel was already
   the tallest in the walkthrough (arch-113 had to scale it to survive a
   1366x768 laptop), and the question adds a card to it. So on the C3
   beat the scene-setting title and line step aside, and the four checks
   that are not the one under discussion show their names only. Nothing
   leaves the sequence: the full rows are back on the very next beat, and
   the C3 row itself keeps every line it had. */
.vw-layer.is-judging > .vw-h,
.vw-layer.is-judging > .vw-sub { display: none; }
.vw-layer.is-judging .vw-check:not(.vw-judged) .vw-check-catch { display: none; }
/* The C1..C5 codes go for this one beat on every row including C3, because
   the card underneath prints the section and the provision id already. */
.vw-layer.is-judging .vw-check-code { display: none; }
.vw-layer.is-judging .vw-checklist { gap: 0.35rem; margin-top: 0; }
.vw-layer.is-judging .vw-check { padding-top: 0.45rem; padding-bottom: 0.45rem; }

/* The shortest laptops arch-113 supports, in the harder of the two
   languages. The Spanish capture quotes a longer provision (the Christmas
   tree window, 202-3.16) and it wraps to twice the lines the chicken one
   does, so the panel that has to survive here is the answered card in
   Spanish, not the asking card in English. Same treatment the rest of the
   layer already gets at these heights: tighter, nothing removed. */
@media (max-height: 820px) {
  .vw-judge { padding: 0.6rem 0.8rem 0.65rem; }
  .vw-judge-side { padding: 0.4rem 0.5rem; }
  .vw-judge-pair { gap: 0.45rem; margin-top: 0.45rem; }
  .vw-judge-text { font-size: 0.92rem; line-height: 1.35; }
  .vw-judge-verdict { font-size: var(--fs-small); margin-top: 0.55rem; }
  .vw-judge-note,
  .vw-judge-lesson { line-height: 1.42; }
}

@media (max-width: 719px) {
  .vw-judge-pair { grid-template-columns: minmax(0, 1fr); }
  .vw-judge-acts { flex-direction: column; align-items: stretch; }
}