/* Sidera Labs, Phase 2: the agent flow race (race.js). Ported from D2's "Agent flow race" CSS, same sizes.
   Phase 2 changes (PHASE-2-PROMPT.md §7.2, §7.7): no halo behind model calls, no dashed rule between the lanes
   (space instead), the "Illustrative" tag is a quiet filled label rather than an outlined box. The thin group boxes
   stay. Only page tokens are used, with fallbacks. race.js writes --k (0–1) on each timed mark; 1 is finished. */

.p2-race {
   min-width: 0;
   color: var(--text, #d9d7d2);
   font-family: var(--f-sans, "Schibsted Grotesk", system-ui, sans-serif);
}
.p2-race :focus-visible { outline: 2px solid var(--ember-hi, #ffb27a); outline-offset: 3px; }

/* intro: legend + Illustrative tag */
.p2-race-intro {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   gap: 20px;
   flex-wrap: wrap;
   margin-bottom: 36px;
}
.p2-race-legend {
   list-style: none;
   display: flex;
   gap: 22px;
   flex-wrap: wrap;
   margin: 0;
   padding: 0;
   font-size: 14px;
   color: var(--muted, #9b9890);
}
.p2-race-legend li { display: inline-flex; align-items: center; gap: 8px; }
.p2-race-legend svg { width: 14px; height: 14px; overflow: visible; }
.p2-race-illus {
   font-size: 12px;
   line-height: 1.5;
   color: var(--muted, #9b9890);
   background: color-mix(in srgb, var(--star, #f2f2ee) 8%, transparent);
   padding: 2px 8px;
}

/* lanes: separated by space, no rule */
.p2-race-lane + .p2-race-lane { margin-top: 64px; }
.p2-race-head {
   display: flex;
   flex-wrap: wrap;
   align-items: baseline;
   gap: 10px 36px;
   margin-bottom: 14px;
}
.p2-race-head h3 {
   margin: 0;
   color: var(--star, #f2f2ee);
   font: 500 20px/1.3 var(--f-sans, "Schibsted Grotesk", system-ui, sans-serif);
   letter-spacing: -0.01em;
}
.p2-race-what { color: var(--muted, #9b9890); font-size: 14px; }
.p2-race-stats {
   display: flex;
   flex-wrap: wrap;
   gap: 6px 26px;
   margin: 0;
   font-size: 14px;
   color: var(--muted, #9b9890);
}
.p2-race-stats div { display: flex; gap: 8px; align-items: baseline; }
.p2-race-stats dt { margin: 0; }
.p2-race-stats dd {
   margin: 0;
   min-width: 2.2ch;
   color: var(--star, #f2f2ee);
   font-variant-numeric: tabular-nums;
   font-weight: 500;
}
.p2-race-stats .p2-race-state { color: var(--warn, #e9bc64); }
.p2-race-stats .p2-race-state.is-done { color: var(--ok, #9fd8a6); }

/* the diagram scrolls sideways inside its own frame on narrow screens */
.p2-race-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.p2-race-scroll svg { display: block; width: 100%; min-width: 960px; height: auto; }

/* Replay: D2's small outlined button with its boxed icon cell */
.p2-race-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 24px; }
/* the timing note: the elapsed times are for show (Jason) */
.p2-race-note { margin: 0; font: 400 12px/1.4 var(--f-sans, "Schibsted Grotesk", system-ui, sans-serif); color: var(--muted, #9b9890); }
.p2-race-replay {
   display: inline-flex;
   align-items: stretch;
   gap: 0;
   margin: 0;
   padding: 0;
   border: 1px solid var(--star, #f2f2ee);
   border-radius: 0;
   color: var(--star, #f2f2ee);
   background: transparent;
   font: 500 15px/1 var(--f-sans, "Schibsted Grotesk", system-ui, sans-serif);
   cursor: pointer;
   transition: background .2s, color .2s, border-color .2s;
}
.p2-race-replay > span { padding: 10px 14px; }
.p2-race-replay .p2-race-box {
   display: grid;
   place-items: center;
   width: 36px;
   padding: 0;
   border-left: 1px solid currentColor;
}
.p2-race-replay svg { width: 14px; height: 14px; }
.p2-race-replay:hover { border-color: var(--ember-hi, #ffb27a); color: var(--ember-hi, #ffb27a); }
.p2-race-replay:active { transform: translateY(1px); }

/* SVG marks. Off edge = D2's #262626 (star at ~16% on black); on edge = star at 42%, as in D2. */
.p2-race-edge {
   fill: none;
   stroke: var(--star, #f2f2ee);
   stroke-width: 1.4;
   stroke-opacity: calc(.157 + .263 * var(--k, 1));
}
.p2-race-edge.is-future { stroke-opacity: .157; }
.p2-race-back {
   fill: none;
   stroke: var(--err, #f2877a);
   stroke-width: 1;
   stroke-dasharray: 4 5;
   opacity: calc(.9 * var(--k, 1));
}
.p2-race-node { opacity: var(--k, 1); }
.p2-race-node.is-future { opacity: .6; }
.p2-race-m { fill: var(--star, #f2f2ee); }
.p2-race-c { fill: var(--ember, #e8823f); }
.p2-race-d { fill: var(--review, #9cb8ff); }
.p2-race-node.is-future .p2-race-m,
.p2-race-node.is-future .p2-race-c { fill: var(--line-hi, #3d3d3d); }
.p2-race-ok-ring { fill: none; stroke: var(--ok, #9fd8a6); stroke-width: 1.5; }
.p2-race-ok-tick { fill: none; stroke: var(--ok, #9fd8a6); stroke-width: 2; }
.p2-race-group { fill: none; stroke: var(--line-hi, #3d3d3d); stroke-width: 1; }
.p2-race-cap { fill: var(--muted, #9b9890); font: 500 15px var(--f-sans, "Schibsted Grotesk", system-ui, sans-serif); }
.p2-race-lab { fill: var(--dim, #86837d); font: 400 13px var(--f-sans, "Schibsted Grotesk", system-ui, sans-serif); }

/* the one-agent loop is "still running": its last step breathes once the race is over (D2's pulse) */
.p2-race-node.is-pulse { animation: p2-race-pulse 1.6s ease-in-out infinite; }
@keyframes p2-race-pulse { 50% { opacity: .35; } }

@media (prefers-reduced-motion: reduce) {
   .p2-race-node.is-pulse { animation: none; }
   .p2-race-replay { transition: none; }
}