/* Only the tag constellation is drawn on Canvas; existing D3 SVG tree remains. */
#canvas-container {position:relative;}
#tag-orbit-canvas {
  position:absolute; inset:0; z-index:3;
  display:block; width:100%; height:100%;
  pointer-events:none; /* D3 SVG retains wheel, drag, pinch and click events */
}
.canvas-orbit-tooltip[hidden] {display:none!important;}
.canvas-orbit-tooltip {
  position:absolute; z-index:14; pointer-events:none;
  max-width:235px; white-space:normal; overflow-wrap:anywhere;
  padding:8px 11px; border:1px solid rgba(225,194,122,.55);
  background:rgba(9,33,28,.96); color:#f3ead2; border-radius:10px;
  font:600 11px/1.5 "Plus Jakarta Sans",sans-serif;
  box-shadow:0 7px 24px #000a;
}
.canvas-orbit-metrics {
  font-size:9px; white-space:nowrap; color:#b2dec8;
  letter-spacing:.01em; padding:4px 6px; border-radius:7px;
  border:1px solid #3e6656; background:#112c25;
}
@media(max-width:767px){
  .canvas-orbit-metrics{font-size:8px;padding:3px 5px;}
}

/* v8.1 — HUD rows: metadata never shares a row with action buttons. */
.constellation-meta-row {
  display:flex; align-items:center; flex-wrap:wrap; column-gap:9px; row-gap:5px;
  margin-top:9px; width:100%; min-width:0;
}
.constellation-meta-row #constellation-page {
  color:#a8d3bf; white-space:normal; min-width:0; text-align:left;
  font-size:10px; line-height:1.4; flex:0 1 auto;
}
.constellation-meta-row .canvas-orbit-metrics {max-width:100%; overflow-wrap:anywhere; white-space:normal;}
.constellation-hud .constellation-action-row {
  margin-top:8px; width:100%; min-width:0; display:flex; flex-wrap:wrap;
  justify-content:flex-start; align-items:center; gap:6px;
}
.constellation-hud .constellation-action-row > button,
.constellation-hud .constellation-action-row > a {
  margin:0; flex:0 1 auto; min-width:0; box-sizing:border-box;
  padding:6px 9px; font-size:10.5px; min-height:32px;
}
.constellation-hud .constellation-action-row #constellation-audit {margin-left:0;}
.constellation-hud .constellation-action-row [hidden] {display:none!important;}
/* Focus remains a compact secondary row, and never breaks out of the HUD. */
.canvas-orbit-focus[hidden] {display:none!important;}
.canvas-orbit-focus {
  margin-top:9px; padding:9px; min-width:0; width:100%; box-sizing:border-box;
  border-radius:10px; border:1px solid rgba(231,196,113,.34);
  background:linear-gradient(110deg,rgba(32,68,51,.68),rgba(23,35,34,.75));
}
.canvas-orbit-focus-label {
  display:block; color:#c6a966; letter-spacing:.11em; font-size:9px; font-weight:800;
}
#canvas-orbit-focus-name {
  display:block; margin:3px 0 7px; font-size:12px; line-height:1.45;
  font-weight:700; color:#f5e6b8; overflow-wrap:anywhere;
}
.canvas-orbit-focus-controls {display:flex; flex-wrap:wrap; gap:6px; align-items:center;}
.canvas-orbit-focus-controls button {
  flex:0 1 auto; padding:5px 9px; border:1px solid #60816d; border-radius:7px;
  color:#e9cf94; font-size:10px; font-weight:700; min-height:29px;
}
#canvas-orbit-focus-open {background:#186a50; color:#f4fff9; border-color:#43af86;}
@media(max-width:767px) {
 .constellation-meta-row {gap:5px 8px; margin-top:7px;}
 .constellation-hud .constellation-action-row {gap:5px; margin-top:7px;}
 .constellation-hud .constellation-action-row > button,
 .constellation-hud .constellation-action-row > a {padding:6px 8px; font-size:10px;}
}
/* Maintain the same dark controls if Tailwind CDN loads late. */
.constellation-hud {box-sizing:border-box;}
.constellation-hud .constellation-action-row > button {
  background:rgba(26,57,45,.9); color:#e6cb88;
}
.constellation-hud .constellation-action-row > button:hover,
.constellation-hud .constellation-action-row > button:focus-visible {
  background:#225942; border-color:#d6bd7b; outline-offset:2px;
}
.constellation-hud .constellation-action-row > a {
  background:#176d50; color:#f3fff9; border-color:#46bf97;
}
.canvas-orbit-focus-controls button {background:#173d2f;}
.canvas-orbit-focus-controls #canvas-orbit-focus-open {background:#186a50;}