/* RunRoam route-build loader (Claude version chosen by the user 26 Oct 18:42). Component CSS only. */
#rr-build{
  --rrb-cream:#f7f4eb; --rrb-ink:#243d30;
  --rrb-badge:clamp(132px, 42vw, 176px); --rrb-cycle:3.4s;
  position:fixed; inset:0; z-index:10050;
  display:flex; flex-direction:column;
  padding-top:env(safe-area-inset-top, 0px);
  padding-bottom:calc(24px + env(safe-area-inset-bottom, 0px));
  padding-left:max(24px, env(safe-area-inset-left, 0px));
  padding-right:max(24px, env(safe-area-inset-right, 0px));
  background:var(--rrb-ink);
  color:var(--rrb-cream); font-family:inherit; font-size:16px; font-weight:400;
  line-height:1.35; letter-spacing:normal; text-align:center;
  -webkit-font-smoothing:antialiased; overflow:hidden; overscroll-behavior:contain; outline:none;
}
#rr-build[hidden]{display:none}
#rr-build *,#rr-build *::before,#rr-build *::after{box-sizing:border-box}
#rr-build p{margin:0}
#rr-build button{font:inherit;color:inherit;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
#rr-build button:focus-visible{outline:3px solid var(--rrb-cream);outline-offset:3px}
#rr-build .rrb-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Layout: one centered composition, the action at the bottom */
#rr-build .rrb-main{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:24px}
#rr-build .rrb-foot{flex:none;display:flex;justify-content:center;gap:10px;padding-top:16px}

/* The mark: same badge, ring and draw loop as the app loader */
#rr-build .rrb-mark{position:relative;width:var(--rrb-badge);height:var(--rrb-badge);flex:none}
#rr-build .rrb-ping{position:absolute;inset:-5px;border-radius:50%;border:2px solid rgba(247,244,235,.55);opacity:0;pointer-events:none}
#rr-build .rrb-badge{position:relative;width:100%;height:100%;border-radius:50%;background:var(--rrb-ink);display:grid;place-items:center;
  box-shadow:0 0 0 5px var(--rrb-cream),0 0 0 7px rgba(36,61,48,.28),0 18px 44px rgba(10,24,16,.5)}
#rr-build .rrb-logo{width:62%;height:62%;overflow:visible;transition:opacity .3s ease}
#rr-build .rrb-logo path{fill:none;stroke-width:7.5;stroke-linecap:round;stroke-linejoin:round}
#rr-build .rrb-track{stroke:rgba(255,255,255,.13)}
#rr-build .rrb-ink{stroke:#fff}
#rr-build .rrb-dot{fill:#fff;transform-box:fill-box;transform-origin:center}
#rr-build .rrb-ripple{fill:none;stroke:#fff;stroke-width:2;transform-box:fill-box;transform-origin:center;opacity:0}
#rr-build[data-view="failed"] .rrb-logo{opacity:.38}

#rr-build .rrb-word{margin-top:22px;padding:6px 16px 7px;border-radius:999px;background:rgba(247,244,235,.08);
  border:1px solid rgba(247,244,235,.16);font-size:15px;font-weight:700;letter-spacing:.03em;line-height:1;white-space:nowrap}

/* The one status line – fixed two-line box so nothing moves when it changes on error or success */
#rr-build .rrb-line{margin-top:22px;width:100%;max-width:21em;min-height:2.6em;display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:700;line-height:1.3;text-wrap:balance}

/* Running tip – fixed height (label + two lines) so the layout never jumps between tips */
#rr-build .rrb-tip{margin-top:18px;width:100%;max-width:300px;min-height:72px;display:grid;justify-items:center;align-content:start;gap:6px}
#rr-build .rrb-tip-label{font-size:13px;font-weight:700;line-height:18px;letter-spacing:.02em;color:rgba(247,244,235,.55)}
#rr-build .rrb-tip-text{font-size:17px;font-weight:500;line-height:1.4;color:rgba(247,244,235,.86);text-wrap:balance}
#rr-build[data-view="failed"] .rrb-tip-label{display:none}
#rr-build[data-view="failed"] .rrb-tip-text{font-size:16px;color:rgba(247,244,235,.72)}
#rr-build[data-view="done"] .rrb-tip{visibility:hidden}

/* Actions */
#rr-build .rrb-btn{min-height:50px;min-width:0;padding:6px 26px;border-radius:999px;font-size:17px;font-weight:700;line-height:1.1;
  border:1.5px solid rgba(247,244,235,.42);background:transparent;color:var(--rrb-cream)}
#rr-build .rrb-btn:active{background:rgba(247,244,235,.08)}
#rr-build .rrb-btn-primary{background:var(--rrb-cream);border-color:var(--rrb-cream);color:var(--rrb-ink)}
#rr-build .rrb-btn-primary:active{background:#e8e3d4}
#rr-build .rrb-retry,#rr-build .rrb-back{display:none;flex:1;max-width:190px;padding:6px 16px;font-size:16px}
#rr-build[data-view="failed"] .rrb-retry,#rr-build[data-view="failed"] .rrb-back{display:block}
#rr-build[data-view="failed"] .rrb-cancel{display:none}
#rr-build[data-view="done"] .rrb-cancel{visibility:hidden}   /* keeps its space: nothing moves on success */

/* ── Motion: opt-in, only when reduced motion is not requested (and .rrb-still is not set).
      Without it the logo is the complete, static drawn mark and tips swap instantly. ── */
@media (prefers-reduced-motion: no-preference){
  #rr-build:not(.rrb-still).is-entering{animation:rrb-fade-in .28s ease both}
  #rr-build:not(.rrb-still).is-entering .rrb-main{animation:rrb-rise .5s cubic-bezier(.2,.8,.3,1) both}
  #rr-build:not(.rrb-still).is-leaving{animation:rrb-fade-out .26s ease both}
  #rr-build[data-view="building"]:not(.rrb-still) .rrb-main-path{stroke-dasharray:271;stroke-dashoffset:271;animation:rrb-draw var(--rrb-cycle) linear infinite}
  #rr-build[data-view="building"]:not(.rrb-still) .rrb-bar1{stroke-dasharray:22;stroke-dashoffset:22;animation:rrb-bar1 var(--rrb-cycle) linear infinite}
  #rr-build[data-view="building"]:not(.rrb-still) .rrb-bar2{stroke-dasharray:22;stroke-dashoffset:22;animation:rrb-bar2 var(--rrb-cycle) linear infinite}
  #rr-build[data-view="building"]:not(.rrb-still) .rrb-dot-start{animation:rrb-pop-start var(--rrb-cycle) ease-out infinite}
  #rr-build[data-view="building"]:not(.rrb-still) .rrb-dot-end{animation:rrb-pop-end var(--rrb-cycle) ease-out infinite}
  #rr-build[data-view="building"]:not(.rrb-still) .rrb-ripple-start{animation:rrb-ripple var(--rrb-cycle) ease-out infinite}
  #rr-build[data-view="building"]:not(.rrb-still) .rrb-ripple-end{animation:rrb-ripple-end var(--rrb-cycle) ease-out infinite}
  #rr-build[data-view="building"]:not(.rrb-still) .rrb-ping{animation:rrb-ping var(--rrb-cycle) ease-out infinite}
  #rr-build[data-view="done"]:not(.rrb-still) .rrb-ping{animation:rrb-ping-once .8s ease-out both}
  #rr-build:not(.rrb-still) .rrb-tip-text{transition:opacity .24s ease,transform .24s ease}
  #rr-build:not(.rrb-still) .rrb-tip-text.is-out{opacity:0;transform:translateY(-4px)}
  #rr-build:not(.rrb-still) .rrb-tip-text.is-pre{opacity:0;transform:translateY(4px);transition:none}
}

/* Draw loop – identical timing to the app loader: dot → line draws the RR → end dot → hold → fade */
@keyframes rrb-draw{0%,6.99%{stroke-dashoffset:271;opacity:0}7%{stroke-dashoffset:271;opacity:1}67%,88%{stroke-dashoffset:0;opacity:1}96%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes rrb-bar1{0%,33.86%{stroke-dashoffset:22;opacity:0}33.87%{stroke-dashoffset:22;opacity:1}38.74%,88%{stroke-dashoffset:0;opacity:1}96%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes rrb-bar2{0%,58.12%{stroke-dashoffset:22;opacity:0}58.13%{stroke-dashoffset:22;opacity:1}63.01%,88%{stroke-dashoffset:0;opacity:1}96%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes rrb-pop-start{0%{transform:scale(0);opacity:1}4.5%{transform:scale(1.3)}7%,88%{transform:scale(1);opacity:1}96%,100%{transform:scale(1);opacity:0}}
@keyframes rrb-pop-end{0%,67%{transform:scale(0);opacity:1}69.5%{transform:scale(1.3)}72%,88%{transform:scale(1);opacity:1}96%,100%{transform:scale(1);opacity:0}}
@keyframes rrb-ripple{0%,2%{transform:scale(.6);opacity:0}4%{opacity:.7}18%,100%{transform:scale(2.6);opacity:0}}
@keyframes rrb-ripple-end{0%,67%{transform:scale(.6);opacity:0}69%{opacity:.7}83%,100%{transform:scale(2.2);opacity:0}}
@keyframes rrb-ping{0%,67%{transform:scale(1);opacity:0}69%{opacity:.5}92%,100%{transform:scale(1.32);opacity:0}}
@keyframes rrb-ping-once{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.4);opacity:0}}
@keyframes rrb-fade-in{from{opacity:0}to{opacity:1}}
@keyframes rrb-fade-out{to{opacity:0}}
@keyframes rrb-rise{from{transform:translateY(14px)}to{transform:none}}