/* ============================================================
   OPTIMIZE PLATE — v3 re-skin of the hero solve animation.

   The handoff prototype is built in the retired gold system: #c9a84c,
   DM Sans, 14px rounded cards, blur orbs, gradient bars, glow shadows.
   Every one of those is on v3's forbidden list. The mechanic is kept
   exactly; the skin is rebuilt:

     gold #c9a84c        -> Signal #D7E84A, held to a controlled pulse
     DM Sans / DM Mono   -> Geist / Geist Mono
     rounded cards       -> hairline rules, square corners
     blur orb + gridfx   -> dropped entirely
     gradient KPI bar    -> solid Signal on a rule-coloured track
     glow shadows        -> none

   One deliberate departure from the prototype: there, candidate segments
   and the locked plan are both gold, which in v3 would put Signal across
   the entire map — the exact "reads as a lime brand" failure §3 warns
   about. Here the churn is neutral Bone and only the locked plan is
   Signal, so the accent marks the resolution rather than the noise.

   All selectors are prefixed .ox- : the prototype's .row/.panel/.kpi/
   .top/.btn would collide with the page's own classes.
   ============================================================ */

/* no closing rule and no deep pad: the Bone band below is its own divider */
.ox{padding:0 0 20px;row-gap:0}

/* The run control lives in the lede grid, not the plate: it sits to the right
   of the standfirst on the same row, so the KPI band can come straight up
   under the opening paragraph instead of waiting behind a row of its own. */
.ox-run{grid-column:8 / span 5;display:flex;align-items:flex-end;
  justify-content:flex-end;gap:18px;align-self:end}
.ox-runmeta{text-align:right}
.ox-runmeta .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink5);margin-bottom:4px}
.ox-runmeta .v{font-family:var(--mono);font-size:13px;color:var(--ink3)}

/* One-Signal rule: the lede's Signal is the "One click." clause, so the run
   control is an outline button rather than a Signal fill. */
.ox-btn{display:inline-flex;align-items:center;gap:9px;
  font-family:var(--sans);font-size:14px;font-weight:600;
  padding:13px 20px;border:1px solid var(--ink3);
  background:transparent;color:var(--ink);cursor:pointer;
  transition:background .16s linear,color .16s linear,border-color .16s linear}
.ox-btn:hover{background:var(--signal-h);border-color:var(--signal-h)}
.ox-btn svg{width:14px;height:14px;fill:currentColor;flex:none}
.ox-btn[data-state="running"]{background:transparent;color:var(--ink4);
  border-color:var(--rule2);cursor:default}
.ox-btn:focus-visible{outline:2px solid var(--signal);outline-offset:3px}

/* honest labelling: this is a simulation, and the figures are modelled */
.ox-note{grid-column:1 / span 12;margin-top:22px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  color:var(--ink5);line-height:1.5}

/* ---- KPI band: rule-divided cells, never cards ---- */
.ox-kpis{grid-column:1 / span 12;margin-top:0;
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--ink)}
.ox-kpi{padding:32px 24px 20px 0;border-right:1px solid var(--rule);
  position:relative}
.ox-kpi:last-child{border-right:0}
.ox-kpi .lab{font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink5)}
.ox-kpi .val{font-family:var(--mono);font-weight:500;
  font-size:clamp(1.5rem,2.4vw,2.05rem);letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;margin-top:11px;color:var(--ink)}
.ox-kpi[data-lead="1"] .val{color:var(--ink)}   /* plate's Signal is the routes */
.ox-kpi .foot{font-family:var(--mono);font-size:10.5px;color:var(--ink5);margin-top:7px}
.ox-kpi .bar{position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--ink4);transition:width .18s linear}

/* ---- stage ---- */
.ox-stage{grid-column:1 / span 12;margin-top:26px;
  display:grid;grid-template-columns:230px 1fr 250px;gap:26px}

.ox-panel{display:flex;flex-direction:column;min-width:0}
.ox-phead{display:flex;align-items:baseline;justify-content:space-between;
  gap:10px;padding-bottom:9px;border-bottom:1px solid var(--ink)}
.ox-phead .nm{font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.ox-phead .ct{font-family:var(--mono);font-size:10.5px;color:var(--ink5)}
.ox-rows{display:flex;flex-direction:column;overflow:hidden}

.ox-row{display:grid;grid-template-columns:1fr auto;gap:8px;
  padding:8px 8px 8px 9px;border-bottom:1px solid var(--rule);
  border-left:2px solid transparent;
  transition:background 150ms linear,border-color 150ms linear,opacity 250ms linear}
.ox-row.idle{opacity:.45}
.ox-row.scan{background:rgba(215,232,74,.06);border-left-color:rgba(215,232,74,.45)}
.ox-row.locked{background:rgba(215,232,74,.10);border-left-color:var(--signal)}
.ox-row .a{font-size:13px;color:var(--ink2);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.ox-row .a i{font-style:normal;color:var(--ink5)}
.ox-row .b{font-family:var(--mono);font-size:11px;color:var(--ink5);white-space:nowrap}
.ox-row.locked .b{color:var(--signal)}

/* ---- map ---- */
.ox-map{position:relative;background:var(--bg2);border:1px solid var(--rule);
  min-height:430px;overflow:hidden}
.ox-map svg{width:100%;height:100%;display:block}
.ox-country{fill:var(--bg3);stroke:var(--rule2);stroke-width:1}
.ox-city{fill:var(--ink5)}
.ox-rlabel{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;fill:var(--ink5)}

/* candidates churn in neutral; only the plan is Signal */
.ox-cand{stroke:rgba(242,240,233,.34);stroke-width:1;fill:none;
  stroke-dasharray:3 4}
.ox-final{stroke:var(--signal);stroke-width:2;fill:none}
.ox-pA{fill:rgba(242,240,233,.55)}
.ox-pB{fill:rgba(242,240,233,.3)}
.ox-final ~ .ox-pA,.ox-nodes .ox-pA{fill:var(--signal)}
.ox-nodes .ox-pB{fill:rgba(215,232,74,.55)}

@keyframes ox-march{to{stroke-dashoffset:-14}}
@keyframes ox-pulse{50%{opacity:.35}}

.ox-status{position:absolute;left:14px;bottom:12px;display:flex;
  align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;
  color:var(--ink3)}
.ox-dot{width:6px;height:6px;border-radius:50%;background:var(--ink5);flex:none}
.ox-dot.live{background:var(--signal);animation:ox-pulse 2s ease-in-out infinite}
.ox-dot.done{background:var(--signal)}

.ox-legend{position:absolute;right:14px;bottom:12px;display:flex;gap:16px;
  font-family:var(--mono);font-size:10px;color:var(--ink5)}
.ox-legend span{display:flex;align-items:center;gap:7px}
.ox-legend i{display:block;width:15px;flex:none}
.ox-legend .sw1{height:1px;background:rgba(242,240,233,.34)}
.ox-legend .sw2{height:2px;background:var(--signal)}

@media(max-width:900px){
  .ox-run,.ox-kpis,.ox-stage,.ox-note{grid-column:1 / -1}
  .ox-run{justify-content:flex-start}
  .ox-kpis{grid-template-columns:1fr 1fr}
  .ox-kpi{border-right:0;padding-right:0}
  .ox-kpi:nth-child(odd){border-right:1px solid var(--rule);padding-right:20px}
  .ox-stage{grid-template-columns:1fr;gap:22px}
  .ox-map{order:-1;min-height:330px}
  .ox-legend{display:none}
}

@media (prefers-reduced-motion:reduce){
  .ox-dot.live{animation:none}
  .ox-cand{animation:none !important}
  .ox-kpi .bar{transition:none}
}