* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
:root { --bg:#0b1220; --panel:#141c2e; --line:#243049; --cyan:#22d3ee; --green:#34d399; --amber:#f59e0b; --red:#ff6b6b; --ink:#e8edf5; --dim:#8a97ad; }
html,body { height:100%; }
body { background:var(--bg); color:var(--ink); font-family:-apple-system,system-ui,"PingFang TC","Noto Sans TC",sans-serif; overflow:hidden; }
#webgl-fallback {
  position: absolute; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg, #101418); color: #eee; text-align: center; padding: 24px;
}
#webgl-fallback[hidden] { display: none; }
#webgl-fallback p { margin: 8px 0; opacity: .9; }

#map { position:absolute; inset:0; }

#recenter {
  position:absolute; right:12px; bottom:calc(46vh + 12px); width:44px; height:44px;
  background:var(--panel); border:1px solid var(--line); border-radius:50%;
  color:var(--cyan); font-size:22px; display:grid; place-items:center;
  box-shadow:0 4px 14px rgba(0,0,0,.5); z-index:20;
}

#next-turn {
  position:absolute; top:max(env(safe-area-inset-top),8px); left:8px; right:8px;
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:12px 14px; display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:center;
  box-shadow:0 8px 30px rgba(0,0,0,.5); z-index:10;
}
#next-turn .nt-main { display:flex; flex-direction:column; align-items:center; gap:4px; }
#next-turn .nt-distance { font-size:40px; font-weight:800; color:var(--cyan); line-height:1; display:flex; align-items:baseline; gap:4px; }
#next-turn .nt-distance small { font-size:18px; color:var(--dim); font-weight:700; }
#next-turn .nt-icon { width:56px; height:56px; color:var(--amber); display:grid; place-items:center; }
#next-turn .nt-icon svg { width:100%; height:100%; }
#next-turn .nt-street { font-size:22px; font-weight:700; color:var(--ink); line-height:1.2; }
#voice { position:absolute; right:8px; top:8px; width:32px; height:32px; background:var(--bg); border:1px solid var(--line); border-radius:50%; color:var(--ink); font-size:14px; display:grid; place-items:center; }
#voice.off { color:var(--dim); text-decoration:line-through; }
#next-turn .nt-after { font-size:14px; color:var(--dim); margin-top:4px; }
#next-turn .nt-grade { font-size:16px; color:var(--amber); font-weight:700; margin-top:4px; min-height:18px; }
#brand { position:absolute; top:max(env(safe-area-inset-top),8px); left:8px; z-index:30; display:flex; flex-direction:column; gap:1px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:6px 12px; box-shadow:0 4px 14px rgba(0,0,0,.5); pointer-events:none; }
#brand b { font-size:16px; letter-spacing:.06em; color:var(--cyan); }
#brand span { font-size:11px; color:var(--dim); }


#sheet {
  position:absolute; left:0; right:0; bottom:0; background:var(--panel);
  border-top:1px solid var(--line); border-radius:18px 18px 0 0;
  padding:8px 12px calc(env(safe-area-inset-bottom,12px) + 12px);
  max-height:46vh; overflow-y:auto; z-index:10;
}
.grip { width:40px; height:4px; background:var(--line); border-radius:2px; margin:2px auto 8px; }
#stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:6px 0 10px; }
.stat { text-align:center; background:rgba(11,18,32,.6); border:1px solid var(--line); border-radius:10px; padding:6px 2px; }
.stat-val { font-size:16px; font-weight:700; color:var(--cyan); }
.stat-label { font-size:11px; color:var(--dim); margin-top:2px; }

#climb-list { display:flex; flex-direction:column; gap:2px; margin:0 0 8px; }
.climb-head { font-size:13px; color:var(--dim); padding:4px 2px; }
.climb { display:grid; grid-template-columns:52px 1fr; gap:10px; align-items:center; padding:6px 4px; border-bottom:1px solid var(--line); }
.climb-grade { font-size:15px; font-weight:700; color:var(--amber); text-align:right; }
.climb-meta { font-size:13px; color:var(--ink); }

#plan-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:6px; }
#plan-row select { background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:8px; padding:8px; font-size:14px; flex:0 1 auto; min-width:0; }
#btn-trace { flex:0 0 auto; font-size:18px; padding:10px 8px; }
button { background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:10px; padding:10px 14px; font-size:15px; min-height:44px; }
button.primary { background:var(--cyan); color:#04222b; font-weight:700; border:none; flex:1 1 120px; }
button:disabled { opacity:.4; }
#clear { flex:0 0 auto; min-width:44px; min-height:44px; }
#status { color:var(--ink); font-size:13px; padding:8px 2px; }
#cue-list { display:flex; flex-direction:column; gap:2px; }
.cue { display:grid; grid-template-columns:34px 56px 1fr; gap:8px; align-items:center; padding:8px 4px; border-bottom:1px solid var(--line); }
.cue.active { background:rgba(34,211,238,.12); border-radius:8px; }
.cue .ic { width:26px; height:26px; display:grid; place-items:center; color:var(--amber); }
.cue .ic svg { width:22px; height:22px; }
.cue .d { color:var(--cyan); font-weight:700; font-size:14px; }
.cue .t { font-size:16px; }
.cue .t small { color:var(--dim); display:block; font-size:12px; }
.user-marker { width:22px; height:22px; }
.user-arrow { width:0; height:0; border-left:10px solid transparent; border-right:10px solid transparent; border-bottom:20px solid var(--cyan); transform-origin:center 60%; filter:drop-shadow(0 0 4px rgba(34,211,238,.6)); }
.offline-badge { position:absolute; top:8px; right:8px; background:var(--amber); color:#1a1300; font-size:12px; font-weight:700; padding:4px 8px; border-radius:8px; }

#auth-btn { position:absolute; top:max(env(safe-area-inset-top),8px); right:8px; width:40px; height:40px; border-radius:50%; background:var(--panel); border:1px solid var(--line); color:var(--cyan); font-size:18px; display:grid; place-items:center; z-index:30; box-shadow:0 4px 14px rgba(0,0,0,.5); }
#auth-btn.logged { color:var(--green); }

#auth-modal { position:absolute; inset:0; background:rgba(0,0,0,.7); display:grid; place-items:center; z-index:40; padding:16px; }
#auth-modal[hidden] { display:none; }
.auth-box { width:100%; max-width:340px; background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:16px; position:relative; }
.auth-close { position:absolute; top:6px; right:6px; min-width:44px; min-height:44px; background:transparent; border:none; color:var(--dim); font-size:20px; padding:8px; z-index:2; }
.auth-tabs { display:flex; gap:8px; margin:8px 44px 16px 0; }
.auth-tab { flex:1; background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:10px; color:var(--dim); font-size:15px; }
.auth-tab.active { background:var(--cyan); color:#04222b; border:none; font-weight:700; }
#auth-form { display:flex; flex-direction:column; gap:10px; }
#auth-form input { background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:10px; padding:12px; font-size:15px; }
#auth-form input::placeholder { color:var(--dim); }
#auth-submit { margin-top:6px; }
#auth-status { color:var(--dim); font-size:13px; min-height:20px; margin-top:8px; text-align:center; }
#auth-status.error { color:#f87171; }
#auth-status.ok { color:var(--green); }
#auth-logout { width:100%; margin-top:12px; background:transparent; color:var(--dim); }

#route-actions { display:flex; gap:8px; margin:8px 0 4px; }
#route-actions[hidden] { display:none; }
#route-actions button { flex:1; font-size:14px; padding:10px 6px; background:var(--bg); border:1px solid var(--line); border-radius:10px; color:var(--ink); }
#route-actions button:disabled { color:var(--dim); opacity:.5; }

.modal { position:absolute; inset:0; background:rgba(0,0,0,.7); display:grid; place-items:center; z-index:40; padding:16px; }
.modal[hidden] { display:none; }
.modal-box { width:100%; max-width:360px; max-height:80vh; overflow-y:auto; background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:16px; }
.modal-box h3 { font-size:18px; margin-bottom:12px; color:var(--cyan); }
.modal-close { float:right; background:transparent; border:none; color:var(--dim); font-size:18px; padding:0; }
.modal-row { display:flex; gap:8px; align-items:center; margin:10px 0; }
.modal-row input[type="text"] { flex:1; background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:10px; padding:10px; font-size:14px; }
.modal-row input[type="range"] { flex:1; }
#review-rating-val { min-width:24px; text-align:center; color:var(--amber); font-weight:700; }
textarea { width:100%; background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:10px; padding:10px; font-size:14px; resize:none; }

#collect-list, #review-list, #my-collections-list, #my-reviews-list { display:flex; flex-direction:column; gap:6px; max-height:40vh; overflow-y:auto; margin:10px 0; }
.collect-item, .review-item, .my-col-item, .my-rev-item { background:rgba(11,18,32,.6); border:1px solid var(--line); border-radius:10px; padding:10px; font-size:14px; }
.collect-item { display:flex; justify-content:space-between; align-items:center; }
.collect-item button { padding:6px 10px; font-size:13px; }
.review-item .rev-meta { color:var(--dim); font-size:12px; margin-bottom:4px; }
.review-item .rev-text { color:var(--ink); }
.review-item .rev-stars { color:var(--amber); }
#collect-status, #review-status, #my-status { font-size:13px; text-align:center; min-height:18px; color:var(--dim); }
#collect-status.ok, #review-status.ok, #my-status.ok { color:var(--green); }
#collect-status.error, #review-status.error, #my-status.error { color:#f87171; }

.my-tab { flex:1; background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:10px; color:var(--dim); font-size:15px; }
.my-tab.active { background:var(--cyan); color:#04222b; border:none; font-weight:700; }

#btn-city, #btn-trace { flex:0 0 auto; font-size:18px; padding:10px 8px; }

#maint-form { display:flex; flex-direction:column; gap:10px; margin:10px 0; }
#maint-form input, #maint-form select, #maint-form textarea { background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:10px; padding:12px; font-size:15px; }
#maint-form input::placeholder, #maint-form textarea::placeholder { color:var(--dim); }
#maint-list { display:flex; flex-direction:column; gap:6px; max-height:34vh; overflow-y:auto; margin:12px 0; }
.maint-item { background:rgba(11,18,32,.6); border:1px solid var(--line); border-radius:10px; padding:10px; font-size:14px; }
.maint-item .m-meta { color:var(--dim); font-size:12px; margin-top:2px; }
.maint-item .m-note { color:var(--ink); margin-top:4px; word-break:break-word; }

#city-content { display:flex; flex-direction:column; gap:12px; margin-top:10px; }
#city-content[hidden] { display:none; }
.city-section { background:rgba(11,18,32,.6); border:1px solid var(--line); border-radius:12px; padding:10px; }
.city-section-title { font-size:14px; color:var(--cyan); font-weight:700; margin-bottom:8px; }

#city-card { background:rgba(11,18,32,.6); border:1px solid var(--line); border-radius:12px; padding:12px; }
#city-card .city-name { font-size:20px; font-weight:800; color:var(--ink); }
#city-card .city-desc { font-size:14px; color:var(--dim); margin-top:4px; }
#city-card .city-coords { font-size:12px; color:var(--dim); margin-top:6px; }

.poi-stat-row { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.poi-stat { text-align:center; background:rgba(11,18,32,.6); border:1px solid var(--line); border-radius:10px; padding:8px 2px; }
.poi-stat .ps-val { font-size:18px; font-weight:700; color:var(--cyan); }
.poi-stat .ps-label { font-size:11px; color:var(--dim); margin-top:2px; }

#city-routes { display:flex; flex-direction:column; gap:6px; }
.route-item { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; padding:8px 4px; border-bottom:1px solid var(--line); font-size:14px; }
.route-item .r-name { font-weight:700; word-break:break-word; }
.route-item .r-meta { color:var(--dim); font-size:12px; }
.route-item .r-stats { text-align:right; color:var(--cyan); font-size:13px; font-weight:700; }

#city-events { display:flex; flex-direction:column; gap:6px; }
.event-item { background:rgba(11,18,32,.6); border:1px solid var(--line); border-radius:10px; padding:10px; font-size:14px; }
.event-item .e-name { font-weight:700; }
.event-item .e-meta { color:var(--dim); font-size:12px; margin-top:2px; }
.city-empty { color:var(--dim); font-size:14px; text-align:center; padding:10px 0; }

#city-status, #maint-status { font-size:13px; text-align:center; min-height:18px; color:var(--dim); }
#city-status.ok, #maint-status.ok { color:var(--green); }
#city-status.error, #maint-status.error { color:#f87171; }


/* Analysis modal */
.analysis-difficulty { font-size: 1.4em; font-weight: bold; margin: 8px 0 4px; }
.analysis-summary { color: var(--text-dim, #8a97ad); font-size: 0.85em; margin-bottom: 12px; }
.analysis-list { margin: 4px 0 12px; }
.analysis-row { padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 0.85em; }
.analysis-row.hazard { color: #ff6b6b; }
#analysis-modal h4 { margin: 10px 0 4px; font-size: 0.9em; color: var(--text-dim, #8a97ad); }


.small-btn { font-size: 0.75em; padding: 4px 12px; background: rgba(52,211,153,0.15); border: 1px solid var(--accent,#34d399); color: var(--accent,#34d399); border-radius: 6px; cursor: pointer; }
#card-image-container img { max-height: 60vh; object-fit: contain; }

/* ===== Visual Audit Fixes (lcn-muse 2026-08-24) ===== */
/* 1. Touch targets >=44px (route-actions buttons) */
#route-actions button { min-height: 44px; padding: 12px 6px; }

/* 2. Touch targets >=44px (small-btn in analysis modal) */
.small-btn { min-height: 44px; padding: 8px 16px; font-size: 0.8em; }

/* 3. Touch targets >=44px (modal close) */
.modal-close { min-width: 44px; min-height: 44px; padding: 8px; font-size: 22px; }

/* 4. Touch targets >=44px (plan-row select) */
#plan-row select { min-height: 44px; }

/* 5. route-actions wrap on narrow screens (6 buttons in 390px is tight) */
#route-actions { flex-wrap: wrap; }
#route-actions button { min-width: 72px; }

/* 6. auth tabs touch target */
.auth-tab { min-height: 44px; padding: 10px 16px; }

/* 7. my-tab touch target */
.my-tab { min-height: 44px; padding: 10px 16px; }


/* Search modal */
.search-result:hover { background: rgba(52,211,153,0.05); }
#search-results { border-radius: 8px; }

/* UX fixes from lcn-muse review */
#plan { font-size: 15px; padding: 10px 20px; border-radius: 20px; white-space: nowrap; }
#search-input::placeholder { color: var(--dim,#8a97ad); font-size: 13px; }
#analysis-modal h4 { font-size: 13px; font-weight: 700; color: var(--cyan,#22d3ee); margin: 12px 0 4px; }
#analysis-modal .analysis-summary { margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.08); }

/* Final 44px fixes (lcn-muse continuity check) */
#auth-btn { min-width: 44px; min-height: 44px; font-size: 18px; }
#btn-trace { min-width: 44px; min-height: 44px; font-size: 18px; }
#btn-city { min-width: 44px; min-height: 44px; font-size: 18px; }
#btn-search { min-width: 44px; min-height: 44px; font-size: 18px; }
#plan { min-height: 44px; }
#btn-3d { min-width: 44px; min-height: 44px; font-size: 18px; }
#btn-compass { min-width: 44px; min-height: 44px; font-size: 18px; overflow: hidden; }
#voice { min-width: 44px; min-height: 44px; font-size: 18px; }

/* Waypoint pins (numbered, draggable, click to remove) */
.waypoint-pin {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--cyan); color: #04222b;
  font: 700 14px/26px -apple-system, system-ui, sans-serif;
  text-align: center; cursor: grab;
  border: 2px solid #e8edf5; box-shadow: 0 2px 8px rgba(0,0,0,.5);
  user-select: none; -webkit-user-select: none;
}


/* ===== Nav UI Overhaul (M4-Free proposal 2026-08-25) ===== */

/* Next-turn card: icon=direction, number=distance, text=road name ONLY */
#next-turn { padding: 14px 16px; border-radius: 20px; }
#nt-icon { width: 64px; height: 64px; border-radius: 16px; background: var(--panel); display: grid; place-items: center; transition: background .3s, box-shadow .3s; }
#nt-icon svg { width: 44px; height: 44px; }
#nt-distance { font-size: 58px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -0.02em; }
#nt-distance small { font-size: 22px; font-weight: 700; color: var(--dim); margin-left: 2px; }
#nt-street { font-size: 27px; font-weight: 700; color: var(--ink); line-height: 1.2; margin-top: 4px; }
#nt-after { font-size: 13px; color: var(--dim); margin-top: 2px; }

/* Turn direction label: small gray, NOT the main text */
.nt-direction-label { font-size: 13px; font-weight: 500; color: var(--dim); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px; }

/* Proximity colors: 3-tier (blue >500m, amber <200m, red <50m) */
#nt-icon.proximity-far { background: rgba(34,211,238,.12); color: var(--cyan); }
#nt-icon.proximity-near { background: rgba(245,158,11,.15); color: var(--amber); }
#nt-icon.proximity-imminent { background: rgba(255,107,107,.15); color: var(--red); box-shadow: 0 0 0 3px rgba(255,107,107,.2), 0 0 20px rgba(255,107,107,.3); animation: pulse-imminent 1.2s ease-in-out infinite; }
@keyframes pulse-imminent { 0%,100% { box-shadow: 0 0 0 3px rgba(255,107,107,.2), 0 0 20px rgba(255,107,107,.3); } 50% { box-shadow: 0 0 0 4px rgba(255,107,107,.3), 0 0 28px rgba(255,107,107,.4); } }

/* Left proximity bar on card */
#next-turn::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 2px; background: var(--cyan); transition: background .3s; }
#next-turn.proximity-near::before { background: var(--amber); }
#next-turn.proximity-imminent::before { background: var(--red); }

/* Grade chip: thresholded (<3% hidden, 3-6% green, 6-9% amber, >9% red) */
#hr-chip { display:inline-block; margin-left:8px; color:#f87171; font-weight:800; font-size:16px; }
#nt-grade { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; padding: 4px 10px; border-radius: 10px; display: inline-block; margin-top: 4px; }
#nt-grade.grade-easy { background: rgba(52,211,153,.12); color: var(--green); }
#nt-grade.grade-moderate { background: rgba(245,158,11,.12); color: var(--amber); }
#nt-grade.grade-hard { background: rgba(255,107,107,.12); color: var(--red); }
#nt-grade.grade-none { display: none; }

/* Cue drawer: active state with left bar + highlight */
.cue { position: relative; padding: 10px 10px 10px 14px; border-radius: 8px; transition: background .2s; }
.cue.active { background: rgba(34,211,238,.06); }
.cue.active::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--cyan); }
.cue .d { font-variant-numeric: tabular-nums; }


/* ===== Round 2: ride mode / themes / controls (2026-08-27) ===== */
#btn-theme { position:absolute; top:max(env(safe-area-inset-top),8px); right:56px; width:40px; height:40px; border-radius:50%; background:var(--panel); border:1px solid var(--line); color:var(--ink); font-size:16px; display:grid; place-items:center; z-index:30; box-shadow:0 4px 14px rgba(0,0,0,.5); }

#ride-exit { display:none; position:absolute; left:12px; top:12px; width:48px; height:48px; background:rgba(11,18,32,.8); border:1px solid var(--line); border-radius:50%; color:var(--ink); font-size:20px; place-items:center; }
body.ride #ride-exit { display:grid; }
#next-turn .nt-meta-row { display:flex; align-items:center; gap:10px; margin-top:4px; min-height:0; }
#next-turn .nt-meta { font-size:14px; color:var(--dim); min-height:0; font-variant-numeric:tabular-nums; }
body.ride #next-turn .nt-meta { font-size:22px; color:var(--cyan); font-weight:700; }
body.ride #next-turn .nt-icon:empty::before { content:"➤"; }
#btn-ride { background:var(--green); color:#05230f; font-weight:700; }

body.ride #sheet { display:none; }
body.ride #brand { display:none; }
body.ride #next-turn {
  top:auto; bottom:max(env(safe-area-inset-bottom),12px); left:8px; right:8px;
  padding:20px 18px; border-width:2px; z-index:35;
  background:#05080f;
}
body.ride #next-turn .nt-icon { width:96px; height:96px; }
body.ride #next-turn .nt-distance { font-size:84px; }
body.ride #next-turn .nt-distance small { font-size:32px; }
body.ride #next-turn .nt-street { font-size:30px; }
body.ride #next-turn .nt-after { font-size:18px; color:var(--ink); }
body.ride #voice { width:48px; height:48px; font-size:20px; right:12px; top:12px; }

:root.night { --bg:#04070d; --panel:#0a101d; --line:#1c2942; --ink:#dfe9f7; --dim:#7d8ba3; }
:root.night .maplibregl-canvas { filter:brightness(.6) contrast(1.08) saturate(.75); }

:root.hicon { --bg:#0b1220; --panel:#1b2740; --line:#4a5d85; --ink:#ffffff; --dim:#c3cfe2; }
:root.hicon .maplibregl-canvas { filter:contrast(1.12) saturate(1.15); }
:root.hicon #next-turn { border-width:2px; }
:root.hicon #next-turn .nt-street { font-weight:800; }

/* ===== R4-a: route card (redesign v2) ===== */
#route-card { background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:16px; margin:6px 0 10px; box-shadow:0 10px 30px rgba(0,0,0,.45); }
.rc-head { display:flex; justify-content:space-between; align-items:flex-start; }
.rc-title { font-size:17px; font-weight:800; }
.rc-sub { font-size:12px; color:var(--dim); margin-top:3px; }
#rc-details { background:transparent; border:none; color:var(--cyan); font-size:13px; padding:6px 2px; min-height:36px; }
.rc-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:12px 0; }
.rc-stat { background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:9px 4px; text-align:center; }
.rc-stat .v { font-size:16px; font-weight:800; color:var(--cyan); font-variant-numeric:tabular-nums; }
.rc-stat .k { font-size:10px; color:var(--dim); margin-top:2px; }
.rc-offline { display:flex; align-items:center; gap:10px; background:rgba(52,211,153,.08); border:1px dashed rgba(52,211,153,.45); border-radius:12px; padding:10px 12px; margin-bottom:12px; font-size:12px; }
#rc-off-label { white-space:nowrap; color:var(--green); font-weight:700; }
.rc-bar { flex:1; height:5px; border-radius:3px; background:rgba(52,211,153,.15); overflow:hidden; }
#rc-off-bar { display:block; height:100%; background:var(--green); border-radius:3px; transition:width .4s ease; }
#rc-off-pct { font-variant-numeric:tabular-nums; min-width:3ch; text-align:right; color:var(--dim); }
.rc-actions { display:flex; gap:8px; }
#rc-simulate { flex:1; }
#rc-go { flex:1.4; background:var(--green); color:#05230f; font-weight:800; font-size:17px; border:none; }
body.card-collapsed #elev-chart, body.card-collapsed #stats-row, body.card-collapsed #climb-list, body.card-collapsed #cue-list { display:none; }
#route-card[hidden] { display:none; }

/* ===== overlap fix: nav card yields the top control row when a route is active ===== */
body.has-route:not(.ride) #next-turn { top: calc(max(env(safe-area-inset-top), 8px) + 52px); }
body.has-route #brand { display: none; }
.offline-badge { top: calc(max(env(safe-area-inset-top), 8px) + 48px); }

/* ===== sim speed pills (preview sweep multiplier) ===== */
#sim-speed { display:none; align-items:center; gap:6px; margin:8px 0 2px; }
body.sim-running #sim-speed { display:flex; }
#sim-speed .ss-cap { font-size:12px; color:var(--dim); margin-right:2px; }
#sim-speed button { min-width:52px; min-height:44px; padding:8px 10px; border-radius:10px; font-size:14px; font-variant-numeric:tabular-nums; }
#sim-speed button.on { background:var(--cyan); color:#04222b; font-weight:800; border:none; }

/* ===== R4-b: off-route full-screen alert + ride cue overlay ===== */
#offroute-card { position:absolute; inset:0; z-index:40; background:rgba(245,158,11,.14); backdrop-filter:blur(1px); display:grid; place-items:center; }
#offroute-card[hidden] { display:none; }
.or-box { background:rgba(20,15,2,.92); border:2px solid var(--amber); border-radius:20px; padding:26px 30px; text-align:center; max-width:78vw; }
.or-title { font-size:30px; font-weight:800; color:var(--amber); }
.or-dist-line { font-size:20px; margin-top:10px; }
.or-dist { font-weight:800; color:var(--amber); font-variant-numeric:tabular-nums; }
.or-note { font-size:14px; color:var(--dim); margin-top:8px; }
#offroute-card.rerouting .back-note { display:none; }
#offroute-card:not(.rerouting) .reroute-note { display:none; }
#ride-cues-btn { background:rgba(34,211,238,.12); border:1px solid rgba(34,211,238,.4); color:var(--cyan); border-radius:10px; padding:6px 12px; font-size:13px; font-weight:700; min-height:40px; flex:none; }
body.ride.cue-open #cue-list { display:flex; position:absolute; left:4%; right:4%; top:9%; bottom:16%; z-index:38; overflow-y:auto; background:rgba(4,7,13,.96); border:1px solid var(--line); border-radius:16px; padding:10px 6px; }

/* ===== R4-c: entry convergence — FAB / tabs / recents ===== */
#fab-where { position:absolute; right:16px; bottom:calc(46vh + 18px); width:56px; height:56px; border-radius:50%; background:var(--green); color:#05230f; font-size:30px; font-weight:800; border:none; z-index:20; box-shadow:0 8px 24px rgba(0,0,0,.55); }
body.has-route #fab-where { display:none; }
#recent-routes { margin:2px 0 8px; }
#recent-routes[hidden] { display:none; }
.rr-cap { font-size:11px; color:var(--dim); letter-spacing:.08em; margin-bottom:6px; }
.rr-chips { display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; }
.rr-chip { background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:8px 12px; font-size:12px; white-space:nowrap; min-height:40px; }
.rr-chip b { color:var(--cyan); }
.segtabs { display:flex; gap:6px; margin:10px 0; }
.segtabs .seg { flex:1; text-align:center; font-size:13px; padding:9px 0; border-radius:10px; background:var(--bg); border:1px solid var(--line); color:var(--dim); min-height:40px; }
.segtabs .seg.on { background:var(--cyan); color:#04222b; font-weight:700; border:none; }

/* vision-regression fix: FAB yields the right column while ⟲ recenter is visible */
body:has(#recenter:not([hidden])) #fab-where { right: 76px; }

/* a11y: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* tablet / landscape: give the sheet room to breathe beside the map */
@media (min-width: 768px) {
  #sheet { max-width: 480px; left: auto; right: 12px; bottom: 12px; border-radius: 18px; max-height: 70vh; }
  #recenter { bottom: 24px; }
  #fab-where { bottom: 24px; }
  body.ride #next-turn { left: 50%; transform: translateX(-50%); max-width: 560px; }
}
.analysis-tabs { display:flex; gap:6px; margin-bottom:10px; }
.analysis-tab { flex:1; padding:8px 0; border:1px solid var(--line); border-radius:10px; background:var(--bg); color:var(--dim); font-weight:700; }
.analysis-tab.on { background:var(--cyan,#22d3ee); color:#0b1220; }