/* Runtime, Benefits (builder B8): the fleet in operation as an isometric map (rt-fleet.js draws it; the words are HTML).
   Tokens and the six type roles only. Vermilion marks the one environment that was resumed and its unbroken state. */

.rt-fleet{position:relative;margin:0}
.rt-map{position:relative}
.rt-stage{position:relative;width:100%;aspect-ratio:780 / 500}
.rt-svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.rt-glow{position:absolute;left:4%;top:6%;width:84%;height:90%;background:radial-gradient(50% 50% at 50% 55%,rgba(31,58,38,.55),rgba(31,58,38,0) 70%),radial-gradient(22% 18% at 58% 34%,rgba(226,70,42,.12),rgba(226,70,42,0) 80%);pointer-events:none}
.rt-fleet [data-at]{position:absolute}
.rt-fleet [data-al="c"]{transform:translateX(-50%)}
.rt-fleet [data-al="r"]{transform:translateX(-100%)}

/* ---------- the drawing ---------- */
.rt-st{fill:rgba(255,255,255,.03);stroke:rgba(255,255,255,.26);stroke-width:1}
.rt-sf{fill:#121312;stroke:rgba(255,255,255,.2);stroke-width:1}
.rt-sf2{fill:#171817;stroke:rgba(255,255,255,.2);stroke-width:1}
.rt-tick{stroke:rgba(255,255,255,.34);stroke-width:1}
.rt-aisle{fill:rgba(255,255,255,.2)}
.rt-bus path{fill:none;stroke:rgba(255,255,255,.34);stroke-width:1}
.rt-node{fill:rgba(255,255,255,.6)}
.rt-stem{fill:none;stroke:rgba(255,255,255,.5);stroke-width:1.2}
.rt-jn{fill:#0a0a0a;stroke:rgba(255,255,255,.75);stroke-width:1.2}
.rt-ct{fill:#262726;stroke:rgba(255,255,255,.42);stroke-width:1;stroke-linejoin:round;transition:fill .3s var(--ease)}
.rt-cr{fill:#121312;stroke:rgba(255,255,255,.26);stroke-width:1;stroke-linejoin:round;transition:fill .3s var(--ease)}
.rt-cl{fill:#1a1b1a;stroke:rgba(255,255,255,.26);stroke-width:1;stroke-linejoin:round;transition:fill .3s var(--ease)}
.rt-ci{fill:none;stroke:rgba(255,255,255,.13);stroke-width:1}
.rt-led{fill:rgba(245,245,243,.8);transition:fill .3s}
.rt-run{fill:rgba(245,245,243,.9);transition:opacity .2s}
.rt-pz{opacity:0;transition:opacity .2s}
.rt-pz line{stroke:rgba(245,245,243,.9);stroke-width:1.7;stroke-linecap:round}
.rt-tt{fill:#2a2b2a;stroke:rgba(255,255,255,.5);stroke-width:1;stroke-linejoin:round}
.rt-tf{fill:#121312;stroke:rgba(255,255,255,.3);stroke-width:1;stroke-linejoin:round}
.rt-tf2{fill:#1a1b1a;stroke:rgba(255,255,255,.3);stroke-width:1;stroke-linejoin:round}
.rt-chd{fill:rgba(245,245,243,.25);transition:fill .3s var(--ease) var(--d,0ms)}
.rt-flow{fill:none;stroke:rgba(245,245,243,.7);stroke-width:1.4;stroke-linecap:round}
.rt-req{fill:none;stroke:var(--verm);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.rt-lead{fill:none;stroke:rgba(255,255,255,.34);stroke-width:1}
.rt-ldot{fill:rgba(245,245,243,.85)}
.rt-lead.rt-lead-tl{stroke:var(--verm);stroke-width:1.2}
.rt-ldot.rt-lead-tl{fill:var(--verm)}

/* states: paused cells, the lit (resumed) one */
.rt-fleet.s2 .rt-cell.pz .rt-run{opacity:0}
.rt-fleet.s2 .rt-cell.pz .rt-pz{opacity:1}
.rt-fleet.s2 .rt-cell.pz .rt-ct{fill:#171817}
.rt-fleet.s2 .rt-cell.pz .rt-led{fill:rgba(245,245,243,.18)}
.rt-fleet.s3 .rt-cell.lit .rt-ct{fill:var(--verm);stroke:rgba(255,255,255,.6);transition-delay:.3s}
.rt-fleet.s3 .rt-cell.lit .rt-cr{fill:#6e2416;transition-delay:.3s}
.rt-fleet.s3 .rt-cell.lit .rt-cl{fill:#93301d;transition-delay:.3s}
.rt-fleet.s3 .rt-cell.lit .rt-ci{stroke:rgba(255,255,255,.35)}
.rt-fleet.s3 .rt-cell.lit .rt-run{fill:#fff}
.rt-fleet.s5 .rt-chd{fill:#fff}

/* ---------- entrance (one pass), then rest ---------- */
.js .rt-fleet .rt-cell{opacity:0;transform:translateY(-12px);transition:opacity .22s var(--ease) var(--d),transform .42s var(--spring) var(--d)}
.js .rt-fleet.s1 .rt-cell{opacity:1;transform:none}
.js .rt-fleet .rt-req{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .4s var(--ease-io)}
.js .rt-fleet.s3 .rt-req{stroke-dashoffset:0}
.js .rt-fleet .rt-flow{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .42s var(--ease) var(--d,0ms)}
.js .rt-fleet.s5 .rt-flow{stroke-dashoffset:0}

@media (prefers-reduced-motion:reduce){
  .rt-fleet *,.rt-fleet *::before,.rt-fleet *::after{transition:none!important}
}


/* the kept state */
.rt-kept{fill:none;stroke:var(--verm);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* the store's bands; named apart from the timeline's .rt-sb buttons, whose all:unset had been clearing their shape */
.rt-sbd{fill:#171817;stroke:rgba(255,255,255,.45);stroke-width:1}
.rt-stt{fill:#2a2b2a;stroke:rgba(255,255,255,.6);stroke-width:1}
.js .rt-fleet .rt-keep{opacity:0;transition:opacity var(--t2) var(--ease)}
.js .rt-fleet.s3 .rt-keep{opacity:1}
/* focus: the chosen point's part stays whole, the rest steps back */
.rt-svg .rt-bus,.rt-svg .rt-in,.rt-svg .rt-out,.rt-svg .rt-req,.rt-svg .rt-jn,.rt-svg .rt-slab{transition:opacity var(--t2) var(--ease)}
.rt-svg .rt-keep{transition:opacity var(--t2) var(--ease)}
.js .rt-fleet[data-f="ctx"] .rt-cell:not(.lit),.js .rt-fleet[data-f="free"] .rt-cell:not(.lit){opacity:.3}
.rt-fleet[data-f="ctx"] .rt-bus,.rt-fleet[data-f="ctx"] .rt-in,.rt-fleet[data-f="ctx"] .rt-out,.rt-fleet[data-f="ctx"] .rt-req{opacity:.2}
.rt-fleet[data-f="fleet"] .rt-in,.rt-fleet[data-f="fleet"] .rt-out,.js .rt-fleet[data-f="fleet"] .rt-keep{opacity:.2}
.rt-fleet[data-f="free"] .rt-bus,.rt-fleet[data-f="free"] .rt-req,.js .rt-fleet[data-f="free"] .rt-keep{opacity:.2}
.js .rt-fleet[data-f="free"] .rt-cell.lit{opacity:.55}
.js .rt-fleet[data-f="ctx"] .rt-cell.lit .rt-ct{stroke:#fff;stroke-width:1.6}
/* r16 (notes 269-271): paused environments shown by state, not by a media symbol */
.rt-pz{display:none}
.rt-fleet.s2 .rt-cell.pz .rt-ct{stroke-dasharray:3 3}

/* ---------- r18 (B2, notes 334, 335, 337): the site's scrollable timeline (as on the industry pages), the map as its board ---------- */
.rt-pin{position:relative;height:calc(100vh + 200vh)}
.rt-stick{position:sticky;top:var(--navh);height:calc(100vh - var(--navh));display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.rt-hd{margin-bottom:clamp(28px,3.4vw,44px)}
.rt-tl{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);height:min(520px,calc(100vh - var(--navh) - 250px));min-height:400px}
.rt-stops{grid-column:1 / 5;list-style:none;margin:0;padding:0 0 0 40px;display:flex;flex-direction:column;justify-content:space-between}
.rt-sn{position:relative;font:var(--w-h3) var(--s-lede)/1.3 var(--f);letter-spacing:-.012em;color:rgba(255,255,255,.42);transition:color var(--t1) var(--ease)}
.rt-sn::before{content:'';position:absolute;left:-36.5px;top:9px;width:9px;height:9px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45);transition:background-color var(--t1) var(--ease),box-shadow var(--t1)}
.rt-stop.past .rt-sn::before,.rt-stop.on .rt-sn::before{background:#f5f5f3;box-shadow:none}
.rt-sb{all:unset;cursor:pointer}
.rt-sb:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:4px}
.rt-sl{font:400 var(--s-body)/1.55 var(--f);color:rgba(255,255,255,.34);margin-top:8px;max-width:27em;transition:color var(--t1) var(--ease)}
.rt-stop.on .rt-sn{color:#fff}
.rt-stop.on .rt-sl{color:var(--fg2)}
.rt-rail{position:absolute;left:8px;top:0;width:1px;height:0;background:rgba(255,255,255,.16)}
.rt-fill{position:absolute;left:0;top:0;width:1px;height:var(--y,0px);background:rgba(255,255,255,.75)}
.rt-dot{position:absolute;left:-6px;top:-6px;width:13px;height:13px;border-radius:50%;background:var(--verm);box-shadow:0 0 0 5px rgba(226,70,42,.2);transform:translateY(var(--y,0px))}
.rt-board{position:absolute;top:0;bottom:0;right:0;left:calc((100% - 11 * var(--gap)) / 12 * 4 + 4 * var(--gap));display:grid;place-items:center}
.rt-board .rt-map{width:100%;max-height:100%}
.rt-board .rt-stage{max-height:100%;margin:0 auto}
/* 335: in "Build with freedom" the three channel blocks turn vermilion */
.rt-chan .rt-tt,.rt-chan .rt-tf,.rt-chan .rt-tf2{transition:fill var(--t2) var(--ease)}
.rt-fleet[data-f="free"].s5 .rt-chan .rt-tt{fill:var(--verm)}
.rt-fleet[data-f="free"].s5 .rt-chan .rt-tf{fill:#6e2416}
.rt-fleet[data-f="free"].s5 .rt-chan .rt-tf2{fill:#93301d}
.rt-fleet[data-f="free"].s5 .rt-chan .rt-chd{fill:#fff}
/* phone, as the industry timeline: no pin; the stops, then the board under them */
@media (max-width:760px){
  .rt-pin{height:auto}
  .rt-stick{position:static;height:auto;display:block;overflow:visible}
  .rt-tl{display:block;height:auto;min-height:0}
  .rt-board{position:relative;left:auto;right:auto;top:auto;bottom:auto;margin-top:28px}
  .rt-stops{padding-left:30px;display:block}
  .rt-stop+.rt-stop{margin-top:36px}
  .rt-sn::before{left:-26.5px}
  .rt-sn{color:#fff} .rt-sl{color:var(--fg2)}
  /* client 22 Oct: the phone holds too where the scene fits under the bar (rt-fleet.js adds .rt-pin-ph, and narrows the map if it must);
     a little less space between the parts, and the stops dim and light as on the desktop */
  .rt-pin.rt-pin-ph{height:calc(100vh + 100vh);height:calc(100svh + 100svh)}
  .rt-pin-ph .rt-stick{position:sticky;top:var(--navh);height:calc(100vh - var(--navh));height:calc(100svh - var(--navh));display:flex;flex-direction:column;justify-content:center;overflow:hidden}
  .rt-pin-ph .rt-stop+.rt-stop{margin-top:22px}
  .rt-pin-ph .rt-board{margin-top:20px}
  .rt-pin-ph .rt-sn{color:rgba(255,255,255,.42)} .rt-pin-ph .rt-sl{color:rgba(255,255,255,.34)}
  .rt-pin-ph .rt-stop.on .rt-sn{color:#fff} .rt-pin-ph .rt-stop.on .rt-sl{color:var(--fg2)}
}
@media (prefers-reduced-motion:reduce){ .rt-dot,.rt-fill{transition:none} }