* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
body { display: flex; flex-direction: column; height: 100vh; }
header { background: #14213d; color: #fff; padding: 10px 16px; }
header h1 { margin: 0 0 8px; font-size: 20px; font-weight: 700; }
header .tag { font-size: 13px; font-weight: 400; color: #9fb3d1; margin-left: 8px; }
.controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.controls label { display: flex; flex-direction: column; font-size: 12px; color: #cdd8ea; gap: 3px; }
.controls input, .controls select { padding: 5px 7px; border: 1px solid #3a4a68; border-radius: 5px; background: #1f2f4d; color: #fff; }
.controls input { width: 80px; }
.controls button { align-self: end; background: #fca311; color: #14213d; border: none; font-weight: 700; padding: 8px 16px; border-radius: 6px; cursor: pointer; }
.controls button:hover { background: #ffb733; }
.controls button:disabled { opacity: .6; cursor: default; }
#findtop { background: #4895ef; color: #fff; }
#findtop:hover { background: #6aa9f2; }
.divider { width: 1px; align-self: stretch; background: #3a4a68; margin: 0 4px; }
.badge { display: inline-block; background: #14213d; color: #fff; font-size: 11px; padding: 1px 6px; border-radius: 9px; margin-left: 6px; }
main { flex: 1; display: flex; min-height: 0; }
#sidebar { width: 320px; overflow-y: auto; border-right: 1px solid #ddd; padding: 12px; }
#map { flex: 1; }
.muted { color: #777; font-size: 13px; }
#summary { font-size: 13px; margin: 0 0 10px; }
#segments { list-style: none; margin: 0; padding: 0; }
#segments li { border: 1px solid #e3e3e3; border-left-width: 5px; border-radius: 6px; padding: 8px 10px; margin-bottom: 8px; cursor: pointer; transition: background .1s; }
#segments li:hover { background: #f6f8fb; }
#segments li.active { background: #fff5e6; }
.seg-title { font-weight: 700; font-size: 14px; }
.seg-meta { font-size: 12px; color: #555; margin-top: 3px; }
.seg-score { float: right; font-size: 12px; color: #14213d; font-weight: 700; }
/* Header ghost buttons (Settings / Sign out) */
.controls .ghost { background: transparent; color: #cdd8ea; border: 1px solid #3a4a68; font-weight: 600; }
.controls .ghost:hover { background: #1f2f4d; }
#whoami { align-self: end; padding-bottom: 8px; }
/* Overlays: sign-in gate + settings */
.overlay { position: fixed; inset: 0; background: rgba(20, 33, 61, .55); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.overlay.hidden { display: none; }
.overlay .card { background: #fff; border-radius: 10px; padding: 24px 28px; width: 420px; max-width: 92vw; max-height: 90vh; overflow-y: auto; box-shadow: 0 12px 40px rgba(0,0,0,.3); position: relative; }
.overlay .card h2 { margin: 0 0 6px; color: #14213d; }
.overlay .card h3 { margin: 18px 0 6px; color: #14213d; font-size: 15px; }
.overlay .card section { border-top: 1px solid #eee; padding-top: 6px; }
.overlay .card section:first-of-type { border-top: none; }
.overlay .card label { display: flex; flex-direction: column; font-size: 12px; color: #555; gap: 3px; margin: 10px 0; }
.overlay .card input { padding: 7px 9px; border: 1px solid #ccc; border-radius: 5px; font-size: 14px; }
.overlay .card .row { display: flex; gap: 8px; }
.overlay .card button, .overlay .card .btn { background: #fca311; color: #14213d; border: none; font-weight: 700; padding: 9px 16px; border-radius: 6px; cursor: pointer; font-size: 14px; text-decoration: none; display: inline-block; }
.overlay .card button:hover, .overlay .card .btn:hover { background: #ffb733; }
.overlay .card button:disabled { opacity: .6; cursor: default; }
.overlay .card button.ghost { background: #eef1f6; color: #14213d; }
.overlay .card .close { position: absolute; top: 10px; right: 14px; background: none; color: #888; font-size: 22px; padding: 0; line-height: 1; }
.overlay .card .close:hover { background: none; color: #333; }
.msg { font-size: 13px; min-height: 18px; margin: 8px 0 0; color: #333; }
/* Tour: two mode blocks colour-matched to their buttons */
.tour-mode { border-left: 4px solid #ccc; padding: 2px 0 2px 12px; margin: 14px 0; }
.tour-mode h3 { margin: 0 0 4px; }
.tour-mode p { margin: 0; font-size: 13px; color: #444; }
.tour-mode.find { border-left-color: #fca311; }
.tour-mode.top { border-left-color: #4895ef; }
#tour-done { margin-top: 8px; }
/* The "?" help button: square, so it reads as an icon */
#tour-btn { padding: 8px 11px; }
/* ---------------------------------------------------------------------------
Landing / sign-in hero. Sits over the live map (the overlay stays partly
translucent) but with a richer backdrop and a bolder card.
--------------------------------------------------------------------------- */
#login-overlay {
background:
radial-gradient(1200px 600px at 50% -10%, rgba(72,149,239,.35), transparent 60%),
radial-gradient(900px 500px at 50% 120%, rgba(252,163,17,.30), transparent 55%),
rgba(20, 33, 61, .62);
}
.card.hero {
width: 540px;
padding: 34px 40px 30px;
text-align: center;
border-top: 5px solid #fca311;
animation: hero-in .45s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes hero-in {
from { opacity: 0; transform: translateY(14px) scale(.985); }
to { opacity: 1; transform: none; }
}
.hero-badge {
display: inline-block; background: #fff3dd; color: #b5730a;
font-size: 12px; font-weight: 700; letter-spacing: .3px;
padding: 5px 12px; border-radius: 999px; margin-bottom: 14px;
}
.hero-title {
margin: 0; color: #14213d; font-size: 46px; font-weight: 800;
letter-spacing: -1px; line-height: 1;
}
.hero-lead {
margin: 14px auto 20px; max-width: 440px;
font-size: 15px; line-height: 1.5; color: #48566b;
}
.hero-lead b { color: #14213d; }
.hero-features { list-style: none; margin: 0 0 24px; padding: 0; text-align: left; }
.hero-features li {
display: flex; gap: 11px; align-items: flex-start;
font-size: 14px; line-height: 1.4; color: #3a4657; padding: 8px 0;
border-bottom: 1px solid #f0f2f6;
}
.hero-features li:last-child { border-bottom: none; }
.hero-features b { color: #14213d; }
.hero-features .dot {
flex: none; width: 11px; height: 11px; border-radius: 50%; margin-top: 4px;
box-shadow: 0 0 0 4px rgba(0,0,0,.04);
}
.f-find .dot { background: #fca311; } /* amber — Find in ride */
.f-top .dot { background: #4895ef; } /* blue — Top spots */
.f-cal .dot { background: #0a9648; } /* green — calibration */
.btn.hero-cta {
display: block; width: 100%; padding: 14px 18px; font-size: 16px;
border-radius: 8px; box-shadow: 0 6px 18px rgba(252,163,17,.4);
transition: transform .08s ease, box-shadow .15s ease;
}
.btn.hero-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(252,163,17,.5); }
.hero-note { margin: 14px 0 0; font-size: 12px; color: #8a94a6; }
@media (max-width: 560px) {
.card.hero { width: 92vw; padding: 26px 22px; }
.hero-title { font-size: 38px; }
}