/* ══════════════════════════════════════════════════════════════
   Model's-eye view — the prompt → streams → strain schematic.

   Register: main chrome (never instrument). Inter for prose, JetBrains
   Mono for every label and readout. Layout is CSS grid; the only drawn
   geometry is the connector SVG and the two strain polylines.

   PROPOSED TOKEN EXTENSION — stream identity colours.
   The schematic encodes *which workstream a prompt section feeds*. That's
   identity, not decoration, so it needs hue. These stay inside the Primer
   dark family the semantic tokens already come from, and are scoped to
   the schematic: semantic ok/warn/fail keep their meaning everywhere else.
   ══════════════════════════════════════════════════════════════ */

:root {
  --stream-1: #58A6FF;   /* = --semantic-info; stream 1 reuses it */
  --stream-2: #A371F7;
  --stream-3: #39C5CF;
}

.panel--mev { padding-bottom: var(--space-4); }
.mev-body-root:empty { display: none; }

.panel__note {
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--foreground-muted);
  margin: -4px 0 var(--space-4);
  max-width: 62ch;
}

/* ── Schematic frame ─────────────────────────────────────────── */

.mev-schematic {
  margin: 0 0 var(--space-5);
  padding: var(--space-4) var(--space-3) var(--space-3);
  background: var(--background-inset);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Column track per present zone: p = prompt, f = flows gutter,
   s = streams, x = strain. Absent zones leave no empty track. */
.mev-zone-heads,
.mev-body {
  display: grid;
  grid-template-columns: minmax(220px, 1fr);
  gap: 0 var(--space-2);
}

[data-mev-cols="pfsx"] { grid-template-columns: minmax(140px,190px) minmax(64px,104px) minmax(220px,1fr) minmax(280px,360px); }
/* The difficulty column (d) replaced the surprisal chart (x). Prompt and
   flows are narrower than the chart layout used: the score and four axis
   rows want room, and the section boxes read fine at 150px. */
/* Rebalanced 2026-08-11. The streams column is the only `1fr` track, so every
   pixel the container gained went to it: at 1400px the schematic ran ~770px
   wide holding two short stream cards, while the prompt sections it explains
   were squeezed into ~240px and truncated to "<prompt_to_ana…". The stream
   cards do not get more legible past ~560px; the prompt labels do. So the
   prompt column gets a real width, the difficulty column gets enough for named
   axes, and the schematic keeps the remainder — still flexible, no longer
   greedy. */
[data-mev-cols="pfsd"] { grid-template-columns: minmax(150px,225px) minmax(48px,72px) minmax(200px,1fr) minmax(250px,330px); }
[data-mev-cols="pfd"]  { grid-template-columns: minmax(112px,150px) minmax(48px,80px) minmax(230px,300px); }
[data-mev-cols="psd"]  { grid-template-columns: minmax(112px,150px) minmax(200px,1fr) minmax(230px,300px); }
[data-mev-cols="sd"]   { grid-template-columns: minmax(200px,1fr) minmax(230px,300px); }
[data-mev-cols="pd"]   { grid-template-columns: minmax(140px,1fr) minmax(230px,300px); }
[data-mev-cols="pfs"]  { grid-template-columns: minmax(140px,190px) minmax(64px,104px) minmax(220px,1fr); }
[data-mev-cols="px"]   { grid-template-columns: minmax(160px,240px) minmax(260px,1fr); }
[data-mev-cols="sx"]   { grid-template-columns: minmax(220px,1fr) minmax(280px,380px); }

/* With a flows gutter present the heads row has one fewer item than the body
   has tracks, so the prompt header spans its column and the gutter. */
.mev-zone-heads[data-mev-cols="pfsx"] .mev-zone-head:first-child,
.mev-zone-heads[data-mev-cols="pfsd"] .mev-zone-head:first-child,
.mev-zone-heads[data-mev-cols="pfd"]  .mev-zone-head:first-child,
.mev-zone-heads[data-mev-cols="pfs"]  .mev-zone-head:first-child { grid-column: 1 / 3; }

.mev-zone-heads { margin-bottom: var(--space-3); }

.mev-zone-head {
  grid-column: span 1;
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--foreground-muted);
  line-height: 1.3;
}

/* Card ①'s anchor. It sits in the header rather than on the coupling arrow
   because a one-workstream prompt has no arrow, and that is the state the
   card most needs to be findable in. */
.mev-zone-head .mev-marker {
  width: 16px;
  height: 16px;
  font-size: 9px;
  letter-spacing: 0;
}

.mev-body { min-height: 250px; }

.mev-col { display: flex; flex-direction: column; min-width: 0; }

/* ── Zone 1 · prompt sections ────────────────────────────────── */

.mev-segs {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
}

.mev-seg {
  flex-basis: 0;
  min-height: 34px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 7px 9px;
  border: 1px solid var(--seg-hue, var(--border-default));
  border-left-width: 2px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--seg-hue, #fff) 7%, transparent);
  transition: opacity var(--transition-medium);
}

/* Inferred blocks: the tool found no authored structure and sized by
   position instead. Dashed = "we inferred this", the same vocabulary the
   empty recommendation slots use. */
.mev-seg--inferred { border-style: dashed; }

.mev-segs__caption {
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.4;
  color: var(--foreground-faint);
  margin: 6px 0 0;
}

.mev-seg--s1 { --seg-hue: var(--stream-1); }
.mev-seg--s2 { --seg-hue: var(--stream-2); }
.mev-seg--s3 { --seg-hue: var(--stream-3); }

/* Feeds the collapsed "other work" box — deliberately hueless, so the three
   stream colours keep meaning exactly three workstreams. */
.mev-seg--other { --seg-hue: var(--foreground-faint); }

.mev-seg__title {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--foreground-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mev-seg__share {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--foreground-muted);
  flex-shrink: 0;
}

/* ── Zone 2 · connector ribbons ──────────────────────────────── */

.mev-col--flows { position: relative; }
.mev-col--flows svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.mev-flow { opacity: 0.42; stroke-linecap: round; }
.mev-flow--s1 { stroke: var(--stream-1); }
.mev-flow--s2 { stroke: var(--stream-2); }
.mev-flow--s3 { stroke: var(--stream-3); }
.mev-flow--other { stroke: var(--foreground-faint); opacity: 0.3; }

/* ── Zone 3 · workstreams ────────────────────────────────────── */

.mev-streams {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.mev-stream {
  flex-basis: 0;
  min-height: 58px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 10px 14px;
  border: 1px solid var(--str-hue, var(--border-default));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--str-hue, #fff) 6%, transparent);
  transition: opacity var(--transition-medium);
}

.mev-stream--s1 { --str-hue: var(--stream-1); }
.mev-stream--s2 { --str-hue: var(--stream-2); }
.mev-stream--s3 { --str-hue: var(--stream-3); }

/* The tail of a 4+ stream prompt, collapsed into one box. Hueless and
   quieter than a real workstream, because it is a sum, not a stream. */
.mev-stream--other { --str-hue: var(--foreground-faint); }
.mev-stream--other .mev-stream__name { color: var(--foreground-muted); }

.mev-stream__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.mev-stream__name {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--foreground);
}

.mev-stream__effort {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--foreground-muted);
  white-space: nowrap;
}

.mev-stream__sub {
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--foreground-secondary);
  margin: 0;
}

/* Coupling tie between adjacent streams */
.mev-tie {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 14px;
  height: 48px;
  flex-shrink: 0;
}

/* Two shafts pointing opposite ways, not one double-headed arrow: a vertical
   line with caps at both ends already means "dimension / span" in this
   product's visual language. Stroke weight carries how much context the two
   streams actually trade. */
.mev-tie__arrow { flex-shrink: 0; line-height: 0; }
.mev-tie__stem,
.mev-tie__head {
  fill: none;
  stroke: var(--foreground-muted);
  stroke-width: calc(var(--tie-weight, 1) * 1px);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mev-tie__text { display: flex; flex-direction: column; gap: 1px; }

.mev-tie__label,
.mev-tie__note {
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.35;
}
.mev-tie__label { color: var(--foreground-secondary); }
.mev-tie__note  { color: var(--foreground-muted); }

.mev-single-note {
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--foreground-muted);
  margin: var(--space-3) 0 0;
}

/* ── Zone 4 · strain charts ──────────────────────────────────── */

.mev-col--strain { padding-left: var(--space-5); }

.mev-strain {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
  height: 100%;
}

.mev-chart { display: flex; flex-direction: column; gap: 3px; }

.mev-chart__head {
  display: flex;
  align-items: center;
  gap: 7px;
}

.mev-chart__label {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.3;
  color: var(--foreground-secondary);
}
.mev-chart__label--ok   { color: var(--semantic-ok); }
.mev-chart__label--fail { color: var(--semantic-fail); }

.mev-chart__note {
  font-family: var(--font-sans);
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--foreground-muted);
  margin: 0 0 3px 26px;
}

.mev-chart__plot { height: 58px; position: relative; }
.mev-chart__svg  { width: 100%; height: 58px; display: block; overflow: visible; }

/* Busiest-stretch marker: a full-height hairline, not a dot. The chart
   scales non-uniformly, so this is HTML rather than SVG — a drawn circle
   would render as an ellipse at wide widths. */
.mev-peak {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  margin-left: -0.5px;
  background: var(--foreground-muted);
  opacity: 0.55;
  pointer-events: none;
}

.mev-line {
  fill: none;
  stroke-width: 1.4;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.mev-line--neutral { stroke: rgba(245, 245, 245, 0.42); }
.mev-line--strain  { stroke: var(--semantic-fail); stroke-width: 1.7; }

.mev-baseline {
  stroke: var(--foreground-faint);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}

.mev-marker__dot  { fill: var(--semantic-ok); }
.mev-marker__tick { stroke: var(--semantic-ok); stroke-width: 1; opacity: 0.5; }

.mev-chart__baseline-key {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--foreground-faint);
  margin: 3px 0 0;
}

.mev-chart__axis {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--foreground-faint);
  margin-top: 2px;
}

/* Scalar fallback when the per-layer curve isn't on the wire */
.mev-gauge {
  height: 4px;
  border-radius: 2px;
  background: var(--border-subtle);
  overflow: hidden;
  margin-left: 26px;
}
.mev-gauge__fill {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--semantic-ok);
}
.mev-gauge__fill.is-strain { background: var(--semantic-fail); }
.mev-chart--scalar .mev-chart__baseline-key {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--foreground-faint);
  margin: 3px 0 0;
}

.mev-chart__axis { margin-left: 26px; }

/* ── Numbered markers ────────────────────────────────────────── */

.mev-marker {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--foreground-muted);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--foreground-secondary);
}
.mev-marker--ok   { border-color: var(--semantic-ok);   color: var(--semantic-ok); }
.mev-marker--fail { border-color: var(--semantic-fail); color: var(--semantic-fail); }

/* ── ①②③ interpretation cards ───────────────────────────────── */

/* Two cards now, so two columns — `auto-fit` would stretch a pair to full
   width each on a wide screen and leave them looking like sections rather than
   a pair. Equal height so the roster card and the score card read as siblings. */
.mev-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  align-items: stretch;
}
@media (max-width: 860px) { .mev-cards { grid-template-columns: 1fr; } }

.mev-card {
  position: relative;
  padding: var(--space-3) var(--space-3) var(--space-3) 40px;
  background: var(--background-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast);
}

.mev-card:hover,
.mev-card:focus-visible {
  border-color: var(--border-hover);
  outline: none;
}

.mev-card__idx {
  position: absolute;
  left: var(--space-3);
  top: var(--space-3);
  width: 19px;
  height: 19px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-active);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--foreground-secondary);
}

.mev-card--plain { padding-left: var(--space-3); }
.mev-card--plain .mev-card__idx { display: none; }

.mev-card__title {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--foreground);
  margin: 0 0 5px;
}

.mev-card__body {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--foreground-secondary);
  margin: 0;
}

.mev-card__bullets {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.mev-card__bullets li {
  position: relative;
  padding-left: 13px;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.45;
  color: var(--foreground-secondary);
}

.mev-card__bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 4px;
  height: 1px;
  background: var(--foreground-faint);
}

/* ── Cross-highlight: card ↔ the zone it explains ──────────────
   This used to dim everything else to 0.22 and restore the focused zone.
   It worked, but hovering one column greyed out a neighbouring one the
   reader might be mid-way through — the answer to "which part is this
   card about" shouldn't be to hide the rest of the answer.

   So: nothing dims. The focused zone lifts a single pixel and its border
   brightens one step. Enough to feel alive, not enough to move the eye off
   whatever it was reading. Opacity is untouched, which also retires the
   dim-with-no-restore failure this file has now hit twice (the dead
   "comprehension"/"assembly" rules, then "effort"): a zone with no rule of
   its own is simply a zone that doesn't lift. */

/* NEVER set border-color here. That is the bug this replaced (2026-08-10):
   .mev-stream and .mev-seg carry a STREAM HUE on their border
   (var(--str-hue) / var(--seg-hue)), and the old rule overwrote it with the
   neutral var(--border-default). So hovering a blue stream box turned it
   grey and letting go turned it blue again — the pop read as "went dead",
   exactly backwards. .mev-tie and .mev-chart have no border at all, so that
   declaration was doing nothing anywhere it wasn't doing harm.

   The lift is the whole effect: one pixel up, and the element's own hue
   washes very slightly stronger. Hue-relative, so a box can only ever get
   MORE itself, never neutral. */
.mev-body-root[data-focus="organisation"] .mev-stream,
.mev-body-root[data-focus="organisation"] .mev-tie,
.mev-body-root[data-focus="difficulty"] .mev-diff{
  transform: translateY(-1px);
}
.mev-body-root[data-focus="organisation"] .mev-stream {
  background: color-mix(in srgb, var(--str-hue, #fff) 12%, transparent);
}
/* Card 3 now explains the DIFFICULTY column, so its cross-highlight lifts
   that column. The old rule lit `.mev-seg[data-mev-peak]` off
   `data-focus="load"` — card 3 was the only producer of that focus value and
   `data-focus="load"` was the only styling `data-mev-peak` ever received, so
   with the surprisal card gone both sides of that pair are retired. */
.mev-body-root[data-focus="difficulty"] .mev-diff {
  transform: translateY(-1px);
}

/* Direct hover, so the thing under the pointer responds — on BOTH the
   "your prompt" column and the "how the model organises the work" column.
   The zone rules above are the card-to-column cross-highlight; these are
   the plain "my mouse is on this" feedback, which the schematic had only
   via that indirect path. Same one-pixel lift, same hue wash, so hovering
   a box and hovering its card feel like the same gesture. */
.mev-seg:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--seg-hue, #fff) 13%, transparent);
}
.mev-stream:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--str-hue, #fff) 12%, transparent);
}

/* 1px of travel needs no reflow, so the measured ribbons keep their
   geometry and drawFlows is not re-run. */
.mev-seg, .mev-stream, .mev-tie, .mev-chart {
  transition: transform var(--transition-fast), background-color var(--transition-fast);
}

@media (prefers-reduced-motion: reduce) {
  .mev-seg, .mev-stream, .mev-tie, .mev-chart { transition: none; }
  /* Drop the travel, keep the hue wash — the feedback survives without motion. */
  .mev-body-root[data-focus="organisation"] .mev-stream,
  .mev-body-root[data-focus="organisation"] .mev-tie,
  .mev-body-root[data-focus="difficulty"] .mev-diff,
    .mev-seg:hover,
  .mev-stream:hover { transform: none; }
}

/* ── Staged reveal ───────────────────────────────────────────── */

@keyframes mev-rise {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
@keyframes mev-draw { to { stroke-dashoffset: 0; } }

/* `backwards`, not `both`. A filled-forwards animation keeps its final
   keyframe applied for the life of the element, and animation values beat
   ordinary declarations in the cascade — so `opacity: 1` from the reveal was
   silently outranking the cross-highlight's dim rule below, on every zone.
   `backwards` still hides the element through its delay and animates it in,
   then hands opacity back to the stylesheet. */
.mev-schematic .mev-seg { animation: mev-rise 260ms ease-out backwards; }
.mev-schematic .mev-stream,
.mev-schematic .mev-tie { animation: mev-rise 260ms ease-out 180ms backwards; }
.mev-strain .mev-chart  { animation: mev-rise 260ms ease-out 380ms backwards; }
.mev-cards .mev-card    { animation: mev-rise 260ms ease-out 480ms backwards; }

.mev-draw {
  stroke-dasharray: var(--dash, 900);
  stroke-dashoffset: var(--dash, 900);
  animation: mev-draw 620ms ease-out 200ms forwards;
}

@media (prefers-reduced-motion: reduce) {
  .mev-schematic .mev-seg,
  .mev-schematic .mev-stream,
  .mev-schematic .mev-tie,
  .mev-strain .mev-chart,
  .mev-cards .mev-card { animation: none !important; }
  .mev-draw { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; animation: none !important; }
}

/* ── Narrow: stack the zones ─────────────────────────────────── */

@media (max-width: 1100px) {
  .mev-zone-heads { display: none; }
  .mev-body {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .mev-col--flows { display: none; }
  .mev-body { min-height: 0; }
  .mev-segs { flex-direction: row; flex-wrap: wrap; }
  .mev-seg { flex: 1 1 130px; min-height: 0; }
  .mev-stream { min-height: 0; }
  .mev-tie { height: 34px; }
}

/* ══════════════════════════════════════════════════════════════
   Recommended structure — verdict line + the proposed breakdown
   ══════════════════════════════════════════════════════════════ */

/* ── Execution-flow boxes (Structural improvements) ──────────
   Each call is a bounded, numbered box. SERIES = boxes stacked with a
   short arrow rail running through the number rings. PARALLEL = boxes
   side by side — the strongest instant read — with a small ∥ operator
   (the electronics parallel-composition mark) in the gap. All connectors
   are static CSS measured off the known 22px ring: no SVG, no observers. */

.rp-flow { margin-top: var(--space-4); }

.rp-flow[data-topology="series"],
.rp-flow[data-topology="staged"],
.rp-flow[data-topology="single"] {
  display: flex;
  flex-direction: column;
}

/* Fan-in topologies: a row of concurrent calls, then ONE endpoint they
   converge into. The parent stacks; .rp-flow__row is the grid that was
   previously the parent itself, which is why the ∥ selectors below now
   descend through .rp-flow__row. */
.rp-flow[data-topology="parallel"],
.rp-flow[data-topology="parallel_then_format"] {
  display: flex;
  flex-direction: column;
}
.rp-flow__row { display: grid; gap: var(--space-4); }
.rp-flow[data-n="2"] .rp-flow__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rp-flow[data-n="3"] .rp-flow__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rp-flow[data-n="4"] .rp-flow__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* The fan: a rail spanning first-column-centre to last-column-centre, short
   ticks up to each box, and one stem down into the endpoint. Static CSS off
   the grid's own column fractions — no SVG, no measuring, matching how every
   other connector in this file is drawn. --edge is the centre of the outer
   columns: 1/(2n) of the width. */
.rp-flow__fan {
  position: relative;
  height: 26px;
  --edge: 25%;
}
.rp-flow[data-n="3"] .rp-flow__fan { --edge: 16.667%; }
.rp-flow__fan::before {
  content: "";
  position: absolute;
  top: 13px;
  left: var(--edge);
  right: var(--edge);
  border-top: 1.5px solid var(--border-active);
}
.rp-flow__fan::after {
  content: "";
  position: absolute;
  top: 13px;
  bottom: 0;
  left: calc(50% - 0.75px);
  border-left: 1.5px solid var(--border-active);
}
/* Ticks from each content box down to the rail. ::after is free on the box
   (::before carries the ∥ mark). */
.rp-flow[data-topology="parallel"] .rp-flow__row .rp-flow__box::after,
.rp-flow[data-topology="parallel_then_format"] .rp-flow__row .rp-flow__box::after {
  content: "";
  position: absolute;
  left: calc(50% - 0.75px);
  bottom: -13px;
  height: 13px;
  border-left: 1.5px solid var(--border-active);
}

.rp-flow__box {
  position: relative;
  background: var(--background-inset);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  min-width: 0;
}

/* The endpoint the reader owns: dashed, unnumbered, muted. Dashed already
   means "not authored / not ours" here (.mev-seg--inferred, empty rec slots). */
.rp-flow__box--open {
  /* MUST come after .rp-flow__box: that rule's `border:` shorthand resets
     border-style at equal specificity, so declaring this earlier computed
     back to solid. --border-subtle was also too faint to read as a dash. */
  border-style: dashed;
  border-color: var(--border-default);
  background: transparent;
}
.rp-flow__box--open .rp-flow__title { color: var(--foreground-muted); }
.rp-flow__box--open .rp-flow__job { color: var(--foreground-faint, var(--foreground-muted)); }

.rp-flow__bhead {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rp-flow__node {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid var(--node-hue, var(--foreground-muted));
  background: var(--background-inset);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--foreground-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.rp-flow__node--s1 { --node-hue: var(--stream-1); }
.rp-flow__node--s2 { --node-hue: var(--stream-2); }
.rp-flow__node--s3 { --node-hue: var(--stream-3); }

.rp-flow__title {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--foreground);
  margin: 0;
}

.rp-flow__job {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--foreground-secondary);
  margin: 6px 0 0 32px;
  max-width: 68ch;
}

.rp-flow__feeds {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin: 8px 0 0 32px;
}

.rp-flow__feeds-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--foreground-faint);
  margin-right: 2px;
  flex: 0 0 auto;
}
/* Prose, not a chip. These were `.rp-call__chip` boxes — a bordered pill around
   a full sentence, which forced odd wrapping and made a written line look like
   a data tag. The label stays mono/uppercase as the gutter; the value is just
   text. */
.rp-flow__feeds-text {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--foreground-secondary);
  min-width: 0;
}

/* Series connector: 1px stem + arrowhead at x=23px (12px box padding +
   11px ring radius) so the arrow rail runs through the number rings. */
.rp-flow__conn {
  position: relative;
  height: 20px;
  margin: 2px 0;
  flex-shrink: 0;
}
.rp-flow__conn::before {
  content: "";
  position: absolute;
  left: 23.5px;
  top: 0;
  width: 1px;
  height: 14px;
  background: var(--border-active);
}
.rp-flow__conn::after {
  content: "";
  position: absolute;
  left: 20.5px;
  top: 14px;
  width: 0;
  height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 5px solid var(--border-active);
}

/* Parallel operator: ∥ drawn as two 1.5px strokes in the gap, at ring
   height, touching nothing — an operator between calls, never a wire. */
.rp-flow[data-n="2"] .rp-flow__row .rp-flow__box:nth-child(2)::before,
.rp-flow[data-n="3"] .rp-flow__row .rp-flow__box:nth-child(n+2)::before,
.rp-flow[data-n="4"] .rp-flow__row .rp-flow__box:nth-child(even)::before {
  content: "";
  position: absolute;
  /* Centred in the real grid gap: total glyph width is 8px (5px + two
     1.5px borders), so its centre sits at half the gap. A fixed -15px was
     visibly off-centre (Greg's screenshot). */
  left: calc(-0.5 * var(--space-4) - 4px);
  top: 18px;
  width: 5px;
  height: 10px;
  border-left: 1.5px solid var(--border-active);
  border-right: 1.5px solid var(--border-active);
}

.rp-flow__caption {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--foreground-muted);
  margin: var(--space-3) 0 0;
}
.rp-flow__kw { color: var(--foreground-secondary); }

/* "call N output" chip: dashed border marks it as a produced input, not a
   prompt section. The only dashed ink in the block. */
.rp-call__chip--prior {
  border-style: dashed;
  color: var(--foreground-secondary);
}

@media (max-width: 900px) {
  .rp-flow[data-n="3"] .rp-flow__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp-flow[data-n="3"] .rp-flow__fan { --edge: 25%; }
  .rp-flow[data-n="3"] .rp-flow__row .rp-flow__box:nth-child(n+2)::before { content: none; }
  .rp-flow[data-n="3"] .rp-flow__row .rp-flow__box:nth-child(even)::before {
    content: "";
    position: absolute;
    left: calc(-0.5 * var(--space-4) - 4px);
    top: 18px;
    width: 5px;
    height: 10px;
    border-left: 1.5px solid var(--border-active);
    border-right: 1.5px solid var(--border-active);
  }
}

@media (max-width: 760px) {
  .rp-flow[data-n="2"] .rp-flow__row,
  .rp-flow[data-n="3"] .rp-flow__row,
  .rp-flow[data-n="4"] .rp-flow__row {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
  .rp-flow .rp-flow__row .rp-flow__box::before { content: none !important; }
  /* single column: the fan is one straight stem, ticks would double it */
  .rp-flow__fan::before { content: none; }
  .rp-flow .rp-flow__row .rp-flow__box::after { content: none; }
}

.rp-call__chip {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 3px 7px;
  border-radius: var(--radius-sm);
  background: var(--background-subtle);
  border: 1px solid var(--border-subtle);
  color: var(--foreground-muted);
}

.rp-breakdown__note {
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--foreground-muted);
  margin: var(--space-3) 0 0;
}


/* ── Per-ribbon hover (2026-08-10) ─────────────────────────────────────────
   Each section→stream ribbon pops on its own hover, and lights its two
   endpoints. pointer-events:stroke on the path makes only the drawn line
   hot, not its bounding box, so neighbouring ribbons stay reachable. */
.mev-flow { transition: opacity var(--transition-fast), filter var(--transition-fast); }
.mev-flow--hot {
  opacity: 1 !important;
  filter: brightness(1.35) saturate(1.2);
}
/* When any ribbon is hot, its endpoints borrow the direct-hover treatment. */
.mev-seg.mev-endpoint--hot,
.mev-stream.mev-endpoint--hot {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--seg-hue, var(--str-hue, #fff)) 13%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .mev-seg.mev-endpoint--hot,
  .mev-stream.mev-endpoint--hot { transform: none; }
}


/* ── Step boxes read as discrete stages (2026-08-10) ───────────────────────
   Each proposed call is outlined in its own number-circle hue, so stages
   stop blurring together. 45% mix keeps it an outline, not a glow. */
.rp-flow__box--s1 { --node-hue: var(--stream-1); }
.rp-flow__box--s2 { --node-hue: var(--stream-2); }
.rp-flow__box--s3 { --node-hue: var(--stream-3); }
.rp-flow__box--s1, .rp-flow__box--s2, .rp-flow__box--s3 {
  border-color: color-mix(in srgb, var(--node-hue) 45%, var(--border-subtle));
}

/* The unboxed intro line that replaced the verdict banner. */
.rp-intro {
  margin: 0 0 var(--space-3) 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--foreground-secondary);
}
.rp-intro strong { color: var(--foreground); font-weight: 500; }

/* ── Zone 3 · how demanding it is ──────────────────────────────
   Replaced the per-token surprisal chart. Reuses .mev-gauge, which was
   already in this file as dead CSS with no JS references. */
.mev-col--diff { padding-left: var(--space-5); }
.mev-diff {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  gap: var(--space-3);
}
/* Score and grade on ONE line: "78 /100  HARD". The pill used to sit on its own
   row beneath, which read as a second, separate fact and left a column of dead
   space beside a 44px numeral. `baseline` aligns the numeral and the unit; the
   pill is a box, not text, so it centres against the numeral's optical middle
   instead — hence the explicit align-self rather than inheriting baseline. */
.mev-diff__score { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.mev-diff__num {
  font-family: var(--font-sans);
  font-size: 44px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--foreground);
  font-variant-numeric: tabular-nums;
}
.mev-diff__unit { font-family: var(--font-mono); font-size: 13px; color: var(--foreground-faint); }
.mev-diff__pill {
  align-self: center;
  margin-left: var(--space-2);
  flex: 0 0 auto;
}
.mev-axes { display: flex; flex-direction: column; gap: 7px; margin-top: var(--space-2); }
/* Named axes, not initials. "R / F / P / K" cost the reader a decode step and
   bought nothing — the row had 14px of label against a bar running the full
   column width. Spending that width on the word instead is the better trade:
   the label is the part you read, the bar only needs to be long enough to
   compare four values against each other. */
.mev-ax { display: grid; grid-template-columns: 76px 26px minmax(0, 1fr); align-items: center; gap: 8px; }
.mev-ax__k {
  font-family: var(--font-mono); font-size: 11px; color: var(--foreground-faint);
  letter-spacing: -0.01em; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 5px;
}
/* `.mev-ax__info` lived here — a 14px ⓘ per axis row routing to the
   methodology modal. Removed 2026-08-13 with the buttons themselves
   (models-eye-view.js `difficultyHtml`): the schematic is a glance surface and
   four icons in it read as clutter. The route survives on the expanded tiles. */
/* The 26px margin is a leftover from this gauge's previous home; in the grid it
   just shoves every bar off its track. Cap the length here too — past ~190px
   the bars stop being a comparison and start being decoration. */
.mev-ax .mev-gauge { margin-left: 0; max-width: 190px; }
.mev-ax__v {
  font-family: var(--font-mono); font-size: 12px; text-align: right;
  color: var(--foreground-secondary); font-variant-numeric: tabular-nums;
}
.mev-gauge--ok   { background: var(--semantic-ok); }
.mev-gauge--warn { background: var(--semantic-warn); }
.mev-gauge--fail { background: var(--semantic-fail); }
.mev-gauge--muted{ background: var(--foreground-faint); }

/* Staged reveal: the difficulty column takes the slot the chart held in the
   0/180/380/480ms cascade, or it would appear instantly, out of step. */
.mev-diff { animation: mev-rise 260ms ease-out 380ms backwards; }
@media (prefers-reduced-motion: reduce) { .mev-diff { animation: none !important; } }

/* Stream roster: the CONTENTS of "its attention clusters into N groups:", so
   they are indented under it. Flush left, the lead-in and its list read as
   four unrelated statements. */
.mev-card__bullets li.mev-card__bullet--sub {
  padding-left: 28px;
  color: var(--foreground-secondary);
}
.mev-card__bullets li.mev-card__bullet--sub::before { left: 15px; }

/* The difficulty readout is pressable (data-dd="axes"), so it needs the frame
   and padding the cards get — it was a bare column in the schematic. */
.mev-diff {
  padding: var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
}
.mev-diff__more { margin-top: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--border-subtle); }