/* spikefreak + spikefan — map kit + tracker v2 additions. Requires tokens.css + components.css.
   Leaflet: put these on custom controls / divIcons; leave Leaflet's own CSS untouched except the overrides at the end. */

/* ── Map controls ─────────────────────────────── */
.sf-mapbtn { width: var(--sf-tap-map); height: var(--sf-tap-map); display: grid; place-items: center; border: 1px solid rgb(17 20 24 / .22); border-radius: var(--sf-r-md, 10px);
  background: var(--sf-paper, rgb(255 255 255)); color: var(--sf-map-ink, rgb(17 20 24)); box-shadow: 0 1px 3px rgb(16 20 24 / .22); cursor: pointer; }
.sf-map { isolation: isolate; }
.sf-map .leaflet-control-attribution { font-size: 10px; line-height: 1.3; }
.sf-mapbtn svg { width: 20px; height: 20px; }
.sf-maptitle { padding: 6px 12px; border-radius: 999px; background: rgb(17 20 24 / .72); color: var(--sf-white);
  font: 700 14px/1.2 var(--sf-font-ui); white-space: nowrap; pointer-events: none; }
/* No zoom buttons: L.map(el, { zoomControl: false }) — pinch / wheel only. No Pin me / Locate FABs. */

/* ── Markers (L.divIcon className) ────────────── */
.sf-mk-you { width: 20px; height: 20px; border-radius: 50%; background: var(--sun-full); border: 3px solid var(--sf-map-ink); }
.sf-mk-halo { border-radius: 50%; background: rgb(245 184 0 / .22); border: 1.5px solid var(--sun-full); } /* L.circle, radius = accuracy */
.sf-mk-pin { width: 16px; height: 16px; border-radius: 50%; background: var(--sf-accent); border: 3px solid var(--sf-white); box-shadow: 0 1px 3px rgb(0 0 0 / .5); }
.sf-mk-runner { width: 30px; height: 30px; border-radius: 50%; background: var(--sf-map-ink); color: var(--sf-white); border: 2px solid var(--sf-white);
  display: grid; place-items: center; font: 700 12px/1 var(--sf-font-ui); box-shadow: 0 1px 3px rgb(0 0 0 / .5); }
/* Other timers on this race (server-fused). This device stays .sf-mk-you. */
.sf-mk-timer { display: grid; justify-items: center; gap: 3px; }
.sf-mk-timer__icon { width: 28px; height: 28px; border-radius: 7px; background: var(--sf-white); border: 2px solid var(--sf-map-ink);
  display: grid; place-items: center; box-shadow: 0 1px 3px rgb(0 0 0 / .5); }
.sf-mk-timer__label { padding: 2px 6px; border-radius: 999px; background: rgb(17 20 24 / .72); color: var(--sf-white);
  font: 700 11px/1.2 var(--sf-font-ui); white-space: nowrap; }      /* "T2 · Cybil" → "T3 · 2 min ago" when stale */
.sf-mk-timer.is-stale { opacity: .6; }                              /* no update for > 60 s */
.sf-mk-timer.is-stale .sf-mk-timer__icon { border-style: dashed; }
.sf-mk-start { width: 18px; height: 18px; border-radius: 50%; background: var(--sf-go); border: 3px solid var(--sf-white); }
.sf-mk-finish { width: 18px; height: 18px; border-radius: 2px; background: var(--sf-stop); border: 3px solid var(--sf-white); }
.sf-mk-mile { padding: 0 8px; height: 22px; line-height: 22px; border-radius: 999px; background: var(--sf-ink); color: var(--sf-paper); white-space: nowrap;
  font: 700 12px/22px var(--sf-font-num); box-shadow: 0 1px 3px rgb(0 0 0 / .4); }

/* Direction-of-travel chevron on the course line: white on the line, never takes a tap. */
.cm-arrow { pointer-events: none; }
.cm-arrow svg { display: block; width: 12px; height: 12px; fill: none; stroke: var(--sf-on-accent); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; opacity: .9; }

/* ── Map glass: every popup/menu on a map (tap popup, layers menu) ── */
.sf-glass { border-radius: 8px; background: rgb(17 20 24 / .68); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--sf-white); box-shadow: 0 2px 10px rgb(0 0 0 / .3); overflow: hidden; font-family: var(--sf-font-ui); }
.sf-glass__row { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 10px; border-top: 1px solid rgb(255 255 255 / .15); font: 600 14px var(--sf-font-ui); }

/* ── Tap popup (L.popup className="sf-callout", closeButton:false) ── */
.sf-callout .leaflet-popup-content-wrapper { padding: 0; border-radius: 8px; background: rgb(17 20 24 / .68);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--sf-white); box-shadow: 0 2px 10px rgb(0 0 0 / .3); }
.sf-callout .leaflet-popup-tip-container { display: none; }   /* leader lines replace the tip */
.sf-callout .leaflet-popup-content { margin: 0; width: 132px !important; }
.sf-callout__head { display: flex; align-items: center; justify-content: space-between; padding: 2px 2px 0 10px;
  font: 700 10px/1 var(--sf-font-ui); letter-spacing: .08em; text-transform: uppercase; }
.sf-callout__row { display: flex; align-items: center; gap: 8px; padding: 3px 10px; }
.sf-callout__row b { font: 700 17px/1 var(--sf-font-num); }
.sf-callout__n, .sf-mk-pass { width: 16px; height: 16px; border-radius: 50%; background: var(--sf-white); color: var(--sf-map-ink);
  display: grid; place-items: center; font: 700 10px/1 var(--sf-font-ui); }
.sf-mk-pass { width: 20px; height: 20px; border: 2px solid var(--sf-map-ink); font-size: 11px; }        /* divIcon at each course intersection */
.sf-mk-tap { display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--sf-white); border: 2.5px solid var(--sf-map-ink); }
/* Leader lines: L.polyline([tap, intersection], { className: 'sf-leader', interactive: false }) */
.sf-leader { stroke: var(--sf-white); stroke-width: 1.5; stroke-dasharray: 4 3; fill: none; filter: drop-shadow(0 0 1px rgb(0 0 0 / .9)); }
.sf-callout__pin { display: flex; align-items: center; gap: 6px; height: 40px; margin-top: 4px; padding: 0 10px; width: 100%;
  border: 0; border-top: 1px solid rgb(255 255 255 / .2); background: none; color: var(--sf-white); font: 700 13px var(--sf-font-ui); }

/* ── Replay bar ───────────────────────────────── */
/* Playback bar: 56px row. Play 48, scrubber (4px track, 20px thumb), the total, the speed chip (36 tall, 48 hit area). */
.sf-replay { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 12px; background: var(--sf-paper); border-top: 1px solid var(--sf-line); }
.sf-replay__play { width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--sf-accent); color: var(--sf-on-accent); }
.sf-replay__play svg { width: 20px; height: 20px; }
.sf-replay__play:not([aria-label="Pause"]) svg { transform: translateX(2px); }
.sf-replay__speed { position: relative; min-width: 48px; height: 36px; padding: 0 10px; border-radius: 999px; border: 1.5px solid var(--sf-line-strong); background: none; color: var(--sf-ink); font: var(--sf-w-semi) 16px var(--sf-font-num); }
.sf-replay__speed::after { content: ""; position: absolute; inset: -6px 0; }
.sf-replay input[type=range] { flex: 1; min-width: 0; appearance: none; background: none; height: 48px; margin: 0; }
.sf-replay input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--sf-accent) var(--played, 0%), var(--sf-line) var(--played, 0%)); }
.sf-replay input[type=range]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--sf-line); }
.sf-replay input[type=range]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--sf-accent); }
.sf-replay input[type=range]::-webkit-slider-thumb { appearance: none; width: 20px; height: 20px; transform: translateY(-8px); border: 0; border-radius: 50%; background: var(--sf-accent); }
.sf-replay input[type=range]::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: var(--sf-accent); }

/* ── Elevation drawer ─────────────────────────── */
.sf-elev { background: var(--sf-paper); border-top: 1px solid var(--sf-line); }
.sf-elev summary { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 6px 0 14px; list-style: none; cursor: pointer;
  font: 700 15px var(--sf-font-ui); }
.sf-elev summary b { font: 700 15px var(--sf-font-num); }

/* The tracker's runner grid and buttons are sized by js/trackerFit.js (columns, 40-48px) and styled in XCTracker.html. */
.sf-tracker-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.sf-tracker-head .sf-clock { flex: 1; text-align: left; font-size: clamp(56px, 21vw, 96px); }
.sf-tracker-head .sf-timerbtn { width: 118px; min-height: 64px; font-size: 24px; }
.sf-splitgroup { display: flex; justify-content: space-between; padding: 7px 12px; background: var(--sf-warn-soft);
  border-top: 1px solid var(--sf-warn); color: var(--sf-warn-ink); font: 700 13px var(--sf-font-ui); }

/* Profile = algorithm sections (typically 6–10), each one solid fill; 1px white divider between sections. */
.sf-prof-sec + .sf-prof-sec { border-left: 1px solid var(--sf-white); }
/* ── Course Intel selection ───────────────────── */
.sf-prof-bar.is-dim { opacity: .35; }
.sf-prof-bar.is-sel { box-shadow: inset 0 0 0 2px var(--sf-ink); }
.sf-stretch { background: var(--sf-paper); border: 2px solid var(--sf-ink); border-radius: var(--sf-r-md); }
@media (max-width: 899px) { .sf-stretch { position: sticky; bottom: 0; border-radius: var(--sf-r-lg) var(--sf-r-lg) 0 0; box-shadow: var(--sf-shadow-3); } }

/* ── Bottom-sheet choice rows (Import results step 1) ── */
.sf-choice { display: grid; grid-template-columns: 44px 1fr 18px; gap: 12px; align-items: center; padding: 14px;
  border: 1.5px solid var(--sf-line-strong); border-radius: var(--sf-r-md); background: var(--sf-paper); text-align: left; width: 100%; }
.sf-choice:hover { border-color: var(--sf-accent); background: var(--sf-accent-soft); }

/* ── Form fields ──────────────────────────────── */
.sf-field { display: grid; gap: 6px; }
.sf-field > span { font: 600 14px var(--sf-font-ui); }
.sf-field-error { display: flex; gap: 8px; align-items: center; color: var(--sf-stop-ink); font: 600 13px var(--sf-font-ui); }

/* ── Meets: lineup vs result bands ────────────── */
.sf-band { display: flex; align-items: center; gap: 8px; height: 44px; padding: 8px 14px; font: 700 12px/1 var(--sf-font-ui); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; user-select: none; }
.sf-band--plan   { background: var(--sf-sunk); color: var(--sf-ink-2); border-top: 1px solid var(--sf-line); }
.sf-band--result { background: var(--sf-go-soft); color: var(--sf-go-ink); border-top: 1px solid var(--sf-go); }

/* ── Collapsible band headers (meet card: Entries / Lineups / Results) ── */
.sf-band[aria-expanded="false"] { color: var(--sf-ink-3); }
/* The band's one trailing slot: the word (Show closed, Hide open) and the 28 ring, centred in the 44 height (8px padding leaves 28). */
.sf-band__fold { display: inline-flex; align-items: center; gap: var(--sf-2); margin-inline-start: auto; flex: none; }
.sf-band__word { font: 600 11px var(--sf-font-ui); text-transform: none; letter-spacing: 0; }
.sf-band[aria-expanded="true"] .sf-band__word--show, .sf-band[aria-expanded="false"] .sf-band__word--hide { display: none; }
/* Use <button class="sf-band" aria-expanded> + hidden rows; persist fold state per meet in localStorage. */

/* ── Draw: Back to start (SPEC §5) ────────────────────────────────────────────────────────────────────────────── */
/* The menu above the button: map glass, a little more opaque so the distances read over a busy map. */
.sf-retmenu { position: absolute; inset-inline-start: 0; inset-block-end: calc(100% + var(--sf-2)); z-index: 1300; inline-size: min(260px, 80vw); overflow: hidden;
  border-radius: var(--sf-r-md); background: color-mix(in srgb, var(--sf-paper) 90%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--sf-ink); box-shadow: 0 4px 16px rgb(16 20 24 / .18); font-family: var(--sf-font-ui); }
.sf-retmenu[hidden] { display: none; }
.sf-retmenu__row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; inline-size: 100%; min-block-size: 56px; padding: 6px 12px;
  border: 0; border-top: 1px solid rgb(16 20 24 / .08); background: none; color: inherit; text-align: start; font: inherit; cursor: pointer; }
.sf-retmenu__row:first-child { border-top: 0; }
.sf-retmenu__row:hover { background: rgb(16 20 24 / .06); }
.sf-retmenu__row:active { background: rgb(16 20 24 / .12); }
.sf-retmenu__row:focus-visible { outline: 3px solid var(--sf-accent); outline-offset: -3px; }
.sf-retmenu__row:disabled { color: var(--sf-ink-3); cursor: not-allowed; background: none; }
.sf-retmenu__row svg { inline-size: 22px; block-size: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--sf-accent); }
.sf-retmenu__row:disabled svg { color: var(--sf-ink-3); }
.sf-retmenu__text { display: grid; min-inline-size: 0; }
.sf-retmenu__text b { font: var(--sf-w-bold) 15px/1.25 var(--sf-font-ui); }
.sf-retmenu__text span { color: var(--sf-ink-2); font-size: var(--sf-text-xs); line-height: 1.3; }
.sf-retmenu__row:disabled .sf-retmenu__text span { color: var(--sf-ink-3); }
.sf-retmenu__value { font: var(--sf-w-bold) 16px/1 var(--sf-font-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sf-retmenu__row.is-busy .sf-retmenu__value { inline-size: 18px; block-size: 18px; border-radius: 50%; border: 2.5px solid var(--sf-accent); border-right-color: transparent; animation: sf-spin .8s linear infinite; font-size: 0; }
.sf-retmenu__row.is-error .sf-retmenu__text span { color: var(--sf-stop-ink); font-weight: var(--sf-w-semi); }

/* The ghost way back: a dotted accent line (L.polyline className "sf-ghost-line") and its distance chip. */
.sf-ghost-line { stroke-linecap: round; }
.sf-ghostchip { position: absolute; transform: translate(-50%, -50%); display: block; block-size: 30px; padding: 0 10px; border-radius: var(--sf-r-pill);
  background: color-mix(in srgb, var(--sf-accent) 90%, transparent); color: var(--sf-on-accent); font: var(--sf-w-bold) 14px/30px var(--sf-font-num); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* The one marker for a closed loop (divIcon): start and finish are the same spot. */
.sf-mk-loop { inline-size: 30px; block-size: 30px; box-sizing: border-box; display: grid; place-items: center; border-radius: 50%; background: var(--sf-go); border: 3px solid var(--sf-white);
  color: var(--sf-white); box-shadow: 0 1px 3px rgb(0 0 0 / .5); }
.sf-mk-loop svg { inline-size: 16px; block-size: 16px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* "Location off · ◎ to retry": the one quiet note when the phone gives no position (no modal, no nag). */
.sf-locpill { position: absolute; z-index: 1100; inset-block-start: var(--sf-2); inset-inline-start: var(--sf-2); display: inline-flex; align-items: center; gap: var(--sf-2);
  min-block-size: 40px; padding: 0 var(--sf-3); border: 0; border-radius: var(--sf-r-pill); background: rgb(17 20 24 / .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--sf-white); font: var(--sf-w-semi) var(--sf-text-sm)/1 var(--sf-font-ui); cursor: pointer; }
.sf-locpill[hidden] { display: none; }
.sf-locpill:hover { background: rgb(17 20 24 / .85); }
.sf-locpill:active { background: rgb(17 20 24 / .95); }
.sf-locpill:focus-visible { outline: 3px solid var(--sf-white); outline-offset: 2px; }
.sf-locpill:disabled { cursor: progress; }
.sf-locpill.is-busy::after { content: ""; inline-size: 14px; block-size: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: sf-spin .8s linear infinite; }

/* ── Live elevation in the draw / record bar (SPEC section 9) ─────────────────────────────────────────────────────
   .sf-profstrip: a 48px "Profile" fold (chevron, label, the climb when closed) and a 64px smooth profile. States: open, collapsed, loading (skeleton, never an
   endless spinner), ready, none (a line of words). .sf-climb: the "↑ 84 ft" beside the distance. */
.sf-profstrip { display: grid; gap: var(--sf-1); min-inline-size: 0; }
.sf-profstrip[hidden], .sf-profstrip__body[hidden] { display: none; }
.sf-profstrip__toggle { inline-size: 100%; min-block-size: var(--sf-tap); display: flex; align-items: center; gap: var(--sf-2); padding: 0; border: 0; border-radius: var(--sf-r-sm); background: transparent; color: var(--sf-ink-2); cursor: pointer; text-align: start; font: var(--sf-w-semi) var(--sf-text-sm)/1 var(--sf-font-ui); }
.sf-profstrip__toggle:hover { background: var(--sf-sunk); color: var(--sf-ink); }
.sf-profstrip__toggle:active { background: var(--sf-line-soft); }
.sf-profstrip__toggle:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 1px; }
.sf-profstrip__toggle:disabled { color: var(--sf-ink-3); cursor: not-allowed; }
.sf-profstrip__label { flex: none; color: var(--sf-ink-2); font-weight: var(--sf-w-semi); }
.sf-profstrip__climb { margin-inline-start: auto; color: var(--sf-ink-3); font: var(--sf-w-reg) var(--sf-text-sm)/1 var(--sf-font-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sf-profstrip__climb[hidden] { display: none; }
.sf-profstrip__climb.sf-skel { inline-size: 12ch; block-size: 1em; }
.sf-profstrip__body { position: relative; block-size: 64px; border-radius: var(--sf-r-sm); background: var(--sf-sunk); overflow: hidden; }
.sf-profstrip__svg { display: block; inline-size: 100%; block-size: 100%; }
.sf-profstrip__scales { position: absolute; inset: 0; pointer-events: none; }
.sf-profstrip__scale { position: absolute; inset-inline-start: var(--sf-2); transform: translateY(-50%); padding-inline: var(--sf-1); border-radius: var(--sf-r-sm); background: var(--sf-sunk); color: var(--sf-ink-2); font: var(--sf-w-semi) var(--sf-text-xs)/1.2 var(--sf-font-num); font-variant-numeric: tabular-nums; }
.sf-profstrip__rule { stroke: var(--sf-line-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sf-profstrip__body[data-state="loading"] .sf-profstrip__scales, .sf-profstrip__body[data-state="none"] .sf-profstrip__scales { display: none; }
.sf-profstrip__area { fill: var(--sf-accent); fill-opacity: 0.16; stroke: none; }
.sf-profstrip__line { fill: none; stroke: var(--sf-accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sf-profstrip__msg { position: absolute; inset: 0; display: grid; place-items: center; color: var(--sf-ink-3); font: var(--sf-w-semi) var(--sf-text-sm)/1.2 var(--sf-font-ui); text-align: center; pointer-events: none; }
.sf-profstrip__body[data-state="loading"] .sf-profstrip__svg { visibility: hidden; }
.sf-profstrip__body[data-state="loading"] { background: linear-gradient(90deg, var(--sf-sunk) 0 40%, var(--sf-line-soft) 50%, var(--sf-sunk) 60% 100%); background-size: 300% 100%; animation: sf-shimmer 1.2s linear infinite; }
.sf-profstrip__body[data-state="none"] .sf-profstrip__svg { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .sf-profstrip__body[data-state="loading"] { animation: none; } }
.sf-climb { font: var(--sf-w-bold) var(--sf-text-md)/1 var(--sf-font-num); font-variant-numeric: tabular-nums; color: var(--sf-ink-2); white-space: nowrap; }
.sf-climb.is-loading { display: inline-block; inline-size: 4ch; block-size: 1em; vertical-align: -0.1em; }

/* ── Draw, Follow paths: a tap waits as a ring (a dashed circleMarker) while its route is found (js/course/routeQueue.js) ──
   .sf-routechip: top-centre glass chip, a spinner and "Finding a path…" (PC adds "Esc to cancel"), then "+0.18 mi" for
   1.5 s. .sf-routefail: "No path found here" with Cancel tap and Draw straight. */
.sf-routechip { position: absolute; z-index: 1100; inset-block-start: var(--sf-3); inset-inline: 56px; margin-inline: auto; inline-size: max-content; max-inline-size: calc(100% - 112px);
  display: flex; align-items: center; gap: var(--sf-2); block-size: 40px; padding: 0 var(--sf-3); border-radius: var(--sf-r-pill); background: rgb(17 20 24 / .68);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--sf-white); font: var(--sf-w-semi) var(--sf-text-sm)/1 var(--sf-font-ui); pointer-events: none; opacity: 1; transition: opacity 250ms var(--sf-ease); }
.sf-routechip[hidden] { display: none; }
.sf-routechip.is-out { opacity: 0; }
.sf-routechip__spin { inline-size: 16px; block-size: 16px; flex: none; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: sf-spin .7s linear infinite; }
.sf-routechip__spin[hidden], .sf-routechip__hint[hidden] { display: none; }
.sf-routechip__text { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sf-routechip__hint { display: none; color: var(--sf-white); font-weight: var(--sf-w-reg); white-space: nowrap; }
@media (min-width: 1024px) { .sf-routechip__hint { display: inline; } .sf-routechip__hint[hidden] { display: none; } }
@media (prefers-reduced-motion: reduce) { .sf-routechip__spin { animation-duration: 2s; } .sf-routechip { transition: none; } }
.sf-routefail { position: absolute; z-index: 1100; inset-block-start: var(--sf-3); inset-inline: var(--sf-3); margin-inline: auto; max-inline-size: 360px; display: grid; gap: var(--sf-3); padding: var(--sf-3);
  border: 1px solid var(--sf-line); border-radius: var(--sf-r-md); background: var(--sf-paper); color: var(--sf-ink); box-shadow: var(--sf-shadow-2); }
.sf-routefail[hidden] { display: none; }
.sf-routefail__head { display: flex; align-items: center; gap: var(--sf-2); font: var(--sf-w-semi) var(--sf-text-md)/1.2 var(--sf-font-ui); }
.sf-routefail__head svg { inline-size: 20px; block-size: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--sf-warn-ink); }
.sf-routefail__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sf-2); }

/* ── Draw, Edit (handoff draw-and-courses 02) ───────────────────────────────────────────────────────────────────────
   .sf-editcard: the selected stretch (Straight line or Follow paths, Add point) or point (Delete point). Phone: at the bottom of
   the map. From 760px it is anchored beside the selection (js sets left / top, .is-anchored). .sf-edit-plus: the + handle at a
   stretch's middle. */
.sf-editcard { position: absolute; z-index: 1100; inset-inline: var(--sf-3); inset-block-end: var(--sf-3); display: grid; gap: var(--sf-3); padding: var(--sf-3);
  border: 1px solid var(--sf-line); border-radius: var(--sf-r-md); background: var(--sf-paper); color: var(--sf-ink); box-shadow: var(--sf-shadow-2); }
.sf-editcard[hidden] { display: none; }
.sf-editcard.is-anchored { inset-inline: auto; inset-block-end: auto; inline-size: 280px; max-inline-size: calc(100% - 2 * var(--sf-3)); }
.sf-editcard__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sf-2); min-inline-size: 0; }
.sf-editcard__head--point { align-items: center; }
.sf-editcard__head--point .sf-btn { flex: 1; min-inline-size: 0; }
.sf-editcard__title { display: grid; gap: var(--sf-1); min-inline-size: 0; font: var(--sf-w-bold) var(--sf-text-md)/1.2 var(--sf-font-ui); }
.sf-editcard__meta { color: var(--sf-ink-2); font: var(--sf-w-reg) var(--sf-text-sm)/1.2 var(--sf-font-ui); }
.sf-editcard__num { color: var(--sf-ink); font: var(--sf-w-bold) var(--sf-text-md)/1 var(--sf-font-num); font-variant-numeric: tabular-nums; }
.sf-editcard__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sf-2); }
.sf-editcard__close { flex: none; display: grid; place-items: center; inline-size: var(--sf-tap-min); block-size: var(--sf-tap-min); border: 0; border-radius: var(--sf-r-sm); background: none; color: var(--sf-ink-2); cursor: pointer; }
.sf-editcard__close svg { inline-size: 20px; block-size: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sf-editcard__close:hover { background: var(--sf-sunk); color: var(--sf-ink); }
.sf-editcard__close:active { background: var(--sf-line); }
.sf-editcard__close:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 1px; }
.sf-editcard .sf-btn svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sf-editcard__stop { border-color: var(--sf-stop); color: var(--sf-stop-ink); }
.sf-editcard__stop:hover { background: var(--sf-sunk); }
.sf-edit-plus { background: none; border: 0; }
.sf-edit-plus svg { display: block; inline-size: 24px; block-size: 24px; padding: var(--sf-1); box-sizing: border-box; border-radius: 50%; background: var(--sf-white);
  border: 1.5px solid var(--sf-line-strong); color: var(--sf-ink-2); fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* The shared elevation plot (js/map/elevationScale.js): a selected split tints its stretch (a rect per split, hidden until data-selected="true") */
.elev-band[data-selected="true"] { fill-opacity: 0.22; }