/* ══ THE ROAD TO THE CHAMPIONSHIP — East Regional demo ═════════════════════
   One journey: the two regionals feed the Global Championship. The stop that
   is live now carries the gold; the stops still to come are quieter. Rides
   the page's tokens; nothing here restyles an existing rule. */
.rd{position:relative;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);column-gap:clamp(64px,8vw,132px);row-gap:22px;align-items:start}
.rd-stop[data-stop="east"]{grid-column:1;grid-row:1}
.rd-stop[data-stop="west"]{grid-column:1;grid-row:2}
.rd-stop[data-stop="global"]{grid-column:2;grid-row:1/3;align-self:center}
.rd-wires{position:absolute;left:0;top:0;pointer-events:none;z-index:0;overflow:visible}
.rd-wires path{fill:none;stroke-width:1.5;transition:opacity .3s}
.rd-wires path.in{stroke:rgba(255,255,255,.16)}
.rd-wires path.in.east{stroke:rgba(226,199,102,.45)}
.rd-wires path.feed{stroke-width:2}
.rd-wires path.feed.east{stroke:var(--gold);filter:drop-shadow(0 0 6px rgba(183,158,49,.55))}
.rd-wires path.feed.west{stroke:rgba(154,158,165,.6);stroke-dasharray:6 6}

/* a stop */
.rd-stop{position:relative;z-index:1;border:1px solid var(--line-2);background:rgba(10,11,13,.88);padding:18px 20px 20px;cursor:pointer;
  transition:opacity .3s,border-color .3s,box-shadow .3s}
.rd-stop:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.rd-stop.is-live{border-color:rgba(183,158,49,.55);background:linear-gradient(160deg,rgba(183,158,49,.10),rgba(10,11,13,.9) 45%)}
.rd-stop.is-live::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:3px;background:var(--gold);box-shadow:0 0 18px rgba(183,158,49,.6)}
.rd-stop.is-next,.rd-stop.is-later{background:rgba(8,9,11,.7)}
.rd-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--line-2)}
.rd-no{font:700 34px/1 var(--wide);color:transparent;-webkit-text-stroke:1px var(--gun)}
.rd-stop.is-live .rd-no{-webkit-text-stroke:1px var(--gold);color:rgba(183,158,49,.14)}
.rd-id h3{margin:0;font:700 clamp(16px,1.5vw,21px)/1.1 var(--wide);text-transform:uppercase}
.rd-id p{margin:8px 0 0;font:500 11px/1.5 var(--chy);letter-spacing:.18em;text-transform:uppercase;color:var(--ti)}
.rd-stop.is-live .rd-when{color:var(--gold-ink)}
.rd-chip{padding:7px 10px;border:1px solid var(--line-2);font:600 10px/1 var(--chy);letter-spacing:.24em;text-transform:uppercase;color:var(--ti);white-space:nowrap}
.rd-stop.is-live .rd-chip{border-color:rgba(183,158,49,.6);color:var(--gold-ink);background:rgba(183,158,49,.08)}

/* its bracket */
.rd-br{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,.85fr);gap:28px;align-items:center}
.rd-stop[data-stop="global"] .rd-br{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.rd-col{display:flex;flex-direction:column;justify-content:space-around;gap:12px;min-width:0}
.rd-lab{font:500 9px/1 var(--chy);letter-spacing:.3em;color:var(--ti);text-transform:uppercase}
.rd-g{position:relative;border:1px solid var(--line-2);background:#07080A}
.rd-gm{display:flex;justify-content:space-between;gap:8px;padding:7px 10px;border-bottom:1px solid var(--line);font:500 9px/1.2 var(--chy);letter-spacing:.2em;color:var(--ti);text-transform:uppercase}
.rd-g.final{border-color:rgba(183,158,49,.4)}
.rd-stop[data-stop="global"] .rd-g.final{border-color:var(--gold);background:linear-gradient(160deg,rgba(183,158,49,.16),#07080A 60%)}
.rd-t{display:flex;align-items:center;gap:9px;min-height:44px;padding:6px 10px;border-left:3px solid var(--tc,transparent);min-width:0}
.rd-t + .rd-t{border-top:1px solid var(--line)}
.rd-t b{min-width:0;font:500 13px/1.1 var(--chy);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rd-cr{flex:none;width:28px;height:28px;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.rd-sd{flex:none;font:700 9px/1 var(--wide);color:var(--ti)}
.rd-t.tbd b{color:var(--ti)}
.rd-tx{display:flex;flex-direction:column;gap:3px;min-width:0}
.rd-tx small{font:500 9px/1.3 var(--chy);letter-spacing:.18em;color:var(--gun);text-transform:uppercase}
.rd-ph{flex:none;width:22px;height:22px;border-radius:50%;border:1px dashed var(--gun)}
/* the cut: one gold dashed line under seat #n of the race card, said once (the bubble lists only the teams below it) */
.rd-cut{display:flex;justify-content:flex-end;padding:5px 10px;border-top:1px dashed var(--gold);font:600 9px/1 var(--chy);letter-spacing:.3em;text-transform:uppercase;color:var(--gold-ink)}
.rd-t.seed[data-from^="east"]{border-left-color:var(--gold)}
.rd-t.seed[data-from^="east"] b{color:var(--gold-ink)}
.rd-t.seed[data-from^="east"] .rd-ph{border:1px solid var(--gold);background:rgba(183,158,49,.12)}
.rd-t.seed[data-from^="west"]{border-left-color:var(--gun)}
.rd-t.seed[data-from^="west"] b{color:var(--bone)}
.rd-adv{border:1px dashed var(--gun);padding:9px 11px}
.rd-adv b{display:block;font:600 12px/1.1 var(--chy);letter-spacing:.14em;text-transform:uppercase;color:var(--bone)}
.rd-adv small{display:block;margin-top:5px;font:500 9px/1.3 var(--chy);letter-spacing:.18em;color:var(--ti);text-transform:uppercase}
.rd-stop.is-live .rd-adv{border-color:rgba(183,158,49,.6);background:rgba(183,158,49,.06)}
.rd-stop.is-live .rd-adv b{color:var(--gold-ink)}

/* a tap focuses one stop */
.rd[data-focus] .rd-stop:not(.is-focus){opacity:.4}
.rd-stop.is-focus{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 24px 60px -24px rgba(183,158,49,.55)}
.rd[data-focus] .rd-wires path{opacity:.25}
.rd[data-focus="east"] .rd-wires path.east,.rd[data-focus="west"] .rd-wires path.west,.rd[data-focus="global"] .rd-wires path.feed{opacity:1}

/* the sample rule, said once, under the road */
.rd-note{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:26px 0 0;font:500 12px/1.6 var(--chy);letter-spacing:.14em;text-transform:uppercase;color:var(--ti)}
.rd-note .tag{padding:5px 9px;border:1px solid rgba(183,158,49,.5);color:var(--gold-ink);font-size:10px;letter-spacing:.26em}

/* top to bottom: the stops stack and the connectors run down the left gutter */
@media (max-width:1100px){
  .rd{grid-template-columns:minmax(0,1fr);padding-left:28px}
  .rd-stop[data-stop]{grid-column:1;grid-row:auto;align-self:stretch}
}
@media (max-width:640px){
  .rd{padding-left:24px;row-gap:18px}
  .rd-stop{padding:14px 14px 16px}
  .rd-head{grid-template-columns:auto minmax(0,1fr);gap:12px}
  .rd-chip{grid-column:1/-1;justify-self:start}
  .rd-no{font-size:26px}
  .rd-br,.rd-stop[data-stop="global"] .rd-br{grid-template-columns:minmax(0,1fr);gap:14px}
  .rd-stop.is-later::after{width:110px;height:122px;right:-10px;top:-14px}
}
@media (prefers-reduced-motion:reduce){.rd-stop,.rd-wires path{transition:none}}

/* ══ EMBED (embed/oia/road.html) ═══════════════════════════════════════════
   Everything above this line is oakley/east-regional/road.css byte for byte, except the
   one asset path: an embed cannot load /oakley/* (the pitch gate), so the watermark is
   the public copy of the mark. scripts/test-oia-embeds-in-host.js holds that equal.
   Below: the live page's phone-compact road (live.html's <style>, "5 · the road,
   compact", RD1 Oct 11) carried into the frame, scoped to the embed, at the same 600px
   — no wires down the left edge, the race block KEPT (Carlos, Oct 18 2026: "where are the top 4?"), West one
   line, the Global seats a two-column grid; and the Day look: the stops stay dark
   plates (like the live cards and the bracket), so their tokens are reset inside. */
@media (max-width:600px){
  html[data-oia-embed="road"] .rd{padding-left:0}html[data-oia-embed="road"] .rd-wires{display:none}
  html[data-oia-embed="road"] .rd-stop[data-stop="west"] .rd-br{display:none}html[data-oia-embed="road"] .rd-stop[data-stop="west"] .rd-head{margin-bottom:0;padding-bottom:0;border-bottom:0}
  html[data-oia-embed="road"] .rd-stop[data-stop="global"] .rd-g{display:grid;grid-template-columns:1fr 1fr}
  html[data-oia-embed="road"] .rd-stop[data-stop="global"] .rd-gm{grid-column:1/-1}
  html[data-oia-embed="road"] .rd-stop[data-stop="global"] .rd-t{min-height:38px;border-top:1px solid var(--line)}
  html[data-oia-embed="road"] .rd-stop[data-stop="global"] .rd-t small{display:none}
}
/* inside a frame the names are the row: a long one wraps rather than truncating (road.css's ellipsis is for the
   page's wide columns); the head's designed line keeps its words together by shrinking, never by overflowing */
@media (max-width:1200px){html[data-oia-embed="road"] .rd-t b{white-space:normal;overflow:visible;text-overflow:clip}}   /* the page's own columns from 1200 up: the section stays the page's (test-oia-section-embeds holds it equal) */
@media (max-width:420px){html[data-oia-embed="road"] .sh h2{font-size:clamp(16px,6.2vw,48px)}}
@media (max-width:360px){html[data-oia-embed="road"] .rd-id h3{font-size:14px}}
html[data-oia-theme="day"] [data-oia-section="road"] .rd-stop{
  --bone:#F3F1EA;--ti:#9A9EA5;--gun:#54565A;--line:#1E2024;--line-2:#2C2F34;--gold:#B79E31;--gold-hi:#B79E31;color:var(--bone);background:#0A0B0D}
/* the plates are opaque on paper: night's translucent fills were sized for a black page */
html[data-oia-theme="day"] [data-oia-section="road"] .rd-stop.is-live{background:linear-gradient(160deg,rgba(183,158,49,.12),#0A0B0D 45%)}
html[data-oia-theme="day"] [data-oia-section="road"] .rd-stop.is-next,html[data-oia-theme="day"] [data-oia-section="road"] .rd-stop.is-later{background:#0A0B0D}
html[data-oia-theme="day"] [data-oia-section="road"] .rd-wires path.in{stroke:rgba(0,0,0,.18)}