/* ═══════════════════════════════════════════════════════════ CAC SPORT — course map view ═══════════════════════════════════════════════════════════ */ /* Two columns and two rows: the course list on the left running the full height of both, the map above and its elevation profile directly under it on the right. The profile belongs in that column and nowhere else. Hovering it walks a marker along the road on the map above — with the profile below the fold, the marker it moves was always the one thing scrolled off the top. The whole block ends where the window does, and the map row takes whatever the profile leaves. --map-top is how far down the page the block starts, measured by syncMapHeight() rather than hard-coded: this was a flat 200 px and the real header is nearer 118, so the profile hung 80 px below the fold on every screen — the exact thing the layout exists to prevent. The header also wraps at some widths and loses a subtitle in one language, so there is no constant to be right about. Below `minmax`'s floor the block outgrows the window and the page scrolls, which is honest, rather than squeezing the map into a letterbox. */ .map-layout{display:grid;grid-template-columns:300px 1fr;grid-template-rows:minmax(280px,1fr) auto; gap:14px;height:calc(100vh - var(--map-top,200px) - 18px);min-height:560px} @supports (height:100dvh){ .map-layout{height:calc(100dvh - var(--map-top,200px) - 18px)} } /* THE PLANNER IS THE MAP, so it takes the whole pane. Its own height rather than the --map-top arithmetic above: that measures how far down the page the block starts, and syncMapHeight() only ever measures the course map's copy — the planner was left on the 200px fallback and so ran short of the fold whatever was above it. With no heading left there is nothing to measure around. Doubled class because the @supports block below restates .map-layout and would otherwise win. */ /* THE PLANNER'S MARKUP ENDS AT ITS LAYOUT — nothing follows it — so it can take the pane whole and stop the pane scrolling. */ body.planner-view #content{padding:10px 12px 12px;overflow:hidden} body.planner-view #v-planner{height:100%} .map-layout.pl-layout{height:100%;min-height:0} /* THE COURSE MAP CANNOT, AND THIS IS WHY THE VIDEO WENT MISSING. That view holds the layout AND the recce video card after it. Giving it 100% of a pane with overflow:hidden made the map exactly one screen and put the video below the cut with no way to scroll to it — a section deleted by a stylesheet. So this screen takes back only its padding. The map's height stays the --map-top arithmetic on .map-layout, which measures how far down the page the block starts and is kept fresh by syncMapHeight() — and with the heading gone that measurement is simply smaller, which IS the taller map that was wanted. The video scrolls up underneath it, as it always did. */ body.mapfull-view #content{padding:10px 12px 24px} .map-layout > .map-panel{grid-column:1;grid-row:1 / -1} .map-layout > .map-shell{grid-column:2;grid-row:1} .map-layout > .elev-card{grid-column:2;grid-row:2;margin-top:0} /* ── TRACK PANEL ───────────────────────────────────────────── */ /* ONE SCROLL SURFACE, NOT THREE. The panel used to hide its overflow and hand each list its own scrollbar, so the courses took the room and the waypoints underneath were squeezed into a two-line window — forty-six of them behind a 30 px slot. The panel scrolls as a whole now and every list sizes to its content. */ .map-panel{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius); display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;box-shadow:var(--shadow)} .mp-hd{padding:14px 16px;border-bottom:1px solid var(--border); display:flex;align-items:center;justify-content:space-between;gap:10px; position:sticky;top:0;z-index:2;background:var(--bg2)} body.light .mp-hd{background:#fff} /* the sub-headings ride along under the first one */ .mp-hd-sub{position:sticky;top:0;z-index:1} .mp-hd h3{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--text)} /* THE FOLD IS ON EVERY SCREEN. A list folded on a phone stays folded (remembered per browser), and a fold whose button only a phone could see left a desktop with a heading, a count and no courses. */ .mp-fold{display:inline-flex;align-items:center;flex-shrink:0;min-height:30px;padding:0 11px;border-radius:8px; border:1px solid var(--border2);background:var(--bg3);color:var(--text2); font-family:inherit;font-size:11px;font-weight:800;text-transform:uppercase; letter-spacing:.05em;cursor:pointer} .mp-fold:hover{color:var(--text);border-color:var(--gold2)} .map-panel.tracks-off .mp-tracks{display:none} /* The import stays when the list folds: adding a course is not the same question as seeing the ones already there. */ .mp-list{flex:0 0 auto;overflow:visible;padding:8px} /* The course list sizes to its own content so every imported track is visible at a glance; the waypoint list underneath takes whatever is left and is the one that scrolls. */ .mp-tracks{flex:0 1 auto} .mp-hd-sub{border-top:1px solid var(--border)} /* The panel's two verbs, under each other at the top — see renderMap(). Full width like the import card above it, so the pair reads as one block rather than a button loose beside a list. */ .mp-foot{padding:10px 12px;border-top:1px solid var(--border);background:var(--bg2)} body.light .mp-foot{background:#fff} .mp-foot .btn{width:100%;justify-content:center} /* THE SAME CARD AS #app-busy. A dashed box says "drop here", which is true on a desktop and meaningless on a phone; a solid card with the mark in a ring says "this is where a course comes in" on both, and it is the shape the overlay wears while the terrain model is being read. The ring stays put — it only turns once there is work to show. */ .drop-zone{display:flex;align-items:center;gap:14px;margin:10px;padding:14px 16px; border:1px solid var(--border2);border-radius:16px;background:var(--bg2);color:var(--text2); text-align:left;cursor:pointer;box-shadow:var(--shadow-md); transition:border-color .18s,background .18s,color .18s} body.light .drop-zone{background:#fff} .drop-zone:hover,.drop-zone.drag{border-color:var(--gold);background:var(--gold-bg);color:var(--gold2)} body.light .drop-zone:hover,body.light .drop-zone.drag{color:var(--gold)} .dz-mark{width:38px;height:38px;flex:none;display:flex;align-items:center;justify-content:center; border-radius:50%;color:var(--primary,#f59e0b); border:2px solid color-mix(in srgb,var(--primary,#f59e0b) 30%,transparent)} .drop-zone:hover .dz-mark,.drop-zone.drag .dz-mark{color:inherit;border-color:currentColor} .drop-zone svg{width:20px;height:20px;margin:0} .dz-body{min-width:0} .drop-zone .dz-title{display:block;font-size:13px;font-weight:700;color:var(--text);margin-bottom:2px} .drop-zone .dz-hint{display:block;font-size:11px;line-height:1.4} .trk{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;border-radius:9px;cursor:pointer; transition:background .16s;margin-bottom:2px;border:1px solid transparent} .trk:hover{background:var(--bg3)} .trk.active{background:var(--gold-bg);border-color:var(--gold-border)} .trk-sw{width:5px;align-self:stretch;min-height:34px;border-radius:3px;background:var(--tc,#f59e0b);flex-shrink:0} .trk-body{flex:1;min-width:0;position:relative} /* The card's own two, in the card's own corner — see the note in trackListHtml(). The name keeps clear of them rather than wrapping under them, which is what a long course name would otherwise do. */ .trk-corner{position:absolute;top:0;right:0;display:flex;gap:6px} .trk-name{font-size:13px;font-weight:700;color:var(--text);line-height:1.35;word-break:break-word; padding-right:72px} .trk-corner:empty + .trk-name{padding-right:0} .trk-meta{font-size:11px;color:var(--text2);margin-top:2px;font-variant-numeric:tabular-nums} .trk-cats{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px} .trk-actions{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:8px} .trk-vis{width:30px;height:30px;border-radius:7px;border:1px solid var(--border);background:var(--bg3); display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text2);flex-shrink:0} .trk-vis:hover{border-color:var(--border2);color:var(--text)} .trk-vis svg{width:14px;height:14px} .trk.hidden-track .trk-body{opacity:.42} /* ── ADD WAYPOINT ACTIVE MODE & POI LIST ───────────────────── */ .btn.adding-mode { background: var(--gold) !important; color: #0b1120 !important; border-color: var(--gold2) !important; animation: pulse-border 1.8s infinite; box-shadow: 0 0 12px rgba(245,158,11,0.5) !important; } /* ── PULSING MAP MARKERS ─────────────────────────────────────── Never animate `transform` on a Mapbox marker element. Mapbox positions its markers by writing `transform: translate(...)` inline on that same element, and a running animation on transform beats an inline style — so the marker sits at the canvas origin and pulses away in the top-left corner of the map, wherever it was actually told to go. That is what both of these did while they borrowed the badge animations, which scale. The glow here is a box-shadow and nothing else. */ @keyframes marker-pulse{ 0% {box-shadow:0 0 0 0 var(--mk),0 0 14px var(--mk)} 70% {box-shadow:0 0 0 11px rgba(0,0,0,0),0 0 14px var(--mk)} 100%{box-shadow:0 0 0 0 rgba(0,0,0,0),0 0 14px var(--mk)} } .map-dot{border-radius:50%;border:3px solid #fff;cursor:pointer; animation:marker-pulse 1.5s infinite} .map-dot.scrub{width:18px;height:18px;background:var(--gold,#f59e0b);--mk:rgba(245,158,11,.8)} .map-dot.peloton{width:22px;height:22px;background:#f43f5e;--mk:rgba(244,63,94,.8)} @keyframes pulse-border { 0% { box-shadow: 0 0 0 0 rgba(245,158,11,0.7); } 70% { box-shadow: 0 0 0 8px rgba(245,158,11,0); } 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); } } .poi-item { transition: background .16s, border-color .16s; } .poi-item:hover { background: var(--bg3); } /* ── PICKING WAYPOINTS OFF THE LIST ──────────────────────────── The tick and the bar it reports to. Deliberately quiet: the row is read far more often than it is picked, so the box sits at the same weight as the icon beside it and the delete button is absent until something is ticked. */ .poi-pick{flex-shrink:0;width:14px;height:14px;margin:0 2px 0 0;accent-color:var(--gold2);cursor:pointer} .poi-selbar{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap; padding:4px 6px 6px;margin-bottom:2px;border-bottom:1px dashed var(--border)} .poi-selall{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700; letter-spacing:.03em;text-transform:uppercase;color:var(--text3);cursor:pointer;min-width:0} .poi-selall input{width:14px;height:14px;margin:0;accent-color:var(--gold2);cursor:pointer} .poi-seldel{font-size:11px;padding:3px 9px} .poi-seldel[hidden]{display:none} .poi-seldel b{font-variant-numeric:tabular-nums} /* ── MAP CANVAS ────────────────────────────────────────────── */ .map-shell{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border); background:var(--bg3);box-shadow:var(--shadow);width:100%;height:100%; /* No floor of its own: the grid row it sits in carries the minimum, and a 500 px floor here pushed the row past the viewport once the profile was stacked under it. The stacked phone layout sets its own height. */ min-height:0} #cacMap{position:absolute;inset:0;width:100%;height:100%} .map-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center; justify-content:center;gap:10px;color:var(--text2);font-size:14px;text-align:center;padding:24px} .map-fallback svg{width:34px;height:34px;color:var(--text3)} .map-tools{position:absolute;top:12px;right:12px;z-index:6;display:flex;gap:8px; align-items:center;justify-content:flex-end;flex-wrap:wrap;max-width:calc(100% - 24px)} .style-tabs{display:flex;background:rgba(8,12,24,.86);backdrop-filter:blur(10px); border:1px solid rgba(148,163,184,.28);border-radius:9px;padding:3px;gap:2px} .style-tab{min-height:36px;padding:0 11px;border-radius:7px;border:none;background:none;cursor:pointer; font-family:inherit;font-size:11px;font-weight:700;color:rgba(232,238,252,.65);transition:all .16s} .style-tab.active{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#0b1120} .style-tab:hover:not(.active){background:rgba(255,255,255,.1);color:#fff} /* ── THE MAP TOOLBAR AND ITS MENUS ───────────────────────────── Five square icon buttons, each opening its own small menu: settings, basemap, overlapping courses, wind, weather. Square and unlabelled because this row is on top of the map — the labelled version was most of the width of the road on a phone, and one button hiding all five decisions put three unrelated things on screen at once. The name lives on the title and the aria-label. */ .map-tool-btn{display:inline-flex;align-items:center;justify-content:center; width:36px;height:36px;flex-shrink:0; border-radius:9px;border:1px solid rgba(148,163,184,.28);background:rgba(8,12,24,.86); backdrop-filter:blur(10px);color:rgba(232,238,252,.9);cursor:pointer; transition:background .16s,color .16s,border-color .16s} .map-tool-btn svg{width:16px;height:16px} .map-tool-btn:hover{background:rgba(20,28,48,.94);color:#fff} .map-tool-btn.open{background:linear-gradient(135deg,var(--gold),var(--gold2)); color:#0b1120;border-color:var(--gold2)} /* ONE DRESS FOR EVERY FLOATING CONTROL ON EVERY MAP. Mapbox's own stack answers the theme — navy in the dark one, white in the light one, see the .mapboxgl-ctrl-group rules further down — while this row stayed dark in both. On a light screen that put two different sets of buttons a finger apart on the same canvas. The class is shared, so this is the course map, the route planner, the medical map, the dashboard's mini-map and the race card all at once. Excludes `.open` and `.is-on`, because those two states are the accent and this rule would otherwise outrank them on specificity and paint the button of an open menu white like all the rest. */ body.light .map-tool-btn:not(.open):not(.is-on){background:rgba(255,255,255,.96); border-color:rgba(15,23,42,.14);color:#0f172a; box-shadow:0 1px 4px rgba(15,23,42,.16)} body.light .map-tool-btn:not(.open):not(.is-on):hover{background:#fff; border-color:rgba(15,23,42,.3);color:#0b1120} /* `right` is set inline when a menu opens, so it hangs under its own button instead of always under the end of the row. */ .map-pop{position:absolute;top:56px;right:12px;z-index:7;width:236px; max-width:calc(100vw - 24px); background:rgba(8,12,24,.94);backdrop-filter:blur(14px);border:1px solid rgba(148,163,184,.28); border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:12px; box-shadow:0 12px 30px rgba(0,0,0,.45)} .map-pop[hidden]{display:none} .mo-group{display:flex;flex-direction:column;gap:6px} .mo-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em; color:rgba(232,238,252,.55)} /* ── THE BASEMAPS, ONE UNDER THE OTHER ────────────────────── Seven basemaps wrapped across a 236 px menu came out as two and a half ragged rows of half-words. A menu is a list: one row each, full width, the chosen one marked — which is also what makes it usable with a thumb on a phone. */ .map-pop .style-tabs{flex-direction:column;flex-wrap:nowrap;gap:2px; background:rgba(148,163,184,.12);border-color:rgba(148,163,184,.2)} .map-pop .style-tabs .style-tab{width:100%;text-align:left;padding:7px 10px; border-radius:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .map-pop .style-tab{flex:1 1 auto;min-height:32px;padding:0 9px} .map-pop .mo-btn{width:100%;justify-content:flex-start;gap:7px;height:34px; font-size:11px;padding:0 10px;border-radius:8px;cursor:pointer} .mo-hint{font-size:10.5px;line-height:1.45;color:rgba(232,238,252,.5);margin:0} .map-pop .mo-warn{color:#fbbf24} /* A toggle that is on says so by filling, not by a colour typed into a style attribute in the handler — which is how the old pair of weather buttons did it, and why they forgot their state whenever the markup was rebuilt. */ .map-pop .mo-toggle{background:rgba(148,163,184,.12);border:1px solid rgba(148,163,184,.24); color:rgba(232,238,252,.82)} .map-pop .mo-toggle svg{width:14px;height:14px;flex-shrink:0} .map-pop .mo-toggle:hover{background:rgba(148,163,184,.2);color:#fff} .map-pop .mo-toggle.on{background:linear-gradient(135deg,var(--gold),var(--gold2)); color:#0b1120;border-color:var(--gold2)} /* Bottom centre by default. The bottom-left corner belongs to Mapbox's scale bar and the bottom-right to the attribution, so the legend sat on top of one or the other wherever it was cornered. */ .map-legend{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);z-index:5; background:rgba(8,12,24,.86);backdrop-filter:blur(10px);border:1px solid rgba(148,163,184,.28); border-radius:10px;padding:6px 10px;font-size:11px;color:rgba(232,238,252,.85); max-width:min(260px,calc(100% - 100px))} .map-legend .ml-title{display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;list-style:none; font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;opacity:.75; padding:2px 0;white-space:nowrap} .map-legend .ml-title::-webkit-details-marker{display:none} .map-legend .ml-title svg{width:13px;height:13px;flex-shrink:0} .map-legend .ml-title::after{content:'▾';font-size:9px;opacity:.7;margin-left:2px;transition:transform .16s} .map-legend[open] .ml-title::after{transform:rotate(180deg)} .map-legend .ml-body{margin-top:6px;padding-bottom:2px;max-height:34vh;overflow-y:auto} .map-legend .ml-row{display:flex;align-items:center;gap:8px;margin-top:4px} .map-legend .ml-row:first-child{margin-top:0} .map-legend .ml-sw{width:16px;height:3px;border-radius:2px;flex-shrink:0} .map-legend .ml-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ── DASHBOARD MINI-MAP ────────────────────────────────────── */ .mini-map-shell{position:relative;min-height:580px;border-radius:10px;overflow:hidden; border:1px solid var(--border);background:var(--bg3)} .mini-map-shell #dashMap{position:absolute;inset:0} .mini-map-shell .map-legend{bottom:10px;max-width:min(260px,calc(100% - 100px))} /* Desktop: out of the bottom of the map and into the free top-left corner. Centred along the bottom edge it sat over the course itself — which on this map is usually the finish, the part being looked at. The corner is free here because this map's zoom and fullscreen controls are top-right; the course map's are top-left, so that one keeps the legend at the bottom. */ @media (min-width:641px){ .mini-map-shell .map-legend{top:10px;left:10px;bottom:auto;transform:none} } @media (max-width:1100px){ .mini-map-shell{min-height:480px} } /* On a phone this was a 300 px letterbox — a course drawn inside it was a squiggle rather than a route. Tied to the viewport so it fills a real part of the screen on a tall phone without swallowing a short one, and capped so it never runs past the card it sits in. */ @media (max-width:640px){ .mini-map-shell{min-height:clamp(340px,56vh,520px)} } /* ── THE DASHBOARD TOOL ROW, FOLDED ──────────────────────────── Seven icons across the top of that map reached corner to corner on a phone. Here they live behind one button and slide out to its left; on a desktop the row is simply always out and the button is absent. */ .dash-tools-items{display:flex;align-items:center;gap:6px} .dash-tools-toggle{display:none} @media (max-width:640px){ .dash-map-tools{flex-wrap:nowrap} .dash-map-tools .dash-tools-toggle{display:inline-flex} .dash-map-tools .dash-tools-items{max-width:0;opacity:0;pointer-events:none; overflow:hidden;flex-wrap:nowrap; transition:max-width .3s ease,opacity .2s ease} .dash-map-tools.open .dash-tools-items{max-width:calc(100vw - 96px);opacity:1;pointer-events:auto} } /* ── ELEVATION PROFILE ─────────────────────────────────────── */ /* "Scanned 28 Aug 14:12" under a course in the track list. Quiet: it is a state, not an action — the buttons beside it are the actions. */ .trk-scan{display:flex;align-items:center;gap:5px;margin-top:5px; font-size:10.5px;font-weight:700;color:var(--ok,#22c55e)} .trk-scan svg{width:12px;height:12px;flex-shrink:0} .trk-scan span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .elev-card{margin-top:14px} /* The scrubbable profile with its scales: altitudes down the left, kilometres along the bottom, the drawing itself in the cell between them. A grid rather than padding, so the marks under the plot line up with the plot at every width — the same arrangement the schedule card uses. */ .elev-wrap{position:relative;height:130px;cursor:crosshair;touch-action:none; display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:1fr auto;column-gap:8px} .elev-canvas{grid-column:2;grid-row:1;min-width:0;min-height:0;position:relative} .elev-wrap svg{width:100%;height:100%;display:block;overflow:visible} /* Altitudes ON their own gridlines rather than at the two ends of a flex column — see the same move on .rp-yax, and drawElevationPanel() for where the numbers come from. */ .elev-yax{grid-column:1;grid-row:1;position:relative;min-width:36px; font-size:10px;font-weight:700;color:var(--text3); font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right} .elev-ytick{position:absolute;right:0;transform:translateY(-50%)} .elev-xax{grid-column:2;grid-row:2;position:relative;height:15px;margin-top:4px; font-size:10px;font-weight:700;color:var(--text3);font-variant-numeric:tabular-nums} .elev-tick{position:absolute;top:0;white-space:nowrap} .elev-tick-end{font-weight:800;color:var(--text2)} .elev-tick-zero{color:#f59e0b} @media (max-width:520px){ /* Half the marks: at this width the numbers run into each other. Which half is decided where they are made. */ .elev-tick.alt{display:none} } .elev-grid{stroke:var(--border);stroke-width:1} /* Fill and stroke are set per SVG, not here. Several profiles share a page and each carries its course's colour on the path itself; a declaration in CSS beats a presentation attribute, so anything set here would repaint every profile in one colour and undo the point of drawing them per race. */ .elev-area{stroke:none} .elev-line{fill:none;stroke-width:2;stroke-linejoin:round} .elev-lbl{font-size:10px;fill:var(--text3);font-weight:700} .elev-stats{display:flex;flex-wrap:wrap;gap:20px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)} .elev-stat dt{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--text3)} .elev-stat dd{font-size:16px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;margin-top:2px} /* ── RACE PROFILE BLOCK ─────────────────────────────────────── The same picture wherever it appears — schedule card, map view, share link, printed booklet. Static: no scrubber, no listeners. */ .rp-block{margin-top:14px;padding-top:12px;border-top:1px solid var(--border)} .rp-hd{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin-bottom:8px} .rp-hd strong{font-size:13.5px;font-weight:800;color:var(--text)} .rp-hd span{font-size:11.5px;color:var(--text3)} .rp-svg{width:100%;height:84px;display:block;overflow:visible} /* Altitudes down the left, kilometres along the bottom, both outside the drawing. The y labels are a column of their own so the plot and the km marks under it start at the same x — a padding guess would drift. */ .rp-plot{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:8px;align-items:stretch} /* The altitudes stand ON their own gridlines rather than at the top and bottom of a flex column: two numbers said how tall the picture was and nothing about the hill in the middle of it. */ /* ── ROOM FOR A SECOND ROW OF SIGNS ─────────────────────────── --rp-sky is empty space over the top of the picture, set on .rp-plot by elevProfileFigure() and only when two waypoints land close enough to stand on each other. It is added as PADDING above the drawing rather than as more headroom inside it: .rp-svg is drawn at the height fixed below and its viewBox is stretched to fill that, so a wider band would have flattened the hill to make room for the signs instead of making the strip taller. Nothing here moves when it is 0, which is every profile that has never had two signs in one place. The altitudes gutter takes the same distance as a MARGIN. It is a stretched grid item, so a margin shortens it by exactly what the canvas gained — and its numbers, which are placed as percentages of their own box, stay level with the lines they name. Padding here instead would have left the box the taller one and walked every altitude down the page. */ .rp-yax{position:relative;min-width:34px;margin-top:var(--rp-sky,0px); font-size:9.5px;font-weight:700;color:var(--text3); font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right} .rp-ytick{position:absolute;right:0;transform:translateY(-50%)} .rp-canvas{min-width:0;position:relative;padding-top:var(--rp-sky,0px)} /* ── THE NEUTRALISED START, ON THE PICTURE ────────────────── Left of the flag the race has not begun: the ground is shaded, the flag itself is a rule, and the roadbook's own 0 km sign stands on it. From there the kilometre marks count from zero — see elevProfileFigure() in js/elevation.js. */ .elev-neutral{fill:currentColor;opacity:.12} /* A relay's two legs under the hill, and the changeover between them. */ .elev-leg{opacity:.16} .elev-leg-rule{stroke:#0f172a;stroke-width:2;stroke-dasharray:4 3;fill:none;opacity:.7} body.light .elev-leg-rule{stroke:#0f172a} .elev-leg-lbl{position:absolute;top:3px;transform:translateX(-50%);pointer-events:none; font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;line-height:1; padding:2px 6px;border-radius:999px;background:var(--c);color:#0f172a;white-space:nowrap} .elev-zero{stroke:#f59e0b;stroke-width:2;stroke-dasharray:4 3;fill:none} /* The two ends, hard against the two ends — see the note in elevProfileFigure(). Not centred on the edge, which would hang half of each sign off the picture. THEY STAND IN THE SKY AND POINT DOWN, the way the waypoint signs do: on the line a 19-pixel disc covers the first and last kilometres, which is the stretch a finger is on when somebody asks about the finish. Anchored top AND bottom so the dotted leader simply fills whatever is left under the sign — the same trick .rp-mark uses, and for the same reason: a stem of a fixed length stops in mid-air and leaves the eye to guess the rest of the drop. */ .rp-end{position:absolute;top:1px;bottom:0;pointer-events:none;line-height:0;z-index:2; display:flex;flex-direction:column;align-items:center} /* CENTRED ON THE EDGE, not tucked inside it. Anchored, the start stood ten pixels into the race and the finish nine short of it, and the dotted leader landed there with them — a quarter of a kilometre out on a 20 km sheet, in the two places a race map has to be exact. Half of each sign hangs outside the plot now: on the left into the 34 px altitude gutter, on the right into the 14 px of padding the profile band already carries, and every container between here and the sheet is overflow:visible. */ .rp-end.start{left:0;transform:translateX(-50%)} .rp-end.finish{right:0;transform:translateX(50%)} /* The blow-up panel is 46 px tall with no sky to stand in: there the sign is pinned to the ceiling and carries no stem at all. */ .rp-end.top{bottom:auto;top:0;display:block} .rp-end img{display:block;width:19px;height:19px;order:1; filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))} /* On a blow-up panel the picture is 46 px tall and the sign is 19, so it is drawn smaller there rather than covering a third of the road. */ .cp-zoom .rp-end img{width:15px;height:15px} .rp-km0{position:absolute;top:1px;bottom:0;transform:translateX(-50%); pointer-events:none;line-height:0;display:flex;flex-direction:column;align-items:center} .rp-km0 img{display:block;width:19px;height:19px;order:1; filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))} /* ── THE LEADER UNDER A SIGN ────────────────────────────────── Dotted rather than solid, and the same dotted line under all three kinds of sign — a waypoint, the two ends, and the roadbook's own 0 km. A solid hairline reads as part of the drawing, which on a picture whose only other vertical lines are the kilometre guides is one line too many; a dotted one reads as a pointer, which is what it is. Drawn as a repeating gradient rather than a dashed border because a 1-pixel column with a border on it renders as a smear at print resolution, and these sheets are photographed at three times size. */ .rp-mark > i, .rp-end > i, .rp-km0 > i{display:block;width:1px;flex:1 1 auto;min-height:14px; order:2;opacity:.45; background-image:repeating-linear-gradient(to bottom, currentColor 0 2px, transparent 2px 5px); background-repeat:repeat-y;background-size:1px 5px} /* The blow-up panel keeps its sign inside the picture: it is 46 px tall and less than a third of the sheet wide, and half a disc hanging off the side of a panel that small reads as a mistake rather than as a mark on the road. */ .rp-end.top.start,.rp-end.top.finish{transform:none} .rp-tick-zero{color:#f59e0b} .rp-tick-off{display:none} /* A profile that follows the course on the map above it is something you point at, so it says so. Only where one is wired up — see wireProfileScrub(); a profile in a share with no map beside it is still just a picture. */ .rp-plot[data-scrub-wired] .rp-canvas{cursor:crosshair} .rp-xax{grid-column:2;position:relative;height:14px;margin-top:3px; font-size:9.5px;font-weight:700;color:var(--text3);font-variant-numeric:tabular-nums} .rp-tick{position:absolute;top:0;white-space:nowrap} .rp-tick-end{font-weight:800;color:var(--text2)} .elev-grid.vg{opacity:.5} .elev-grid.hg{opacity:.75} @media (max-width:420px){ /* Half the marks: the strip is a third of the width here and the numbers run into each other. Which half is decided where they are made — see elevProfileFigure(). */ .rp-tick.alt{display:none} } @media (max-width:520px){ /* Shorter on a phone: the plot is a third of the width it has on a laptop, so the same height turns every rise into a spike. */ .rp-svg{height:66px} } .rp-stats{display:flex;flex-wrap:wrap;gap:16px;margin-top:8px} .rp-stat dt{font-size:9.5px;font-weight:800;text-transform:uppercase; letter-spacing:.06em;color:var(--text3)} .rp-stat dd{font-size:13.5px;font-weight:700;color:var(--text); font-variant-numeric:tabular-nums;margin-top:1px} /* ── MAPBOX POPUP THEMING ──────────────────────────────────── */ .mapboxgl-popup-content{background:var(--bg2)!important;color:var(--text)!important; border:1px solid var(--border2);border-radius:10px!important;padding:12px 14px!important; box-shadow:var(--shadow-md)!important;font-family:'Inter',sans-serif} .mapboxgl-popup-tip{border-top-color:var(--bg2)!important;border-bottom-color:var(--bg2)!important} .mapboxgl-popup-close-button{color:var(--text2)!important;font-size:18px!important;padding:4px 8px!important} .mp-pop-t{font-size:13px;font-weight:700;margin-bottom:4px} .mp-pop-m{font-size:11px;color:var(--text2);font-variant-numeric:tabular-nums} /* Zoom / compass / fullscreen. Mapbox ships these glyphs as dark-on-light background images, so dark mode inverts them. Light mode must then also drop the dark plate — inverting the icon back without restoring the plate left dark arrows on a dark square, i.e. invisible buttons. */ .mapboxgl-ctrl-group{background:rgba(8,12,24,.86)!important;border:1px solid rgba(148,163,184,.28)!important} .mapboxgl-ctrl-group button+button{border-top-color:rgba(148,163,184,.22)!important} .mapboxgl-ctrl-group button .mapboxgl-ctrl-icon{filter:invert(1) brightness(1.6)} .mapboxgl-ctrl-group button:hover{background-color:rgba(255,255,255,.12)!important} body.light .mapboxgl-ctrl-group{background:rgba(255,255,255,.96)!important; border-color:rgba(15,23,42,.16)!important;box-shadow:0 2px 8px rgba(15,23,42,.14)!important} body.light .mapboxgl-ctrl-group button+button{border-top-color:rgba(15,23,42,.12)!important} body.light .mapboxgl-ctrl-group button .mapboxgl-ctrl-icon{filter:none} body.light .mapboxgl-ctrl-group button:hover{background-color:rgba(15,23,42,.06)!important} body.light .mapboxgl-ctrl-group button:disabled .mapboxgl-ctrl-icon{opacity:.3} /* The 3D corner button: an inline SVG rather than Mapbox's own background-image icon convention, so it needs its own color rule instead of the invert-filter above. Thinner stroke and a smaller glyph than ico()'s default 16px/2px — next to the hairline zoom and locate icons a 3D cube at full weight read as the boldest thing on the map. Dimmed until switched on, same as the toolbar's own toggles. */ .map-3d-btn{width:29px;height:29px;display:flex;align-items:center;justify-content:center; background:transparent;border:0;padding:0;cursor:pointer;color:#e2e8f0;opacity:.68} /* Drawn at the size Mapbox's own zoom and locate glyphs are drawn at — at 14 px it was the one small icon in a stack of full-sized ones. */ .map-3d-btn svg{width:19px;height:19px;stroke-width:1.8} .map-3d-btn:hover{opacity:.9} .map-3d-btn.on{color:#59ef83;opacity:1} /* The basemap button lives in the same stack and wears the same dress; `open` is its "this menu is showing" state. */ .map-corner-btn.open{color:#59ef83;opacity:1} body.light .map-corner-btn.open{color:#16a34a} body.light .map-3d-btn{color:#334155} body.light .map-3d-btn.on{color:#16a34a} /* ── ACCREDITATION PIN ───────────────────────────────────────── A real dropped pin: the teardrop's tip is the coordinate, so the marker is anchored 'bottom'. 30px rotated 45° reaches ~37px tall, which is why the wrapper is that height and not 30. */ .acc-pin{position:relative;width:32px;height:37px;cursor:pointer} .acc-pin .acc-pin-head{position:absolute;top:0;left:1px;width:30px;height:30px; border-radius:50% 50% 50% 0;transform:rotate(-45deg); background:linear-gradient(135deg,#fbbf24,#d97706);border:2.5px solid #fff; box-shadow:0 4px 12px rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center; transition:transform .16s} .acc-pin:hover .acc-pin-head{transform:rotate(-45deg) scale(1.1)} .acc-pin .acc-pin-head svg{width:15px;height:15px;color:#1a1204;transform:rotate(45deg)} /* start / finish markers */ .trk-pin{width:26px;height:26px;border-radius:50%;border:2px solid #fff;display:flex;align-items:center; justify-content:center;font-size:11px;font-weight:800;color:#0b1120;box-shadow:0 2px 8px rgba(0,0,0,.5);cursor:pointer} .trk-pin.start{background:#34d399} .trk-pin.finish{background:#f87171} /* The official 0 km: the roadbook's own sign rather than a lettered dot, because that is the drawing everybody in the convoy already reads. No chip behind it — the sign has its own white ground. */ /* The changeover of a relay: the two colours meeting in one dot, the kilometre beside it. */ .rm-relay-pin{display:flex;align-items:center;gap:6px;pointer-events:none} .rm-relay-dot{width:16px;height:16px;border-radius:50%;flex-shrink:0;border:2px solid #fff; background:linear-gradient(90deg,var(--m) 50%,var(--w) 50%);box-shadow:0 1px 4px rgba(0,0,0,.45)} .rm-relay-pin b{font-size:10.5px;font-weight:800;color:#0f172a;background:rgba(255,255,255,.92); padding:2px 7px;border-radius:999px;white-space:nowrap;box-shadow:0 1px 4px rgba(0,0,0,.3)} .rm-km0-pin{line-height:0;cursor:default; filter:drop-shadow(0 2px 5px rgba(0,0,0,.5))} .rm-km0-pin img{display:block;width:30px;height:30px} @media (max-width:900px){ /* Stacked: map, then list, then profile, each taking its own height. THE MAP GOES FIRST. Beside each other the list is a column and the map is the page; stacked, the list is ten rows of names and an import box between the heading and the one thing this screen is opened for. The map is what you came for — the courses are what you scroll to afterwards. */ .map-layout{grid-template-columns:1fr;grid-template-rows:auto;min-height:0;height:auto} /* Stacked, the planner scrolls like every other screen: a full-height grid here would put the panel below the fold with no way down. */ .map-layout.pl-layout{height:auto} body.planner-view #content,body.mapfull-view #content, body.print-view #content{padding:12px 14px 40px;overflow-y:auto} body.planner-view #v-planner{height:auto} .map-layout > .map-panel,.map-layout > .map-shell,.map-layout > .elev-card{grid-column:1;grid-row:auto} .map-layout > .map-shell{order:1} .map-layout > .map-panel{order:2;margin-top:14px} .map-layout > .elev-card{order:3;margin-top:0} .map-shell{height:60vh;min-height:340px} /* The panel is the whole screen here, so it is sized by what is in it rather than capped at a height the list then has to fight for. */ .map-panel{max-height:none} .mp-fold{display:inline-flex;align-items:center} /* Import, compacted to one line. It was a 120 px dashed box holding a drop target and a hint about dragging files — neither of which is a thing anyone does on a phone, where it is a browse button — and it sat between the heading and the courses, pushing all ten off the screen. */ .drop-zone{margin:8px;padding:9px 12px;justify-content:center;gap:10px;border-radius:13px} .dz-mark{width:28px;height:28px;border-width:2px} .drop-zone svg{width:16px;height:16px;margin:0;flex-shrink:0} .drop-zone .dz-title{font-size:12px;margin:0} .drop-zone .dz-hint{display:none} /* And the courses get a real window of their own, scrolling inside it. */ .mp-tracks{flex:0 1 auto;max-height:44vh;min-height:132px} #poi-list{max-height:30vh} /* SCROLLING INSIDE IT, as said: .mp-list is overflow:visible everywhere else, so a capped list spilled its courses over the waypoints under it — the two read through each other on a phone and on the map link (Janny, 26 Sep 2026). */ .mp-tracks,#poi-list{overflow-y:auto;overscroll-behavior:contain} } /* The course map's own fold. Six of the eight icons live in .mt-items; on a phone that box shuts to nothing and slides back out to the left of the ⋮ beside it. Desktop draws them all and hides the toggle. */ .mt-items{display:flex;align-items:center;gap:8px} .mt-toggle{display:none} @media (max-width:640px){ /* Mapbox puts zoom and fullscreen at the top *left* of the course map, so the tools stay hard right — moving them left ran them over the +/− stack. Even hard right, eight icons and a plus reached across the canvas and landed on that stack anyway; hence the fold. */ .course-map-tools .mt-toggle{display:inline-flex} .course-map-tools .mt-items{max-width:0;opacity:0;pointer-events:none;overflow:hidden; gap:5px;flex-wrap:nowrap;transition:max-width .3s ease,opacity .2s ease} /* OPEN, THE DRAWER TAKES A ROW OF ITS OWN. Squeezed onto the same line as the three that never fold plus the round +, the six of them had about 150 px between them: the row shrank, `overflow:hidden` cut the last one down the middle, and a button half drawn is a button nobody presses. `order` keeps the permanent three on top and drops the drawer underneath them, which is also the direction it slid out from. */ .course-map-tools.open{flex-wrap:wrap;justify-content:flex-end} .course-map-tools.open .mt-items{flex:1 1 100%;max-width:100%;order:1; flex-wrap:wrap;justify-content:flex-end;opacity:1;pointer-events:auto} .map-tools{top:12px;right:12px;left:auto;justify-content:flex-end;flex-wrap:nowrap} /* Five icons and the add-waypoint button have to share one row here, so the icons tighten rather than wrap onto the course. */ .map-tool-btn{width:32px;height:32px;border-radius:8px} .map-tool-btn svg{width:15px;height:15px} .map-pop{width:min(236px,calc(100vw - 24px));top:54px} .map-legend{bottom:10px;max-width:calc(100% - 90px)} .map-legend .ml-body{max-height:28vh} } /* ═══════════ COURSE VIDEO ═══════════ The recce lap, under the elevation profile. 16:9 and fluid: on a phone it is the width of the screen, on a desktop it stops before it turns into a cinema. */ .video-card{margin-top:16px} .vc-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:10px; flex-wrap:wrap;margin-bottom:12px} .vc-hd h3{display:flex;align-items:center;gap:8px} .vc-hd .c-sub{margin:3px 0 0} /* One block per video: name, line of context, player. Placed 2 per row on tablet/desktop, stacked on mobile. */ .vc-list{display:grid;grid-template-columns:1fr;gap:20px} @media (min-width: 640px){ .vc-list{grid-template-columns:repeat(2, 1fr)} } .vc-item{display:flex;flex-direction:column;background:var(--bg3);border:1px solid var(--border); border-radius:12px;padding:16px;height:100%} .vc-item-hd{display:flex;justify-content:space-between;align-items:flex-start; gap:10px;margin-bottom:12px} .vc-item-txt strong{display:block;font-size:14.5px;font-weight:800;color:var(--text)} .vc-item-txt p{margin:3px 0 0;font-size:12.5px;line-height:1.5;color:var(--text2)} /* Which course the film was shot on — only on a share link, where the card carries every film the event has. See showCourseVideo(). */ .vc-item-txt p.vc-where{display:flex;align-items:center;gap:6px;margin-top:5px; font-size:12px;font-weight:700;color:var(--gold2)} .vc-item-txt p.vc-where svg{width:14px;height:14px;flex-shrink:0} .vc-item-act{display:flex;gap:6px;flex-shrink:0} .vc-frame{position:relative;width:100%;aspect-ratio:16/9; border-radius:10px;overflow:hidden;background:#000;border:1px solid var(--border)} .vc-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .vc-open{display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:10px;font-size:12.5px; font-weight:700;color:var(--gold2);text-decoration:none;align-self:flex-start} .vc-open:hover{text-decoration:underline} .vc-open svg{width:15px;height:15px} /* ── SIDE PANEL FOLD ───────────────────────────────────────── The layout is a grid with a fixed 300 px first track, so folding is a change to the TRACK, not to the panel's width — width:0 on a grid item leaves the 300 px column standing empty behind it. Folded it becomes a 46 px rail rather than nothing, so it is visible that there is a panel there and what it holds. */ .map-layout{position:relative;transition:grid-template-columns .22s} .map-layout.panel-off{grid-template-columns:46px 1fr} .map-layout.panel-off .map-panel{border-width:0;opacity:0;pointer-events:none} .map-layout.panel-off .map-panel-toggle{display:none} .map-panel{transition:opacity .18s} /* Halfway down the seam, not at its head: the planner's top corners are full of map tools a tab would sit under, and a control that means the same thing on both screens should be in the same place on both. The planner's pair (.pl-panel-toggle below) wears this exact dress. */ .map-panel-toggle{position:absolute;top:50%;transform:translateY(-50%);left:300px;z-index:8; width:22px;height:52px; border:1px solid var(--border2);border-left:0;border-radius:0 8px 8px 0; background:var(--bg2);color:var(--green);cursor:pointer;font-size:15px;font-weight:800; font-family:inherit;line-height:1;padding:0;transition:left .22s,background .16s,color .16s} .map-panel-toggle:hover{background:var(--green);color:var(--on-accent)} body.light .map-panel-toggle{background:#fff} body.light .map-panel-toggle:hover{background:var(--green);color:var(--on-accent)} .map-rail{position:absolute;left:0;top:0;bottom:0;width:46px;z-index:8;display:none; flex-direction:column;align-items:center;gap:8px;padding:10px 0; background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius); box-shadow:var(--shadow)} body.light .map-rail{background:#fff} .map-layout.panel-off .map-rail{display:flex} .rail-btn{width:34px;height:34px;border-radius:9px;border:1px solid var(--border); background:var(--bg3);color:var(--text2);cursor:pointer;display:flex;align-items:center; justify-content:center;font-family:inherit;font-size:15px;font-weight:800;line-height:1;padding:0} .rail-btn:hover{border-color:var(--gold-border);color:var(--gold2)} .rail-btn svg{width:16px;height:16px} .rail-count{margin-top:auto;font-size:11px;font-weight:800;color:var(--text3); font-variant-numeric:tabular-nums} /* ── THE COURSE MAP, MIRRORED ────────────────────────────────── The track list to the right, the map's own tools to the left. The map is what this screen is for and it now opens at the left edge, where a European eye starts reading — and the tools sit over the corner of it that is furthest from the list they act on, instead of tucked under it. Scoped to #v-map on purpose. The route planner mounts the same .map-layout and is NOT mirrored: there the panel is the drawing form, the thing you work down while the map answers, and a form belongs on the side you start from. Two screens that look alike are not the same screen. Say the word and the planner follows. Every rule here is id-scoped, which outranks the .map-layout rules above and the ones in the stacked breakpoint below — so that breakpoint gets its own mirror-off block rather than being quietly overridden into a broken two-column phone layout. */ #v-map .map-layout{grid-template-columns:1fr 300px} #v-map .map-layout > .map-panel{grid-column:2;grid-row:1 / -1} #v-map .map-layout > .map-shell{grid-column:1;grid-row:1} #v-map .map-layout > .elev-card{grid-column:1;grid-row:2} #v-map .map-layout.panel-off{grid-template-columns:1fr 46px} /* The seam furniture flips with the seam: the tab hangs off the panel's left edge now, so its open side, its missing border and its corners all swap over. */ #v-map .map-panel-toggle{left:auto;right:300px; border-left:1px solid var(--border2);border-right:0; border-radius:8px 0 0 8px; transition:right .22s,background .16s,color .16s} #v-map .map-rail{left:auto;right:0} #v-map .course-map-tools{left:12px;right:auto;justify-content:flex-start} #v-map .course-map-tools.open{justify-content:flex-start} #v-map .course-map-tools.open .mt-items{justify-content:flex-start} /* And the menus follow the buttons. openMapPop() sets the exact offset inline once it knows which icon was pressed; this is the side they start on, so a menu never opens against the far edge first. */ #v-map #map-pop{left:12px;right:auto} @media (max-width:900px){ /* Stacked layout: the panel sits above the map, so a seam arrow has no seam. */ .map-panel-toggle,.map-rail{display:none} .map-layout.panel-off{grid-template-columns:1fr} .map-layout.panel-off .map-panel{border-width:1px;opacity:1;pointer-events:auto} .map-layout.panel-off .map-rail{display:none} /* THE MIRROR COMES OFF HERE. Stacked, there is no left and right to swap — one column, map first — and the id-scoped rules above would otherwise hold a 1fr/300px grid on a phone. */ #v-map .map-layout,#v-map .map-layout.panel-off{grid-template-columns:1fr} #v-map .map-layout > .map-panel, #v-map .map-layout > .map-shell, #v-map .map-layout > .elev-card{grid-column:1;grid-row:auto} } /* ── THE DASHBOARD'S PROFILE ─────────────────────────────────── Under the mini-map, inside the same card: one course at a time, with the others a press away. No panel of its own — on the dashboard this is a glance, not a workbench. */ .dash-elev{margin-top:14px;padding-top:12px;border-top:1px solid var(--border)} .dash-elev .elev-wrap{height:104px} .dash-elev .elev-stats{gap:16px;margin-top:10px;padding-top:10px} .dash-elev .c-sub{margin:8px 0 2px} .dash-elev-chips{display:flex;flex-wrap:wrap;gap:7px} .dash-trk-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px; border-radius:999px;border:1px solid var(--border2);background:var(--bg3); color:var(--text2);font-size:12px;font-weight:700;cursor:pointer;line-height:1.3; max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dash-trk-chip::before{content:"";width:8px;height:8px;border-radius:50%; background:var(--c,var(--gold2));flex-shrink:0} .dash-trk-chip:hover{color:var(--text);border-color:var(--c,var(--gold2))} .dash-trk-chip.on{color:var(--text);border-color:var(--c,var(--gold2)); background:color-mix(in srgb,var(--c,#f59e0b) 14%,transparent)} @media (max-width:640px){ .dash-elev .elev-wrap{height:86px} .dash-elev .elev-stats{gap:12px} } /* ── WAYPOINTS UNDER THEIR COURSE ────────────────────────────── Indented and hung off the course above by a rule down the left, so a glance down the panel reads courses first and their waypoints as detail — rather than one flat hundred-row list where every row had to name its own course. */ .trk-pois{margin:-2px 0 8px 14px;padding-left:10px; border-left:2px solid var(--border2);display:flex;flex-direction:column;gap:2px} .trk-pois-hd{display:flex;align-items:center;gap:6px;padding:6px 6px 4px; font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.07em; color:var(--text3);cursor:pointer;user-select:none;border-radius:5px; transition:background .15s ease, color .15s ease} .trk-pois-hd:hover{color:var(--text);background:var(--bg3)} .trk-pois-hd svg{width:11px;height:11px;flex-shrink:0} .trk-pois-hd b{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--text2)} .trk-pois-hd .trk-pois-toggle{display:inline-flex;align-items:center;justify-content:center; margin-left:4px;color:var(--text3);transition:transform .2s ease} .trk-pois-hd .trk-pois-toggle svg{width:12px;height:12px} .trk-vis-poi{display:inline-flex;align-items:center;justify-content:center; width:20px;height:20px;border-radius:4px;border:none;background:none; color:var(--text3);cursor:pointer;margin-left:4px;padding:0; transition:color .15s ease, background .15s ease} .trk-vis-poi:hover{color:var(--text);background:var(--bg4)} .trk-vis-poi.off{color:#64748b;opacity:0.5} .trk-vis-poi svg{width:13px;height:13px} .trk-pois.is-collapsed .trk-pois-toggle{transform:rotate(-90deg)} .trk-pois.is-collapsed .trk-poi-list{display:none} /* Lighter than a course row: these are subordinate to the one above them. */ .trk-pois .poi-item{padding:5px 6px;border-radius:7px;background:none;border:none} .trk-pois .poi-item:hover{background:var(--bg4)} /* ── THE COURSE MAP ON A RACE CARD ───────────────────────────── Sits above the profile in the schedule and carries one course: see js/racemap.js. Deliberately the same visual weight as the profile block under it — the two are one answer to "what is this race", not a map with a chart bolted on. */ .rm-block{margin-top:14px;padding-top:12px;border-top:1px solid var(--border)} .rm-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px} .rm-name{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:800; letter-spacing:.06em;text-transform:uppercase;color:var(--text3);min-width:0} .rm-name svg{width:14px;height:14px;flex-shrink:0} .rm-name span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rm-tools{display:flex;align-items:center;gap:6px;margin-left:auto;flex-wrap:wrap} .rm-style{min-height:30px;padding:3px 8px;font-size:11.5px;border-radius:7px; background:var(--bg3);border:1px solid var(--border2);color:var(--text)} .rm-tools .btn{min-height:30px;padding:4px 9px;font-size:11.5px} .rm-tools .rm-wind.is-on{background:rgba(59,130,246,.18);border-color:rgba(59,130,246,.5);color:#8ec5ff} /* Tall enough that a race reads as a shape rather than a strip. A race card is wide, so a fixed height turns the map into a letterbox on a desktop — the height follows the width until it hits the cap, which is what keeps a full course and its finishing circuit in one view without pushing the profile under it off the screen. */ .rm-canvas{position:relative;height:clamp(280px, 34vw, 520px);border-radius:10px; overflow:hidden;border:1px solid var(--border);background:var(--bg3)} .rm-canvas-in{position:absolute;inset:0} @media (max-width:640px){ .rm-canvas{height:300px} } /* The wind read-out under the map rather than floating over it: on a card this narrow an overlay covers the course it is describing. */ .rm-wind-panel{margin-top:8px;padding:8px 10px;border-radius:9px; background:var(--bg3);border:1px solid var(--border);font-size:11px;color:var(--text2)} .rm-wp-hd{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px} .rm-wp-hd strong{font-size:11px;letter-spacing:.04em;color:#8ec5ff} .rm-wp-legend{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:6px} .rm-wp-legend span{display:flex;align-items:center;gap:5px} .rm-wp-legend i{width:10px;height:10px;border-radius:2px;display:inline-block;flex-shrink:0} .rm-wp-sim{display:flex;align-items:center;gap:8px} .rm-wp-sim input{flex:1;min-width:80px;accent-color:#38bdf8;height:4px} .rm-wp-note{margin:6px 0 0;color:#fbbf24} /* ══════════════════════════════════════════════════════════ PORTED FROM THE GOLAZO BUILD The screens that arrived with this port bring their own rules: wind and heat on the map, the medical plan, municipal permits, the daily communique, the personal day page, the hotel record and the jersey library. Palette mapped onto the CAC amber; the sheets above are untouched. ══════════════════════════════════════════════════════════ */ /* ── ADD WAYPOINT ACTIVE MODE & POI LIST ───────────────────── */ /* The toolbar's add button: a circle with a bare plus. Sized to the /* The plate is dark in BOTH themes, so the chip on it cannot borrow the page's text tokens: in light mode "WBGT" painted itself dark-on-dark and disappeared. On this plate the text is always white. */ .rm-wbgt .wbgt-chip{background:transparent;border-color:rgba(255,255,255,.18);color:#cfe2e0} .rm-wbgt .wbgt-chip strong,.rm-wbgt .wbgt-chip .wbgt-zone{color:#fff} map-tool buttons beside it so the row reads as one family. */ .btn-round-add{width:40px;height:40px;min-height:40px;padding:0;border-radius:50%; display:inline-flex;align-items:center;justify-content:center;font-size:17px;line-height:1;flex-shrink:0} .btn-round-add svg{width:19px;height:19px} .btn-round-add span{display:none} #cacMap{position:absolute;inset:0;width:100%;height:100%} @media (max-width:640px){ /* Five icons and the add-waypoint button have to share one row here, so the icons tighten rather than wrap onto the course. */ .map-tool-btn{width:32px;height:32px;border-radius:8px} } /* ── THE COURSE LEGEND, TOP RIGHT ────────────────────────────── Opened with ten courses in it, a legend anchored to the bottom edge grows upwards through the middle of the map — over the course itself, which is the one thing it is describing. In the corner it grows down the side instead, under the tools, and the map stays readable behind it. Scoped to the course map: the dashboard's mini-map has its own corner rules, and Mapbox's zoom controls sit top-left on this one. */ .map-shell .map-legend{top:58px;right:12px;bottom:auto;left:auto;transform:none; max-width:min(272px,calc(100% - 24px))} .map-shell .map-legend .ml-body{max-height:min(46vh,340px)} @media (max-width:640px){ /* The tools wrap to two rows on a narrow screen, so the legend starts lower. */ .map-shell .map-legend{top:auto;bottom:10px;right:10px;max-width:calc(100% - 20px)} .map-shell .map-legend .ml-body{max-height:30vh} } /* The controls live ON the canvas now, dressed as .map-tools like every other map in the app — the bar above the frame made this one map read differently from the two beside it. Four square icon buttons, and the basemap behind the map icon in a .map-pop, exactly as on the course-map screen: the native