/* Hades memory map Obsidian-style refinement — 2026-06-22
   Goals: unclipped labels, real relationship focus, file-type color visibility, less fake internal spaghetti. */

.ops-main:has(.hades-page) .metric-strip,
.ops-main:has(.hades-page) .character-rail {
  display: none !important;
}

.ops-main:has(.hades-page) {
  grid-template-rows: auto auto 1fr !important;
  gap: 12px !important;
}

.ops-grid.hades-grid.hades-page,
.hades-grid.hades-page {
  min-height: min(600px, calc(100vh - 150px)) !important;
  overflow: visible !important;
  align-items: stretch !important;
}

.hades-page .ops-panel,
.hades-page .ops-panel.is-wide {
  overflow: visible !important;
}

/* Keep the premium orb, but do NOT clip labels/content at the sphere edge. */
.hades-sphere.hades-mind-map.is-3d {
  width: min(64vh, 520px, 100%) !important;
  height: min(64vh, 520px) !important;
  min-height: 0 !important;
  aspect-ratio: 1 / 1 !important;
  margin: 0 auto 44px !important;
  overflow: visible !important;
  border-radius: 50% !important;
  border: 1px solid rgba(148, 163, 184, .22) !important;
  background:
    radial-gradient(circle at 38% 32%, rgba(255,255,255,.12), transparent 0 4%, transparent 15%),
    radial-gradient(circle at 45% 42%, rgba(125, 211, 252, .095), transparent 34%),
    radial-gradient(circle at 55% 58%, rgba(192, 132, 252, .085), transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(3, 7, 18, .08), rgba(3, 7, 18, .54) 73%, rgba(0,0,0,.92) 100%),
    linear-gradient(140deg, rgba(2,6,23,.94), rgba(10,14,30,.88)) !important;
  box-shadow:
    inset 30px 24px 82px rgba(255,255,255,.045),
    inset -38px -48px 110px rgba(0,0,0,.70),
    inset 0 0 90px rgba(125, 211, 252, .055),
    0 0 34px rgba(125, 211, 252, .08) !important;
}

/* Kill the fake decorative internal connector texture. Real SVG links carry the graph now. */
.hades-sphere.hades-mind-map.is-3d::after {
  display: none !important;
}

.hades-sphere.hades-mind-map.is-3d::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 1px rgba(216,180,254,.08),
    inset 0 0 32px rgba(125,211,252,.045),
    inset -28px -36px 80px rgba(0,0,0,.46);
}

/* Actual relationship layer: almost silent by default, Obsidian-style illumination on selected/related links. */
.hades-sphere .hades-links,
.hades-sphere .hades-links-3d {
  inset: 8% !important;
  width: 84% !important;
  height: 84% !important;
  transform: none !important;
  opacity: 1 !important;
  overflow: visible !important;
  z-index: 2 !important;
  filter: none !important;
  pointer-events: none !important;
  border-radius: 50% !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.hades-sphere .hades-links line,
.hades-sphere .hades-links path,
.hades-sphere .hades-links-3d line,
.hades-sphere .hades-links-3d path {
  stroke: rgba(148, 163, 184, .42) !important;
  stroke-width: .32px !important;
  opacity: .018 !important;
  vector-effect: non-scaling-stroke;
  transition: opacity .18s ease, stroke .18s ease, stroke-width .18s ease, filter .18s ease;
}

.hades-sphere .hades-links .is-same-folder,
.hades-sphere .hades-links-3d .is-same-folder {
  stroke: rgba(148, 163, 184, .46) !important;
  opacity: .035 !important;
}

.hades-sphere .hades-links .is-selected,
.hades-sphere .hades-links .is-related,
.hades-sphere .hades-links-3d .is-selected,
.hades-sphere .hades-links-3d .is-related {
  stroke: rgba(125, 211, 252, .88) !important;
  stroke-width: .78px !important;
  opacity: .44 !important;
  filter: drop-shadow(0 0 5px rgba(125,211,252,.38)) !important;
}

/* File-type colors: the node body now shows the app's --node-color instead of washing every star gold/white. */
.hades-sphere .hades-node.node-3d,
.hades-sphere button.hades-node {
  width: 9px !important;
  height: 9px !important;
  min-width: 9px !important;
  min-height: 9px !important;
  border: 1px solid color-mix(in srgb, var(--node-color, #7dd3fc) 55%, white) !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.92) 0 13%, color-mix(in srgb, var(--node-color, #7dd3fc) 84%, white) 14% 34%, var(--node-color, #7dd3fc) 36% 72%, rgba(15,23,42,.45) 74% 100%) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.035),
    0 0 8px color-mix(in srgb, var(--node-color, #7dd3fc) 72%, transparent),
    0 0 18px color-mix(in srgb, var(--node-color, #7dd3fc) 42%, transparent) !important;
  opacity: .86 !important;
  z-index: 7 !important;
  transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.hades-sphere .hades-node.is-front {
  width: 11px !important;
  height: 11px !important;
  min-width: 11px !important;
  min-height: 11px !important;
  opacity: .98 !important;
  z-index: 9 !important;
}

.hades-sphere .hades-node.is-related {
  opacity: 1 !important;
  border-color: color-mix(in srgb, var(--node-color, #7dd3fc) 65%, white) !important;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--node-color, #7dd3fc) 18%, transparent),
    0 0 12px color-mix(in srgb, var(--node-color, #7dd3fc) 76%, transparent),
    0 0 24px color-mix(in srgb, var(--node-color, #7dd3fc) 34%, transparent) !important;
}

.hades-sphere .hades-node.is-selected {
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  min-height: 15px !important;
  opacity: 1 !important;
  border: 2px solid #ffffff !important;
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--node-color, #7dd3fc) 18%, transparent),
    0 0 18px color-mix(in srgb, var(--node-color, #7dd3fc) 86%, transparent),
    0 0 42px rgba(125, 211, 252, .28) !important;
  z-index: 18 !important;
}

.hades-sphere .hades-node.is-dim {
  opacity: .30 !important;
  filter: grayscale(.18) brightness(.72) !important;
}

/* Labels/legend must breathe outside the circular sphere instead of being chopped by it. */
.hades-legend {
  position: absolute !important;
  left: 50% !important;
  top: calc(100% + 14px) !important;
  width: max-content !important;
  max-width: min(680px, 92vw) !important;
  transform: translateX(-50%) !important;
  z-index: 8 !important;
  opacity: .78 !important;
  background: rgba(2, 6, 23, .58) !important;
  border: 1px solid rgba(148, 163, 184, .14) !important;
  border-radius: 999px !important;
  padding: 6px 10px !important;
  backdrop-filter: blur(10px) !important;
}

.hades-drag-hint {
  position: absolute !important;
  left: 50% !important;
  top: calc(100% + 48px) !important;
  transform: translateX(-50%) !important;
  z-index: 8 !important;
  opacity: .58 !important;
}

.selected-memory {
  margin-top: 58px !important;
}

@media (max-width: 1100px) {
  .ops-grid.hades-grid.hades-page,
  .hades-grid.hades-page {
    min-height: auto !important;
  }

  .hades-sphere.hades-mind-map.is-3d {
    width: min(82vw, 520px) !important;
    height: min(82vw, 520px) !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .hades-legend {
    white-space: normal !important;
    border-radius: 18px !important;
  }
}