.physea-map {
  /* --paper/--paper-2/--rule are the real Library tokens (physea-tokens.css);
     the old --surface/--line names resolved to nothing, so the panel stayed on
     its light fallback while --map-ink flipped dark. Fallbacks kept for
     token-less host pages. */
  --map-bg: var(--paper, #f4f1ea);
  --map-bg-2: var(--paper-2, #ece5d8);
  --map-ink: var(--ink, #171a1f);
  --map-muted: var(--ink-2, #60656f);
  --map-line: var(--rule, rgba(23, 26, 31, .2));
  --map-accent: var(--primary, #b7442a);
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 2147483000;
  color: var(--map-ink);
  font: 14px/1.45 var(--font-sans, Inter, system-ui, sans-serif);
}

.physea-map__toggle,
.physea-map__close {
  border: 1px solid var(--map-line);
  background: var(--map-bg-2);
  color: var(--map-ink);
  min-height: 40px;
  padding: 0 16px;
  font: 700 12px/1 var(--font-mono, ui-monospace, monospace);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}

.physea-map__toggle { box-shadow: 0 8px 24px rgba(0, 0, 0, .14); }
/* The app shell ships its own labeled "App map" door (.dsp-appmap) whose press
   forwards to this toggle; when that door is on the page, the floating
   duplicate hides. display:none still receives the forwarded press. */
body:has(.dsp-appmap) .physea-map__toggle { display: none; }
.physea-map__toggle:focus-visible,
.physea-map__close:focus-visible,
.physea-map summary:focus-visible { outline: 2px solid var(--map-accent); outline-offset: 3px; }

.physea-map__panel {
  width: min(392px, calc(100vw - 32px));
  max-height: min(720px, calc(100vh - 32px));
  overflow: auto;
  border: 1px solid var(--map-line);
  background: var(--map-bg);
  box-shadow: 0 18px 54px rgba(0, 0, 0, .24);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}

.physea-map__head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  padding: 24px;
  border-bottom: 1px solid var(--map-line);
}

.physea-map__label {
  margin: 0 0 8px;
  color: var(--map-muted);
  font: 700 11px/1.2 var(--font-mono, ui-monospace, monospace);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.physea-map__title { margin: 0; font-size: 22px; line-height: 1.15; }
.physea-map__purpose { margin: 8px 0 0; max-width: 34ch; color: var(--map-muted); }
.physea-map__close { min-height: 32px; padding: 0 10px; }
.physea-map__subjects { padding: 8px 24px; }
.physea-map__subject { border-bottom: 1px solid var(--map-line); }
.physea-map__subject > summary,
.physea-map__contexts > summary,
.physea-map__more > summary {
  cursor: pointer;
  list-style: none;
}
.physea-map__subject > summary::-webkit-details-marker,
.physea-map__contexts > summary::-webkit-details-marker,
.physea-map__more > summary::-webkit-details-marker { display: none; }
.physea-map__subject > summary {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  min-height: 52px;
  gap: 16px;
}
.physea-map__subject > summary::before {
  content: '›';
  grid-column: 2;
  grid-row: 1;
  color: var(--map-muted);
}
.physea-map__subject[open] > summary::before { transform: rotate(90deg); }
.physea-map__subject-name { grid-column: 1; grid-row: 1; font-weight: 700; }
.physea-map__state { grid-column: 1; grid-row: 2; color: var(--map-muted); font: 700 10px/1 var(--font-mono, ui-monospace, monospace); text-transform: uppercase; letter-spacing: .08em; }
.physea-map__state.is-ready { color: var(--map-accent); }
.physea-map__body { padding: 0 0 16px; }
.physea-map__section-label { margin: 8px 0 4px; color: var(--map-muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.physea-map__list { margin: 0; padding-left: 20px; color: var(--map-ink); }
.physea-map__list li { margin: 4px 0; }
.physea-map__summary { margin: 0; max-width: 38ch; color: var(--map-muted); }
.physea-map__more { margin-top: 12px; }
.physea-map__more > summary,
.physea-map__contexts > summary { color: var(--map-muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.physea-map__connections { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 8px; }
.physea-map__connection { border: 1px solid var(--map-line); padding: 4px 8px; font-size: 12px; }
.physea-map__contexts { margin: 8px 24px 0; padding: 16px 0; border-bottom: 1px solid var(--map-line); }
.physea-map__context { display: grid; gap: 3px; padding-top: 12px; }
.physea-map__context span { color: var(--map-muted); }

@media (max-width: 520px) {
  .physea-map { right: 8px; bottom: 8px; }
  .physea-map__panel { width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
}

@media (prefers-reduced-motion: no-preference) {
  .physea-map__panel { animation: physea-map-in 160ms ease-out; }
  @keyframes physea-map-in { from { opacity: 0; transform: translateY(8px); } }
}