.navigation-map-entry { margin-top: auto; padding-top: var(--space-5); flex-shrink: 0; }
.navigation-map-launch {
  display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: 44px;
  padding: var(--space-3) var(--space-4); border: 0; border-radius: var(--radius-control);
  background: transparent; color: var(--text-3); font-size: var(--meta); font-weight: var(--weight-label);
  text-align: left; box-shadow: none; cursor: pointer;
}
.navigation-map-launch .ui-icon { width: 16px; height: 16px; flex: none; }
.navigation-map-dialog {
  width: min(1280px, calc(100vw - 48px)); max-width: calc(100vw - 48px); max-height: 92dvh;
  padding: var(--space-6); overflow: hidden; inset: 0; margin: auto;
}
.navigation-map-dialog[open] { display: flex; flex-direction: column; gap: var(--space-4); }
.navigation-map-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.navigation-map-heading h2 { margin: 0; }
.navigation-map-heading p { margin: var(--space-2) 0 0; color: var(--text-3); font-size: var(--admin-body); line-height: var(--admin-line); }
.navigation-map-heading .icon-button { flex-shrink: 0; }
.navigation-map-toolbar { display: flex; align-items: center; gap: var(--space-2); }
.navigation-map-toolbar output { width: var(--space-12); text-align: center; font-size: var(--meta); font-variant-numeric: tabular-nums; color: var(--text-2); }
.navigation-map-toolbar .button { margin-left: auto; }
.navigation-map-viewport {
  position: relative; min-height: 0; height: min(64dvh, 820px); overflow: auto; overscroll-behavior: contain;
  border: 1px solid var(--border); border-radius: var(--radius-card); background-color: var(--bg);
  background-image: radial-gradient(var(--border) 1px, transparent 1px); background-size: var(--space-6) var(--space-6);
  scrollbar-color: var(--border-strong) transparent; cursor: grab; touch-action: pan-x pan-y;
}
.navigation-map-viewport.is-panning { cursor: grabbing; user-select: none; }
.navigation-map-space { width: 1140px; height: 820px; position: relative; margin: auto; overflow: hidden; }
.navigation-graph { position: relative; width: 1140px; height: 820px; transform-origin: top left; }
.navigation-map-edges { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.navigation-map-edges path { fill: none; stroke: var(--border-strong); stroke-width: 2; }
.navigation-graph .map-node {
  position: absolute; display: flex; align-items: center; justify-content: center; width: 176px; min-height: 56px;
  padding: var(--space-3); transform: translate(-50%, -50%); border: 1px solid var(--border-strong);
  border-radius: var(--radius-card); background: var(--surface-1); color: var(--text-1);
  font-size: var(--admin-body); line-height: var(--admin-line); font-weight: var(--weight-label);
  text-align: center; text-decoration: none; overflow-wrap: anywhere; scroll-margin: var(--space-6);
  transition: border-color var(--fast), background-color var(--fast), color var(--fast), box-shadow var(--fast);
}
.navigation-graph .map-node-branch { background: var(--surface-2); border-color: var(--border-brand); color: var(--brand); }
.navigation-graph .map-node-root { width: 200px; min-height: 64px; background: var(--brand); color: var(--on-brand); border-color: var(--brand); border-radius: var(--radius-pill); font-size: var(--student-body); font-weight: var(--weight-heading); }
.navigation-graph .map-node[aria-current=page] { outline: 2px solid var(--brand); outline-offset: 4px; }
.navigation-graph .map-node:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; box-shadow: var(--e2); }
.navigation-graph .map-node:active { background: var(--selected-bg); color: var(--brand); border-color: var(--brand); }
body.navigation-map-open { overflow: hidden; }
@media (hover: hover) and (pointer: fine) {
  .navigation-map-launch:hover { background: var(--surface-2); color: var(--text-1); }
  .navigation-graph .map-node:hover { background: var(--selected-bg); border-color: var(--brand); color: var(--brand); box-shadow: var(--e2); }
}
@media (max-width: 767px) {
  .navigation-map-dialog { width: calc(100vw - 16px); max-width: calc(100vw - 16px); padding: var(--space-4); border-radius: var(--radius-dialog); }
  .navigation-map-viewport { height: 64dvh; }
}
@media (prefers-reduced-motion: reduce) { .navigation-graph .map-node { transition: none; } }