/* Shared atlas UI. Opaque surfaces avoid a blur pass over the live renderer. */
:root, .map-page, .viewer-page {
    --surface: #161f24f5;
    --raised: #202b30;
    --input: #101a1f;
    --hover: #ffffff08;
    --line: #354147;
    --text: #eeeae1;
    --muted: #a2b0b6;
    --accent: #d8bc83;
    --accent-line: #827354;
    --danger: #f3a399;
    --radius: 10px;
    --edge: max(16px, env(safe-area-inset-left), env(safe-area-inset-right), env(safe-area-inset-top), env(safe-area-inset-bottom));
    --shadow: 0 8px 28px #0004, 0 1px 3px #0003;
    color: var(--text);
    font: 13px/1.5 system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color-scheme: dark;
}
.map-page [hidden], .viewer-page [hidden] { display: none !important; }
.map-page :is(button, input, select, textarea), .viewer-page :is(button, input, select) { font: inherit; }
.map-page :is(button, input:not([type=checkbox]), select, textarea), .viewer-page :is(button, select) { box-sizing: border-box; border: 1px solid var(--line); border-radius: 6px; background: var(--input); color: var(--text); }
.map-page button, .viewer-page button { min-height: 36px; padding: 6px 12px; cursor: pointer; }
.map-page button:hover:not(:disabled), .viewer-page button:hover:not(:disabled) { background: var(--raised); border-color: #627071; }
.map-page button:disabled, .viewer-page :is(button, select):disabled { opacity: .45; cursor: default; }
.map-page :focus-visible, .viewer-page :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.map-page .icon-button, .viewer-page .icon-button { display: inline-flex; align-items: center; justify-content: center; padding: 0; width: 36px; height: 36px; flex-shrink: 0; font-size: 22px; background: transparent; border-color: transparent; }
.eyebrow { font-size: 9px; letter-spacing: 1.8px; font-weight: 600; color: var(--accent); }
.map-page :is(#checkboxes, #legend, #extra, .select2-results__options), .viewer-page :is(.viewer-settings-panel, .help-content) { scrollbar-width: thin; scrollbar-color: #566368 transparent; }
#map_display { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 10; }
#viewer3d-container { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #0b1419; }
#viewer3d-frame, #viewer3d-frame iframe { width: 100%; height: 100%; }
#viewer3d-frame iframe { display: block; border: 0; }
/* Leaflet retains only the library above the iframe; its other panes cannot catch input. */
:is(.map-page, body).viewer3d-active #map_display { background: transparent; pointer-events: none; }
:is(.map-page, body).viewer3d-active #map_display .leaflet-pane,
:is(.map-page, body).viewer3d-active :is(.map-only, .extra, .legend, .leaflet-control-zoom, .leaflet-control-attribution, .leaflet-draw) { display: none !important; }
:is(.map-page, body).viewer3d-active #map_display .leaflet-control { pointer-events: none; }
:is(.map-page, body).viewer3d-active :is(#checkboxes, #control_show) { pointer-events: auto; }
#close-viewer3d { position: absolute; top: var(--edge); left: calc(var(--edge) + 207px); z-index: 100; height: 44px; background: var(--surface); border-radius: 8px; box-shadow: var(--shadow); }
#map-empty, #viewer3d-transition { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); box-sizing: border-box; width: min(360px, calc(100vw - 32px)); padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); z-index: 450; }
#map-empty h2, #viewer3d-transition h2 { margin: 0 0 8px; font-size: 19px; font-weight: 550; }
#map-empty p, #viewer3d-transition p { color: var(--muted); margin: 0 0 16px; }
#empty-open-viewer3d { color: var(--accent); }
.transition-progress-track, .viewer-progress-track { height: 4px; background: #364247; border-radius: 3px; overflow: hidden; }
.transition-progress-bar { height: 100%; width: 100%; background: var(--accent); animation: transition-indeterminate 1.4s ease-in-out infinite; }
@keyframes transition-indeterminate { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.viewer-page { margin: 0; overflow: hidden; background: #0b1419; }
.viewer-page #wowcanvas { width: 100vw; height: 100dvh; display: block; touch-action: none; outline-offset: -3px; }
.viewer-page .viewer-toolbar { position: fixed; top: var(--edge); right: var(--edge); display: flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); box-shadow: var(--shadow); z-index: 110; }
.viewer3d-perf-hud { position: fixed; top: var(--edge); left: var(--edge); z-index: 1100; box-sizing: border-box; margin: 0; padding: 9px 11px; max-width: calc(100vw - 2 * var(--edge)); color: #e9f1f5; background: rgba(8,14,22,.92); border: 1px solid rgba(160,190,205,.45); border-radius: 6px; box-shadow: var(--shadow); font: 12px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace; white-space: pre-wrap; pointer-events: none; }
.viewer3d-perf-hud-embedded { left: calc(var(--edge) + 320px); max-width: min(420px, calc(100vw - 320px - var(--edge) - var(--edge))); }
.viewer-toolbar > button { border-color: transparent; background: transparent; }
.viewer-toolbar svg { width: 18px; height: 18px; fill: var(--surface); stroke: currentColor; stroke-width: 1.4; }
.viewer-embedded .viewer-back-button { display: none; }
:fullscreen .viewer-embedded .viewer-back-button { display: inline-flex; }
.viewer-menu > summary { list-style: none; min-height: 36px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; padding: 6px 12px; border-radius: 6px; }
.viewer-menu > summary::-webkit-details-marker { display: none; }
.viewer-menu > summary:hover, .viewer-menu[open] > summary { background: var(--raised); color: var(--accent); }
.viewer-settings-panel { position: absolute; right: 0; top: calc(100% + 10px); width: 286px; max-width: calc(100vw - 2 * var(--edge)); box-sizing: border-box; padding: 18px; max-height: calc(100dvh - 100px); overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.settings-heading h2, .help-content h2 { margin: 4px 0 8px; font-size: 18px; font-weight: 550; letter-spacing: -.3px; }
.settings-hint { color: var(--muted); font-size: 12px; margin: 0 0 14px; }
.viewer-toggles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
.viewer-toggle-sep { display: none; }
.viewer-page .viewer-toggle-btn { padding: 6px 4px; font-size: 11px; }
.viewer-page .viewer-toggle-btn.active { color: var(--accent); border-color: var(--accent-line); background: #38372c; }
.viewer-tile-ranges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0; padding-top: 16px; border-top: 1px solid var(--line); }
.viewer-tile-ranges-title { grid-column: 1 / -1; font-size: 12px; }
.viewer-tile-ranges-title small { float: right; color: var(--muted); font-weight: 400; }
.viewer-tile-ranges label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; }
.viewer-tile-ranges select { width: 100%; min-height: 36px; padding: 4px; }
.viewer-flight-speed { display: grid; gap: 8px; margin: 16px 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12px; }
.viewer-flight-speed select { width: 100%; min-height: 36px; padding: 6px; }
.viewer-flight-speed small { color: var(--muted); font-size: 11px; }
.viewer-perf-toggle { display: flex; align-items: center; gap: 9px; margin: 14px 0 10px; color: var(--muted); font-size: 12px; cursor: pointer; }
.viewer-perf-toggle input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.viewer-perf-toggle + .viewer-perf-toggle { margin-top: 0; }
.viewer-wireframe-layers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.viewer-ghost-controls { grid-template-columns: minmax(0, .8fr) minmax(0, .8fr) minmax(0, 1.4fr); }
.viewer-impass-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.viewer-walkability-controls { grid-template-columns: minmax(0, 1fr); }
.viewer-walkability-colors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.viewer-walkability-colors .viewer-toggle-btn { min-height: 36px; padding: 4px; line-height: 1.2; }
.viewer-page .viewer-walkability-colors .walkability-safe.active { color: #59ef75; border-color: currentColor; background: #25352f; }
.viewer-page .viewer-walkability-colors .walkability-steep.active { color: #ff6960; border-color: currentColor; background: #3b2929; }
.viewer-walkability-colors .viewer-toggle-btn:not(.active) { color: var(--muted); }
.viewer-walkability-tuning { display: grid; gap: 8px; padding: 8px; border: 1px dashed var(--line); border-radius: 6px; }
.viewer-walkability-cutoff { display: flex; align-items: center; gap: 6px; font-size: 12px; white-space: nowrap; }
.viewer-walkability-cutoff label { color: var(--muted); }
#walkability-incline-value { box-sizing: border-box; width: 64px; min-height: 30px; padding: 2px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--input); color: var(--text); font-variant-numeric: tabular-nums; }
.viewer-walkability-slider { display: flex; align-items: center; gap: 8px; }
#walkability-incline { flex: 1; min-width: 0; margin: 0; accent-color: #59ef75; }
.viewer-page #walkability-reset { flex: none; min-height: 30px; padding: 2px 10px; font-size: 11px; }
:is(#walkability-incline, #walkability-incline-value):disabled { opacity: .45; }
.viewer-walkability-hint { font-size: 11px; line-height: 1.4; color: var(--muted); }.viewer-wireframe-layers-title { grid-column: 1 / -1; font-size: 12px; }
.viewer-death-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.viewer-page .viewer-death-controls .death-floor.active { color: #ff6a55; border-color: currentColor; background: #3b2626; }
.viewer-page .viewer-death-controls .death-ceiling.active { color: #72b4ff; border-color: currentColor; background: #243244; }
.viewer-page .viewer-death-controls .death-fallback.active { color: #c68cff; border-color: currentColor; background: #33273f; }
.viewer-death-hint { grid-column: 1 / -1; font-size: 11px; line-height: 1.4; color: var(--muted); }
/* Measure: a mark at the camera, read live against the camera. */
.viewer-toolbar #viewer-measure { display: inline-flex; align-items: center; gap: 8px; }
.viewer-toolbar #viewer-measure.active { color: var(--accent); background: var(--raised); }
.viewer-measure { position: fixed; top: calc(var(--edge) + 56px); left: 50%; transform: translateX(-50%); z-index: 100; display: flex; align-items: center; gap: 6px; box-sizing: border-box; max-width: calc(100vw - 2 * var(--edge)); padding: 4px 4px 4px 12px; background: var(--surface); border: 1px solid var(--accent-line); border-radius: 8px; box-shadow: var(--shadow); }
.viewer-measure-text { display: grid; min-width: 0; }
#viewer-measure-distance { font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#viewer-measure-mark { color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viewer-page .viewer-measure .icon-button { width: 30px; height: 30px; min-height: 30px; font-size: 18px; }
/* Inspector: one placement's fields. */
.object-inspector-fields { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 10px; margin: 10px 0; font-size: 11px; }
.object-inspector-fields dt { color: var(--muted); }
.object-inspector-fields dd { margin: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.viewer-page #wowcanvas.viewer-picking { cursor: crosshair; }
.viewer-toolbar #pick-object.active { color: var(--accent); background: var(--raised); }
.viewer-pick-hint { position: fixed; left: 50%; bottom: calc(var(--edge) + 40px); transform: translateX(-50%); z-index: 90; margin: 0; padding: 8px 12px; max-width: calc(100vw - 40px); box-sizing: border-box; white-space: nowrap; font-size: 11px; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; pointer-events: none; }
.viewer-object-inspector { position: fixed; left: var(--edge); bottom: calc(var(--edge) + 46px); z-index: 100; width: 280px; max-width: calc(100vw - 2 * var(--edge)); box-sizing: border-box; padding: 16px; background: var(--surface); border: 1px solid var(--accent-line); border-radius: var(--radius); box-shadow: var(--shadow); }
.object-inspector-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.object-inspector-heading h2 { margin: 4px 0 0; font-size: 16px; font-weight: 550; overflow-wrap: anywhere; }
.viewer-object-inspector > p { margin: 10px 0; font-size: 11px; color: var(--muted); overflow-wrap: anywhere; }
.viewer-object-inspector .viewer-wireframe-layers { grid-template-columns: repeat(2, 1fr); margin-bottom: 0; }
.viewer-page .viewer-wireframe-btn { padding: 6px 4px; font-size: 11px; }
.viewer-page .viewer-wireframe-btn:disabled { opacity: .55; cursor: default; }
.viewer-page .viewer-wireframe-overlay-btn { grid-column: 1 / -1; }
#reset-camera { width: 100%; margin-top: 4px; }
#toggle-minimap[aria-pressed=true] { color: var(--accent); }
.viewer-retry { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); box-sizing: border-box; width: min(460px, calc(100vw - 32px)); padding: 28px; background: var(--surface); border: 2px solid #986359; border-radius: var(--radius); box-shadow: 0 16px 48px #0009; z-index: 200; text-align: center; }
.viewer-retry-title { margin: 0; color: var(--danger); font-size: 21px; font-weight: 700; }
.viewer-retry p { margin: 12px 0 22px; color: var(--text); font-size: 14px; overflow-wrap: anywhere; }
.viewer-page .viewer-retry button { width: 100%; min-height: 60px; padding: 12px 20px; border-color: #b48d68; background: #5c4433; color: #fff5e8; font-size: 19px; font-weight: 700; }
.viewer-page .viewer-retry button:hover:not(:disabled) { background: #76553b; border-color: var(--accent); }
.viewer-quality-note { box-sizing: border-box; display: inline-flex; flex-direction: column; justify-content: center; max-width: 280px; padding: 3px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--input); color: var(--muted); font-size: 11px; line-height: 1.3; pointer-events: none; white-space: nowrap; }
.viewer-quality-note progress { display: block; width: 100%; height: 3px; margin-top: 3px; border: 0; overflow: hidden; border-radius: 3px; background: var(--line); accent-color: var(--accent); }
.viewer-quality-note progress::-webkit-progress-bar { background: var(--line); }
.viewer-quality-note progress::-webkit-progress-value { background: var(--accent); }
.viewer-quality-note progress::-moz-progress-bar { background: var(--accent); }
.viewer-quality-note.is-ready { border-color: transparent; background: transparent; }
.viewer-quality-note.is-ready progress { display: none; }
.viewer-quality-note.has-error { color: var(--danger); border-color: #79514c; }
.viewer-help { position: fixed; left: var(--edge); bottom: var(--edge); z-index: 111; }
.viewer-help > summary { min-height: 34px; background: var(--surface); border: 1px solid var(--line); font-size: 11px; color: var(--muted); }
.viewer-help > summary span { border: 1px solid #687477; border-radius: 50%; width: 15px; height: 15px; text-align: center; font-size: 10px; }
.help-content { position: absolute; left: 0; bottom: calc(100% + 8px); width: 290px; max-width: calc(100vw - 2 * var(--edge)); max-height: calc(100dvh - 2 * var(--edge) - 50px); overflow-y: auto; box-sizing: border-box; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.help-content .help-subtitle { margin: 0 0 8px; font-size: 9px; letter-spacing: 1.6px; font-weight: 600; text-transform: uppercase; color: var(--muted); }
.help-content .help-keys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; margin: 0 0 16px; padding: 0; list-style: none; font-size: 11px; }
.help-content .help-keys kbd { margin-right: 4px; }
.help-content .help-keys:has(+ .help-toggle) { margin-bottom: 8px; }
.help-content .help-toggle { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; color: var(--muted); font-size: 11px; cursor: pointer; }
.help-content .help-toggle input { width: 14px; height: 14px; margin: 0; accent-color: var(--accent); }
.help-content .help-guide { color: var(--accent); font-size: 11px; margin-right: 10px; }
.help-content h2 { font-size: 15px; }
.help-content dl { display: grid; grid-template-columns: 1fr auto; gap: 12px; font-size: 12px; margin: 18px 0; }
.help-content dt { color: var(--muted); }
.help-content dd { margin: 0; }
.help-content kbd { font: 11px ui-monospace, monospace; background: var(--raised); border: 1px solid #526067; border-radius: 3px; padding: 2px 4px; }
.help-content #open-viewer-tour { display: block; width: 100%; margin: 0 0 14px; color: var(--accent); border-color: var(--accent-line); }
.help-content a { color: var(--muted); font-size: 10px; }
.viewer-tour { position: fixed; inset: 0; z-index: 300; }
.viewer-tour-scrim { position: fixed; inset: 0; background: #050a0dd9; pointer-events: none; }
.viewer-tour-shade { position: fixed; background: #050a0dd9; pointer-events: none; transition: left .6s cubic-bezier(.2,.75,.2,1), top .6s cubic-bezier(.2,.75,.2,1), width .6s cubic-bezier(.2,.75,.2,1), height .6s cubic-bezier(.2,.75,.2,1); }
.viewer-tour-shade-top, .viewer-tour-shade-bottom { left: 0; width: 100%; }
.viewer-tour-shade-top { top: 0; }
.viewer-tour-shade-left { left: 0; }
.viewer-tour-focus { position: fixed; box-sizing: border-box; border: 2px solid var(--accent); border-radius: 12px; box-shadow: 0 0 26px #d8bc8380; pointer-events: none; transition: left .6s cubic-bezier(.2,.75,.2,1), top .6s cubic-bezier(.2,.75,.2,1), width .6s cubic-bezier(.2,.75,.2,1), height .6s cubic-bezier(.2,.75,.2,1); }
.viewer-tour-card { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); box-sizing: border-box; width: min(540px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 30px; border: 1px solid var(--accent-line); border-radius: 14px; background: #172127; box-shadow: 0 20px 64px #000b; transition: left .6s cubic-bezier(.2,.75,.2,1), top .6s cubic-bezier(.2,.75,.2,1); }
.viewer-tour-close { position: absolute; top: 16px; right: 16px; }
.viewer-tour-step-count { margin: 18px 0 4px; color: var(--accent); font-size: 12px; font-weight: 600; }
.viewer-tour-step h2 { margin: 0 0 12px; font-size: 25px; line-height: 1.2; }
.viewer-tour-step p { margin: 0 0 14px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.viewer-tour-step strong { color: var(--text); }
.viewer-tour-tips { display: grid; grid-template-columns: minmax(115px, 1fr) 1.4fr; gap: 10px 18px; margin: 18px 0 0; padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--input); font-size: 13px; }
.viewer-tour-tips dt { color: var(--muted); }
.viewer-tour-tips dd { margin: 0; }
.viewer-tour-legend { display: grid; gap: 10px; margin: 16px 0; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--input); list-style: none; }
.viewer-tour-legend li { display: flex; align-items: flex-start; gap: 12px; font-size: 13px; line-height: 1.45; }
.viewer-tour-swatch { box-sizing: border-box; width: 18px; height: 18px; flex: none; margin-top: 1px; border: 2px solid currentColor; border-radius: 3px; background: color-mix(in srgb, currentColor 22%, transparent); }
.swatch-terrain { color: #00efb0; }
.swatch-wmo { color: #ffb703; }
.swatch-m2 { color: #e06cdb; }
.viewer-tour kbd { display: inline-block; min-width: 20px; padding: 1px 4px; border: 1px solid #657076; border-radius: 4px; background: var(--raised); text-align: center; font: 12px ui-monospace, monospace; }
.viewer-tour-actions { display: flex; align-items: center; gap: 10px; margin-top: 28px; }
.viewer-tour-actions #viewer-tour-skip { margin-right: auto; color: var(--muted); border-color: transparent; background: transparent; }
.viewer-page .viewer-tour-primary { min-width: 140px; border-color: var(--accent-line); background: #534831; color: #fff3d5; font-weight: 700; }
.viewer-page .viewer-tour-primary:hover { border-color: var(--accent); background: #685737; }
.viewer-notice { position: fixed; bottom: var(--edge); left: 50%; transform: translateX(-50%); max-width: calc(100vw - 32px); box-sizing: border-box; display: flex; align-items: center; gap: 12px; padding: 6px 8px 6px 16px; border: 1px solid var(--accent-line); background: var(--surface); border-radius: 8px; box-shadow: var(--shadow); z-index: 120; }
/* Initial transfers and errors stay readable; successful loads fade away. */
.viewer-loading { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); box-sizing: border-box; width: min(420px, calc(100vw - 32px)); padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); z-index: 105; transition: opacity .25s, visibility .25s; }
.viewer-loading.loaded { opacity: 0; visibility: hidden; pointer-events: none; }
.viewer-loading.has-error { border-color: #986359; }
.viewer-loading-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.viewer-loading-spinner { width: 22px; height: 22px; border: 2px solid #635c48; border-top-color: var(--accent); border-radius: 50%; animation: viewer-spin .9s linear infinite; flex-shrink: 0; }
@keyframes viewer-spin { to { transform: rotate(360deg); } }
.viewer-loading-meta { flex: 1; min-width: 0; }
.viewer-loading-title { font-size: 16px; font-weight: 600; }
.viewer-status { font-size: 12px; color: var(--muted); margin-top: 4px; overflow-wrap: anywhere; }
.viewer-status.error { color: var(--danger); }
.viewer-progress-pct { font-size: 14px; color: var(--accent); font-variant-numeric: tabular-nums; }
.viewer-progress-bar { height: 100%; background: var(--accent); transition: width .2s; }
.viewer-loading-detail { color: var(--muted); font-size: 11px; margin-top: 10px; overflow-wrap: anywhere; }
/* Compact, movable locator. Saved user size/position still takes precedence. */
.viewer-page #worldLocator { position: fixed; bottom: var(--edge); right: var(--edge); width: 260px; height: 300px; min-width: 240px; min-height: 240px; max-width: calc(100vw - 2 * var(--edge)); max-height: calc(100dvh - 90px); display: flex; flex-direction: column; resize: both; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); z-index: 100; }
.viewer-page #worldLocator.is-collapsed { visibility: hidden; pointer-events: none; }
#worldLocator::after { content: '◢'; position: absolute; right: 2px; bottom: 0; color: var(--muted); font-size: 11px; pointer-events: none; }
.locator-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 6px 4px 12px; flex-shrink: 0; cursor: move; touch-action: none; user-select: none; }
.locator-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 550; }
.locator-navigation { padding: 0 10px 8px; }
.locator-actions { display: flex; gap: 4px; }
.viewer-page .locator-actions button { min-height: 28px; padding: 2px 10px; font-size: 11px; }
.locator-actions button:nth-child(3) { margin-left: auto; }
.locator-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 7px 10px; border-top: 1px solid var(--line); font-size: 10px; }
.locator-toolbar-label { color: var(--muted); margin-right: auto; }
.viewer-page .locator-layer-btn { display: inline-flex; align-items: center; gap: 4px; padding: 2px 5px; min-height: 26px; font-size: 10px; background: transparent; color: var(--muted); }
.viewer-page .locator-layer-btn.active[data-overlay=terrain] { color: #8ae0c5; border-color: #466f63; }
.viewer-page .locator-layer-btn.active[data-overlay=wmo] { color: #e8c572; border-color: #78683e; }
.viewer-page .locator-layer-btn.active[data-overlay=m2] { color: #dba1d5; border-color: #755270; }
.viewer-page .locator-layer-btn.active[data-overlay=impass] { color: #f0d45b; border-color: #827431; }
.viewer-page .locator-layer-btn.active[data-overlay=death] { color: #ff6a55; border-color: #7a3a33; }
.layer-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
#worldLocator canvas { display: block; width: 100%; height: 100%; min-height: 0; flex: 1; background: #141b22; cursor: grab; }
#worldLocator canvas:focus-visible { outline-offset: -3px; }
.locator-foot { display: flex; flex-direction: column; gap: 2px; padding: 7px 12px; flex-shrink: 0; border-top: 1px solid var(--line); font-size: 9px; color: var(--muted); }
#locatorCoords { font: 10px/1.5 ui-monospace, monospace; color: var(--accent); }
/* What changed: toolbar menu, place list and arrival ring. Glyph hues follow Okabe-Ito, lightened for the dark surface. */
.viewer-changes-menu > summary { position: relative; }
.viewer-changes-menu .changes-badge { min-width: 18px; padding: 0 5px; border-radius: 9px; background: #38372c; color: var(--accent); font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.changes-new-dot { position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--surface); }
.viewer-changes-panel { width: 340px; padding: 16px 16px 0; }
.viewer-changes-panel .changes-subline { margin-bottom: 10px; }
.changes-sentence { margin: 0 0 10px; font-size: 12px; line-height: 1.5; }
.changes-note, .changes-mapwide { margin: 0 0 8px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.changes-minor { margin: 0 0 10px; color: var(--muted); font-size: 11px; }
.viewer-page .changes-link { min-height: 0; padding: 0; border: 0; background: none; color: var(--accent); font-size: 11px; text-decoration: underline; text-underline-offset: 2px; }
.viewer-page .changes-link:hover:not(:disabled) { background: none; color: #f0d9a8; }
.changes-section { margin: 0 0 8px; border-top: 1px solid var(--line); padding-top: 6px; }
.changes-section > summary { cursor: pointer; padding: 4px 0; color: var(--muted); font-size: 12px; }
.changes-section[open] > summary { color: var(--text); }
.changes-chips { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 0 4px; }
.viewer-page .changes-chip { min-height: 30px; padding: 3px 9px; }
.changes-list { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--line); }
.changes-place { border-bottom: 1px solid #2a3539; }
.changes-row-wrap { display: flex; align-items: stretch; }
.viewer-page .changes-row { flex: 1; min-width: 0; display: grid; grid-template-columns: 22px auto 1fr; grid-template-areas: "num glyphs label" "num counts distance"; gap: 1px 8px; align-items: center; padding: 7px 4px; border: 0; border-radius: 0; background: transparent; text-align: left; }
.viewer-page .changes-row.is-current { background: #2b2c25; box-shadow: inset 3px 0 var(--accent); }
.changes-number { grid-area: num; align-self: start; color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.changes-glyphs { grid-area: glyphs; display: inline-flex; gap: 2px; }
.changes-label { grid-area: label; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.changes-counts { grid-area: counts; grid-column: 2 / 3; color: var(--muted); font-size: 11px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.changes-distance { grid-area: distance; color: var(--muted); font-size: 11px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.viewer-page .changes-expand { width: 32px; height: auto; font-size: 13px; color: var(--muted); }
.changes-glyph { display: inline-block; min-width: 12px; font-weight: 700; text-align: center; text-shadow: 0 0 2px #000; }
.changes-added { color: #4aa3e6; } .changes-removed { color: #ef7d3c; } .changes-moved, .changes-turned { color: #f0e442; }
.changes-swapped { color: #56b4e9; } .changes-model { color: #d892bb; } .changes-ground { color: #a98bff; }
.changes-paint { color: #2fc49a; } .changes-water { color: #e8eef0; }
.changes-collision { color: #3fd0d4; }
.changes-items { padding: 0 4px 8px 26px; }
.changes-item-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.viewer-page .changes-item-button { width: 100%; min-height: 30px; display: grid; grid-template-columns: 14px 1fr; gap: 0 6px; padding: 4px 6px; border: 0; background: transparent; text-align: left; font-size: 11px; }
.changes-item.is-minor .changes-item-text { color: var(--muted); }
.changes-item-text { overflow-wrap: anywhere; }
.changes-dev { grid-column: 2; color: var(--muted); font: 10px/1.4 ui-monospace, monospace; overflow-wrap: anywhere; }
.changes-empty { margin: 10px 0; }
.changes-footer { position: sticky; bottom: 0; display: flex; align-items: center; gap: 6px; margin: 8px -16px 0; padding: 8px 16px; border-top: 1px solid var(--line); background: var(--surface); }
.changes-position { flex: 1; min-width: 0; color: var(--muted); font-size: 11px; }
.viewer-page .changes-position-button { display: none; }
.viewer-page .changes-step { min-height: 32px; padding: 4px 10px; font-size: 12px; }
.changes-more { margin-top: 8px; }
.changes-options { padding: 4px 0 10px; }
.changes-legend { margin: 6px 0 0; font-size: 11px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.changes-reticle { position: fixed; left: 50%; top: 50%; z-index: 95; display: flex; flex-direction: column; align-items: center; gap: 8px; transform: translate(-50%, -32px); pointer-events: none; }
.changes-reticle-ring { width: 56px; height: 56px; box-sizing: border-box; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 2px #0009, inset 0 0 0 2px #0009; }
.changes-reticle-label { max-width: min(420px, calc(100vw - 40px)); padding: 4px 10px; border: 1px solid var(--accent-line); border-radius: 6px; background: var(--surface); font-size: 12px; text-align: center; }
/* Before/After: a segmented pair under the header, and a toolbar pill while the earlier build is on screen. */
.changes-flip-box { margin: 0 0 10px; }
.changes-flip { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.viewer-page .changes-flip-btn { min-height: 32px; font-size: 12px; font-variant-numeric: tabular-nums; }
.changes-flip-hint { margin: 4px 0 0; font-size: 11px; }
.changes-before-eyebrow { color: #ffd27a; }
.viewer-page .viewer-before-pill { min-height: 32px; padding: 4px 10px; border: 1px solid #a8843f; border-radius: 7px; background: #3b3320; color: #ffe2a6; font-size: 11px; font-weight: 700; letter-spacing: .4px; white-space: nowrap; }
.viewer-page .viewer-before-pill:hover:not(:disabled) { background: #4a3f26; border-color: #ffd27a; }
.object-inspector-history { margin: -4px 0 10px; color: var(--accent); font-size: 12px; line-height: 1.45; }
@media (pointer: coarse) { .viewer-page .changes-row { min-height: 44px; } .viewer-page .changes-item-button { min-height: 40px; } }
@media (max-width: 640px) {
    .viewer-changes-menu .changes-word { display: none; }
    .viewer-page .changes-flip-btn { min-height: 44px; }
    .viewer-page .viewer-before-pill { max-width: 46vw; overflow: hidden; text-overflow: ellipsis; }
    .viewer-changes-panel { width: calc(100vw - 2 * var(--edge)); }
    /* After a flight the panel shrinks to one tappable line, so the place stays in view. */
    .viewer-changes-panel.changes-compact { max-height: none; overflow: visible; padding-top: 0; }
    .viewer-changes-panel.changes-compact > :not(.changes-footer) { display: none !important; }
    .viewer-changes-panel.changes-compact .changes-footer { margin-top: 0; border-top: 0; }
    .viewer-changes-panel.changes-compact .changes-position { display: none; }
    .viewer-page .viewer-changes-panel.changes-compact .changes-position-button { display: block; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; border-color: transparent; background: transparent; }
}
@media (max-width: 640px) {
    .map-page, .viewer-page { --edge: max(10px, env(safe-area-inset-left), env(safe-area-inset-right), env(safe-area-inset-top), env(safe-area-inset-bottom)); }
    .viewer-embedded .viewer-toolbar { top: calc(var(--edge) + 54px); }
    :fullscreen .viewer-embedded .viewer-toolbar { top: var(--edge); }
    .viewer-toolbar { max-width: calc(100vw - 2 * var(--edge)); flex-wrap: wrap; justify-content: flex-end; }
    .viewer-settings-panel { max-height: calc(100dvh - 160px); }
    /* Icon-only Measure on phones; the word stays for screen readers. */
    .viewer-toolbar .toolbar-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .viewer-measure { max-width: calc(100vw - 2 * var(--edge)); }
    #viewer-measure-distance { white-space: normal; }
    .viewer3d-perf-hud-embedded { top: calc(var(--edge) + 54px); left: var(--edge); max-width: calc(100vw - 2 * var(--edge)); }
    .viewer-page #worldLocator { width: 240px; height: 260px; min-height: min(240px, calc(100dvh - 170px)); max-height: calc(100dvh - 170px); }
    .viewer-quality-note { max-width: 100%; order: -1; }
    .viewer-tour-card { max-height: min(64dvh, 500px); padding: 24px 20px; }
    .viewer-tour-step h2 { font-size: 22px; }
    .viewer-tour-tips { grid-template-columns: minmax(90px, 1fr) 1.2fr; gap: 8px; padding: 12px; }
    .viewer-tour-actions { flex-wrap: wrap; }
    .viewer-page .viewer-tour-primary { min-width: 120px; }
    #map-empty, #viewer3d-transition { top: auto; bottom: var(--edge); transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .viewer-page *, .map-page .transition-progress-bar { animation: none !important; transition: none !important; }
}