/* ResponseOne v57 navigation visuals */
:root{--r1-navy:#0f2c55;--r1-navy-2:#0a2142;--r1-red:#e3262d;--r1-green:#0f9d58;--r1-card:#ffffff;--r1-ink:#14202e;--r1-muted:#5d6b7c;--r1-line:#e6eaf0}
body.r1-night{--r1-navy:#173d72;--r1-navy-2:#102c55;--r1-card:#111c2e;--r1-ink:#e8eef7;--r1-muted:#9fb0c6;--r1-line:#22314a;--r1-green:#34c47c}
/* map markers */
.user-dot.r1-vehicle,body.navigating .user-dot.r1-vehicle{width:calc(29.3px * var(--r1-veh, 1))!important;height:calc(44px * var(--r1-veh, 1))!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;filter:drop-shadow(0 0 1.5px rgba(255,255,255,.95)) drop-shadow(0 3px 4px rgba(8,20,40,.45))}
.r1-vehicle img{display:block;width:100%;height:100%;pointer-events:none;user-select:none}
.destination-dot,body .destination-dot{width:38px!important;height:48px!important;border:0!important;border-radius:0!important;background:url('./dest-pin.svg') center/contain no-repeat!important;box-shadow:none!important}
/* turn banner */
html body .app .nav-panel.r1-nav{display:block!important;padding:0!important;min-height:0!important;gap:0!important;overflow:visible;border:0!important;border-radius:20px!important;background:var(--r1-navy)!important;color:#fff;box-shadow:0 10px 30px rgba(6,18,38,.38)!important}
html body .app .nav-panel.r1-nav[hidden],.r1-nav[hidden]{display:none!important}
.r1-nav>.nav-icon,.r1-nav>.nav-copy{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;padding:0!important;margin:-1px!important;border:0!important}
.r1-head{display:grid;grid-template-columns:62px 1fr 26px;grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:14px 12px 14px 14px;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:20px}
.r1-head:active{background:rgba(255,255,255,.06)}
.r1-arrow{grid-row:1;grid-column:1;width:56px;height:56px;justify-self:center;color:#fff}
.r1-arrow svg{width:100%;height:100%;display:block}
.r1-dist{grid-row:2;grid-column:1;justify-self:center;font:800 19px/1.05 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;letter-spacing:-.2px;margin-top:2px;white-space:nowrap}
.r1-dist:empty{display:none}
.r1-text{grid-row:1/3;grid-column:2;min-width:0}
.r1-verb{font:600 15px/1.2 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#b9cbe4;margin-bottom:2px}
.r1-verb:empty{display:none}
.r1-street{font:800 25px/1.12 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;letter-spacing:-.3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.r1-paused .r1-street{font-size:19px}
.r1-paused{background:#7a2a12!important}
.r1-chev{grid-row:1/3;grid-column:3;width:26px;height:26px;color:#b9cbe4;transition:transform .2s ease;opacity:0}
.r1-has-steps .r1-chev{opacity:1}
.r1-expanded .r1-chev{transform:rotate(180deg)}
.r1-chev svg{width:100%;height:100%}
.r1-then{position:absolute;left:14px;top:100%;margin-top:-2px;display:flex;align-items:center;gap:6px;padding:6px 12px 7px;border-radius:0 0 14px 14px;background:var(--r1-navy-2);color:#fff;font:700 15px/1 system-ui,-apple-system,sans-serif;box-shadow:0 6px 14px rgba(6,18,38,.3)}
.r1-then[hidden],.r1-expanded .r1-then{display:none}
.r1-then svg{width:24px;height:24px}
/* upcoming steps dropdown */
.r1-steps{list-style:none;margin:0;padding:0;max-height:0;overflow:hidden;background:var(--r1-card);color:var(--r1-ink);border-radius:0 0 20px 20px;transition:max-height .22s ease}
.r1-expanded .r1-steps{max-height:min(58dvh,470px);overflow-y:auto;overscroll-behavior:contain;border-top:1px solid rgba(255,255,255,.12)}
.r1-expanded .r1-head{border-radius:20px 20px 0 0}
.r1-steps li{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:12px;padding:13px 16px;border-top:1px solid var(--r1-line);font:600 16px/1.25 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.r1-steps li:first-child{border-top:0}
.r1-si{width:30px;height:30px;color:var(--r1-navy)}
body.r1-night .r1-si{color:#8fb8ff}
.r1-si svg{width:100%;height:100%;display:block}
.r1-si svg path[stroke="#0e2a4a"]{stroke:var(--r1-card)}
.r1-st{min-width:0;overflow-wrap:anywhere}
.r1-sd{font:700 14px/1 system-ui,-apple-system,sans-serif;color:var(--r1-muted);white-space:nowrap}
.r1-steps .r1-empty{display:block;color:var(--r1-muted);font-weight:500}
.r1-handle{display:none}
.r1-expanded .r1-handle:not(:empty){display:block;background:var(--r1-card);color:var(--r1-muted);text-align:center;font:600 13px/1 system-ui,sans-serif;padding:10px 0 12px;border-top:1px solid var(--r1-line);border-radius:0 0 20px 20px;cursor:pointer}
.r1-expanded .r1-steps{border-radius:0}
.r1-handle::before{content:'';display:block;width:38px;height:4px;margin:0 auto 8px;border-radius:2px;background:var(--r1-line)}
/* chrome while navigating */
html body.navigating .app .toolbar,html body.navigating .app .suggestions{display:none!important}
html body.navigating .app .nav-panel.r1-nav{top:max(10px,env(safe-area-inset-top))!important;left:10px!important;right:10px!important}
/* bottom trip bar */
html body.navigating .app .trip-bar{display:grid!important;grid-template-columns:48px minmax(0,1fr) auto auto auto;grid-template-areas:"end eta voice overview mini" "end meta voice overview mini";align-items:center;column-gap:10px!important;row-gap:3px!important;left:10px!important;right:10px!important;min-height:78px!important;padding:10px 12px!important;border-radius:22px!important;background:var(--r1-card)!important;color:var(--r1-ink);border:0!important;box-shadow:0 -2px 24px rgba(6,18,38,.22)!important}
html body.navigating .app .trip-bar[hidden]{display:none!important}
html body.navigating .trip-bar #tripEta{grid-area:eta;align-self:end;flex:none;font:800 28px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif!important;color:var(--r1-green)!important;letter-spacing:-.5px}
html body.navigating .trip-bar .trip-meta{grid-area:meta;align-self:start;min-width:0;display:flex!important;flex-wrap:wrap;gap:2px 0;font:600 14px/1.25 system-ui,-apple-system,sans-serif!important;color:var(--r1-muted)}
html body.navigating .trip-bar .trip-meta span{white-space:nowrap;flex:none!important;overflow:visible!important;display:inline!important}
html body.navigating .trip-bar .trip-meta #trafficState[hidden]{display:none!important}
html body.navigating .trip-bar #tripRemaining{color:var(--r1-ink)}
html body.navigating .trip-bar #tripRemaining::after{content:'\00a0·\00a0';color:var(--r1-muted)}
html body.navigating .trip-bar #trafficState{display:block!important;flex-basis:100%;color:var(--r1-muted)!important;font-size:11.5px;font-weight:500;opacity:.85}
html body.navigating .trip-bar button{flex:none;width:48px!important;height:48px!important;min-width:48px!important;padding:0!important;border-radius:50%!important;border:0!important;background:#eef2f7!important;color:var(--r1-ink)!important;font-size:0!important;display:grid!important;place-items:center;box-shadow:none!important}
body.r1-night.navigating .trip-bar button{background:#1d2b42!important}
html body.navigating .trip-bar #voice{grid-area:voice}html body.navigating .trip-bar #overview{grid-area:overview}html body.navigating .trip-bar #miniWindow{grid-area:mini}
html body.navigating .trip-bar #endNavigation{grid-area:end;background:var(--r1-red)!important;color:#fff!important}
html body.navigating .trip-bar #endNavigation svg{width:22px;height:22px}
html body.navigating .trip-bar #miniWindow[hidden]{display:none!important}
html body.navigating .trip-bar #miniWindow::after{content:'PiP';font:800 12px/1 system-ui,sans-serif}
html body.navigating .trip-bar #voice::after{content:'';width:24px;height:24px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9Z' fill='black'/%3E%3Cpath d='M16 8.5a5 5 0 0 1 0 7M18.5 6a8.5 8.5 0 0 1 0 12' stroke='black' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9Z' fill='black'/%3E%3Cpath d='M16 8.5a5 5 0 0 1 0 7M18.5 6a8.5 8.5 0 0 1 0 12' stroke='black' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
html body.navigating .trip-bar #voice[aria-label*="Unmute"]::after{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9Z' fill='black'/%3E%3Cpath d='M16.5 9.5l5 5M21.5 9.5l-5 5' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9Z' fill='black'/%3E%3Cpath d='M16.5 9.5l5 5M21.5 9.5l-5 5' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
html body.navigating .trip-bar #overview::after{content:'';width:24px;height:24px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 4 3 6.5v13L9 17l6 2.5 6-2.5v-13L15 6.5Z M9 4v13M15 6.5v13' stroke='black' stroke-width='2' fill='none' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 4 3 6.5v13L9 17l6 2.5 6-2.5v-13L15 6.5Z M9 4v13M15 6.5v13' stroke='black' stroke-width='2' fill='none' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
/* night chrome for map controls */
body.r1-night .locate,body.r1-night .maplibregl-ctrl-group{background:#16243a!important;color:#e8eef7!important}
body.r1-night .maplibregl-ctrl-attrib{background:rgba(17,28,46,.7)!important;color:#9fb0c6}
body.r1-night .maplibregl-ctrl-attrib a{color:#9fb0c6}

/* ---------- v58 arrival ---------- */
.r1-arr{padding:0 16px 14px;margin-top:-4px}
.r1-arr[hidden]{display:none!important}
.r1-house{display:flex;align-items:baseline;gap:10px;font:800 22px/1.1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;letter-spacing:-.2px;margin:0 0 10px 76px;font-variant-numeric:tabular-nums}
.r1-house:empty{display:none}
.r1-hp{color:#b9cbe4;font-weight:700}
.r1-ha{color:#b9cbe4;font-weight:600;font-size:20px}
.r1-ht{color:#fff;background:rgba(255,255,255,.14);padding:3px 10px 4px;border-radius:9px}
.r1-ht.r1-solo{font-size:30px;padding:4px 12px 5px}
.r1-hs{font:700 16px/1.2 system-ui,-apple-system,sans-serif;color:#d9f5e6}
.r1-bar{height:10px;border-radius:5px;background:rgba(255,255,255,.18);overflow:hidden}
.r1-bar i{display:block;height:100%;width:0;border-radius:5px;background:linear-gradient(90deg,#ffd84d,#ffb000);transition:width .9s linear}
html body .app .nav-panel.r1-nav.r1-arriving .r1-street{font-size:min(31px,8vw);line-height:1.04;letter-spacing:-.4px;color:#ffd84d;-webkit-line-clamp:1;white-space:nowrap}
.r1-arriving .r1-head,.r1-arrived .r1-head{grid-template-columns:64px 1fr 0;column-gap:12px;padding-right:14px}
.r1-arriving .r1-arrow{color:#ffd84d;width:60px;height:60px}
.r1-arriving .r1-dist{font-size:24px;margin-top:4px}
.r1-arriving .r1-verb{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r1-arriving .r1-chev,.r1-arrived .r1-chev{opacity:0!important}
html body .app .nav-panel.r1-nav.r1-arrived{background:#0b7a45!important}
body.r1-night .app .nav-panel.r1-nav.r1-arrived{background:#0d6b3f!important}
.r1-arrived .r1-verb{font:900 18px/1.1 system-ui,-apple-system,sans-serif;letter-spacing:1px;color:#d9f5e6}
.r1-arrived .r1-street{font-size:min(31px,8vw);line-height:1.04;white-space:nowrap;-webkit-line-clamp:1}
.r1-arrived .r1-bar i{background:#fff}
.r1-arrived .r1-house{margin-bottom:8px}
/* destination pin: which side of the street */
.destination-dot[data-r1-side]::after{position:absolute;top:2px;padding:4px 7px 4px;border-radius:8px;background:#ffd84d;color:#0f2c55;font:900 11px/1 system-ui,-apple-system,sans-serif;letter-spacing:.4px;white-space:nowrap;box-shadow:0 2px 6px rgba(6,18,38,.35);border:1.5px solid #0f2c55}
.destination-dot[data-r1-side="left"]::after{content:'◀ LEFT';right:calc(100% - 2px)}
.destination-dot[data-r1-side="right"]::after{content:'RIGHT ▶';left:calc(100% - 2px)}

/* v58: settings button uses the new pulse-pin brand mark (old R icon retired from the map) */
html body .app .toolbar .logo{background-color:#0f2c55!important;background-image:url('./brand-mark-192.png')!important;background-size:cover!important;background-position:center!important}