html[data-atlas-service] { --atlas-service-header-height: calc(var(--control-h-l) + var(--space-4) + 1px); --atlas-chrome-height: calc(var(--pc-site-header-height) + var(--atlas-service-header-height)); scroll-padding-top: calc(var(--atlas-chrome-height) + var(--space-4)); }
.atlas { background: var(--background); color: var(--foreground); font-family: var(--font-family); }
.atlas [hidden] { display: none !important; }
.atlas > .skip-link:not(:focus) { transform: translateY(calc(-100% - var(--space-1))); }
.atlas-site-header { min-height: var(--pc-site-header-height); }
.atlas-main, .atlas-footer { width: min(100%, var(--page-max)); margin-inline: auto; padding-inline: var(--space-6); }
.atlas a { color: var(--foreground); text-underline-offset: var(--space-1); }
.atlas a.btn-primary { color: var(--primary-foreground); text-decoration: none; }
.theme-control { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-xs); }
.theme-control .input { width: auto; font-size: var(--fs-xs); }
.atlas-main { min-height: calc(100svh - var(--atlas-chrome-height) - 2 * var(--space-12)); padding-block: var(--space-8); }
.atlas-service-header { position: sticky; top: var(--pc-site-header-height); z-index: var(--z-header); border-bottom: 1px solid var(--border); background: var(--background); }
.atlas-service-navigation { display: flex; align-items: center; gap: var(--space-8); min-height: calc(var(--control-h-l) + var(--space-4)); width: min(100%, var(--page-max)); margin-inline: auto; padding: var(--space-2) var(--space-6); }
.atlas-service-navigation a { display: inline-flex; align-items: center; flex: none; min-height: var(--control-h-l); text-decoration: none; white-space: nowrap; }
.atlas-service-brand { font-size: var(--fs-body); font-weight: 600; }
.atlas-service-links { display: flex; align-items: center; gap: var(--space-5); min-width: 0; overflow-x: auto; scrollbar-width: thin; }
.atlas-service-links a { border-bottom: 2px solid transparent; font-size: var(--fs-sm); color: var(--muted-foreground); }
.atlas-service-links a[aria-current="page"] { border-color: var(--foreground); color: var(--foreground); font-weight: 600; }
.atlas-service-links a:hover { color: var(--foreground); }
.atlas .atlas-service-links a:focus-visible { outline-offset: calc(-1 * var(--space-1)); }
.atlas-service-brand[aria-current="page"] { text-decoration: underline; }
.atlas-service-navigation .atlas-upload-link { min-height: var(--control-h-s); margin-left: auto; }
.atlas h1[id], .atlas h2[id], .atlas .tab-content { scroll-margin-top: calc(var(--atlas-chrome-height) + var(--space-4)); }
.server-city-controls { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); }
.atlas h1 { font-size: var(--fs-h2); line-height: var(--lh-h2); margin-bottom: var(--space-2); }
.atlas h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); margin-bottom: var(--space-2); }
.atlas h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); margin-block: var(--space-6) var(--space-3); }
.atlas p { margin-bottom: var(--space-3); line-height: var(--lh-body); }
.import-surface { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); border-bottom: 1px solid var(--border); padding-bottom: var(--space-4); }
.import-surface[data-drag="true"] { outline: 2px solid var(--ring); outline-offset: var(--space-1); }
.import-surface p:last-child { margin-bottom: 0; }
.import-invitation { font-size: var(--fs-h2); font-weight: 600; }
.atlas[data-has-city="false"] .import-surface { position: relative; isolation: isolate; justify-content: center; text-align: center; flex-direction: column; padding-block: var(--space-8) var(--space-10); border: 0; gap: var(--space-5); }
.atlas[data-has-city="false"] .import-heading h1 { font-size: clamp(var(--fs-display), 5vw, var(--fs-display-xl)); line-height: var(--lh-display); margin-bottom: var(--space-4); }
.atlas[data-has-city="false"] .import-invitation { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 400; color: var(--muted-foreground); margin: 0; }
.atlas[data-has-city="false"] .import-actions .btn { min-height: var(--control-h-l); padding-inline: var(--space-6); }
.hero-ambient { display: none; }
.atlas[data-has-city="false"] .hero-ambient { display: block; position: absolute; inset: 0; width: 100%; height: 100%; color: var(--primary); opacity: .32; pointer-events: none; }
.hero-contours { opacity: .45; }
.hero-particles { opacity: .7; animation: atlas-particles-arrive 2.8s ease-out both; transform-box: fill-box; transform-origin: center; }
.hero-particles-b { animation-delay: .15s; }
.hero-particles-c { animation-delay: .3s; }
.atlas[data-has-city="false"] .import-heading, .atlas[data-has-city="false"] .import-actions { position: relative; }
.import-actions .hz-icon { transition: transform .18s ease-out; }
.import-actions .btn:focus-visible .hz-icon { transform: translateX(var(--space-1)); }
@media (hover: hover) { .import-actions .btn:hover .hz-icon { transform: translateX(var(--space-1)); } }
.import-surface:has(#progressArea:not([hidden])) .hero-ambient { display: none; }
html[data-theme^="hc-"] .atlas .hero-ambient { display: none; }
@keyframes atlas-particles-arrive { from { opacity: 0; transform: translateY(var(--space-3)); } to { opacity: .7; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero-particles { animation: none; } .import-actions .hz-icon { transition: none; transform: none !important; } }
.atlas[data-has-city="true"] .import-heading { display: none; }
.atlas[data-has-city="true"] .import-surface { align-items: start; border: 0; }
.atlas[data-has-city="true"] .import-actions { display: none; }
#restoreEmpty { justify-self: center; margin-top: var(--space-6); }
.drop-overlay { position: fixed; inset: var(--space-4); z-index: var(--z-overlay); display: grid; place-items: center; pointer-events: none; background: var(--background); border: 2px dashed var(--ring); border-radius: var(--radius-lg); }
.drop-overlay > div { display: grid; gap: var(--space-3); text-align: center; padding: var(--space-6); }
.drop-overlay strong { font-size: var(--fs-h1); line-height: var(--lh-h1); }
.drop-overlay span { font-size: var(--fs-sm); color: var(--muted-foreground); }
.import-actions { display: grid; align-content: center; gap: var(--space-2); }
.import-actions .actions { margin-top: var(--space-2); }
.atlas label { display: grid; gap: var(--space-2); font-size: var(--fs-sm); }
.atlas label.theme-control { display: flex; }
.atlas input, .atlas select, .atlas textarea { max-width: 100%; min-width: 0; }
.atlas textarea { resize: vertical; }
.actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
#progressArea { width: 100%; display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; text-align: left; }
.import-status { min-width: 0; flex-basis: 100%; overflow-wrap: anywhere; font-size: var(--fs-sm); }
#importFileName { display: block; color: var(--muted-foreground); font-size: var(--fs-xs); margin-bottom: var(--space-1); }
#importProgress { flex: 1; min-width: 6rem; accent-color: var(--primary); }
.atlas-message { font-size: var(--fs-sm); padding-top: var(--space-2); color: var(--muted-foreground); }
.atlas-message:empty { display: none; }
.atlas-message[data-error="true"] { padding: var(--space-3); background: var(--destructive-surface); border-left: 3px solid var(--destructive); }
.workspace-toolbar { display: flex; gap: var(--space-4); align-items: end; flex-wrap: wrap; padding-bottom: var(--space-4); }
.workspace-toolbar:not(:has(> label:not([hidden]))) { display: none; }
.workspace-toolbar label { flex: 1; min-width: min(100%, 12rem); max-width: var(--content-max); }
.section-head { display: flex; gap: var(--space-4); align-items: start; justify-content: space-between; flex-wrap: wrap; }
.city-heading { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); }
.city-heading-main { flex: 1; min-width: min(100%, 12rem); }
.city-heading-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); }
.city-share { display: flex; align-items: end; flex-wrap: wrap; gap: var(--space-3); padding-block: var(--space-4); border-block: 1px solid var(--border); margin-bottom: var(--space-4); }
.city-share label { flex: 1; min-width: min(100%, 16rem); }
.city-share .actions { min-height: var(--control-h-m); align-items: center; }
.city-share p { flex-basis: 100%; margin: 0; }
.city-share p:empty { display: none; }
.city-heading h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); overflow-wrap: anywhere; }
.city-meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
.city-meta p { margin: 0; overflow-wrap: anywhere; }
#sampleSource { display: block; margin-block: var(--space-4); font-size: var(--fs-xs); color: var(--muted-foreground); }
.tab-scroll { overflow-x: auto; }
.atlas .tabs-list { width: max-content; min-width: 100%; }
.atlas .tab { flex: none; white-space: nowrap; }
.atlas .tab[aria-selected="true"] { color: var(--foreground); border-color: var(--foreground); }
.atlas .tab-content { padding: var(--space-4) 0 var(--space-8); min-width: 0; }
.atlas .tab-content:not(#panel-map) { max-width: var(--content-max); margin-inline: auto; }
.atlas .tab-content > h3:first-child, .atlas .tab-content > .section-head:first-child h3 { margin-top: var(--space-2); }
.scope-note { color: var(--muted-foreground); font-size: var(--fs-sm); margin-bottom: var(--space-4); }
.metric-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--border); margin-block: var(--space-4) var(--space-6); }
.metric-strip > div { padding: var(--space-5); border-right: 1px solid var(--border); min-width: 0; }
.metric-strip > div:last-child { border-right: 0; }
.metric-strip dt { color: var(--muted-foreground); font-size: var(--fs-sm); margin-bottom: var(--space-2); }
.metric-strip dd { font-size: var(--fs-h1); font-weight: 600; font-variant-numeric: tabular-nums; margin: 0; overflow-wrap: anywhere; }
.metric-strip small { display: block; font-size: var(--fs-xs); font-weight: 400; color: var(--muted-foreground); margin-top: var(--space-1); }
.detail-list > div { display: grid; grid-template-columns: minmax(6rem, 1fr) minmax(0, 2fr); gap: var(--space-4); padding-block: var(--space-3); border-bottom: 1px solid var(--border); }
.detail-list dt { font-size: var(--fs-sm); color: var(--muted-foreground); }
.detail-list dd { margin: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.option-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-4); font-size: var(--fs-sm); }
.atlas details { border-top: 1px solid var(--border); padding-block: var(--space-4); }
.atlas summary { cursor: pointer; font-weight: 600; }
.atlas details[open] summary { margin-bottom: var(--space-4); }
.flat-list { list-style: none; padding: 0; margin-block: var(--space-4); }
.flat-list li { display: flex; justify-content: space-between; gap: var(--space-3); align-items: center; padding-block: var(--space-3); border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.flat-list li > span { min-width: 0; }
.flat-list .btn { flex: none; }
.comparison { padding: var(--space-4) 0; }
.comparison p { margin-bottom: var(--space-2); }
.population-chart { display: grid; gap: var(--space-3); margin-block: var(--space-4) var(--space-6); }
.chart-row { display: grid; grid-template-columns: minmax(7rem, 1fr) minmax(0, 2fr) minmax(5rem, auto); gap: var(--space-3); align-items: center; font-size: var(--fs-sm); }
.chart-bar { display: block; background: var(--primary); height: var(--space-3); border-radius: var(--radius-sm); }
.datatable-shell { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.table-wrapper { overflow-x: auto; }
.atlas .table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.atlas .table th, .atlas .table td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); white-space: nowrap; }
.atlas .table th { background: var(--surface); font-weight: 600; }
.atlas .table td:last-child { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; }
.atlas .table tbody tr:last-child td { border-bottom: 0; }
.storage-exports { margin-block: var(--space-4) var(--space-8); }
.atlas-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); border-top: 1px solid var(--border); padding-block: var(--space-5); color: var(--muted-foreground); font-size: var(--fs-xs); }
.atlas-footer nav { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.atlas-footer a { color: var(--muted-foreground); text-decoration: none; }
.atlas-footer a:hover { text-decoration: underline; }
.atlas :focus-visible { outline: 2px solid var(--ring); outline-offset: var(--space-1); }
@media (max-width: 1024px) { .metric-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .metric-strip > div:nth-child(2) { border-right: 0; } .metric-strip > div:nth-child(-n+2) { border-bottom: 1px solid var(--border); } }
@media (max-width: 640px) {
  html[data-atlas-service] { --atlas-service-header-height: calc(var(--control-h-l) + var(--control-h-m) + var(--space-4) + 1px); }
  .atlas-service-navigation { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--space-3); padding-inline: var(--space-4); }
  .atlas-service-links { grid-column: 1 / -1; grid-row: 2; gap: var(--space-5); }
  .atlas-service-links a { min-height: var(--control-h-m); }
  .atlas-service-navigation .atlas-upload-link { grid-column: 2; grid-row: 1; }
  .atlas-main, .atlas-footer { padding-inline: var(--space-4); } .atlas-main { padding-block: var(--space-4); }
  .metric-strip > div { padding: var(--space-4); } .metric-strip dd { font-size: var(--fs-h2); }
  .chart-row { grid-template-columns: minmax(6rem, 1fr) minmax(0, 1fr) auto; gap: var(--space-2); } .sample-actions > span { flex-basis: 100%; } .atlas-footer { align-items: start; }
}
.auto-overview { margin-bottom: var(--space-6); }
.auto-overview .section-head { align-items: center; }
.auto-overview h3 { margin-top: 0; }
.city-preview { height: clamp(16rem, 34vw, 26rem); overflow: hidden; border: 1px solid var(--border); }
.city-preview svg { width: 100%; height: 100%; display: block; }
.auto-insights { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.auto-insights p { margin-bottom: 0; }

.atlas .chart-row { color: var(--foreground); background: var(--background); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-3); text-align: left; font-family: inherit; cursor: pointer; }
.atlas .chart-row[aria-pressed="true"] { border-color: var(--foreground); }
.building-chart { display: grid; gap: var(--space-3); margin-bottom: var(--space-5); }
.snapshot-map-tools { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); font-size: var(--fs-sm); }
.snapshot-timeline { list-style: none; padding: 0; display: grid; gap: var(--space-2); margin-block: var(--space-4) var(--space-6); }
.snapshot-entry { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-2) var(--space-4); text-align: left; padding: var(--space-4); color: var(--foreground); background: var(--background); border: 0; border-left: 3px solid var(--border); cursor: pointer; font: inherit; font-size: var(--fs-sm); }
.snapshot-entry[aria-pressed="true"] { border-color: var(--primary); background: var(--surface); }
.snapshot-entry small { grid-column: 1 / -1; color: var(--muted-foreground); font-size: var(--fs-xs); }
.snapshot-file { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snapshot-deltas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); padding-block: var(--space-3); margin-bottom: var(--space-4); }
.snapshot-deltas dt { color: var(--muted-foreground); font-size: var(--fs-sm); }
.snapshot-deltas dd { font-size: var(--fs-h3); font-weight: 600; font-variant-numeric: tabular-nums; margin: 0; overflow-wrap: anywhere; }
.collection-tools { display: flex; align-items: end; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-4); }
.collection-tools label:first-child { flex: 1; min-width: min(100%, 12rem); }
.city-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin-block: var(--space-4) var(--space-6); }
.city-tile { min-width: 0; display: grid; gap: var(--space-3); align-content: start; }
.city-tile > .btn { justify-self: start; }
.city-open { display: grid; gap: var(--space-2); padding: 0; border: 0; color: var(--foreground); background: transparent; text-align: left; font: inherit; cursor: pointer; }
.city-open strong { font-size: var(--fs-h3); overflow-wrap: anywhere; }
.city-open > span:not(.city-thumbnail), .city-open small { font-size: var(--fs-sm); color: var(--muted-foreground); }
.city-thumbnail { display: grid; place-items: center; height: 12rem; overflow: hidden; background: var(--surface); border-radius: var(--radius-lg); border: 1px solid var(--border); }
.city-thumbnail .network-svg { width: 100%; height: 100%; }
.city-thumbnail .network-road-casing { stroke-width: 1; }
.city-thumbnail .network-road-surface { stroke-width: .4; }
.city-open:hover .city-thumbnail { border-color: var(--foreground); }
.city-open:hover strong { text-decoration: underline; text-underline-offset: var(--space-1); }
@media (max-width: 1024px) { .city-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .city-gallery { grid-template-columns: minmax(0, 1fr); } .snapshot-entry { grid-template-columns: minmax(0, 1fr); } .snapshot-deltas { grid-template-columns: repeat(2, minmax(0, 1fr)); } .city-thumbnail { height: 14rem; } }