@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=IBM+Plex+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

/* The Arena — Office of Kaiju Affairs.
   
   Every value below defers to the published design system's token of the same
   meaning, and falls back to a copy of it. build.mjs links the CMS's stylesheet
   into this page ahead of ours, discovered from the published site rather than
   hardcoded, so a restyle in RIFT reaches this page without anyone editing it.
   The fallbacks keep the page readable when it is built against the local
   scaffold, where no design system exists.

   The site has no dark mode. Neither does this page — an instrumentation page
   that themes differently from the service it instruments looks bolted on. */

:root {
  --paper:     var(--background, #f2f1ed);
  --paper-2:   #ffffff;
  --sunken:    var(--neutral-100, #e8e7e2);
  --ink:       var(--neutral-900, #17181a);
  --ink-2:     var(--neutral-500, #5c5e61);
  --ink-3:     #7b7d80;
  --line:      var(--border-color, #d4d3cd);
  --accent:    var(--primary-500, #cf2318);
  --accent-dk: var(--primary-700, #8f1710);
  --accent-soft: #fbeceb;
  --slow:      var(--accent-teal-500, #4a6a75);
  --slow-soft: #eaeeef;
  --good:      var(--success-500, #3d7a46);
  --bad:       var(--danger-500, #a11c12);
  --radius:    var(--radius-lg, 4px);
  --wrap: 1140px;
  --mono: var(--font-mono, 'JetBrains Mono', ui-monospace, Menlo, monospace);
  --sans: var(--font-body, 'IBM Plex Sans', system-ui, sans-serif);
  --head: var(--font-heading, 'Archivo', system-ui, sans-serif);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

.skip {
  position: absolute; left: -9999px;
  background: var(--accent); color: #fff; padding: 10px 16px; z-index: 10;
}
.skip:focus { left: 12px; top: 12px; }

a { color: var(--accent); }

/* ---------------------------------------------------------------- masthead */

.masthead {
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
  padding: 40px 0 34px;
}
.eyebrow {
  margin: 0 0 18px;
  font: 600 12px/1 var(--sans);
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3);
}
.eyebrow a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line); }
.eyebrow a:hover { color: var(--accent); }

.masthead h1 {
  margin: 0 0 14px;
  font-size: clamp(30px, 4.6vw, 47px);
  line-height: 1.06;
  letter-spacing: -.024em;
  font-weight: 800;
}
.lede { margin: 0; max-width: 66ch; font-size: 18px; color: var(--ink-2); }

.status {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 24px; padding: 9px 15px 9px 13px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--sunken);
  font-size: 14px; color: var(--ink-2);
}
.status .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ink-3); flex: none;
}
.status.live .dot { background: var(--good); box-shadow: 0 0 0 4px color-mix(in srgb, var(--good) 22%, transparent); }
.status.live { border-color: color-mix(in srgb, var(--good) 45%, var(--line)); color: var(--ink); }
.status.absent .dot { background: var(--slow); }
.status code { font: 13px var(--mono); }
.status .self-test {
  margin-left: 4px; border: 0; background: none; padding: 0;
  color: var(--accent); font: inherit; cursor: pointer; text-decoration: underline;
}

/* ---------------------------------------------------------------- sections */

main > section { padding: 52px 0; border-bottom: 1px solid var(--line); }
main > section:last-child { border-bottom: 0; }

h1, h2, h3, h4, .lane-name, .task-title, .finding .figure { font-family: var(--head); }
h2 { margin: 0 0 6px; font-size: 27px; letter-spacing: -.015em; font-weight: 700; }
.sub { margin: 0 0 26px; color: var(--ink-2); max-width: 62ch; }
.loading { color: var(--ink-3); font-style: italic; }

/* -------------------------------------------------------------- scoreboard */

.scoreboard { overflow-x: auto; }
table.board-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 660px; }
.board-table th, .board-table td { padding: 13px 14px; text-align: left; border-bottom: 1px solid var(--line); }
.board-table th { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.board-table td.num { font: 15px var(--mono); text-align: right; }
.board-table tr.lane-mcp td { background: var(--accent-soft); }
.board-table tr.lane-mcp td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.board-table .task-cell { font-weight: 600; }
.board-table .lane-tag {
  display: inline-block; font-size: 12px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600;
}
.board-table tr.lane-mcp .lane-tag { color: var(--accent); }
.delta { font: 13px var(--mono); color: var(--ink-3); }

/* ------------------------------------------------------------------- tasks */

.task {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 26px;
  overflow: hidden;
}
.task-head { padding: 22px 24px 18px; border-bottom: 1px solid var(--line); background: var(--sunken); }
.task-order { margin: 0 0 6px; font: 600 12px/1 var(--sans); letter-spacing: .13em; text-transform: uppercase; color: var(--accent); }
.task-title { margin: 0 0 8px; font-size: 22px; letter-spacing: -.012em; }
.task-difficulty { margin: 0; color: var(--ink-2); font-size: 15px; max-width: 74ch; }

.task-body { padding: 24px; display: grid; gap: 26px; }

.persona h4, .replay h4 { margin: 0 0 10px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
blockquote.scenario {
  margin: 0 0 14px; padding: 16px 18px;
  background: var(--sunken); border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-md, 3px) var(--radius-md, 3px) 0; color: var(--ink); font-size: 15.5px;
}
.ask { margin: 0 0 14px; font-size: 15px; color: var(--ink-2); }
.copy-hint { margin: 8px 0 0; font-size: 13.5px; color: var(--ink-3); }

.btn {
  font: 600 14px/1 var(--sans);
  padding: 11px 17px; border-radius: var(--radius-md, 3px);
  border: 1px solid var(--accent); background: var(--accent); color: #fff;
  cursor: pointer;
}
.btn:hover { filter: brightness(1.07); }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; color: var(--ink-2); border-color: var(--line); }
.btn.ghost:hover { color: var(--ink); border-color: var(--ink-3); filter: none; }
.btn[disabled] { opacity: .5; cursor: default; transform: none; filter: none; }
.btn.copied { background: var(--good); border-color: var(--good); }

.replay-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.speed { font-size: 13.5px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 7px; }
.speed-select {
  font: 13.5px var(--sans); padding: 7px 9px; border-radius: var(--radius-md, 3px);
  border: 1px solid var(--line); background: var(--paper-2); color: var(--ink);
}

/* ------------------------------------------------------------------- lanes */

.lanes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 860px) { .lanes { grid-template-columns: 1fr; } }

.lane {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper); overflow: hidden;
  display: flex; flex-direction: column;
}
.lane.mcp { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.lane-head { padding: 15px 17px 13px; border-bottom: 1px solid var(--line); }
.lane-name { margin: 0 0 3px; font-size: 15.5px; }
.lane.mcp .lane-name { color: var(--accent); }
.lane-sub { margin: 0 0 13px; font-size: 13px; color: var(--ink-3); }

.lane-metrics { display: flex; gap: 20px; margin: 0 0 12px; }
.lane-metrics div { display: flex; flex-direction: column; gap: 2px; }
.lane-metrics dt { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.lane-metrics dd { margin: 0; font: 600 17px/1.2 var(--mono); font-variant-numeric: tabular-nums; }

.bar { height: 4px; background: var(--sunken); border-radius: 2px; overflow: hidden; }
.bar-fill { display: block; height: 100%; width: 0; background: var(--slow); transition: width .18s linear; }
.lane.mcp .bar-fill { background: var(--accent); }
.lane.done .bar-fill { width: 100% !important; }

.steps {
  list-style: none; margin: 0; padding: 12px 8px 12px 0;
  max-height: 340px; overflow-y: auto; flex: 1;
  font-size: 14px;
}
.steps li {
  display: grid; grid-template-columns: 62px 1fr; gap: 10px;
  padding: 7px 14px 7px 12px;
  opacity: 0; transform: translateY(3px);
  transition: opacity .2s ease, transform .2s ease;
}
.steps li.shown { opacity: 1; transform: none; }
.steps li .t { font: 12.5px var(--mono); color: var(--ink-3); font-variant-numeric: tabular-nums; padding-top: 2px; }
.steps li .what { min-width: 0; }
.steps li .lbl { display: block; }
.steps li .det { display: block; color: var(--ink-3); font-size: 13px; margin-top: 2px; }
.steps li .kind {
  display: inline-block; margin-right: 6px; padding: 1px 6px;
  border-radius: 4px; background: var(--slow-soft); color: var(--ink-3);
  font: 600 10.5px/1.6 var(--mono); letter-spacing: .04em; text-transform: uppercase;
  vertical-align: 1px;
}
.steps li.tool .kind { background: var(--accent-soft); color: var(--accent); }
.steps li.dead-end .lbl { color: var(--bad); }
.steps li.dead-end .kind { background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad); }

.verdict { padding: 14px 17px; border-top: 1px solid var(--line); background: var(--sunken); font-size: 14px; }
.verdict .answer { margin: 0 0 12px; color: var(--ink); }
.verdict .answer strong { display: block; font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.verdict ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.verdict li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; font-size: 13.5px; align-items: start; }
.verdict .pass { color: var(--good); font-weight: 700; }
.verdict .fail { color: var(--bad); font-weight: 700; }
.verdict .note { color: var(--ink-3); font-size: 13px; display: block; }
.badge {
  display: inline-block; padding: 2px 9px; border-radius: var(--radius-sm, 2px);
  font: 700 11px/1.8 var(--sans); letter-spacing: .07em; text-transform: uppercase;
}
.badge.correct { background: color-mix(in srgb, var(--good) 18%, transparent); color: var(--good); }
.badge.partial { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.badge.incorrect, .badge.abandoned { background: color-mix(in srgb, var(--bad) 15%, transparent); color: var(--bad); }

/* --------------------------------------------------------------- answerkey */

.key { margin: 0; border-top: 1px solid var(--line); padding-top: 18px; }
.key summary { cursor: pointer; font-weight: 600; font-size: 15px; }
.key summary::marker { color: var(--accent); }
.key-body { padding-top: 14px; font-size: 14.5px; color: var(--ink-2); }
.key-body h5 { margin: 16px 0 6px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.key-body ul { margin: 0; padding-left: 20px; }
.key-body code, .key-body kbd { font: 13px var(--mono); background: var(--sunken); padding: 1px 5px; border-radius: 4px; }
.key-body table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.key-body td { padding: 5px 8px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.key-body td:first-child { font: 13px var(--mono); color: var(--ink-3); white-space: nowrap; }

/* -------------------------------------------------------------------- how */

.how-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 26px; }
.how-grid h3 { margin: 0 0 7px; font-size: 16.5px; }
.how-grid p { margin: 0; color: var(--ink-2); font-size: 15px; }
code { font: .92em var(--mono); }

/* ------------------------------------------------------------------- foot */

.foot { border-top: 1px solid var(--line); background: var(--paper-2); padding: 30px 0 44px; }
.foot p { margin: 0 0 8px; color: var(--ink-2); max-width: 70ch; font-size: 15px; }
.foot .meta { color: var(--ink-3); font-size: 13.5px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .steps li { opacity: 1; transform: none; }
}

/* Run-to-run spread and declared scoring normalisations. An agent that scores
   1.00 three times and 0.64 once is not the same thing as one that scores 0.91,
   and the difference is the whole point — so it gets shown, not averaged away. */

.verdict .spread { margin: 0 0 12px; font-size: 13.5px; color: var(--ink-2); }
.verdict .spread strong {
  display: block; font-size: 11.5px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px;
}
.verdict .spread span { font: 600 14px/1 var(--mono); font-variant-numeric: tabular-nums; }
.verdict .spread .best { color: var(--good); }
.verdict .spread .worst { color: var(--bad); }
.verdict .spread .note {
  display: block; margin-top: 6px; font: 13px/1.5 var(--sans); color: var(--ink-3);
}

.verdict .norms { margin-top: 12px; }
.verdict .norms summary {
  cursor: pointer; font-size: 13px; color: var(--ink-3);
}
.verdict .norms summary::marker { color: var(--accent); }
.verdict .norms ul.plain {
  margin: 8px 0 0; padding-left: 18px; list-style: disc; display: block;
}
.verdict .norms ul.plain li {
  display: list-item; font-size: 13px; color: var(--ink-2); margin-bottom: 5px;
}


/* Findings — figures computed from the traces, never typed by hand. */

.findings-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 22px; margin-bottom: 24px;
}
.finding {
  padding: 20px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper-2);
}
.finding .figure {
  margin: 0 0 2px; font: 700 34px/1 var(--mono);
  letter-spacing: -.02em; color: var(--accent); font-variant-numeric: tabular-nums;
}
.finding .figure-label {
  margin: 0 0 10px; font-size: 13px; color: var(--ink-3);
  letter-spacing: .02em;
}
.finding .figure-body { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.findings-foot {
  margin: 0; padding: 16px 18px; border-radius: var(--radius);
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  font-size: 15px; color: var(--ink); max-width: 72ch;
}


/* Lane divergence. A score gap on its own reads as "the tools are less
   accurate", which is not necessarily what happened — so the mechanism is
   rendered with the numbers, never after them. */

.divergence {
  padding: 18px 20px; border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  background: var(--accent-soft);
}
.divergence h4 { margin: 0 0 8px; font-size: 16.5px; letter-spacing: -.01em; }
.divergence p { margin: 0 0 10px; font-size: 15px; color: var(--ink-2); max-width: 74ch; }
.divergence p:last-child { margin-bottom: 0; }
.divergence .why { color: var(--ink); }
.divergence .remedy { font-size: 14.5px; }
.divergence .remedy strong {
  display: block; font-size: 11.5px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 3px;
}
.divergence .missing { color: var(--bad); }


/* Consent prompts a judge will meet on the tasks that transmit personal facts. */
.consent {
  margin: 0 0 14px; padding: 11px 14px;
  border-left: 3px solid var(--slow); background: var(--slow-soft);
  border-radius: 0 var(--radius-md, 3px) var(--radius-md, 3px) 0;
  font-size: 14px; color: var(--ink-2);
}

.how-grid q { font-style: italic; }
.how-grid .aside { color: var(--ink-3); font-size: 13px; white-space: nowrap; }

.board-table .n { color: var(--ink-3); font: 11.5px var(--mono); }

.withheld {
  margin: 0 0 16px; padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--bad) 40%, var(--line));
  border-radius: var(--radius); background: color-mix(in srgb, var(--bad) 6%, transparent);
  font-size: 14.5px; color: var(--ink-2); max-width: 76ch;
}
.withheld strong { display: block; color: var(--bad); margin-bottom: 4px; }


/* Before/after across measurement rounds. */
.rounds {
  padding: 18px 20px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--sunken);
}
.rounds h4 { margin: 0 0 14px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.round-cells { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 12px; }
.round-cell { min-width: 130px; }
.round-figure {
  margin: 0 0 2px; font: 700 30px/1 var(--mono);
  color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.round-cell.now .round-figure { color: var(--accent); }
.round-label { margin: 0; font-size: 14px; font-weight: 600; }
.round-n { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-3); }
.round-arrow { font-size: 22px; color: var(--ink-3); }
.round-note { margin: 0; font-size: 14.5px; color: var(--ink-2); max-width: 74ch; }

.board-table .tier {
  display: inline-block; padding: 1px 6px; margin-left: 4px;
  border-radius: var(--radius-sm, 2px); background: var(--slow-soft);
  color: var(--ink-2); font: 600 10.5px/1.7 var(--mono); letter-spacing: .03em;
}

.tiers .tier-note { margin: 18px 0 0; font-size: 15.5px; color: var(--ink); max-width: 76ch; }
.board-table td.down { color: var(--bad); }

/* ---------------------------------------------------- copy-rewrite additions */

.lede p { margin: 0 0 14px; }
.lede .lede-close { color: var(--ink); font-weight: 500; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 26px 0 0; }
.cta-row .btn { text-decoration: none; display: inline-block; }

.finding .finding-title {
  margin: 0 0 10px; font: 600 14.5px/1.35 var(--head);
  color: var(--ink); letter-spacing: -.005em;
}
.finding .figure { margin-top: 0; }

.tools-changed {
  margin-top: 30px; padding: 22px 24px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-2);
}
.tools-changed h3 { margin: 0 0 10px; font-size: 17px; }
.tools-changed p { margin: 0 0 10px; color: var(--ink-2); font-size: 15px; max-width: 74ch; }
.tools-changed ul { margin: 0 0 12px; padding-left: 22px; color: var(--ink-2); font-size: 15px; }
.tools-changed li { margin-bottom: 5px; }
.tools-changed-close { color: var(--ink) !important; }

.board-table td.model { font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.board-table td.range { font-size: 13px; color: var(--ink-3); }

.replay-intro { margin: 0 0 16px; font-size: 14.5px; color: var(--ink-2); max-width: 76ch; }

.key-intro { margin: 0 0 14px; }
.key-aside { color: var(--ink-3); font-size: 13.5px; }
.key-body ul.plain { margin: 0; padding-left: 20px; list-style: disc; }
.key-body ul.plain li { margin-bottom: 4px; }
.key-body .technical { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.key-body .technical summary { cursor: pointer; font-size: 13.5px; color: var(--ink-3); }
.key-body .technical p { margin: 8px 0 0; font-size: 13.5px; }

.lessons { border-top: 1px solid var(--line); }
.lesson { max-width: 78ch; margin-bottom: 40px; }
.lesson:last-child { margin-bottom: 0; }
.lesson h3 { margin: 0 0 10px; font-size: 19px; letter-spacing: -.01em; }
.lesson p { margin: 0 0 12px; color: var(--ink-2); font-size: 15.5px; }
.lesson ul { margin: 0 0 14px; padding-left: 22px; color: var(--ink-2); font-size: 15.5px; }
.lesson li { margin-bottom: 5px; }
.lesson .pull, .how-grid .pull {
  color: var(--ink); font-weight: 500;
  border-left: 3px solid var(--accent); padding-left: 14px;
}

.foot .foot-lead {
  font: 600 19px/1.35 var(--head); color: var(--ink); margin-bottom: 10px;
}

.findings-method { margin: 4px 0 0; font-size: 13.5px; color: var(--ink-3); max-width: 78ch; }

.key-warning {
  margin: 10px 0 0; padding: 11px 14px;
  border-left: 3px solid var(--slow); background: var(--slow-soft);
  border-radius: 0 var(--radius-md, 3px) var(--radius-md, 3px) 0;
  font-size: 13.5px; color: var(--ink-2); max-width: 74ch;
}

.round-story { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.round-story h5 { margin: 0 0 8px; font: 600 15.5px/1.35 var(--head); color: var(--ink); }
.round-story p { margin: 0 0 10px; font-size: 14.5px; color: var(--ink-2); max-width: 76ch; }
.round-story .pull { color: var(--ink); border-left: 3px solid var(--accent); padding-left: 14px; }