/* ======================================================================
   RIDEFLOW 184 — THE LOOK.
   Lifted from the RunComp Screens and RunComp Graphs canvases, 4 Sep 2026.
   Every rule here is scoped to .rf184 so nothing older is restyled by
   accident; the shell rules at the bottom are the only globals.
   ====================================================================== */
.rf184{--sur1:var(--sur-1,#0e1114);--sur2:var(--sur-2,#14181c);--sur3:var(--sur-3,#1c2126);--lineh:var(--line-hi,#313a42);
  --f:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;display:flex;flex-direction:column;gap:8px;font:400 15px/1.5 var(--f);color:var(--tx)}
.rf184 *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.rf184 button{font-family:inherit;color:inherit;cursor:pointer}
.rf184 .sec{font:700 10px/1 var(--f);letter-spacing:.22em;color:var(--mut);display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:14px 0 2px}
.rf184 .sec i{font-style:normal;letter-spacing:.06em;font-weight:600;font-size:11px}
.rf184 .sec:first-child{margin-top:0}
.rf184 .card{background:var(--sur1)!important;border:1px solid var(--line)!important;border-radius:14px;padding:15px;margin:0}
.rf184 .tiny{font-size:11.5px;line-height:1.55;color:var(--mut);margin:0}
.rf184 .lab{font:800 8.5px/1 var(--f);letter-spacing:.26em;color:var(--volt)}
.rf184 .lab.mut{color:var(--mut);letter-spacing:.2em}
.rf184 .h2{font:800 italic 21px/1.1 var(--f);margin:8px 0 3px}
.rf184 .h1{font:800 24px/1.22 var(--f);letter-spacing:-.015em;margin:8px 0 4px}
.rf184 .h1 b,.rf184 .h2 b{color:var(--volt)}
.rf184 .bigbtn{display:block;width:100%;border-radius:14px;padding:20px 16px;margin:0;border:1px solid var(--volt);
  background:linear-gradient(180deg,color-mix(in srgb,var(--volt) 18%,transparent),color-mix(in srgb,var(--volt) 6%,transparent));color:var(--tx);
  font:800 italic 14.5px/1.3 var(--f);letter-spacing:.12em;box-shadow:0 0 24px color-mix(in srgb,var(--volt) 32%,transparent) inset;text-align:center}
.rf184 .bigbtn em{display:block;font-style:normal;font-size:11px;letter-spacing:.06em;font-weight:600;color:var(--tx2);margin-top:6px}
.rf184 .bigbtn.ghost{border-color:var(--lineh);background:var(--sur1);box-shadow:none;font-style:normal}
.rf184 .go{display:block;width:100%;height:54px;border:none;border-radius:13px;background:var(--volt);color:#fff;
  font:800 italic 12.5px/54px var(--f);letter-spacing:.2em;text-align:center;padding:0;margin:0}
.rf184 .go.alt{background:none;border:1px solid var(--line);color:var(--tx2);height:48px;font-style:normal;line-height:46px}
.rf184 .chips{display:flex;gap:6px;flex-wrap:wrap;margin:0}
.rf184 .chip{border:1px solid var(--line);background:var(--sur1);color:var(--tx2);border-radius:999px;padding:11px 16px;font:700 12px/1 var(--f)}
.rf184 .chip.on{background:var(--volt);border-color:var(--volt);color:#fff}
.rf184 .chip.won{border-color:var(--amber);color:var(--amber);background:rgba(245,197,24,.08)}
.rf184 .strow{display:flex;align-items:center;gap:10px;background:var(--sur2);border:1px solid var(--line);border-radius:12px;padding:11px 12px;width:100%;text-align:left}
.rf184 .strow.alt{background:var(--sur3)}
.rf184 .strow .gr{flex:none;width:42px;height:42px;border-radius:11px;background:var(--sur3);display:flex;align-items:center;justify-content:center;font:800 italic 16px/1 var(--f)}
.rf184 .strow .gr svg{width:20px;height:20px}
.rf184 .strow .mid{flex:1;min-width:0}
.rf184 .strow .r1{font:800 13px/1 var(--f);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rf184 .strow .r2{font:700 10px/1 var(--f);color:var(--mut);margin-top:5px;letter-spacing:.03em;display:flex;align-items:center;gap:7px}
.rf184 .strow .chev{color:var(--mut);font-size:16px;flex:none}
.rf184 .rnno{padding:2px 6px;border-radius:5px;background:rgba(255,255,255,.07);color:var(--tx2);font:800 9px/1.3 var(--f);letter-spacing:.1em}
.rf184 .rcdoor{display:block;width:100%;border:1px solid var(--volt);border-radius:14px;margin:0;
  background:linear-gradient(180deg,color-mix(in srgb,var(--volt) 18%,transparent),color-mix(in srgb,var(--volt) 4%,transparent));color:var(--tx);
  font:800 italic 13px/1 var(--f);letter-spacing:.12em;padding:16px 14px;text-align:left}
.rf184 .rcdoor em{display:block;font-style:normal;font-size:10.5px;letter-spacing:.05em;font-weight:600;color:var(--tx2);margin-top:7px}
.rf184 .statgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.rf184 .stat{background:var(--sur1);border:1px solid var(--line);border-radius:13px;padding:12px 8px;text-align:center}
.rf184 .stat b{display:block;font:800 italic 21px/1 var(--f);font-variant-numeric:tabular-nums}
.rf184 .stat span{display:block;font:800 8px/1 var(--f);letter-spacing:.13em;color:var(--mut);margin-top:5px}
.rf184 .kv{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.rf184 .kv span:first-child{color:var(--mut)}
.rf184 .kv span:last-child{font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.rf184 .kv:last-child{border-bottom:none}
.rf184 .grade{font:800 italic 62px/1 var(--f);letter-spacing:-.02em}
/* RF299 - the grade strip under the logo: letter, Ride IQ, and the one line
   that says how this run compares. It replaces the card that used to sit
   three screens down, under the replay. */
.rf184 .rvgrade{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:0 14px;
  margin:10px 0 2px;padding:11px 14px;border-radius:12px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.rf184 .rvgrade .g{font:800 italic 40px/1 var(--f);letter-spacing:-.03em;color:var(--tx)}
.rf184 .rvgrade .m{border-left:1px solid rgba(255,255,255,.12);padding-left:14px}
.rf184 .rvgrade .m .k{font:800 8.5px/1 var(--f);letter-spacing:.18em;color:var(--mut)}
.rf184 .rvgrade .m .v{font:800 italic 26px/1 var(--f);margin-top:4px;font-variant-numeric:tabular-nums;color:var(--tx)}
.rf184 .rvgrade p{grid-column:1/-1;margin:9px 0 0;font-size:12.5px;line-height:1.45;color:var(--tx2)}
@media (max-width:360px){.rf184 .rvgrade .g{font-size:34px}.rf184 .rvgrade .m .v{font-size:22px}}
.rf184 .gm{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.rf184 .gmc{background:var(--sur1);border:1px solid var(--line);border-radius:12px;padding:11px 11px 12px;text-align:left;width:100%}
.rf184 .gmc b{display:block;font:800 10px/1 var(--f);letter-spacing:.1em;color:var(--tx)}
.rf184 .gmc .v{display:block;font:800 italic 20px/1 var(--f);margin-top:8px;font-variant-numeric:tabular-nums;white-space:nowrap}
.rf184 .gmc .d{display:block;font:800 10px/1 var(--f);margin-top:6px;letter-spacing:.06em}
.rf184 .up{color:var(--green)}.rf184 .dn{color:var(--redx)}.rf184 .flat{color:var(--mut)}
.rf184 .one{border:1px solid var(--amber);border-radius:12px;padding:13px 14px;background:linear-gradient(155deg,rgba(245,197,24,.13),transparent)}
.rf184 .one b{display:block;font:800 8.5px/1 var(--f);letter-spacing:.22em;color:var(--amber)}
.rf184 .one .l{display:block;font:800 italic 17px/1.2 var(--f);margin-top:9px}
.rf184 .one .w{display:block;font-size:11.5px;line-height:1.5;color:var(--tx2);margin-top:7px}
.rf184 .orb{display:flex;align-items:center;gap:12px;border:1px solid var(--lineh);border-radius:14px;padding:13px 14px;background:var(--sur1);width:100%;text-align:left}
.rf184 .orbb{flex:none;width:38px;height:38px;border-radius:50%;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--volt) 45%,#fff),var(--volt) 58%,color-mix(in srgb,var(--volt) 50%,#000));box-shadow:0 0 18px var(--volt-glow)}
.rf184 .orb.busy .orbb{animation:rf184pulse 1.1s ease-in-out infinite}
@keyframes rf184pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.rf184 .orb .t{flex:1;min-width:0}
.rf184 .orb .t b{display:block;font:800 9px/1 var(--f);letter-spacing:.2em;color:var(--tx)}
.rf184 .orb .t span{display:block;font-size:11.5px;color:var(--mut);margin-top:5px;line-height:1.45}
.rf184 .orbans{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--sur2);font-size:13px;line-height:1.6;color:var(--tx2)}
.rf184 .orbans b{color:var(--tx)}
.rf184 .layers{display:flex;gap:6px;flex-wrap:wrap}
.rf184 .ly{border:1px solid var(--lineh);background:transparent;border-radius:999px;padding:8px 13px;font:800 9px/1 var(--f);letter-spacing:.14em;color:var(--tx2)}
.rf184 .ly.on{background:var(--volt);border-color:var(--volt);color:#fff}
.rf184 .keyb{border:1px solid var(--line);background:transparent;color:var(--mut);border-radius:999px;padding:9px 14px;font:800 8.5px/1 var(--f);letter-spacing:.18em;display:inline-block}
.rf184 .kr{display:flex;align-items:center;gap:10px;font:600 10.5px/1.4 var(--f);color:var(--tx2);padding:7px 0}
.rf184 .kbar{flex:none;width:26px;height:5px;border-radius:3px}
.rf184 .kdot{flex:none;width:11px;height:11px;border-radius:50%;margin:0 7.5px}
.rf184 .knum{flex:none;width:26px;text-align:center;font:800 10px/1 var(--f);color:var(--tx)}
.rf184 .trophy{display:flex;align-items:center;gap:12px;border:1px solid var(--amber);border-radius:12px;padding:12px 13px;background:linear-gradient(155deg,rgba(245,197,24,.14),transparent)}
.rf184 .trophy .tw{flex:none;width:34px;height:34px;border-radius:9px;background:rgba(245,197,24,.14);display:flex;align-items:center;justify-content:center;color:var(--amber)}
.rf184 .trophy .tw svg{width:18px;height:18px}
.rf184 .trophy b{display:block;font:800 12px/1 var(--f);letter-spacing:.08em;color:var(--amber)}
.rf184 .trophy span{display:block;font-size:10.5px;color:var(--tx2);margin-top:5px}
.rf184 .f label{display:block;font:700 9.5px/1 var(--f);letter-spacing:.16em;color:var(--mut);margin-bottom:7px}
.rf184 .f{margin:0}
.rf184 .f .inp,.rf184 .f input{width:100%;height:52px;background:var(--sur1);border:1px solid var(--line);border-radius:12px;color:var(--tx);padding:0 14px;font-weight:600;font-size:16px;font-family:var(--f)}
.rf184 .f input::placeholder{color:var(--mut)}
.rf184 .bar{height:6px;border-radius:3px;background:var(--sur3);overflow:hidden}
.rf184 .bar i{display:block;height:100%;border-radius:3px;background:var(--volt)}
.rf184 .boardrow{padding:10px 0;border-bottom:1px solid var(--line)}
.rf184 .boardrow:last-child{border-bottom:none}
.rf184 .boardrow .bh{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.rf184 .boardrow .bh b{font:800 10px/1 var(--f);letter-spacing:.1em}
.rf184 .boardrow .bh span{font:800 italic 16px/1 var(--f);font-variant-numeric:tabular-nums}
.rf184 .boardrow .bn{display:flex;justify-content:space-between;font:700 10px/1 var(--f);color:var(--mut);margin:6px 0 7px;letter-spacing:.04em}
.rf184 .boardrow .bn i{font-style:normal;color:var(--amber)}
.rf184 .err{color:var(--redx);font-size:12px;font-weight:700}
.rf184 .banked{display:flex;align-items:center;gap:16px;padding:18px 16px}
.rf184 .banked .n{font:800 italic 40px/1 var(--f);font-variant-numeric:tabular-nums}
.rf184 .banked .k{font:800 8px/1 var(--f);letter-spacing:.2em;color:var(--mut);margin-top:7px}
.rf184 .banked .t{flex:1;font-size:12px;color:var(--tx2);line-height:1.5}
.rf184 .day{font:800 10px/1 var(--f);letter-spacing:.18em;color:var(--mut)}
.rf184 .day b{color:var(--volt)}
.rf184 .back{font:800 8.5px/1 var(--f);letter-spacing:.19em;color:var(--tx2);background:none;border:none;padding:0;margin:0}
/* RF248 - ONE WAY OFF A PAGE, AND YOU CAN SEE IT. Coach E, 6 September:
   "it's hard to tell. You have like three different ways to close a page.
   One is that little teeny ass text. It took a while - I thought it was
   stuck, and everybody's gonna run into that."

   He was right and the number was 8.5px. A way out that a rider has to hunt
   for is not a way out. Every sub-page now leaves by the same full-width
   bar, in the same place, at a size a thumb can find without looking. */
.rf184 .backbar{display:flex;align-items:center;gap:10px;width:100%;min-height:46px;
 padding:0 14px;margin:0 0 14px;border:1px solid var(--line-hi);border-radius:13px;
 background:var(--sur-2);color:var(--tx);font-family:inherit;text-align:left;cursor:pointer}
.rf184 .backbar:active{background:var(--sur-3)}
.rf184 .backbar .bx{flex:none;font-size:20px;line-height:1;color:var(--volt);font-weight:800;margin-top:-2px}
.rf184 .backbar span:last-child{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--tx2)}
.rf184 .ttl{display:flex;align-items:center;gap:12px;padding:4px 0 9px}
.rf184 .ttl h1{font:800 italic 16.5px/1 var(--f);letter-spacing:.07em;margin:0;flex:1}
.rf184 .ttl h1 b{color:var(--volt)}
.rf184 .ttl .sub{font:800 8.5px/1 var(--f);letter-spacing:.19em;color:var(--tx2);margin-top:5px}
.rf184 .filt{font:700 11px/1 var(--f);color:var(--tx2);background:none;border:none;padding:6px 0;text-align:left;letter-spacing:.04em}
.rf184 .filt i{font-style:normal;color:var(--mut);font-weight:600}
.rf184 .avatar{width:52px;height:52px;border-radius:50%;background:var(--sur3);display:flex;align-items:center;justify-content:center;font:800 italic 18px/1 var(--f);color:var(--volt);flex:none}
.rf184 .prof{display:flex;align-items:center;gap:14px}
.rf184 .prof .pn{font:800 italic 18px/1.1 var(--f)}
/* ---- graphs ---- */
.rf184 .gtitle{font:800 italic 18px/1 var(--f);letter-spacing:.06em}
.rf184 .gtl{font-size:11.5px;line-height:1.5;color:var(--mut);margin-top:5px}
.rf184 .gfig{background:var(--sur1);border:1px solid var(--line);border-radius:14px;padding:12px 12px 10px}
.rf184 .axl{font:800 8.5px/1 var(--f);letter-spacing:.2em;color:var(--mut);margin-bottom:8px}
.rf184 .gfig svg{width:100%;height:auto;display:block}
.rf184 .leg{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px;font:700 9.5px/1 var(--f);color:var(--tx2);letter-spacing:.04em}
.rf184 .leg i{display:inline-block;width:14px;height:4px;border-radius:2px;margin-right:6px;vertical-align:middle;font-style:normal}
.rf184 .leg i.dot{width:8px;height:8px;border-radius:50%}
.rf184 .gcap{font-size:11px;line-height:1.5;color:var(--mut);margin-top:8px}
.rf184 .gcap b{color:var(--tx2)}
.rf184 .sect{display:flex;flex-direction:column;gap:6px}
/* ---- live HUD (BMX) ---- */
.rf184live{height:100vh;height:100dvh;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:0 16px;text-align:center;position:relative;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
.rf184live .ph{font:800 12px/1 inherit;letter-spacing:.3em;color:var(--mut)}
.rf184live .n{font:800 italic 130px/.88 inherit;font-variant-numeric:tabular-nums;text-shadow:0 0 50px color-mix(in srgb,var(--volt) 32%,transparent);letter-spacing:-.03em}
.rf184live .u{font:800 italic 15px/1 inherit;color:var(--volt);letter-spacing:.14em}
.rf184live .pills{display:flex;gap:8px;margin-top:6px}
.rf184live .pill{border:1px solid var(--line-hi);color:var(--mut);border-radius:999px;padding:8px 14px;font:800 9px/1 inherit;letter-spacing:.16em;font-variant-numeric:tabular-nums}
.rf184live .pill.hit{border-color:var(--green);color:var(--green)}
.rf184live .hint{font:600 13px/1.5 inherit;color:var(--mut);max-width:290px;margin-top:12px}
.rf184live .abort{position:absolute;bottom:calc(34px + env(safe-area-inset-bottom));left:0;right:0;text-align:center;font:800 11px/1 inherit;letter-spacing:.14em;color:var(--mut);background:none;border:none;padding:12px}
.rf184live .end{position:absolute;bottom:calc(84px + env(safe-area-inset-bottom));left:16px;right:16px;height:54px;border:none;border-radius:13px;background:var(--volt);color:#fff;font:800 italic 12.5px/54px inherit;letter-spacing:.2em}
/* ---- reveal sheet ---- */
.rf184sheet .pane{padding-top:12px}
/* ---- globals: the shell ---- */
#mbTabs[data-rf184] button{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:9px 1px;font:800 6px/1 inherit;letter-spacing:.02em}
#mbTabs[data-rf184] .tbi{width:19px;height:19px}
#mbTabs[data-rf184] button.rec{flex:0 0 66px;background:none!important;color:var(--volt);gap:3px;padding:4px 0 6px}
#mbTabs[data-rf184] button.rec .dot{width:34px;height:34px;border-radius:50%;background:var(--volt);box-shadow:0 0 0 3px rgba(255,255,255,.08),0 6px 18px rgba(0,0,0,.35);display:block;position:relative}
#mbTabs[data-rf184] button.rec .dot:after{content:'';position:absolute;inset:11px;border-radius:50%;background:#fff}
#mbTabs[data-rf184] button.rec span{font:800 6px/1 inherit;letter-spacing:.08em}
#mbTabs[data-rf184] button.rec:active .dot{transform:scale(.94)}
#mbBrand[data-rf184] .sub{color:var(--tx2)}
#mbCeleb{display:none!important}
#rcScr .rf184{padding:0 0 30px}
/* RF225 - RUN COMP SCROLLS. Coach E, 6 September: "expands too large and
   stuck." #rcScr is a fixed, screen-high box and nothing inside it was
   allowed to scroll, so a RunComp taller than the phone - which is every
   RunComp now that THE RACE, THE CALL and THE BOARD live on it - showed
   its top and kept the rest. The screen itself is the scroller now, and
   the wrapper grows to its content instead of being pinned to one screen. */
/* RF228 - RUN COMP ACTUALLY CLOSES. Coach E, 6 September: "it's stuck, I
   have to refresh to get off of it." block-104 wrote `display:none;
   display:flex` in one rule - the second declaration wins, so the .on class
   never gated anything and #rcScr stayed a full-screen opaque layer at
   z-index 240 on top of the whole app from the first time it opened. The
   source is fixed; this is the belt and braces, because a stale cached copy
   of that block would put the wall straight back up. */
#rcScr:not(.on){display:none!important}
/* RF233 - IT HAS TO FIT. Coach E, 6 September: "do you see this doesn't fit?
   been asking over and over."
   #rcScr .rcw was written with `padding: 12px 0 40px 0` - zero left, zero
   right - back when the old RunComp put its own padding on an inner card.
   The rf184 screens do not have that inner card, so every headline, every
   section label and every run row has been sitting flush against both edges
   of the phone, with the right-hand half of two-part headings pushed off the
   screen. Give the screen its margins back, and never let a long word or a
   right-aligned label push the layout wider than the glass. */
#rcScr .rcw{padding-left:15px!important;padding-right:15px!important}
#rcScr .rcw>*,#rcScr .rf184{max-width:100%}
/* a two-part heading - LABEL on the left, note on the right - must wrap
   inside the screen instead of growing it */
.rf184 .sec{flex-wrap:wrap}
.rf184 .sec>*{min-width:0}
.rf184 .sec i{text-align:right;flex:1 1 auto}
/* nothing anywhere gets to be wider than the phone */
.rf184,.rf184 *{overflow-wrap:anywhere;word-break:normal}
.rf184 .h1,.rf184 .h2,.rf184 .strow .r1,.rf184 .strow .r2{min-width:0}
#rcScr{overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
#rcScr .rcw{height:auto!important;min-height:100%}
.rf184 .sheeth{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.rf184 .sheeth .x{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:none;color:var(--tx2);font-size:14px;flex:none}
/* the header carries no level pill and no theme button in 184: the rank is under the lid, the look is dark */
/* RF282 - #rfbBuild is NOT one of those. It is the BUILD STAMP: the pill that
   flashes the release on open so a rider can say which code their phone is
   actually running. It got swept into this line with the two header pills and
   killed with !important, so it has never once appeared. Coach E spent an
   evening being asked to read a stamp that CSS had switched off, and answered,
   fairly: "where is it". The header pills stay hidden; a diagnostic has to be
   visible to be a diagnostic. */
#mbPill,.mipill{display:none!important}
/* light and dark both hold on the new screens; the pictures read from the tokens */
html[data-theme="light"] .rf184 .rf184live .n{text-shadow:none}
html[data-theme="light"] .rf184 .orbb{box-shadow:0 0 12px color-mix(in srgb,var(--volt) 30%,transparent)}
html[data-theme="light"] .rf184 .bigbtn{box-shadow:none}
html[data-theme="light"] .rf184 .rnno{background:rgba(0,0,0,.06)}
/* block-105 draws its own key under the course map; 184 draws the key as a card */
.rf184 [data-gmkey],.rf184 [data-gmkeybox],.rf184 .gmkeywrap{display:none!important}
/* block-02 styles #hudSpeed by id; the giant number wins here */
#mbRun .rf184live #hudSpeed{font:800 italic 130px/.88 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif!important;font-variant-numeric:tabular-nums;text-shadow:0 0 50px color-mix(in srgb,var(--volt) 32%,transparent);letter-spacing:-.03em;color:var(--tx);margin:0;width:auto;height:auto;display:block}
/* a characteristic sheet opened from Run Comparisons sits above the overlay, not under it */
html.rcOpen #mbSheet{z-index:260}

/* ---- MTB wears the art's orange. Coach E: "The color scheme is way better." ---- */
html.mtb{--volt:#f08a2b;--volt-dim:#8a4a12;--volt-glow:rgba(240,138,43,.32)}
html.mtb .rf184 .bigbtn{background:linear-gradient(180deg,rgba(240,138,43,.2),rgba(240,138,43,.06));box-shadow:0 0 24px rgba(240,138,43,.3) inset}
html.mtb .rf184 .rcdoor{background:linear-gradient(180deg,rgba(240,138,43,.2),rgba(240,138,43,.05))}

html.mtb .rf184 .bar i{background:#f08a2b}
html.mtb .rf184live .n{text-shadow:0 0 50px rgba(240,138,43,.32)}
/* ---- THE ONE MORE, the hero ---- */
.rf184 .rcmark{display:flex;align-items:center;gap:12px}
.rf184 .rcmark svg{width:44px;height:44px;flex:none}
.rf184 .rcmark .w{font:800 italic 26px/1 var(--f);letter-spacing:-.01em}
.rf184 .rcmark .w b{color:var(--volt);font-weight:800}
.rf184 .rcmark .s{font:800 8.5px/1 var(--f);letter-spacing:.24em;color:var(--mut);margin-top:6px}
.rf184 .hero{border:1px solid var(--amber);border-radius:16px;padding:16px 16px 14px;background:linear-gradient(155deg,rgba(245,197,24,.16),rgba(245,197,24,.02) 60%,transparent);position:relative;overflow:hidden}
.rf184 .hero:before{content:'';position:absolute;right:-30px;top:-30px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(245,197,24,.18),transparent 65%);pointer-events:none}
.rf184 .hero .k{font:800 8.5px/1 var(--f);letter-spacing:.24em;color:var(--amber)}
.rf184 .hero .big{font:800 italic 30px/1.05 var(--f);margin:10px 0 6px;letter-spacing:-.01em}
.rf184 .hero .why{font-size:13px;line-height:1.55;color:var(--tx2)}
.rf184 .hero .chr{display:inline-block;margin-top:10px;padding:6px 10px;border-radius:999px;border:1px solid var(--amber);color:var(--amber);font:800 8.5px/1 var(--f);letter-spacing:.18em}
.rf184 .more{display:flex;flex-direction:column;gap:6px}
.rf184 .more .row{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;padding:11px 13px;background:var(--sur1);width:100%;text-align:left}
.rf184 .more .row .n{flex:none;width:26px;height:26px;border-radius:50%;border:1px solid var(--amber);color:var(--amber);display:flex;align-items:center;justify-content:center;font:800 10px/1 var(--f)}
.rf184 .more .row .t b{display:block;font:800 13px/1.2 var(--f)}
.rf184 .more .row .t span{display:block;font-size:11px;color:var(--mut);margin-top:4px;line-height:1.45}
.rf184 .guide h3{font:800 italic 17px/1.15 var(--f);margin:16px 0 6px}
.rf184 .guide h3:first-child{margin-top:0}
.rf184 .guide p{margin:0 0 8px;font-size:13.5px;line-height:1.6;color:var(--tx2)}
.rf184 .guide p b{color:var(--tx)}
.rf184 .guide .kv span:last-child{font-weight:600;color:var(--tx2);text-align:right;max-width:58%}

/* ---- the arm screen says where it is ---- */
.gt-here{font:800 10px/1.4 inherit;letter-spacing:.16em;color:var(--mut);border:1px solid var(--line);border-radius:999px;padding:8px 14px;max-width:330px}
.gt-here.here{color:var(--green);border-color:rgba(54,220,117,.45)}
.gt-here.new{color:var(--amber);border-color:rgba(245,197,24,.45)}
.gt-starts{display:flex;gap:6px;width:100%;max-width:330px}
.gt-starts button{flex:1;min-height:44px;border-radius:11px;border:1px solid var(--line);background:transparent;color:var(--mut);font:800 10.5px/1 inherit;font-style:italic;letter-spacing:.08em}
.gt-starts button.on{border-color:var(--volt);background:color-mix(in srgb,var(--volt) 14%,transparent);color:var(--tx)}
#rfGo{position:fixed;inset:0;z-index:205;background:var(--bg);overflow-y:auto;-webkit-overflow-scrolling:touch;display:none}
#rfGo.on{display:block}
html.mtb .gt-starts button.on{background:rgba(240,138,43,.16)}
html.mtb .gt-launch{box-shadow:0 14px 32px rgba(240,138,43,.4)}
html.mtb .gt-here.here{color:var(--green)}
.gt-here{cursor:pointer;text-align:center}
.gt-here i{display:block;font:800 7px/1 inherit;letter-spacing:.2em;color:var(--mut);margin-top:5px;font-style:normal;opacity:.8}
.gt-places{width:100%;max-width:330px;display:flex;flex-direction:column;gap:6px;text-align:left}
.gt-places .k{font:800 8.5px/1 inherit;letter-spacing:.26em;color:var(--mut);text-align:center;margin:2px 0 4px}
.gt-places button{display:block;width:100%;border:1px solid var(--line);border-radius:12px;background:var(--sur-1);color:var(--tx);padding:11px 13px;text-align:left}
.gt-places button b{display:block;font:800 italic 12.5px/1 inherit;letter-spacing:.06em}
.gt-places button span{display:block;font:600 10.5px/1.3 inherit;color:var(--mut);margin-top:4px}
.gt-places button.on{border-color:var(--volt);background:color-mix(in srgb,var(--volt) 12%,transparent)}
html.mtb .gt-places button.on{background:rgba(240,138,43,.14)}
.rf184 .rcdoor.hero184{padding:18px 16px}
.rf184 .rcdoor .rcmark .w{font-size:30px}
.rf184 .rvdel{display:block;width:100%;margin-top:14px;padding:12px;border:none;background:none;color:var(--mut);font:800 9.5px/1 inherit;letter-spacing:.2em;text-decoration:underline;text-underline-offset:3px}
#rfThemeBtn{display:none!important}
.coachhead{align-items:center;margin-bottom:8px}
.coachhead .orb .t b{font:800 9px/1 var(--f);letter-spacing:.2em}
.coachhead .orb .t span{display:block;font:800 8px/1 var(--f);letter-spacing:.18em;color:var(--green);margin-top:5px}
.coachhead .vtog{width:44px;height:44px;border-radius:50%;padding:0;display:flex;align-items:center;justify-content:center}
.coachhead .vtog svg{width:18px;height:18px}
.coachhead .vtog.on{color:var(--volt);border-color:var(--volt)}
.coachhead .orb{width:auto;flex:1}
.coachhead{flex-wrap:nowrap}
.crow.coachhead{display:flex!important;flex-direction:row!important;align-items:center!important;gap:8px;padding:0}
/* ---- the guide, behind the logo ---- */
#rfGuide{position:fixed;inset:0;z-index:210;background:var(--bg);overflow-y:auto;-webkit-overflow-scrolling:touch;display:none;padding:calc(12px + env(safe-area-inset-top)) 16px calc(40px + env(safe-area-inset-bottom))}
#rfGuide.on{display:block}
#rfGuide .rf184{max-width:440px;margin:0 auto}
.rf184 .gsec p{margin:8px 0 0;font:400 14px/1.6 var(--f);color:var(--tx2)}
.rf184 .grow{display:flex;gap:8px;margin-top:12px}
.rf184 .gbtn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border-radius:12px;border:1px solid var(--line);background:var(--sur2);color:var(--tx);font:800 9.5px/1 var(--f);letter-spacing:.16em}
.rf184 .gbtn svg{width:16px;height:16px}
.rf184 .gbtn.ask{border-color:var(--volt)}
.rf184 .gbtn.ask .orbb{width:16px;height:16px;flex:none}
.rf184 .gbtn.busy .orbb{animation:rf184pulse 1.1s ease-in-out infinite}
.rf184 .gsec .orbans{margin-top:10px}
/* ---- levels ---- */
.rf184 .lvl{padding:11px 0;border-bottom:1px solid var(--line)}
.rf184 .lvl .bh{display:flex;justify-content:space-between;align-items:baseline}
.rf184 .lvl .bh b{font:800 10px/1 var(--f);letter-spacing:.18em}
.rf184 .lvl .ln{font:800 9px/1 var(--f);letter-spacing:.18em;color:var(--mut)}
.rf184 .lvl .ln b{font:800 italic 18px/1 var(--f);color:var(--volt);letter-spacing:0;margin-left:4px}
.rf184 .pips{display:flex;gap:3px;margin:9px 0 7px}
.rf184 .pips i{flex:1;height:7px;border-radius:2px;background:var(--sur3)}
.rf184 .pips i.on{background:var(--volt)}
.rf184 .lvl .bn{display:flex;justify-content:space-between;font:600 11px/1.3 var(--f);color:var(--mut)}
.rf184 .lvl .bn i{font-style:normal}
.rf184 .trophy .tw b{font:800 italic 15px/1 var(--f)}
.rf184 .lvltag{display:inline-block;margin-left:8px;padding:3px 6px;border-radius:6px;border:1px solid var(--volt);color:var(--volt);font:800 7.5px/1 var(--f);letter-spacing:.14em;font-style:normal;vertical-align:middle}
.gt-gps{font:800 8.5px/1 inherit;letter-spacing:.2em;color:var(--mut);margin-top:-8px}
.gt-gps.ok{color:var(--green)}
.rf184 .bookbar{display:flex;justify-content:space-between;align-items:baseline;margin:14px 0 6px;padding:8px 2px 6px;border-bottom:2px solid var(--volt)}
.rf184 .bookbar b{font:800 italic 13px/1 var(--f);letter-spacing:.1em;color:var(--volt)}
.rf184 .bookbar span{font:600 10.5px/1 var(--f);color:var(--mut);letter-spacing:.04em}
/* ---- RECORD pulses, a little ---- */
.rf184 .pulse184{animation:rf184rec 2.4s ease-in-out infinite}
@keyframes rf184rec{0%,100%{box-shadow:0 0 24px var(--volt-glow) inset,0 0 0 0 var(--volt-glow)}50%{box-shadow:0 0 24px var(--volt-glow) inset,0 0 0 9px rgba(0,0,0,0)}}
/* ---- the colour: one token, everything follows ---- */
.rf184 .orbb,html.mtb .rf184 .orbb{background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--volt) 45%,#fff),var(--volt) 58%,color-mix(in srgb,var(--volt) 50%,#000));box-shadow:0 0 18px var(--volt-glow)}
.rf184 .bigbtn,html.mtb .rf184 .bigbtn{background:linear-gradient(180deg,color-mix(in srgb,var(--volt) 20%,transparent),color-mix(in srgb,var(--volt) 6%,transparent));box-shadow:0 0 24px var(--volt-glow) inset}
.rf184 .rcdoor,html.mtb .rf184 .rcdoor{background:linear-gradient(180deg,color-mix(in srgb,var(--volt) 20%,transparent),color-mix(in srgb,var(--volt) 5%,transparent))}
.rf184 .bar i,html.mtb .rf184 .bar i{background:var(--volt)}
.gt-starts button.on,html.mtb .gt-starts button.on,.gt-places button.on,html.mtb .gt-places button.on{background:color-mix(in srgb,var(--volt) 15%,transparent)}
.gt-launch,html.mtb .gt-launch{box-shadow:0 14px 32px var(--volt-glow)}
.rf184 .chip.on,.gt-launch,.rf184 .go,.askrow button,.rf184 .chip.on span{color:var(--volt-tx,#fff)!important}
.swatches{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 2px}
.swatch{flex:0 0 calc(33.33% - 6px);display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:12px;background:var(--sur1);padding:10px 11px;color:var(--tx2);font:800 8.5px/1 var(--f);letter-spacing:.12em;text-align:left}
.swatch i{flex:none;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--sw) 45%,#fff),var(--sw) 58%,color-mix(in srgb,var(--sw) 50%,#000))}
.swatch.on{border-color:var(--sw);color:var(--tx)}
/* ---- the go screen, dressed like the rest ---- */
.gt-launch{width:100%;max-width:330px;min-height:58px;border-radius:14px;font:800 italic 13.5px/1 inherit;letter-spacing:.2em}
.gt-hint{font:600 12px/1.5 inherit;color:var(--mut);max-width:330px}
.gt-big{font-size:clamp(34px,11vw,56px)}
.gt-wrap{gap:14px}
/* ---- the coach, like a messenger: the ask row lives at the bottom ---- */
.view.on .askrow{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(10px + env(safe-area-inset-bottom));top:auto;width:calc(100% - 32px);max-width:408px;z-index:60;margin:0;padding:8px 0;background:var(--bg)}
.view.on .chat{padding-bottom:calc(90px + env(safe-area-inset-bottom))}
/* ---- the orb, on every tab ---- */
#rfOrbBtn{position:fixed;right:14px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:140;display:flex;flex-direction:column;align-items:flex-end;gap:8px;max-width:calc(100% - 28px)}
#rfOrbBtn[hidden]{display:none!important}
#rfOrbBtn .ob{width:54px;height:54px;border-radius:50%;border:none;background:none;padding:0;display:flex;align-items:center;justify-content:center}
#rfOrbBtn .ob .orbb{display:block;width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--volt) 45%,#fff),var(--volt) 58%,color-mix(in srgb,var(--volt) 50%,#000));box-shadow:0 0 18px var(--volt-glow),0 6px 18px rgba(0,0,0,.4)}
#rfOrbBtn.listening .ob .orbb{animation:rf184pulse 1s ease-in-out infinite;box-shadow:0 0 0 6px var(--volt-glow),0 0 26px var(--volt-glow)}
#rfOrbBtn.busy .ob .orbb{animation:rf184pulse 1.6s ease-in-out infinite}
#rfOrbBtn .bub{position:relative;max-width:300px;background:var(--sur-1,#0e1114);border:1px solid var(--volt);border-radius:14px;padding:12px 34px 12px 14px;font:600 13px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:var(--tx);box-shadow:0 10px 30px rgba(0,0,0,.45)}
#rfOrbBtn .bub b{color:var(--volt);font-size:9px;letter-spacing:.2em;margin-right:6px}
#rfOrbBtn .bub .mut{color:var(--mut)}
#rfOrbBtn .bub .bx{position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);background:none;color:var(--mut);font-size:11px}
#rfOrbBtn.listening .bub{border-color:var(--green);color:var(--green);font-weight:800;letter-spacing:.14em;font-size:11px}
/* ---- the frame: the orb around the whole screen ---- */
#rfOrbFrame{position:fixed;inset:0;z-index:295;pointer-events:none;border:2px solid transparent;border-radius:0;opacity:0;transition:opacity .25s}
#rfOrbFrame.listen,#rfOrbFrame.speak{opacity:1;border-color:var(--volt);box-shadow:inset 0 0 22px var(--volt-glow),inset 0 0 2px var(--volt)}
#rfOrbFrame.listen{animation:rf184frame 1s ease-in-out infinite}
#rfOrbFrame.speak{animation:rf184frame 1.8s ease-in-out infinite}
@keyframes rf184frame{0%,100%{opacity:.45;box-shadow:inset 0 0 14px var(--volt-glow)}50%{opacity:1;box-shadow:inset 0 0 30px var(--volt-glow),inset 0 0 3px var(--volt)}}
.rf184 .cpgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-top:8px}
.rf184 .cp{background:var(--sur2);border:1px solid var(--line);border-radius:8px;padding:6px 4px;text-align:center}
.rf184 .cp b{display:block;font:800 8px/1 var(--f);color:var(--mut);letter-spacing:.14em}
.rf184 .cp span{display:block;font:800 italic 11px/1 var(--f);margin-top:4px;font-variant-numeric:tabular-nums}
.rf184 .cp i{display:block;font:800 8.5px/1 var(--f);font-style:normal;margin-top:4px;color:var(--mut)}
.rf184 .cp i.up{color:var(--green)}.rf184 .cp i.dn{color:var(--redx)}
/* ---- the splash follows the colour ---- */
html[data-volt-tint="1"] #mbSp:before{content:'';position:absolute;inset:0;background:var(--volt);mix-blend-mode:color;opacity:.85;pointer-events:none}
html[data-volt-tint="1"] #mbSp .spcta{border-color:var(--volt)!important;box-shadow:0 0 22px var(--volt-glow)!important}
html[data-volt-tint="1"] #mbSp .spcta i{background:var(--volt)!important;box-shadow:0 0 12px var(--volt)!important}
html[style*="--splash"] #mbSp{background-image:var(--splash)!important}
/* ---- the colour preview on Profile ---- */
.lookprev{display:flex;gap:10px;margin-top:10px}
.lp-phone,.lp-splash{flex:1;border:1px solid var(--line);border-radius:16px;background:var(--bg);padding:10px;min-height:190px;position:relative;overflow:hidden}
.lp-tabs{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--line);border-radius:9px;padding:6px 10px;margin-bottom:8px}
.lp-tabs i{width:9px;height:9px;border-radius:50%;background:var(--sur3)}
.lp-tabs i.rec{width:16px;height:16px;background:var(--volt);box-shadow:0 0 8px var(--volt-glow)}
.lp-h{font:800 11px/1.25 var(--f);margin:2px 0 8px}
.lp-h b{color:var(--volt)}
.lp-door{border:1px solid var(--volt);border-radius:9px;padding:6px 8px;background:linear-gradient(180deg,color-mix(in srgb,var(--volt) 20%,transparent),transparent)}
.lp-door .rcmark svg{width:18px;height:18px}
.lp-door .rcmark .w{font-size:12px}
.lp-door .rcmark .s{font-size:5px;letter-spacing:.14em;margin-top:2px}
.lp-rec{margin-top:6px;border:1px solid var(--volt);border-radius:9px;padding:7px;text-align:center;font:800 italic 8px/1 var(--f);letter-spacing:.14em;background:linear-gradient(180deg,color-mix(in srgb,var(--volt) 18%,transparent),transparent)}
.lp-orb{display:flex;align-items:center;gap:6px;margin-top:6px;border:1px solid var(--line);border-radius:9px;padding:6px 8px;font:800 6px/1 var(--f);letter-spacing:.18em;color:var(--tx2)}
.lp-orb .orbb{width:14px;height:14px;flex:none}
.lp-splash{background:#050506;padding:0;display:flex;flex-direction:column;justify-content:flex-end}
.lp-art{position:absolute;inset:0;background:url('splash.jpg') center top/cover no-repeat}
html.mtb .lp-art{background-image:url('splash-mtb.jpg')}
html[style*="--splash"] .lp-art{background-image:var(--splash)}
html[data-volt-tint="1"] .lp-art:after{content:'';position:absolute;inset:0;background:var(--volt);mix-blend-mode:color;opacity:.85}
.lp-cta{position:relative;margin:0 10px 12px;border:1px solid var(--volt);border-radius:999px;padding:6px 10px;text-align:center;font:800 7px/1 var(--f);letter-spacing:.22em;color:#fff;background:rgba(5,5,6,.6);display:flex;align-items:center;justify-content:center;gap:6px}
.lp-cta i{width:6px;height:6px;border-radius:50%;background:var(--volt);box-shadow:0 0 8px var(--volt)}

/* ================================================================
   RF207 - EVERY BUTTON, AND THE ORB, WEAR THE COLOUR
   Coach E, 5 September: "all buttons and orb will change with the
   colour choice." The blocks were written before there was a token,
   so a dozen of them still carry the old red or the old orange baked
   in. Rather than chase them one file at a time, the token wins here,
   last, for every one of those selectors. One place to read, one
   place to fix.
   ================================================================ */
/* the big number and the live speed glow in the colour */
.rf184live .n,#mbRun .rf184live #hudSpeed,html.mtb .rf184live .n{text-shadow:0 0 50px var(--volt-glow)!important}
/* every "picked" pill, wherever it lives */
.rcp.on,.rdset.on,.mdset.on,.gt-starts button.on,.gt-places button.on,
.rf184 .ly.on,.swatch.on,.rf184 .chip.on{border-color:var(--volt)!important}
.rcp.on,.rdset.on,.mdset.on{background:linear-gradient(180deg,color-mix(in srgb,var(--volt) 16%,transparent),color-mix(in srgb,var(--volt) 3%,transparent))!important}
.rcp.on b,.rckind,#rcScr .rchead,.fdk,.fdit.keep .fdk{color:var(--volt)!important}
/* the doors and the kept cards */
.rcdoor,html.mtb .rcdoor{border-color:var(--volt)!important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--volt) 20%,transparent),color-mix(in srgb,var(--volt) 4%,transparent))!important}
.fdit.keep{border-color:var(--volt)!important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--volt) 10%,transparent),color-mix(in srgb,var(--volt) 2%,transparent))!important}
/* anything filled in the colour must carry readable text on it - the
   fluoro green and the silver are light, so black reads and white does not */
.rf184 .go,.gt-launch,.rf184 .chip.on,.askrow button,.rf184 .ly.on,
.rf184 .bar i,#mbTabs[data-rf184] button.rec .dot,.mrgo,.rf184 .pips i.on,
#rfOrbBtn .ob .orbb,.rf184 .orbb,.swatch i,.lp-tabs i.rec,.lp-cta i{color:var(--volt-tx,#fff)}
.rf184 .go,html.mtb .rf184 .go,.gt-launch,html.mtb .gt-launch,.mrgo,html.mtb .mrgo{background:var(--volt)!important;color:var(--volt-tx,#fff)!important}
#mbTabs[data-rf184] button.rec{color:var(--volt)!important}
#mbTabs[data-rf184] button.rec .dot{background:var(--volt)!important}
/* the splash CTA, before a single block has loaded */
#mbSp .spcta{border-color:var(--volt)!important}
#mbSp .spcta i{background:var(--volt)!important}

/* ================================================================
   RF207 - THE SPLASH IS HIS COLOUR
   index.html carries `html.mtb #mbSp{background-image:...!important}`
   inside its inline <style>, which loads after this file, so a tie on
   specificity went to the old art every time. The extra attribute on
   the html element breaks the tie honestly rather than by shouting
   louder. --spar is the art's own shape, measured when it loads,
   so TAP TO RIDE sits under the poster whatever shape the poster is.
   ================================================================ */
html[data-volt][style*="--splash"] #mbSp,
html.mtb[data-volt][style*="--splash"] #mbSp{
  background-image:var(--splash)!important;
  background-position:center top!important;
  background-color:#050505!important}
/* Coach E, 5 September, from his phone: "the button is too low, I can't
   see the enter button." The poster is fitted to the width and the button
   is pinned to the bottom of the SCREEN, not placed under the poster - so
   Safari's toolbar, the home bar, a short phone, none of them can push it
   off. On a tall phone there is dark ground between poster and button; on
   a short one the button sits on the poster's own dark footer. */
html.mtb[data-volt][style*="--splash"] #mbSp,
html[data-volt][style*="--splash"] #mbSp{
  background-size:100% auto!important;
  justify-content:flex-end!important;
  padding-top:0!important;
  padding-bottom:max(22px,calc(14px + env(safe-area-inset-bottom)))!important}
html[data-volt][style*="--splash"] #mbSp .spcta,
html.mtb[data-volt][style*="--splash"] #mbSp .spcta{
  padding:11px 24px!important;font-size:11.5px!important;letter-spacing:.24em!important;margin-bottom:0!important}
html[data-volt][style*="--splash"] #mbSp:after,
html[data-volt][style*="--splash"] #mbSp:before{display:none!important}
/* the CTA under the art wears the colour too */
html[data-volt][data-volt-tint] #mbSp .spcta,
html.mtb[data-volt][data-volt-tint] #mbSp .spcta{
  border-color:var(--volt)!important;color:var(--tx)!important;
  box-shadow:0 0 22px var(--volt-glow)!important;
  background:color-mix(in srgb,var(--volt) 10%,rgba(5,5,6,.55))!important}
html[data-volt][data-volt-tint] #mbSp .spcta i,
html.mtb[data-volt][data-volt-tint] #mbSp .spcta i{
  background:var(--volt)!important;box-shadow:0 0 12px var(--volt)!important}
/* no art for this colour yet: tint the sport's own poster */
html[data-volt-tint="1"]:not([style*="--splash"]) #mbSp:before{
  content:'';position:absolute;inset:0;background:var(--volt);
  mix-blend-mode:color;opacity:.85;pointer-events:none}

/* ================================================================
   RF207 - THE ASK ROW RIDES THE KEYBOARD
   Coach E, 5 September: "the button is too low. I can't see the enter
   button. It has to be small, but it has to be brought up." On an
   iPhone a fixed row does not move when the keyboard opens - it stays
   under it. So the row is compact, sits clear of the home bar, and
   block-117 lifts it by the keyboard's height from visualViewport.
   ================================================================ */
.view.on .askrow{bottom:calc(16px + env(safe-area-inset-bottom) + var(--kb,0px));padding:6px 0;gap:7px;transition:bottom .12s ease}
.view.on .askrow input{height:44px;border-radius:12px;font-size:15px}
.view.on .askrow button{width:44px;height:44px;border-radius:12px}
.view.on .chat{padding-bottom:calc(84px + env(safe-area-inset-bottom) + var(--kb,0px))}
/* ---- the sort row on RUNS: four small chips that fit across ---- */
.rf184 .sortrow{display:flex;gap:5px;margin:10px 0 2px}
.rf184 .sortchip{flex:1;min-width:0;border:1px solid var(--line);background:var(--sur1);color:var(--mut);border-radius:999px;padding:8px 4px;font:800 8px/1 var(--f);letter-spacing:.12em;white-space:nowrap}
.rf184 .sortchip.on{border-color:var(--volt);color:var(--volt);background:color-mix(in srgb,var(--volt) 12%,transparent)}

.rf184 .hero .k .n1{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--amber);color:var(--amber);font:800 9px/1 var(--f);margin-right:8px;vertical-align:middle}

/* RF215 · the go screen, cleaned. Coach E: "this page is horrendous." */
.gt-opts{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;width:100%;max-width:330px;margin-top:-6px}
.gt-opt{border:1px solid var(--line);background:transparent;color:var(--mut);border-radius:999px;padding:0 11px;min-height:30px;font:800 8.5px/1 inherit;letter-spacing:.12em;font-style:italic;white-space:nowrap}
.gt-opt.on{border-color:var(--volt);color:var(--tx);background:color-mix(in srgb,var(--volt) 15%,transparent)}
.gt-mtb .gt-hint{font-size:12.5px;color:var(--tx);opacity:.75}
.gt-mtb .chalrow{padding:7px 8px 7px 12px}
.gt-mtb .chalrow span{font-size:12px}
.gt-here.fixed{font-size:13px;letter-spacing:.14em;color:var(--tx);border-color:var(--line);padding:11px 18px;cursor:default}
.gt-gps.off{display:none}
.gt-mtb.fixed .gt-opts{margin-top:4px}
/* RF215 · the new posters are clear at the bottom: the topo lines run out
   into black, and on a tall phone the fade carries them the rest of the
   way down to TAP TO RIDE with no seam. */
html.mtb[data-volt][style*="--splash"] #mbSp:after{display:block!important;content:'';position:absolute;left:0;right:0;top:calc(100vw * var(--spar,1.5) - 160px);height:160px;background:linear-gradient(180deg,rgba(5,5,5,0),#050505)!important;pointer-events:none}
/* Coach E: "space things out on that get set page" */
.gt-wrap.gt-mtb{gap:22px;padding-top:calc(24px + env(safe-area-inset-top))}
.gt-mtb .gt-opts{margin-top:-4px}
.gt-mtb .gt-hint{margin-top:-6px}
.gt-map{width:300px;max-width:100%}
.gt-map{border:1px solid var(--line);border-radius:16px;background:var(--sur-1);overflow:hidden;text-align:left}
.gt-map .mpthumb{border-radius:0;border:none;background:var(--sur-2);display:block}
.gt-cardb{padding:2px 12px 11px}.gt-cardb .mpn{font-size:14px;margin-top:9px}.gt-cardb .mpm{font-size:10.5px}.gt-cardb .mpb{font-size:11px}
.gt-map.blank{border-style:dashed;border-color:var(--line-hi)}
.gt-map.blank .gt-blank{position:relative;border:none;border-radius:0;background:var(--sur-2)}
.gt-mapcap{display:flex;align-items:center;gap:8px;white-space:nowrap;border-top:1px solid var(--volt);padding:9px 10px 9px 12px;background:color-mix(in srgb,var(--volt) 12%,var(--sur-1));text-align:left}
.gt-mapcap b{font:800 8px/1 inherit;letter-spacing:.2em;color:var(--volt);flex:none}
.gt-mapcap span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;font:700 12px/1.3 inherit;color:var(--tx);letter-spacing:.02em;text-align:left;font-style:normal}
.gt-mapcap button{flex:none;border:1px solid var(--line);background:none;color:var(--mut);border-radius:999px;padding:6px 9px;font:800 7.5px/1 inherit;letter-spacing:.1em}
.gt-wrap.gt-mtb.hasmap{gap:20px}
.gt-mtb.fixed .gt-opts{margin-top:-2px;margin-bottom:6px}
.gt-here.off{display:none}
.gt-map.blank .mpthumb{border:none;background:transparent;opacity:.9}
.mpghost{fill:none;stroke:var(--volt);stroke-width:2.2;stroke-dasharray:7 9;stroke-linecap:round;opacity:.5}
.gt-blankw{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:16px 26px;text-align:center}
.gt-blankw b{font:800 9px/1 inherit;letter-spacing:.26em;color:var(--volt)}
.gt-blankw span{font:600 12.5px/1.45 inherit;color:var(--tx);letter-spacing:0;font-style:normal}
.gt-picks{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;width:100%;max-width:330px;margin-bottom:-8px}
.gt-mtb .gt-gps{margin-top:-14px}
.gt-picks button{border:1px solid var(--line);background:transparent;color:var(--tx2);border-radius:999px;padding:0 12px;min-height:32px;font:800 9px/1 inherit;letter-spacing:.1em;font-style:italic;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.gt-picks button.on{border-color:var(--volt);color:var(--tx);background:color-mix(in srgb,var(--volt) 15%,transparent)}
.gt-picks button i{font-style:normal;font-size:7px;letter-spacing:.2em;color:var(--green);margin-left:6px}
.gt-terrain{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;max-width:330px;margin-bottom:-6px}
.gt-terrain .gt-opts{margin-top:0}

/* ================================================================
   RF260 - GET SET IS A CHOICE, NOT A FORM
   Coach E, 7 September: "TRAIL and DOWNHILL should go all the way up
   to the top, hero it out, and that'll change the selection below...
   six small thumbnails of routes you've written lately, eight fit
   there clean... and GET SET is wasted space."
   ================================================================ */
.gt-starts.hero{max-width:100%;gap:8px;margin-bottom:8px}
.gt-starts.hero button{flex:1;min-height:62px;border-radius:15px;
  font:800 italic 19px/1 var(--f,-apple-system,sans-serif);letter-spacing:.06em}
/* RF376 - the delete control on your own course tiles. It sits on the tile
   rather than beside it so the grid stays two-up, and it is small until it
   is asked to confirm, when it grows to name what it is about to take. */
.gtwrap{position:relative;display:block}
.gtdel{position:absolute;top:5px;right:5px;z-index:3;min-width:22px;height:22px;padding:0 6px;
 border-radius:11px;border:1px solid rgba(255,255,255,.22);background:rgba(8,8,10,.72);
 color:rgba(255,255,255,.72);font:800 13px/1 var(--f,-apple-system,sans-serif);cursor:pointer;
 -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.gtdel.sure{background:#f0143f;border-color:#f0143f;color:#fff;font-size:9px;letter-spacing:.08em;padding:0 9px}
.gt-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;
  max-width:420px;margin:2px 0 10px}
.gtile{display:flex;flex-direction:column;align-items:stretch;gap:0;
  border:1px solid var(--line);border-radius:14px;background:var(--sur-1);
  color:var(--tx);overflow:hidden;padding:0;text-align:left}
.gtile.on{border-color:var(--volt);background:color-mix(in srgb,var(--volt) 12%,transparent)}
.gtile:active{background:var(--sur-2)}
.gtile .gta{display:block;background:var(--sur-2);border-bottom:1px solid var(--line);
  aspect-ratio:150/92;overflow:hidden}
.gtile .gta svg{display:block;width:100%;height:100%}
.gtile b{display:block;padding:9px 11px 0;font:800 11px/1.25 var(--f,-apple-system,sans-serif);
  letter-spacing:.06em;overflow-wrap:anywhere}
.gtile i{display:block;padding:4px 11px 10px;font:600 9.5px/1.3 var(--f,-apple-system,sans-serif);
  font-style:normal;color:var(--mut)}
.gtile.mapped .gta{opacity:.72}
.gtile.new .gta{display:flex;align-items:center;justify-content:center}
.gtghost{fill:none;stroke:var(--line-hi);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.gtile{position:relative}
.gtile.here{border-color:var(--green)}
.gthere{position:absolute;top:7px;left:7px;padding:3px 7px;border-radius:5px;
  background:var(--green);color:#062012;font:800 8px/1 var(--f,-apple-system,sans-serif);
  letter-spacing:.14em}
/* the hero row is a ROW - stated outright, because .gt-terrain is a column
   flex box 330px wide and TRAIL/DOWNHILL are the headline of this screen */
.gt-wrap .gt-terrain{max-width:100%;width:100%}
.gt-wrap .gt-starts.hero{display:flex!important;flex-direction:row!important;
  width:100%;max-width:100%}
.gt-wrap .gt-starts.hero button{flex:1 1 0;width:auto}

/* RF261 - RECORD RUN is a door, not a slab. Coach E: "that button looks
   like an afterthought, like we really don't want somebody to click it." */
.rcdoor.rec184{background:linear-gradient(180deg,color-mix(in srgb,var(--volt) 26%,transparent),color-mix(in srgb,var(--volt) 7%,transparent));
  border-color:var(--volt)}
.rcdoor.rec184 .rcmark .w{font-size:26px}
/* MAP A FLOW wears the RunComp wordmark, so its number sits under it */
.rfflow .rcmark{margin-bottom:10px}
.rfflow .rcmark .w{font-size:22px}

/* RF262 - say what the numbers and the toggles mean */
.xpbadge{flex-direction:column;align-items:flex-end;text-align:right;border-radius:12px;padding:7px 11px}
.xpk{font-size:7.5px;letter-spacing:.2em;color:var(--mut);font-weight:800}
.xpr{font-size:8px;letter-spacing:.06em;color:var(--mut);font-weight:700}
.rfwatch{width:auto!important;min-width:44px;gap:5px;padding:0 10px!important;
  flex-direction:column}
.rfwatch svg{width:15px;height:15px}
.rfwatch em{font-style:normal;font:800 7px/1 var(--f,-apple-system,sans-serif);
  letter-spacing:.14em;color:var(--mut)}

/* RF263 - A SHEET OPENS ON TOP OF WHAT OPENED IT.
   Coach E: "when I hit the play button it says opening that run, you never
   see anything - and then when you cancel out of the ride setup, it shows
   it." The player was never broken. #mbSheet sat at z-index 260 and the
   trails screen sits at 286, so a run opened from a trail card rendered
   underneath the card that asked for it. Closing maps revealed it, which is
   exactly the symptom he described. The sheet now clears every full screen
   it can be opened from, and still passes under the splash (300). */
#mbSheet{z-index:290}

/* ================================================================
   RF264 - FOUR CONCEPTS, FOUR DOORS
   Coach E: "RunComp is the concept, Map a Flow is our concept, Rival
   is our concept, Record Run - that's our shit. All four of those
   need to look robust." Sizes are deliberate and ranked: RunComp is
   the product, the RIDE REPORT and MAP A FLOW are the two things a
   rider comes back for, RECORD RUN is the act.
   ================================================================ */
.rfflow{border:1px solid var(--line-hi)!important;border-radius:16px!important;
  padding:16px!important;background:linear-gradient(180deg,color-mix(in srgb,var(--volt) 12%,transparent),color-mix(in srgb,var(--volt) 3%,transparent))!important}
.rfflow .rcmark .w{font-size:26px}
.rf184 .rrep{border-color:var(--line-hi)}
.rf184 .rrk{font-size:9px}
.rf184 .rrg{font-size:40px;min-width:52px}
.rf184 .rrline{font-size:14.5px}
/* the trails door wears a ring like every other icon on the page.
   Coach E: "the icon for trails should have a border around it like the
   rest of them." Every other door mark on the front page sits in a circle
   and this one was bare, which is exactly why it read as an afterthought. */
.mapsdoor .gr{border:1.6px solid color-mix(in srgb,var(--volt) 60%,transparent);
  border-radius:50%;width:42px;height:42px;display:flex;align-items:center;
  justify-content:center;color:var(--volt);background:none}
.mapsdoor{min-height:64px}
.rf184 .rrask{display:block;text-align:left;padding:14px 16px;min-height:62px}
.rf184 .rrask b{display:block;font:800 italic 17px/1 var(--f);color:var(--tx);letter-spacing:.04em}
.rf184 .rrask em{display:block;font-style:normal;font:600 11px/1.45 var(--f);
  letter-spacing:.02em;color:var(--mut);margin-top:6px}
/* RF266 - the report wears the same ringed mark as every other door */
.rf184 .rrep .rcmark{margin-bottom:12px}
.rf184 .rrep .rcmark .w{font-size:24px}
/* RF266 - the twelve drawn riders */
.rfavimg{display:inline-block;border-radius:50%;overflow:hidden;background:var(--sur-3);vertical-align:middle}
.rfavimg img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.rf184 .rfavb.art{padding:0;overflow:hidden}
.rf184 .rfavb.art img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.rf184 .rfavrow.art{grid-template-columns:repeat(auto-fill,minmax(62px,1fr))}
.rf184 .rfavrow.art .rfavb{min-height:62px}

/* RF268 - YOUR RIDER: a button, not a wall of faces */
.rf184 .rfavdoor{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  border:1px solid var(--line);border-radius:14px;background:var(--sur-1);
  padding:11px 13px;margin:4px 0 10px;color:var(--tx)}
.rf184 .rfavdoor:active{background:var(--sur-2)}
.rf184 .rfavdt{flex:1;min-width:0}
.rf184 .rfavdt b{display:block;font:800 12px/1 var(--f);letter-spacing:.16em}
.rf184 .rfavdt span{display:block;font:600 10.5px/1.35 var(--f);color:var(--mut);margin-top:5px}
.rf184 .rfavb.art em{position:absolute;left:3px;right:3px;bottom:3px;font-style:normal;
  font:800 7.5px/1.2 var(--f);letter-spacing:.04em;color:var(--amber);text-align:center;
  background:rgba(0,0,0,.72);border-radius:5px;padding:2px 1px}
/* RF271 - a training run keeps its place on screen but takes no number */
.rf184 .lbrow .lbtrain{font-style:normal;font:800 8px/1 var(--f,-apple-system,sans-serif);
  letter-spacing:.1em;color:var(--amber)}
.rf184 .lbrow.training{opacity:.72}

/* ============================================================================
   RF357 - ONE COACH BUBBLE, ONE NAV. RF343, RF344, RF347 and RF347-corrected
   each pasted a fresh set of rules under the last, so the floating coach was
   sized three times (68 -> 48 -> 46px) with a 64px min-height left standing
   from the first pass, a Record float that no longer exists kept two rules,
   and eight splash-name selectors matched nothing (the names are SVG
   .rrname). This block is the whole of it, written once.
   ========================================================================= */
/* the coach picker sheet */
.rf343coaches{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}.rf343coach{border:1px solid var(--line);border-radius:16px;background:var(--sur-1);padding:10px;color:var(--tx);text-align:left}.rf343coach.on{border-color:var(--volt);box-shadow:0 0 18px var(--volt-glow)}.rf343coach img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:50%;border:2px solid var(--line);display:block;margin-bottom:8px}.rf343coach.on img{border-color:var(--volt)}.rf343coach b{display:block;font-size:13px}.rf343coach small{display:block;margin-top:4px;color:var(--mut);font-size:8px;letter-spacing:.08em}
#rfOrbOv #rfOrb{overflow:hidden;background:#090b0d!important}#rfOrbOv #rfOrb img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.rf344coachhead{width:100%;display:flex;align-items:center;gap:12px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:rgba(255,255,255,.035);color:var(--tx);padding:10px 12px;text-align:left}
.rf344coachhead img{width:58px;height:58px;border-radius:50%;object-fit:cover;border:2px solid var(--volt);box-shadow:0 0 18px var(--volt-glow)}
.rf344coachhead span{display:flex;flex-direction:column;gap:5px}.rf344coachhead b{font:900 15px/1 var(--f);font-style:italic}.rf344coachhead small{font:800 9px/1.2 var(--f);letter-spacing:.12em;color:var(--mut)}

/* the floating coach: the selected face, cut out, with a speech tail */
#rfOrbBtn{right:10px!important;bottom:calc(72px + env(safe-area-inset-bottom))!important}
#rfOrbBtn .ob.rf343coachbtn{position:relative;width:46px!important;height:46px!important;min-width:0!important;min-height:0!important;padding:0!important;border:0!important;border-radius:50%!important;background:transparent!important;box-shadow:none!important;overflow:visible!important;display:block}
#rfOrbBtn .rf343coachface{display:block!important;width:46px!important;height:46px!important;border-radius:50%!important;object-fit:cover!important;border:0!important;background:transparent!important;box-shadow:none!important;clip-path:circle(49% at 50% 50%)!important}
#rfOrbBtn .rf343coachbtn span{display:none!important}
#rfOrbBtn.listening .rf343coachface,#rfOrbBtn.busy .rf343coachface{animation:rf184pulse 1s ease-in-out infinite}
#rfOrbBtn .ob.rf343coachbtn:after{content:"";position:absolute;right:-2px;bottom:2px;width:12px;height:12px;background:var(--volt);clip-path:polygon(0 0,100% 0,0 100%);border-radius:2px}

/* the six-item nav, as block-115 draws it */
#mbTabs[data-rf184]{display:flex!important}
#mbTabs[data-rf184] button{flex:1 1 16.666%!important;min-width:0!important;padding:8px 0 7px!important}
#mbTabs[data-rf184] button .tbi{width:18px!important;height:18px!important}
#mbTabs[data-rf184] button span{font-size:6px!important;letter-spacing:0!important;white-space:nowrap!important}
#mbTabs[data-rf184] button[data-rf347="record"]{color:var(--volt)!important}