/* 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:var(--ripa-red); box-shadow:0 0 0 4px rgba(var(--g-shadow-rgb),0.200); color:var(--g-on-accent);--g-contrast:var(--g-on-accent);--g-secondary-contrast:var(--g-on-accent);--ui-on-dark:var(--g-on-accent);}
@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 rgba(var(--g-shadow-rgb),0.067); } }
.vertex-v3 [data-paused] .rec-dot,.vertex-v3 #recordSheet[data-paused] .rec-dot { background:#e5c86d; box-shadow:0 0 0 4px rgba(var(--g-shadow-rgb),0.200); 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:14px!important; text-align:left!important;
  background:var(--ui-raised,var(--g-raised))!important; border:2px solid transparent!important; box-shadow:none!important;
--g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.vertex-v3 #app#app#app#app#app#app #recordChooser .record-choice[aria-pressed="true"] { background:var(--g-raised)!important; border-color:var(--g-accent)!important; --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.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; --g-contrast:inherit;--g-secondary-contrast:inherit;--ui-on-dark:inherit;}
.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:600; }
.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; --g-contrast:inherit;--g-secondary-contrast:inherit;--ui-on-dark:inherit;}
.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,var(--g-raised))!important; font-size:15px; text-align:left;
--g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.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:14px!important; background:var(--g-accent)!important; color:var(--g-contrast)!important; font-size:17px!important; font-weight:600!important;
--g-contrast:var(--g-on-accent);--g-secondary-contrast:var(--g-on-accent);--ui-on-dark:var(--g-on-accent);}
.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:var(--g-contrast)!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; --g-contrast:inherit;--g-secondary-contrast:inherit;--ui-on-dark:inherit;}
.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:600; 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,var(--g-raised))!important; font-size:12px;
--g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.vertex-v3 #app#app#app#app#app#app #recordSheet .record-gps #recordGps { color:var(--g-success)!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:14px; background:var(--ui-raised,var(--g-raised)); --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.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 rgba(var(--g-ink-rgb),0.094); }
.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:600; 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;
--g-contrast:inherit;--g-secondary-contrast:inherit;--ui-on-dark:inherit;}
.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,var(--g-raised)); color:var(--ui-text); --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.vertex-v3 #app#app#app#app#app#app #recordSheet .record-round-finish .record-round-icon { background:var(--g-accent); color:var(--g-contrast); --g-contrast:var(--g-on-accent);--g-secondary-contrast:var(--g-on-accent);--ui-on-dark:var(--g-on-accent);}
.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:var(--g-accent); color:var(--g-contrast); --g-contrast:var(--g-on-accent);--g-secondary-contrast:var(--g-on-accent);--ui-on-dark:var(--g-on-accent);}
.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,var(--g-raised)); color:var(--ui-text); --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.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;
--g-contrast:inherit;--g-secondary-contrast:inherit;--ui-on-dark:inherit;}

/* 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,var(--g-surface))!important; box-shadow:0 10px 34px rgba(var(--g-shadow-rgb),0.240)!important;
--g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.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;
--g-contrast:inherit;--g-secondary-contrast:inherit;--ui-on-dark:inherit;}
.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:600; letter-spacing:.08em; color:var(--g-danger)!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:var(--g-warning)!important; }
.vertex-v3 #app#app#app#app#app#app #activeSession #activeSessionTime { font-size:28px!important; font-weight:600!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; --g-contrast:inherit;--g-secondary-contrast:inherit;--ui-on-dark:inherit;}
.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,var(--g-raised))!important; color:var(--ui-text)!important;
--g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.vertex-v3 #app#app#app#app#app#app #activeSession #activePauseRecord[data-state="paused"] { background:var(--g-accent)!important; color:var(--g-contrast)!important; --g-contrast:var(--g-on-accent);--g-secondary-contrast:var(--g-on-accent);--ui-on-dark:var(--g-on-accent);}
.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:var(--g-raised)!important; border:2px solid var(--g-accent)!important; --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.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:var(--g-accent);color:var(--g-contrast);font:600 11px/1 var(--font-sans);cursor:pointer;--g-contrast:var(--g-on-accent);--g-secondary-contrast:var(--g-on-accent);--ui-on-dark:var(--g-on-accent);}
.vertex-v3 #app#app#app#app#app#app#app #sunNow[hidden]{display:none!important}
.vertex-v3 #app#app#app#app#app#app #activeSession #activePov svg { fill:none; stroke:currentColor; stroke-width:2; stroke-linejoin:round; }
.vertex-v3 #app#app#app#app#app#app #activeSession #activePov.active { background:var(--g-accent)!important; color:var(--g-contrast)!important; border-color:var(--g-accent)!important; --g-contrast:var(--g-on-accent);--g-secondary-contrast:var(--g-on-accent);--ui-on-dark:var(--g-on-accent);}
.vertex-v3 #app#app#app#app#app#app #activeSession #activePov.active svg { fill:var(--g-contrast); }

/* Way down: a card above the recording bar, like the gear picker; rows are the ways, dot = today's ground. */
.vertex-v3 #app#app#app#app#app#app #activeSession #activeWayDown svg { fill:none; stroke:currentColor; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; }
.vertex-v3 #app#app#app#app#app#app #activeSession #activeWayDown[aria-expanded="true"] { background:var(--g-accent)!important; color:var(--g-contrast)!important; --g-contrast:var(--g-on-accent);--g-secondary-contrast:var(--g-on-accent);--ui-on-dark:var(--g-on-accent);}
.vertex-v3 #app#app#app#app#app#app #activeSession .way-down-card:not([hidden]) { position:absolute; left:0; right:0; bottom:calc(100% + 8px); z-index:2; display:flex; flex-direction:column; gap:10px; max-height:min(46dvh,380px); overflow:auto; padding:12px 14px 14px; border-radius:22px; background:var(--ui-surface,var(--g-surface)); box-shadow:0 10px 34px rgba(var(--g-shadow-rgb),0.240); color:var(--g-ink); --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.vertex-v3 #app#app#app#app#app#app #activeSession .way-down-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.vertex-v3 #app#app#app#app#app#app #activeSession .way-down-head>div { display:flex; flex-direction:column; gap:1px; min-width:0; }
.vertex-v3 #app#app#app#app#app#app #activeSession .way-down-head b { font:600 15px var(--font-sans); color:var(--g-ink); }
.vertex-v3 #app#app#app#app#app#app #activeSession .way-down-head small { font-size:12px; color:var(--g-muted); }
.vertex-v3 #app#app#app#app#app#app #activeSession button.way-down-close { flex:none; width:36px; height:36px; min-height:36px; padding:0; border:0; border-radius:50%; background:var(--ui-raised,var(--g-raised)); color:var(--g-ink); font-size:15px; line-height:1; cursor:pointer; }
.vertex-v3 #app#app#app#app#app#app #activeSession .way-down-body { display:flex; flex-direction:column; gap:6px; }
.vertex-v3 #app#app#app#app#app#app #activeSession button.way-down-row { display:grid; grid-template-columns:12px minmax(0,1fr) auto; align-items:center; gap:10px; width:100%; min-height:52px; padding:8px 12px; border:2px solid transparent; border-radius:14px; background:var(--ui-raised,var(--g-raised)); color:var(--g-ink); text-align:left; cursor:pointer; }
.vertex-v3 #app#app#app#app#app#app #activeSession button.way-down-row[aria-pressed="true"] { border-color:var(--g-accent); }
.vertex-v3 #app#app#app#app#app#app #activeSession .way-down-row>i { width:12px; height:12px; border-radius:50%; box-shadow:0 0 0 2px rgba(var(--g-shadow-rgb),0.12); }
.vertex-v3 #app#app#app#app#app#app #activeSession .way-down-row>span { display:flex; flex-direction:column; gap:2px; min-width:0; }
.vertex-v3 #app#app#app#app#app#app #activeSession .way-down-row b { font:600 14.5px var(--font-sans); color:var(--g-ink); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.vertex-v3 #app#app#app#app#app#app #activeSession .way-down-row small { font-size:12.5px; line-height:1.3; color:var(--g-muted); }
.vertex-v3 #app#app#app#app#app#app #activeSession .way-down-row>em { font-style:normal; font-size:18px; color:var(--g-muted); }
.vertex-v3 #app#app#app#app#app#app #activeSession :is(.way-down-note,.way-down-state) { margin:2px 2px 0; font-size:12px; line-height:1.35; color:var(--g-muted); }
.vertex-v3 #app#app#app#app#app#app #activeSession .way-down-state { font-size:13.5px; color:var(--g-ink); }
.vertex-v3 #app#app#app#app#app#app#app #activeSession:has(#wayDownCard:not([hidden])) { contain:layout!important; }
/* Four round buttons (Follow, Way down, POV, Pause) still leave the clock its room on a small phone. */
.vertex-v3 #app#app#app#app#app#app#app #activeSession:has(.active-map-controls>button:not([hidden])~button:not([hidden])~button:not([hidden])~button:not([hidden])) .active-map-controls { gap:5px!important; }
.vertex-v3 #app#app#app#app#app#app#app #activeSession:has(.active-map-controls>button:not([hidden])~button:not([hidden])~button:not([hidden])~button:not([hidden])) .active-map-controls button.rec-round:not([hidden]) { width:44px!important; height:44px!important; min-width:44px!important; min-height:44px!important; }
.vertex-v3 #app#app#app#app#app#app#app #activeSession:has(.active-map-controls>button:not([hidden])~button:not([hidden])~button:not([hidden])~button:not([hidden])) #activeSessionTime { font-size:24px!important; }
.vertex-v3 #app#app#app#app#app#app#app #activeSession:has(.active-map-controls>button:not([hidden])~button:not([hidden])~button:not([hidden])~button:not([hidden])) { gap:8px!important; padding-left:14px!important; padding-right:10px!important; }
@media (max-width:359px) {
  .vertex-v3 #app#app#app#app#app#app#app #activeSession:has(.active-map-controls>button:not([hidden])~button:not([hidden])~button:not([hidden])~button:not([hidden])) .active-map-controls { gap:4px!important; }
  .vertex-v3 #app#app#app#app#app#app#app #activeSession:has(.active-map-controls>button:not([hidden])~button:not([hidden])~button:not([hidden])~button:not([hidden])) .active-map-controls button.rec-round:not([hidden]) { width:40px!important; height:40px!important; min-width:40px!important; min-height:40px!important; }
  .vertex-v3 #app#app#app#app#app#app#app #activeSession:has(.active-map-controls>button:not([hidden])~button:not([hidden])~button:not([hidden])~button:not([hidden])) #activeSessionTime { font-size:22px!important; }
}
.vertex-v3 #app#app#app#app#app#app #activeSession .way-down-tip { margin:2px 2px 0; font-size:13px; font-weight:600; color:var(--g-accent); }

/* Finish on the recording bar (Bjorn 2026-11-05): a stop square next to Pause; the tap asks on the same row. */
.vertex-v3 #app#app#app#app#app#app#app #activeSession #activeFinish svg { fill:currentColor; stroke:none; width:18px; height:18px; }
.vertex-v3 #app#app#app#app#app#app#app #activeSession:has(.active-map-controls>button:not([hidden])~button:not([hidden])~button:not([hidden])~button:not([hidden])~button:not([hidden])) .active-map-controls button.rec-round:not([hidden]) { width:40px!important; height:40px!important; min-width:40px!important; min-height:40px!important; }
.vertex-v3 #app#app#app#app#app#app#app #activeSession:has(.active-map-controls>button:not([hidden])~button:not([hidden])~button:not([hidden])~button:not([hidden])~button:not([hidden])) .active-map-controls { gap:4px!important; }
.vertex-v3 #app#app#app#app#app#app #activeSession .active-finish-confirm[hidden] { display:none!important; }
.vertex-v3 #app#app#app#app#app#app #activeSession .active-finish-confirm { display:flex; align-items:center; gap:8px; flex:1 1 auto; min-width:0; min-height:52px; }
.vertex-v3 #app#app#app#app#app#app #activeSession .active-finish-confirm b { flex:1 1 auto; min-width:0; font-size:16px; font-weight:600; color:var(--ui-text,var(--g-ink))!important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vertex-v3 #app#app#app#app#app#app #activeSession .active-finish-confirm .rec-pill { flex:none; height:44px; padding:0 16px; border:0; border-radius:999px; background:var(--ui-raised,var(--g-raised))!important; color:var(--ui-text,var(--g-ink))!important; font:600 15px/1 var(--font-sans); cursor:pointer; --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.vertex-v3 #app#app#app#app#app#app #activeSession .active-finish-confirm .rec-pill-primary { background:var(--g-accent)!important; color:var(--g-on-accent)!important; --g-contrast:var(--g-on-accent);--g-secondary-contrast:var(--g-on-accent);--ui-on-dark:var(--g-on-accent);}
.vertex-v3 #app#app#app#app#app#app #activeSession .active-finish-confirm .rec-pill-primary span,.vertex-v3 #app#app#app#app#app#app #activeSession .active-finish-confirm .rec-pill-primary { color:var(--g-on-accent)!important; }
.vertex-v3 #app#app#app#app#app#app#app #activeSession[data-finish-ask] :is(#openActiveSession,.active-map-controls,#activeSessionHandle) { display:none!important; }
/* Pulled down to the small pill, Pause and Finish stay; the map toggles go. */
@media (max-width:899px) {
  .vertex-v3 #app#app#app#app#app#app#app #activeSession.collapsed .active-map-controls { display:flex!important; }
  .vertex-v3 #app#app#app#app#app#app#app #activeSession.collapsed .active-map-controls :is(#activeRecenter,#activeGear,#activeWayDown,#activePov) { display:none!important; }
}