/* ───────────────────────────────────────────────────────────
   HUD elements that overlay the 3-D scene:
   - Sidebar status footer
   - Cell-hover tooltip
   - Top-left collision metadata
   - Top-right η×φ minimap
   ─────────────────────────────────────────────────────────── */

/* ── Sidebar status footer ─────────────────────────────── */
#statusbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  min-height: 32px;
  border-top: 1px solid var(--border);
  background: var(--surface-1);

  font-size: var(--fs-xs);
  color: var(--muted);
  cursor: default;
  user-select: none;
}
#statusbar .status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 6px rgba(78, 186, 125, 0.45);
  flex-shrink: 0;
}
#status-txt {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 500 var(--fs-xs) var(--font);
  letter-spacing: 0.02em;
  color: var(--text);
}

.ev-meta {
  font: 400 10.5px var(--font);
  color: var(--muted);
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.ev-meta b {
  font: 500 11px var(--mono);
  color: var(--text);
}

.badge {
  font: 500 10.5px var(--mono);
  color: var(--accent-text);
  background: var(--accent-soft);
  border: 1px solid var(--accent-edge);
  border-radius: 8px;
  padding: 1px 7px;
  letter-spacing: 0.02em;
}

/* ── Cell-hover tooltip ────────────────────────────────── */
#tip {
  position: fixed;
  pointer-events: none;
  z-index: 25;
  padding: 10px 12px;
  min-width: 160px;

  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  box-shadow: var(--shadow-2);

  white-space: nowrap;
}
#tip-cell {
  font: 600 var(--fs-md) var(--font);
  color: var(--bright);
  letter-spacing: 0.01em;
  margin-bottom: 2px;
}
#tip-coords {
  font: 400 10.5px var(--mono);
  color: var(--muted);
  margin-bottom: 4px;
  letter-spacing: 0;
}
.tdiv {
  border: 0;
  border-top: 1px solid var(--divider);
  margin: 6px 0;
}
.trow {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 3px;
}
.tkey {
  font: 500 9.5px var(--font);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  align-self: center;
}
.tval {
  font: 500 11.5px var(--mono);
  color: var(--bright);
  letter-spacing: 0.01em;
}

/* ── Collision-info HUD (top-left, toggleable) ─────────── */
/* Sits right of the sidebar when it's pinned open, right of the
   activity bar when the sidebar is collapsed. Body class
   .panel-unpinned is set by sidebarControls.js when the sidebar
   is unpinned (collapsible/hover-open). */
#collision-hud {
  position: fixed;
  top: 12px;
  left: calc(var(--ab-w) + var(--pw) + 16px);
  z-index: 25;

  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 10px;

  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text);
  opacity: 0.7;
  pointer-events: none;
  user-select: none;
  line-height: 1.5;

  transition:
    left var(--pt) cubic-bezier(0.4, 0, 0.2, 1),
    opacity var(--motion-base);
}
body.panel-unpinned #collision-hud {
  left: calc(var(--ab-w) + 14px);
  opacity: 0.85;
}
#collision-hud[hidden] {
  display: none !important;
}
#collision-hud .ch-key {
  color: var(--muted);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
#collision-hud .ch-val {
  color: var(--bright);
  font-size: 12px;
  letter-spacing: 0.01em;
}

/* ── η × φ energy heatmap (top-left, overlays the collision HUD slot) ─── */
/* Mutually exclusive with #collision-hud — while the minimap is visible the
   collision HUD is force-hidden by statusHud.setCollisionHudSuppressed(). The
   minimap accepts mouse input (draw a rectangle to gate the 3D scene to that
   η×φ window; drag the rectangle to scan). */
#minimap-wrap {
  position: fixed;
  top: 12px;
  left: calc(var(--ab-w) + var(--pw) + 16px);
  z-index: 26;
  display: flex;
  flex-direction: row;
  align-items: flex-start;

  border: 1px solid var(--border-strong);
  background: rgba(8, 14, 28, 0.68);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow-1);
  user-select: none;
  touch-action: none;

  transition: left var(--pt) cubic-bezier(0.4, 0, 0.2, 1);
}
body.panel-unpinned #minimap-wrap {
  left: calc(var(--ab-w) + 14px);
}
#minimap {
  display: block;
  flex-shrink: 0;
  cursor: crosshair;
  user-select: none;
  touch-action: none;
}
/* φ seam slider — absolute overlay on the canvas left margin (INSET_L = 26px).
   No separate column means no dark rectangle beside the canvas. */
.minimap-phi-pane {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* padding-top = INSET_T + LEGEND_BAR_M = 14px so track top aligns with legend bar */
  padding: 14px 0 4px;
  gap: 3px;
  /* Width = INSET_L so the slider sits in the canvas left margin, not in a separate column. */
  width: 26px;
  height: 220px;   /* = canvas H */
  box-sizing: border-box;
  overflow: hidden;
  background: transparent;
  cursor: ns-resize;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
}

/* Minimap thumb: flat crosshair line spanning the full track width */
#minimap-phi-track.strak .sthumb {
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 0;
}

/* Track height = H - INSET_T - INSET_B - 2*LEGEND_BAR_M = 220 - 10 - 20 - 8 = 182px.
   Border matches the legend colour bar on the right edge of the canvas
   exactly: same 182px height, same single 1px rgba(120,150,190,0.30) stroke. */
#minimap-phi-track.strak {
  width: 8px;   /* narrower to fit the 26px INSET_L overlay */
  height: 182px;
  border: 1px solid rgba(120, 150, 190, 0.30);
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

#minimap-phi-lbl {
  width: 100%;
  font: 400 8px/1 var(--font);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  white-space: nowrap;
}