.interactive-map-page {
  min-height: calc(100vh - var(--header-height));
  padding: calc(var(--header-height) + 2rem) 0 5rem;
  background: var(--canvas);
}

.interactive-map-page > .section-inner { width: min(100% - 2rem, 92rem); }
.atlas-heading { max-width: 58rem; margin-bottom: 1.8rem; }
.atlas-heading h1 { margin: 0.35rem 0 0; font-size: clamp(2rem, 5vw, 4.6rem); line-height: 1; }
.atlas-heading > p:last-child { max-width: 68ch; color: var(--text-muted); }
.atlas-subtitle { margin: 0.8rem 0 0; color: var(--brand-emphasis); font-size: clamp(1.05rem, 2vw, 1.35rem); font-weight: 760; }

.atlas-toolbar {
  position: sticky;
  top: calc(var(--header-height) + 0.75rem);
  z-index: 8;
  display: grid;
  grid-template-columns: minmax(15rem, 1fr) auto auto;
  gap: 0.75rem;
  align-items: end;
  margin-bottom: 0.85rem;
  padding: 0.75rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--surface-elevated);
  box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.12);
}

.atlas-search { display: grid; gap: 0.3rem; color: var(--text-muted); font-size: 0.78rem; font-weight: 760; }
.atlas-search input {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-control);
  background: var(--surface-control);
  color: var(--text-primary);
}

.atlas-view-toggle,
.atlas-navigation-tools { display: flex; gap: 0.35rem; }

.atlas-view-toggle button,
.atlas-navigation-tools button {
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-control);
  background: var(--surface-control);
  color: var(--text-secondary);
  cursor: pointer;
}

.atlas-view-toggle button[aria-pressed="true"] { border-color: var(--border-strong); background: var(--brand); color: var(--ink); }
.atlas-navigation-tools button:disabled { opacity: 0.38; cursor: not-allowed; }
.atlas-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  min-height: 2.5rem;
  margin-bottom: 0.8rem;
  color: var(--text-muted);
  font-size: 0.86rem;
}

.atlas-breadcrumb button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.atlas-breadcrumb [aria-current="page"] { color: var(--text-primary); font-weight: 780; }
.atlas-workspace { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(20rem, 0.85fr); gap: 1rem; align-items: start; }
.atlas-visual-panel,
.atlas-detail { border: 1px solid var(--border-subtle); border-radius: var(--radius-card); background: var(--surface-1); }
.atlas-visual-panel { overflow: hidden; }
.atlas-method-note,
.atlas-keyboard-hint { margin: 0; padding: 0.75rem 1rem; color: var(--text-muted); font-size: 0.78rem; }
.atlas-method-note { border-bottom: 1px solid var(--border-subtle); }
.atlas-keyboard-hint { border-top: 1px solid var(--border-subtle); }

.atlas-map-viewport {
  min-height: 38rem;
  overflow: hidden;
  background-color: var(--surface-1);
  background-image: linear-gradient(var(--border-subtle) 1px, transparent 1px), linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px);
  background-size: 4rem 4rem;
}

.atlas-map-scene {
  position: relative;
  width: 100%;
  min-height: 38rem;
  transform: scale(var(--atlas-zoom));
  transform-origin: 50% 50%;
  transition: transform 180ms ease;
}

.atlas-connectors { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.atlas-connector { stroke: var(--border-strong); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.atlas-relation { stroke: var(--tone-analysis); stroke-width: 1.5; stroke-dasharray: 6 7; vector-effect: non-scaling-stroke; }

.atlas-node-button {
  --atlas-domain-color: var(--brand);
  position: absolute;
  width: 10.5rem;
  min-height: 7.4rem;
  padding: 0.85rem;
  border: 1px solid color-mix(in oklch, var(--atlas-domain-color), var(--border-subtle) 45%);
  border-radius: var(--radius-card);
  background: var(--surface-elevated);
  color: var(--text-primary);
  text-align: left;
  transform: translate(-50%, -50%);
  box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.16);
  cursor: pointer;
  isolation: isolate;
}

.atlas-node-button::before,
.atlas-list-node::before,
.atlas-search-result::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0.28rem;
  background: var(--atlas-domain-color);
}

.atlas-node-button.is-center { width: 13rem; min-height: 9rem; border-color: var(--atlas-domain-color); }
.atlas-node-button.is-selected { outline: 3px solid color-mix(in oklch, var(--atlas-domain-color), transparent 30%); outline-offset: 3px; }
.atlas-node-button:hover { border-color: var(--atlas-domain-color); transform: translate(-50%, -50%) translateY(-0.2rem); }
.atlas-node-button strong {
  display: block;
  color: var(--atlas-domain-color);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 1.25rem;
  line-height: 1.1;
}

.atlas-node-button > span:not(.atlas-node-orbit) { display: block; margin-top: 0.45rem; font-weight: 820; line-height: 1.18; }
.atlas-node-button small { display: block; margin-top: 0.45rem; color: var(--text-muted); font-size: 0.66rem; text-transform: uppercase; }
.atlas-node-orbit {
  position: absolute;
  inset: -0.35rem;
  z-index: -1;
  border: 1px solid color-mix(in oklch, var(--atlas-domain-color), transparent 70%);
  border-radius: calc(var(--radius-card) + 0.2rem);
}

.atlas-domain-animals { --atlas-domain-color: #c39b53; }
.atlas-domain-climate { --atlas-domain-color: #a9755f; }
.atlas-domain-land { --atlas-domain-color: #79966d; }
.atlas-domain-water { --atlas-domain-color: #5c9297; }
.atlas-domain-pollution { --atlas-domain-color: #9a708d; }
.atlas-domain-efficiency { --atlas-domain-color: #b68751; }
.atlas-domain-health { --atlas-domain-color: #b26c67; }
.atlas-domain-overview { --atlas-domain-color: var(--brand); }

.atlas-detail {
  position: sticky;
  top: calc(var(--header-height) + 6.6rem);
  max-height: calc(100vh - var(--header-height) - 7.6rem);
  overflow: auto;
  border-top: 0.28rem solid var(--atlas-domain-color);
}

.atlas-detail-heading,
.atlas-detail-section,
.atlas-detail-metric,
.atlas-source-details { padding: 1rem 1.1rem; }
.atlas-detail-heading { border-bottom: 1px solid var(--border-subtle); }
.atlas-detail-heading > div { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.atlas-claim-badge,
.atlas-confidence {
  padding: 0.22rem 0.45rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-control);
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 760;
  text-transform: uppercase;
}

.atlas-detail-heading h2 { margin: 0.75rem 0 0.35rem; font-size: clamp(1.4rem, 3vw, 2.1rem); line-height: 1.08; }
.atlas-detail-heading p,
.atlas-detail-section p { margin: 0; color: var(--text-secondary); }
.atlas-detail-metric { display: grid; gap: 0.15rem; border-bottom: 1px solid var(--border-subtle); background: var(--surface-2); }
.atlas-detail-metric span,
.atlas-detail-metric small { color: var(--text-muted); }
.atlas-detail-metric strong {
  color: var(--atlas-domain-color);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.atlas-detail-section { border-bottom: 1px solid var(--border-subtle); }
.atlas-detail-section h3 { margin: 0 0 0.45rem; font-size: 0.85rem; text-transform: uppercase; }
.atlas-caution { border-left: 0.25rem solid var(--brand); background: color-mix(in oklch, var(--brand), transparent 92%); }
.atlas-child-links,
.atlas-related-links { display: grid; gap: 0.5rem; }

.atlas-child-links button,
.atlas-related-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.7rem;
  align-items: center;
  min-height: 3rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-control);
  background: var(--surface-control);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}

.atlas-child-links button strong { color: var(--atlas-domain-color); font-family: "JetBrains Mono", ui-monospace, monospace; }
.atlas-related-link { grid-template-columns: 1fr; text-decoration: none; }
.atlas-related-link small { color: var(--text-muted); }
.atlas-source-details { border-bottom: 1px solid var(--border-subtle); }
.atlas-source-details summary { display: flex; justify-content: space-between; cursor: pointer; font-weight: 820; }
.atlas-source-details ul { display: grid; gap: 0.55rem; margin: 0.8rem 0 0; padding: 0; list-style: none; }
.atlas-source-details a {
  display: grid;
  gap: 0.15rem;
  padding: 0.65rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-control);
  background: var(--surface-control);
}
.atlas-source-details span { color: var(--text-muted); font-size: 0.75rem; }

.atlas-tree-list,
.atlas-tree-list ul { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.atlas-list-view { padding: 1rem; }
.atlas-tree-list ul { margin: 0.5rem 0 0.3rem 1rem; padding-left: 1rem; border-left: 1px solid var(--border-subtle); }
.atlas-list-node,
.atlas-search-result {
  --atlas-domain-color: var(--brand);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  width: 100%;
  min-height: 4rem;
  overflow: hidden;
  padding: 0.65rem 0.8rem 0.65rem 1rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-control);
  background: var(--surface-control);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}

.atlas-list-node span,
.atlas-search-result span { display: grid; gap: 0.1rem; }
.atlas-list-node small,
.atlas-search-result small { color: var(--text-muted); }
.atlas-list-node b,
.atlas-search-result b { color: var(--atlas-domain-color); font-family: "JetBrains Mono", ui-monospace, monospace; }
.atlas-list-node.is-selected { border-color: var(--atlas-domain-color); }
.atlas-search-results { display: grid; gap: 0.6rem; padding: 1rem; }
.atlas-content-link { border-left-color: var(--brand); }

@media (max-width: 1100px) {
  .atlas-toolbar { grid-template-columns: 1fr auto; }
  .atlas-navigation-tools { grid-column: 1 / -1; }
  .atlas-workspace { grid-template-columns: 1fr; }
  .atlas-detail { position: static; max-height: none; }
}

@media (max-width: 760px) {
  .interactive-map-page > .section-inner { width: min(100% - 2rem, 92rem); }
  .atlas-heading h1 { font-size: 1.85rem; overflow-wrap: anywhere; }
  .atlas-subtitle { font-size: 1rem; }
  .atlas-toolbar { position: static; grid-template-columns: 1fr; }
  .atlas-view-toggle,
  .atlas-navigation-tools { grid-column: auto; flex-wrap: wrap; }
  .atlas-view-toggle button,
  .atlas-navigation-tools button { flex: 1 1 auto; }
  .atlas-map-viewport,
  .atlas-map-scene { min-height: 0; }
  .atlas-map-scene { display: grid; gap: 0.6rem; padding: 0.75rem; transform: none; }
  .atlas-connectors { display: none; }
  .atlas-node-button,
  .atlas-node-button.is-center {
    position: relative;
    inset: auto;
    left: auto !important;
    top: auto !important;
    width: 100%;
    min-height: 5.5rem;
    transform: none;
  }
  .atlas-node-button:hover { transform: none; }
  .atlas-keyboard-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .atlas-map-scene,
  .atlas-node-button { transition: none; }
}