/* Presentation mode: the visual alone, as it will appear on the website. The
   header stays, for its theme switch; the full-screen player opens below it. */
.present{display:none}
body.present-yarnball{padding:0 var(--gutter)}
body.present-yarnball>.page-heading,body.present-yarnball>main,body.present-yarnball>footer{display:none!important}
body.present-yarnball .present{display:block;max-width:1500px;margin:auto;padding:32px 0}
.present-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.present-tile{display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:0;border:0;background:none;text-align:center;cursor:pointer;min-height:0}
.present-tile:hover{background:none}.present-tile:hover .present-face{transform:scale(1.02)}
.present-face{position:relative;display:block;width:100%;aspect-ratio:1;transition:transform .3s ease}.present-face>canvas{position:relative;display:block;width:100%;height:100%}
/* Doubled class: MapLibre's stylesheet sets .maplibregl-map to position:relative. */
.present-map.present-map{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;overflow:hidden;pointer-events:none;background:var(--map-land) center/cover no-repeat}.present-map canvas{outline:none}.present-face>.present-map{z-index:0}
.present-caption{display:flex;flex-direction:column;gap:3px}.present-caption span{font:500 9px var(--mono);letter-spacing:.4px;color:var(--caption)}.present-caption strong{font-size:15px;font-weight:500;color:var(--text)}.present-caption small{font:9px var(--mono);color:var(--caption)}
#present-status{font-size:13px;color:var(--muted)}
body.present-open{overflow:hidden}
.present-overlay{position:fixed;inset:var(--present-header,64px) 0 0;z-index:20;background:var(--bg);display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:calc(18px + env(safe-area-inset-top,0px)) var(--gutter) calc(18px + env(safe-area-inset-bottom,0px))}
.present-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.present-top h2{font-size:24px;font-weight:500;letter-spacing:-.4px;margin:6px 0 2px}.present-top small{font:10px var(--mono);color:var(--caption)}
.present-stage{position:relative;justify-self:center;align-self:center;width:min(100%,calc(100dvh - 190px - var(--present-header,64px)));aspect-ratio:1}.present-stage>canvas{position:absolute;inset:0;width:100%;height:100%}
.present-transport{display:flex;align-items:center;gap:12px;flex-wrap:wrap;max-width:760px;width:100%;justify-self:center}.present-transport output{font:10px var(--mono);color:var(--muted)}#present-count{margin-left:auto}
.present-progress{flex-basis:100%;height:2px;background:var(--border)}.present-progress i{display:block;height:100%;background:var(--accent);transform-origin:left;transform:scaleX(1)}
@media(max-width:960px){.present-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.present-grid{gap:18px}}

/* Globe studies: the globe alone, with playback, full screen, and (Counties) the shading choice on top of it. */
.present-tools{position:absolute;left:12px;right:12px;top:12px;z-index:3;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap;pointer-events:none}
.present-tools>*{pointer-events:auto}.present-buttons{display:flex;gap:6px;margin-left:auto}.present-buttons .segmented{background:var(--bg)}.present-tools button{background:var(--bg);min-height:38px}
.present-slot{display:flex;gap:8px;flex-wrap:wrap}.present-slot .segmented{background:var(--bg)}#present-modes{min-width:min(420px,100%)}
body.present-mode>.page-heading,body.present-mode>footer,body.present-mode .flight-controls,
body.present-mode .flight-instrument>:not(.globe-wrap),body.present-mode .zoom-controls{display:none!important}
body.present-mode .flight-layout{display:block;border:0}
body.present-mode .flight-instrument{padding:0}
body.present-mode .globe-wrap{height:clamp(420px,72vh,860px);margin:0}
.globe-wrap:fullscreen{height:100%;width:100%;background:var(--bg)}
@media(max-width:690px){body.present-mode .globe-wrap{height:min(78vh,620px);margin:0;width:100%}#present-modes{min-width:0}.present-tools button{min-height:36px;font-size:11px;padding:6px 9px}}
body.present-mode #camera-label{display:none}
.map-key{display:flex;flex-wrap:wrap;align-items:flex-end;max-width:min(560px,calc(100vw - 28px));font:9px var(--mono)!important;letter-spacing:.3px;color:var(--muted)!important}
.map-key span{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:62px;padding-right:8px;white-space:nowrap}.map-key span:last-child{padding-right:0}
.map-key i{align-self:stretch;margin-right:-8px;height:8px}.map-key span:last-child i{margin-right:0;border-radius:0 2px 2px 0}.map-key span:first-child i{border-radius:2px 0 0 2px}
.map-progress.scrubber{height:16px;pointer-events:auto;cursor:pointer;touch-action:none;z-index:2;--p:0}.map-progress.scrubber::before,.map-progress.scrubber i{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;transition:height .12s ease}
.map-progress.scrubber::before{background:color-mix(in srgb,var(--text) 14%,transparent)}.map-progress.scrubber i{transform:scaleX(var(--p))!important}
.map-progress.scrubber b{position:absolute;bottom:-2px;left:calc(var(--p)*100%);width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--bg);transform:scale(0);transition:transform .12s ease;pointer-events:none}
.map-progress.scrubber:hover::before,.map-progress.scrubber:hover i,.map-progress.scrubber.dragging::before,.map-progress.scrubber.dragging i{height:5px}.scrubber:hover b,.scrubber.dragging b{transform:scale(1)}
.map-keys{position:absolute;right:14px;bottom:22px;margin:0;font:9px var(--mono);letter-spacing:.3px;color:var(--muted);text-shadow:0 0 5px var(--bg),0 0 10px var(--bg);pointer-events:none;z-index:1}
@media(hover:none),(max-width:690px){.map-keys{display:none}}
/* While the record loads only the way back shows; the controls fade in once it can draw. */
#present-modes,.present-buttons,.picker,.map-transport,.map-keys,.globe-corner,.map-progress{transition:opacity .3s ease}
body.loading #present-modes,body.loading .present-buttons,body.loading .picker,body.loading .map-transport,body.loading .map-keys,body.loading .globe-corner,body.loading .map-progress{opacity:0;pointer-events:none}
/* Highpoints: a ring for the dots on the map, then how many are climbed. */
.map-peaks{display:flex;align-items:center;gap:6px;font:500 10px var(--mono)!important;letter-spacing:.3px;font-variant-numeric:tabular-nums}
.map-peaks i{width:8px;height:8px;border-radius:50%;background:var(--text,currentColor);box-shadow:0 0 0 1.5px var(--bg)}