@import url("/viewer-controls.css?v=8fbdfc774367");
:root { --control-radius:16px; color-scheme: dark; font-family: "CoFoSans", sans-serif; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; background: #000; overscroll-behavior: none; }
.app { width: 100%; height: 100vh; height: 100dvh; overflow: hidden; }
#map { width: 100%; height: 100%; }
body { overflow: hidden; background: #000; color: #fff; }
.app { position: relative; }
#map { position: absolute; inset: 0; background: transparent; }
.app.country-view { background: #eee; }
.fog-background-canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .18s ease, visibility 0s linear .18s; }
.app.country-view .fog-background-canvas { opacity: 1; visibility: visible; transition: opacity .18s ease, visibility 0s; }
.map-controls { position:absolute; z-index:1000; inset:0; }
.map-controls { pointer-events: none; cursor: default; }
.map-controls > div { pointer-events: auto; }
.map-controls * { cursor: pointer; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
.map-controls button svg { pointer-events: none; }
.zoom-control button { display: block; width: 52px; height: 52px; padding: 0; border: 0; background: #000; color: #fff; font: inherit; font-size: 30px; line-height: 50px; cursor: pointer; transition: background-color .2s ease; }
.zoom-control button:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
.zoom-control button:disabled { color: rgba(255,255,255,.55); opacity: 1; cursor: default; }
.locate-control { position:absolute; top:calc(50% - 114px); left:22px; margin:0 !important; border:0; box-shadow:none; }
.map-controls > .zoom-control { position:absolute; top:calc(50% - 52px); left:22px; }
.locate-button { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: var(--control-radius); background: #000; color: #fff; cursor: pointer; transition: background-color .2s ease; }
.locate-button svg { width:26px; height:26px; }
.locate-button:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
.locate-button:disabled { cursor: pointer; opacity: .7; }
.locate-button.is-locating svg { animation: locate-pulse 1s ease-in-out infinite alternate; }
.stats-control { position:absolute; bottom:max(22px,env(safe-area-inset-bottom) + 22px); left:146px; margin:0 !important; border:0; box-shadow:none; }
.stats-button { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: var(--control-radius); background: #000; color: #fff; cursor: pointer; transition: background-color .2s ease; }
.stats-button:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
.zoom-control button:not(:disabled):active, .locate-button:not(:disabled):active, .stats-button:active,
.zoom-control button:not(:disabled).is-pressed, .locate-button:not(:disabled).is-pressed, .stats-button.is-pressed { background: var(--fog-red); color: #fff; }
@media (hover: hover) {
  .zoom-control button:not(:disabled):hover, .locate-button:not(:disabled):hover, .stats-button:hover { background: var(--fog-red); color: #fff; }
}
.zoom-control, .locate-control { opacity: 1; visibility: visible; transition: opacity .18s ease, visibility 0s; }
.app.stats-open .map-controls { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s ease, visibility 0s linear .18s; }
@keyframes locate-pulse { to { opacity: .35; } }
.location-dot { z-index: 3; pointer-events: none; left: 0; top: 0; width: 36px; height: 46.8421px; position: absolute; border: 0; background: transparent; }
.location-duck { display: block; width: 100%; height: 100%; pointer-events: none; user-select: none; overflow: visible; }
.location-status { position: absolute; z-index: 1000; top: 0; left: calc(100% + 10px); width: max-content; max-width: min(240px, calc(100vw - 100px)); padding: 10px 12px; border-radius: 10px; background: #000; color: #fff; font-size: 13px; line-height: 1.35; }
.stats-panel { position: absolute; z-index: 900; inset: 0; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; padding: 12px 20px; }
.fade-overlay { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s ease, visibility 0s linear .18s; }
.fade-overlay.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .18s ease, visibility 0s; }
.fade-overlay[hidden] { display: none; }
.stats-list { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; gap: 24px; width: max-content; max-width: 100%; margin: auto; }
.stat-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5.4px; width: max-content; max-width: 100%; padding: 26.4px 43.2px; border-radius: 28px; background: #fff; color: #000; text-align: center; }
.stat-card::selection, .stat-card *::selection { background: #000; color: #fff; }
.stat-value svg { display: block; max-width: 100%; overflow: visible; }
.stat-value { color: var(--fog-green); font-variant-numeric: tabular-nums; font-size: 64px; line-height: 1; font-weight: 700; letter-spacing: -.055em; white-space: nowrap; }
.stat-label { font-size: 21px; line-height: 1.3; color: inherit; white-space: nowrap; }
.stat-copy { display: flex; flex-direction: column; }
.stat-detail { font-size: 21px; line-height: 1.3; white-space: nowrap; }
.country-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
.country-tag { padding: 7px 12px; border: 0; border-radius: var(--control-radius); background: #000; color: #fff; font: inherit; font-size: 16px; line-height: 1.2; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .2s ease, color .2s ease; }
.country-tag:active, .country-tag.is-pressed { background: var(--fog-red); color: #fff; }
.country-tag:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
@media (hover: hover) { .country-tag:hover { background: var(--fog-red); color: #fff; } }
.error { position: absolute; z-index: 2000; left: 50%; bottom: 35px; transform: translateX(-50%); padding: 12px 16px; max-width: min(90vw, 440px); border-radius: 10px; background: var(--fog-red); color: #fff; font-size: 14px; text-align: center; }
@media (max-width: 700px) {
  .location-status { max-width: min(240px, calc(100vw - 84px)); }
  .stats-panel { padding: 12px; }
  .stat-card { padding: 21.6px 28.8px; }
  .stat-value { font-size: clamp(53px, 13.8vw, 64px); }
  .stat-label, .stat-detail { font-size: clamp(18px, 4.6vw, 21px); }
}

#fog-layer { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.maplibregl-map { font-family: inherit; touch-action: none; }
.maplibregl-canvas-container { position: absolute; inset: 0; }
.maplibregl-control-container { position: absolute; z-index: 4; inset: 0; pointer-events: none; }
.maplibregl-control-container .maplibregl-ctrl { pointer-events: auto; }
.maplibregl-ctrl-bottom-right { display: flex; flex-direction: column; align-items: flex-end; padding-bottom: 14px; }
.maplibregl-ctrl-bottom-right .maplibregl-ctrl { float: none; clear: none; }
.maplibregl-ctrl-bottom-right .maplibregl-ctrl:has(.maplibregl-ctrl-logo) { order: 0; margin: 0 5px 2px 0; }
.maplibregl-ctrl-logo { opacity: .25; transform: translate(2px, -2px) scale(.9); transform-origin: right bottom; }
.maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib { order: 1; margin: 0; padding: 0 3px; background: transparent !important; }
.maplibregl-ctrl-attrib, .maplibregl-ctrl-attrib a { color: rgba(204, 204, 204, .4); }
.maplibregl-ctrl-attrib a:hover { color: rgba(204, 204, 204, .4); }
.app.country-view .maplibregl-control-container { visibility: hidden; }
.map-controls button { -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.location-dot[hidden] { display: none; }

/* Keep the gesture surface active while hiding the basemap at distant scales. */
.app.country-view .maplibregl-canvas { opacity: 0; }

.map-credits { position: absolute; z-index: 4; right: 5px; bottom: 0; max-width: calc(100% - 6px); color:rgba(255,255,255,.4); background:transparent; margin:0; padding:0; font-size:11px; font-weight: 400; line-height: 14px; text-align: right; }
.map-credits a, .map-credits a:hover { color: inherit; font: inherit; text-decoration: none; }


.statistics-control { position:absolute; bottom:max(22px,env(safe-area-inset-bottom) + 22px); left:22px; margin:0 !important; }
.tracks-control { position:absolute; bottom:max(22px,env(safe-area-inset-bottom) + 22px); left:84px; margin:0 !important; }
.map-controls a.stats-button { text-decoration: none; touch-action: manipulation; }
.map-controls a svg { pointer-events: none; }
#stats-close-button { z-index:1100; }
#stats-close-button[hidden] { display:none; }
.stats-panel { padding-top:84px; padding-bottom:22px; }

/* Shared foundations; the map keeps its application-sized controls. */
:root { --text-color:#fff; --background-color:#000; }
button, input, select, textarea { font-family:inherit; }
.app section * { margin-top:0; margin-bottom:0; }
svg { color:inherit; }

/* Tracks uses the document scroller and the portfolio's grid/media/caption styles. */
html.tracks-document { height:auto; background:#fff; overscroll-behavior:auto; color-scheme:light; }
.tracks-page { height:auto; min-height:100dvh; overflow:visible; overscroll-behavior:auto; background:#fff; color:#000; --text-color:#000; --background-color:#fff; }
.tracks-header { padding:var(--margin-text) var(--margin-grid) 0; }
.tracks-content { display:block; padding-bottom:calc(52px + max(22px,env(safe-area-inset-bottom) + 22px) + 22px); }
.tracks-content article { margin:0; }
.track-grid { margin-top:var(--margin-text); margin-bottom:var(--margin-grid); }
.track-card { color:inherit; }
/* The authored aspect ratio reserves the box while offscreen descendants can skip work. */
.track-preview { content-visibility:auto; }
.track-copy { padding:0; }
.track-activity { display:flex; align-items:flex-start; gap:8px; }
.track-activity > :is(span,a) { min-width:0; margin:0; }
.activity-icon { width:24px; height:24px; flex-shrink:0; }
.track-date { color:#000; font-size:var(--small-font-size); line-height:var(--small-line-height); margin-top:var(--margin-grid-half); }
.track-date time { color:inherit; }
.grid > .track-card > .container { height:auto; aspect-ratio:3 / 4; }
/* Styling overlays never changes the privately cached basemap pixels. */
.track-preview { position:relative; --preview-route-color:var(--fog-orange); --preview-route-width:11.2px; --preview-halo-color:#fff; --preview-halo-width:14.2px; --preview-dimming-color:#000; --preview-dimming-opacity:.05; }
.layered-preview .image > picture { position:relative; display:block; isolation:isolate; }
.layered-preview .preview-dimming, .layered-preview .preview-route { position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; pointer-events:none; }
.layered-preview .preview-dimming { z-index:1; background:var(--preview-dimming-color); opacity:var(--preview-dimming-opacity); }
.layered-preview .preview-route { z-index:2; overflow:hidden; }
.preview-route path { fill:none; stroke-linecap:round; stroke-linejoin:round; }
.preview-route-halo { stroke:var(--preview-halo-color); stroke-width:var(--preview-halo-width); }
.preview-route-line { stroke:var(--preview-route-color); stroke-width:var(--preview-route-width); }
.layered-preview::after { display:none; }
.layered-preview .track-overlay { z-index:3; }
.track-card .track-preview::after { content:""; position:absolute; inset:0; background:rgba(0,0,0,.05); pointer-events:none; }
.track-overlay { position:absolute; z-index:1; top:9px; left:9px; display:flex; align-items:center; gap:4px; }
.track-overlay > * { margin:0; }
.track-activity-badge { display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:var(--fog-green); color:#fff; flex-shrink:0; }
.track-blocks { padding:5px 8px; border-radius:7px; background:var(--fog-orange); color:#fff; font-size:var(--small-font-size); line-height:var(--small-line-height); white-space:nowrap; }
.tracks-status { text-align:center; color:#777; }
.tracks-status:empty { display:none; }
.preview-placeholder { position:absolute; inset:0; display:grid; place-items:center; padding:20px; text-align:center; color:#777; background:transparent; }
.preview-retry { font:inherit; color:inherit; background:none; border:0; padding:0; text-decoration:underline; cursor:pointer; }
.track-card[hidden], .tracks-header[hidden], .tracks-content[hidden], .track-detail[hidden], .tracks-toolbar[hidden], .tracks-navigation[hidden] { display:none !important; }

/* One floating control row, anchored by the back button. */
.tracks-navigation { position:fixed; z-index:1100; display:flex; align-items:center; gap:10px; left:22px; bottom:max(22px,env(safe-area-inset-bottom) + 22px); max-width:calc(100vw - 44px); }
.tracks-navigation .tracks-back { position:static; flex-shrink:0; }
.tracks-toolbar { display:flex; align-items:center; gap:10px; min-width:0; }
.tracks-filter-tab { flex:0 0 auto; min-height:52px; padding:0 18px; border:0;  background:#000; color:#fff; font:inherit; font-size:17px; cursor:pointer; white-space:nowrap; -webkit-tap-highlight-color:transparent; }
.tracks-filter-tab[aria-selected="true"], .disabled-tracks[aria-pressed="true"] { color:var(--fog-green); }
.tracks-filter-tab[aria-selected="true"] { cursor:default; }
.disabled-tracks { flex-shrink:0; }
.tracks-filter-tab:focus-visible, .track-card:focus-visible { outline:2px solid var(--fog-green); outline-offset:-3px; }
@media(hover:hover) { .tracks-filter-tab[aria-selected="false"]:hover { background:var(--fog-red); } }
.tracks-filter-tab:active, .tracks-filter-tab.is-pressed { background:var(--fog-red); }
.tracks-back { position:fixed; z-index:1100; bottom:max(22px,env(safe-area-inset-bottom) + 22px); left:22px; text-decoration:none; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.tracks-back svg { pointer-events:none; }
html.track-detail-document, .tracks-page.track-detail-open { overflow:hidden; }
.track-detail { position:fixed; z-index:1000; inset:0; margin:0; padding:0; overflow:hidden; background:#ccc; }
.activity-map, .activity-fog, .activity-background, .activity-route-overlay { position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; }
.activity-background { z-index:0; pointer-events:none; }
.activity-map { z-index:auto; }
.activity-fog { z-index:2; pointer-events:none; }
.activity-route-overlay { z-index:3; pointer-events:none; }
.track-detail.country-view .maplibregl-canvas { opacity:0; }
.activity-info { position:absolute; z-index:4; top:22px; left:22px; max-width:calc(100% - 44px); display:flex; flex-direction:column; align-items:flex-start; gap:10px; margin:0; padding:0; }
.activity-info > .track-overlay { position:static; margin:0; }
.activity-summary { margin:0; width:fit-content; max-width:100%; background:transparent; color:#000; padding:0; }
.activity-summary > .track-copy { margin:0; }
.activity-summary .track-copy > p { margin-left:0; }
.activity-summary .track-activity { margin-top:0; }
.activity-text-highlight { background:#fff; color:#000; font:inherit; padding:2px 4px; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.activity-status { position:absolute; z-index:4; top:50%; left:50%; transform:translate(-50%,-50%); padding:12px 16px; border-radius:13px; background:#fff; color:#000; }
.activity-status:empty { display:none; }
.activity-pager { position:fixed; z-index:1100; left:50%; transform:translateX(-50%); bottom:max(22px,env(safe-area-inset-bottom) + 22px); }
.activity-pager[hidden] { display:none; }
.activity-pager button { margin:0; flex-shrink:0; }
.activity-pager button:disabled { opacity:1; background:#000; color:rgba(255,255,255,.55); cursor:default; pointer-events:none; }
.activity-map-controls { position:absolute; z-index:5; left:22px; top:calc(50% - 114px); display:flex; flex-direction:column; gap:10px; margin:0; padding:0; }
.activity-map-controls > * { margin:0; }
.activity-start, .activity-start > * { margin:0; padding:0; }
.activity-focus svg { pointer-events:none; }
.activity-focus:disabled { background:#000; color:rgba(255,255,255,.55); cursor:default; }
.activity-zoom button { margin:0; }
.activity-visibility { position:absolute; z-index:5; right:22px; bottom:max(22px,env(safe-area-inset-bottom) + 22px); margin:0; }
.activity-visibility[hidden] { display:none; }
.activity-visibility:disabled { background:#000; color:rgba(255,255,255,.55); cursor:default; }
.activity-edit-status { margin:0; padding:10px 12px; background:#fff; color:#000; }
.activity-edit-status:empty { display:none; }
.track-detail .maplibregl-control-container { z-index:4; }

@media(max-width:800px) {
  .activity-pager { bottom:max(13px,env(safe-area-inset-bottom) + 13px); }
  .tracks-back { bottom:max(13px,env(safe-area-inset-bottom) + 13px); left:11px; }
  .tracks-navigation { left:11px; bottom:max(13px,env(safe-area-inset-bottom) + 13px); max-width:calc(100vw - 22px); }
  .tracks-content { padding-bottom:calc(52px + max(13px,env(safe-area-inset-bottom) + 13px) + 13px); }
  .tracks-filter-tab { padding:0 14px; font-size:16px; }
  .activity-icon { width:24px; height:24px; }
  .activity-info { top:11px; left:11px; max-width:calc(100% - 22px); }
  .activity-map-controls { left:11px; }
  .map-controls > .zoom-control, .map-controls > .locate-control, .map-controls > .statistics-control { left:11px; }
  .map-controls > .tracks-control { left:73px; }
  .map-controls > .stats-control { left:135px; }
  .map-controls > .stats-control, .map-controls > .tracks-control, .map-controls > .statistics-control { bottom:max(13px,env(safe-area-inset-bottom) + 13px); }
  .activity-visibility { right:11px; bottom:max(13px,env(safe-area-inset-bottom) + 13px); }
}

.track-detail .map-credits { right:0; font-size:10px; line-height:12px; }

/* Use the application pressed color instead of the browser tap flash. */
button, a.stats-button { -webkit-tap-highlight-color:transparent; -webkit-user-select:none; user-select:none; touch-action:manipulation; }


/* Catalog captions are usable while their individual preview images load. */
.track-preview:is([data-preview-state="idle"], [data-preview-state="loading"]),
.track-preview[data-preview-state="ready"]:not([data-preview-presented]) { visibility:hidden; }
.track-card { transition:opacity .18s ease; }
@media (prefers-reduced-motion:reduce) { .track-card { transition:none; } }
.country-border-canvas { position:absolute; z-index:3; inset:0; width:100%; height:100%; pointer-events:none; }

.activity-fit-download { position:absolute; z-index:5; right:22px; bottom:calc(max(22px,env(safe-area-inset-bottom) + 22px) + 62px); margin:0; }
.activity-fit-download:disabled { background:#000; color:rgba(255,255,255,.55); opacity:1; cursor:default; }
@media(max-width:800px) { .activity-fit-download { right:11px; bottom:calc(max(13px,env(safe-area-inset-bottom) + 13px) + 62px); } }

.preview-reload { position:relative; z-index:4; border-radius:50%; }

/* Back remains usable while data/style/control initialization is incomplete. */
.map-controls:not(.is-ready) > div:not(.statistics-control) { visibility:hidden; pointer-events:none; }

/* Icon filters use the same SVG source as Statistics Activities. */
.tracks-filter-icon { display:flex; align-items:center; justify-content:center; width:52px; padding:0; }
.tracks-filter-icon svg { width:24px; height:24px; fill:currentColor; }

/* Common Garmin types use the shared Statistics registry. Unknown types remain text. */
.track-activity-badge[data-activity-icon="walking"] { background:var(--fog-green); }
.track-activity-badge[data-activity-icon="swimming"], .track-activity-badge[data-activity-icon="open_water"] { background:var(--fog-blue); }
.track-activity-badge[data-activity-icon="strength"] { background:var(--fog-orange); }
.track-activity-badge[data-activity-icon="mobility"] { background:var(--fog-purple); }
.track-activity-badge[data-activity-icon="multisport"], .track-activity-badge[data-activity-icon="other"] { background:var(--fog-red); }
.activity-fit-choices { position:absolute;z-index:6;right:22px;bottom:calc(max(22px,env(safe-area-inset-bottom) + 22px) + 120px);padding:8px;background:#000;border-radius:16px;color:#fff; }
.activity-fit-choices[hidden] { display:none; }
.activity-fit-choices button { display:block;background:none;color:inherit;border:0;padding:10px;cursor:pointer;font:inherit; }
.activity-fit-choices button:hover { color:var(--fog-red); }
@media(max-width:800px) { .activity-fit-choices { right:11px;bottom:calc(max(13px,env(safe-area-inset-bottom) + 13px) + 120px); } }

.activity-summary .track-activity > a { color:inherit; text-decoration:none; }
.activity-summary .track-activity > a:hover mark { color:var(--hover-color); }