/* ==========================================
   Southbound — Build a Route (routes.html)

   Phone first (390px): map on top, tools under it in thumb reach,
   details below. From 900px the details sit beside a sticky map.
   Colors and fonts are the tokens from css/style.css.
========================================== */

.rb-page{ padding-bottom:48px; }
.rb-page [hidden]{ display:none !important; }

/* Phone: one column. The map first (search, route type and the three main numbers sit on it), then its tools,
   then the tabs and the one panel they show. The two columns dissolve; from 900px they sit side by side. */
.rb-layout{ display:flex; flex-direction:column; gap:12px; }
.rb-mapcol, .rb-sidecol{ display:contents; }

/* ---------- mode ---------- */
.rb-mode{ display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); }
.rb-mode-btn{
    min-height:44px; border:0; border-radius:8px; background:transparent; color:var(--text-secondary);
    font:inherit; font-weight:600; cursor:pointer;
}
.rb-mode-btn.is-on{ background:var(--primary); color:var(--on-primary); }
.rb-mode-btn:focus-visible, .rb-pin:focus-visible{ outline:2px solid var(--primary-light); outline-offset:2px; }

.rb-loopbar{ display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; }
.rb-loopbar .rb-field{ flex:1 1 140px; }
.rb-loopbar .sb-btn{ flex:1 1 140px; }

/* ---------- map ---------- */
.rb-mapwrap{ position:relative; border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); background:var(--surface); box-shadow:var(--shadow); }
#rbMap{ height:clamp(280px, 44svh, 460px); width:100%; touch-action:none; background:#dfe5dc; }
.rb-hint, .rb-busy{
    position:absolute; left:50%; transform:translateX(-50%); z-index:700; pointer-events:none;
    max-width:calc(100% - 24px); padding:8px 14px; border-radius:999px; font-size:14px; text-align:center;
    background:rgba(15,32,25,.88); color:var(--cream); border:1px solid rgba(255,255,255,.12);
}
.rb-hint{ bottom:14px; }
.rb-busy{ top:12px; }
.rb-busy.sb-wait{ animation:none; }

.leaflet-container{ font-family:var(--font-body, inherit); }
.leaflet-touch .leaflet-bar a{ width:44px; height:44px; line-height:44px; }
.leaflet-touch .leaflet-bar a:first-child{ border-radius:8px 8px 0 0; }
.leaflet-touch .leaflet-bar a:last-child{ border-radius:0 0 8px 8px; }

.rb-pin-wrap{ background:none; border:0; }
.rb-pin{
    display:flex; align-items:center; justify-content:center; width:30px; height:30px; margin:7px;
    border-radius:50%; font:700 13px/1 var(--font-mono, monospace); color:var(--on-primary);
    background:var(--primary); border:3px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,.45);
}
.rb-pin-start{ background:#8fc29a; }
.rb-pin-end{ background:#ecd6b0; }

/* ---------- tools ---------- */
.rb-tools{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
.rb-tools::-webkit-scrollbar{ display:none; }
.rb-tools .sb-btn{ flex:0 0 auto; min-height:44px; padding:0 16px; font-size:14px; }

/* ---------- search ---------- */
.rb-search{ display:flex; gap:8px; }
.rb-search input{ flex:1; min-width:0; min-height:44px; padding:0 12px; font-size:16px; color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:8px; }
.rb-search input:focus-visible{ outline:2px solid var(--primary); outline-offset:1px; }
.rb-search .sb-btn{ min-height:44px; flex:0 0 auto; }
.rb-results{ list-style:none; margin:0; padding:8px; display:flex; flex-direction:column; gap:8px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); }
.rb-result{ display:flex; flex-direction:column; gap:8px; padding:8px; border-radius:8px; background:var(--bg); font-size:14px; color:var(--text-secondary); }
.rb-result-actions{ display:flex; gap:6px; flex-wrap:wrap; }
.rb-result-actions .sb-btn{ flex:1 1 90px; min-height:44px; font-size:14px; }

/* ---------- route options: a sheet on phones, a panel on the left on computers ---------- */
.rb-prefs-open{ display:block; width:100%; min-width:0; min-height:44px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; font-size:14px; }
.rb-prefs-open span{ color:var(--text); opacity:.85; font-weight:500; margin-left:4px; }
.rb-prefs{
    position:fixed; left:0; right:0; bottom:0; margin:0; z-index:4400; max-height:85svh; overflow:auto;
    padding:16px 16px calc(16px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:12px;
    background:var(--surface); border-top:1px solid var(--border); border-radius:16px 16px 0 0; box-shadow:0 -12px 40px rgba(0,0,0,.45);
    transform:translateY(105%); visibility:hidden; transition:transform .25s ease, visibility 0s linear .25s;
}
html.rb-sheet-open .eos-bottomnav{ display:none !important; } /* the sheet takes the bottom of the screen */
.rb-prefs.is-open{ transform:none; visibility:visible; transition:transform .25s ease; }
.rb-prefs-head{ display:flex; align-items:center; justify-content:space-between; }
.rb-prefs-head h2{ margin:0; font:600 16px var(--font-body, inherit); letter-spacing:.02em; text-transform:none; }
.rb-prefs-close{ min-height:44px; }
.rb-pref{ display:flex; flex-direction:column; gap:6px; }
.rb-pref-label{ font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.rb-choice{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:4px; padding:4px; border:1px solid var(--border); border-radius:10px; background:var(--bg); }
.rb-choice button{ min-width:0; min-height:44px; padding:0 4px; border:0; border-radius:7px; background:transparent; color:var(--text-secondary); font:600 14px var(--font-body, inherit); cursor:pointer; }
.rb-choice button.is-on{ background:var(--primary); color:var(--on-primary); }
.rb-choice button:disabled{ cursor:default; opacity:1; }
.rb-choice button:focus-visible{ outline:2px solid var(--primary-light); outline-offset:1px; }

/* ---------- globe ---------- */
.rb-mapwrap .rb-globe{ position:absolute; inset:0; z-index:1001; background:#0b1a14; opacity:0; transition:opacity .25s ease; }
.rb-mapwrap .rb-globe.is-on{ opacity:1; }
.rb-globe-back{ position:absolute; right:10px; top:10px; z-index:1002; min-height:44px; padding:0 14px; border-radius:8px; border:1px solid rgba(255,255,255,.2); background:rgba(15,32,25,.9); color:var(--cream); font:600 14px var(--font-body, inherit); cursor:pointer; }
.rb-globe .maplibregl-ctrl-group button{ width:44px; height:44px; }

/* ---------- mile markers + the line-drag point ---------- */
.rb-mile-wrap{ background:none; border:0; }
.rb-mile{ display:flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#fff; color:#1b4d36; border:2px solid #1b4d36; font:700 11px/1 var(--font-mono, monospace); }
.rb-pin-new{ background:#fff; color:#1b4d36; font-size:18px; }
.rb-hitline{ cursor:grab; }

/* ---------- elevation profile ---------- */
.rb-profile{ margin:0; padding:12px 12px 8px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); position:relative; }
.rb-profile figcaption{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 12px; font:600 14px var(--font-body, inherit); color:var(--text); margin-bottom:6px; }
.rb-profile-plot{ position:relative; touch-action:pan-y; }
.rb-profile-plot.is-empty{ min-height:0; }
.rb-profile-plot svg{ display:block; width:100%; height:auto; }
.rbp-area{ fill:var(--primary); opacity:.16; }
.rbp-line{ fill:none; stroke:var(--primary); stroke-width:2; stroke-linejoin:round; }
.rbp-grid{ stroke:var(--border); stroke-dasharray:3 4; }
.rbp-axis{ stroke:var(--muted); stroke-opacity:.5; }
.rbp-tick{ fill:var(--muted); font:500 11px var(--font-mono, monospace); }
.rbp-band{ fill:var(--gold, var(--amber)); opacity:.24; }
.rbp-band.is-alt{ opacity:.12; }
.rbp-band-label{ fill:var(--text-secondary); font:600 11px var(--font-body, inherit); }
.rbp-crossline{ stroke:var(--text-secondary); stroke-width:1; }
.rbp-dot{ fill:var(--primary); stroke:var(--surface); stroke-width:2; }
.rbp-tip{ position:absolute; top:-4px; transform:translateX(-50%); padding:4px 8px; border-radius:6px; background:var(--bg); border:1px solid var(--border); color:var(--text); font:500 12px var(--font-body, inherit); white-space:nowrap; pointer-events:none; }

/* ---------- safety ---------- */
.rb-safemap-btn{
    position:absolute; right:10px; top:10px; z-index:800; min-height:44px; padding:0 14px; border-radius:8px; cursor:pointer;
    border:1px solid rgba(255,255,255,.25); background:rgba(15,32,25,.9); color:var(--cream); font:600 14px var(--font-body, inherit);
}
.rb-safemap-btn[aria-pressed="true"]{ background:var(--gold, var(--primary)); color:var(--on-primary); border-color:transparent; }
.rb-safemap-btn:disabled{ opacity:.55; cursor:default; }
.rb-safemap-btn:focus-visible, .rb-switch:focus-visible{ outline:2px solid var(--primary-light); outline-offset:2px; }
.rb-busy{ top:auto; bottom:34px; } /* the top right holds the Safe Map button */
.rb-hint:has(~ .rb-busy:not([hidden])){ bottom:80px; }

.rb-safebar{ display:flex; flex-direction:column; gap:8px; padding:12px 14px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); }
.rb-safe-head{ display:flex; align-items:center; gap:12px; }
.rb-safe-badge{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:10px; font:800 17px/1 var(--font-body, inherit); color:#10161b; border:2px solid rgba(255,255,255,.7); }
.rb-safe-badge.is-dark{ color:#fff; }
.rb-safebar.is-waiting .rb-safe-badge{ background:transparent; border:2px dashed var(--border); color:var(--text-secondary); }
.rb-safebar.is-waiting .rb-safe-nums strong{ font:600 17px/1.2 var(--font-body, inherit); color:var(--text-secondary); }
.rb-safe-nums{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.rb-safe-nums strong{ font:600 20px/1.15 var(--font-mono, monospace); color:var(--text); }
.rb-safe-nums span{ font-size:14px; color:var(--text-secondary); }
.rb-safe-worst{ margin:0; font-size:14px; line-height:1.45; color:var(--text); }
.rb-safe-note{ color:var(--text-secondary); }
.rb-why{ padding:10px 12px; border-radius:8px; background:var(--bg); border:1px solid var(--border); font-size:14px; line-height:1.45; color:var(--text); }
.rb-why b{ font-weight:600; }
.rb-why .rb-small{ margin-top:4px; }

.rb-key{ display:inline-flex; align-items:center; justify-content:center; min-width:26px; height:20px; padding:0 4px; margin-right:6px; border-radius:4px; font:800 12px/1 var(--font-body, inherit); color:#10161b; vertical-align:middle; }
.rb-key.is-dark{ color:#fff; }
.rb-key.is-unknown{ color:#10161b; background:repeating-linear-gradient(45deg, #c9cdd1 0 4px, #8a8f94 4px 8px); }

.rb-strip{ margin:0; padding:12px 12px 10px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); }
.rb-strip figcaption{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 12px; font:600 14px var(--font-body, inherit); color:var(--text); margin-bottom:6px; }
.rb-strip-plot svg{ display:block; width:100%; height:auto; touch-action:pan-y; }
.rbs-seg{ cursor:pointer; }
.rbs-seg.is-sel{ stroke:var(--text); stroke-width:2; }
.rbs-letter{ font:800 12px var(--font-body, inherit); fill:#10161b; pointer-events:none; }
.rbs-letter.is-dark{ fill:#fff; }
.rbs-tick{ fill:var(--muted); font:500 11px var(--font-mono, monospace); }
.rbs-cross{ fill:var(--text); }
.rbs-cross-label{ fill:var(--text-secondary); font:700 10px var(--font-mono, monospace); }
.rb-safe-legend{ list-style:none; margin:8px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px 12px; font-size:13px; color:var(--text-secondary); }
.rb-safe-legend li{ display:flex; align-items:center; }

.rb-when{ display:flex; flex-direction:column; gap:8px; }
.rb-range{ width:100%; min-height:44px; accent-color:var(--gold, var(--primary)); }
.rb-when-out{ margin:0; font:600 14px var(--font-body, inherit); color:var(--text); }
.rb-rush{ color:var(--text-secondary); }
.rb-tip{ margin:0; padding:10px 14px; border-radius:var(--radius); border:1px solid var(--primary); background:rgba(201,173,132,.08); font-size:14px; line-height:1.45; color:var(--text); }
.rb-switches{ display:flex; flex-direction:column; gap:8px; }
.rb-switch{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:48px; padding:0 14px; border-radius:10px; border:1px solid var(--border); background:var(--bg); color:var(--text); font:600 15px var(--font-body, inherit); cursor:pointer; text-align:left; }
.rb-switch i{ position:relative; flex:0 0 auto; width:44px; height:26px; border-radius:13px; background:var(--surface-light, #33433b); border:1px solid var(--border); transition:background .2s ease; }
.rb-switch i::after{ content:""; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:var(--text-secondary); transition:transform .2s ease; }
.rb-switch[aria-pressed="true"] i{ background:var(--gold, var(--primary)); }
.rb-switch[aria-pressed="true"] i::after{ transform:translateX(18px); background:var(--on-primary, #10161b); }
.rb-switch:disabled{ opacity:.55; cursor:default; }

.rb-compare{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.rb-compare-col{ display:flex; flex-direction:column; gap:6px; padding:10px; border:1px solid var(--border); border-radius:10px; background:var(--bg); min-width:0; font-size:13px; line-height:1.4; color:var(--text-secondary); }
.rb-compare-col h3{ margin:0; font:600 14px var(--font-body, inherit); text-transform:none; letter-spacing:0; color:var(--text); }
.rb-compare-col strong{ font:700 15px/1.3 var(--font-body, inherit); color:var(--text); }
.rb-compare-col .sb-btn{ min-height:44px; margin-top:auto; }
.rb-compare-note{ grid-column:1 / -1; }
.rb-home{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.rb-home button{ width:100%; min-height:44px; display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:8px; border:1px solid var(--border); background:var(--bg); color:var(--text); font:500 14px var(--font-body, inherit); text-align:left; cursor:pointer; }
.rb-home button[aria-pressed="true"]{ border-color:var(--gold, var(--primary)); }
.rb-safe-letter-wrap{ background:none; border:0; }
.rb-safe-letter{ display:flex; align-items:center; justify-content:center; min-width:26px; height:20px; padding:0 4px; border-radius:4px; background:#fff; border:2px solid; font:800 12px/1 var(--font-body, inherit); color:#10161b; box-shadow:0 1px 4px rgba(0,0,0,.35); }

/* ---------- stats ---------- */
.rb-stats{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
@media (max-width:640px){ .rb-stats{ grid-template-columns:repeat(3, 1fr); } .rb-stat{ padding:8px 10px; } .rb-stat strong{ font-size:15px; } .rb-stat-label{ font-size:11px; } }
.rb-stat{ padding:8px 12px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); min-width:0; }
.rb-stat-label{ display:block; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.rb-stat strong{ display:block; margin-top:2px; font:600 19px/1.15 var(--font-mono, monospace); color:var(--text); overflow-wrap:anywhere; }
.rb-note{ margin:0; padding:10px 14px; border-radius:var(--radius); border:1px solid var(--amber); background:rgba(212,170,98,.1); color:var(--text); font-size:14px; line-height:1.45; }
.rb-retry{ min-height:44px; padding:0 12px; margin-left:6px; background:none; border:1px solid var(--primary); color:var(--primary); border-radius:8px; font:inherit; cursor:pointer; }

/* ---------- surface bar ---------- */
.rb-bar{ display:flex; height:14px; border-radius:7px; overflow:hidden; background:var(--surface-light); }
.rb-seg{ display:block; height:100%; }
.rb-seg-A{ background:#3f8f5a; } .rb-seg-B{ background:#8fb36a; } .rb-seg-C{ background:#9aa39a; } .rb-seg-D{ background:#c9ad84; } .rb-seg-X{ background:#c4533f; }
.rb-legend{ list-style:none; margin:8px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px 14px; font-size:14px; color:var(--text-secondary); }
.rb-dot{ display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; }

/* ---------- cards ---------- */
.rb-card{ border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); }
.rb-card > summary{ min-height:48px; display:flex; align-items:center; padding:0 16px; cursor:pointer; font:600 15px var(--font-body, inherit); letter-spacing:.02em; color:var(--text); list-style:none; }
.rb-card > summary::-webkit-details-marker{ display:none; }
.rb-card > summary::after{ content:"+"; margin-left:auto; color:var(--primary); font-size:20px; }
.rb-card[open] > summary::after{ content:"–"; }
.rb-card-body{ padding:0 16px 16px; display:flex; flex-direction:column; gap:12px; }

.rb-lines{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; font-size:15px; line-height:1.45; color:var(--text-secondary); }
.rb-lines li{ padding-left:14px; position:relative; }
.rb-lines li::before{ content:""; position:absolute; left:0; top:.65em; width:5px; height:5px; border-radius:50%; background:var(--primary); }
.rb-lines li.rb-empty::before{ display:none; }
.rb-lines li.rb-empty, .rb-empty{ padding-left:0; color:var(--muted); font-size:15px; }
.rb-small{ margin:0; font-size:13px; line-height:1.45; color:var(--muted); }
.rb-warn{ margin:0; padding:10px 14px; border-radius:var(--radius); border:1px solid var(--orange); background:rgba(210,148,112,.12); color:var(--text); font-size:14px; line-height:1.45; }
.rb-link{ display:inline-flex; align-items:center; min-height:44px; color:var(--primary); }
.rb-credit{ padding:0 4px; }

.rb-row{ display:flex; gap:8px; flex-wrap:wrap; }
.rb-row .sb-btn{ flex:1 1 140px; min-height:44px; }
.rb-fields{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.rb-field{ display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--muted); min-width:0; }
.rb-field input{
    min-height:44px; padding:0 12px; font-size:16px; color:var(--text); background:var(--bg);
    border:1px solid var(--border); border-radius:8px; width:100%;
}
.rb-field input:focus-visible{ outline:2px solid var(--primary); outline-offset:1px; }

.rb-sub > summary{ min-height:44px; display:flex; align-items:center; cursor:pointer; color:var(--primary); }
.rb-steps{ margin:4px 0 0; padding-left:20px; display:flex; flex-direction:column; gap:6px; font-size:14px; line-height:1.45; color:var(--text-secondary); }

/* ---------- saved ---------- */
.rb-saved{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.rb-saved-row{ display:flex; flex-direction:column; gap:8px; padding:12px; border:1px solid var(--border); border-radius:10px; background:var(--bg); }
.rb-saved-main{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.rb-saved-main strong{ overflow-wrap:anywhere; }
.rb-saved-main span{ font-size:13px; color:var(--muted); }
.rb-saved-actions{ display:flex; gap:8px; }
.rb-saved-actions .sb-btn{ flex:1; min-height:44px; }

@media (max-width:640px){
    .rb-page .eos-today-phase{ display:none; }
    .rb-page .eos-today-hero{ margin-bottom:12px; }
    .rb-hero p{ display:none; }
}

/* ---------- desktop ---------- */
@media (min-width:900px){
    .rb-layout{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(320px,1fr); gap:24px; align-items:start; }
    .rb-mapcol, .rb-sidecol{ display:flex; flex-direction:column; gap:12px; min-width:0; }
    .rb-mapcol{ position:sticky; top:84px; }
    #rbMap{ height:clamp(520px, calc(100svh - 230px), 820px); }
    /* Route options: a panel over the left side of the map, opened from the same button. */
    .rb-prefs{ position:absolute; left:10px; top:10px; bottom:10px; right:auto; width:min(320px, calc(100% - 20px)); z-index:1003;
        border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px; transform:translateX(-110%); }
    .rb-prefs.is-open{ transform:none; }
}
@media (prefers-reduced-motion:reduce){ .rb-mode-btn, .rb-card > summary, .rb-prefs, .rb-globe, .rb-switch i, .rb-switch i::after{ transition:none; } }
.rb-stat strong.is-wait{ font:500 14px/1.3 var(--font-body, inherit); color:var(--text-secondary); word-break:normal; overflow-wrap:normal; }


/* ==========================================================================
   LOOK (Eddie, 2026-11-01): the app's foggy blue with the lens, glass and bubble tokens (css/style.css), gold as
   the accent only. B: a tall map with the search, route type and main numbers laid on it. C: Route / Safety /
   Fuel / Save tabs under it, one panel at a time. The same page is the public free tool (html:not(.rb-app)).
   ========================================================================== */
.rb-mode, .rb-choice{ border-radius:18px; padding:4px; background:var(--sb-inset-bg); border:1px solid var(--sb-inset-border); box-shadow:var(--sb-inset-shadow); }
.rb-mode-btn, .rb-choice button{ border-radius:14px; }
.rb-mode-btn.is-on, .rb-choice button.is-on{ background:var(--sb-lens-bg); color:var(--on-primary); box-shadow:var(--sb-lens-shadow); }
.rb-search input{ border-radius:14px; background:var(--sb-inset-bg); border:1px solid var(--sb-inset-border); }
.rb-search .sb-btn, .rb-prefs-open{ border-radius:14px; }
.rb-prefs-open{ background:var(--sb-glass-bg); border:1px solid var(--sb-glass-border); }
.rb-tools .sb-btn{ border-radius:14px; background:var(--sb-glass-bg); border:1px solid var(--sb-glass-border); box-shadow:var(--sb-glass-shadow); color:var(--text); }
.rb-card, .rb-profile, .rb-strip, .rb-safebar{ border-radius:22px; background:var(--sb-bubble-raised-bg); border:1px solid var(--sb-bubble-raised-border); box-shadow:var(--sb-bubble-raised-shadow); }
.rb-card > summary{ min-height:54px; padding:0 20px; font:650 17px var(--font-body, inherit); }
.rb-card-body{ padding:0 20px 20px; }
.rb-card > summary::after{ color:var(--gold, var(--primary)); }
.rb-field input{ border-radius:12px; }
#rbSave{ border-radius:14px; background:var(--sb-lens-bg); box-shadow:var(--sb-lens-shadow); color:var(--on-primary); border:0; }
#rbGpx{ border-radius:14px; }

/* the map: tall, muted, with glass controls */
.rb-mapwrap{ border-radius:22px; border:1px solid var(--sb-glass-border); box-shadow:0 30px 60px -30px rgba(0,0,0,.85); }
#rbMap{ height:clamp(440px, 68svh, 720px); background:#1b2733; }
.leaflet-tile-pane{ filter:invert(1) hue-rotate(185deg) saturate(.35) brightness(1.05) contrast(.88); }
.rb-mapwrap .leaflet-bar{ border:1px solid rgba(236,230,212,.16) !important; border-radius:14px; overflow:hidden; box-shadow:0 8px 20px -8px rgba(0,0,0,.6); }
.rb-mapwrap .leaflet-bar a{ background:rgba(14,22,30,.78) !important; color:var(--text) !important; border-bottom-color:rgba(236,230,212,.12) !important; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.rb-mapwrap .leaflet-control-attribution{ background:rgba(14,22,30,.6) !important; color:rgba(236,230,212,.7) !important; border-radius:8px 0 0 0; }
.rb-mapwrap .leaflet-control-attribution a{ color:rgba(236,230,212,.85) !important; }
.rb-mapwrap .leaflet-top{ top:118px; }
.rb-mapwrap .leaflet-bottom{ bottom:96px; }
.leaflet-overlay-pane path[stroke="#1b4d36"]{ stroke:var(--gold-light, #E6CB8E); }
.leaflet-overlay-pane path[stroke="#ffffff"]{ stroke:#0d151c; }
.rb-pin-wrap .rb-pin-end{ color:#1b1608; }

.rb-top{ position:absolute; z-index:800; left:10px; right:10px; top:10px; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
.rb-top > *{ pointer-events:auto; }
.rb-top .rb-search input, .rb-top .rb-mode{ background:rgba(14,22,30,.72); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-color:rgba(236,230,212,.16); }
.rb-top .rb-search .sb-btn{ background:rgba(29,42,54,.9); border:1px solid rgba(236,230,212,.16); color:var(--text); }
.rb-top .rb-mode{ align-self:flex-start; width:min(300px, 100%); }
.rb-top .rb-mode-btn{ min-height:44px; font-size:14px; }
.rb-top .rb-results{ position:absolute; left:0; right:0; top:52px; max-height:46svh; overflow:auto; z-index:5; background:rgba(14,22,30,.94); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border:1px solid rgba(236,230,212,.16); }
.rb-top .rb-loopbar{ padding:10px; border-radius:16px; background:rgba(14,22,30,.82); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border:1px solid rgba(236,230,212,.16); }
.rb-mapwrap .rb-safemap-btn{ top:auto !important; bottom:104px; border-radius:14px !important; background:rgba(14,22,30,.78) !important; border:1px solid rgba(236,230,212,.16) !important; color:var(--text) !important; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.rb-hint{ bottom:96px !important; }

/* the three main numbers, on the map */
.rb-statwrap{ position:absolute; z-index:800; left:10px; right:10px; bottom:10px; }
.rb-stats{ display:grid; grid-template-columns:repeat(3, 1fr); gap:0; padding:4px 0; border-radius:20px; background:var(--sb-bubble-dark-bg); border:1px solid var(--sb-bubble-dark-border); box-shadow:var(--sb-bubble-dark-shadow); overflow:hidden; }
.rb-statwrap .rb-stats{ background:rgba(14,22,30,.8); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-color:rgba(236,230,212,.14); }
.rb-stat{ border:0; border-radius:0; background:none; padding:6px 12px; }
.rb-stat-label{ font:600 10.5px/1.3 var(--font-mono, monospace); letter-spacing:.12em; color:var(--muted); }
.rb-stat strong{ font-family:var(--font-display, inherit); font-weight:800; text-transform:uppercase; font-size:20px; letter-spacing:.01em; }
.rb-stat strong.is-wait{ font:500 13px/1.3 var(--font-body, inherit); text-transform:none; }
.rb-stats-more .rb-stat{ padding:10px 12px; }
@media (min-width:900px){ .rb-stat strong{ font-size:24px; } .rb-statwrap .rb-stat{ padding:8px 16px; } }

/* tabs: a lens on the chosen one */
.rb-tabs{ display:grid; grid-template-columns:repeat(4, 1fr); gap:4px; padding:4px; border-radius:18px; background:var(--sb-inset-bg); border:1px solid var(--sb-inset-border); box-shadow:var(--sb-inset-shadow); }
.rb-tabs button{ min-height:44px; border:0; border-radius:14px; background:transparent; color:var(--text-secondary); font:650 14px var(--font-body, inherit); cursor:pointer; }
.rb-tabs button.is-on{ background:var(--sb-lens-bg); color:var(--on-primary); box-shadow:var(--sb-lens-shadow); }
.rb-tabs button:focus-visible{ outline:2px solid var(--primary-light); outline-offset:2px; }
.rb-panel{ display:flex; flex-direction:column; gap:12px; min-width:0; }
.rb-card[open] > summary, .rb-card > summary{ pointer-events:none; }
.rb-card > summary::after{ content:none !important; }

/* guests: saving needs an account */
.rb-guest{ display:flex; flex-direction:column; gap:10px; padding:16px; border-radius:22px; background:rgba(210,173,98,.08); border:1px solid rgba(210,173,98,.32); }
.rb-guest p{ margin:0; font-size:15px; line-height:1.45; color:var(--text); }
.rb-guest .rb-small{ font-size:13px; color:var(--text-secondary); }
.rb-guest .sb-btn{ align-self:flex-start; min-height:44px; display:inline-flex; align-items:center; text-decoration:none; }
html.rb-app .rb-guest{ display:none; }
html:not(.rb-app) #rbSave, html:not(.rb-app) #rbSavedCard, html:not(.rb-app) [data-save-only], html:not(.rb-app) [data-app-only]{ display:none !important; }

/* public page */
html:not(.rb-app) .rb-page{ width:min(1200px, 100% - 32px); margin:0 auto; padding:clamp(20px,4vw,48px) 0 40px; }
.rb-hero{ margin-bottom:20px; }
.rb-kicker{ font:600 11.5px/1.3 var(--font-mono, monospace); letter-spacing:.2em; text-transform:uppercase; color:var(--gold-light, #E6CB8E); }
.rb-hero h1{ font-family:var(--font-display, inherit); font-weight:900; text-transform:uppercase; font-size:clamp(46px,8vw,84px); line-height:.9; margin:8px 0 10px; color:var(--text); }
.rb-hero p{ max-width:58ch; margin:0; color:var(--text-secondary); font-size:16px; line-height:1.5; }
html:not(.rb-app) .rb-card, html:not(.rb-app) .rb-profile, html:not(.rb-app) .rb-strip, html:not(.rb-app) .rb-safebar{ background:rgba(29,42,54,.55); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-top-color:rgba(214,185,142,.42); }
html:not(.rb-app) .rb-mode-btn.is-on, html:not(.rb-app) .rb-choice button.is-on, html:not(.rb-app) .rb-tabs button.is-on{ background:linear-gradient(180deg,#E6CB8E,#D2AD62); color:#1b1608; }
html:not(.rb-app) .rb-tabs{ background:rgba(10,16,22,.7); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
.rb-cta-wrap{ width:min(1200px, 100% - 32px); margin:0 auto 48px; }
html.rb-app [data-public-only]{ display:none; }
/* the hint sits left of Safe Map, not over it */
.rb-hint{ left:12px !important; transform:none !important; max-width:calc(100% - 150px); text-align:left; border-radius:16px; }