/* Ported from backend/Dokola.Api/wwwroot/me.html so the native app and the web athlete
   page look like one product. Keep the two in sync when either changes. */

:root {
  --bg:#0b1020; --panel:#141b30; --panel2:#1b2440; --line:#263255; --text:#e8ecf6;
  --muted:#8a96b8; --accent:#4cc9f0; --live:#06d6a0; --male:#5580b4; --female:#cf7f7f;
}

* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; background:var(--bg); color:var(--text);
  font-family:"Segoe UI", system-ui, -apple-system, sans-serif; -webkit-font-smoothing:antialiased;
  overscroll-behavior:none; }
body { max-width:540px; margin:0 auto; }

.pad { padding:16px 14px; }
h1 { font-size:22px; margin:0; display:flex; align-items:center; gap:8px; }
h2 { font-size:15px; margin:0 0 8px; color:var(--muted); font-weight:600; }
.muted { color:var(--muted); }

.live-dot { width:10px; height:10px; border-radius:50%; background:var(--muted); display:inline-block; }
.live-dot.on { background:var(--live); box-shadow:0 0 0 0 rgba(6,214,160,.7); animation:pulse 1.6s infinite; }
@keyframes pulse {
  0% { box-shadow:0 0 0 0 rgba(6,214,160,.6) }
  70% { box-shadow:0 0 0 9px rgba(6,214,160,0) }
  100% { box-shadow:0 0 0 0 rgba(6,214,160,0) }
}

.card { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px; margin-top:12px; }
label { display:block; font-size:13px; color:var(--muted); margin:10px 0 5px; }
input { width:100%; padding:13px; font-size:17px; border-radius:10px; border:1px solid var(--line);
  background:var(--panel2); color:var(--text); }
button { font:inherit; cursor:pointer; border:none; border-radius:10px; }
.btn { width:100%; padding:14px; font-size:16px; font-weight:700; background:var(--accent); color:#04121a; margin-top:14px; }
.btn.ghost { background:var(--panel2); color:var(--text); border:1px solid var(--line); }
.btn.stop { background:#ff6b6b; color:#2a0808; }
.err { color:#ff6b6b; font-size:14px; margin-top:10px; min-height:18px; }
.note { font-size:12px; color:var(--muted); margin-top:10px; line-height:1.5; }
.chip { display:inline-flex; align-items:center; justify-content:center; min-width:28px; height:28px; padding:0 7px;
  border-radius:8px; color:#fff; font-weight:800; font-size:14px; }

/* Home race list */
.race { display:flex; align-items:center; justify-content:space-between; padding:16px 14px; cursor:pointer; }
.race + .race { border-top:1px solid var(--line); }
.race .n { font-weight:700; font-size:17px; }
.race .d { font-size:13px; color:var(--muted); margin-top:3px; }
.race .go { color:var(--accent); font-size:22px; }

/* Race header + tabs */
.rhead { display:flex; align-items:center; justify-content:space-between; padding:14px; border-bottom:1px solid var(--line); }
.rhead .rn { font-weight:700; font-size:17px; display:flex; align-items:center; gap:8px; }
.rhead .rs { font-size:12px; color:var(--muted); margin-top:2px; }
.panel { display:none; }
.panel.active { display:block; }
.tabbar { position:sticky; bottom:0; display:flex; background:var(--panel); border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom); }
.tabbar button { flex:1; background:transparent; color:var(--muted); padding:12px 4px 14px; font-size:12px; font-weight:600; }
.tabbar button .ic { display:block; font-size:20px; margin-bottom:2px; }
.tabbar button.active { color:var(--accent); }

/* My status */
.status { display:grid; grid-template-columns:repeat(3,1fr); text-align:center; }
.status .k { font-size:12px; color:var(--muted); }
.status .v { font-size:22px; font-weight:800; font-variant-numeric:tabular-nums; margin-top:2px; }

/* Opponent rows */
.op { display:flex; align-items:center; gap:11px; padding:12px 4px; border-bottom:1px solid rgba(38,50,85,.55); }
.op:last-child { border-bottom:none; }
.op .who { flex:1; min-width:0; }
.op .nm { font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.op .sub { font-size:12px; color:var(--muted); margin-top:3px; }
.op .min { text-align:right; }
.op .min .t { font-size:22px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1.05; }
.op .min .rel { font-size:11px; color:var(--muted); }
.up { color:var(--female); font-weight:700; }
.down { color:var(--live); font-weight:700; }

/* Source-of-position segmented control */
.seg { display:flex; background:var(--panel2); border:1px solid var(--line); border-radius:10px; overflow:hidden; margin-top:6px; }
.seg button { flex:1; padding:10px; background:transparent; color:var(--muted); font-weight:600; border-radius:0; }
.seg button.active { background:var(--accent); color:#04121a; }

#map { width:100%; height:70vh; background:#0f1730; }
.maphint { font-size:12px; color:var(--muted); padding:8px 14px; }
.leaflet-container { background:#0f1730; }

/* Blazor's unhandled-error strip, restyled to match. */
#blazor-error-ui {
  background:#ff6b6b; color:#2a0808; bottom:0; display:none; left:0; padding:12px 14px;
  position:fixed; width:100%; z-index:1000;
}
#blazor-error-ui .dismiss { cursor:pointer; position:absolute; right:12px; top:10px; }

/* ---------- Route library, recording, and riding the ghost ---------- */

/* The verdict, sized to be readable at 25 km/h with the phone on the bars. Colour does
   the reading; the words underneath confirm it. */
.ghostbar { padding:14px; text-align:center; border-bottom:1px solid var(--line); background:var(--panel); }
.ghostbar .delta { font-size:28px; font-weight:800; font-variant-numeric:tabular-nums; }
.ghostbar .against { font-size:12px; color:var(--muted); margin-top:4px; }
.ghostbar.ahead { background:rgba(6,214,160,.14); }
.ghostbar.ahead .delta { color:var(--live); }
.ghostbar.behind { background:rgba(255,107,107,.14); }
.ghostbar.behind .delta { color:#ff6b6b; }

.offroute { background:#ff6b6b; color:#2a0808; font-weight:700; text-align:center; padding:10px 14px; }

/* The map is a fixed slab rather than #map's 70vh: these screens have controls above and
   below it that must both stay reachable without scrolling on a phone. */
.routemap-wrap { margin-top:12px; border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.routemap { width:100%; height:44vh; min-height:220px; background:#0f1730; }

.checkline { display:flex; align-items:center; gap:10px; margin-top:14px; color:var(--text); font-size:14px; }
.checkline input { width:auto; }

/* Sign-in choices on the web front page. */
.signin { display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.signin .or { text-align:center; font-size:12px; color:var(--muted); margin:4px 0; }

/* An unfinished recording, offered rather than resumed behind the rider's back. */
.card.resume { border-color:var(--accent); }
.note.safe { color:var(--live); }

/* Sign-in: the secondary ways in are folded away so the ordinary one is the whole screen. */
.or { text-align:center; font-size:12px; color:var(--muted); margin:14px 0 10px; }
details.card > summary { cursor:pointer; font-size:14px; font-weight:600; color:var(--muted);
  list-style:none; display:flex; align-items:center; justify-content:space-between; }
details.card > summary::after { content:"›"; color:var(--accent); font-size:20px; transition:transform .15s; }
details.card[open] > summary::after { transform:rotate(90deg); }
details.card > summary::-webkit-details-marker { display:none; }
#google-signin { display:flex; justify-content:center; }

/* A tile provider's logo over the map. Mapy.com requires it at 30px or more and no
   smaller than any other logo on the map, so it gets a plain background rather than
   anything that would dim or shrink it. */
.map-provider-logo { background:rgba(255,255,255,.85); border-radius:6px; padding:3px 6px; line-height:0; }
.map-provider-logo img { display:block; }