/* 山野志 · 星空界面的共用材质、字体与交互状态。 */
@font-face {
  font-family: "Huage Map";
  src: local("方正 华戈行书 简"), local("方正字迹-华戈行书 简"), local("方正字迹-华戈行书简体"),
    local("方正华戈行书 简"), local("方正华戈行书简体"), local("FZZJ-HGXSSJW");
  font-display: swap;
}

:root {
  --f-map: "Huage Map", "方正字迹-华戈行书 简", "方正华戈行书 简", "KaiTi", "STKaiti", "Microsoft YaHei", serif;
  --space-ink: #edf3ff;
  --space-muted: #abbad1;
  --space-line: #adc6ea39;
  --space-link: #a9d8ff;
  --space-warm: #f2d8a0;
  --space-fill: #a8c7f112;
  --space-hover: #b3d1ff21;
  --space-glass: linear-gradient(142deg, #193e66ae, #081d36a8 78%);
  --map-glass: linear-gradient(144deg, #211f1b96, #0c0d10bb 78%);
  --galaxy-arm: #9db9de;
  --galaxy-core: #efc997;
  --space-shadow: 0 12px 38px #0007, inset 0 1px #e0ecff0c;
  --space-spring: cubic-bezier(.2, .9, .24, 1.18);
}

:focus-visible { outline-color: var(--space-link); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

body[data-view="home"] .cover .eyebrow { color: #9ebebb; }
body[data-view="home"] .cover-subtitle { color: #c9d8d4; }

/* 首页的星图网格渐隐到地球边缘。 */
body[data-view="home"] .map-vignette {
  background: radial-gradient(ellipse at center, transparent 40%, #0006);
}
body[data-view="home"] .map-vignette::before {
  content: none;
}
.masthead {
  border-color: var(--space-line);
  background: linear-gradient(90deg, transparent, #0a122053, transparent);
}
.mast-status {
  display: flex; align-items: stretch; justify-self: center; gap: clamp(10px, 2vw, 30px);
  color: var(--space-muted); font: 12px/1.25 var(--mono); font-variant-numeric: tabular-nums;
  white-space: pre;
}
.mast-readout { display: grid; align-content: center; gap: 4px; min-width: 122px; position: relative; padding-left: 14px; }
.mast-readout > :first-child { font: 10px/1.2 var(--f-sans); letter-spacing: .12em; color: #c4bba9; }
.mast-readout > :last-child { color: var(--space-ink); font-size: 13px; }
.mast-readout::before {
  position: absolute; top: 0; left: 0; width: 2px; height: 100%;
  content: ""; background: linear-gradient(transparent, #dfb980, transparent); opacity: .74;
}
.clock-readout::after {
  position: absolute; left: 18px; top: -8px; width: 4px; height: 4px;
  content: ""; border-radius: 50%; background: #f0c88e; box-shadow: 0 0 8px #e9b570a5;
  animation: status-breathe 3.8s ease-in-out infinite alternate;
}
.coordinate-readout::before { background: linear-gradient(transparent, #8ba8bd, transparent); }
@keyframes status-breathe { to { opacity: .6; box-shadow: 0 0 4px #e9b570a5; } }
.workspace-link { border-radius: 8px; }
.workspace-link[aria-current] { color: var(--space-link); border-color: #9fccff55; background: #83b6ff20; }

#labels .anno, #tip .an-name, #browse-title, .browse-routes strong, #landmark-title, .p-name, #photo-pin {
  font-family: var(--f-map);
}
#labels .anno {
  font-weight: 550;
  text-shadow: 0 1px 2px #000, 0 0 5px #030609, 0 0 11px #000;
}

:is(#route-index, #panel, #landmark-panel, #map-browse, .personal-card, #tip .body, #map-notice,
    .map-modes, .map-tools) {
  --ink: var(--space-ink);
  --paper-line: var(--space-line);
  color: var(--space-ink);
  background: var(--space-glass);
  border: 1px solid var(--space-line);
  border-radius: 12px;
  box-shadow: var(--space-shadow);
  backdrop-filter: blur(14px);
  color-scheme: dark;
}
:is(#route-index, #panel, #landmark-panel, #map-browse, #personal-panel) { scrollbar-color: #849abc80 transparent; }
:is(#route-index, #panel, #landmark-panel, #map-browse, #tip .body, #map-notice, .map-modes, .map-tools) {
  --space-ink: #f1ede5;
  --space-muted: #c1bcb0;
  --space-line: #dfd6c62f;
  --space-link: #ebc791;
  --space-fill: #ded3c310;
  --space-hover: #edce9224;
  background: var(--map-glass);
  backdrop-filter: blur(14px) brightness(.69);
}
:is(#route-index, #panel, #landmark-panel, #map-browse) .sheet-head .eyebrow { color: var(--space-muted); }
.sheet-close { border-color: var(--space-line); color: var(--space-muted); }
.sheet-close:hover {
  color: var(--space-ink); border-color: var(--space-link); background: var(--space-hover);
}
.map-modes {
  left: auto; right: var(--edge);
  transition: right .34s var(--space-spring);
}
.map-modes { top: calc(var(--header) + 16px); gap: 3px; padding: 4px; border-radius: 999px; }
body[data-view="map"]:has(#panel.on, #route-index.on, #landmark-panel.on, #map-browse:not([hidden]))
  .map-modes { right: calc(var(--edge) + var(--sheet) + 12px); }
.map-modes button { min-width: 49px; min-height: 32px; padding: 0 9px; border-radius: 999px; font-size: 12px; }
.map-modes button[aria-pressed="true"] {
  color: #281d0e; background: linear-gradient(150deg, #f2d5a3, #bb8c51);
  box-shadow: inset 0 0 0 1px #f9e7be5c;
}
.map-tools { overflow: hidden; }
.map-tools button + button { border-color: var(--space-line); }
:is(.map-modes button, .map-tools button, .sheet-close, #panel button, .enter-map, .workspace-link,
    .browse-routes button, .personal-action) {
  transition: color .18s, background-color .18s, border-color .18s, transform .22s var(--space-spring);
}
:is(.map-modes button, .map-tools button, .sheet-close, #panel button, .enter-map, .workspace-link, .personal-action):active {
  transform: scale(.95);
}

/* 地图卡片保留原有信息结构，统一标题、数值和交互状态。 */
#tip .body {
  width: max-content; max-width: min(310px, 40vw); padding: 9px 13px 10px;
  white-space: normal; text-shadow: none;
}
#tip.on .body { pointer-events: auto; }
#tip[data-pinned] .body { border-color: #ecc18f96; }
#tip .an-place { margin: 5px 0 0; max-width: 235px; color: #ded9ce; font-size: 12px; line-height: 1.65; }
#tip .an-name { color: var(--space-ink); margin-bottom: 4px; font-size: 19px; line-height: 1.2; }
#tip .an-name:last-child { margin-bottom: 0; }
:is(#tip .an-row, .photo-data .an-row) {
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
  align-items: baseline; gap: 12px; color: var(--space-muted);
  font-size: 12px; line-height: 1.65; letter-spacing: 0;
}
#tip :is(.an-details, .an-photo) .an-row { grid-template-columns: 5.2em minmax(0, 1fr); }
:is(#tip .an-row, .photo-data .an-row) b { color: var(--space-ink); font-weight: 550; font-variant-numeric: tabular-nums; }
#tip .an-diff { justify-self: start; }
#tip .an-photo .an-row b { white-space: nowrap; }
.astro-row {
  display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: baseline;
  gap: 1px 12px; padding: 2px 0 5px; margin-bottom: 3px;
  border-bottom: 1px solid var(--space-line); color: var(--space-muted); font-size: 12px;
}
.astro-row b { color: var(--space-ink); font-variant-numeric: tabular-nums; }
.astro-row small { grid-column: 1 / -1; font-size: 11px; }
.astro-row[data-grade="80"] b { color: #f2d8a0; }
.astro-row[data-grade="60"] b { color: #aeead6; }
.astro-row[data-grade="40"] b { color: #f1cc93; }
.astro-row[data-grade="0"] b { color: #f3bcb4; }

#map-browse { animation: surface-in .25s var(--space-spring) both; }
@keyframes surface-in { from { opacity: 0; transform: translateX(9px); } to { opacity: 1; transform: none; } }
#map-browse .sheet-head:has(.browse-label[hidden]) { display: none; }
#map-browse[data-kind="photo"] #browse-title { margin: 0 0 10px; font-size: 24px; text-wrap: balance; }
#map-browse[data-kind="cluster"] { padding: 11px 13px 13px; overflow: hidden; }
#map-browse[data-kind="cluster"] .sheet-head { margin: 0 1px 7px; }
.browse-routes button { border-radius: 5px; padding: 11px 8px; }
.browse-routes strong { font-size: 18px; }
#map-browse[data-kind="cluster"] .browse-routes button { min-height: 46px; }
:is(.browse-routes button, .route-results a, #panel li button):hover { background: var(--space-hover); }
#map-browse .browse-photo-window {
  display: grid; gap: 0; clear: both; margin-bottom: 12px; padding: 4px 11px;
  border: 1px solid var(--space-line); border-radius: 8px; background: var(--space-fill);
}
#map-browse[data-kind="photo"] .browse-photo-window { margin-bottom: 0; }
#map-browse .photo-data .an-row { padding: 4px 0; }
#map-browse .photo-data .an-row + .an-row { border-top: 1px solid var(--space-line); }
#map-browse .photo-data :is(.an-row b, .astro-row b, .astro-row small) { text-align: right; }
#map-browse figure img, .photo-locate, .p-map { border-radius: 7px; }
.photo-locate, #route-search, .route-filters select {
  background: var(--space-fill); border-color: var(--space-line); color: var(--space-ink);
}
#route-search, .route-filters select { border-radius: 7px; }
.route-filters select { color-scheme: dark; color: #edf4fa; background-color: #182534; }
.route-filters option { color: #edf4fa; background-color: #182534; }
#route-search::placeholder { color: var(--space-muted); }
:is(#map-browse p, .browse-routes small, .index-count, .route-results small, .landmark-location,
    .landmark-intro) { color: var(--space-muted); }
:is(#map-browse figcaption a, #route-results .route-detail-link, #panel .p-safety a, #panel .p-point-link) {
  color: var(--space-link);
}
#panel .p-map { border-color: var(--space-line); overflow: hidden; }
#panel :is(.p-meta, .p-hero-credit, .p-stats, .p-coords, .p-endpoints small, .p-gear-context, li .kd) { color: var(--space-muted); }
#panel :is(.p-wx, summary, .p-guide section) { color: var(--space-ink); }
#panel .p-guide { gap: 14px; }
#panel .p-guide :is(.p-itinerary, .p-equipment) { padding-top: 12px; border-top: 1px solid var(--space-line); }
#panel .p-guide h3 { margin-bottom: 7px; }
#panel .p-review { color: var(--space-warm); }
#panel .p-diff { color: var(--space-muted); background: var(--space-fill); }
#panel .p-diff.d-easy { color: #aeebd2; background: #62bb952a; }
#panel .p-diff.d-mid { color: #f2d8a0; background: #dba9512d; }
#panel .p-diff.d-hard { color: #ffc2b2; background: #d57c6b35; }
#panel .p-act { border-color: var(--space-line); color: var(--space-ink); border-radius: 7px; }
#panel .p-act:hover { background: var(--space-hover); border-color: var(--space-link); }
#panel .p-act.on { background: #86baff32; color: var(--space-link); }
#panel li { border-color: var(--space-line); }

#personal-panel {
  position: fixed; z-index: 11; top: calc(var(--header) + 16px); bottom: calc(var(--footer) + 10px);
  left: var(--edge); width: var(--dashboard); display: grid; align-content: start; gap: 9px;
  overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; color-scheme: dark;
}
.personal-heading { padding: 1px 3px 4px; }
.personal-heading .eyebrow { margin: 0 0 3px; color: #a3c5e9; text-shadow: 0 1px 4px #000; }
.personal-heading-row, .personal-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#personal-title { margin: 0; font: 700 33px/1.12 var(--serif); overflow-wrap: anywhere; text-shadow: 0 2px 8px #000; }
#personal-title:focus, .personal-card:focus { outline-offset: -2px; }
#personal-name-form { display: flex; gap: 6px; margin-top: 8px; }
#personal-name {
  min-width: 0; width: 100%; padding: 5px 7px; border-radius: 6px;
  color: var(--space-ink); background: #101a2b; border: 1px solid var(--space-line);
}
#personal-name-form button { flex: none; }
.personal-icon {
  flex: none; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border-radius: 7px;
  color: var(--space-muted); background: #0b1424ec; border: 1px solid var(--space-line);
}
.personal-icon svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.personal-icon:hover { color: var(--space-link); border-color: var(--space-link); }
.personal-card { padding: 10px 13px; }
.personal-card h3 { font-size: 13px; margin: 0; letter-spacing: .06em; }
.personal-card-kicker { color: var(--space-muted); font: 10px var(--mono); letter-spacing: .08em; }
.personal-checkin-summary, .personal-plan-summary { display: flex; align-items: center; gap: 8px; margin: 7px 0 3px; }
.personal-checkin-summary { justify-content: space-between; }
.personal-checkin-summary div:first-child { display: grid; gap: 2px; }
.personal-checkin-summary strong, .personal-plan-summary strong { font: 29px/1.05 var(--mono); color: var(--space-ink); }
.personal-checkin-summary span, .personal-plan-summary span { font-size: 11px; color: var(--space-muted); }
.personal-progress {
  flex: none; width: 50px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%;
  background: conic-gradient(#88b7ee var(--checkin-progress, 0%), #29384d 0);
}
.personal-progress span {
  width: 42px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%;
  background: #101a2b; color: var(--space-link); font: 11px var(--mono);
}
#personal-scheduled { margin-left: auto; color: var(--space-link); }
.personal-months { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; margin: 6px 0 5px; }
.personal-months span { display: grid; grid-template-rows: 21px auto; align-items: end; justify-items: center; gap: 3px; }
.personal-months i { width: 68%; height: var(--month-fill); border-radius: 2px; background: #384861; }
.personal-months .scheduled i { background: #88b7ee; }
.personal-months small { font: 9px var(--mono); color: var(--space-muted); }
.personal-empty { color: var(--space-muted); font-size: 12px; line-height: 1.45; margin: 7px 0 0; }
.personal-list {
  list-style: none; margin: 4px 0 0; padding: 0; max-height: clamp(62px, calc(23vh - 78px), 118px);
  overflow: auto; scrollbar-width: thin;
}
.personal-list:empty, #plan-status:empty, #journey-status:empty { display: none; }
.personal-route { padding: 6px 0; border-top: 1px solid var(--space-line); }
.personal-route-name { font: 600 15px/1.32 var(--f-map); overflow-wrap: anywhere; }
.personal-route-name:hover { color: var(--space-link); }
.personal-route small, .personal-route label { display: block; margin-top: 3px; color: var(--space-muted); font-size: 11px; line-height: 1.5; }
.personal-route input, .personal-delete, .personal-action {
  background: var(--space-fill); border: 1px solid var(--space-line); border-radius: 6px; color: var(--space-ink);
}
.personal-route input { margin-left: 7px; padding: 3px 6px; }
.personal-delete { flex: none; padding: 4px 7px; font-size: 12px; }
.personal-action { display: inline-block; padding: 4px 7px; font-size: 11px; }
.personal-action:hover, .personal-delete:hover { background: var(--space-hover); }
.personal-action:disabled, .personal-delete:disabled { opacity: .55; cursor: wait; }
.personal-row-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.personal-route .personal-region { flex: none; margin: 0; }
#plan-status, #journey-status { margin: 5px 0 0; color: var(--space-muted); font-size: 11px; }
.personal-metrics { display: grid; grid-template-columns: .75fr 1fr 1fr; gap: 5px; margin: 8px 0 0; }
.personal-metrics div { min-width: 0; padding: 6px 5px; border-radius: 6px; background: var(--space-fill); }
.personal-metrics dt { color: var(--space-muted); font-size: 11px; }
.personal-metrics dd { margin: 3px 0 0; font: 13px var(--mono); overflow-wrap: anywhere; }
.personal-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 3px; background: #06142270; border: 1px solid var(--space-line); border-radius: 8px; }
.personal-switch button { min-height: 30px; color: var(--space-muted); background: transparent; border: 0; border-radius: 5px; font-size: 13px; }
.personal-switch button[aria-pressed="true"] { color: var(--space-ink); background: #83b6ff30; }
#hiking-plan .personal-card-head { margin-top: 7px; }
.memory-section { margin-top: 9px; border-top: 1px solid var(--space-line); }
.memory-section summary { cursor: pointer; padding: 7px 0; font-size: 13px; }
#walked-count { margin-left: 5px; color: var(--space-muted); font-size: 11px; }
.memory-poster { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.browse-photo-section { border-top: 1px solid var(--space-line); }
.browse-photo-section summary, .p-poi-category summary { cursor: pointer; padding: 8px 0; font-size: 13px; }
.browse-photo-section figure { margin-bottom: 12px; }
.browse-photo-section figure img { max-height: 238px; object-fit: contain; background: #06142270; }
#panel .p-facilities { padding-top: 12px; border-top: 1px solid var(--space-line); }
#panel .p-poi > p { color: var(--space-muted); font-size: 12px; }
.p-poi-category { border-top: 1px solid var(--space-line); }
.p-poi-category a { display: block; color: var(--space-link); padding: 4px 0 6px 9px; }
.p-poi-links { display: flex; flex-wrap: wrap; gap: 5px 12px; color: var(--space-link); }



#route-index { bottom: auto; overflow: hidden; }
.animated-list-viewport {
  --list-fade-start: 0px;
  --list-fade-end: 0px;
  position: relative;
  max-height: min(440px, calc(100dvh - var(--header) - 176px));
  overflow: hidden auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: #d8c29c68 transparent;
  scrollbar-gutter: stable; padding: 4px 5px;
  mask-image: linear-gradient(to bottom, transparent, #000 var(--list-fade-start),
    #000 calc(100% - var(--list-fade-end)), transparent);
}
.animated-list-viewport:has(.animated-list-items:empty) { display: none; }
#map-browse[data-kind="cluster"] .animated-list-viewport { max-height: min(36vh, 330px); }
.animated-list-track { position: relative; overflow: clip; }
.animated-list-items {
  position: relative; display: grid; gap: 7px; border-top: 0;
}
.animated-list-items > li {
  min-width: 0; overflow: clip; border-radius: 9px;
  border: 1px solid var(--space-line); background: #cbb89a0c;
}
.animated-list-items > li[data-list-selected] { background: #d9b77c1c; }
.animated-list-items > li + li { border-top: 1px solid var(--space-line); }
.animated-list-items > li > a { padding: 10px 9px; border-bottom: 0; }
.animated-list-items > li > button { padding-inline: 10px; }
.animated-list-items :is(a, button):focus-visible { outline-offset: -2px; border-radius: 6px; }
.animated-list-viewport:focus-visible { outline-offset: -2px; }
.animated-list-indicator {
  position: absolute; top: 0; inset-inline: 0; z-index: 2; pointer-events: none;
  border-radius: 9px; box-shadow: inset 0 0 0 1px #ecc891a9; opacity: 0;
  transition: transform .30s var(--space-spring), height .30s var(--space-spring), opacity .16s ease;
}
.has-list-selection .animated-list-indicator { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .clock-readout::after, #map-browse { animation: none; }
  .animated-list-indicator { transition: none; }
  :is(.map-modes, .map-modes button, .map-tools button, .sheet-close,
      #panel button, .enter-map, .workspace-link, .browse-routes button, .personal-action) { transition: none; }
}

/* 同一地球上的可切换路线叠加层，首页与地图共用入口。 */
body[data-view="home"] .workspace-actions { display: flex; }
body[data-view="home"] .workspace-actions .index-link { display: none; }
.workspace-actions { gap: 8px; }
#route-particle-toggle { color: var(--space-ink); background: #081b2d65; }
#route-particle-toggle[aria-pressed="true"] { color: #bcfaff; border-color: #72dae5a0; background: #164c6255; box-shadow: inset 0 0 14px #42cfe91a; }
#route-particle-toggle:disabled { opacity: .45; cursor: wait; }


/* 路线粒子与边界在暗色底图上保持清晰。 */
body.route-particles-on .map-vignette { background: radial-gradient(ellipse at center, transparent 50%, #0004); }
body.route-particles-on #labels .anno:not(.walked-summit) { filter: brightness(.62); }

body.route-particles-on #clusters .cluster {
  background: #071318ab;
  border-color: #7ac6cd55;
  box-shadow: none;
  color: #c2e4e5;
}
body.route-particles-on #clusters .cluster:hover,
body.route-particles-on #clusters .cluster:focus-visible {
  border-color: #7ac6cd;
  background: #15333c;
}

/* 宇宙开场后再显出封面内容。 */
body[data-view="home"] :is(.masthead,.cover-inner) { transition: opacity .45s ease; }
body[data-view="home"].home-space-only :is(.masthead,.cover-inner) { opacity: 0; visibility: hidden; }


.sky-credit {
  position: fixed;
  bottom: calc(var(--footer) + 10px);
  right: calc(var(--edge) + 54px);
  z-index: 10;
  font: 10px/1.5 var(--f-sans);
  color: #c5c9ce;
  text-shadow: 0 1px 3px #000, 0 1px 4px #000;
}
body[data-view="home"] .sky-credit { right: var(--edge); }

/* 深空底色同时作为 WebGL 初始化期间的页面背景。 */
body[data-view="map"]:not(.route-particles-on) {
  background:
    linear-gradient(155deg, #101b29, #080e18 64%, #0d1724);
}
body[data-view="map"]:not(.route-particles-on) #gl { filter: saturate(.90) brightness(.98); }
body[data-view="map"]:not(.route-particles-on) .map-vignette {
  background: linear-gradient(180deg, #0b13234d, transparent 15%, transparent 88%, #080e1829);
}


.terrain-tools {
  display: none;
  position: fixed;
  right: calc(var(--edge) + 54px);
  bottom: calc(var(--footer) + 40px);
  z-index: 9;
  align-items: center;
  gap: 10px;
  padding: 4px 9px 4px 4px;
  border: 1px solid var(--space-line);
  border-radius: 8px;
  background: #091322d9;
  color: var(--space-ink);
  font-size: 11px;
}
body[data-view="map"]:not(.route-particles-on):not(:has(#route-index.on, #map-browse:not([hidden]))) .terrain-tools { display: flex; }
body[data-view="map"]:has(#panel.on) .terrain-tools { right: calc(var(--edge) + var(--sheet) + 12px); }
@media (max-width: 720px) {
  body[data-view="map"]:has(#panel.on) .terrain-tools { display: none; }
}
.terrain-tools select {
  border: 1px solid var(--space-line);
  border-radius: 5px;
  background: #16263a;
  color: inherit;
  padding: 5px;
  font: inherit;
}
.terrain-tools output { font-variant-numeric: tabular-nums; }
.p-imagery {
  margin: 12px 0;
  padding: 8px 10px;
  border: 1px solid var(--space-line);
  border-radius: 8px;
  color: var(--space-ink);
  font-size: 12px;
}
.p-imagery[hidden] { display: none; }
.p-imagery-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.p-imagery-row button {
  padding: 5px 9px;
  border: 1px solid var(--space-line);
  border-radius: 5px;
  color: inherit;
  background: var(--space-fill);
}
.p-imagery-row button[aria-pressed="true"] { background: #31576c; border-color: #82c9d7; }
.p-imagery-row label { white-space: nowrap; }
.p-imagery input { width: 100%; accent-color: #8ac4d5; margin: 7px 0 0; }
.p-imagery p { margin: 5px 0 0; color: var(--space-muted); }


#track-playback {
  position: fixed;
  z-index: 11;
  left: 50%;
  bottom: calc(var(--footer) + 46px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--space-line);
  border-radius: 8px;
  background: #091322e8;
  color: var(--space-ink);
  white-space: nowrap;
}
#track-playback[hidden] { display: none; }
#track-playback button, .control-points-actions button {
  color: var(--space-ink);
  background: #182f42;
  border: 1px solid var(--space-line);
  border-radius: 5px;
  min-height: 34px;
  padding: 5px 10px;
}
#track-playback #track-follow-exit { border-color: #8ac4d5; background: #30576a; }
#track-progress { padding: 0 6px; font: 12px var(--mono); min-width: 3em; }
#labels .anno[data-kind="range"] {
  color: #c3dce7;
  letter-spacing: .14em;
  text-shadow: 0 1px 3px #111e29, 0 0 6px #101b25;
}
#control-points-dialog {
  width: min(460px,calc(100vw - 32px));
  padding: 20px;
  border: 1px solid var(--space-line);
  border-radius: 12px;
  background: #0c1b2b;
  color: var(--space-ink);
}
#control-points-dialog::backdrop { background: #030810ac; }
#control-points-form { display: grid; gap: 14px; }
#control-points-form h2, #control-points-form p { margin: 0; }
#control-points-form label { display: grid; gap: 6px; font-size: 13px; }
#control-points-form :is(input,textarea) {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--space-line);
  border-radius: 5px;
  background: #081321;
  color: var(--space-ink);
}
#control-points-form p { color: var(--space-muted); font-size: 12px; }
.control-points-actions { display: flex; justify-content: end; gap: 8px; }
@media (max-width: 760px) {
  body[data-view="map"] { --dashboard: min(200px,43vw); --sheet: min(300px,60vw); }
  #track-playback { bottom: calc(var(--footer) + 84px); }
}
@media (max-width: 500px) {
  body[data-view="map"]:has(#panel.on) #personal-panel { visibility: hidden; }
  body[data-view="map"]:has(#panel.on) #panel {
    top: auto;
    left: var(--edge);
    right: var(--edge);
    bottom: calc(var(--footer) + 6px);
    width: auto;
    max-height: 37dvh;
  }
  body[data-view="map"]:has(#panel.on) .map-modes { right: var(--edge); }
  body[data-view="map"]:has(#panel.on) #track-playback {
    bottom: calc(37dvh + var(--footer) + 13px);
  }
}

.route-map-back { display: none; }
body[data-route-selected] .route-map-back { display: inline-flex; }
body[data-map-context="lost"] .map-modes,
body[data-map-context="lost"] .map-tools,
body[data-map-context="lost"] .terrain-tools,
body[data-map-context="lost"] #track-playback { display: none; }
@media (max-width: 600px) {
  body[data-route-selected] .mast-status { display: none; }
  body[data-route-selected] .masthead { grid-template-columns: 1fr auto; }
  body[data-route-selected] .workspace-actions #route-particle-toggle { display: none; }
}

#walk-readout {
  position: fixed;
  z-index: 10;
  left: var(--edge);
  top: calc(var(--header) + 16px);
  max-width: min(420px,90vw);
  display: grid;
  gap: 4px;
  padding: 10px 14px;
  border: 1px solid var(--space-line);
  border-radius: 8px;
  background: #081423de;
  color: var(--space-ink);
  font-size: 12px;
}
#walk-readout small { color: var(--space-muted); }
body[data-walk-view] :is(#personal-panel,#panel,#map-browse,#labels,#clusters,#tip,.map-tools,.map-modes,.terrain-tools) { visibility: hidden; }
body[data-walk-view] #track-playback { bottom: calc(var(--footer) + 44px); }
#track-playback { max-width: calc(100vw - 16px); flex-wrap: wrap; justify-content: center; }
@media (max-width: 500px) {
  #track-playback button { padding-inline: 6px; font-size: 12px; }
}

body[data-view="home"] #route-particle-toggle { display: none; }
#map-browse .city-import { margin: 0 0 10px; min-height: 34px; }