/* The Proving Ground (/labs/proving-ground).
   Part of the /labs stylesheet, split out of one 3,400-line labs.css.

   THE NUMBER IN THE FILENAME IS LOAD-BEARING. stylesheet_link_tag :app
   collects every stylesheet under app/assets and serves them sorted by
   path, so the ordinal prefix is the only thing holding the cascade order
   these rules were written in — and several classes are shared across labs
   (.lp-head, .lab-entry, .lab-block, .dt-table). Renaming a file without
   renumbering it, or inserting one out of sequence, reorders the cascade
   silently.

   Nothing in this comment may contain the two characters that close a CSS
   comment. The first version of it wrote a shell glob here, which closed
   the comment early; the leaked text then parsed as a selector and ate the
   first real rule in all nine files. There is a test for that now.
   ============================================================ */

/* ============================================================
   The Proving Ground (/labs/proving-ground) — agent-eval matrix
   + bout detail. Reuses .lp-page/.lp-head/.lp-title/.lp-subtitle,
   .eyebrow, .lab-block-label, .dt-table/.dt-scroll, and .sl-empty
   for section rhythm and tables; only genuinely new components
   (verdict cells/chips, transcript turns, persona card) get their
   own .pg- classes.
   ============================================================ */

/* Screen-reader-only. Scoped to pg- rather than claiming a generic utility name
   in a stylesheet every page of the site loads. */
.pg-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Section rhythm — a hairline rule and generous top space per section, matching
   the Observatory's and Monday Brief's treatment of the same shape. */
.pg-sec {
  margin-top: clamp(56px, 6vw, 72px);
  border-top: 1px solid var(--line);
  padding-top: clamp(24px, 3vw, 32px);
}
.pg-sec-lead { margin-top: 0; border-top: none; padding-top: 0; }

/* In-page anchor nav — plain mono links, same wayfinding tone as the
   eyebrow/lab-block-label mono voice elsewhere on the page. No sticky
   positioning, consistent with the site's minimal chrome. */
.pg-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px clamp(16px, 2.5vw, 28px);
  margin: clamp(24px, 3vw, 32px) 0 clamp(40px, 5vw, 56px);
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}
.pg-nav a {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-decoration: none;
}
.pg-nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---- 01 · explanatory prose ---- */
/* Runs the full width of the wrap rather than sitting in a narrow measure —
   the section heading and hint above it already span the container, and a
   short column under them read as unfinished. */
.pg-plain p {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.72;
  color: var(--ink-muted);
  margin: 16px 0 0;
}
.pg-plain p:first-child { margin-top: 4px; }
.pg-plain code { font-family: var(--font-mono); font-size: 0.86em; color: var(--ink); }

/* The five steps. Numbered markers are used here and nowhere else on the page,
   because this is the one part of the content that genuinely is a sequence —
   five things that happen in that order, every time. */
/* auto-fit rather than a hardcoded column count, so adding or removing a step
   doesn't mean editing the grid and three media queries to match. */
.pg-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  list-style: none;
  margin: 0;
  padding: 0;
}
.pg-steps-label { margin-top: clamp(30px, 4vw, 40px); }

/* The agent's three tools, as a numbered list — <ol> supplies the numerals, so
   they can't drift out of step with the prose the way hand-typed ones do.
   list-style has to be set back explicitly: Tailwind's Preflight strips it from
   every ol/ul, so a bare <ol> renders unnumbered. */
.pg-tool-list {
  list-style: decimal;
  margin: 12px 0 0;
  padding-left: 26px;
  max-width: 70ch;
}
.pg-tool-list::marker { color: var(--ink-faint); }
.pg-tool-list li {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.72;
  color: var(--ink-muted);
}

/* Full width, matching .pg-plain and the table it introduces — a short column
   under a full-width label reads as unfinished. */
.pg-sees-lead {
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-muted);
  margin: 0 0 16px;
}
.pg-sees-lead code { font-family: var(--font-mono); font-size: 0.87em; color: var(--ink); }
.pg-step { background: var(--bg); padding: 18px 18px 20px; }
.pg-step-n {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}
.pg-step h3 {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.4;
  margin: 0 0 8px;
}
.pg-step p { font-family: var(--font-sans); font-size: 13.5px; line-height: 1.6; color: var(--ink-faint); }
.pg-step p b { color: var(--ink); font-weight: 500; }
.pg-steps-foot {
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--ink-faint);
  margin: 14px 0 0;
}
/* The hand-off down to §07. Needs to read as a door at this size and weight —
   inheriting the muted grey made it invisible against the sentence around it. */
.pg-steps-foot a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line);
}
.pg-steps-foot a:hover { text-decoration-color: var(--ink); }

/* Who-can-see-what. The asymmetry is the single fact the rest of the page
   depends on, so it gets a table rather than a paragraph — the agent's column
   is the only one with gaps in it, and that reads in about two seconds. */
.pg-sees-wrap { overflow-x: auto; margin-top: 12px; }
.pg-sees { border-collapse: collapse; width: 100%; min-width: 560px; }
.pg-sees th,
.pg-sees td {
  border-bottom: 1px solid var(--line-soft);
  padding: 12px 14px;
  text-align: center;
}
.pg-sees thead th {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  font-weight: 400;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  vertical-align: bottom;
}
.pg-sees thead th small {
  display: block;
  font-family: var(--font-sans);
  font-size: 11.5px;
  letter-spacing: 0;
  color: var(--ink-faint);
  margin-top: 3px;
}
.pg-sees th.rowh {
  text-align: left;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--ink-muted);
  width: 34%;
}
.pg-sees tbody tr:last-child th,
.pg-sees tbody tr:last-child td { border-bottom: 0; }
/* Same pill component as .pg-cell — a yes/no here is the same kind of fact as a
   pass/fail, so it gets the same shape and palette. */
.pg-mk {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  padding: 3px 11px;
  border-radius: 9999px;
  white-space: nowrap;
}
.pg-mk-y { background: #DCFFDC; color: #207C36; }
.pg-mk-n { background: #FFDCDC; color: #D3686D; }

/* The asymmetry callout — same emerald-tinted treatment as the bout page's
   hidden-card panel (.pg-persona-hidden), because it's making the same point. */
.pg-asym {
  margin-top: 20px;
  padding: 16px 18px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, #047857 30%, var(--line-soft));
  background: color-mix(in srgb, #047857 4%, var(--bg));
}
.pg-asym-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #047857;
  margin-bottom: 8px;
}
.pg-asym p { font-family: var(--font-sans); font-size: 14.5px; line-height: 1.6; color: var(--ink); margin: 0; }

/* Amber variant, for the judge's verbatim instructions. A true yellow-gold rather
   than the site's #9A3412 "yellow" ink, which is dark enough to read as burnt
   orange in a large tinted panel. Kept at 700-level so the label still clears
   contrast on the pale wash behind it. */
.pg-asym-amber {
  border-color: color-mix(in srgb, #A16207 28%, var(--line-soft));
  background: color-mix(in srgb, #EAB308 8%, var(--bg));
}
.pg-asym-amber .pg-asym-label { color: #A16207; }
/* The prompt is quoted source, so it keeps its mono voice inside the callout. */
.pg-asym-amber .pg-system-prompt { margin-top: 0; }

/* Glossary */
.pg-terms {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px clamp(24px, 3vw, 40px);
  margin: 4px 0 0;
}
.pg-term { border-top: 1px solid var(--line-soft); padding-top: 11px; }
.pg-term dt { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink); }
.pg-term dd { font-family: var(--font-sans); font-size: 13.5px; color: var(--ink-faint); line-height: 1.55; margin: 4px 0 0; }

/* ---- 02 · the exhibit ---- */
.pg-exhibit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(24px, 3vw, 44px);
  margin-top: clamp(26px, 3vw, 34px);
}
.pg-exhibit-main { min-width: 0; }
.pg-exhibit-head {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
}
.pg-verdicts { align-self: start; min-width: 0; }
.pg-verdict-note { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 18px; }
/* The first note sits directly under .pg-exhibit-head, which already draws a rule —
   its own top border would stack a second line right beneath that one. */
.pg-exhibit-head + .pg-verdict-note { border-top: 0; padding-top: 0; }
.pg-verdict-note-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.pg-verdict-note p { font-family: var(--font-sans); font-size: 13px; line-height: 1.55; color: var(--ink-faint); }
.pg-verdict-crit { font-family: var(--font-mono); font-size: 11px; color: var(--ink); }
.pg-verdict-aside {
  border-top: 1px solid var(--line);
  padding-top: 10px;
  margin-top: 20px;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-muted);
}
.pg-verdict-aside b {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #047857;
  margin-bottom: 6px;
}

/* Verdict marks — "PASS"/"FAIL" text on a pill: pale wash background, deep accent
   text, fully-rounded. One consistent "status pill" component used everywhere a
   pass/fail-shaped fact appears on this page and the bout page. */
.pg-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 9999px;
  text-align: center;
  white-space: nowrap;
}
a.pg-cell { text-decoration: none; }
.pg-cell-pass { background: #DCFFDC; color: #207C36; }
.pg-cell-fail { background: #FFDCDC; color: #D3686D; }

/* ---- doors into a bout ----
   A bout is the page's deepest content and used to be reachable only through two
   near-invisible links. These are the affordances that say so out loud. */

/* The standing invitation under the exhibit: a bordered block, not a faint line of
   mono, because it is the one place a reader is already primed to want the rest. */
.pg-open-cta {
  display: block;
  margin-top: 20px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}
.pg-open-cta:hover { border-color: var(--ink); background: rgba(0,0,0,0.02); }
.pg-open-cta-main {
  display: block;
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
}
.pg-open-cta-sub {
  display: block;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink-faint);
  margin-top: 3px;
}

/* The repeated door: one per grid row, one per failed verdict. Underlined at rest —
   these have to read as links at a glance, in a dense table. */
.pg-open-link {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.pg-open-link:hover { color: var(--ink); }
.pg-stream-item .pg-open-link { display: inline-block; margin-top: 8px; }

/* ---- 03 · what's being tested ---- */
.pg-method-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, 3vw, 40px);
  margin-top: 6px;
}
.pg-method-grid p {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-muted);
  margin: 12px 0 0;
}
.pg-method-grid p.pg-caveat { font-size: 13.5px; color: var(--ink-faint); }

.pg-cast-sub { margin-top: clamp(32px, 4vw, 44px); }
.pg-cast-block-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 14px;
}
.pg-cast-item-name {
  display: block;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink);
}
.pg-cast-item-desc {
  display: block;
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--ink-faint);
  margin-top: 3px;
  line-height: 1.5;
}

/* Personas and tools: wrapping card rosters, not tall single-column lists — a
   fixed cast of short entries reads better scanned across than down. */
.pg-persona-grid,
.pg-tool-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  list-style: none;
  margin: 0;
  padding: 0;
}
/* A class, not an inline style: an inline grid-template-columns would outrank the
   media queries below and never collapse on a narrow screen. */
.pg-tool-cards-4 { grid-template-columns: repeat(4, 1fr); }
.pg-persona-card,
.pg-tool-card { background: var(--bg); padding: 16px 18px; }
.pg-persona-card .pg-persona-emoji { display: block; margin-bottom: 6px; font-size: 18px; }
.pg-tool-kb-detail {
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink-faint);
  line-height: 1.55;
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}

.pg-criteria-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px clamp(24px, 3vw, 40px);
  margin: 0;
}
.pg-criteria-item { border-top: 1px solid var(--line-soft); padding-top: 12px; }
.pg-criteria-item dt { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink); }
.pg-criteria-item dd {
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--ink-faint);
  line-height: 1.55;
  margin: 4px 0 0;
}

/* ---- 01 · the result ---- */

/* The one sentence a reader who never scrolls should leave with. Serif, because
   this is the page's anchor statement and the serif is its human voice; the
   emphasis takes the same green .pg-arc-to.is-better already uses for a movement
   in the right direction, so no new colour enters the page. */
.pg-verdict-line {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(24px, 3.2vw, 34px);
  line-height: 1.22;
  letter-spacing: -0.01em;
  margin: 6px 0 0;
}
/* One sentence per line, each wide enough not to wrap on its own — the measure
   has to fit the longer of the two, not the paragraph as a whole. Below that
   width each clause still wraps independently rather than reflowing into one
   run-on block. */
.pg-verdict-line span { display: block; max-width: 42ch; }
.pg-verdict-line b { font-weight: 400; color: #207C36; }
/* Full width of the wrap, not a narrow measure — same reasoning as .pg-plain:
   the stats grid directly below it spans the container, and a short column
   floating above them reads as unfinished. */
.pg-verdict-sub {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-faint);
  margin: 14px 0 clamp(24px, 3vw, 32px);
}

/* ---- 04 · the results ---- */

/* Headline movements. The starting figure is small and grey, the current one is
   large and set in the serif — the page's "human voice" face, used here because
   this is the number a person is meant to take away. */
.pg-arc {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  margin-top: 4px;
}
.pg-arc-stat { background: var(--bg); padding: 18px 20px 20px; }
.pg-arc-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 12px;
}
.pg-arc-move { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.pg-arc-from {
  font-family: var(--font-mono);
  font-size: 17px;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.pg-arc-arrow { color: var(--ink-faint); font-size: 13px; }
.pg-arc-to {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.pg-arc-to.is-better { color: #207C36; }
.pg-arc-caption {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-faint);
  margin: 10px 0 0;
}
.pg-arc-caption b { color: var(--ink); font-weight: 600; }

/* The strip: one row per version, every verdict from its latest run, grouped six
   to a persona so a column position means the same rule in every row. Passes are
   held to a half-strength tint — 144 cells at full wash reads as a field of green
   and buries the thing the chart is about, which is the failures thinning out. */
.pg-strip { margin-top: clamp(30px, 4vw, 40px); }
.pg-strip-head,
.pg-strip-row {
  display: grid;
  grid-template-columns: 132px 1fr 96px;
  gap: 14px;
  align-items: center;
}
.pg-strip-head { padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.pg-strip-row { padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.pg-strip-cap {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.pg-strip-cap-r { text-align: right; }
.pg-strip-personas,
.pg-strip-groups { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.pg-strip-personas span { text-align: center; font-size: 13px; line-height: 1; }
/* Each block is a link to that customer's conversation. The hover/focus ring sits on
   the block rather than the square, so it reads as "open this conversation" rather
   than "open this verdict" — and it's a ring, not a colour change, because the fills
   already encode pass/fail and a second colour signal would fight them. */
.pg-strip-group {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
  padding: 3px;
  margin: -3px;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.12s, box-shadow 0.12s;
}
a.pg-strip-group:hover {
  background: rgba(0,0,0,0.05);
  box-shadow: 0 0 0 1px var(--line);
}
a.pg-strip-group:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
/* 24px clears the WCAG 2.2 AA minimum target size; the blocks are wide, it was only
   the height that fell short. */
.pg-strip-cell { height: 24px; border-radius: 3px; }
.pg-strip-cell-pass { background: color-mix(in srgb, #DCFFDC 52%, #FFFFFF); }
.pg-strip-cell-fail { background: #FFDCDC; }
.pg-strip-cell-missing { background: repeating-linear-gradient(45deg, var(--line-soft) 0 2px, transparent 2px 4px); }
.pg-strip-name { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink); }
.pg-strip-count {
  font-family: var(--font-mono);
  font-size: 11.5px;
  text-align: right;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.pg-strip-count b { color: #D3686D; font-weight: 500; }
.pg-strip-note {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-faint);
  margin: 14px 0 0;
  line-height: 1.6;
  max-width: 78ch;
}

/* Per-version panels — a vertical numbered timeline, because these are an ordinal
   history (v1 -> v2 -> v3) with long-form rationale each, and a connecting line
   communicates "iteration" directly. */
.pg-acts { list-style: none; margin: clamp(44px, 5vw, 60px) 0 0; padding: 0; }
.pg-act {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 18px;
  position: relative;
  padding-bottom: clamp(34px, 4vw, 46px);
}
.pg-act:last-child { padding-bottom: 0; }
.pg-act::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 34px;
  bottom: 0;
  width: 1px;
  background: var(--line-soft);
}
.pg-act:last-child::before { display: none; }
.pg-act-marker {
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-faint);
  background: var(--bg);
  z-index: 1;
}
.pg-act.is-current .pg-act-marker { border-color: var(--ink); color: var(--ink); }
.pg-act-body { min-width: 0; }
.pg-act-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding-top: 5px; }
.pg-act-name { font-family: var(--font-mono); font-size: 13.5px; font-weight: 400; color: var(--ink); margin: 0; }
.pg-act-tag {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border: 1px solid var(--line);
  border-radius: 9999px;
  padding: 2px 8px;
}
.pg-perf-stats { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 12px; }
.pg-perf-stat { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-faint); }
.pg-perf-stat b { color: var(--ink); font-weight: 500; }
.pg-perf-move { font-weight: 500; }
.pg-perf-move.is-better { color: #207C36; }
.pg-perf-move.is-worse { color: #D3686D; }

/* Full width, matching the rest of the page — a short column inside an otherwise
   full-width panel reads as unfinished. */
.pg-act-rule {
  background: rgba(0,0,0,0.03);
  border-left: 2px solid var(--line);
  padding: 13px 16px;
  margin-top: 16px;
  border-radius: 0 8px 8px 0;
}
.pg-act-rule-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 8px;
}
/* The legend sits inline in the box's label, which is uppercase and letter-spaced —
   both have to be reset or "added / removed" shouts alongside it. */
.pg-act-rule-label .pg-diff-legend {
  margin: 0 0 0 14px;
  text-transform: none;
  letter-spacing: 0.02em;
}

.pg-act-notes { margin-top: 16px; }
.pg-act-notes p {
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-muted);
  margin: 0;
}
.pg-act-notes p + p,
.pg-act-notes p + ul,
.pg-act-notes ul + p { margin-top: 10px; }
/* list-style has to be set back explicitly — Tailwind's Preflight strips it from
   every ol/ul, so these rendered as unmarked indented lines. Items that carry an
   emoji use it as their marker instead of doubling up with a disc. */
.pg-notes-list { list-style: disc; margin: 10px 0 0; padding: 0 0 0 20px; }
.pg-notes-list li {
  font-family: var(--font-sans);
  font-size: 14.5px;
  color: var(--ink-muted);
  margin: 7px 0;
  line-height: 1.55;
}
.pg-notes-list li::marker { color: var(--ink-faint); }
.pg-notes-list li.has-icon { list-style: none; margin-left: -20px; }
.pg-note-icon { display: inline-block; width: 20px; }
.pg-notes-list li b { color: var(--ink); font-weight: 600; }

/* System-prompt diff — git-style added/removed highlighting versus the previous
   version. Two tones per color: pale for the line background, deep only for
   something sitting ON TOP of that same-hue background (the +/- marker, the
   strikethrough rule). Color is never the only signal — the +/- marker carries the
   same information. */
.pg-diff-legend {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 14px 0 6px;
}
.pg-diff-swatch {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  margin-left: 4px;
}
.pg-diff-swatch-added { background: #207C36; }
.pg-diff-swatch-removed { background: #D3686D; }
.pg-diff-added {
  background: #DCFFDC;
  padding: 4px 6px;
  margin-left: -6px;
  margin-right: -6px;
  border-radius: 3px;
}
.pg-diff-removed {
  background: #FFDCDC;
  color: var(--ink-faint);
  text-decoration: line-through;
  text-decoration-color: #D3686D;
  padding: 4px 6px;
  margin-left: -6px;
  margin-right: -6px;
  border-radius: 3px;
}
.pg-diff-marker { font-weight: 700; text-decoration: none; margin-right: 4px; display: inline-block; }
.pg-diff-added .pg-diff-marker { color: #207C36; }
.pg-diff-removed .pg-diff-marker { color: #D3686D; }

.pg-system-prompt { margin: 8px 0 0; }
.pg-system-prompt p {
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--ink-muted);
  word-break: break-word;
  margin: 0;
}
.pg-system-prompt p + p { margin-top: 12px; }

/* <details> disclosure for reference-only content (full prompts) — same label look
   as everywhere else, just made a focusable/clickable summary. */
.pg-details { margin-top: 24px; }
.pg-details summary { cursor: pointer; list-style: none; }
.pg-details summary::-webkit-details-marker { display: none; }
.pg-details summary::before {
  content: "+";
  display: inline-block;
  width: 1em;
  color: var(--ink-faint);
}
.pg-details[open] summary::before { content: "\2212"; }

/* Criterion lanes. The plot is wide and short and the SVG stretches to fill it
   (preserveAspectRatio="none"), so every stroke uses non-scaling-stroke and the
   point markers are round-capped zero-length lines — a <circle> would render as an
   ellipse. Axis is truncated; Labs::ProvingGroundHelper#lane_domain guarantees no line can bottom
   out, and the caption prints the range. */
.pg-lanes { margin-top: clamp(30px, 4vw, 40px); }
.pg-lane-axis,
.pg-lane {
  display: grid;
  grid-template-columns: 152px 1fr 168px;
  align-items: center;
  gap: 0 4px;
}
.pg-lane-axis { padding-bottom: 7px; border-bottom: 1px solid var(--line); }
.pg-lane { padding: 4px 0; border-bottom: 1px solid var(--line-soft); }
.pg-lane-cap {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.pg-lane-cap-r { text-align: right; }
.pg-lane-ticks {
  display: flex;
  justify-content: space-between;
  padding: 0 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}
/* overflow-wrap: anywhere because criterion names are single unbroken tokens —
   "no_hallucination" is wider than this column on a phone and would otherwise
   spill over the trend line rather than wrapping. */
.pg-lane-name {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink);
  overflow-wrap: anywhere;
}
/* Clamped to two lines so every lane is the same height and the trend lines stay
   on a common grid — the full rubric text is a couple of sections up, and the
   title attribute carries it here. */
.pg-lane-name span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-faint);
  margin-top: 2px;
  line-height: 1.4;
}
.pg-lane-plot svg { display: block; width: 100%; height: 46px; }
.pg-lane-area { fill: #207C36; opacity: 0.10; }
.pg-lane-base {
  stroke: rgba(0,0,0,0.22);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  vector-effect: non-scaling-stroke;
}
.pg-lane-line {
  fill: none;
  stroke: #207C36;
  stroke-width: 1.8;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.pg-lane-dot {
  stroke: #207C36;
  stroke-width: 4.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  opacity: 0.7;
}
.pg-lane-dot.is-last { stroke-width: 7; opacity: 1; }
.pg-lane.is-down .pg-lane-area { fill: #D3686D; }
.pg-lane.is-down .pg-lane-line,
.pg-lane.is-down .pg-lane-dot { stroke: #D3686D; }
.pg-lane-read { display: flex; align-items: baseline; justify-content: flex-end; gap: 10px; }
.pg-lane-pct { font-family: var(--font-mono); font-size: 15px; font-variant-numeric: tabular-nums; }
.pg-lane.is-down .pg-lane-pct { color: #D3686D; }
.pg-lane-delta {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 9999px;
  white-space: nowrap;
}
.pg-lane-delta-up { background: #DCFFDC; color: #207C36; }
.pg-lane-delta-down { background: #FFDCDC; color: #D3686D; }
.pg-lane-delta-flat { background: rgba(0,0,0,0.05); color: var(--ink-faint); }
.pg-lane-note {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-faint);
  margin: 14px 0 0;
  line-height: 1.6;
  max-width: 78ch;
}

/* ---- 05 · every verdict ---- */
.pg-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 22px;
  border-bottom: 1px solid var(--line);
  margin-top: 4px;
}
.pg-tabs button {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  padding: 0 0 9px;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  cursor: pointer;
}
.pg-tabs button:hover { color: var(--ink); }
.pg-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.pg-tabs button i { font-style: normal; color: var(--ink-faint); }

.pg-grid-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: clamp(24px, 3vw, 40px);
  margin-top: 20px;
}
/* contain: paint alongside the scroller. The table's min-width (520px below)
   otherwise leaks into the *document's* scrollable overflow even though this
   box clips it correctly — so below about 540px the whole page gained a
   sideways scroll while this element itself measured and scrolled perfectly.
   Containment stops that contribution without changing the layout: the table
   still scrolls inside here exactly as before. Verified by measurement — the
   obvious candidates (min-width: 0 on the wrap, width: max-content on the
   table, contain: inline-size) all left the page overflow untouched. */
.pg-matrix-wrap { overflow-x: auto; contain: paint; }
.pg-matrix { border-collapse: collapse; width: 100%; min-width: 520px; }
.pg-matrix thead th {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  font-weight: 400;
  color: var(--ink-faint);
  text-align: center;
  padding: 0 4px 9px;
  white-space: nowrap;
}
.pg-matrix thead th.l { text-align: left; padding-left: 0; }
.pg-matrix tbody th {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  text-align: left;
  color: var(--ink);
  white-space: nowrap;
  padding: 4px 14px 4px 0;
}
.pg-matrix tbody th .pg-persona-emoji { margin-right: 8px; }
/* Underlined at rest, not a hairline: a persona name is a door to that whole
   conversation, and nothing else on the row says so. */
.pg-matrix-link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
}
.pg-matrix-link:hover { text-decoration-color: var(--ink); }
.pg-matrix th.pg-matrix-open,
.pg-matrix td.pg-matrix-open { text-align: right; padding-left: 14px; white-space: nowrap; }
.pg-matrix td { padding: 3px 2px; text-align: center; }
/* Each cell links to that row's bout — the same destination as the persona name and the
   trailing "Read →", so these carry tabindex="-1" in the markup rather than adding six
   redundant tab stops per row. */
.pg-matrix-cell { display: block; width: 100%; height: 26px; border-radius: 5px; }
a.pg-matrix-cell { cursor: pointer; transition: box-shadow 0.12s; }
a.pg-matrix-cell:hover { box-shadow: 0 0 0 1px var(--ink); }
.pg-matrix-cell-pass { background: #DCFFDC; }
.pg-matrix-cell-fail { background: #FFDCDC; }
.pg-matrix-cell-missing { background: repeating-linear-gradient(45deg, var(--line-soft) 0 2px, transparent 2px 4px); }
.pg-matrix-legend {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-faint);
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}
.pg-matrix-legend i {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 3px;
  vertical-align: -1px;
  margin-right: 6px;
}

.pg-stream { align-self: start; min-width: 0; }
.pg-stream-h {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
}
.pg-stream-item { padding: 13px 0; border-bottom: 1px solid var(--line-soft); }
.pg-stream-item-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 5px; }
.pg-stream-persona { font-family: var(--font-sans); font-size: 12.5px; color: var(--ink-faint); }
.pg-stream-item p { font-family: var(--font-sans); font-size: 13px; line-height: 1.55; color: var(--ink-muted); }
.pg-stream-empty { font-family: var(--font-sans); font-size: 13px; color: var(--ink-faint); padding: 20px 0; }

/* ---- 06 · still open ---- */
.pg-open { border-top: 1px solid var(--line-soft); margin-top: 6px; }
.pg-open-item {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line-soft);
  align-items: baseline;
}
.pg-open-item .pg-cell { justify-self: start; }
.pg-open-item p { font-family: var(--font-sans); font-size: 15px; line-height: 1.65; color: var(--ink-muted); }
.pg-open-item p b { color: var(--ink); font-weight: 600; }
/* Full width, matching every other block on the page. */
.pg-closing {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.7;
  font-style: italic;
  color: var(--ink);
  margin-top: 26px;
}

/* ---- responsive ---- */
@media (max-width: 1080px) {
  .pg-grid-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1000px) {
  /* .pg-steps is auto-fit and reflows on its own — no override needed */
  .pg-terms { grid-template-columns: repeat(2, 1fr); }
  .pg-arc { grid-template-columns: repeat(2, 1fr); }
  .pg-tool-cards-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .pg-exhibit,
  .pg-method-grid { grid-template-columns: minmax(0, 1fr); }
  .pg-persona-grid,
  .pg-tool-cards { grid-template-columns: repeat(2, 1fr); }
  .pg-lane-axis,
  .pg-lane { grid-template-columns: 118px 1fr 128px; }
}
@media (max-width: 760px) {
  .pg-strip-head,
  .pg-strip-row { grid-template-columns: 96px 1fr 62px; gap: 10px; }
  .pg-strip-personas { display: none; }
  .pg-strip-groups { gap: 4px; }
}
@media (max-width: 640px) {
  .pg-terms,
  .pg-arc,
  .pg-criteria-grid,
  .pg-persona-grid,
  .pg-tool-cards,
  .pg-tool-cards-4 { grid-template-columns: 1fr; }
  .pg-open-item { grid-template-columns: 1fr; gap: 8px; }
  .pg-lane-axis,
  .pg-lane { grid-template-columns: 96px 1fr 104px; }
  .pg-lane-name span { display: none; }
}


/* ---- bout detail page ---- */
.pg-breadcrumb {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  margin: 0 0 18px;
}
.pg-breadcrumb a { color: var(--ink-faint); text-decoration: underline; text-underline-offset: 2px; }
.pg-breadcrumb a:hover { color: var(--ink); }

/* Same customer, every version — the improvement arc at bout level, and the only
   place on the site that exposes it. Each chip carries that version's failure count
   for this persona, so the trend is legible before you click anything. */
.pg-siblings {
  display: flex;
  align-items: baseline;
  gap: 8px 18px;
  flex-wrap: wrap;
  padding-bottom: 18px;
  margin-bottom: clamp(28px, 3.5vw, 40px);
  border-bottom: 1px solid var(--line-soft);
}
.pg-siblings-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.pg-siblings ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.pg-sibling {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-faint);
  text-decoration: none;
  padding: 5px 11px;
  border: 1px solid var(--line-soft);
  border-radius: 9999px;
}
.pg-sibling i { font-style: normal; font-size: 10px; color: var(--ink-faint); }
.pg-sibling:hover { color: var(--ink); border-color: var(--line); }
.pg-sibling.is-current { color: var(--ink); border-color: var(--ink); }

.pg-bout-back {
  margin-top: clamp(28px, 3vw, 36px);
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}
.pg-bout-back a {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-faint);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pg-bout-back a:hover { color: var(--ink); }
.pg-vs { color: var(--ink-faint); font-style: italic; }

/* ---- persona intro — sets the scene before the verdict/transcript, so a
   reader gets the persona's motive, the hidden facts the agent couldn't see,
   and what a good outcome looks like, before judging the transcript
   themselves. Two-column blocks reuse the same pattern as the show page's
   own two-column blocks, for consistency. */
.pg-persona-intro { margin-top: clamp(24px, 3vw, 32px); margin-bottom: clamp(40px, 5vw, 56px); }
.pg-persona-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2.5vw, 32px);
  margin-top: 10px;
}
@media (max-width: 680px) {
  .pg-persona-intro-grid { grid-template-columns: 1fr; }
}
.pg-persona-intro-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 6px;
}
.pg-persona-intro-block p,
.pg-persona-hidden li {
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-muted);
}
.pg-persona-resolves { margin-top: 20px; }

/* the eval's whole asymmetry lives here — the judge sees this, the agent
   never does — so it gets a callout, not a plain paragraph in a sidebar. */
.pg-persona-hidden {
  margin-top: 20px;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, #047857 30%, var(--line-soft));
  background: color-mix(in srgb, #047857 4%, var(--bg));
  border-radius: 10px;
}
.pg-persona-hidden-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #047857;
  margin-bottom: 10px;
}
.pg-persona-hidden ul { margin: 0; padding-left: 20px; }
.pg-persona-hidden li { color: var(--ink); margin: 4px 0; }