/* ── Command palette ─────────────────────────────── */
/* Uses each page's own theme variables, so it matches every page. */

.cp-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 16px 16px;
  background: rgba(0, 0, 0, 0.55);
}

.cp-backdrop[hidden] { display: none; }

.cp-panel {
  width: 100%;
  max-width: 560px;
  overflow: hidden;
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  color: var(--text, #d4d4d4);
  background: var(--bg, #111111);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
}

.cp-input {
  display: block;
  width: 100%;
  padding: 14px 16px;
  font: inherit;
  font-size: 0.95rem;
  color: var(--text, #d4d4d4);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  outline: none;
}

.cp-input::placeholder { color: var(--text-muted, #aaaaaa); opacity: 0.6; }

.cp-list {
  max-height: min(320px, 50vh);
  overflow-y: auto;
  padding: 6px;
  list-style: none;
  scrollbar-width: thin;
}

.cp-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  font-size: 0.88rem;
  color: var(--text-muted, #aaaaaa);
  border-radius: 4px;
  cursor: pointer;
}

.cp-item[aria-selected="true"] {
  color: var(--text, #d4d4d4);
  background: var(--accent-dim, rgba(255, 255, 255, 0.06));
}

.cp-match {
  font-weight: 600;
  color: var(--accent, #a5f3fc);
}

.cp-name { min-width: 0; overflow-wrap: anywhere; }

.cp-alias { opacity: 0.6; font-style: italic; }

.cp-detail {
  flex-shrink: 0;
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.7rem;
  opacity: 0.55;
}

.cp-empty {
  padding: 8px 10px;
  font-size: 0.85rem;
  color: var(--text-muted, #aaaaaa);
  opacity: 0.7;
}

.cp-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  padding: 8px 16px;
  font-size: 0.7rem;
  color: var(--text-muted, #aaaaaa);
  border-top: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}

.cp-footer kbd {
  margin-right: 4px;
  font-family: inherit;
  color: var(--text, #d4d4d4);
}

/* ── Graph view (graph.js) ────────────────────────── */

.gg-backdrop {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
  background: rgba(0, 0, 0, 0.6);
}

.gg-backdrop[hidden] { display: none; }

.gg-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  max-width: 1100px;
  overflow: hidden;
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  color: var(--text, #d4d4d4);
  background: var(--bg, #111111);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
}

.gg-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  font-size: 0.75rem;
  color: var(--text-muted, #aaaaaa);
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}

.gg-title {
  margin-right: auto;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent, #a5f3fc);
}

.gg-header button {
  font: inherit;
  color: var(--text-muted, #aaaaaa);
  background: transparent;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 4px;
  padding: 2px 9px;
  cursor: pointer;
}

.gg-header button:hover { color: var(--text, #d4d4d4); }

.gg-header button[aria-pressed="true"] {
  color: var(--accent, #a5f3fc);
  border-color: var(--accent-border, rgba(165, 243, 252, 0.2));
  background: var(--accent-dim, rgba(165, 243, 252, 0.08));
}

.gg-header button[disabled] { opacity: 0.35; cursor: default; }

.gg-canvas {
  flex: 1;
  width: 100%;
  min-height: 0;
  cursor: grab;
  touch-action: none;
}

.gg-canvas.gg-dragging { cursor: grabbing; }
.gg-canvas.gg-over-node { cursor: pointer; }

.gg-status {
  position: absolute;
  inset: 50% 0 auto;
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-muted, #aaaaaa);
  pointer-events: none;
}