/* The atlas shares the workspace paper, ink and foliage palette. */
.atlas-page { --atlas-land: #dce3d1; --atlas-border: #96a58c; --atlas-visited: #879f78; }
.workspace-overlay:has(.atlas-page) { top: 90px; bottom: 110px; }
.workspace-overlay .atlas-page .page-top { border-bottom: 1px solid #d4d9c780; margin-bottom: 14px; padding-top: 19px; padding-bottom: 15px; align-items: center; }
.workspace-overlay .atlas-page .page-top h1 { font-size: 1.45rem; margin-bottom: 0; }
.workspace-overlay .atlas-page .page-subline { font-size: 11px; margin-top: 3px; }
.atlas-page .atlas-layout { grid-template-columns: minmax(0, 1fr) 235px; gap: 0; }
.atlas-main { min-width: 0; padding-right: 24px; }
.atlas-map-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.atlas-map-header .segmented { background: #e7eadd; padding: 4px; border-radius: 10px; }
.atlas-map-header .segmented button { display: flex; align-items: center; gap: 7px; padding: 7px 12px; font-family: inherit; white-space: nowrap; }
.atlas-map-header .segmented button.active { background: #fcfbf4; box-shadow: 0 2px 6px #34472e0b; }
.atlas-progress { font-size: 11px; color: #7c856f; white-space: nowrap; }
.atlas-progress strong { font-size: 15px; font-weight: 600; color: var(--green); margin-right: 4px; }
.native-map { position: relative; isolation: isolate; height: clamp(275px, 43vh, 455px); margin-top: 6px; background: radial-gradient(ellipse at 45% 44%, #e8ecdd70, transparent 72%); }
.native-map.is-china { height: clamp(315px, 47vh, 495px); }
.atlas-canvas { height: 100%; width: 100%; touch-action: none; cursor: grab; border-radius: 12px; }
.atlas-canvas.is-dragging { cursor: grabbing; }
.atlas-svg { width: 100%; height: 100%; display: block; overflow: hidden; }
.atlas-graticule { fill: none; stroke: #a8b79a; stroke-opacity: .18; stroke-width: .65; vector-effect: non-scaling-stroke; pointer-events: none; }
.atlas-region { outline: none; }
.atlas-land { fill: var(--atlas-land); stroke: var(--atlas-border); stroke-width: .65; vector-effect: non-scaling-stroke; stroke-linejoin: round; transition: fill .18s, stroke .18s; }
.atlas-region.is-context .atlas-land { fill: #e3e6d9; stroke: #aab4a0; }
.atlas-region.is-place { cursor: pointer; }
.atlas-region.is-visited .atlas-land, .atlas-inset-land.is-visited { fill: var(--atlas-visited); stroke: #687f5e; }
.atlas-region.is-selected .atlas-land { fill: #43664d; stroke: #2d4e39; stroke-width: 1.2; }
.atlas-region.is-place:hover .atlas-land, .atlas-region.is-place:focus-visible .atlas-land { fill: #b4c3a4; stroke: #486841; stroke-width: 1.3; }
.atlas-region.is-selected:hover .atlas-land { fill: #527459; }
.atlas-region:focus-visible .atlas-land { stroke: #8b5938; stroke-width: 2; }
.atlas-boundary { fill: none; stroke: #66795d; stroke-width: .85; vector-effect: non-scaling-stroke; pointer-events: none; }
.atlas-place-hit { fill: transparent; stroke: transparent; stroke-width: 6; vector-effect: non-scaling-stroke; }
.atlas-small-place { fill: #90a681; stroke: #f9f8ed; stroke-width: .6; vector-effect: non-scaling-stroke; }
.atlas-region.is-selected .atlas-small-place { fill: #284d40; }
.atlas-labels { pointer-events: none; text-anchor: middle; user-select: none; }
.atlas-place-label text { fill: #4b6044; font-size: calc(17px / var(--map-zoom, 1)); font-weight: 500; paint-order: stroke; stroke: #f8f8edaa; stroke-width: 2.5px; stroke-linejoin: round; }
.is-china .atlas-place-label text { font-size: calc(18px / var(--map-zoom, 1)); }
.atlas-place-label.is-selected text { fill: #fffced; stroke: #43664d; }
.atlas-visit-dot { fill: #416638; stroke: #fcfaee; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.atlas-water-label { fill: #9da993; font-family: "Songti SC", "SimSun", serif; font-size: calc(14px / var(--map-zoom, 1)); letter-spacing: 3px; }
.is-china .atlas-water-label { font-size: calc(12px / var(--map-zoom, 1)); letter-spacing: 2px; }
.atlas-inset { position: absolute; right: 8px; bottom: 58px; width: clamp(72px, 13%, 102px); border: 1px solid #b8c3aa; border-radius: 5px; background: #f8f8edf2; overflow: hidden; pointer-events: none; }
.atlas-inset > span { display: block; text-align: center; padding: 4px 0 1px; font-size: 10px; letter-spacing: 2px; color: #67785b; }
.atlas-inset svg { width: 100%; display: block; }
.atlas-inset-land { fill: var(--atlas-land); stroke: var(--atlas-border); stroke-width: .7; }
.atlas-inset text { fill: #79896c; font-size: 14px; text-anchor: middle; letter-spacing: 3px; }
.atlas-inset .atlas-inset-south { font-size: 12px; letter-spacing: 1px; }
.atlas-zoom { position: absolute; right: 4px; bottom: 6px; display: flex; align-items: center; gap: 2px; padding: 4px; border: 1px solid #d4dccc; background: #fbfbf3e8; border-radius: 10px; box-shadow: 0 3px 12px #41533509; }
.atlas-zoom button { border: 0; border-radius: 7px; width: 30px; height: 30px; display: grid; place-items: center; background: transparent; color: #566c4c; padding: 0; }
.atlas-zoom button:hover:not(:disabled) { background: #e8eddf; }
.atlas-zoom button:disabled { opacity: .3; cursor: default; }
.atlas-zoom-value { font-size: 10px; min-width: 34px; text-align: center; color: #7a866e; font-variant-numeric: tabular-nums; }
.atlas-zoom i { width: 1px; height: 14px; margin: 0 3px; background: #dde2d3; }
.atlas-map-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #d5dccb80; padding: 8px 0 12px; }
.atlas-legend { display: flex; align-items: center; gap: 17px; font-size: 11px; color: #7d866f; }
.atlas-legend span { display: flex; align-items: center; gap: 6px; }
.atlas-legend i { width: 9px; height: 9px; border: 1px solid #acb99b; border-radius: 3px; background: var(--atlas-land); }
.atlas-legend .visited { background: var(--atlas-visited); border-color: #728b64; }
.atlas-legend .selected { background: #43664d; border-color: #43664d; }
.atlas-source { display: flex; align-items: center; gap: 4px; font-size: 10px; color: #7b876f; white-space: nowrap; }
.atlas-map-hint { display: flex; align-items: center; gap: 6px; font-size: 10px; color: #8a927e; margin: 9px 0 0; }
.atlas-page .atlas-sidebar { position: sticky; top: 15px; border-left: 1px solid #d4d9c780; padding: 0 0 0 21px; background: transparent; border-radius: 0; min-width: 0; }
.atlas-selection { display: flex; gap: 9px; flex-wrap: wrap; align-items: flex-start; padding: 8px 0 21px; margin-bottom: 17px; border-bottom: 1px solid #d4d9c780; }
.atlas-selection-icon { width: 29px; height: 33px; display: grid; place-items: center; color: #799368; }
.atlas-selection > div { flex: 1; min-width: 0; }
.atlas-selection small { display: block; font-size: 10px; letter-spacing: 1px; color: #8c937d; }
.atlas-selection h2 { font-family: "Songti SC", "SimSun", serif; font-size: 19px; margin: 3px 0 4px; color: #3d5735; font-weight: 600; }
.atlas-selection p { font-size: 11px; color: #8c947d; margin: 0; }
.atlas-selection .btn { width: 100%; margin-top: 4px; justify-content: space-between; font-size: 12px; }
.atlas-select-province { font-size: 11px; color: #81906f; padding-left: 38px; }
.atlas-sidebar .panel-heading { margin-bottom: 11px; align-items: center; }
.atlas-sidebar .panel-heading h2 { font-size: 13px; }
.atlas-sidebar .check-label { gap: 5px; font-size: 11px; white-space: nowrap; }
.atlas-sidebar .check-label input { width: 13px; height: 13px; accent-color: var(--green); }
.atlas-search { position: relative; }
.atlas-search > svg { position: absolute; left: 10px; top: 12px; color: #97a18a; }
.atlas-search .search-input { border-radius: 8px; border-color: #d8dfcc; background: #f9faf2a8; min-height: 38px; padding-left: 31px; font-size: 12px; }
.atlas-sidebar .region-list { max-height: 320px; padding: 0 4px 0 0; margin: 12px -4px 0 0; scrollbar-color: #d4dcc9 transparent; }
.atlas-sidebar .region-row { padding: 9px 9px 9px 7px; gap: 8px; font-family: inherit; font-size: 12px; color: #67755c; border-bottom: 1px solid #dde2d147; border-radius: 6px; }
.atlas-sidebar .region-row > span:first-child { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.atlas-sidebar .region-row:hover { background: #e9eedf; }
.atlas-sidebar .region-row.active { color: #345830; background: #e2ead7; }
.region-dot { width: 4px; height: 4px; border-radius: 50%; background: #c8d0ba; flex-shrink: 0; }
.region-dot.is-visited { background: #628050; }
.atlas-sidebar .visit-count { min-width: 21px; height: 20px; line-height: 20px; font-size: 10px; background: transparent; color: #a0aa90; }
.atlas-sidebar .visit-count.has-visits { background: #e0e8d7; color: #597148; }
.atlas-list-empty { padding: 24px 8px; text-align: center; color: #87937a; font-size: 12px; }
.atlas-memories { margin-top: 26px; }
.atlas-memories .section-heading h2 { font-family: "Songti SC", "SimSun", serif; font-size: 17px; font-weight: 600; }
.atlas-memories .section-heading small { font-size: 11px; color: #929982; }
.atlas-empty-memory { display: flex; align-items: center; gap: 13px; padding: 22px 19px; color: #a1ac90; border: 1px dashed #d1dbc2; border-radius: 10px; background: #f1f4e780; }
.atlas-empty-memory div { display: flex; flex-direction: column; gap: 4px; }
.atlas-empty-memory strong { font-weight: 400; font-size: 13px; color: #738269; }
.atlas-empty-memory span { font-size: 11px; color: #969f87; }
.atlas-load-state { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #8da17c; gap: 6px; min-height: 200px; }
.atlas-load-state p { margin: 6px; font-size: 13px; }
.atlas-load-state small { font-size: 11px; }
.atlas-source-notes p { font-size: 13px; line-height: 1.9; }
.atlas-source-notes h3 { font-size: 15px; }
.atlas-source-notes hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }

@media (max-width: 1000px) {
  .atlas-page .atlas-layout { grid-template-columns: minmax(0, 1fr) 205px; }
  .atlas-main { padding-right: 18px; }
  .atlas-page .atlas-sidebar { padding-left: 16px; }
  .atlas-map-header { flex-wrap: wrap; gap: 5px; }
  .atlas-progress { font-size: 10px; }
}
@media (max-width: 760px) {
  .workspace-overlay:has(.atlas-page) { top: 128px; bottom: 100px; }
  .atlas-page .atlas-layout { grid-template-columns: minmax(0, 1fr); }
  .atlas-main { padding: 0; }
  .atlas-page .atlas-sidebar { position: static; grid-row: auto; margin-top: 25px; border: 0; border-top: 1px solid #d4d9c780; padding: 20px 0 0; }
  .atlas-sidebar .region-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 245px; gap: 0 12px; }
  .atlas-selection { padding-top: 0; }
  .atlas-selection .btn { width: auto; align-self: center; gap: 20px; }
  .atlas-sidebar .panel-heading h2 { font-size: 15px; }
  .native-map { height: clamp(235px, 48vw, 355px); }
  .native-map.is-china { height: clamp(280px, 63vw, 425px); }
  .atlas-inset { bottom: 51px; right: 3px; width: clamp(62px, 14%, 87px); }
  .atlas-inset > span { font-size: 9px; }
  .atlas-memories { margin-top: 20px; }
}
@media (max-width: 450px) {
  .atlas-page .page-top { margin-bottom: 15px; }
  .atlas-map-header .segmented button { font-size: 11px; padding: 6px 9px; }
  .atlas-map-header { gap: 9px; }
  .atlas-progress { margin-left: 3px; }
  .atlas-map-footer { gap: 7px; }
  .atlas-legend { gap: 10px; font-size: 10px; }
  .atlas-source { font-size: 10px; }
  .atlas-map-hint { font-size: 9px; }
  .atlas-zoom button { width: 27px; height: 27px; }
  .atlas-inset { width: 59px; }
  .atlas-empty-memory { padding: 16px 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .atlas-page *, .atlas-page *::before, .atlas-page *::after { transition: none !important; }
}