/* /demos/judge-lab ----------------------------------------------------------
   A scorecard, a per-cell results table, and the failure breakdown of a parse
   contract that discarded four fifths of one judge's replies. Every color is an
   existing estate token — no new hex — so both themes follow without a second
   palette.

   THE SCROLL WRAPPERS ARE .table-responsive AND CARRY THEIR a11y ATTRIBUTES IN
   THE MARKUP, per the house rule css.css states at its .zk-table-wrap block and
   responsive.spec.js enforces since PF-S267: tabindex="0", role="region" and an
   aria-label. Nothing here re-declares the scroll behavior — the shared class
   already has it, with the edge cue and the focus ring.

   The SCORECARD is not one of them. It stacks (.zk-stack), because its cells are
   whole predictions rather than numbers, and a sentence is the one thing
   horizontal scrolling cannot rescue. That is the same split bench-lab's page
   makes between its scoreboard and its prediction table. */

.jl-cells .jl-num,
.jl-fail .jl-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.jl-pred .jl-verdict {
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* A ROW WHOSE FIGURES ARE MOSTLY ABSENT, marked as such rather than dropped.
   Two of the four cells rest on a fifth of their calls, and removing them would
   delete the page's central finding in the name of a tidy table. The muting is
   paired with a caveat paragraph, because color alone is not a claim anyone can
   read aloud — the same reasoning bench-lab's .bl-suspect carries. */
.jl-cells .jl-lost th[scope="row"],
.jl-cells .jl-lost td {
  color: var(--ink-muted);
}

.jl-cells .jl-suspect {
  font-style: italic;
}

/* The amendment note and the via-artifact marker are SECOND-ORDER text inside a
   cell — each qualifies the value beside it rather than replacing it, so both
   render as their own block at a smaller size instead of running on. */
.jl-pred .jl-amendment,
.jl-pred .jl-via {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.9em;
  font-weight: 400;
  color: var(--ink-muted);
}

.jl-pred .jl-via::before {
  content: "— ";
}

.jl-caveat {
  border-left: 3px solid var(--accent);
  padding-left: 0.9rem;
  color: var(--ink-muted);
}

/* The sentence the page turns on. It gets the same left rule as the caveat but
   keeps full-strength ink: it is the finding, not a qualification of one. */
.jl-centerpiece {
  border-left: 3px solid var(--accent);
  padding-left: 0.9rem;
}

/* A verbatim record from the artifact. It wraps rather than scrolling, because
   it is four short lines and a horizontal scrollbar on a code block this size is
   more friction than the wrapping costs. */
.jl-code {
  margin: 1rem 0;
  padding: 0.9rem 1rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background: var(--surface-2);
  overflow-x: auto;
}

.jl-code code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 0.9em;
}