/*
 * The Constellation (/constellation): a full-width canvas stage with HTML overlays for the
 * toolbar, legend, stats and inspector. Every rule is scoped to .cx-area, the page class the
 * template sets. Node colours live in constellation_controller.js and match dashboard.css.
 */

.cx-area { padding-bottom: 20px; }

.cx-area .cx-head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 14px; }
.cx-area .cx-head h1 { font-size: 28px; }
.cx-area .cx-subtitle { color: var(--text-muted); margin: 4px 0 0; max-width: 820px; font-size: 14px; }
.cx-area .cx-head-actions { margin-left: auto; display: flex; gap: 8px; }

.cx-area .cx-stage {
  position: relative; overflow: hidden;
  height: max(540px, calc(100vh - 210px));
  border-radius: var(--radius); border: 1px solid var(--border-strong);
  background: radial-gradient(ellipse at 50% 45%, #0a1c63 0%, var(--navy-950) 72%);
  box-shadow: var(--glow), inset 0 0 120px rgba(1, 9, 45, 0.9);
}
.cx-area .cx-stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(193, 233, 252, 0.05);
  background: repeating-linear-gradient(180deg, rgba(193, 233, 252, 0.018) 0 1px, transparent 1px 4px);
}
.cx-area .cx-stage canvas { position: absolute; inset: 0; display: block; cursor: grab; touch-action: none; outline: none; }
.cx-area .cx-stage canvas.is-panning { cursor: grabbing; }
.cx-area .cx-stage canvas:focus-visible { box-shadow: inset 0 0 0 2px var(--cyan); }

/* Overlays share one glass style. */
.cx-area .cx-toolbar, .cx-area .cx-legend, .cx-area .cx-stats, .cx-area .cx-inspector, .cx-area .cx-results, .cx-area .cx-status {
  position: absolute; z-index: 2;
  background: rgba(1, 9, 45, 0.78); border: 1px solid var(--border-strong); border-radius: 12px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(1, 9, 45, 0.6);
}

/* ---------- Toolbar ---------- */

.cx-area .cx-toolbar { top: 14px; left: 14px; display: flex; align-items: center; gap: 8px; padding: 6px; max-width: calc(100% - 28px); }
.cx-area .cx-search-wrap { position: relative; }
.cx-area .cx-search { display: flex; align-items: center; gap: 8px; padding: 0 8px 0 10px; height: 34px; width: 280px; border-radius: 9px; background: rgba(14, 32, 106, 0.5); border: 1px solid var(--border); }
.cx-area .cx-search:focus-within { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(67, 183, 253, 0.18); }
.cx-area .cx-search svg { width: 15px; height: 15px; color: var(--text-faint); flex: none; }
.cx-area .cx-search input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--text); font: 13.5px var(--font-body); }
.cx-area .cx-search input::placeholder { color: var(--text-faint); }
.cx-area .cx-search input::-webkit-search-cancel-button { filter: invert(0.7); }
.cx-area .cx-kbd, .cx-area .cx-help kbd {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint); padding: 1px 6px; border-radius: 5px;
  border: 1px solid var(--border-strong); background: rgba(1, 9, 45, 0.6);
}
.cx-area .cx-results { top: calc(100% + 8px); left: 0; width: 100%; min-width: 280px; margin: 0; padding: 4px; list-style: none; }
.cx-area .cx-result { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border: 0; border-radius: 8px; background: none; color: var(--text); font: 500 13px var(--font-body); text-align: left; cursor: pointer; }
.cx-area .cx-result:hover, .cx-area .cx-result:focus-visible { background: var(--surface-hover); outline: none; }
.cx-area .cx-result-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-area .cx-result-type { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); }
.cx-area .cx-result-empty { padding: 8px 10px; color: var(--text-faint); font-size: 13px; }

.cx-area .cx-modes { display: flex; padding: 3px; gap: 2px; border-radius: 9px; background: rgba(14, 32, 106, 0.5); border: 1px solid var(--border); }
.cx-area .cx-mode, .cx-area .cx-tool-btn {
  height: 26px; padding: 0 12px; border-radius: 7px; border: 0; cursor: pointer;
  font: 600 12.5px var(--font-body); color: var(--text-muted); background: none; transition: background 0.15s, color 0.15s;
}
.cx-area .cx-mode:hover, .cx-area .cx-tool-btn:hover { color: var(--white); background: var(--surface-hover); }
.cx-area .cx-mode--active { color: var(--navy-950); background: var(--ribbon); box-shadow: 0 0 14px rgba(67, 183, 253, 0.45); }
.cx-area .cx-mode--active:hover { color: var(--navy-950); background: var(--ribbon); }
.cx-area .cx-tool-btn { height: 34px; border: 1px solid var(--border); background: rgba(14, 32, 106, 0.5); }

/* ---------- Legend ---------- */

.cx-area .cx-legend { left: 14px; bottom: 14px; padding: 4px 6px 6px; max-width: min(620px, calc(100% - 28px)); }
.cx-area .cx-legend summary {
  list-style: none; cursor: pointer; padding: 4px 6px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-faint);
}
.cx-area .cx-legend summary::-webkit-details-marker { display: none; }
.cx-area .cx-legend summary::after { content: " ▾"; }
.cx-area .cx-legend:not([open]) summary::after { content: " ▸"; }
.cx-area .cx-legend-items { display: flex; flex-wrap: wrap; gap: 4px; }
.cx-area .cx-legend-item {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 9px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: rgba(14, 32, 106, 0.45); color: var(--text); font: 500 12.5px var(--font-body);
  transition: opacity 0.15s, background 0.15s;
}
.cx-area .cx-legend-item:hover { background: var(--surface-hover); }
.cx-area .cx-legend-item[aria-pressed="false"] { opacity: 0.42; }
.cx-area .cx-legend-item[aria-pressed="false"] .cx-swatch { box-shadow: none !important; background: transparent !important; outline: 1px solid var(--text-faint); }
.cx-area .cx-legend-count { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }
.cx-area .cx-legend-note { display: inline-flex; align-items: center; gap: 7px; padding: 4px 8px; font-size: 12px; color: var(--text-faint); }
.cx-area .cx-swatch { width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; }
.cx-area .cx-swatch--restricted { background: transparent; border: 1.5px dashed #6077ab; width: 10px; height: 10px; }
.cx-area .cx-dash { width: 16px; height: 0; border-top: 2px dashed rgba(138, 141, 255, 0.8); display: inline-block; }

/* ---------- Stats and status ---------- */

.cx-area .cx-stats { top: 14px; right: 14px; padding: 7px 12px; font-size: 11px; letter-spacing: 0.04em; color: var(--text-muted); max-width: 46%; text-align: right; }
.cx-area .cx-stats:empty { display: none; }
.cx-area .cx-status { top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 12px 18px; display: flex; align-items: center; gap: 10px; color: var(--text-muted); font-size: 14px; }
.cx-area .cx-status[hidden] { display: none; }

/* ---------- Inspector ---------- */

.cx-area .cx-inspector {
  top: 60px; right: 14px; bottom: 14px; width: 340px; overflow-y: auto; padding: 14px 16px 16px;
  animation: cx-slide 0.22s ease-out;
}
.cx-area .cx-inspector[hidden] { display: none; }
@keyframes cx-slide { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.cx-area .cx-inspector-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cx-area .cx-kind { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan); }
.cx-area .cx-close { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border); background: none; color: var(--text-muted); font-size: 18px; line-height: 1; cursor: pointer; }
.cx-area .cx-close:hover { color: var(--white); background: var(--surface-hover); }
.cx-area .cx-title { font-size: 19px; line-height: 1.25; margin-bottom: 2px; overflow-wrap: anywhere; }
.cx-area .cx-sub { color: var(--text-muted); font-size: 13px; margin: 0 0 10px; }
.cx-area .cx-note { font-size: 12.5px; color: var(--text-muted); padding: 9px 11px; border-radius: 9px; background: rgba(68, 73, 253, 0.12); border: 1px solid rgba(68, 73, 253, 0.35); }
.cx-area .cx-details { display: grid; grid-template-columns: max-content 1fr; gap: 5px 14px; margin: 10px 0 12px; font-size: 13px; }
.cx-area .cx-details dt { color: var(--text-faint); }
.cx-area .cx-details dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.cx-area .cx-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.cx-area .cx-section-title { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); padding-top: 12px; border-top: 1px solid var(--border); margin-bottom: 6px; }
.cx-area .cx-group { margin-bottom: 10px; }
.cx-area .cx-group h4 { display: flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 12.5px; font-weight: 600; color: var(--text-muted); margin-bottom: 3px; }
.cx-area .cx-count { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint); padding: 0 6px; border-radius: 999px; border: 1px solid var(--border); }
.cx-area .cx-group ul { list-style: none; margin: 0; padding: 0; }
.cx-area .cx-link { display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 6px; margin-left: -6px; border: 0; border-radius: 7px; background: none; color: var(--text); font: 13px var(--font-body); text-align: left; cursor: pointer; }
.cx-area .cx-link:hover { background: var(--surface-hover); color: var(--white); }
.cx-area .cx-link span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-area .cx-more { font-size: 12px; color: var(--text-faint); padding: 2px 0 0 17px; }

.cx-area .cx-help { margin: 10px 2px 0; font-size: 12.5px; }

/* ---------- Narrow screens ---------- */

@media (max-width: 900px) {
  .cx-area .cx-stats { top: auto; bottom: 14px; right: 14px; max-width: 40%; }
  .cx-area .cx-legend { max-width: calc(60% - 28px); }
}

@media (max-width: 760px) {
  .cx-area .cx-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .cx-area .cx-head-actions { margin-left: 0; }
  .cx-area .cx-subtitle { font-size: 13px; }
  .cx-area .cx-stage { height: max(480px, calc(100svh - 150px)); }
  .cx-area .cx-toolbar { left: 8px; right: 8px; top: 8px; flex-wrap: wrap; max-width: none; }
  .cx-area .cx-search-wrap { flex: 1 1 100%; }
  .cx-area .cx-search { width: 100%; }
  .cx-area .cx-results { min-width: 0; }
  .cx-area .cx-modes { flex: 1; }
  .cx-area .cx-mode { flex: 1; }
  .cx-area .cx-kbd { display: none; }
  .cx-area .cx-legend { left: 8px; bottom: 8px; max-width: calc(100% - 16px); }
  .cx-area .cx-stats { display: none; }
  .cx-area .cx-inspector {
    top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 58%;
    animation-name: cx-rise;
  }
  .cx-area .cx-help { display: none; }
}
@keyframes cx-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .cx-area .cx-inspector { animation: none; }
}