:root{ --surface: rgba(255,255,255,.94); --surface-raised: #fff; --hairline: rgba(24,33,47,.10); --text-primary: #18212f; --text-secondary: #6b7280; --accent-up: #16a34a; --accent-down: #dc5a45; --accent-unknown: #c9877d; --accent-action: #2563eb; --accent-3d: #9333ea; --chart-grid: rgba(24,33,47,.07); --chart-fill-trail: rgba(220,90,69,.10); --chart-fill-route: rgba(22,163,74,.10); --active-tint-green: rgba(22,163,74,.13); --active-tint-purple: rgba(147,51,234,.13); } /* ── Dark-mode design tokens (single source for the dark UI) ── Activated by data-theme="dark" on (set in _applyTheme). The class-based .dark / .dark-ui rules use these exact colours. */ :root[data-theme="dark"]{ --surface: rgba(28, 28, 30, 0.92); /* panels, cards; with backdrop-filter blur(20px) */ --surface-raised: #2C2C2E; /* chips, round buttons */ --hairline: rgba(255, 255, 255, 0.08); --text-primary: #E5E5EA; --text-secondary: #98989F; --accent-up: #30D158; /* gain, active mode, route */ --accent-down: #FF6B5E; /* loss, trail profile */ --accent-unknown: #FFB1A6; --accent-action: #0A84FF; /* Done */ --accent-3d: #BF5AF2; --chart-grid: rgba(255, 255, 255, 0.06); --chart-fill-trail: rgba(255, 107, 94, 0.10); --chart-fill-route: rgba(48, 209, 88, 0.10); --active-tint-green: rgba(48, 209, 88, 0.18); --active-tint-purple: rgba(191, 90, 242, 0.18); } *{box-sizing:border-box;margin:0;padding:0;user-select:none;-webkit-user-select:none} input,textarea{user-select:text;-webkit-user-select:text} html,body{margin:0;padding:0;font-family:'Inter',-apple-system,sans-serif;overflow:hidden;background:#000;overscroll-behavior:none} #app{position:fixed;top:0;left:0;right:0;bottom:0;background:#cbc7be} #map{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#cbc7be;background-image:repeating-linear-gradient(-45deg,rgba(0,0,0,.06) 0,rgba(0,0,0,.06) 1px,transparent 1px,transparent 9px);z-index:1} .leaflet-container{background-color:#cbc7be !important;background-image:repeating-linear-gradient(-45deg,rgba(0,0,0,.06) 0,rgba(0,0,0,.06) 1px,transparent 1px,transparent 9px) !important} #map3d{position:fixed;top:0;left:0;right:0;bottom:0;background:#cbc7be;z-index:1;display:none} #layer-btns{ position:fixed;top:calc(10px + env(safe-area-inset-top));right:10px;z-index:4100; display:flex;flex-direction:column;gap:5px;align-items:flex-end } #nav-scroll{display:contents} #btn-rail-collapse{display:none} .lbtn{ width:38px;height:38px;flex-shrink:0; display:flex;align-items:center;justify-content:center; border:1px solid rgba(255,255,255,.75);border-radius:11px; background:rgba(255,255,255,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); color:#374151;cursor:pointer;text-decoration:none; box-shadow:0 2px 10px rgba(0,0,0,.11),0 1px 3px rgba(0,0,0,.07),inset 0 1px 0 rgba(255,255,255,.9); transition:all .15s cubic-bezier(.4,0,.2,1) } .lbtn.active{background:#4f6bcd;color:#fff;border-color:#3d58b8;box-shadow:0 3px 10px rgba(79,107,205,.4),inset 0 1px 0 rgba(255,255,255,.2)} .lbtn:hover:not(.active){background:rgba(255,255,255,.98);color:#111827;box-shadow:0 4px 14px rgba(0,0,0,.14),0 1px 3px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,1)} .lbtn-sep{height:1px;background:rgba(0,0,0,.07);margin:1px 6px} /* ── Dark-map button theme ── */ .dark-ui .lbtn{ background:rgba(18,18,28,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-color:rgba(255,255,255,.1);color:rgba(255,255,255,.8); box-shadow:0 2px 10px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08) } .dark-ui .lbtn.active{background:#4f6bcd;border-color:#3d58b8;color:#fff;box-shadow:0 3px 10px rgba(79,107,205,.45)} .dark-ui .lbtn:hover:not(.active){background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.2)} .dark-ui .lbtn-sep{background:rgba(255,255,255,.08)} /* ── Side panels (upload / search) ── */ .btn-row{position:relative;display:flex;align-items:flex-start;justify-content:flex-end} .side-panel{ position:absolute;right:42px;top:0; width:268px; background:rgba(255,255,255,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); border-radius:14px;box-shadow:0 8px 32px rgba(0,0,0,.12),0 2px 8px rgba(0,0,0,.07),inset 0 1px 0 rgba(255,255,255,1); border:1px solid rgba(0,0,0,.07); padding:11px 12px 12px;font:12px/1.4 'Inter',-apple-system,sans-serif; display:none;z-index:1 } .side-panel.open{display:block} .panel-title{font-size:10px;font-weight:700;color:#9ca3af;text-transform:uppercase; letter-spacing:.07em;margin-bottom:7px} .layer-choices-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:2px} .layer-choice{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px; padding:8px 4px 6px;border-radius:10px;border:1.5px solid transparent; cursor:pointer;color:#374151;position:relative; -webkit-tap-highlight-color:transparent;touch-action:manipulation; transition:background .1s,border-color .1s,color .1s;background:rgba(0,0,0,.03)} .layer-choice svg{width:22px;height:22px;flex-shrink:0} .layer-choice .lc-label{font-size:9.5px;font-weight:600;text-align:center;line-height:1.2;white-space:nowrap} .layer-choice .lc-key{ position:absolute;top:4px;right:5px; font-size:7.5px;font-weight:700;color:#9ca3af;font-family:monospace;line-height:1} .layer-choice:hover{background:rgba(79,107,205,.08);color:#3b5bdb} .layer-choice.active{background:rgba(79,107,205,.12);border-color:rgba(79,107,205,.4);color:#4f6bcd} .overlay-choice{display:flex;align-items:center;gap:7px;padding:5px 9px;border-radius:9px; cursor:pointer;font-size:12px;color:#374151;font-weight:500; -webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background .1s} .overlay-choice:hover{background:rgba(79,107,205,.07)} .overlay-choice.active{color:#4f6bcd;font-weight:600} .overlay-check{width:15px;height:15px;border-radius:4px;border:1.5px solid #d1d5db;flex-shrink:0; display:flex;align-items:center;justify-content:center;transition:all .15s} .overlay-choice.active .overlay-check{background:#4f6bcd;border-color:#4f6bcd} .overlay-check svg{display:none} .overlay-choice.active .overlay-check svg{display:block} .panel-divider{height:1px;background:rgba(0,0,0,.06);margin:6px 0} .panel-grid{display:grid;grid-template-columns:1fr 1fr;row-gap:2px;column-gap:0} .panel-grid-span{grid-column:1/-1} /* 3D + Weather hidden on mobile only — see media query below */ .lp-view-btn{ flex:1;display:flex;align-items:center;justify-content:center;gap:6px; padding:9px 8px;border-radius:10px;border:1.5px solid transparent; cursor:pointer;color:#374151;background:rgba(0,0,0,.04); font:600 11.5px/1 'Inter',system-ui; -webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background .1s } .lp-view-btn:hover{background:rgba(79,107,205,.08);color:#3b5bdb} .lp-view-btn.active{background:rgba(79,107,205,.12);border-color:rgba(79,107,205,.4);color:#4f6bcd} .btn-nav-toggle{display:none} .pt-label{display:none} .upload-btn{ display:flex;align-items:center;gap:7px;width:100%; padding:8px 10px;margin-bottom:9px; background:rgba(79,107,205,.05);border:1.5px dashed rgba(79,107,205,.35); border-radius:9px;cursor:pointer; font-size:11.5px;color:#4f6bcd;font-weight:600; -webkit-tap-highlight-color:transparent;touch-action:manipulation; transition:background .15s,border-color .15s } .upload-btn:hover{background:rgba(79,107,205,.09);border-color:rgba(79,107,205,.55)} .upload-btn:active{background:rgba(79,107,205,.15)} #file{display:none} .status{margin-top:7px;font-size:11px} .ok{color:#0a7a2a}.err{color:#b00020} .spin{ display:inline-block;width:9px;height:9px;border:2px solid rgba(0,0,0,.2); border-top-color:rgba(0,0,0,.7);border-radius:50%;margin-right:5px; animation:spin .8s linear infinite;vertical-align:-1px } @keyframes spin{to{transform:rotate(360deg)}} .strava-row{display:flex;gap:5px} .strava-row input{ flex:1;min-width:0;padding:6px 9px;font-size:12px; border-radius:8px;border:1.5px solid rgba(0,0,0,.1); outline:none;font-family:inherit;color:#111827;background:#f9fafb } .strava-row input:focus{border-color:#4f6bcd;background:#fff;box-shadow:0 0 0 3px rgba(79,107,205,.12)} .strava-row button{ width:32px;height:32px;background:#4f6bcd;color:#fff; border:none;border-radius:8px;cursor:pointer;flex-shrink:0; display:flex;align-items:center;justify-content:center; box-shadow:0 2px 6px rgba(79,107,205,.35);transition:background .15s } .strava-row button:hover{background:#3d58b8} /* ── Route planner ── */ #map.plan-mode,#map.plan-mode .leaflet-container{cursor:crosshair!important} /* plan-panel — independent panel, shown above or instead of elev-panel */ #plan-panel{ position:fixed;bottom:0;left:0;right:0;z-index:3; height:190px;display:none; background:var(--surface);border-top:1px solid var(--hairline); backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); box-shadow:0 -2px 10px rgba(0,0,0,.08);overflow:hidden } #plan-panel.visible{display:block} #plan-panel.editing-route{height:190px} #plan-panel.editing-route + #plan-meta-stack{bottom:218px} #plan-panel.with-route{bottom:140px;box-shadow:0 -1px 5px rgba(0,0,0,.06)} #elev-panel.elev-wide ~ #plan-panel.with-route{bottom:185px} /* Planning metadata floats outside the chart as one vertical stack. */ #plan-meta-stack{ position:fixed;right:14px;bottom:218px;z-index:13; display:none;flex-direction:column;align-items:flex-end;gap:14px; pointer-events:none } #plan-panel.has-stats + #plan-meta-stack{display:flex} #plan-panel.with-route + #plan-meta-stack{bottom:322px} #elev-panel.elev-wide ~ #plan-panel.with-route + #plan-meta-stack{bottom:367px} #elev-panel.beta-activity-profile ~ #plan-panel.with-route + #plan-meta-stack{bottom:372px} #plan-stats{ display:none;align-items:center;gap:5px;white-space:nowrap;flex-shrink:0 } #plan-panel.has-stats #plan-stats{display:flex} #plan-surface-key{ display:none;align-items:center;gap:7px; padding:4px 8px;border-radius:8px; background:rgba(255,255,255,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); color:#4b5563;pointer-events:none;font:750 7.5px/1 'Inter',system-ui;white-space:nowrap } #plan-tip{ position:fixed;background:rgba(15,15,20,.93);color:#fff; font:11px/1.3 'Inter',system-ui;padding:6px 12px 5px;border-radius:8px; pointer-events:none;white-space:nowrap;display:none; transform:translateX(-50%);z-index:2000; border-top:2.5px solid #7aa2dc;box-shadow:0 2px 12px rgba(0,0,0,.4) } /* plan-toolbar — always flex, lives inside plan-panel */ #plan-toolbar{ position:absolute;top:8px;left:8px;right:var(--plan-toolbar-right,8px);height:38px; display:flex;align-items:center;gap:8px;z-index:4 } /* plan toolbar buttons — same base as elev route buttons + icon + tiny label */ .pt-prof{ height:22px;min-width:22px;border:none;border-radius:6px; background:rgba(0,0,0,.07);cursor:pointer;flex-shrink:0; display:flex;align-items:center;justify-content:center;gap:3px; color:#666;padding:0 5px;box-shadow:0 1px 3px rgba(0,0,0,.12); touch-action:manipulation;-webkit-tap-highlight-color:transparent; font:10px/1 'Inter',system-ui;font-weight:700;white-space:nowrap } .pt-prof.active{background:#4f6bcd;color:#fff} .pt-prof:hover{background:rgba(0,0,0,.15)} .pt-prof.active:hover{background:#e04000} .pt-prof:disabled{opacity:.3;pointer-events:none} /* Done — the only filled button in the toolbar */ #pt-load{ background:var(--accent-action);color:#fff; height:34px;border-radius:17px;padding:0 16px;gap:7px } #pt-load:hover{background:#1d4ed8} /* Plain activity/status label; .msg = transient status (Routing…, errors). */ #pt-status{ display:none;align-items:center;gap:5px;flex:0 1 auto;min-width:0; height:22px;padding:0 4px;border-radius:0;background:none;color:#18212f; font:800 10px/1 'Inter',system-ui;letter-spacing:.02em; white-space:nowrap;overflow:hidden;text-overflow:ellipsis } #pt-status.msg{display:flex;letter-spacing:0;font-weight:650;color:#6b7280;background:none} #pt-status.idle-prompt{display:flex;color:#6b7280;font-weight:650;letter-spacing:0} #plan-panel.dark #pt-status.idle-prompt{color:var(--text-secondary)} /* dark planning panel — mirrors the activity panel: invert the whole card (chart bg → dark, line hue preserved), then re-invert the chrome so the toolbar + surface legend keep their normal colours on the dark card */ /* ── Dark planning panel — matches the activity panel's slate theme ── */ #plan-panel.dark{ background:var(--surface); border-top-color:var(--hairline); backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); box-shadow:0 -14px 40px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.05) } #plan-panel.dark #plan-stats .est{ background:var(--surface-raised);box-shadow:inset 0 0 0 1px var(--hairline);color:var(--text-primary) } #plan-panel.dark #plan-stats .est.elev-gain{color:var(--accent-up)} #plan-panel.dark #plan-stats .est.elev-loss{color:var(--accent-down)} #plan-panel.dark #plan-seg,#plan-panel.dark #plan-quiet{background:rgba(255,255,255,.05)} #plan-panel.dark .plan-type-btn{color:var(--text-primary)} /* Active mode uses the same neutral raised focus surface as the toolbar. */ #plan-panel.dark .plan-type-btn.active{ background:#3A3A3C;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);position:relative } /* undo / trash → round toolbar-style buttons (draft), no segmented track */ #plan-panel.dark #plan-quiet{background:none;padding:0;gap:5px} #plan-panel.dark #plan-quiet .pt-prof{ width:34px;height:34px;min-width:34px;border-radius:50%;color:var(--text-secondary); background:var(--surface-raised);box-shadow:inset 0 0 0 1px var(--hairline) } #plan-panel.dark #plan-quiet .pt-prof:hover{background:#3A3A3C;color:#E5E5EA} #plan-panel.dark #pt-load{background:var(--accent-action)} #plan-panel.dark #pt-load:hover{background:#3D9BFF} #plan-panel.dark #pt-clear:hover{color:var(--accent-down)} #plan-panel.dark #pt-status{background:none;color:#fff} #plan-panel.dark #pt-status.msg{background:none;color:#fff} #plan-panel.dark + #plan-meta-stack #plan-surface-key{background:var(--surface);box-shadow:inset 0 0 0 1px var(--hairline);color:var(--text-primary)} /* plan type row — floats above plan-panel at right */ #plan-type-row{ display:none;position:fixed;right:10px;z-index:4001; bottom:calc(140px + 8px); flex-direction:row;gap:5px;align-items:center } #plan-type-row.visible{display:flex} #plan-panel.with-route ~ #plan-type-row{bottom:calc(280px + 8px)} #elev-panel.elev-wide ~ #plan-panel.with-route ~ #plan-type-row{bottom:calc(325px + 8px)} /* floating type row (now empty stub) */ .plan-type-btn{display:none} /* surface key — floats near elev panel, no background card */ #surface-key{ position:fixed;right:10px;z-index:1000;bottom:calc(160px + env(safe-area-inset-bottom)); display:none;align-items:center;gap:7px; padding:4px 8px;border-radius:8px; background:rgba(255,255,255,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); color:#4b5563;pointer-events:none;font:750 7.5px/1 'Inter',system-ui;white-space:nowrap } /* Planning modes use a light segmented surface by default. */ #plan-seg{ display:flex;gap:2px;padding:4px;border-radius:20px; background:rgba(24,33,47,.07);box-shadow:inset 0 0 0 1px rgba(24,33,47,.07); flex-shrink:0;margin-left:auto } #plan-toolbar .plan-type-btn{ display:flex;height:30px;padding:0 12px;border-radius:15px;border:none;flex-direction:row; gap:6px;align-items:center;justify-content:center;flex-shrink:0; background:none;cursor:pointer;color:#4b5563;box-shadow:none; touch-action:manipulation;-webkit-tap-highlight-color:transparent; font:11px/1 'Inter',system-ui;font-weight:700;white-space:nowrap; transition:background .14s,color .14s } #plan-toolbar .plan-type-btn svg{flex-shrink:0} #plan-toolbar .plan-type-btn.active{ background:#fff;color:#18212f; box-shadow:0 1px 4px rgba(15,23,42,.12),inset 0 0 0 1px rgba(24,33,47,.06); position:relative } #plan-toolbar .plan-type-btn:hover:not(.active){background:rgba(255,255,255,.55);color:#18212f} /* quiet group — undo/clear as low-key icons (destructive actions shouldn't shout) */ #plan-quiet{ display:flex;gap:5px;padding:0;border-radius:0; background:none;flex-shrink:0 } #plan-quiet .pt-prof{ width:34px;height:34px;min-width:34px;border-radius:50%; background:rgba(24,33,47,.07); box-shadow:inset 0 0 0 1px rgba(24,33,47,.06);color:#6b7280 } #plan-quiet .pt-prof:hover{background:rgba(24,33,47,.1);color:#18212f} #pt-clear:hover{color:#dc2626} /* small permanent label on POI-snapped waypoints */ .leaflet-tooltip.plan-wp-label{ background:rgba(255,255,255,.92);color:#18212f;border:none;border-radius:6px; padding:2px 6px;font:650 9px/1.2 'Inter',system-ui; box-shadow:0 2px 8px rgba(15,30,60,.2);white-space:nowrap } .leaflet-tooltip.plan-wp-label::before{display:none} /* ── Search ── */ #search-input{ width:100%;padding:7px 10px;font-size:12px;font-family:inherit; border-radius:9px;border:1.5px solid rgba(0,0,0,.1); outline:none;color:#111827;background:#f9fafb } #search-input:focus{border-color:#4f6bcd;background:#fff;box-shadow:0 0 0 3px rgba(79,107,205,.12)} #search-results{margin-top:7px;display:none} .sr-item{ display:flex;align-items:center;gap:8px; padding:7px 6px;border-radius:8px;cursor:pointer; font-size:12px;line-height:1.3; -webkit-tap-highlight-color:transparent;transition:background .1s } .sr-item:hover,.sr-item:active,.sr-item.sr-active{background:rgba(79,107,205,.08)} .sr-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0} .sr-peak{background:#c87860}.sr-col{background:#89b0e6}.sr-city{background:#888} .kf-btn{width:22px;height:22px;padding:0;border-radius:5px;border:1px solid rgba(0,0,0,.12); background:#f4f4f4;color:#666;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0} .kf-btn.active{background:#4f6bcd;color:#fff;border-color:#4f6bcd} .sr-name{flex:1;font-weight:500;color:#222} .sr-ele{font-size:11px;color:#888;white-space:nowrap} .sr-empty{font-size:11px;color:#999;padding:4px 5px} .sr-share{flex-shrink:0;background:none;border:none;padding:2px 4px;cursor:pointer;color:#aaa;font-size:13px;line-height:1;border-radius:4px} .sr-share:hover{color:#4f6bcd;background:rgba(79,107,205,.08)} /* ── History panel — bottom sheet on mobile, side panel on desktop ── */ #hp-overlay{ position:fixed;inset:0;z-index:1999; background:rgba(0,0,0,0); transition:background .28s; display:none;pointer-events:none } #hp-overlay.open{ display:block;pointer-events:all; background:rgba(0,0,0,.35) } #hp-panel{ position:fixed;z-index:2000; background:#fff; display:flex;flex-direction:column;overflow:hidden; font:13px/1.4 'Inter',-apple-system,sans-serif; transition:transform .32s cubic-bezier(.4,0,.2,1) } @media (max-width:600px){ #hp-panel{ left:0;right:0;bottom:0;height:82vh; border-radius:20px 20px 0 0; box-shadow:0 -4px 32px rgba(0,0,0,.18); transform:translateY(100%) } #hp-panel.open{transform:translateY(0)} } @media (min-width:601px){ #hp-panel{ right:0;top:0;bottom:0;width:320px; box-shadow:-4px 0 24px rgba(0,0,0,.12); transform:translateX(100%) } #hp-panel.open{transform:translateX(0)} } #hp-drag{ display:none; width:36px;height:4px;border-radius:2px; background:rgba(0,0,0,.12);margin:10px auto 0;flex-shrink:0 } @media (max-width:600px){ #hp-drag{display:block} } #hp-header{ padding:14px 16px 12px; border-bottom:1px solid rgba(0,0,0,.07); display:none;align-items:center;gap:12px;flex-shrink:0 } #hp-avatar{ width:38px;height:38px;border-radius:50%; object-fit:cover;background:#edf3fb;flex-shrink:0; border:2px solid rgba(137,176,230,.4) } #hp-name{font-weight:600;font-size:14px;color:#1e293b;letter-spacing:-.01em} #hp-email{font-size:11px;color:#94a3b8;margin-top:1px} #hp-actions{margin-left:auto;display:flex;gap:6px;align-items:center} #hp-safety-action{ display:none;align-items:center;gap:5px; background:rgba(244,63,94,.09);border:1px solid rgba(244,63,94,.14); padding:6px 9px;border-radius:999px;color:#be123c; font:650 11px/1 'Inter',sans-serif;cursor:pointer;white-space:nowrap } #hp-logout{ background:none;border:1px solid rgba(0,0,0,.12); padding:4px 10px;border-radius:6px;font:11px/1 'Inter',sans-serif; color:#64748b;cursor:pointer;font-weight:500 } #hp-logout:hover{background:#f8fafc;color:#1e293b} #hp-logout .hp-logout-ico{display:none} #hp-close{ width:28px;height:28px;border-radius:50%;border:none; background:#f1f5f9;color:#64748b;cursor:pointer; display:flex;align-items:center;justify-content:center;flex-shrink:0 } #hp-close:hover{background:#e2e8f0;color:#1e293b} #hp-body{overflow-y:auto;flex:1;padding:8px 10px;padding-bottom:calc(env(safe-area-inset-bottom,0px)+8px)} #hp-login{padding:36px 24px 28px;text-align:center} #hp-login-icon{ width:60px;height:60px;border-radius:16px;background:#f0f0f8; display:inline-flex;align-items:center;justify-content:center;margin-bottom:16px; border:1px solid rgba(137,176,230,.3) } #hp-login h3{font-size:15px;font-weight:700;color:#1e293b;margin-bottom:8px;letter-spacing:-.02em} #hp-login p{font-size:13px;color:#64748b;line-height:1.6;margin-bottom:24px} #hp-login-btn{ background:#4f6bcd;color:#fff;border:none;border-radius:10px; font:600 14px 'Inter',sans-serif;padding:13px 0;width:100%;cursor:pointer; display:flex;align-items:center;justify-content:center;gap:10px; box-shadow:0 4px 14px rgba(100,128,200,.28);letter-spacing:-.01em } #hp-login-btn:active{opacity:.9;transform:scale(.99)} .hp-strava-login-btn{ display:flex;align-items:center;justify-content:center;gap:10px; background:#FC4C02;color:#fff;border:none;border-radius:10px; font:600 14px 'Inter',sans-serif;padding:13px 0;width:100%;cursor:pointer; margin-top:10px;box-shadow:0 4px 14px rgba(252,76,2,.25);letter-spacing:-.01em } .hp-strava-login-btn:active{opacity:.9;transform:scale(.99)} .hp-zepp-login-btn{ display:flex;align-items:center;justify-content:center;gap:10px; background:#173f2d;color:#fff;border:none;border-radius:10px; font:600 14px 'Inter',sans-serif;padding:13px 0;width:100%;cursor:pointer; margin-top:10px;box-shadow:0 4px 14px rgba(23,63,45,.25);letter-spacing:-.01em } .hp-zepp-login-btn:active{opacity:.9;transform:scale(.99)} #hp-strava{padding:0 16px 16px;display:none} #hp-strava-connect{ display:flex;align-items:center;justify-content:center;gap:9px; padding:11px 14px;border-radius:10px;background:#FC4C02;color:#fff; border:none;cursor:pointer;font:600 13px 'Inter',sans-serif;width:100%; box-shadow:0 3px 10px rgba(252,76,2,.22) } #hp-strava-connect:hover{background:#e04402} #hp-strava-connected{ display:flex;align-items:center;gap:10px;padding:10px 12px; border-radius:10px;background:rgba(252,76,2,.06);border:1px solid rgba(252,76,2,.12) } #hp-strava-avatar{width:30px;height:30px;border-radius:50%;object-fit:cover;flex-shrink:0} #hp-strava-name{font-size:13px;font-weight:600;color:#1e293b;line-height:1.2} #hp-strava-unlink{font-size:11px;color:#94a3b8;background:none;border:none;cursor:pointer;padding:0;margin-top:1px;text-align:left} #hp-strava-unlink:hover{color:#e84800} /* Zepp link block — mirrors Strava, summit.day dark-green accent */ #hp-zepp{padding:0 16px 16px;display:none} #hp-zepp-connect{ display:flex;align-items:center;justify-content:center;gap:9px; padding:11px 14px;border-radius:10px;background:#173f2d;color:#fff; border:none;cursor:pointer;font:600 13px 'Inter',sans-serif;width:100%; box-shadow:0 3px 10px rgba(23,63,45,.22) } #hp-zepp-connect:hover{background:#0f2e20} #hp-zepp-connected{ display:flex;align-items:center;gap:10px;padding:10px 12px; border-radius:10px;background:rgba(107,162,146,.08);border:1px solid rgba(107,162,146,.18) } #hp-zepp-avatar{width:30px;height:30px;border-radius:50%;object-fit:cover;flex-shrink:0} #hp-zepp-name{font-size:13px;font-weight:600;color:#1e293b;line-height:1.2} #hp-zepp-unlink{font-size:11px;color:#94a3b8;background:none;border:none;cursor:pointer;padding:0;margin-top:1px;text-align:left} #hp-zepp-unlink:hover{color:#6BA292} #login-wall-strava{ display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:11px 22px;border-radius:9px;border:none; background:#FC4C02;color:#fff;font:600 13px/1 'Inter',sans-serif; cursor:pointer;box-shadow:0 2px 8px rgba(252,76,2,.3); transition:box-shadow .13s,background .13s;width:100%;margin-top:8px } #login-wall-strava:hover{background:#e04402;box-shadow:0 4px 12px rgba(252,76,2,.4)} #login-wall-zepp{ display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:11px 22px;border-radius:9px;border:none; background:#173f2d;color:#fff;font:600 13px/1 'Inter',sans-serif; cursor:pointer;box-shadow:0 2px 8px rgba(23,63,45,.3); transition:box-shadow .13s,background .13s;width:100%;margin-top:8px } #login-wall-zepp:hover{background:#0f2e20;box-shadow:0 4px 12px rgba(23,63,45,.4)} /* ── Location viewer overlay (/@username) ── */ #loc-viewer{ position:fixed;bottom:16px;left:50%;transform:translateX(-50%); background:rgba(15,15,20,.93);color:#fff; font:12px/1.4 'Inter',system-ui;padding:10px 16px 9px;border-radius:10px; box-shadow:0 2px 16px rgba(0,0,0,.4);border-top:2.5px solid #7aa2dc; z-index:2000;display:none;pointer-events:none;text-align:center;min-width:160px } #loc-viewer.visible{display:block} #loc-viewer.xhair-hidden{display:none!important} #loc-viewer strong{font-size:13px;font-weight:700} #loc-viewer .loc-age{opacity:.6;font-size:11px;margin-top:2px} /* #loc-viewer-prof replaced by main #elev-panel in viewer mode */ /* ── Sharing: green flash on successful send ── */ #sp-elev-big.just-sent{color:#16a34a;transition:color .2s} #sp-elev-big{transition:color .6s} /* ── Share button (mobile shows native share icon) ── */ .sp-copy-btn .copy-label{display:inline} .sp-copy-btn .share-icon{display:none} @media(max-width:540px){ .sp-copy-btn .copy-label{display:none} .sp-copy-btn .share-icon{display:inline-flex;align-items:center} } /* ── Safety panel mobile bottom-sheet ── */ @media(max-width:540px){ #safety-panel.side-panel{ position:fixed!important;left:0!important;right:0!important;bottom:0!important; top:auto!important;width:auto!important;border-radius:16px 16px 0 0!important; padding:0 0 env(safe-area-inset-bottom)!important; box-shadow:0 -4px 24px rgba(0,0,0,.15)!important; max-height:92dvh;overflow-y:auto;display:none } #safety-panel.side-panel.open{display:block} #sp-sheet-handle{display:block} #sp-inner{padding:0 18px 20px} } @media(min-width:541px){ #sp-sheet-handle{display:none} #sp-inner{padding:0} } #sp-sheet-handle{width:36px;height:4px;border-radius:2px;background:rgba(0,0,0,.15); margin:10px auto 14px;cursor:pointer} #sp-elev-big{font-size:48px;font-weight:800;color:#1e293b;letter-spacing:-.04em; text-align:center;line-height:1;margin:4px 0 2px} #sp-elev-unit{font-size:13px;color:#94a3b8;text-align:center;margin-bottom:4px} /* ── Full-screen login wall (summit.day, no route) ── */ #login-wall{ position:fixed;inset:0;z-index:9999; background:linear-gradient(160deg,#f0f4ff 0%,#e8eef8 100%); display:none;flex-direction:column;align-items:center;justify-content:center; font-family:'Inter',-apple-system,sans-serif; } #login-wall.visible{display:flex} #login-wall-card{ background:#fff;border-radius:16px;padding:40px 36px 36px; box-shadow:0 4px 32px rgba(0,0,0,.1),0 1px 4px rgba(0,0,0,.06); border:1.5px solid rgba(0,0,0,.07); text-align:center;max-width:320px;width:90%; } #login-wall-logo{ width:52px;height:52px;background:#4f6bcd;border-radius:12px; display:inline-flex;align-items:center;justify-content:center;margin-bottom:18px } #login-wall h2{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:8px;letter-spacing:-.03em} #login-wall p{font-size:13px;color:#64748b;line-height:1.6;margin-bottom:28px} #login-wall-btn{ display:inline-flex;align-items:center;gap:10px; padding:11px 22px;border-radius:9px;border:1.5px solid rgba(0,0,0,.1); background:#fff;color:#1e293b;font:500 13px/1 'Inter',sans-serif; cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.08); transition:box-shadow .13s,background .13s;width:100%;justify-content:center } #login-wall-btn:hover{background:#f8fafc;box-shadow:0 2px 8px rgba(0,0,0,.12)} #login-wall-btn img{width:18px;height:18px} #login-wall-note{font-size:11px;color:#94a3b8;margin-top:14px} .hp-section{ font-size:10px;font-weight:700;color:#94a3b8;text-transform:uppercase; letter-spacing:.06em;padding:12px 6px 5px } .hp-tabs{ display:grid;grid-template-columns:repeat(4,1fr);gap:4px; padding:4px;margin-bottom:8px;background:rgba(24,33,47,.045); border-radius:10px } .hp-tab{ height:30px;border:0;border-radius:7px;background:transparent; color:#64748b;font:650 10.5px/1 'Inter',sans-serif;cursor:pointer } .hp-tab.active{background:#fff;color:#1e293b;box-shadow:0 1px 4px rgba(15,23,42,.1)} #hp-stats{margin:0 0 9px} .hp-stats-label{ font-size:10px;font-weight:700;color:#94a3b8;text-transform:uppercase; letter-spacing:.06em;padding:2px 4px 6px } .hp-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px} .hp-stat-grid div{ min-width:0;background:rgba(24,33,47,.045);border-radius:8px; padding:7px 5px;text-align:center } .hp-stat-grid strong{ display:block;color:#1e293b;font:750 12px/1.1 'Inter',sans-serif; white-space:nowrap;overflow:hidden;text-overflow:ellipsis } .hp-stat-grid span{ display:block;color:#94a3b8;font:650 9px/1 'Inter',sans-serif; text-transform:uppercase;letter-spacing:.04em;margin-top:4px } .hp-empty{ padding:28px 20px;text-align:center;color:#94a3b8; font-size:13px;line-height:1.6 } .hp-error{color:#e84800} .hp-item{ display:flex;gap:11px;padding:9px 10px;border-radius:14px;cursor:pointer; align-items:center;-webkit-tap-highlight-color:transparent; background:rgba(24,33,47,.035);border:none; transition:background .14s,transform .14s } .hp-item+.hp-item{margin-top:5px} .hp-item:hover,.hp-item:active{background:rgba(37,99,235,.08);transform:translateY(-1px)} .hp-thumb{ width:46px;height:46px;border-radius:50%; background:#edf3fb;flex-shrink:0;overflow:hidden; border:none;position:relative; box-shadow:inset 0 0 0 1px rgba(24,33,47,.06); display:flex;align-items:center;justify-content:center } .hp-thumb canvas{position:absolute;inset:0;width:100%;height:100%} .hp-thumb img{display:block;width:100%;height:100%;object-fit:cover} .hp-thumb svg{opacity:.35} .hp-info{flex:1;min-width:0} .hp-title{font-weight:600;font-size:13px;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px;letter-spacing:-.01em} .hp-meta{font-size:11px;color:#94a3b8;line-height:1.4} .hp-badge{ display:inline-block;margin-top:4px; font-size:9px;font-weight:700;padding:3px 7px;border-radius:999px; letter-spacing:.04em;text-transform:uppercase;white-space:nowrap } .hp-badge-strava{background:#fff3f0;color:#e84800} .hp-badge-gpx{background:#f0fdf4;color:#15803d} .hp-badge-osm{background:#eff6ff;color:#1d4ed8} .hp-fav{ width:30px;height:30px;border-radius:50%;border:0;background:rgba(24,33,47,.055); color:#cbd5e1;cursor:pointer;flex-shrink:0;font-size:17px;line-height:1; display:flex;align-items:center;justify-content:center; opacity:0;transform:scale(.92);transition:opacity .12s,transform .12s,background .12s,color .12s } .hp-item:hover .hp-fav, .hp-item:focus-within .hp-fav, .hp-fav.active{opacity:1;transform:scale(1)} .hp-fav.active{color:#f59e0b;background:rgba(245,158,11,.13)} .hp-fav:disabled{opacity:.5;cursor:default} .hp-load-more{ width:100%;height:36px;margin:9px 0 4px;border:1px solid rgba(24,33,47,.1); border-radius:10px;background:#fff;color:#475569; font:650 12px/1 'Inter',sans-serif;cursor:pointer } #btn-history{position:relative} #btn-history img{width:24px;height:24px;border-radius:50%;object-fit:cover} #seg-ts{ display:none; position:fixed;bottom:calc(10px + env(safe-area-inset-bottom));right:10px; z-index:1000; font-size:10px;font-weight:600;letter-spacing:.3px; color:#4f6bcd;line-height:1; background:rgba(255,255,255,.94);backdrop-filter:blur(10px); border-radius:7px;padding:5px 9px; box-shadow:0 1px 8px rgba(0,0,0,.18); border:1px solid rgba(137,176,230,.35); pointer-events:none } /* map labels */ /* Pastel-alpine palette: label ink (never pure black) + palette accents. TODO(dark): terrain elevation ramp + a dark variant are NOT done — the basemap is raster tiles, so per-feature terrain/water/contour banding isn't possible without a vector basemap (MapLibre v5 color-relief or a vector source swap). When adding dark mode, do NOT invert the ramp (snow -> near-black is wrong); design a separate dark ramp. */ .lbl{ background:rgba(255,255,255,.94); border-radius:7px; padding:3px 8px 3px 9px; box-shadow:0 2px 8px rgba(0,0,0,.15); font:11px/1.35 'Inter',system-ui; color:#3E4A42; /* label ink */ white-space:nowrap; border-left:3px solid #E8A87C; /* peak: route coral */ user-select:none; -webkit-user-drag:none } .lbl.col{border-left-color:#7FB3C9} /* col: river teal */ .lbl.refuge{border-left-color:#6BA292} /* refuge: accent jade */ .lbl b{font-size:11px;font-weight:700} .lbl small{color:#6B7568;font-size:10px} /* muted ink */ .event-atlas-pin{ position:relative;display:grid;place-items:center;min-width:30px;height:30px;padding:0 8px; border:3px solid #fff;border-radius:999px;background:#173f2d;color:#fff; box-shadow:0 3px 12px rgba(15,23,42,.35);font:800 11px/1 Inter,system-ui,sans-serif; cursor:pointer;white-space:nowrap;transform:translateY(-2px) } .event-atlas-pin:after{ content:"";position:absolute;bottom:-7px;width:0;height:0; border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid #173f2d } .event-atlas-pin.selected{background:#fc4c02;box-shadow:0 0 0 3px rgba(252,76,2,.28),0 4px 14px rgba(15,23,42,.4)} .event-atlas-pin.selected:after{border-top-color:#fc4c02} .event-atlas-pin .event-atlas-count{font-size:10px} /* elevation panel — fits screen, no horizontal scroll */ #elev-panel{ position:fixed;bottom:0;left:0;right:0;z-index:3; height:140px;display:none; background:rgba(255,255,255,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); border-top:1px solid rgba(0,0,0,.07); box-shadow:0 -4px 24px rgba(0,0,0,.1),0 -1px 4px rgba(0,0,0,.05); touch-action:none; overflow:hidden; transition:height .22s cubic-bezier(.4,0,.2,1) } #elev-panel.minimized{ height:40px;width:40px;left:auto;border-radius:50%;margin:0 14px 14px 0; background:rgba(255,255,255,.8)!important; backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5); border:1px solid rgba(255,255,255,.7)!important; box-shadow:0 10px 34px rgba(15,23,42,.2),0 2px 8px rgba(15,23,42,.1)!important; display:flex!important;align-items:center!important;justify-content:center!important; overflow:hidden} #elev-panel.minimized #elev-min{ position:static!important;inset:unset!important; width:40px!important;height:40px!important;border-radius:50%; background:transparent;color:#374151; display:flex!important;align-items:center!important;justify-content:center!important; cursor:pointer} #elev-panel.minimized #elev-min svg{width:16px;height:16px} #elev-panel.minimized #elev-svg, #elev-panel.minimized ~ #elev-tip, #elev-panel.minimized #elev-color, #elev-panel.minimized #elev-slope, #elev-panel.minimized #elev-surface, #elev-panel.minimized #elev-share, #elev-panel.minimized #elev-export, #elev-panel.minimized #elev-split, #elev-panel.minimized #elev-fly, #elev-panel.minimized #elev-time, #elev-panel.minimized #elev-rename, #elev-panel.minimized #elev-close, #elev-panel.minimized #elev-stats, #elev-panel.beta-activity-profile.minimized #elev-stats{display:none!important} body:has(#elev-panel.minimized) #surface-key{display:none!important} .dark-ui #elev-panel.minimized,:root[data-theme="dark"] #elev-panel.minimized{ background:var(--surface)!important;border-color:var(--hairline)!important; box-shadow:0 10px 34px rgba(0,0,0,.38),0 2px 8px rgba(0,0,0,.24)!important} .dark-ui #elev-panel.minimized #elev-min,:root[data-theme="dark"] #elev-panel.minimized #elev-min{color:rgba(255,255,255,.8)} #elev-svg{display:block;width:100%;height:100%} #plan-svg{ display:block;width:100%;height:calc(100% - 50px);margin-top:50px; overflow:visible;pointer-events:none } /* Empty-state overlay: capsule shortcuts to load/copy a route */ #plan-empty{ display:none;position:absolute;left:0;right:0;top:50px;bottom:0;z-index:5; flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:0 16px } #plan-panel.plan-empty-on #plan-empty{display:flex} #plan-panel.plan-empty-on #pt-status.idle-prompt{visibility:hidden} .plan-empty-tip{ font:12px/1.3 -apple-system,system-ui,sans-serif;color:#6b7280; letter-spacing:.01em;font-weight:600 } .plan-cap-row{ display:flex;flex-wrap:wrap;justify-content:center;gap:8px; max-width:100%;max-height:84px;overflow-y:auto } .plan-cap{ display:inline-flex;align-items:center;gap:6px; height:30px;padding:0 13px;border:1px solid var(--hairline,rgba(0,0,0,.1)); border-radius:15px;background:rgba(0,0,0,.04);cursor:pointer; font:12.5px/1 -apple-system,system-ui,sans-serif;font-weight:600;color:#374151; box-shadow:0 1px 3px rgba(0,0,0,.08);white-space:nowrap; transition:background .12s,transform .08s } .plan-cap:hover{background:rgba(0,0,0,.08)} .plan-cap:active{transform:scale(.96)} .plan-cap-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 1px rgba(0,0,0,.12) inset} /* dark */ #plan-panel.dark .plan-empty-tip{color:var(--text-secondary)} #plan-panel.dark .plan-cap{ background:var(--surface-raised,#2C2C2E);border-color:var(--hairline,rgba(255,255,255,.12)); color:var(--text-primary,#E5E5EA) } #plan-panel.dark .plan-cap:hover{background:#3A3A3C} #elev-tip{ position:fixed; background:rgba(15,15,20,.93);color:#fff; font:11px/1.3 'Inter',system-ui;padding:6px 12px 5px; border-radius:8px;pointer-events:none; white-space:nowrap;display:none; transform:translateX(-50%); z-index:2000; border-top:2.5px solid var(--tip-color,#7aa2dc); box-shadow:0 2px 12px rgba(0,0,0,.4) } @media (orientation:portrait) and (max-width:490px){ #elev-tip{max-width:calc(100vw - 16px);overflow:hidden} } #loc-btn.active{background:#4f6bcd;color:#fff} #elev-btns{position:absolute;inset:0;pointer-events:none} #elev-btns>*{pointer-events:auto} #elev-panel.minimized #elev-btns{transform:none!important;position:static;width:40px;height:40px} #elev-share,#elev-export,#elev-split,#elev-fly,#elev-slope,#elev-surface,#elev-time,#elev-rename,#elev-min,#elev-close{ position:absolute;top:7px; width:24px;height:24px;border:none;border-radius:7px; background:rgba(0,0,0,.06);cursor:pointer; display:flex;align-items:center;justify-content:center; color:#6b7280;z-index:10;padding:0;flex-shrink:0; box-shadow:0 1px 3px rgba(0,0,0,.08); touch-action:manipulation; -webkit-tap-highlight-color:transparent; transition:background .13s,color .13s,box-shadow .13s; } #elev-min{right:8px} #elev-close{right:37px;display:none} #elev-share{right:37px} #elev-rename{right:66px;display:none} #elev-export{right:66px} #elev-split{right:95px} #elev-fly{right:124px} #elev-slope{right:153px} #elev-surface{right:182px;display:none;font:750 7.5px/1 'Inter',system-ui; background:linear-gradient(135deg,#ddeafd 0%,#d4f4f1 48%,#fee7d4 100%)!important; color:#4b5563!important;box-shadow:0 1px 4px rgba(0,0,0,.1)} #elev-time{right:211px;display:none} /* when close button is visible, share shifts right */ #elev-panel.has-close #elev-share{right:66px} #elev-panel.has-close #elev-rename{right:95px} #elev-panel.has-close #elev-export{right:95px} #elev-panel.has-close #elev-split{right:124px} #elev-panel.has-close #elev-fly{right:153px} #elev-panel.has-close #elev-slope{right:182px} #elev-panel.has-close #elev-surface{right:211px} #elev-panel.has-close #elev-time{right:240px} #elev-share:hover,#elev-export:hover,#elev-split:hover,#elev-fly:hover,#elev-slope:hover,#elev-surface:hover,#elev-time:hover,#elev-rename:hover,#elev-min:hover,#elev-close:hover{background:rgba(0,0,0,.12);color:#111827;box-shadow:0 2px 6px rgba(0,0,0,.1)} #elev-split.active{background:#e84800;color:#fff;box-shadow:0 2px 6px rgba(232,72,0,.35)} #elev-fly.active{background:#059669;color:#fff;box-shadow:0 2px 6px rgba(5,150,105,.35)} #elev-slope.active{ background:linear-gradient(135deg,#2563eb 0%,#14b8a6 48%,#f97316 100%); color:#fff;box-shadow:0 6px 16px rgba(37,99,235,.24),0 2px 8px rgba(249,115,22,.18) } #elev-surface.active{background:#4b5563;color:#fff;box-shadow:0 2px 6px rgba(75,85,99,.35)} #elev-surface.loading{font-size:0} #elev-surface.loading:after{ content:"";width:12px;height:12px;border-radius:50%;border:2px solid rgba(255,255,255,.55); border-top-color:currentColor;animation:spin .7s linear infinite } #elev-time.active{background:#7c3aed;color:#fff;box-shadow:0 2px 6px rgba(124,58,237,.35)} #elev-color{ position:absolute;top:7px;right:211px; width:24px;height:24px;border-radius:7px;cursor:pointer; border:none;z-index:10;padding:0; background:rgba(0,0,0,.06);box-shadow:0 1px 3px rgba(0,0,0,.08); display:none;align-items:center;justify-content:center } #elev-color:before{ content:"";width:12px;height:12px;border-radius:50%; background:var(--route-color,#fc4c02);border:2px solid rgba(255,255,255,.82); box-shadow:0 1px 4px rgba(0,0,0,.28) } .elev-rename-input{ min-height:28px } #elev-panel.has-close #elev-color{right:240px} #elev-panel.has-time #elev-color{right:240px} #elev-panel.has-time.has-close #elev-color{right:269px} #stop-chip{ position:absolute;bottom:3px;left:50%;transform:translateX(-50%); background:rgba(10,10,10,.78);color:#fff;border-radius:5px; font:10px/1 'Inter',system-ui;font-weight:700;padding:3px 8px; pointer-events:none;display:none;z-index:20;white-space:nowrap; letter-spacing:.02em } #elev-stats{ position:absolute;top:0;left:6px;height:34px; display:none;align-items:center;gap:6px; font:11px/1 'Inter',system-ui;font-weight:600;white-space:nowrap } .elev-gain{color:#3da870} .elev-loss{color:#d06848} .surface-key-item{display:flex;align-items:center;gap:5px} .surface-swatch{width:18px;height:0;border-top:2px solid var(--route-color,#fc4c02);border-radius:999px} .surface-swatch.paved{border-top-style:dotted} .surface-swatch.unknown{opacity:.5;border-top-style:dashed} .surface-stats{display:inline-flex;align-items:center;gap:7px;margin-left:4px;color:#5b6470;font-weight:650} .surface-stat{display:inline-flex;align-items:center;gap:3px} .surface-stat-line{width:16px;height:0;border-top:2px solid var(--route-color,#fc4c02);border-radius:999px} .surface-stat-line.paved{border-top-style:dotted} .surface-stat-line.unknown{border-top-style:dashed;opacity:.55} /* ── Dark theme tokens (draft): frosted charcoal surfaces, raised #2C2C2E ── */ #elev-panel.dark,#plan-panel.dark{ --dk-btn:#2C2C2E;--dk-btn-bd:rgba(255,255,255,.08);--dk-btn-fg:#E5E5EA; --dk-btn-hbg:#3A3A3C;--dk-btn-hbd:rgba(255,255,255,.18) } #elev-panel.dark{ background:rgba(28,28,30,.92); border-top-color:rgba(255,255,255,.08); box-shadow:0 -14px 40px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.05) } /* chips: raised charcoal pills with a hairline */ #elev-panel.dark #elev-stats .est{ background:#2C2C2E; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); color:#E5E5EA } #elev-panel.dark #elev-stats .est.elev-gain{color:#30D158} #elev-panel.dark #elev-stats .est.elev-loss{color:#FF6B5E} /* toolbar buttons — black, white contour */ #elev-panel.dark #elev-share,#elev-panel.dark #elev-export, #elev-panel.dark #elev-split,#elev-panel.dark #elev-surface, #elev-panel.dark #elev-slope,#elev-panel.dark #elev-time, #elev-panel.dark #elev-fly,#elev-panel.dark #elev-rename, #elev-panel.dark #elev-close,#elev-panel.dark #elev-min{ background:var(--dk-btn);color:var(--dk-btn-fg); box-shadow:inset 0 0 0 1px var(--dk-btn-bd) } #elev-panel.dark #elev-share:hover,#elev-panel.dark #elev-export:hover, #elev-panel.dark #elev-split:hover,#elev-panel.dark #elev-surface:hover, #elev-panel.dark #elev-slope:hover,#elev-panel.dark #elev-time:hover, #elev-panel.dark #elev-fly:hover,#elev-panel.dark #elev-rename:hover, #elev-panel.dark #elev-close:hover,#elev-panel.dark #elev-min:hover{ background:var(--dk-btn-hbg);color:#fff;box-shadow:inset 0 0 0 1px var(--dk-btn-hbd) } #elev-panel.dark #elev-split.active{background:#e84800;color:#fff;box-shadow:none} #elev-panel.elev-wide:not(.minimized){height:185px} #elev-clock{ position:absolute;top:9px;left:50%;transform:translateX(-50%); font:10px/1 'Inter',system-ui;font-weight:600;color:#666; display:none;pointer-events:none;z-index:10;white-space:nowrap; background:rgba(255,255,255,.7);padding:2px 7px;border-radius:4px } #elev-panel.dark #elev-clock{color:#98989F;background:rgba(255,255,255,.08)} #elev-panel.dark .minimized #elev-min,#elev-panel.dark.minimized #elev-min{color:rgba(255,255,255,.8)} /* viewer mode — hide route-editing controls */ #elev-panel.viewer-mode #elev-split, #elev-panel.viewer-mode #elev-export, #elev-panel.viewer-mode #elev-share, #elev-panel.viewer-mode #elev-fly, #elev-panel.viewer-mode #elev-slope, #elev-panel.viewer-mode #elev-surface, #elev-panel.viewer-mode #elev-color, #elev-panel.viewer-mode #elev-close, #elev-panel.viewer-mode #elev-stats { display:none!important } /* sharing mode — hide editing/sharing controls not useful while sharing */ #elev-panel.sharing-mode #elev-split, #elev-panel.sharing-mode #elev-export, #elev-panel.sharing-mode #elev-share, #elev-panel.sharing-mode #elev-fly, #elev-panel.sharing-mode #elev-slope, #elev-panel.sharing-mode #elev-surface, #elev-panel.sharing-mode #elev-color, #elev-panel.sharing-mode #elev-time { display:none!important } /* pulsing dot for current GPS position on profile */ @keyframes prof-pulse { 0%,100%{r:5.5px;opacity:.9} 50%{r:7px;opacity:.6} } #prof-self-dot { animation: prof-pulse 2s ease-in-out infinite } /* ── Loading toast ── */ #load-toast{ position:fixed;top:calc(12px + env(safe-area-inset-top));left:50%; transform:translateX(-50%); background:rgba(15,15,20,.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); color:#fff;font:12px/1 'Inter',system-ui;font-weight:500; padding:9px 18px 9px 14px;border-radius:22px; box-shadow:0 4px 20px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.08); z-index:3000;display:none;pointer-events:none; white-space:nowrap; } #undo-toast{ position:fixed;top:calc(12px + env(safe-area-inset-top));left:50%; transform:translateX(-50%); background:rgba(15,15,20,.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); color:#fff;font:12px/1 'Inter',system-ui;font-weight:500; padding:7px 9px 7px 16px;border-radius:22px; box-shadow:0 4px 20px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.08); z-index:3001;display:none; align-items:center;gap:10px;white-space:nowrap } #undo-toast button{ background:rgba(79,107,205,.9);border:none;color:#fff; font:11px/1 'Inter',system-ui;font-weight:600; padding:5px 11px;border-radius:13px;cursor:pointer; -webkit-tap-highlight-color:transparent;transition:background .13s } #undo-toast button:hover{background:rgba(79,107,205,1)} /* ── Route switcher bar ── */ #route-bar{ position:fixed;bottom:10px;left:10px; z-index:1000;display:none;flex-wrap:wrap;gap:6px; max-width:calc(100vw - 20px) } .r-pill{ display:flex;align-items:center;gap:6px; padding:6px 8px 6px 10px;border-radius:10px; background:rgba(255,255,255,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); box-shadow:0 2px 12px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,1); font:600 11px/1 'Inter',system-ui;cursor:pointer; border:1px solid rgba(255,255,255,.7); max-width:140px;-webkit-tap-highlight-color:transparent; transition:all .15s cubic-bezier(.4,0,.2,1) } .r-pill.active{border-color:#4f6bcd;color:#4f6bcd;box-shadow:0 2px 12px rgba(79,107,205,.2),inset 0 1px 0 rgba(255,255,255,1)} .r-pill-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .r-pill-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;border:2px solid rgba(255,255,255,.6);cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.2)} .r-pill-x{flex-shrink:0;opacity:.45;display:flex;padding:1px;transition:opacity .1s} .r-pill-x:hover{opacity:.9} .r-pill.dragging{opacity:.35;pointer-events:none} .r-pill.drag-over{border-color:#4f6bcd;box-shadow:0 0 0 2px rgba(79,107,205,.25)} #color-picker{ display:none;position:fixed;z-index:3000; background:rgba(20,20,24,.97);backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.12);border-radius:10px; padding:8px;gap:5px;flex-wrap:wrap;width:124px; box-shadow:0 6px 28px rgba(0,0,0,.75) } .cp-sw{width:22px;height:22px;border-radius:5px;cursor:pointer;border:2px solid transparent} .cp-sw:hover,.cp-sw:active{outline:2px solid #fff;outline-offset:1px} /* ── Show-all / weather map labels ── */ .map-lbl{ background:rgba(255,255,255,.93);backdrop-filter:blur(6px); border-radius:6px;padding:2px 7px 2px 8px; box-shadow:0 1px 6px rgba(0,0,0,.16); font:10px/1.3 'Inter',system-ui;white-space:nowrap; border-left:3px solid #c87860; transform:translate(6px,-50%);display:inline-block; user-select:none;-webkit-user-drag:none } .map-lbl.col{border-left-color:#89b0e6} .map-lbl.refuge{border-left-color:#c07000} .map-lbl.city{border-left-color:#555;font-style:italic} .map-lbl b{font-size:10px;font-weight:700} .map-lbl small{color:#666;font-size:9px} /* ── Segment overlay card ── */ #seg-overlay{ display:none;position:fixed;z-index:2000; animation:segFadeIn .2s ease } @keyframes segFadeIn{from{opacity:0}to{opacity:1}} /* ── Segment tooltips ── */ .seg-tip{background:rgba(8,8,16,.97)!important;border:1px solid rgba(255,255,255,.12)!important; border-radius:10px!important;color:#ccc!important;padding:9px 12px!important;font-size:11px; box-shadow:0 6px 28px rgba(0,0,0,.75)!important;pointer-events:none;max-width:220px} .seg-tip::before{display:none!important} @media (pointer:coarse){.leaflet-tooltip.seg-tip{display:none!important}} .osm-route-tooltip{font-size:12px;font-weight:600;padding:4px 8px;background:#fff;border:none;box-shadow:0 2px 8px rgba(0,0,0,.25)} .osm-route-tooltip::before{display:none!important} .maplibregl-popup.osm-route-popup .maplibregl-popup-content{font-size:12px;font-weight:600;padding:4px 8px;border-radius:4px} /* ── Keyboard help modal ── */ #kbd-help{display:none;position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.55);align-items:center;justify-content:center} #kbd-help.open{display:flex} #kbd-help-box{background:#1a1a24;border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:20px 24px;min-width:300px;max-width:360px;color:#ddd;box-shadow:0 12px 48px rgba(0,0,0,.7)} #kbd-help-box h3{margin:0 0 14px;font-size:13px;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.06em} .kbd-section{margin-bottom:12px} .kbd-section-title{font-size:10px;font-weight:700;color:#888;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px} .kbd-row{display:flex;justify-content:space-between;align-items:center;padding:3px 0;font-size:12px} .kbd-row span{color:#aaa} .kbd-keys{display:flex;gap:4px} kbd{background:#2a2a38;border:1px solid rgba(255,255,255,.18);border-radius:5px;padding:2px 7px;font-size:11px;font-family:inherit;color:#eee;line-height:1.6} .osm-ov-glow{filter:blur(4px);pointer-events:none!important} .t-name{font-size:12.5px;font-weight:700;color:#fff;margin-bottom:2px;white-space:normal;line-height:1.3} .t-meta{color:#666;font-size:10px;margin-bottom:7px} .t-row{display:flex;gap:7px;align-items:baseline} .t-cell{display:flex;flex-direction:column;align-items:center;min-width:26px} .t-lbl{font-size:10px;color:#555;text-transform:uppercase;letter-spacing:.4px;margin-bottom:1px} .t-val{font-size:13px;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums} .c-today{color:#ff4444}.c-yest{color:#ff9900}.c-2day{color:#ffcc00} .c-week{color:#c8e000}.c-month{color:#5599ff}.c-all{color:#666} /* ── beta layout proposal: map-first rail + adaptive sheets ── */ :root{ --beta-ink:#18212f; --beta-muted:#6b7280; --beta-panel:rgba(255,255,255,.94); --beta-border:rgba(24,33,47,.12); --beta-accent:#ef6a32; --beta-blue:#2563eb; --beta-shadow:0 18px 50px rgba(15,23,42,.18),0 3px 14px rgba(15,23,42,.1); } #layer-btns{ top:calc(14px + env(safe-area-inset-top));right:14px;left:auto;bottom:auto; align-items:flex-end;gap:8px;padding:8px; border:1px solid rgba(255,255,255,.72);border-radius:18px; background:linear-gradient(180deg,rgba(255,255,255,.76),rgba(245,247,250,.62)); backdrop-filter:blur(22px) saturate(1.35);-webkit-backdrop-filter:blur(22px) saturate(1.35); box-shadow:var(--beta-shadow) } .btn-row{justify-content:flex-end} .lbtn{ width:40px;height:40px;border-radius:12px;border-color:rgba(24,33,47,.1); background:rgba(255,255,255,.72);color:#263142; box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(15,23,42,.05); --btn-accent:#2563eb; } .lbtn svg, #elev-share svg,#elev-export svg,#elev-split svg,#elev-fly svg,#elev-slope svg,#elev-time svg,#elev-rename svg,#elev-min svg,#elev-close svg{ width:16px;height:16px;stroke-width:2;vector-effect:non-scaling-stroke } .lbtn:hover:not(.active){background:#fff;color:var(--btn-accent);transform:translateX(-1px);border-color:color-mix(in srgb,var(--btn-accent) 28%,transparent)} .lbtn.active{ background:linear-gradient(145deg,var(--btn-accent),color-mix(in srgb,var(--btn-accent) 62%,#14b8a6));border-color:rgba(255,255,255,.38);color:#fff; box-shadow:0 10px 24px rgba(37,99,235,.24),0 5px 16px rgba(239,106,50,.18),inset 0 1px 0 rgba(255,255,255,.28) } #btn-layer{--btn-accent:#2563eb} #btn-upload{--btn-accent:#16a34a} #btn-search{--btn-accent:#06b6d4} .water-popup{font:12px/1.4 Inter,system-ui;min-width:100px} .water-popup b{display:block;font-weight:700;margin-bottom:2px} .water-popup .w-kind{font-size:10px;color:#6b7280;text-transform:capitalize} .water-popup .w-np{color:#ef4444;font-size:10px} #btn-plan{--btn-accent:#16a34a} #btn-nav{--btn-accent:#f59e0b} #btn3d{--btn-accent:#8b5cf6} #btn-weather{--btn-accent:#0ea5e9} #loc-btn{--btn-accent:#22c55e} #btn-safety{--btn-accent:#f43f5e} #btn-history{--btn-accent:#64748b} /* nav mode — mobile-only */ #btn-nav-row{display:none!important} #nav-hud{ display:none;position:fixed;left:14px;bottom:84px;z-index:1200; width:108px;height:108px;border-radius:54px; background:rgba(10,18,30,.88);backdrop-filter:blur(12px); border:1.5px solid rgba(255,255,255,.10); box-shadow:0 8px 32px rgba(0,0,0,.45);padding:6px; align-items:center;justify-content:center; font-family:Inter,system-ui;user-select:none;pointer-events:none; overflow:visible; } #nav-hud.nav-on{display:flex} #nav-gauge{width:96px;height:96px;flex-shrink:0} #nav-gauge svg{display:block} /* camera warning — sibling pill, below the circular HUD */ #nav-cam-warn{ display:none;position:fixed;left:14px;bottom:72px;z-index:1200; width:108px;box-sizing:border-box; align-items:center;justify-content:center;gap:4px; font-size:10px;font-weight:600;color:#f59e0b; padding:3px 8px;border-radius:8px; background:rgba(245,158,11,.14);border:1px solid rgba(245,158,11,.3); white-space:nowrap;pointer-events:none;font-family:Inter,system-ui; } #nav-cam-warn.visible{display:flex} #nav-cam-warn.close{color:#f87171;background:rgba(248,113,113,.14);border-color:rgba(248,113,113,.3)} /* Road name toast — centered, above elevation panel */ #nav-road-toast{ display:none;position:fixed;bottom:88px;left:50%;transform:translateX(-50%); z-index:1200;background:rgba(0,0,0,.78);color:#fff; padding:5px 16px;border-radius:20px;font-size:12px;font-weight:500; white-space:nowrap;max-width:calc(100vw - 80px);overflow:hidden; text-overflow:ellipsis;pointer-events:none;backdrop-filter:blur(8px); box-shadow:0 2px 12px rgba(0,0,0,.3); } #nav-road-toast.visible{display:block} @media (prefers-color-scheme:dark){ #nav-road-toast{background:rgba(255,255,255,.15);color:#f1f5f9} } .lbtn-sep{width:26px;height:1px;margin:1px 7px;background:linear-gradient(90deg,transparent,rgba(24,33,47,.18),transparent)} /* Activity actions retain a compact fallback on very short desktop viewports. */ @media (min-width:701px) and (max-height:647px) and (hover:hover){#elev-btns{transform:translateX(-66px)}} .side-panel{ right:48px;left:auto;top:0;width:min(340px,calc(100vw - 88px)); border-radius:16px;border-color:rgba(255,255,255,.7); background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(248,250,252,.92)); box-shadow:0 22px 60px rgba(15,23,42,.2),0 2px 12px rgba(15,23,42,.08),inset 0 1px 0 rgba(255,255,255,.95); padding:14px } .panel-title{color:var(--beta-muted);letter-spacing:.09em} #search-panel{width:min(380px,calc(100vw - 88px))} #search-input{ padding:10px 12px;border-radius:8px;background:#fff;border-color:rgba(24,33,47,.14); font-size:13px } .overlay-choice{border-radius:10px;padding:8px 10px} .overlay-choice.active{color:var(--beta-blue);background:linear-gradient(90deg,rgba(37,99,235,.1),rgba(20,184,166,.07))} .upload-btn{border-radius:8px;color:var(--beta-blue);background:rgba(49,91,184,.06);border-color:rgba(49,91,184,.28)} .strava-row button{background:var(--beta-blue)} #route-bar{ left:14px;bottom:14px;max-width:calc(100vw - 28px); padding:5px;border-radius:13px;background:rgba(255,255,255,.66); backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); box-shadow:0 10px 34px rgba(15,23,42,.16) } .r-pill{border-radius:8px;background:rgba(255,255,255,.84);box-shadow:none} #plan-type-row{right:14px;left:auto} .plan-type-btn{border-radius:8px;background:rgba(255,255,255,.86)} #elev-panel{border-top-color:rgba(24,33,47,.1);box-shadow:0 -12px 38px rgba(15,23,42,.12)} #load-toast,#undo-toast{top:calc(16px + env(safe-area-inset-top));border-radius:8px} .dark-ui #layer-btns{background:rgba(28,28,30,.92);border-color:rgba(255,255,255,.08)} .dark-ui .lbtn:not(.active){background:#2C2C2E;color:#E5E5EA;border-color:rgba(255,255,255,.08);box-shadow:0 2px 8px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.05)} /* White-mode: crisp opaque white, no blur — inverse of dark */ .white-ui #layer-btns{background:rgba(255,255,255,.97);border-color:rgba(0,0,0,.08);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 4px 24px rgba(0,0,0,.14)} .white-ui .lbtn:not(.active){background:#fff;color:#111827;border-color:rgba(0,0,0,.08);box-shadow:0 1px 4px rgba(0,0,0,.1)} .white-ui .lbtn.active{background:#111827;color:#fff;border-color:#111827} .white-ui .lbtn-sep{background:rgba(0,0,0,.1)} #color-picker{ width:150px;padding:9px;gap:7px;border-radius:16px; background:linear-gradient(180deg,rgba(17,24,39,.96),rgba(31,41,55,.94)); border-color:rgba(255,255,255,.14);box-shadow:0 18px 48px rgba(0,0,0,.42) } .cp-sw{ width:26px;height:26px;border-radius:9px;border:2px solid rgba(255,255,255,.16); box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 2px 8px rgba(0,0,0,.2) } .cp-sw:hover,.cp-sw:active{outline:2px solid rgba(255,255,255,.95);outline-offset:2px} #upload-panel{ padding:0;overflow:hidden;background:rgba(250,251,253,.94) } #upload-panel .panel-title{ position:relative;margin:0;padding:18px 16px 4px 56px; color:#111827;font:760 13px/1 'Inter',system-ui;text-transform:none;letter-spacing:0 } #upload-panel .panel-title:before{ content:"";position:absolute;left:16px;top:13px;width:30px;height:30px;border-radius:9px; background:url(/peaks/logo/app-icon.svg) center/cover no-repeat; box-shadow:0 8px 18px rgba(15,25,35,.22) } #upload-panel .panel-title:after{content:none} .beta-strava-sub{ margin:0 16px 0 56px;color:#7b8491;font:500 11px/1.35 'Inter',system-ui } #upload-panel .upload-btn, #upload-panel .strava-row, #upload-panel .status{margin-left:16px;margin-right:16px} #upload-panel .upload-btn{ margin-top:13px;margin-bottom:10px;padding:11px 12px;border-radius:11px; background:#fff;border:1px solid rgba(24,33,47,.08);color:#263142; box-shadow:0 1px 2px rgba(15,23,42,.04) } #upload-panel .upload-btn svg{color:#315bb8} #upload-panel .strava-row{ padding:5px;border-radius:13px;background:#fff;border:1px solid rgba(24,33,47,.08); box-shadow:0 1px 2px rgba(15,23,42,.04) } #upload-panel .strava-row input{ border:0;background:transparent;box-shadow:none;padding:8px 9px;font-size:13px;color:#111827 } #upload-panel .strava-row input:focus{border:0;background:transparent;box-shadow:none} #upload-panel .strava-row button{ width:34px;height:34px;border-radius:10px;background:#111827;box-shadow:none } #upload-panel .strava-row button:hover{background:#252f3f} #upload-panel .status{margin-top:10px;margin-bottom:14px} #map:after{ content:"";position:fixed;inset:0;z-index:2;pointer-events:none; background: linear-gradient(90deg,rgba(12,18,28,.12),rgba(12,18,28,0) 22%), linear-gradient(0deg,rgba(12,18,28,.14),rgba(12,18,28,0) 30%); mix-blend-mode:multiply } .side-panel.open{animation:betaPanelIn .16s ease-out} @keyframes betaPanelIn{from{opacity:0;transform:translateX(5px) scale(.985)}to{opacity:1;transform:none}} #elev-panel.beta-activity-profile:not(.minimized){ height:190px;border-radius:18px 18px 0 0; background: radial-gradient(circle at 20% 0,rgba(232,93,42,.12),rgba(232,93,42,0) 34%), linear-gradient(180deg,rgba(255,255,255,.98),rgba(247,249,252,.96)); } #elev-panel.beta-activity-profile.elev-wide:not(.minimized){height:218px} #elev-panel.beta-activity-profile #elev-stats{ display:flex!important;top:11px;left:14px;height:24px;z-index:14; align-items:center;gap:8px;padding:0 10px;border-radius:999px; background:rgba(255,255,255,.72);box-shadow:inset 0 0 0 1px rgba(24,33,47,.08),0 3px 10px rgba(15,23,42,.05); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px) } #elev-panel.beta-activity-profile:not(.minimized)::before{ content:"";position:absolute;top:0;left:0;right:0;height:54px; background:linear-gradient(180deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.55) 52%,rgba(255,255,255,0) 100%); z-index:9;pointer-events:none;border-radius:18px 18px 0 0 } #elev-panel.beta-activity-profile #elev-svg{ width:calc(100% - 18px);height:calc(100% - 14px); margin:10px 9px 4px;border-radius:12px; background: linear-gradient(180deg,rgba(255,255,255,.74),rgba(255,255,255,.3)), repeating-linear-gradient(90deg,rgba(24,33,47,.035) 0,rgba(24,33,47,.035) 1px,transparent 1px,transparent 64px); box-shadow:inset 0 0 0 1px rgba(24,33,47,.07),0 8px 22px rgba(15,23,42,.06) } #elev-panel.beta-activity-profile.grade-mode #elev-svg{ background: radial-gradient(circle at 82% 16%,rgba(37,99,235,.11),rgba(37,99,235,0) 26%), linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.32)), repeating-linear-gradient(90deg,rgba(24,33,47,.035) 0,rgba(24,33,47,.035) 1px,transparent 1px,transparent 64px) } #elev-panel.beta-activity-profile #elev-share, #elev-panel.beta-activity-profile #elev-export, #elev-panel.beta-activity-profile #elev-split, #elev-panel.beta-activity-profile #elev-fly, #elev-panel.beta-activity-profile #elev-slope, #elev-panel.beta-activity-profile #elev-surface, #elev-panel.beta-activity-profile #elev-time, #elev-panel.beta-activity-profile #elev-min, #elev-panel.beta-activity-profile #elev-close{ top:11px;width:28px;height:28px;border-radius:10px; background:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.72); box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 5px 14px rgba(15,23,42,.08); backdrop-filter:blur(14px) saturate(1.25);-webkit-backdrop-filter:blur(14px) saturate(1.25); color:#333d4b;--profile-btn-accent:#2563eb } #elev-panel.beta-activity-profile #elev-color{ top:11px;width:28px;height:28px;border-radius:10px; background:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.72); box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 5px 14px rgba(15,23,42,.08); backdrop-filter:blur(14px) saturate(1.25);-webkit-backdrop-filter:blur(14px) saturate(1.25) } #elev-panel.beta-activity-profile #elev-share{--profile-btn-accent:#2563eb} #elev-panel.beta-activity-profile #elev-export{--profile-btn-accent:#0ea5e9} #elev-panel.beta-activity-profile #elev-split{--profile-btn-accent:#ef6a32} #elev-panel.beta-activity-profile #elev-fly{--profile-btn-accent:#16a34a} #elev-panel.beta-activity-profile #elev-slope{--profile-btn-accent:#f97316} #elev-panel.beta-activity-profile #elev-surface{--profile-btn-accent:#4b5563} #elev-panel.beta-activity-profile #elev-time{--profile-btn-accent:#8b5cf6} #elev-panel.beta-activity-profile #elev-min{--profile-btn-accent:#64748b} #elev-panel.beta-activity-profile #elev-close{--profile-btn-accent:#ef4444} #elev-panel.beta-activity-profile #elev-share:hover, #elev-panel.beta-activity-profile #elev-export:hover, #elev-panel.beta-activity-profile #elev-split:hover, #elev-panel.beta-activity-profile #elev-fly:hover, #elev-panel.beta-activity-profile #elev-slope:hover, #elev-panel.beta-activity-profile #elev-surface:hover, #elev-panel.beta-activity-profile #elev-time:hover, #elev-panel.beta-activity-profile #elev-min:hover, #elev-panel.beta-activity-profile #elev-close:hover{ background:#fff;color:var(--profile-btn-accent); border-color:color-mix(in srgb,var(--profile-btn-accent) 28%,rgba(255,255,255,.72)); box-shadow:inset 0 1px 0 rgba(255,255,255,.96),0 6px 16px rgba(15,23,42,.1) } #elev-panel.beta-activity-profile #elev-color:hover{ background:#fff;border-color:color-mix(in srgb,var(--route-color,#fc4c02) 32%,rgba(255,255,255,.72)); box-shadow:inset 0 1px 0 rgba(255,255,255,.96),0 6px 16px rgba(15,23,42,.1) } #elev-panel.beta-activity-profile #elev-split.active, #elev-panel.beta-activity-profile #elev-fly.active, #elev-panel.beta-activity-profile #elev-surface.active, #elev-panel.beta-activity-profile #elev-time.active{ background:linear-gradient(145deg,var(--profile-btn-accent),color-mix(in srgb,var(--profile-btn-accent) 62%,#14b8a6)); border-color:rgba(255,255,255,.38);color:#fff; box-shadow:0 9px 22px color-mix(in srgb,var(--profile-btn-accent) 28%,transparent),inset 0 1px 0 rgba(255,255,255,.28) } #elev-panel.beta-activity-profile #elev-slope.active{ border-color:rgba(255,255,255,.42); box-shadow:0 9px 22px rgba(37,99,235,.2),0 5px 16px rgba(249,115,22,.18),inset 0 1px 0 rgba(255,255,255,.28) } /* ── beta-activity-profile: dark theme (frosted charcoal tokens) ── */ #elev-panel.beta-activity-profile.dark:not(.minimized){ background:rgba(28,28,30,.92) } #elev-panel.beta-activity-profile.dark:not(.minimized)::before{ background:linear-gradient(180deg,rgba(28,28,30,.95) 0%,rgba(28,28,30,.5) 52%,rgba(28,28,30,0) 100%) } #elev-panel.beta-activity-profile.dark #elev-stats{ background:#2C2C2E;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08) } #elev-panel.beta-activity-profile.dark #elev-svg{ background: linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01)), repeating-linear-gradient(90deg,rgba(255,255,255,.028) 0,rgba(255,255,255,.028) 1px,transparent 1px,transparent 64px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 8px 22px rgba(0,0,0,.4) } #elev-panel.beta-activity-profile.dark.grade-mode #elev-svg{ background: radial-gradient(circle at 82% 16%,rgba(96,165,250,.12),rgba(96,165,250,0) 26%), linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01)), repeating-linear-gradient(90deg,rgba(255,255,255,.028) 0,rgba(255,255,255,.028) 1px,transparent 1px,transparent 64px) } #elev-panel.beta-activity-profile.dark #elev-share, #elev-panel.beta-activity-profile.dark #elev-export, #elev-panel.beta-activity-profile.dark #elev-split, #elev-panel.beta-activity-profile.dark #elev-fly, #elev-panel.beta-activity-profile.dark #elev-slope, #elev-panel.beta-activity-profile.dark #elev-surface, #elev-panel.beta-activity-profile.dark #elev-time, #elev-panel.beta-activity-profile.dark #elev-min, #elev-panel.beta-activity-profile.dark #elev-close, #elev-panel.beta-activity-profile.dark #elev-color{ background:var(--dk-btn);border:1px solid var(--dk-btn-bd); box-shadow:none;color:var(--dk-btn-fg) } #elev-panel.beta-activity-profile.dark #elev-share:hover, #elev-panel.beta-activity-profile.dark #elev-export:hover, #elev-panel.beta-activity-profile.dark #elev-split:hover, #elev-panel.beta-activity-profile.dark #elev-fly:hover, #elev-panel.beta-activity-profile.dark #elev-slope:hover, #elev-panel.beta-activity-profile.dark #elev-surface:hover, #elev-panel.beta-activity-profile.dark #elev-time:hover, #elev-panel.beta-activity-profile.dark #elev-min:hover, #elev-panel.beta-activity-profile.dark #elev-close:hover, #elev-panel.beta-activity-profile.dark #elev-color:hover{ background:var(--dk-btn-hbg);color:#fff;border-color:var(--dk-btn-hbd) } /* ── Complete dark UI: map chrome, popovers and chart cards ── */ :root[data-theme="dark"]{ --panel-bg:var(--surface); --panel-border:1px solid var(--hairline); --panel-shadow:0 12px 36px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.04); } :root[data-theme="dark"] #layer-btns, :root[data-theme="dark"] .side-panel, :root[data-theme="dark"] #route-bar{ background:var(--surface);border-color:var(--hairline);color:var(--text-primary); backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px) } :root[data-theme="dark"] #route-bar{ gap:2px;padding:3px;border-radius:12px; background:#25282e;border:1px solid var(--hairline); box-shadow:0 10px 28px rgba(0,0,0,.38) } :root[data-theme="dark"] #route-bar .r-pill{ gap:5px;padding:6px 9px;border:none;border-radius:9px; background:transparent;color:#f2f2f7;box-shadow:none; backdrop-filter:none;-webkit-backdrop-filter:none } :root[data-theme="dark"] #route-bar .r-pill:hover{ background:rgba(255,255,255,.07);color:#fff } :root[data-theme="dark"] #route-bar .r-pill.active{ background:color-mix(in srgb,var(--pill-accent,#30D158) 22%,transparent); color:color-mix(in srgb,var(--pill-accent,#30D158) 72%,white); box-shadow:none } :root[data-theme="dark"] #route-bar .r-pill-dot{display:none} :root[data-theme="dark"] #route-bar .r-pill-x{color:currentColor;opacity:.62} :root[data-theme="light"] #route-bar{ gap:2px;padding:3px;border-radius:12px; background:rgba(238,240,244,.94); border:1px solid rgba(24,33,47,.08); box-shadow:0 8px 24px rgba(15,23,42,.14); backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px) } :root[data-theme="light"] #route-bar .r-pill{ gap:5px;padding:6px 9px;border:none;border-radius:9px; background:transparent;color:#374151;box-shadow:none; backdrop-filter:none;-webkit-backdrop-filter:none } :root[data-theme="light"] #route-bar .r-pill:hover{ background:rgba(255,255,255,.72);color:#111827 } :root[data-theme="light"] #route-bar .r-pill.active{ background:color-mix(in srgb,var(--pill-accent,#2563eb) 13%,white); color:color-mix(in srgb,var(--pill-accent,#2563eb) 76%,#111827); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pill-accent,#2563eb) 14%,transparent) } :root[data-theme="light"] #route-bar .r-pill-dot{display:none} :root[data-theme="light"] #route-bar .r-pill-x{color:currentColor;opacity:.48} :root[data-theme="dark"] .side-panel{ box-shadow:0 18px 48px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.04) } :root[data-theme="dark"] .panel-title, :root[data-theme="dark"] .lc-key, :root[data-theme="dark"] .sr-ele, :root[data-theme="dark"] .sr-empty{color:var(--text-secondary)} :root[data-theme="dark"] .layer-choice, :root[data-theme="dark"] .lp-view-btn, :root[data-theme="dark"] .overlay-choice, :root[data-theme="dark"] .r-pill{ color:var(--text-primary);background:rgba(255,255,255,.045) } :root[data-theme="dark"] .ov-tabs{background:rgba(255,255,255,.05)} :root[data-theme="dark"] .ov-tab{color:var(--text-secondary)} :root[data-theme="dark"] .ov-tab.active{ background:var(--surface-raised);color:var(--text-primary); box-shadow:inset 0 0 0 1px var(--hairline) } :root[data-theme="dark"] .ov-page .overlay-choice .ov-label{color:var(--text-secondary)} :root[data-theme="dark"] .ov-page .overlay-choice.active .ov-label{color:var(--text-primary)} :root[data-theme="dark"] .panel-divider{background:var(--hairline)} :root[data-theme="dark"] #search-input, :root[data-theme="dark"] .strava-row input{ background:var(--surface-raised);border-color:var(--hairline);color:var(--text-primary) } :root[data-theme="dark"] #search-input:focus, :root[data-theme="dark"] .strava-row input:focus{ background:#323236;border-color:var(--accent-action); box-shadow:0 0 0 3px rgba(10,132,255,.18) } :root[data-theme="dark"] .sr-name{color:var(--text-primary)} :root[data-theme="dark"] .sr-item:hover, :root[data-theme="dark"] .sr-item:active, :root[data-theme="dark"] .sr-item.sr-active{background:rgba(255,255,255,.07)} :root[data-theme="dark"] #elev-panel, :root[data-theme="dark"] #plan-panel{ background:var(--surface);border-top-color:var(--hairline); backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px) } :root[data-theme="dark"] #elev-panel.beta-activity-profile #elev-svg{ background:rgba(28,28,30,.72); box-shadow:inset 0 0 0 1px var(--hairline),0 8px 22px rgba(0,0,0,.32) } :root[data-theme="dark"] .surface-swatch.paved, :root[data-theme="dark"] .surface-stat-line.paved{ border-top-style:dotted;border-top-width:3px } :root[data-theme="dark"] #surface-key{ background:var(--surface);color:var(--text-primary); box-shadow:inset 0 0 0 1px var(--hairline) } @media (max-width:700px){ :root{ --mobile-nav-height:54px; --mobile-nav-bottom:6px; --mobile-panel-gap:14px; } #layer-btns{ top:auto;left:10px;right:10px;bottom:max(6px,calc(env(safe-area-inset-bottom) - 14px)); border-radius:30px; flex-direction:row;align-items:center;overflow:visible; gap:0;padding:6px 8px; background:transparent;border:1px solid transparent; backdrop-filter:none;-webkit-backdrop-filter:none; box-shadow:none } #layer-btns::before{ content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit; background:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.7); backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5); box-shadow:0 10px 34px rgba(15,23,42,.2),0 2px 8px rgba(15,23,42,.1) } #nav-scroll{ display:flex;flex-direction:row;align-items:center; overflow-x:auto;overflow-y:visible;gap:6px;flex:1;scrollbar-width:none } #nav-scroll::-webkit-scrollbar{display:none} .btn-row{position:static;flex:0 0 auto} .side-panel{z-index:4050} .lbtn{width:38px;height:38px;flex:0 0 auto} .lbtn:hover:not(.active){transform:none} .lbtn-sep{width:1px;height:24px;margin:0 2px;flex:0 0 auto} .side-panel{ position:fixed;left:10px;right:10px;top:auto; bottom:calc(72px + env(safe-area-inset-bottom));width:auto;max-height:62vh; overflow:auto;border-radius:14px } #search-panel{width:auto} #route-bar{ left:10px;right:auto;bottom:calc(268px + env(safe-area-inset-bottom)); width:max-content;max-width:calc(100vw - 20px);overflow-x:auto;flex-wrap:nowrap; background:none;backdrop-filter:none;-webkit-backdrop-filter:none; box-shadow:none;padding:3px 4px } :root[data-theme="dark"] #route-bar{ width:max-content;max-width:calc(100vw - 20px) } .r-pill{flex:0 0 auto} #plan-type-row{ left:10px;right:10px;justify-content:flex-start;overflow-x:auto; bottom:calc(72px + env(safe-area-inset-bottom)) } #plan-panel.visible ~ #plan-type-row{bottom:212px} #elev-panel,#plan-panel{border-radius:14px 14px 0 0} #elev-panel:not(.minimized){ left:0;right:0;width:auto;margin-right:0; bottom:var(--mobile-panel-bottom,calc(var(--mobile-nav-height) + var(--mobile-nav-bottom) + var(--mobile-panel-gap) + env(safe-area-inset-bottom))) } #elev-panel.minimized{bottom:var(--mobile-panel-bottom,calc(var(--mobile-nav-height) + var(--mobile-nav-bottom) + var(--mobile-panel-gap)));margin:0 14px 0 0} #plan-panel.visible{ left:0;right:0;width:auto;margin-right:0; bottom:var(--mobile-panel-bottom,calc(72px + env(safe-area-inset-bottom))) } #plan-panel.visible{height:220px} #plan-panel.editing-route{height:220px} #plan-panel.editing-route + #plan-meta-stack{bottom:calc(306px + env(safe-area-inset-bottom))} #plan-panel.with-route{bottom:calc(212px + env(safe-area-inset-bottom))} #plan-panel.visible + #plan-meta-stack{bottom:calc(306px + env(safe-area-inset-bottom))} #plan-panel.with-route + #plan-meta-stack{bottom:calc(366px + env(safe-area-inset-bottom))} #btn3d,#btn-weather,#sep-3d-group{display:none} #btn-safety{display:none!important} :root[data-theme="dark"] #layer-btns::before{ background:var(--surface);border-color:var(--hairline); box-shadow:0 10px 34px rgba(0,0,0,.38),0 2px 8px rgba(0,0,0,.24) } #elev-panel.beta-activity-profile:not(.minimized), #elev-panel.beta-activity-profile.elev-wide:not(.minimized){height:220px} #elev-panel.beta-activity-profile #elev-stats{left:12px;top:11px} #elev-panel.beta-activity-profile #elev-btns{ top:8px;left:auto;right:10px; max-width:calc(100% - 142px);overflow-x:auto;overflow-y:hidden; justify-content:flex-start;scrollbar-width:none } #elev-panel.beta-activity-profile #elev-btns::-webkit-scrollbar{display:none} #elev-panel.beta-activity-profile #elev-color{display:flex} #elev-panel.beta-activity-profile #elev-rename{display:none} #elev-panel.beta-activity-profile.can-rename #elev-rename{display:flex!important} #elev-panel.beta-activity-profile #elev-color{order:-10} #elev-panel.beta-activity-profile #elev-rename{order:-9} #elev-panel.beta-activity-profile .elev-rename-input{ top:8px;width:min(210px,calc(100% - 28px));height:32px; border-radius:10px!important;font-size:13px!important;z-index:30!important } .btn-nav-toggle{display:inline-flex} } @media (min-width:560px){ .pt-label{display:inline} } @media (max-width:559px){ .plan-type-btn{font-size:0!important;width:24px!important;min-width:24px!important;padding:0!important} .plan-type-btn svg{ width:13px!important;height:13px!important;flex-basis:13px!important } /* narrow screens: trim widths so Clear/Done never overflow, but keep the button cluster pushed hard right (margin-left:auto on #plan-seg) */ #plan-toolbar{height:30px;gap:2px} #plan-seg{padding:3px;border-radius:15px} #plan-toolbar .plan-type-btn{height:24px;border-radius:12px} #plan-quiet .pt-prof, #plan-panel.dark #plan-quiet .pt-prof{width:26px;height:26px;min-width:26px} #pt-load{height:26px;border-radius:13px;padding:0 8px;gap:4px} #pt-status{padding:0 7px;letter-spacing:.02em} #plan-stats .est{padding:4px 4px;font-size:9px;gap:2px} #plan-stats .est-extra{display:none} #plan-svg{height:calc(100% - 42px);margin-top:42px} } @media (orientation:portrait) and (max-width:490px){ #plan-panel.visible{overflow:visible} #plan-toolbar #plan-stats{ position:absolute;top:-48px;left:2px } #elev-panel.beta-activity-profile:not(.minimized){overflow:visible} #elev-panel.beta-activity-profile #elev-stats{ top:-40px;left:10px } #elev-panel.beta-activity-profile #elev-btns{ left:10px;right:10px;max-width:none;justify-content:flex-end } #elev-panel.beta-activity-profile #elev-svg{ width:calc(100% - 9px);margin-right:0; border-radius:14px 0 0 0;overflow:hidden } } @media (min-width:701px) and (max-height:520px) and (hover:hover){ #layer-btns{gap:4px;padding:5px} .lbtn{width:34px;height:34px;border-radius:10px} .lbtn-sep{margin:0 4px} } /* ════════════════════════════════════════════════════════════════════ Smooth pass — shared glass tokens for all floating chrome. Radii derive from --radius-panel: tiles 11px, buttons 16px. ════════════════════════════════════════════════════════════════════ */ :root{ --panel-bg: rgba(255,255,255,.84); --panel-blur: blur(22px) saturate(1.5); --panel-border: 1px solid rgba(255,255,255,.7); --panel-shadow: 0 1px 2px rgba(15,30,60,.05), 0 12px 32px rgba(15,30,60,.13), 0 32px 80px rgba(15,30,60,.10); --radius-panel: 20px; --radius-btn: 16px; --radius-tile: 11px; --chrome-accent:#2563eb; } /* ── Right rail: one capsule ── */ #layer-btns{ gap:2px;padding:6px;border-radius:var(--radius-panel); background:var(--panel-bg);border:var(--panel-border); backdrop-filter:var(--panel-blur);-webkit-backdrop-filter:var(--panel-blur); box-shadow:var(--panel-shadow) } .lbtn{ width:40px;height:40px;border-radius:var(--radius-btn); border:1px solid transparent;background:transparent;box-shadow:none } .lbtn:hover:not(.active){ background:rgba(24,33,47,.06);border-color:transparent; box-shadow:none;transform:none;color:var(--btn-accent) } /* open = a panel is showing → filled accent */ .lbtn.active{ background:var(--btn-accent);border-color:transparent;color:#fff; box-shadow:0 6px 16px color-mix(in srgb,var(--btn-accent) 32%,transparent), inset 0 1px 0 rgba(255,255,255,.25) } /* engaged = a mode is on → focus tint, without a separate status dot */ #btn3d.active,#btn-weather.active,#loc-btn.active, #btn-plan.active,#btn-nav.active,#btn-edit.active{ background:color-mix(in srgb,var(--btn-accent) 22%,transparent); color:var(--btn-accent);border-color:transparent; box-shadow:none;position:relative } .lbtn-sep{width:24px;background:rgba(24,33,47,.1);margin:3px 8px} /* ── Dark tooltips flying left (desktop only; native title removed in JS) ── */ @media (hover:hover) and (min-width:701px){ .lbtn[data-tip]{position:relative} .lbtn[data-tip]:hover::after{ content:attr(data-tip);position:absolute;right:calc(100% + 14px);top:50%; background:rgba(15,18,28,.92);color:#fff; font:600 11px/1 'Inter',system-ui;padding:7px 11px;border-radius:9px; white-space:nowrap;pointer-events:none;z-index:5000; box-shadow:0 8px 24px rgba(0,0,0,.28); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); animation:lbtnTip .15s ease-out;transform:translateY(-50%) } @keyframes lbtnTip{ from{opacity:0;transform:translateY(-50%) translateX(5px)} to{opacity:1;transform:translateY(-50%) translateX(0)} } } /* Elevation-panel toolbar buttons: same dark tooltip as the rail (below the button), replacing the native OS title — black bg / white label both themes */ @media (hover:hover) and (min-width:701px){ #elev-btns button[data-tip]{position:relative} #elev-btns button[data-tip]:hover::after{ content:attr(data-tip);position:absolute;top:calc(100% + 8px);left:50%; background:rgba(15,18,28,.92);color:#fff; font:600 11px/1 'Inter',system-ui;padding:7px 11px;border-radius:9px; white-space:nowrap;pointer-events:none;z-index:5000; box-shadow:0 8px 24px rgba(0,0,0,.28); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); transform:translateX(-50%);animation:lbtnTip .15s ease-out } } /* ── Side panels: same glass ── */ .side-panel{ border-radius:var(--radius-panel);border:var(--panel-border); background:var(--panel-bg); backdrop-filter:var(--panel-blur);-webkit-backdrop-filter:var(--panel-blur); box-shadow:var(--panel-shadow) } /* buttons inside panels follow the same language */ .lp-view-btn{ border-radius:var(--radius-tile);background:rgba(24,33,47,.05); border:1px solid transparent } .lp-view-btn:hover{background:rgba(37,99,235,.08);color:var(--chrome-accent)} .lp-view-btn.active{ background:var(--chrome-accent);border-color:transparent;color:#fff; box-shadow:0 5px 14px rgba(37,99,235,.26) } /* ── Map style picker: preview thumbnails, 3-col ── */ .layer-choices-grid{gap:8px;margin-bottom:4px} .layer-choice{ padding:0;border:none;background:none!important;gap:5px; border-radius:var(--radius-tile) } .lc-thumb{ display:block;width:100%;aspect-ratio:3/2;border-radius:var(--radius-tile); background-color:#e7ebf2;background-size:cover;background-position:center; box-shadow:inset 0 0 0 1px rgba(24,33,47,.1);position:relative; transition:box-shadow .15s,transform .15s } .lc-thumb svg{position:absolute;inset:0;margin:auto;opacity:.4} .layer-choice:hover .lc-thumb{ box-shadow:inset 0 0 0 1px rgba(24,33,47,.1),0 5px 16px rgba(15,30,60,.2); transform:translateY(-1px) } .layer-choice.active{border:none;color:var(--chrome-accent)} .layer-choice.active .lc-thumb{ box-shadow:0 0 0 2px var(--chrome-accent),0 5px 16px rgba(37,99,235,.28) } .layer-choice.active .lc-thumb::after{ content:"";position:absolute;top:4px;right:4px;width:16px;height:16px; border-radius:50%;background:var(--chrome-accent); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 13 9 18 20 7'/%3E%3C/svg%3E"); background-size:9px;background-position:center;background-repeat:no-repeat; box-shadow:0 1px 5px rgba(15,30,60,.35) } .layer-choice.active .lc-label{color:var(--chrome-accent);font-weight:700} /* kbd shortcut chip — hover only */ .layer-choice .lc-key{ top:4px;left:4px;right:auto; font:700 8px/1 ui-monospace,monospace;color:#fff; background:rgba(15,18,28,.72);padding:3px 5px;border-radius:5px; opacity:0;transition:opacity .12s;pointer-events:none } .layer-choice:hover .lc-key{opacity:1} /* ── Overlays: segmented tabs + iOS switches ── */ .ov-tabs{ display:flex;gap:2px;padding:3px;border-radius:11px; background:rgba(24,33,47,.06);margin-bottom:8px } .ov-tab{ flex:1;display:flex;align-items:center;justify-content:center;gap:5px; border:none;background:none;border-radius:8px;padding:6px 4px;cursor:pointer; font:650 11px/1 'Inter',system-ui;color:#6b7280; -webkit-tap-highlight-color:transparent;transition:background .14s,color .14s } .ov-tab.active{background:#fff;color:#18212f;box-shadow:0 1px 4px rgba(15,30,60,.14)} .ov-tab-dot{ display:none;min-width:14px;height:14px;border-radius:7px;padding:0 3px; background:var(--chrome-accent);color:#fff; font:700 8.5px/14px 'Inter',system-ui;text-align:center } .ov-tab.has-active .ov-tab-dot{display:inline-block} .ov-page .overlay-choice{ display:flex;align-items:center;justify-content:space-between;gap:8px; padding:7px 6px 7px 9px;border-radius:10px;background:none } .ov-page .overlay-choice:hover{background:rgba(24,33,47,.05)} .ov-page .overlay-choice .ov-label{font:550 12px/1.3 'Inter',system-ui;color:#374151} .ov-page .overlay-choice.active{background:none} .ov-page .overlay-choice.active .ov-label{color:#18212f;font-weight:650} .ov-switch{ width:34px;height:20px;border-radius:10px;flex-shrink:0;position:relative; background:rgba(24,33,47,.18);transition:background .18s } .ov-knob{ position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%; background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:left .18s } .overlay-choice.active .ov-switch{background:var(--chrome-accent)} .overlay-choice.active .ov-knob{left:16px} /* ── Elevation / plan: floating glass cards (desktop) ── */ @media (min-width:701px){ #elev-panel:not(.minimized){ left:14px;right:14px;bottom:14px; border-radius:var(--radius-panel); background:var(--panel-bg);border:var(--panel-border); backdrop-filter:var(--panel-blur);-webkit-backdrop-filter:var(--panel-blur); box-shadow:var(--panel-shadow) } #elev-panel.beta-activity-profile:not(.minimized){ border-radius:var(--radius-panel);border:var(--panel-border) } #elev-panel.beta-activity-profile:not(.minimized)::before{ border-radius:var(--radius-panel) var(--radius-panel) 0 0 } #plan-panel.visible{ left:14px;right:14px;bottom:14px; border-radius:var(--radius-panel);border:var(--panel-border);border-top:var(--panel-border); background:var(--panel-bg); backdrop-filter:var(--panel-blur);-webkit-backdrop-filter:var(--panel-blur); box-shadow:var(--panel-shadow) } /* stack above the floating elev card: 14px inset + card height + 14px gap */ #plan-panel.with-route{bottom:168px} #elev-panel.elev-wide ~ #plan-panel.with-route{bottom:213px} #elev-panel.beta-activity-profile ~ #plan-panel.with-route{bottom:218px} } /* ── Elevation toolbar: one rounded group on the right ── */ #elev-btns{ inset:auto;top:8px;right:var(--activity-actions-right,10px);left:auto;bottom:auto; display:flex;align-items:center;gap:2px;padding:3px; border-radius:var(--radius-btn); background:rgba(255,255,255,.66); box-shadow:inset 0 0 0 1px rgba(24,33,47,.07),0 4px 14px rgba(15,30,60,.08); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); pointer-events:auto;z-index:12 } #elev-btns>*{ position:static!important;top:auto;right:auto; width:26px;height:26px;border-radius:13px; background:transparent;border:none;box-shadow:none } #elev-close{order:98} #elev-min{order:99} #elev-share:hover,#elev-export:hover,#elev-split:hover,#elev-fly:hover, #elev-slope:hover,#elev-time:hover,#elev-rename:hover,#elev-min:hover,#elev-close:hover{ background:rgba(24,33,47,.08);box-shadow:none } /* active tool = filled accent pill (colors from existing per-tool rules) */ #elev-split.active,#elev-fly.active,#elev-surface.active,#elev-time.active{border-radius:13px} #elev-panel.minimized #elev-btns{ padding:0;gap:0;background:none;box-shadow:none; backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:12px } /* beta-activity-profile per-button glass chips → flatten inside the group */ #elev-panel.beta-activity-profile #elev-share, #elev-panel.beta-activity-profile #elev-export, #elev-panel.beta-activity-profile #elev-split, #elev-panel.beta-activity-profile #elev-fly, #elev-panel.beta-activity-profile #elev-slope, #elev-panel.beta-activity-profile #elev-surface, #elev-panel.beta-activity-profile #elev-time, #elev-panel.beta-activity-profile #elev-min, #elev-panel.beta-activity-profile #elev-close, #elev-panel.beta-activity-profile #elev-color{ width:26px;height:26px;border-radius:13px; background:transparent;border:none;box-shadow:none; backdrop-filter:none;-webkit-backdrop-filter:none } #elev-panel.beta-activity-profile #elev-split.active, #elev-panel.beta-activity-profile #elev-fly.active, #elev-panel.beta-activity-profile #elev-surface.active, #elev-panel.beta-activity-profile #elev-time.active{ background:linear-gradient(145deg,var(--profile-btn-accent),color-mix(in srgb,var(--profile-btn-accent) 62%,#14b8a6)); color:#fff } #elev-panel.beta-activity-profile #elev-slope.active{color:#fff} /* ── Stat chips: mono, tabular nums ── */ #elev-stats{top:8px;left:12px;height:auto;gap:5px;z-index:14;pointer-events:none} #elev-stats .est,#plan-stats .est{ display:inline-flex;align-items:center;gap:4px; padding:6px 9px;border-radius:9px; background:rgba(255,255,255,.66); box-shadow:inset 0 0 0 1px rgba(24,33,47,.07),0 3px 10px rgba(15,30,60,.05); font:600 10.5px/1 'Inter',system-ui;letter-spacing:0; font-variant-numeric:tabular-nums;color:#374151;white-space:nowrap } /* keep gain/loss colors (the .est color above otherwise out-specifies them) */ #elev-stats .est.elev-gain,#plan-stats .est.elev-gain{color:#3da870} #elev-stats .est.elev-loss,#plan-stats .est.elev-loss{color:#d06848} #plan-stats .est{padding:5px 8px} #elev-panel.beta-activity-profile #elev-stats{ background:none;box-shadow:none;padding:0; backdrop-filter:none;-webkit-backdrop-filter:none;top:11px;left:12px } :root[data-theme="dark"] #layer-btns .lbtn{ border-radius:50%;background:var(--surface-raised);color:var(--text-primary); border:1px solid var(--hairline); box-shadow:inset 0 1px 0 rgba(255,255,255,.04) } :root[data-theme="dark"] #layer-btns .lbtn svg{ stroke-linecap:round;stroke-linejoin:round } :root[data-theme="dark"] #layer-btns .lbtn.active{ background:color-mix(in srgb,var(--btn-accent) 24%,var(--surface-raised)); color:var(--btn-accent);border-color:color-mix(in srgb,var(--btn-accent) 20%,var(--hairline)); box-shadow:none } :root[data-theme="dark"] #elev-btns{ background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none; gap:5px;padding:0 } :root[data-theme="dark"] #elev-btns>*, :root[data-theme="dark"] #elev-panel.beta-activity-profile #elev-btns>*{ width:28px;height:28px;border-radius:50%; background:var(--surface-raised);color:var(--text-primary); border:1px solid var(--hairline);box-shadow:none } :root[data-theme="dark"] #elev-btns>*:hover{ background:#3A3A3C;color:#fff;border-color:rgba(255,255,255,.16) } :root[data-theme="dark"] #elev-surface{ background:var(--surface-raised)!important;color:var(--text-primary)!important; border-color:var(--hairline)!important } :root[data-theme="dark"] #elev-surface.active{ background:color-mix(in srgb,var(--profile-btn-accent) 24%,var(--surface-raised))!important; color:var(--profile-btn-accent)!important } :root[data-theme="dark"] #elev-panel.beta-activity-profile #elev-split.active, :root[data-theme="dark"] #elev-panel.beta-activity-profile #elev-fly.active, :root[data-theme="dark"] #elev-panel.beta-activity-profile #elev-surface.active, :root[data-theme="dark"] #elev-panel.beta-activity-profile #elev-time.active, :root[data-theme="dark"] #elev-panel.beta-activity-profile #elev-slope.active{ background:color-mix(in srgb,var(--profile-btn-accent) 24%,var(--surface-raised)); color:var(--profile-btn-accent);border-color:color-mix(in srgb,var(--profile-btn-accent) 20%,var(--hairline)); box-shadow:none } :root[data-theme="dark"] #elev-stats .est, :root[data-theme="dark"] #plan-stats .est{ background:var(--surface-raised);color:var(--text-primary); box-shadow:inset 0 0 0 1px var(--hairline) } :root[data-theme="dark"] #elev-stats .est.elev-gain, :root[data-theme="dark"] #plan-stats .est.elev-gain{color:var(--accent-up)} :root[data-theme="dark"] #elev-stats .est.elev-loss, :root[data-theme="dark"] #plan-stats .est.elev-loss{color:var(--accent-down)} :root[data-theme="light"] #elev-panel.beta-activity-profile:not(.minimized){ background:rgba(250,251,252,.96) } :root[data-theme="light"] #elev-panel.beta-activity-profile:not(.minimized)::before{ background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.42) 55%,transparent) } :root[data-theme="light"] #elev-panel.beta-activity-profile #elev-svg{ background:rgba(255,255,255,.52); box-shadow:inset 0 0 0 1px rgba(24,33,47,.065),0 6px 18px rgba(15,23,42,.045) } :root[data-theme="light"] #elev-btns{ background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none; gap:5px;padding:0 } :root[data-theme="light"] #elev-btns>*, :root[data-theme="light"] #elev-panel.beta-activity-profile #elev-btns>*{ width:28px;height:28px;border-radius:50%; background:rgba(244,246,248,.96);color:#374151; border:1px solid rgba(24,33,47,.075); box-shadow:0 2px 7px rgba(15,23,42,.06) } :root[data-theme="light"] #elev-btns>*:hover{ background:#fff;color:var(--profile-btn-accent,#2563eb); border-color:color-mix(in srgb,var(--profile-btn-accent,#2563eb) 20%,rgba(24,33,47,.075)) } :root[data-theme="light"] #elev-surface{ background:rgba(244,246,248,.96)!important;color:#374151!important; border-color:rgba(24,33,47,.075)!important } :root[data-theme="light"] #elev-panel.beta-activity-profile #elev-split.active, :root[data-theme="light"] #elev-panel.beta-activity-profile #elev-fly.active, :root[data-theme="light"] #elev-panel.beta-activity-profile #elev-surface.active, :root[data-theme="light"] #elev-panel.beta-activity-profile #elev-time.active, :root[data-theme="light"] #elev-panel.beta-activity-profile #elev-slope.active{ background:color-mix(in srgb,var(--profile-btn-accent) 13%,white)!important; color:var(--profile-btn-accent)!important; border-color:color-mix(in srgb,var(--profile-btn-accent) 18%,rgba(24,33,47,.075))!important; box-shadow:none } :root[data-theme="dark"] #hp-panel{ background:var(--surface);color:var(--text-primary); border-left:1px solid var(--hairline); box-shadow:-18px 0 48px rgba(0,0,0,.46); backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px) } :root[data-theme="dark"] #hp-header{border-bottom-color:var(--hairline)} :root[data-theme="dark"] #hp-name, :root[data-theme="dark"] .hp-title{color:var(--text-primary)} :root[data-theme="dark"] #hp-email, :root[data-theme="dark"] .hp-meta, :root[data-theme="dark"] .hp-section, :root[data-theme="dark"] .hp-stats-label{color:var(--text-secondary)} :root[data-theme="dark"] .hp-tabs, :root[data-theme="dark"] .hp-stat-grid div, :root[data-theme="dark"] .hp-fav{background:rgba(255,255,255,.055)} :root[data-theme="dark"] .hp-tab{color:var(--text-secondary)} :root[data-theme="dark"] .hp-tab.active{ background:var(--surface-raised);color:var(--text-primary); box-shadow:0 1px 4px rgba(0,0,0,.3) } :root[data-theme="dark"] .hp-stat-grid strong{color:var(--text-primary)} :root[data-theme="dark"] .hp-stat-grid span, :root[data-theme="dark"] .hp-empty{color:var(--text-secondary)} :root[data-theme="dark"] .hp-fav.active{background:rgba(245,158,11,.18);color:#fbbf24} :root[data-theme="dark"] .hp-load-more{ background:var(--surface-raised);color:var(--text-primary); border-color:var(--hairline) } :root[data-theme="dark"] .hp-item{background:rgba(255,255,255,.045)} :root[data-theme="dark"] .hp-item:hover, :root[data-theme="dark"] .hp-item:active{background:rgba(255,255,255,.085)} :root[data-theme="dark"] .hp-thumb{ background:var(--surface-raised); box-shadow:inset 0 0 0 1px var(--hairline) } :root[data-theme="dark"] #hp-close, :root[data-theme="dark"] #hp-logout, :root[data-theme="dark"] #hp-safety-action{ background:var(--surface-raised);color:var(--text-primary); border-color:var(--hairline) } :root[data-theme="dark"] #hp-close:hover, :root[data-theme="dark"] #hp-logout:hover{background:#3A3A3C;color:#fff} :root[data-theme="dark"] .hp-badge-strava{background:rgba(255,107,94,.14);color:#FF8A80} :root[data-theme="dark"] .hp-badge-gpx{background:rgba(48,209,88,.14);color:var(--accent-up)} :root[data-theme="dark"] .hp-badge-osm{background:rgba(10,132,255,.16);color:#64AFFF} @media (min-width:1024px){ #layer-btns{ gap:7px;padding:10px; right:14px; transition:gap .18s ease,padding .18s ease,right .32s cubic-bezier(.4,0,.2,1) } #layer-btns > .side-panel{ right:calc(100% + 15px) } #layer-btns:has(.lbtn.active), #layer-btns:has(.side-panel.open){ gap:2px;padding:6px } body:has(#hp-panel.open) #layer-btns{ right:334px;gap:2px;padding:6px } } @media (max-width:700px){ #elev-stats .est-extra{display:none} } @media (max-width:600px){ #hp-safety-action{display:inline-flex} /* Mobile: keep Sign out reachable as a compact icon button next to ✕ */ #hp-logout{ display:flex;align-items:center;justify-content:center; width:28px;height:28px;padding:0;border-radius:50%; border:none;background:#f1f5f9;color:#64748b;flex-shrink:0 } #hp-logout .hp-logout-ico{display:block} #hp-logout span{display:none} } @media (max-width:700px){ #layer-btns, :root[data-theme="dark"] #layer-btns{ background:transparent;border-color:transparent; backdrop-filter:none;-webkit-backdrop-filter:none; box-shadow:none } } /* Phones in landscape are wider than the regular mobile breakpoint. Keep the map actions in one bottom bar instead of reverting to the height-constrained desktop rail. */ @media (orientation:landscape) and (max-height:500px) and (hover:none) and (pointer:coarse){ .btn-nav-toggle{display:inline-flex} #layer-btns, :root[data-theme="dark"] #layer-btns{ top:calc(14px + env(safe-area-inset-top));left:auto; right:14px;bottom:auto; display:flex;flex-direction:row;align-items:center;gap:0;padding:5px 8px; border-radius:28px;background:transparent;border-color:transparent; backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none } #layer-btns::before{ content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit; background:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.7); backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5); box-shadow:0 8px 28px rgba(15,23,42,.2),0 2px 8px rgba(15,23,42,.1) } :root[data-theme="dark"] #layer-btns::before{ background:var(--surface);border-color:var(--hairline); box-shadow:0 8px 28px rgba(0,0,0,.38),0 2px 8px rgba(0,0,0,.24) } #nav-scroll{ display:flex;flex:0 1 auto;align-items:center;justify-content:flex-end; gap:4px;overflow:visible } #layer-btns .btn-row{position:static;flex:0 0 auto} #layer-btns .lbtn{width:36px;height:36px;flex:0 0 auto;border-radius:14px} #layer-btns .lbtn-sep{width:1px;height:22px;margin:0 2px} #btn3d,#btn-weather,#sep-3d-group{display:none} #btn-safety{display:none!important} #btn-rail-collapse{ display:flex!important;order:99;width:36px;height:36px; margin-left:4px;border-radius:50% } #layer-btns.landscape-collapsed{padding:5px} #layer-btns.landscape-collapsed #nav-scroll, #layer-btns.landscape-collapsed #btn-history{display:none} #layer-btns.landscape-collapsed #btn-rail-collapse{margin-left:0} #layer-btns.landscape-collapsed .rail-collapse-icon{transform:rotate(180deg)} .rail-collapse-icon{transition:transform .18s ease} #layer-btns > .side-panel{ position:fixed;left:auto; right:14px; top:calc(76px + env(safe-area-inset-top));bottom:auto; width:min(340px,calc(100vw - 28px)); max-height:calc(100dvh - 88px - env(safe-area-inset-top)); overflow:auto;border-radius:14px } #search-panel{width:auto} #elev-panel:not(.minimized), #plan-panel.visible{ left:14px;right:14px;bottom:14px; margin-right:0;border-radius:14px } /* landscape iPhone: activity card at the standard 14px inset (the earlier "shifted" look came from a desktop short-height rule leaking in — now gated to hover:hover) */ #elev-panel.beta-activity-profile:not(.minimized){height:190px} #plan-panel.visible{height:190px} #plan-panel.editing-route{height:190px} #elev-panel.beta-activity-profile #elev-btns{ top:8px;left:auto;right:10px;max-width:calc(100% - 142px) } #plan-panel.visible + #plan-meta-stack{ bottom:calc(218px + env(safe-area-inset-bottom)) } #plan-panel.editing-route + #plan-meta-stack{ bottom:calc(218px + env(safe-area-inset-bottom)) } } /* tiny landscape (iPhone mini etc.): shrink the card to ~70% so it doesn't eat half the short screen */ @media (orientation:landscape) and (max-height:400px) and (hover:none) and (pointer:coarse){ #elev-panel.beta-activity-profile:not(.minimized), #plan-panel.visible, #plan-panel.editing-route{height:133px} } @media (orientation:portrait) and (max-width:490px){ #elev-panel.beta-activity-profile:not(.minimized){overflow:visible} #elev-panel.beta-activity-profile #elev-stats{ top:-40px;left:10px } #elev-panel.beta-activity-profile #elev-btns{ top:8px;left:10px;right:10px;max-width:none;justify-content:flex-end } #elev-panel.beta-activity-profile .elev-rename-input{top:8px} }