/* Record (Bjorn picked proposal A, 2026-10-18): two activity tiles, one Route row, one Start button;
   while recording a low bar (time, distance, climb, pause) and an open card with a big clock,
   three figures and round Pause / Finish buttons. Same surfaces and blue as the rest of the app. */
.rec-dot { display:inline-block; flex:none; width:10px; height:10px; border-radius:50%; background:#ef4444; box-shadow:0 0 0 4px #ef444433; }
@media (prefers-reduced-motion:no-preference) { .rec-dot { animation:rec-pulse 1.6s ease-in-out infinite; } }
@keyframes rec-pulse { 50% { box-shadow:0 0 0 7px #ef444411; } }
.vertex-v3 [data-paused] .rec-dot,.vertex-v3 #recordSheet[data-paused] .rec-dot { background:#e5c86d; box-shadow:0 0 0 4px #e5c86d33; animation:none; }

/* Start card */
.vertex-v3 #app#app#app#app#app#app #recordSheet .record-head h2 { display:flex!important; align-items:center; gap:10px; }
.vertex-v3 #app#app#app#app#app#app #recordSheet:not([data-live]) .record-head .rec-dot { display:none; }
.vertex-v3 #app#app#app#app#app#app #recordSheet #recordKindLabel:empty { display:none; }
.vertex-v3 #app#app#app#app#app#app #recordChooser:not([hidden]) { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:10px!important; margin:0 0 12px!important; }
.vertex-v3 #app#app#app#app#app#app #recordChooser .record-choice {
  display:flex!important; flex-direction:column!important; align-items:flex-start!important; justify-content:flex-start!important; gap:0!important;
  min-height:104px!important; padding:14px!important; border-radius:16px!important; text-align:left!important;
  background:var(--ui-raised,#2a2e35)!important; border:2px solid transparent!important; box-shadow:none!important;
}
.vertex-v3 #app#app#app#app#app#app #recordChooser .record-choice[aria-pressed="true"] { background:#24324a!important; border-color:#3b82f6!important; }
.vertex-v3 #app#app#app#app#app#app #recordChooser .record-choice>span { width:26px!important; height:26px!important; padding:0!important; background:none!important; display:block!important; }
.vertex-v3 #app#app#app#app#app#app #recordChooser .record-choice svg { width:26px; height:26px; }
.vertex-v3 #app#app#app#app#app#app #recordChooser .record-choice>b { margin-top:8px; font-size:16px!important; font-weight:650; }
.vertex-v3 #app#app#app#app#app#app #recordChooser .record-choice>small { margin-top:3px; font-size:12.5px!important; line-height:1.3; }
.vertex-v3 #app#app#app#app#app#app #recordSheet .tour-route-picker { max-height:none!important; overflow:visible!important; margin:0 0 12px!important; padding:0!important; border:0!important; background:none!important; }
.vertex-v3 #app#app#app#app#app#app #recordSheet .record-route-row {
  display:flex!important; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:48px; padding:12px 14px!important;
  border:0!important; border-radius:14px!important; background:var(--ui-raised,#2a2e35)!important; font-size:15px; text-align:left;
}
.vertex-v3 #app#app#app#app#app#app #recordSheet .record-route-row>span { color:var(--ui-muted)!important; }
.vertex-v3 #app#app#app#app#app#app #recordSheet .record-route-row>b { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-weight:600; }
.vertex-v3 #app#app#app#app#app#app #recordSheet .record-route-row>b::after { content:" ›"; }
.vertex-v3 #app#app#app#app#app#app #recordSheet .record-route-row[aria-expanded="true"]>b::after { content:" ⌄"; }
.vertex-v3 #app#app#app#app#app#app #recordSheet .tour-route-choices:not([hidden]) { display:grid; gap:6px; max-height:min(34dvh,280px); overflow:auto; margin-top:8px; overscroll-behavior:contain; }
.vertex-v3 #app#app#app#app#app#app #recordSheet .tour-route-list { display:grid; gap:6px; max-height:none!important; overflow:visible!important; }
.vertex-v3 #app#app#app#app#app#app #recordSheet .record-start-row { display:block!important; margin:0!important; }
.vertex-v3 #app#app#app#app#app#app #recordSheet #startRecord:not([hidden]) {
  display:flex!important; align-items:center; justify-content:center; gap:10px; width:100%!important; height:54px!important; min-height:54px!important;
  border:0!important; border-radius:16px!important; background:#3b82f6!important; color:#fff!important; font-size:17px!important; font-weight:650!important;
}
.vertex-v3 #app#app#app#app#app#app #recordSheet #startRecord svg { width:20px; height:20px; fill:currentColor; stroke:none; }
.vertex-v3 #app#app#app#app#app#app #recordSheet #startRecord span { color:#fff!important; }
.vertex-v3 #app#app#app#app#app#app #recordSheet .record-explainer { margin:10px 0 0!important; text-align:center; font-size:12px!important; }
.vertex-v3 #app#app#app#app#app#app #recordSheet[data-live] .record-explainer { display:none!important; }

/* Open card while recording */
.vertex-v3 #app#app#app#app#app#app #recordSheet .record-live:not([hidden]) { display:block!important; margin:0!important; padding:0!important; background:none!important; border:0!important; }
.vertex-v3 #app#app#app#app#app#app #recordSheet .record-clock { display:block; margin:2px 0 6px; text-align:center; font-size:52px!important; font-weight:700; line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.vertex-v3 #app#app#app#app#app#app #recordSheet .record-gps:not([hidden]) {
  display:flex!important; justify-content:center; align-items:center; gap:6px; width:max-content; margin:0 auto!important; padding:5px 11px!important;
  border-radius:999px!important; background:var(--ui-raised,#2a2e35)!important; font-size:12px;
}
.vertex-v3 #app#app#app#app#app#app #recordSheet .record-gps #recordGps { color:#9fd8a8!important; }
.vertex-v3 #app#app#app#app#app#app #recordSheet .record-gps #recordGps::before { content:"● "; }
.vertex-v3 #app#app#app#app#app#app #recordSheet .record-figures { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:16px 0 18px; padding:14px 0; border-radius:16px; background:var(--ui-raised,#2a2e35); }
.vertex-v3 #app#app#app#app#app#app #recordSheet .record-figures>span { display:flex; flex-direction:column; align-items:center; gap:3px; min-width:0; border-left:1px solid #ffffff18; }
.vertex-v3 #app#app#app#app#app#app #recordSheet .record-figures>span:first-child { border-left:0; }
.vertex-v3 #app#app#app#app#app#app #recordSheet .record-figures b { font-size:21px!important; font-weight:650; font-variant-numeric:tabular-nums; white-space:nowrap; }
.vertex-v3 #app#app#app#app#app#app #recordSheet .record-figures small { font-size:12px!important; }
.vertex-v3 #app#app#app#app#app#app #recordSheet .record-controls { display:flex!important; justify-content:center; align-items:flex-start; gap:44px; margin:0!important; }
.vertex-v3 #app#app#app#app#app#app #recordSheet .record-controls:not(:has(.record-round:not([hidden]))) { display:none!important; }
.vertex-v3 #app#app#app#app#app#app #recordSheet .record-round:not([hidden]) {
  display:flex!important; flex-direction:column; align-items:center; gap:8px; width:auto!important; min-width:0!important; height:auto!important; min-height:0!important;
  padding:0!important; border:0!important; background:none!important; box-shadow:none!important; color:var(--ui-text)!important;
}
.vertex-v3 #app#app#app#app#app#app #recordSheet .record-round-icon { display:grid; place-items:center; width:72px; height:72px; border-radius:50%; background:var(--ui-raised,#2a2e35); color:var(--ui-text); }
.vertex-v3 #app#app#app#app#app#app #recordSheet .record-round-finish .record-round-icon { background:#3b82f6; color:#fff; }
.vertex-v3 #app#app#app#app#app#app #recordSheet .record-round-label { font-size:13px; font-weight:600; color:var(--ui-text)!important; }
.vertex-v3 #app#app#app#app#app#app #recordSheet #pauseRecord[data-state="paused"] .record-round-icon { background:#3b82f6; color:#fff; }
.vertex-v3 #app#app#app#app#app#app #recordSheet:has(#pauseRecord[data-state="paused"]:not([hidden])) .record-round-finish .record-round-icon { background:var(--ui-raised,#2a2e35); color:var(--ui-text); }
.vertex-v3 #app#app#app#app#app#app #recordSheet .record-round svg { width:28px; height:28px; }
.vertex-v3 #app#app#app#app#app#app #recordSheet .record-round-finish svg { fill:none; stroke:currentColor; stroke-width:2.2; stroke-linejoin:round; }
.vertex-v3 #app#app#app#app#app#app :is(#pauseRecord,#activePauseRecord) svg { fill:currentColor; stroke:none; }
.vertex-v3 #app#app#app#app#app#app :is(#pauseRecord,#activePauseRecord) .rec-icon-play,
.vertex-v3 #app#app#app#app#app#app :is(#pauseRecord,#activePauseRecord)[data-state="paused"] .rec-icon-pause { display:none; }
.vertex-v3 #app#app#app#app#app#app :is(#pauseRecord,#activePauseRecord)[data-state="paused"] .rec-icon-play { display:block; }
.vertex-v3 #app#app#app#app#app#app #recordSheet #discardRecord:not([hidden]) {
  display:block!important; width:auto!important; min-height:40px!important; margin:12px auto 0!important; padding:8px 14px!important;
  border:0!important; background:none!important; box-shadow:none!important; color:var(--ui-muted)!important; font-size:13px!important; font-weight:500!important;
}

/* Recording bar on the map */
.vertex-v3 #app#app#app#app#app#app #activeSession:not([hidden]) {
  display:flex!important; align-items:center!important; gap:12px!important; padding:12px 12px 12px 16px!important; border-radius:22px!important;
  border:0!important; background:var(--ui-surface,#1e2126)!important; box-shadow:0 10px 34px #0007!important;
}
.vertex-v3 #app#app#app#app#app#app #activeSession .active-session-main {
  display:flex!important; flex-direction:column!important; align-items:flex-start!important; justify-content:center!important; gap:0!important;
  flex:1!important; min-width:0!important; min-height:0!important; padding:0!important; border:0!important; background:none!important; text-align:left!important;
}
.vertex-v3 #app#app#app#app#app#app #activeSession .session-live { display:flex; align-items:center; gap:7px; margin-bottom:6px; font-size:11px!important; font-weight:700; letter-spacing:.08em; color:#ef8a8a!important; }
.vertex-v3 #app#app#app#app#app#app #activeSession .session-live :is(b,span) { color:inherit!important; font-size:inherit!important; font-weight:inherit; }
.vertex-v3 #app#app#app#app#app#app #activeSession[data-paused] .session-live { color:#e5c86d!important; }
.vertex-v3 #app#app#app#app#app#app #activeSession #activeSessionTime { font-size:28px!important; font-weight:700!important; line-height:1!important; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.vertex-v3 #app#app#app#app#app#app #activeSession #activeSessionStats { margin-top:5px; font-size:13px!important; color:var(--ui-muted)!important; }
.vertex-v3 #app#app#app#app#app#app #activeSession .active-map-controls { display:flex!important; gap:8px!important; padding:0!important; border:0!important; background:none!important; flex:none; }
.vertex-v3 #app#app#app#app#app#app #activeSession .active-map-controls button.rec-round:not([hidden]) {
  display:grid!important; place-items:center; width:52px!important; height:52px!important; min-width:52px!important; min-height:52px!important;
  padding:0!important; border:0!important; border-radius:50%!important; background:var(--ui-raised,#2a2e35)!important; color:var(--ui-text)!important;
}
.vertex-v3 #app#app#app#app#app#app #activeSession #activePauseRecord[data-state="paused"] { background:#3b82f6!important; color:#fff!important; }
.vertex-v3 #app#app#app#app#app#app #activeSession .rec-round svg { width:22px; height:22px; }
.vertex-v3 #app#app#app#app#app#app #activeSession #activeRecenter svg { fill:none; stroke:currentColor; stroke-width:2; }
.vertex-v3 #app#app#app#app#app#app#app #activeSession #activeRecenter[hidden] { display:none!important; }
.vertex-v3 #app#app#app#app#app#app #recordChooser .record-choice { align-items:flex-start!important; text-align:left!important; }
.vertex-v3 #app#app#app#app#app#app #recordChooser .record-choice>* { display:block!important; align-self:flex-start!important; text-align:left!important; }
.vertex-v3 #app#app#app#app#app#app #recordChooser .record-choice>small { color:var(--ui-muted)!important; visibility:visible!important; opacity:1!important; }
.vertex-v3 #app#app#app#app#app#app #recordSheet .tour-route-option { display:flex!important; align-items:center; gap:10px; min-height:48px; padding:10px 12px!important; border-radius:14px!important; text-align:left; }
.vertex-v3 #app#app#app#app#app#app #recordSheet :is(.tour-route-option.active,#tourNoRoute.active) { background:#24324a!important; border:2px solid #3b82f6!important; }
.vertex-v3 #app#app#app#app#app#app #recordSheet .tour-route-option>span:last-child { display:flex; flex-direction:column; gap:2px; min-width:0; }
.vertex-v3 #app#app#app#app#app#app#app #recordSheet #recordChooser .record-choice>small { display:block!important; }
/* The record card shows all of itself (start and live) instead of scrolling a half-hidden card. */
@media (max-width:899px) {
  .vertex-v3 #app#app#app#app#app#app #recordSheet { max-height:min(82dvh,640px)!important; }
}
@media (max-width:899px) and (max-height:720px) {
  .vertex-v3 #app#app#app#app#app#app #recordSheet .record-clock { font-size:44px!important; margin-bottom:4px; }
  .vertex-v3 #app#app#app#app#app#app #recordSheet .record-figures { margin:12px 0 14px; padding:11px 0; }
  .vertex-v3 #app#app#app#app#app#app #recordSheet .record-round-icon { width:62px; height:62px; }
  .vertex-v3 #app#app#app#app#app#app #recordSheet #discardRecord:not([hidden]) { margin-top:6px!important; }
  .vertex-v3 #app#app#app#app#app#app #recordChooser .record-choice { min-height:92px!important; padding:12px!important; }
}

/* Sun & shadows: the time shown is live; "Now" returns to it after the slider was moved. */
.vertex-v3 #app#app#app#app#app#app#app .sun-panel>div{gap:8px}
.vertex-v3 #app#app#app#app#app#app#app .sun-panel>div>span{margin-left:auto}
.vertex-v3 #app#app#app#app#app#app#app #sunNow{min-height:26px;padding:0 10px;border:0;border-radius:999px;background:#3b82f6;color:#fff;font:600 11px/1 inherit;cursor:pointer}
.vertex-v3 #app#app#app#app#app#app#app #sunNow[hidden]{display:none!important}