/* Results page — evidence first. Charts are plain HTML/SVG on portal tokens.
   Two series everywhere: the model before us (--rs-base, a recessive gray) and
   ours (--rs-ours). They differ by lightness, not hue, so they stay apart under
   colour-vision deficiency; every bar also carries a direct label. */

:root {
  --rs-ours: var(--accent);
  --rs-base: #8f8d80;
  --rs-fail: var(--danger);
  --rs-pass: var(--accent);
  --rs-add-bg: rgba(44, 90, 52, 0.12);
  --rs-del-bg: rgba(154, 45, 27, 0.1);
  --rs-code-bg: var(--inset);
}

/* Dark theme, scoped to this page: the portal's own tokens redefined, so the
   shared header, buttons and cards follow. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #0f1511;
    --paper-2: #131a15;
    --card: #161e18;
    --inset: #1d271f;
    --ink: #eef2e8;
    --ink-2: #cfd6c8;
    --muted: #a7b59f;
    --faint: #7d8c76;
    --line: rgba(238, 242, 232, 0.12);
    --line-2: rgba(238, 242, 232, 0.24);
    --accent: #a9d46a;
    --accent-2: #c9e79a;
    --accent-soft: rgba(169, 212, 106, 0.12);
    --on-accent: #0e1712;
    --deep: #223126;
    --danger: #f08a74;
    --warn: #e2c26b;
    --shadow-sm: none;
    --rs-base: #6f7b70;
    --rs-add-bg: rgba(169, 212, 106, 0.14);
    --rs-del-bg: rgba(240, 138, 116, 0.14);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0f1511;
  --paper-2: #131a15;
  --card: #161e18;
  --inset: #1d271f;
  --ink: #eef2e8;
  --ink-2: #cfd6c8;
  --muted: #a7b59f;
  --faint: #7d8c76;
  --line: rgba(238, 242, 232, 0.12);
  --line-2: rgba(238, 242, 232, 0.24);
  --accent: #a9d46a;
  --accent-2: #c9e79a;
  --accent-soft: rgba(169, 212, 106, 0.12);
  --on-accent: #0e1712;
  --deep: #223126;
  --danger: #f08a74;
  --warn: #e2c26b;
  --shadow-sm: none;
  --rs-base: #6f7b70;
  --rs-add-bg: rgba(169, 212, 106, 0.14);
  --rs-del-bg: rgba(240, 138, 116, 0.14);
}

body { background: var(--paper); color: var(--ink); }

/* logo-mark.svg hardcodes ink strokes; flip its lightness (hue kept) on dark.
   Primary buttons are --deep, close to dark surfaces, so they get a spore edge. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wordmark-mark { filter: invert(1) hue-rotate(180deg); }
  :root:not([data-theme="light"]) .btn-primary { border-color: var(--spore); }
}
:root[data-theme="dark"] .wordmark-mark { filter: invert(1) hue-rotate(180deg); }
:root[data-theme="dark"] .btn-primary { border-color: var(--spore); }
/* "Your call" is a --deep panel in light mode too, so its one primary needs the same edge. */
.results-authorize .btn-primary { border-color: var(--spore); }

/* ------------------------------------------------------------------ hero */

.rs-index { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; }
.rs-index a {
  display: inline-flex; align-items: baseline; gap: 0.5rem; min-height: 2.5rem;
  padding: 0.55rem 0.9rem; border: 1px solid var(--line-2); border-radius: var(--pill);
  background: var(--card); color: var(--ink); text-decoration: none; font-size: 0.88rem;
}
.rs-index a:hover { border-color: var(--accent); }
.rs-index b { font-variant-numeric: tabular-nums; }
.rs-index span { color: var(--muted); }

.rs-signin {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.25rem;
  margin-top: 1.25rem; padding: 0.85rem 1rem; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--card); color: var(--ink-2); font-size: 0.92rem;
}
.rs-signin p { margin: 0; }

/* ---------------------------------------------------------------- tracks */

.rs-track { margin-top: 3rem; scroll-margin-top: calc(var(--header-h) + 1rem); min-width: 0; }
.rs-track-head { max-width: 46rem; }
.rs-track-head .kicker { margin-bottom: 0.4rem; }
.rs-track-claim {
  font-family: var(--font-display); font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); margin: 0;
}

.rs-score { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.75rem; margin: 1.25rem 0 1.5rem; }
.rs-tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 0.85rem 1rem; min-width: 0; }
.rs-tile-k { font-size: 0.78rem; color: var(--muted); margin: 0 0 0.25rem; }
.rs-tile-v { font-size: 1.45rem; font-weight: 600; margin: 0; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.rs-tile-v .rs-from { color: var(--muted); font-weight: 500; }
.rs-tile-v .rs-arrow { color: var(--faint); font-weight: 400; margin: 0 0.3rem; }
.rs-tile-n { font-size: 0.78rem; color: var(--muted); margin: 0.2rem 0 0; }

/* The triad: three steps, one claim each, visual beside the claim. */
.rs-steps { display: flex; flex-direction: column; gap: 0.75rem; }
.rs-step {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 1.5rem;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1.25rem 1.35rem; box-shadow: var(--shadow-sm); min-width: 0;
}
.rs-step-k { display: flex; align-items: center; gap: 0.5rem; font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin: 0 0 0.5rem; }
.rs-step-n {
  display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%;
  border: 1px solid var(--line-2); font-size: 0.72rem; letter-spacing: 0; color: var(--ink);
}
.rs-step.is-short .rs-step-n { border-color: var(--rs-fail); color: var(--rs-fail); }
.rs-step.is-fix .rs-step-n { border-color: var(--rs-ours); color: var(--rs-ours); }
.rs-step-claim { font-size: 1.12rem; line-height: 1.35; font-weight: 600; color: var(--ink); margin: 0; }
.rs-step-visual { min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
.rs-sub { font-size: 0.78rem; color: var(--muted); margin: 0 0 0.4rem; }

/* ------------------------------------------------------------- charts */

.rs-legend { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; font-size: 0.8rem; color: var(--ink-2); margin: 0 0 0.5rem; }
.rs-legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.rs-sw { width: 0.7rem; height: 0.7rem; border-radius: 3px; display: inline-block; flex: none; }

/* Split bar: one row, 2px surface gaps between segments. */
.rs-split { display: flex; gap: 2px; height: 1.75rem; border-radius: 6px; overflow: hidden; }
.rs-split > i { display: block; height: 100%; min-width: 2px; }
.rs-split-labels { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.82rem; color: var(--ink-2); margin-top: 0.4rem; font-variant-numeric: tabular-nums; }
.rs-split-labels b { color: var(--ink); }

/* Bar list: label · bar · value. */
.rs-bars { display: grid; grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr) max-content; gap: 0.35rem 0.75rem; align-items: center; font-size: 0.84rem; }
.rs-bars dt { color: var(--ink-2); overflow-wrap: anywhere; }
.rs-bars dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--ink); text-align: right; }
.rs-track-bar { height: 0.7rem; background: var(--inset); border-radius: 0 4px 4px 0; position: relative; }
.rs-track-bar > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0 4px 4px 0; background: var(--ink-2); }

/* Paired bars: before (gray) over ours (accent), one scale per row = cases. */
.rs-pairs { display: grid; grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr); gap: 0.55rem 0.75rem; align-items: center; font-size: 0.84rem; }
.rs-pairs dt { color: var(--ink-2); overflow-wrap: anywhere; }
.rs-pairs dt small { display: block; color: var(--muted); font-size: 0.74rem; }
.rs-pairs dd { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.rs-pair-row { display: grid; grid-template-columns: minmax(0, 1fr) 3.6rem; gap: 0.5rem; align-items: center; }
.rs-pair-row .rs-track-bar { height: 0.6rem; }
.rs-pair-row.is-base .rs-track-bar > i { background: var(--rs-base); }
.rs-pair-row.is-ours .rs-track-bar > i { background: var(--rs-ours); }
.rs-pair-row span { font-size: 0.76rem; color: var(--ink-2); font-variant-numeric: tabular-nums; text-align: right; }

/* Timing strip: one dot per call, median tick. */
.rs-strip svg { display: block; width: 100%; height: auto; overflow: visible; }
.rs-strip .rs-axis { stroke: var(--line-2); stroke-width: 1; }
.rs-strip .rs-tick-t { fill: var(--muted); font-size: 10px; font-family: var(--font-mono); }
.rs-strip .rs-row-t { fill: var(--ink-2); font-size: 11px; }
.rs-strip .rs-dot-base { fill: var(--rs-base); fill-opacity: 0.55; }
.rs-strip .rs-dot-ours { fill: var(--rs-ours); fill-opacity: 0.6; }
.rs-strip .rs-med { stroke: var(--ink); stroke-width: 2; }
.rs-strip .rs-med-t { fill: var(--ink); font-size: 11px; font-weight: 600; font-family: var(--font-mono); }

/* Traffic chart: cost per call over calls per day, changes marked. */
.rs-traffic { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
.rs-traffic-plot svg { display: block; width: 100%; height: auto; overflow: visible; }
.rs-traffic .rs-grid { stroke: var(--line); stroke-width: 1; }
.rs-traffic .rs-axis { stroke: var(--line-2); stroke-width: 1; }
.rs-traffic .rs-tick-t { fill: var(--muted); font-size: 10px; font-family: var(--font-mono); }
.rs-traffic .rs-row-t { fill: var(--muted); font-size: 11px; }
.rs-traffic .rs-line { fill: none; stroke: var(--rs-ours); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.rs-traffic .rs-line-dot { fill: var(--rs-ours); stroke: var(--card); stroke-width: 2; }
.rs-traffic .rs-line-end { fill: var(--rs-ours); stroke: var(--card); stroke-width: 2; }
.rs-traffic .rs-med-t { fill: var(--ink); font-size: 11px; font-weight: 600; font-family: var(--font-mono); }
.rs-traffic .rs-halo { paint-order: stroke; stroke: var(--paper); stroke-width: 6px; stroke-linejoin: round; }
.rs-traffic .rs-bar-calls { fill: var(--rs-base); }
.rs-traffic .rs-mark { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 3 3; }
.rs-traffic .rs-mark-dot { fill: var(--ink); }
.rs-traffic .rs-mark-t { fill: var(--paper); font-size: 10px; font-weight: 700; pointer-events: none; }
.rs-traffic .rs-hit { fill: transparent; }
.rs-traffic .rs-hit:hover { fill: var(--accent-soft); }
.rs-marks { list-style: none; counter-reset: mark; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.86rem; }
.rs-marks li { counter-increment: mark; display: grid; grid-template-columns: 1.5rem 4.5rem minmax(0, 1fr) auto; gap: 0.5rem; align-items: baseline; }
.rs-marks li::before { content: counter(mark); display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--ink); color: var(--paper); font-size: 0.7rem; font-weight: 700; }
.rs-marks-day { color: var(--muted); font-variant-numeric: tabular-nums; }
.rs-marks-what { color: var(--ink); }
.rs-marks b { font-variant-numeric: tabular-nums; color: var(--rs-ours); }

/* Gate bar: a value against the bar it had to clear. */
.rs-gate { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.rs-gate-head { display: flex; justify-content: space-between; gap: 0.75rem; margin: 0; font-size: 0.8rem; color: var(--ink-2); }
.rs-gate-head b { color: var(--ink); font-variant-numeric: tabular-nums; }
.rs-gate-track { position: relative; height: 0.6rem; background: var(--inset); border-radius: 0 4px 4px 0; }
.rs-gate-track > i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--rs-ours); border-radius: 0 4px 4px 0; }
.rs-gate-track.is-short > i { background: var(--rs-fail); }
.rs-gate-tick { position: absolute; top: -0.25rem; bottom: -0.25rem; width: 2px; margin-left: -1px; background: var(--ink); border-radius: 1px; }
.rs-gate-note { margin: 0; font-size: 0.74rem; color: var(--muted); }

/* Proof rows on the account view. */
.rs-proof-list { display: flex; flex-direction: column; gap: 0.75rem; }
.rs-proof { display: flex; flex-direction: column; gap: 0.55rem; padding: 0.85rem 0; border-top: 1px solid var(--line); min-width: 0; }
.rs-proof:first-child { border-top: 0; padding-top: 0.25rem; }
.rs-proof h3 { margin: 0; font-size: 0.98rem; line-height: 1.35; color: var(--ink); }
.rs-proof-k { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; font-size: 0.78rem; color: var(--muted); }
.rs-proof .rs-legend { margin: 0.1rem 0 0; }

/* ------------------------------------------------------------ replays */

.rs-replay { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.rs-replay-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 0.75rem; background: var(--paper-2); border-bottom: 1px solid var(--line); font-size: 0.8rem; color: var(--muted); }
.rs-replay-nav { display: flex; align-items: center; gap: 0.35rem; }
.rs-replay-nav button {
  min-width: 2.25rem; min-height: 2.25rem; border: 1px solid var(--line-2); border-radius: var(--pill);
  background: var(--card); color: var(--ink); cursor: pointer; font-size: 0.9rem;
}
.rs-replay-nav button:hover { border-color: var(--accent); }
.rs-replay-in { padding: 0.7rem 0.75rem; font-size: 0.88rem; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; border-bottom: 1px solid var(--line); }
.rs-replay-in::before { content: "Input"; display: block; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.25rem; }
.rs-replay-out { display: grid; grid-template-columns: 1fr 1fr; }
.rs-replay-out > div { padding: 0.7rem 0.75rem; min-width: 0; }
.rs-replay-out > div + div { border-left: 1px solid var(--line); }
.rs-verdict { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-size: 0.76rem; color: var(--muted); margin: 0 0 0.35rem; }
.rs-verdict b { color: var(--ink); font-weight: 600; }
.rs-badge { display: inline-flex; align-items: center; gap: 0.25rem; font-weight: 600; font-size: 0.74rem; padding: 0.05rem 0.45rem; border-radius: var(--pill); border: 1px solid currentColor; }
.rs-badge.is-pass { color: var(--rs-pass); }
.rs-badge.is-fail { color: var(--rs-fail); }
.rs-code { font-family: var(--font-mono); font-size: 0.72rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--rs-code-bg); color: var(--ink); padding: 0.55rem 0.65rem; border-radius: var(--r-sm); margin: 0; }
.rs-code.is-empty { color: var(--muted); font-style: italic; font-family: var(--font-sans); }
.rs-issue { font-size: 0.76rem; color: var(--rs-fail); margin: 0.35rem 0 0; }

/* ------------------------------------------------------------ disclosures */

.rs-more { border-top: 1px solid var(--line); padding-top: 0.75rem; }
.rs-more + .rs-more { margin-top: -0.25rem; }
.rs-more > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.45rem; min-height: 2.25rem; font-size: 0.86rem; font-weight: 600; color: var(--ink); }
.rs-more > summary::-webkit-details-marker { display: none; }
.rs-more > summary::before { content: "▸"; color: var(--muted); transition: transform 0.15s ease; }
.rs-more[open] > summary::before { transform: rotate(90deg); }
.rs-more > summary small { font-weight: 400; color: var(--muted); }
.rs-more-body { display: flex; flex-direction: column; gap: 0.85rem; padding: 0.5rem 0 0.25rem; font-size: 0.88rem; color: var(--ink-2); }

.rs-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.rs-table caption { text-align: left; font-size: 0.78rem; color: var(--muted); padding-bottom: 0.35rem; }
.rs-table th, .rs-table td { text-align: left; padding: 0.35rem 0.5rem 0.35rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.rs-table th { font-weight: 600; color: var(--muted); font-size: 0.76rem; }
.rs-table td:not(:first-child), .rs-table th:not(:first-child) { text-align: right; }
.rs-table-wrap { overflow-x: auto; }

.rs-src { font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); overflow-wrap: anywhere; margin: 0; }
.rs-rule { font-size: 0.78rem; color: var(--muted); margin: 0; }

/* Prompt diff: only the changed lines, context collapsed. */
.rs-diff { font-family: var(--font-mono); font-size: 0.72rem; line-height: 1.55; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.rs-diff-file { padding: 0.4rem 0.65rem; background: var(--paper-2); border-bottom: 1px solid var(--line); color: var(--muted); font-size: 0.7rem; overflow-wrap: anywhere; }
.rs-diff-l { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink-2); }
.rs-diff-l > span:first-child { text-align: center; color: var(--muted); user-select: none; }
.rs-diff-l.is-add { background: var(--rs-add-bg); color: var(--ink); }
.rs-diff-l.is-add > span:first-child { color: var(--rs-ours); }
.rs-diff-l.is-del { background: var(--rs-del-bg); color: var(--ink); }
.rs-diff-l.is-del > span:first-child { color: var(--rs-fail); }
.rs-diff-l.is-skip { color: var(--muted); font-style: italic; font-family: var(--font-sans); background: var(--paper-2); }
.rs-chip { display: inline-block; font-size: 0.72rem; font-weight: 600; padding: 0.1rem 0.5rem; border-radius: var(--pill); border: 1px solid var(--line-2); color: var(--ink-2); }
.rs-chip.is-added { color: var(--rs-ours); border-color: var(--rs-ours); }
.rs-chip.is-cut { color: var(--rs-fail); border-color: var(--rs-fail); }

.rs-pending { color: var(--muted); font-style: italic; }

/* Tooltip: one floating element for every mark. */
.rs-tip {
  position: fixed; z-index: 60; pointer-events: none; max-width: 16rem;
  padding: 0.4rem 0.6rem; border-radius: var(--r-sm); background: var(--ink); color: var(--paper);
  font-size: 0.78rem; line-height: 1.35; box-shadow: var(--shadow);
}

@media (max-width: 860px) {
  .rs-step { grid-template-columns: minmax(0, 1fr); gap: 0.9rem; padding: 1rem; }
}
@media (max-width: 560px) {
  .rs-replay-out { grid-template-columns: minmax(0, 1fr); }
  .rs-replay-out > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .rs-bars, .rs-pairs { grid-template-columns: minmax(5rem, 38%) minmax(0, 1fr) max-content; }
  .rs-pairs { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
  .rs-pairs dd { margin-bottom: 0.45rem; }
  .rs-pairs.is-long > :nth-child(n + 11) { display: none; } /* top 5 on phones; the table has all */
  .rs-score { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
  .rs-tile { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 0.75rem; align-items: center; padding: 0.65rem 0.85rem; }
  .rs-tile-k { grid-column: 1; grid-row: 1; margin: 0; }
  .rs-tile-n { grid-column: 1; grid-row: 2; margin: 0; }
  .rs-tile-v { grid-column: 2; grid-row: 1 / span 2; font-size: 1.15rem; white-space: nowrap; }
  .rs-more > summary { flex-wrap: wrap; row-gap: 0; }
  .rs-more > summary small { flex-basis: 100%; padding-left: 1.05rem; }
  .rs-marks li { grid-template-columns: 1.5rem minmax(0, 1fr) auto; }
  .rs-marks-day { grid-column: 2; }
  .rs-marks-what { grid-column: 2; grid-row: 2; }
  .rs-marks b { grid-row: 1 / span 2; grid-column: 3; }
}