/* Spatial navigation instrument -----------------------------------------
 *
 * The expanded map is not a web card and not a second renderer. It is a
 * canonical 2.5D instrument over renderer-owned System positions: one fixed
 * tilted ground plane, restrained altitude stalks and contextual target chrome.
 */
.render-map-panel {
  position: fixed;
  z-index: 5;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  border: 0;
  background:
    radial-gradient(ellipse at 50% 58%, color-mix(in srgb, var(--accent), transparent 94%), transparent 42%),
    linear-gradient(180deg, rgba(3,5,17,.995), rgba(1,2,10,.998));
  color: var(--text);
  opacity: 0;
  visibility: hidden;
  transform: translateX(100%);
  pointer-events: none;
  touch-action: none;
  overscroll-behavior: contain;
  transition:
    transform 260ms cubic-bezier(.22,1,.36,1),
    opacity 180ms ease,
    visibility 0s linear 260ms;
}

.render-map-panel[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  pointer-events: auto;
  transition:
    transform 300ms cubic-bezier(.22,1,.36,1),
    opacity 180ms ease,
    visibility 0s linear 0s;
}

/* Chrome floats around the instrument instead of reserving modal rows. */
.render-map__header {
  position: absolute;
  z-index: 4;
  top: 0;
  right: 0;
  left: 0;
  min-height: 0;
  padding:
    max(.8rem, env(safe-area-inset-top, 0px))
    max(.8rem, env(safe-area-inset-right, 0px))
    0
    max(.8rem, env(safe-area-inset-left, 0px));
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: .6rem;
  border: 0;
  background: transparent;
  pointer-events: none;
}

.render-map__header-actions {
  display: flex;
  justify-self: start;
  align-items: center;
  gap: .45rem;
  pointer-events: auto;
}

.render-map__icon {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--accent), transparent 72%);
  border-radius: 999px;
  background: rgba(4,7,20,.62);
  color: color-mix(in srgb, var(--text), transparent 18%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 .5rem 1.6rem rgba(0,0,0,.18);
  font: 400 1.22rem/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, opacity 160ms ease;
}

.render-map__icon:hover,
.render-map__icon:focus-visible {
  border-color: color-mix(in srgb, var(--accent), transparent 34%);
  background: rgba(7,11,30,.88);
  transform: translateY(-1px);
}

.render-map__icon:active {
  transform: scale(.94);
}

.render-map__icon:focus-visible,
.render-map__travel:focus-visible,
.render-map__system-marker:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent), transparent 22%);
  outline-offset: 2px;
}

.render-map__icon--back {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-.3rem) scale(.9);
  pointer-events: none;
}

.render-map__icon--back.render-map__icon--visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(0) scale(1);
  pointer-events: auto;
}

.render-map__title-group {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: .18rem;
  padding-top: .18rem;
  text-align: center;
  pointer-events: none;
}

.render-map__eyebrow,
.render-map__status,
.render-map__selection-kicker,
.render-map__arrival {
  color: color-mix(in srgb, var(--accent), transparent 38%);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: .49rem;
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.render-map__title-group strong {
  max-width: 100%;
  overflow: hidden;
  color: color-mix(in srgb, var(--text), transparent 27%);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: .58rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .13em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.render-map__status {
  justify-self: end;
  min-width: 4rem;
  padding-top: .38rem;
  text-align: right;
  pointer-events: none;
}

.render-map-panel[data-level="system"] .render-map__status {
  color: color-mix(in srgb, var(--text), transparent 56%);
}

.render-map__body {
  position: absolute;
  z-index: 1;
  inset: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  padding:
    max(3.7rem, calc(env(safe-area-inset-top, 0px) + 3rem))
    .35rem
    max(5.7rem, calc(env(safe-area-inset-bottom, 0px) + 5rem));
  pointer-events: none;
}

/* x/z share one canonical world scale in Rust. This square seat only carries
   the already-tilted orthographic instrument projection; it never stretches it. */
.render-map__metric {
  position: relative;
  width: min(96vw, calc(100dvh - 7rem));
  max-width: 48rem;
  aspect-ratio: 1;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: auto;
}

/* Decorative ground glow uses the same center and 0.48 plane cosine as the
   projection code. It must not imply a second geometry underneath the bodies. */
.render-map__metric::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 56%;
  left: 50%;
  width: 86%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--accent), transparent 94%) 0 18%, transparent 64%),
    repeating-radial-gradient(circle, transparent 0 11%, color-mix(in srgb, var(--accent), transparent 97%) 11.2% 11.6%, transparent 11.8% 22%);
  transform: translate(-50%, -50%) scaleY(.48);
  filter: blur(.1px);
  opacity: .72;
  pointer-events: none;
}

.render-map__scope {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.render-map__grid-ring,
.render-map__grid-axis,
.render-map__grid-diagonal,
.render-map__tick {
  vector-effect: non-scaling-stroke;
  fill: none;
}

.render-map__grid-ring {
  stroke: color-mix(in srgb, var(--accent), transparent 88%);
  stroke-width: .65;
}

.render-map__grid-ring--outer {
  stroke: color-mix(in srgb, var(--accent), transparent 66%);
  stroke-width: .9;
}

.render-map__grid-ring--bearing {
  stroke: color-mix(in srgb, var(--text), transparent 88%);
  stroke-width: .52;
}

.render-map__grid-axis,
.render-map__grid-diagonal {
  stroke: color-mix(in srgb, var(--accent), transparent 94%);
  stroke-width: .5;
  stroke-dasharray: 1.2 3.2;
}

.render-map__grid-diagonal {
  stroke-opacity: .42;
}

.render-map__tick {
  stroke: color-mix(in srgb, var(--text), transparent 72%);
  stroke-width: .58;
  opacity: .72;
}

.render-map__tick--major {
  stroke: color-mix(in srgb, var(--text), transparent 48%);
  stroke-width: .82;
  opacity: .92;
}

.render-map__bearing-label {
  fill: color-mix(in srgb, var(--text), transparent 58%);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 1.55px;
  letter-spacing: .08em;
  pointer-events: none;
}

/* Slow glint: life without a rotating radar sweep. */
.render-map__scan {
  position: absolute;
  z-index: 2;
  top: 17%;
  bottom: 17%;
  left: 50%;
  width: 15%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent), transparent 91%), transparent);
  filter: blur(5px);
  opacity: .34;
  transform: translateX(-190%) skewX(-9deg);
  animation: nav-instrument-glint 8.5s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}

.render-map__stalk,
.render-map__pin-stem {
  vector-effect: non-scaling-stroke;
  fill: none;
}

.render-map__stalk {
  stroke: color-mix(in srgb, var(--accent), transparent 54%);
  stroke-width: .72;
}

.render-map__stalk--below {
  stroke-opacity: .34;
  stroke-dasharray: 1.15 1.75;
}

.render-map__foot {
  fill: color-mix(in srgb, var(--accent), transparent 54%);
  vector-effect: non-scaling-stroke;
}

.render-map__system-marker {
  cursor: pointer;
  outline: none;
}

.render-map__marker-hit {
  fill: transparent;
  stroke: transparent;
  pointer-events: all;
}

.render-map__marker-aura,
.render-map__system-ring,
.render-map__system-core,
.render-map__current-orbit,
.render-map__selected-orbit,
.render-map__pin-head,
.render-map__pin-beacon {
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: center;
  pointer-events: none;
}

.render-map__marker-aura {
  fill: color-mix(in srgb, var(--accent), transparent 95%);
  stroke: color-mix(in srgb, var(--accent), transparent 88%);
  stroke-width: .55;
  transition: fill 160ms ease, stroke 160ms ease, r 160ms ease;
}

.render-map__system-ring {
  fill: rgba(2,4,15,.86);
  stroke: color-mix(in srgb, var(--accent), transparent 34%);
  stroke-width: .85;
  transition: stroke 160ms ease, r 160ms ease;
}

.render-map__system-core {
  fill: rgba(246,248,255,.96);
  stroke: color-mix(in srgb, var(--accent), white 30%);
  stroke-width: .58;
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--accent), transparent 46%));
  transition: r 160ms cubic-bezier(.2,.8,.2,1), filter 160ms ease;
}

.render-map__system-marker:hover .render-map__marker-aura,
.render-map__system-marker:focus-visible .render-map__marker-aura,
.render-map__system-marker--selected .render-map__marker-aura {
  fill: color-mix(in srgb, var(--accent), transparent 88%);
  stroke: color-mix(in srgb, var(--accent), transparent 52%);
}

.render-map__system-marker:hover .render-map__system-core,
.render-map__system-marker:focus-visible .render-map__system-core,
.render-map__system-marker--selected .render-map__system-core {
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--accent), transparent 24%));
}

.render-map__current-orbit {
  fill: none;
  stroke: rgba(236,241,255,.66);
  stroke-width: .6;
  stroke-dasharray: 1.35 1.8;
  animation: nav-orbit 7s linear infinite;
}

.render-map__selected-orbit {
  fill: none;
  stroke: color-mix(in srgb, var(--accent), transparent 16%);
  stroke-width: .78;
  stroke-dasharray: 3.4 2.2;
  animation: nav-selected-breathe 1.9s ease-in-out infinite;
}

.render-map__system-marker--travelling .render-map__selected-orbit {
  stroke-dasharray: 1.4 1.4;
  animation: nav-orbit .9s linear infinite, nav-selected-breathe 1.2s ease-in-out infinite;
}

.render-map__pin-stem {
  stroke: color-mix(in srgb, var(--accent), transparent 18%);
  stroke-width: 1;
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--accent), transparent 45%));
}

.render-map__pin-head {
  fill: color-mix(in srgb, var(--accent), white 5%);
  stroke: rgba(245,247,255,.76);
  stroke-width: .58;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent), transparent 28%));
}

.render-map__pin-beacon {
  fill: none;
  stroke: color-mix(in srgb, var(--accent), transparent 28%);
  stroke-width: .7;
  animation: nav-pin-pulse 1.8s ease-in-out infinite;
}

.render-map__label {
  fill: color-mix(in srgb, var(--text), transparent 18%);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 2.05px;
  font-weight: 550;
  letter-spacing: .11em;
  paint-order: stroke;
  stroke: rgba(2,4,15,.94);
  stroke-width: 1.25px;
  stroke-linejoin: round;
  pointer-events: none;
}

.render-map__label--system {
  fill: rgba(240,243,255,.88);
  font-size: 2.25px;
}

.render-map__portal {
  pointer-events: none;
}

.render-map__portal-lens {
  fill: url(#map-black-hole);
  stroke: color-mix(in srgb, var(--accent), transparent 68%);
  stroke-width: .68;
  stroke-dasharray: 1.05 1.35;
  vector-effect: non-scaling-stroke;
  animation: nav-orbit 11s linear infinite reverse;
}

.render-map__portal-core {
  fill: #010107;
  stroke: color-mix(in srgb, var(--accent), transparent 36%);
  stroke-width: .72;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 4px rgba(0,0,0,.95));
}

.render-map__star-aura {
  fill: rgba(255,191,66,.025);
  stroke: rgba(255,210,112,.1);
  stroke-width: .6;
  vector-effect: non-scaling-stroke;
  animation: nav-star-breathe 3.8s ease-in-out infinite;
}

.render-map__star-ring {
  fill: rgba(255,202,82,.045);
  stroke: rgba(255,218,135,.24);
  stroke-width: .7;
  vector-effect: non-scaling-stroke;
}

.render-map__star {
  fill: #fff5d8;
  stroke: rgba(255,220,137,.82);
  stroke-width: .72;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 6px rgba(255,196,70,.64));
}

.render-map__contact {
  vector-effect: non-scaling-stroke;
  fill: var(--accent);
  stroke: rgba(2,4,15,.9);
  stroke-width: .62;
  filter: drop-shadow(0 0 2px color-mix(in srgb, var(--accent), transparent 64%));
}

.render-map__contact--identity {
  fill: rgba(243,246,255,.92);
  stroke: var(--accent);
  stroke-width: .9;
}

.render-map__contact--satellite {
  fill: color-mix(in srgb, var(--accent), var(--muted) 42%);
}

.render-map__contact--private {
  fill: var(--private);
  stroke: color-mix(in srgb, var(--private), white 22%);
}

.render-map__contact--focused {
  stroke: #fff;
  stroke-width: 1.15;
}