/* ==========================================================================
   Wayfinder components (docs/design/UX-SPEC.md §10). Tokens only — no raw colours.
   State classes: .is-on .is-open .is-current .is-done .is-follow .is-off
                  .is-selected .is-lead .is-pending .is-hl .is-warn
   Reference prototype: src/prototypes/b-wayfinder.html
   ========================================================================== */

/* ── Layout regions for floating chrome (UX-SPEC §4.1) ── */
.float { position: fixed; z-index: var(--z-chrome); }
.float--tl { top: var(--inset); left: var(--inset); }
.float--tr { top: var(--inset); right: var(--inset); }
.float--tc { top: var(--inset); left: 50%; transform: translateX(-50%); }
.float--bl { bottom: var(--inset); left: var(--inset); }
.float--br { bottom: var(--inset); right: var(--inset); }
.float--bc { bottom: calc(var(--inset) + 2px); left: 50%; transform: translateX(-50%); }
.stack { display: flex; flex-direction: column; gap: var(--gap); }
.row { display: flex; align-items: center; gap: var(--gap); }

/* ── Glass surface ── */
.glass {
    background: var(--glass);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    border: 1px solid var(--stroke);
    box-shadow: var(--shadow);
}

/* ── Round action button ── */
.fab {
    width: 44px; height: 44px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 15px; color: var(--text);
    transition: background var(--t-fast), transform 100ms, color var(--t-fast);
}
.fab:hover { background: var(--glass-2); }
.fab:active { transform: scale(0.95); }
.fab.is-on { color: var(--volt); border-color: var(--volt-glow); }
.fab--sm { width: 32px; height: 32px; font-size: 13px; }

/* ── Buttons ── */
.btn {
    height: 40px; padding: 0 16px; border-radius: var(--r-pill);
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-weight: 600; font-size: var(--fs-md); white-space: nowrap; color: inherit; text-decoration: none;
    border: 1px solid var(--stroke-2);
    transition: background var(--t-fast), border-color var(--t-fast);
}
.btn:hover { background: var(--glass-hi); }
.btn--primary { background: var(--volt); color: var(--on-accent); border-color: transparent; box-shadow: 0 6px 20px var(--volt-glow); }
.btn--primary:hover { background: var(--volt-2); }
.btn--danger { background: var(--rose); color: var(--white); border-color: transparent; box-shadow: 0 6px 20px var(--rose-glow); }
.btn--sm { height: 34px; padding: 0 12px; font-size: var(--fs-sm); }
.btn--block { width: 100%; }

/* ── Chips (single-select filters) ── */
.chip {
    height: 30px; padding: 0 12px; border-radius: var(--r-pill);
    border: 1px solid var(--stroke-2);
    font-size: var(--fs-sm); font-weight: 600; color: var(--muted);
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.chip:hover { color: var(--text); }
.chip.is-on { background: var(--text); color: var(--on-light); border-color: var(--text); }
.chip-row { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }

/* ── Keyboard hint ── */
kbd, .kbd {
    font-family: var(--mono); font-size: var(--fs-xs); color: var(--muted);
    background: var(--glass-hi); border: 1px solid var(--stroke-2); border-bottom-width: 2px;
    padding: 0 5px; border-radius: 4px;
}

/* ── Segmented control ── */
.seg { display: flex; background: var(--glass-hi); border: 1px solid var(--stroke); border-radius: 10px; padding: 3px; }
.seg > button { flex: 1; padding: 6px 10px; border-radius: 7px; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); white-space: nowrap; }
.seg > button.is-shown { box-shadow: inset 0 -2px 0 var(--course); color: var(--text); }
.seg > button.is-on { background: var(--glass-2); color: var(--text); box-shadow: var(--shadow-sm); }

/* ── Toggle switch (role="switch") ── */
.toggle { width: 36px; height: 20px; border-radius: var(--r-pill); background: var(--dim); position: relative; flex-shrink: 0; }
.toggle::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--white); transition: transform var(--t-fast); }
.toggle.is-on { background: var(--volt); }
.toggle.is-on::after { transform: translateX(16px); }

/* ── Form fields ── */
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.input, .select {
    width: 100%; height: 38px; padding: 0 12px; border-radius: 10px;
    background: var(--well); border: 1px solid var(--stroke-2); outline: none; color: var(--text);
}
.input:focus, .select:focus { border-color: var(--volt); }
input[type="range"] { width: 100%; accent-color: var(--volt); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--volt); }
.setting { display: flex; justify-content: space-between; align-items: center; gap: var(--gap); font-size: var(--fs-md); }
.setting small { display: block; color: var(--muted); font-size: var(--fs-xs); }

/* ── Course type tag ── */
.tag { font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.04em; }
.tag--long { color: var(--type-long); background: color-mix(in srgb, var(--type-long) 16%, transparent); }
.tag--middle { color: var(--type-middle); background: color-mix(in srgb, var(--type-middle) 16%, transparent); }
.tag--sprint { color: var(--type-sprint); background: color-mix(in srgb, var(--type-sprint) 16%, transparent); }
.tag--night { color: var(--type-night); background: color-mix(in srgb, var(--type-night) 18%, transparent); }
.tag--sample { color: var(--muted); background: var(--glass-hi); border: 1px solid var(--stroke-2); }

/* ── Context chip (top-left title with back button) ── */
.ctx-chip { height: 52px; border-radius: var(--r-pill); display: flex; align-items: center; gap: 12px; padding: 0 18px 0 6px; }
.ctx-chip__title { font-size: var(--fs-lg); font-weight: 700; }
.ctx-chip__sub { display: block; color: var(--muted); font-size: 12px; }

/* ── Runner chips ── */
.rchips { display: flex; gap: 8px; overflow-x: auto; max-width: 100%; padding: 2px; scrollbar-width: none; }
.rchip {
    height: 38px; border-radius: var(--r-pill); padding: 0 12px 0 5px; flex-shrink: 0;
    display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600;
    border: 1px solid var(--stroke); position: relative;
}
.rchip::before { content: ""; position: absolute; inset: -3px 0; } /* 44 px hit area */
.rchip__rank { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: var(--white); }
.rchip__delta { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.rchip__delta.is-lead { color: var(--volt-2); }
.rchip__main { position: relative; height: 100%; display: flex; align-items: center; gap: 8px; font-weight: 600; border-radius: var(--r-pill); }
.rchip__eye { position: relative; width: 0; height: 22px; margin-left: -8px; border-radius: 50%; font-size: 11px; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; overflow: hidden; opacity: 0; }
.rchip:hover .rchip__eye, .rchip:focus-within .rchip__eye, .rchip.is-off .rchip__eye { width: 22px; margin-left: -4px; opacity: 1; }
@media (hover: none) { .rchip__eye { width: 22px; margin-left: -4px; opacity: 1; } }   /* touch: no hover to reveal it */
.select-row { display: flex; align-items: center; gap: 6px; }
.select-row.is-off .setting { opacity: 0.5; }
.select-row__eye { width: 34px; padding: 0; justify-content: center; flex-shrink: 0; }
.rchips__list { display: contents; }
.rchip.is-follow { border-color: var(--text); box-shadow: 0 0 0 2px var(--stroke-2), var(--shadow); }
.rchip.is-off { opacity: 0.45; }
.rchip--add { color: var(--muted); border-style: dashed; padding: 0 14px; }

/* ── Playback dock ── */
.dock-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--gap); width: min(760px, calc(100vw - 2 * var(--inset))); }
.dock { width: 100%; border-radius: var(--r-2xl); padding: 10px 14px 10px 10px; display: flex; align-items: center; gap: 12px; }
.play-btn { width: 50px; height: 50px; border-radius: 50%; background: var(--volt); color: var(--on-accent); font-size: 18px; flex-shrink: 0; box-shadow: 0 0 22px var(--volt-glow); }
.play-btn:hover { background: var(--volt-2); }
.dock__time { font-family: var(--mono); font-size: 13px; min-width: 50px; }
.dock__time--end { color: var(--muted); text-align: right; }
.speed-chip { font-family: var(--mono); font-size: 13px; font-weight: 700; height: 34px; min-width: 50px; padding: 0 10px; border-radius: var(--r-pill); border: 1px solid var(--stroke-2); }
.speed-chip:hover { border-color: var(--volt); color: var(--volt); }

/* ── Scrubber (role="slider") ── */
.scrub { flex: 1; position: relative; height: 34px; cursor: pointer; touch-action: none; }
.scrub__rail { position: absolute; left: 0; right: 0; top: 15px; height: 4px; border-radius: 2px; background: var(--stroke-2); }
.scrub__fill { position: absolute; left: 0; top: 15px; height: 4px; border-radius: 2px; background: var(--volt); }
.scrub__knob { position: absolute; top: 9px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 4px var(--volt-glow); }
.scrub__tick { position: absolute; top: 13px; width: 2px; height: 8px; margin-left: -1px; border-radius: 1px; background: var(--course); opacity: 0.8; }
.scrub__tick.is-done { opacity: 0.35; }
.scrub__tip {
    position: absolute; bottom: 34px; transform: translateX(-50%); white-space: nowrap; pointer-events: none;
    background: var(--glass-2); border: 1px solid var(--stroke-2); padding: 3px 8px; border-radius: 6px; font-size: 11.5px; display: none;
}
.scrub:hover .scrub__tip { display: block; }

/* ── Info card (leg card) ── */
.info-card { border-radius: 18px; padding: 14px 16px; width: 250px; display: flex; flex-direction: column; gap: 10px; }
.info-card__head { display: flex; align-items: baseline; gap: 8px; }
.info-card__eyebrow { color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.info-card__hero { font-size: var(--fs-hero); font-weight: 800; letter-spacing: -0.5px; color: var(--course); }
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kpi small { display: block; color: var(--muted); font-size: var(--fs-xs); }
.kpi b { font-family: var(--mono); font-size: var(--fs-lg); font-weight: 600; }
.link-btn { font-size: 12px; font-weight: 600; color: var(--volt); text-align: left; }

/* ── Popover & menu ── */
.popover { position: fixed; width: 300px; border-radius: 18px; z-index: var(--z-popover); padding: 16px; display: none; flex-direction: column; gap: 14px; }
.popover.is-open { display: flex; }
.popover__head { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 14px; }
.menu { position: fixed; width: 270px; border-radius: var(--r-lg); z-index: var(--z-popover); padding: 6px; display: none; flex-direction: column; }
.menu.is-open { display: flex; }
.menu__item { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 10px; text-align: left; font-size: var(--fs-md); }
.menu__item[hidden] { display: none; }   /* e.g. Admin, only for admins */
.menu__item:hover, .menu__item:focus-visible { background: var(--glass-hi); box-shadow: none; }
.menu__item > i:first-child { width: 18px; text-align: center; color: var(--muted); }
.menu__item > kbd { margin-left: auto; }
.menu__sep { border: none; height: 1px; background: var(--stroke); margin: 4px 8px; }

/* ── Base-map picker ── */
.base-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.base-grid > button { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }
.base-grid__swatch { width: 56px; height: 56px; border-radius: var(--r-md); background: var(--glass-2) center / cover; border: 2px solid transparent; }
.base-grid > button.is-on { color: var(--text); }
.base-grid > button.is-on .base-grid__swatch { border-color: var(--volt); }

/* ── Bottom sheet ── */
.sheet {
    position: fixed; left: 50%; bottom: 0; transform: translate(-50%, 100%);
    width: min(980px, 100%); max-height: 62vh; z-index: var(--z-sheet);
    border-radius: var(--r-2xl) var(--r-2xl) 0 0; display: flex; flex-direction: column;
    transition: transform var(--t-sheet) var(--ease-out);
}
.sheet.is-open { transform: translate(-50%, 0); }
.sheet__grab { width: 44px; height: 5px; border-radius: 3px; background: var(--stroke-2); margin: 10px auto 4px; }
.sheet__head { display: flex; justify-content: space-between; align-items: center; gap: var(--gap); padding: 6px 20px 12px; }
.sheet__title { font-size: 17px; font-weight: 700; }
.sheet__body { overflow: auto; padding: 0 20px 20px; }

/* ── Dialog ── */
.dialog-backdrop { position: fixed; inset: 0; background: var(--scrim); z-index: var(--z-dialog); display: none; align-items: center; justify-content: center; padding: 20px; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.dialog-backdrop.is-open { display: flex; }
.dialog { width: min(520px, 100%); max-height: 100%; overflow: auto; border-radius: var(--r-2xl); padding: 22px; display: flex; flex-direction: column; gap: 16px; background: var(--glass-2); border: 1px solid var(--stroke); box-shadow: var(--shadow); }
.dialog__title { font-size: var(--fs-xl); font-weight: 800; }
.dialog__sub { color: var(--muted); font-size: 13px; margin-top: 3px; }
.dialog__foot { display: flex; justify-content: flex-end; gap: var(--gap); }
/* Make from OpenStreetMap (issue #40): a wide dialog around a Leaflet map with a draggable area */
.dialog--wide { width: min(780px, 100%); }
.osm-map { height: min(46vh, 380px); border-radius: var(--r-lg); border: 1px solid var(--stroke); overflow: hidden; background: var(--map-bg); }
.osm-handle { width: 18px; height: 18px; border-radius: 50%; background: var(--volt); border: 2px solid var(--white); box-shadow: var(--shadow-sm); cursor: nwse-resize; }
.osm-handle--move { background: var(--white); border-color: var(--volt); cursor: move; }
.option-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.option-card { border: 1.5px solid var(--stroke-2); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); font-weight: 600; }
.option-card.is-on { border-color: var(--volt); color: var(--text); background: var(--volt-soft); }
.code-boxes { display: flex; gap: var(--gap); justify-content: center; }
.code-boxes input { width: 60px; height: 72px; text-align: center; font-family: var(--mono); font-size: 32px; font-weight: 700; background: var(--well); border: 2px solid var(--stroke-2); border-radius: 14px; outline: none; text-transform: uppercase; }
.code-boxes input:focus { border-color: var(--volt); box-shadow: 0 0 0 4px var(--volt-glow); }

/* ── Command palette ── */
.palette-backdrop { position: fixed; inset: 0; background: var(--scrim-light); z-index: var(--z-palette); display: none; justify-content: center; align-items: flex-start; padding-top: 14vh; }
.palette-backdrop.is-open { display: flex; }
.palette { width: min(600px, calc(100% - 32px)); border-radius: 18px; overflow: hidden; background: var(--glass-2); border: 1px solid var(--stroke); box-shadow: var(--shadow); }
.palette__input { width: 100%; background: none; border: none; outline: none; padding: 18px 20px; font-size: 16px; border-bottom: 1px solid var(--stroke); }
.palette__list { max-height: 50vh; overflow-y: auto; padding: 6px; }
.palette__group { font-size: var(--fs-xs); color: var(--dim); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 10px 12px 4px; }
.palette__item { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 10px; width: 100%; text-align: left; }
.palette__item > i:first-child { width: 18px; text-align: center; color: var(--muted); }
.palette__item.is-selected { background: var(--volt-soft); }
.palette__item.is-selected > i:first-child { color: var(--volt); }
.palette__hint { margin-left: auto; color: var(--dim); font-size: 12px; }
.palette__foot { border-top: 1px solid var(--stroke); padding: 8px 14px; font-size: 11.5px; color: var(--dim); display: flex; gap: 14px; }

/* ── Toast & recording bar ── */
.toast {
    position: fixed; left: 50%; bottom: 150px; transform: translate(-50%, 10px);
    background: var(--glass-2); border: 1px solid var(--stroke-2); padding: 10px 16px; border-radius: var(--r-md);
    font-size: 13px; z-index: var(--z-toast); opacity: 0; transition: opacity var(--t-med), transform var(--t-med); pointer-events: none;
}
.toast.is-shown { opacity: 1; transform: translate(-50%, 0); }
.update-bar {
    position: fixed; top: calc(var(--inset) + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); z-index: var(--z-toast);
    display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); padding: 6px 6px 6px 14px; border-radius: var(--r-pill);
    background: var(--glass-2); border: 1px solid var(--stroke-2); box-shadow: var(--shadow-sm); font-size: 13px; font-weight: 600;
}
.update-bar[hidden] { display: none; }
.update-bar > i { color: var(--volt); }
.update-bar__close { width: 28px; height: 28px; border-radius: 50%; color: var(--muted); display: grid; place-items: center; }
.update-bar__close:hover { color: var(--text); background: var(--glass-hi); }
.rec-bar { position: fixed; top: var(--inset); left: 50%; transform: translateX(-50%); z-index: var(--z-recording); height: 40px; border-radius: var(--r-pill); padding: 0 8px 0 16px; background: var(--rose); color: var(--white); font-weight: 700; font-size: 13px; display: none; align-items: center; gap: 10px; box-shadow: 0 8px 30px var(--rose-glow); }
.rec-bar.is-on { display: flex; }
.rec-bar__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--white); animation: gw-blink 1s infinite; }
@keyframes gw-blink { 50% { opacity: 0.25; } }

/* ── Studio: stage pill ── */
.stages { border-radius: var(--r-pill); padding: 5px; display: flex; gap: 4px; align-items: center; }
.stage { height: 40px; padding: 0 16px; border-radius: var(--r-pill); display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; color: var(--muted); }
.stage__num { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--stroke-2); display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-xs); }
.stage.is-current { background: var(--text); color: var(--on-light); }
.stage.is-current .stage__num { border-color: var(--on-light); }
.stage.is-done .stage__num { background: var(--volt); border-color: var(--volt); color: var(--on-accent); }

/* ── Studio: tool rail ── */
.tool-rail { border-radius: 18px; padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.tool { width: 46px; height: 46px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--muted); position: relative; }
.tool:hover { background: var(--glass-hi); color: var(--text); }
.tool.is-on { background: var(--volt); color: var(--on-accent); }
.tool__key { position: absolute; right: 3px; bottom: 2px; font-size: 9px; font-family: var(--mono); opacity: 0.7; }
.tool svg { width: 20px; height: 20px; }
.tool-rail__sep { border: none; height: 1px; background: var(--stroke); margin: 2px 6px; }

/* ── Studio: HUD and pills ── */
.hud { border-radius: var(--r-pill); padding: 6px 6px 6px 8px; display: flex; gap: var(--gap); align-items: center; white-space: nowrap; }
.hud__step { width: 34px; height: 34px; border-radius: 50%; background: var(--volt); color: var(--on-accent); font-weight: 800; display: flex; align-items: center; justify-content: center; }
.hud__msg { font-size: var(--fs-md); }
.hud__msg b { color: var(--volt-2); }
.fit-pill, .warn-pill { height: 34px; padding: 0 12px; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 700; display: flex; align-items: center; gap: 8px; }
.fit-pill { background: var(--volt-soft); color: var(--volt-2); font-family: var(--mono); }
.fit-pill.is-warn { background: var(--amber-soft); color: var(--amber-2); }
.fit-pill__led { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.warn-pill { background: var(--rose-soft); color: var(--rose-2); }

/* ── Studio: inspector ── */
.inspector { width: 300px; border-radius: 18px; display: flex; flex-direction: column; overflow: hidden; }
.inspector__head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--stroke); font-weight: 700; font-size: 13px; }
.inspector__list { overflow-y: auto; padding: 6px; }
.gcp-row { display: grid; grid-template-columns: 26px 1fr 54px 26px 26px; gap: 6px; align-items: center; padding: 6px; border-radius: 10px; font-size: var(--fs-sm); }
.gcp-row:hover, .gcp-row.is-selected { background: var(--glass-hi); }
.gcp-row.is-off { opacity: 0.45; }
.gcp-row__id { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: var(--fs-xs); color: var(--on-light); }
.bar { height: 5px; border-radius: 3px; background: var(--glass-hi); overflow: hidden; }
.bar > div { height: 100%; }

/* ── Studio: picture-in-picture scan window ── */
.pip { position: fixed; width: 440px; height: 340px; min-width: 260px; min-height: 200px; resize: both; border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; z-index: var(--z-chrome-hi); }
.pip.is-target { box-shadow: 0 0 0 3px var(--volt), var(--shadow); }
.pip__bar { height: 38px; flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 0 8px 0 14px; font-size: var(--fs-sm); font-weight: 700; cursor: move; border-bottom: 1px solid var(--stroke); user-select: none; }
.pip__body { flex: 1; position: relative; }
.swipe-handle { position: fixed; top: 0; bottom: 0; width: 4px; margin-left: -2px; background: var(--white); z-index: var(--z-overlay); cursor: ew-resize; box-shadow: var(--shadow-sm); }

/* ── Empty state ── */
.empty-state { position: fixed; inset: 0; z-index: var(--z-chrome-hi); display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.empty-card { width: min(560px, 90%); border-radius: 26px; padding: 34px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; background: var(--glass-2); border: 1.5px dashed var(--stroke-2); }
.empty-card__icon { width: 76px; height: 76px; border-radius: 22px; background: var(--volt-soft); color: var(--volt); font-size: 30px; display: flex; align-items: center; justify-content: center; }
.empty-card__title { font-size: var(--fs-2xl); font-weight: 800; }
.empty-card p { color: var(--muted); font-size: var(--fs-md); line-height: 1.5; }

/* ── Map markers (Leaflet divIcons; className goes on the icon root) ── */
.course-pin { background: none; border: none; }
.course-pin__inner { position: absolute; left: 50%; top: 0; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; }
.course-pin__bubble { background: var(--glass-2); border: 1px solid var(--stroke-2); font-size: 12px; font-weight: 700; padding: 5px 9px; border-radius: var(--r-pill); white-space: nowrap; display: flex; gap: 6px; align-items: center; box-shadow: var(--shadow-sm); transition: transform var(--t-fast); }
.course-pin__stem { width: 2px; height: 8px; background: var(--stroke-2); }
.course-pin.is-hl .course-pin__bubble { background: var(--volt); color: var(--on-accent); transform: scale(1.1); }
.runner-marker { background: none; border: none; }
.runner-marker__dot { border-radius: 50%; box-shadow: 0 0 0 3px var(--white), var(--shadow-sm); }
.runner-marker__label { position: absolute; left: 18px; top: -3px; color: var(--white); font-size: var(--fs-xs); font-weight: 800; padding: 1px 6px; border-radius: 5px; white-space: nowrap; }
.gcp-pin { background: none; border: none; }
.gcp-pin__dot { width: 24px; height: 24px; border-radius: 50%; color: var(--on-light); font-size: var(--fs-xs); font-weight: 800; display: flex; align-items: center; justify-content: center; border: 2px solid var(--white); box-shadow: var(--shadow-sm); }
.gcp-pin.is-selected .gcp-pin__dot { box-shadow: 0 0 0 4px var(--volt-glow); }
.gcp-pin.is-pending .gcp-pin__dot { background: var(--white); animation: gw-pulse 1.2s infinite; }
@keyframes gw-pulse { 0% { box-shadow: 0 0 0 0 var(--volt-glow); } 100% { box-shadow: 0 0 0 18px transparent; } }
.ctl-num { font-weight: 800; font-size: 17px; color: var(--course); text-shadow: 0 0 3px var(--bg), 0 0 6px var(--bg); }

/* ── Responsive (UX-SPEC §12) ── */
@media (max-width: 1023px) {
    .info-card { width: auto; }
    .info-card .kpis { display: none; }
}
@media (max-width: 699px) {
    :root { --inset: 10px; }
    .fab { width: 40px; height: 40px; }
    .info-card { display: none; }
    .popover, .menu { left: var(--inset) !important; right: var(--inset) !important; width: auto; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Explore & Place (S3) — UX-SPEC §5.1–5.2
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Side sheet (desktop) / bottom sheet (phone) ── */
.side-sheet {
    position: fixed; top: var(--inset); left: var(--inset); bottom: var(--inset); width: 390px;
    z-index: var(--z-chrome); border-radius: var(--r-xl); display: flex; flex-direction: column; overflow: hidden;
}
.search-bar { display: flex; align-items: center; gap: var(--gap); padding: 0 16px; height: 56px; border-bottom: 1px solid var(--stroke); flex-shrink: 0; }
.search-bar__logo { width: 30px; height: 30px; flex-shrink: 0; background: url(../../../assets/brand/osplit-symbol-small.svg) center / contain no-repeat; }
.search-bar input { flex: 1; min-width: 0; background: none; border: none; outline: none; font-size: var(--fs-lg); }
.search-bar input::placeholder { color: var(--dim); }
.side-sheet__mode { margin: 4px 16px 0; flex-shrink: 0; }
.side-sheet__chips { padding: 12px 16px; flex-shrink: 0; }
.list-heading { position: sticky; top: 0; z-index: 1; padding: 10px 8px 4px; font-size: var(--fs-xs); font-weight: 700; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; background: var(--glass-2); backdrop-filter: blur(8px); }
.event.is-open { background: var(--glass-hi); border-radius: var(--r-md); }
.event__courses { padding: 0 0 6px 24px; }
.result--sub { padding: 8px; }
.area__head { display: flex; gap: 12px; align-items: flex-start; padding: 16px 20px 12px; flex-shrink: 0; }
.area__head .fab { flex-shrink: 0; }
.place__body.area__body { margin-top: 0; padding-top: 4px; }
.list-heading--card { position: static; background: none; backdrop-filter: none; padding-left: 0; }
.event__head { display: flex; flex-direction: column; padding: 4px 8px 0; font-size: 14px; }
.side-sheet__meta { padding: 2px 18px 8px; font-size: 12px; color: var(--muted); display: flex; justify-content: space-between; gap: var(--gap); }
.side-sheet__body { flex: 1; overflow-y: auto; padding: 0 10px 10px; }
.side-sheet__foot { padding: 12px 16px; border-top: 1px solid var(--stroke); display: flex; gap: 8px; flex-shrink: 0; }

/* ── Result rows ── */
.result { display: flex; gap: 12px; padding: 10px 8px; border-radius: var(--r-md); width: 100%; text-align: left; align-items: center; }
.result:hover, .result.is-hl, .result:focus-visible { background: var(--glass-hi); }
.result__thumb { width: 64px; height: 64px; border-radius: 10px; flex-shrink: 0; border: 1px solid var(--stroke); background: var(--glass-2) center / 260% no-repeat; }
.result__body { flex: 1; min-width: 0; }
.result__title { font-size: 14px; font-weight: 700; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.result__line { color: var(--muted); font-size: 12px; display: block; margin-top: 2px; }
.result__chev { color: var(--dim); font-size: 12px; }
.inline-note { margin: 8px; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--stroke); color: var(--muted); font-size: var(--fs-sm); display: flex; gap: 10px; align-items: flex-start; }
.inline-note.is-warn { border-color: color-mix(in srgb, var(--amber) 40%, transparent); background: var(--amber-soft); color: var(--amber-2); }
.inline-note button { margin-left: auto; }

/* ── Skeleton loading rows ── */
.skeleton { display: flex; gap: 12px; padding: 10px 8px; align-items: center; }
.skeleton__block { background: linear-gradient(90deg, var(--glass-hi), var(--glass-press), var(--glass-hi)); background-size: 200% 100%; animation: gw-shimmer 1.2s infinite linear; border-radius: 8px; }
@keyframes gw-shimmer { to { background-position: -200% 0; } }

/* ── Place card ── */
.place__hero { height: 200px; flex-shrink: 0; position: relative; background: var(--glass-2) 40% 50% / 190% no-repeat; }
.place__hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 40%, var(--glass-2)); }
.place__back { position: absolute; top: 12px; left: 12px; z-index: 2; background: var(--scrim); }
.place__body { padding: 0 20px 20px; margin-top: -40px; position: relative; z-index: 2; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; flex: 1; }
.place__eyebrow { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; }
.place__title { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -0.3px; line-height: 1.15; }
.place__sub { color: var(--muted); font-size: 13px; margin-top: 3px; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--stroke); border-radius: 14px; overflow: hidden; }
.stat-grid > div { padding: 10px 6px; text-align: center; }
.stat-grid > div + div { border-left: 1px solid var(--stroke); }
.stat-grid b { font-family: var(--mono); font-size: var(--fs-lg); display: block; }
.stat-grid small { color: var(--muted); font-size: var(--fs-xs); }
.place__share { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
.place__share .btn { padding: 0 6px; gap: 6px; white-space: nowrap; }
.icon-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.icon-action { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px; border-radius: var(--r-md); font-size: 11.5px; color: var(--muted); font-weight: 600; text-decoration: none; }
.icon-action > i { width: 40px; height: 40px; border-radius: 50%; background: var(--glass-hi); border: 1px solid var(--stroke); display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--text); }
.icon-action:hover > i { border-color: var(--volt); color: var(--volt); }
.icon-action[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }
.section-title { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px; }
.lb-row { display: grid; grid-template-columns: 18px 10px 1fr auto; gap: 10px; align-items: center; padding: 8px 2px; border-bottom: 1px solid var(--stroke); font-size: 13px; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* ── Cluster pin ── */
.cluster-pin { background: none; border: none; }
.cluster-pin__bubble { transform: translate(-50%, -50%); min-width: 36px; height: 36px; padding: 0 8px; border-radius: var(--r-pill); background: var(--volt); color: var(--on-accent); font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 5px var(--volt-glow), var(--shadow-sm); cursor: pointer; }
.course-pin__bubble { cursor: pointer; }
.cluster-popup .leaflet-popup-content-wrapper { background: var(--glass-2); color: var(--text); border: 1px solid var(--stroke-2); border-radius: var(--r-md); box-shadow: var(--shadow); padding: 0; backdrop-filter: blur(14px); }
.cluster-popup .leaflet-popup-content { margin: 6px; min-width: 190px; max-width: 280px; }
.cluster-popup .leaflet-popup-tip { background: var(--glass-2); }
.cluster-list { display: flex; flex-direction: column; max-height: 240px; overflow-y: auto; }
.cluster-list__item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; text-align: left; font-size: 13px; font-weight: 600; }
.cluster-list__item:hover, .cluster-list__item:focus-visible { background: var(--glass-hi); }
.cluster-list__item small { color: var(--muted); font-weight: 500; }
.area-outline { cursor: pointer; }

/* ── Open-files drop zone ── */
.dropzone { border: 1.5px dashed var(--stroke-2); border-radius: var(--r-lg); padding: 24px; text-align: center; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.dropzone.is-over { border-color: var(--volt); background: var(--volt-soft); color: var(--text); }
.dropzone > i { font-size: 26px; color: var(--volt); }
.file-rows { display: flex; flex-direction: column; gap: 4px; }
.file-row { display: grid; grid-template-columns: 20px 1fr auto; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 8px; font-size: var(--fs-sm); }
.file-row.is-ok > i { color: var(--volt-2); }
.file-row.is-bad > i { color: var(--rose-2); }
.file-row small { color: var(--muted); }

/* ── Phone: sheets become bottom sheets (UX-SPEC §12) ── */
.sheet-handle { display: none; }
@media (max-width: 699px) {
    .side-sheet { top: auto; left: 0; right: 0; bottom: 0; width: 100%; height: 58vh; border-radius: var(--r-2xl) var(--r-2xl) 0 0; }
    /* Explore swipes between peek (search bar only), half and full (ui/bottom-sheet.js) */
    #explore { --sheet-peek: 76px; transition: height var(--t-sheet) var(--ease-out); }   /* JS sets the measured peek */
    #explore.is-peek { height: var(--sheet-peek); }
    #explore.is-full { height: 90vh; }
    #explore.is-dragging { transition: none; user-select: none; }
    #explore .search-bar, #explore .side-sheet__meta, #explore .side-sheet__mode { touch-action: none; }
    #explore .side-sheet__chips { touch-action: pan-x; }
    .sheet-handle { display: flex; justify-content: center; align-items: center; height: 20px; flex-shrink: 0; width: 100%; touch-action: none; cursor: grab; }
    .sheet-handle::before { content: ""; width: 44px; height: 5px; border-radius: 3px; background: var(--stroke-2); }
    .sheet-handle + .search-bar { height: 48px; }
    .place__hero { height: 140px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Replay (S4) — UX-SPEC §5.3, §6, §7
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Chrome ── */
.popover--stack { top: var(--inset); right: calc(var(--inset) + 56px); }
.popover--select { bottom: 150px; left: 50%; transform: translateX(-50%); max-height: 50vh; }
.select-list { overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.compass-icon { display: inline-block; transform: rotate(-45deg); transition: transform var(--t-fast); }
.leg-who { margin-left: auto; font-size: var(--fs-sm); color: var(--muted); display: inline-flex; align-items: center; gap: 6px; max-width: 110px; overflow: hidden; white-space: nowrap; }
.link-btn kbd { margin-left: 4px; }
.info-card .kpi b { font-size: var(--fs-md); }
/* No tracks yet: a compact bar above the dock, so the course can still be browsed (#22) */
.notracks-bar { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 8px 12px; width: 100%; padding: 10px 14px; border-radius: var(--r-xl); font-size: var(--fs-sm); }
.notracks-bar[hidden], .is-notracks .dock, .is-notracks [data-rp="addBtn"] { display: none; }
.notracks-bar__icon { color: var(--volt); font-size: var(--fs-lg); }
.notracks-bar__text { flex: 1 1 260px; color: var(--muted); line-height: 1.4; }
.notracks-bar__text b { color: var(--text); }
.notracks-bar__actions { display: flex; gap: 8px; }
.speed-chip:disabled, .play-btn:disabled { box-shadow: none; }

/* Recording: only the dock and the REC bar remain */
body.is-recording .replay-chrome, body.is-recording #analysis { display: none !important; }
.rec-bar__stop { background: var(--white); color: var(--rose); border-color: transparent; }
.rec-bar__stop:hover { background: var(--white); opacity: 0.9; }

/* ── Analysis sheet ── */
#analysis .sheet__head { flex-wrap: wrap; }
.splits { border-collapse: separate; border-spacing: 0; width: 100%; font-size: var(--fs-sm); }
.splits th, .splits td { padding: 7px 10px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--stroke); }
.splits thead th { position: sticky; top: 0; background: var(--glass-2); font-weight: 700; z-index: 1; }
.splits th:first-child { text-align: left; }
.splits tbody th { font-weight: 700; color: var(--course); font-family: var(--mono); }
.splits td { --loss: 0; font-family: var(--mono); font-variant-numeric: tabular-nums; }   /* --loss: 0–1, set per cell */
.splits td small { color: var(--muted); margin-left: 3px; font-size: var(--fs-xs); }
.splits td.is-best { background: color-mix(in srgb, var(--volt) 22%, transparent); }
.splits td.is-loss { background: color-mix(in srgb, var(--rose) calc(var(--loss) * 55%), transparent); }
.splits__miss { color: var(--dim); }
.splits tbody tr { cursor: pointer; }
.splits tbody tr:hover th, .splits tbody tr:focus-visible th { text-decoration: underline; }
.splits tbody tr.is-current th { background: var(--course-soft); }
.splits tbody tr.is-current td { box-shadow: inset 0 1px 0 var(--course), inset 0 -1px 0 var(--course); }

.tl { --tl-name: 130px; position: relative; display: flex; flex-direction: column; gap: 6px; padding: 4px 0; }
.tl__lane { display: grid; grid-template-columns: var(--tl-name) 1fr; align-items: center; cursor: pointer; }
.tl__name { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 600; overflow: hidden; white-space: nowrap; padding-right: 8px; }
.tl__track { position: relative; height: 24px; border-radius: 6px; background: var(--glass-hi); }
.tl__block { position: absolute; top: 2px; bottom: 2px; border-radius: 4px; color: var(--white); font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: inset -1px 0 0 var(--bg); }
.tl__playhead { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--text); pointer-events: none; }
.chart { position: relative; }
.chart svg { display: block; }
.chart__grid { stroke: var(--stroke); stroke-width: 1; }
.chart__axis { fill: var(--muted); font-size: 11px; font-family: var(--mono); }
.chart__cross { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.chart__tip { position: absolute; top: 8px; min-width: 150px; background: var(--glass-2); border: 1px solid var(--stroke-2); border-radius: var(--r-sm); padding: 8px 10px; font-size: var(--fs-sm); pointer-events: none; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 3px; }
.chart__tip .mono { margin-left: auto; padding-left: 10px; }
.chart__tip > div { display: flex; align-items: center; gap: 6px; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: var(--fs-sm); color: var(--muted); }
.chart-legend > span { display: inline-flex; align-items: center; gap: 6px; }

/* ── Dialogs ── */
.option-card { cursor: pointer; display: grid; grid-template-rows: 40px auto; justify-items: center; align-items: center; }
.ratio { display: block; border: 2px solid currentColor; border-radius: 4px; }
.ratio--16x9 { width: 48px; height: 27px; }
.ratio--1x1 { width: 32px; height: 32px; }
.ratio--9x16 { width: 22px; height: 38px; }
.print-preview { display: flex; justify-content: center; align-items: center; min-height: 170px; padding: 10px; border-radius: var(--r-md); background: var(--well); }
.print-preview__sheet { background: var(--white); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); overflow: hidden; }
.print-preview__map { background: var(--glass-2) center / 100% 100% no-repeat; outline: 1px solid var(--course-print); flex-shrink: 0; }
.print-preview__map.is-over { outline: 2px solid var(--rose); }
.print-size { font-family: var(--mono); font-size: var(--fs-sm); display: flex; align-items: center; gap: 8px; }
.print-size.is-ok { color: var(--volt-2); }
.print-size.is-warn { color: var(--amber-2); }
.steps { padding-left: 20px; color: var(--muted); font-size: var(--fs-md); display: flex; flex-direction: column; gap: 4px; }
.watch-result { min-height: 20px; font-size: var(--fs-sm); text-align: center; }
.watch-result.is-ok { color: var(--volt-2); }
.watch-result.is-bad { color: var(--rose-2); }
.keys { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px 22px; }
.keys__row { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: var(--fs-sm); border-bottom: 1px solid var(--stroke); }
.keys__row kbd { white-space: nowrap; }

/* Chips scroll horizontally; fade the edges so clipped chips read as "more" */
.dock-wrap > .rchips { width: min(1000px, calc(100vw - 2 * var(--inset) - 540px)); max-width: none; min-width: 100%; }
.rchips { justify-content: safe center; -webkit-mask-image: linear-gradient(to right, transparent, var(--bg) 12px, var(--bg) calc(100% - 12px), transparent); mask-image: linear-gradient(to right, transparent, var(--bg) 12px, var(--bg) calc(100% - 12px), transparent); padding: 2px 12px; }
.ctx-chip { max-width: calc(100vw - 2 * var(--inset) - 60px); }
.ctx-chip > div { min-width: 0; }
.ctx-chip__title, .ctx-chip__sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 699px) {
    .popover--select { bottom: 150px; transform: none; }
    .option-card { font-size: var(--fs-xs); }
    .dock { flex-wrap: wrap; row-gap: 4px; padding: 8px 12px 10px; }
    .dock .scrub { order: -1; flex-basis: 100%; }
    .dock .play-btn { width: 44px; height: 44px; }
    .dock__time--end { margin-left: auto; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Studio (S5) — UX-SPEC §5.4
   ══════════════════════════════════════════════════════════════════════════ */

/* Which chrome shows at which stage (body[data-stage] = empty | align | course | publish) */
body[data-stage="empty"] .only-project,
body:not([data-stage="align"]) .only-align { display: none !important; }

body.is-split .studio-sat { left: 50vw; }
.studio-sat-error { position: fixed; inset: 0; z-index: var(--z-overlay); display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; color: var(--muted); background: var(--map-bg); }

.place-search { top: calc(var(--inset) + 62px); left: var(--inset); height: 40px; width: 260px; border-radius: var(--r-pill); display: flex; align-items: center; gap: 8px; padding: 0 14px; color: var(--muted); }
.place-search input { flex: 1; min-width: 0; background: none; border: none; outline: none; color: var(--text); }
/* Split view: the scan takes the left half, so chrome centres on the right half */
body.is-split .place-search, body.is-split .ctx-chip { left: calc(50vw + var(--inset)); }
body.is-split .float--tc, body.is-split .float--bc { left: 75vw; }
body.is-split .float--tc { top: calc(var(--inset) + 62px); }
body.is-split .place-search { top: calc(var(--inset) + 116px); }
body.is-split .hud__msg { white-space: normal; max-width: 260px; }

/* Stage pill + completion checklists (hover / focus) */
.stage-wrap { position: relative; }
.stage[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.stage-check { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); min-width: 230px; border-radius: var(--r-md); padding: 10px 12px; display: none; flex-direction: column; gap: 6px; font-size: var(--fs-sm); z-index: var(--z-popover); }
.stage-wrap:hover .stage-check, .stage-wrap:focus-within .stage-check { display: flex; }
.stage-check__item { display: flex; gap: 8px; align-items: center; white-space: nowrap; }
.stage-check__item.is-ok > i { color: var(--volt-2); }
.stage-check__item.is-todo > i { color: var(--dim); }
.stage-check__item.is-todo.is-required > i { color: var(--amber-2); }

/* Tool rail */
.studio-rail { left: var(--inset); top: 50%; transform: translateY(-50%); }
body.is-split .studio-rail { left: calc(50vw + var(--inset)); }
.tool[aria-pressed="true"] { background: var(--volt); color: var(--on-accent); }
.tool--type { font-size: 11px; font-weight: 800; }
.tool--type.is-course[aria-pressed="true"] { background: var(--course); color: var(--on-light); }
.btn[data-cmd="studio.flip"][aria-pressed="true"], .btn[data-cmd="studio.allControls"][aria-pressed="true"] { background: var(--course-soft); color: var(--course); border-color: var(--course); }

/* Scan window */
.pip { top: calc(var(--inset) + 114px); left: calc(var(--inset) + 72px); }
.pip.is-target { box-shadow: 0 0 0 3px var(--volt), var(--shadow); }
.pip__body { position: relative; }
.scan-map { position: absolute; inset: 0; background: var(--map-bg); }
body.is-split .pip { left: 0 !important; top: 0 !important; width: 50vw !important; height: 100vh !important; border-radius: 0; resize: none; }
body.is-split .pip__bar { cursor: default; }
.studio-sat.is-target { box-shadow: inset 0 0 0 3px var(--volt); }

/* Satellite overlay (Google OverlayView panes) */
.sat-preview { position: absolute; max-width: none; pointer-events: none; image-rendering: auto; }
.sat-course { position: absolute; overflow: visible; pointer-events: none; }
.sat-course__line { fill: none; stroke: var(--course); stroke-width: 2.5; }
.sat-course__num { fill: var(--course); font: 800 16px var(--font); paint-order: stroke; stroke: var(--bg); stroke-width: 3px; }
.sat-course__flip { fill: var(--course); font: 800 18px var(--font); paint-order: stroke; stroke: var(--bg); stroke-width: 3px; }
.sat-sites { position: absolute; overflow: visible; pointer-events: none; }
.sat-site__ring { fill: var(--course-soft); stroke: var(--course); stroke-opacity: 0.55; stroke-width: 1.5; stroke-dasharray: 3 3; }
.sat-site__inner { fill: none; stroke: var(--course); stroke-opacity: 0.55; stroke-width: 1.5; stroke-dasharray: 3 3; }
.sat-site__inner.is-hover { stroke-opacity: 1; stroke-width: 2.5; stroke-dasharray: none; }
.sat-site__ring.is-hover { stroke-opacity: 1; stroke-width: 2.5; stroke-dasharray: none; fill: var(--course-soft); }
.sat-site__num { fill: var(--course); fill-opacity: 0.8; font: 700 13px var(--font); paint-order: stroke; stroke: var(--bg); stroke-width: 3px; }
.sat-site__num.is-hover { fill-opacity: 1; font-size: 15px; }
.sat-leg { position: absolute; overflow: visible; pointer-events: none; }
.sat-leg__line { fill: none; stroke: var(--course); stroke-width: 2; stroke-dasharray: 6 5; }
.sat-leg__len { fill: var(--course); font: 700 13px var(--font); paint-order: stroke; stroke: var(--bg); stroke-width: 3px; }
.sat-course__sel { fill: none; stroke: var(--white); stroke-width: 2; stroke-dasharray: 4 3; }
.sat-pins { position: absolute; left: 0; top: 0; }
.gcp-pin--abs, .ctl-handle { position: absolute; transform: translate(-50%, -50%); cursor: grab; touch-action: none; }
.gcp-pin--abs .gcp-pin__dot { cursor: grab; }
.gcp-pin.is-off .gcp-pin__dot { opacity: 0.45; }
.ctl-handle { width: 26px; height: 26px; border-radius: 50%; pointer-events: auto; }
.ctl-handle:hover, .ctl-handle.is-selected { box-shadow: 0 0 0 2px var(--white); }
.ghost-cursor { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border: 2px dashed var(--white); border-radius: 50%; pointer-events: none; box-shadow: 0 0 0 1px var(--bg); }
.ghost-cursor::before, .ghost-cursor::after { content: ""; position: absolute; background: var(--white); }
.ghost-cursor::before { left: 50%; top: -8px; bottom: -8px; width: 1px; }
.ghost-cursor::after { top: 50%; left: -8px; right: -8px; height: 1px; }
.ghost-cursor--leaflet { margin: 0; }

/* Swipe handle */
.swipe-handle::after { content: "\f337"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; background: var(--white); color: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 14px; box-shadow: var(--shadow-sm); }

/* HUD */
.hud .btn { height: 34px; }
.hud__step.is-course { background: var(--course); color: var(--on-light); }
.fit-pill.is-bad { background: var(--rose-soft); color: var(--rose-2); }
.warn-pill { cursor: pointer; }

/* Inspector */
.studio-inspector { top: calc(var(--inset) + 62px); right: var(--inset); bottom: 96px; }
.gcp-row { cursor: pointer; }
.gcp-row__val { font-family: var(--mono); font-size: var(--fs-xs); text-align: right; }
.inspector__empty { padding: 14px; color: var(--muted); font-size: var(--fs-sm); }

/* Publish panel */
.pub-panel { top: calc(var(--inset) + 62px); right: var(--inset); bottom: var(--inset); width: 380px; border-radius: 18px; display: flex; flex-direction: column; overflow: hidden; z-index: var(--z-chrome); }
.pub-panel__body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.pub-panel__body > * { flex-shrink: 0; }
.pub-panel__foot { padding: 14px 16px; border-top: 1px solid var(--stroke); display: flex; flex-direction: column; gap: 8px; }
.pub-thumb { height: 150px; border-radius: var(--r-md); background: var(--well) center / contain no-repeat; border: 1px solid var(--stroke); }
.progress { height: 6px; border-radius: 3px; background: var(--glass-hi); overflow: hidden; }
.progress > div { height: 100%; background: var(--volt); transition: width var(--t-fast); }
.pub-done { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 0; }
.pub-done__tick { width: 64px; height: 64px; border-radius: 50%; background: var(--volt); color: var(--on-accent); font-size: 26px; display: flex; align-items: center; justify-content: center; }
.pub-done__url { font-family: var(--mono); font-size: var(--fs-sm); color: var(--muted); word-break: break-all; }

/* Empty state: continue a saved project */
.continue-card { width: 100%; border: 1px solid var(--stroke-2); border-radius: var(--r-md); padding: 12px 14px; display: flex; align-items: center; gap: 12px; text-align: left; }
.continue-card b { display: block; }
.continue-card small { color: var(--muted); }
.continue-card .row { margin-left: auto; }
.empty-state.is-over .empty-card { border-color: var(--volt); background: var(--volt-soft); }

@media (max-width: 1023px) {
    .pip { width: 60vw; height: 36vh; }
    .studio-inspector, .pub-panel { width: min(380px, calc(100vw - 2 * var(--inset))); }
}

/* Studio on phones: view-only notice (UX-SPEC §12) */
.studio-small { display: none; }
@media (max-width: 699px) {
    .studio-small { display: flex; gap: 10px; align-items: flex-start; position: fixed; left: var(--inset); right: var(--inset); bottom: calc(var(--inset) + 70px); z-index: var(--z-popover); border-radius: var(--r-md); padding: 12px 14px; font-size: var(--fs-sm); }
    .studio-rail, .stages { display: none !important; }
}
.sat-canvas { width: 100%; height: 100%; }

/* ══════════════════════════════════════════════════════════════════════════
   Accounts (S4) — sign-in button, avatar menu, chooser, Account sheet
   ══════════════════════════════════════════════════════════════════════════ */
.avatar-btn {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--glass); border: 1px solid var(--stroke-2); color: var(--text);
    font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.02em;
    -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
    box-shadow: var(--shadow);
}
.avatar-btn:hover { background: var(--glass-2); }
.acct-menu { top: calc(var(--inset) + 48px); right: var(--inset); width: 250px; }
.acct-menu__who { display: flex; flex-direction: column; padding: 8px 12px 4px; min-width: 0; }
.acct-menu__who b, .acct-menu__who small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-menu__who small { color: var(--muted); font-size: var(--fs-xs); }

.badge {
    display: inline-flex; align-items: center; padding: 1px 8px; border-radius: var(--r-pill);
    background: var(--glass-hi); border: 1px solid var(--stroke-2); color: var(--muted);
    font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.04em;
}
.badge--dev { background: var(--amber-soft); border-color: color-mix(in srgb, var(--amber) 40%, transparent); color: var(--amber-2); align-self: flex-start; }

.chooser__dev { display: flex; flex-direction: column; gap: 10px; }
.chooser__hint { font-size: var(--fs-sm); margin-top: -6px; }
.chooser__error { margin: 0; }

.account__head { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--stroke); flex-shrink: 0; }
.account__who { min-width: 0; }
.account__who .place__title, .account__who .place__sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account__body { padding: 0 16px 16px; display: flex; flex-direction: column; }
.account-section { padding: 16px 0; border-bottom: 1px solid var(--stroke); display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.account-section .section-title { margin-bottom: 0; }
.account-section .field, .account-form { align-self: stretch; }
.account-form { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.account-form .field { align-self: stretch; }
.account__email { overflow-wrap: anywhere; }
.method-row { display: flex; align-items: center; gap: 12px; align-self: stretch; }
.method-row__logo { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--glass-hi); border: 1px solid var(--stroke); color: var(--muted); }
.method-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.method-row__text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.method-row__text small { color: var(--muted); font-size: var(--fs-xs); overflow-wrap: anywhere; }
.danger-zone { border: 1px solid color-mix(in srgb, var(--rose) 40%, transparent); border-radius: var(--r-md); padding: 14px; margin-top: 16px; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
@media (max-width: 699px) {
    .acct-menu { width: min(250px, calc(100vw - 2 * var(--inset))); }
    .dialog-backdrop { padding: 16px; }
}
.account__who .place__title { font-size: var(--fs-xl); }
.account__who h2:focus { outline: none; }

/* ══════════════════════════════════════════════════════════════════════════
   Maps and courses (S6) — map pins, Map card, visibility tags, versions
   ══════════════════════════════════════════════════════════════════════════ */
.course-pin__count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill); background: var(--volt); color: var(--on-accent); font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.tag--private { color: var(--rose-2); background: var(--rose-soft); }
.tag--unlisted { color: var(--amber-2); background: var(--amber-soft); }
.result__map { color: var(--dim); }
.icon-actions--3 { grid-template-columns: repeat(3, 1fr); }
.icon-actions--4 { grid-template-columns: repeat(4, 1fr); }
.icon-actions--5 { grid-template-columns: repeat(5, 1fr); }
.version-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 2px; border-bottom: 1px solid var(--stroke); }
.version-row__text { display: flex; flex-direction: column; min-width: 0; font-size: 13px; }
.version-row__text small { color: var(--muted); font-size: var(--fs-xs); overflow-wrap: anywhere; }
.badge--current { background: var(--volt-soft); border-color: var(--volt-glow); color: var(--volt-2); }
#mapCard .result { padding: 8px 2px; }
.version-row__head { display: flex; align-items: center; gap: 8px; }

/* ── Sharing tracks with a course (Open files dialog, S9) ── */
.share { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--stroke); border-radius: var(--r-xl, 14px); }
.share__switch, .share__check { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-sm); cursor: pointer; }
.share__switch input, .share__check input { margin-top: 3px; }
.share__body { display: flex; flex-direction: column; gap: 10px; }
.share__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.share__error { color: var(--rose-2); font-size: var(--fs-sm); margin: 0; }
.share__turnstile { min-height: 0; }
.linklike { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; font: inherit; }
@media (max-width: 699px) { .share__fields { grid-template-columns: 1fr; } }
.track-row { display: grid; grid-template-columns: 18px 10px 1fr auto; gap: 10px; align-items: center; padding: 8px 2px; border-bottom: 1px solid var(--stroke); font-size: 13px; }
.track-row__actions { grid-column: 3 / -1; display: flex; gap: 6px; flex-wrap: wrap; }