/* Chart canvas + Nuclear Strip interactive styling */

#chart-viewport {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

#chart-viewport svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ±45° canvas rotation — smooth spin of the inner chart group about the center. */
#chart-canvas-root {
  transition: transform 0.18s ease;
}

/* Studio selection ring — high-contrast teal outline on the selected cell. */
#chart-viewport g.chart-selected[data-selected="true"]:not([data-slot="0"]):not(#cell-root) rect,
#chart-viewport g.chart-selected[data-selected="true"]:not([data-slot="0"]):not(#cell-root) polygon,
#chart-viewport g.chart-selected[data-selected="true"]:not([data-slot="0"]):not(#cell-root) path,
#canvas-container g.chart-selected[data-selected="true"]:not([data-slot="0"]):not(#cell-root) rect,
#canvas-container g.chart-selected[data-selected="true"]:not([data-slot="0"]):not(#cell-root) polygon,
#canvas-container g.chart-selected[data-selected="true"]:not([data-slot="0"]):not(#cell-root) path,
#chart-viewport g.selected:not([data-slot="0"]):not(#cell-root) rect,
#chart-viewport g.selected:not([data-slot="0"]):not(#cell-root) polygon,
#chart-viewport g.selected:not([data-slot="0"]):not(#cell-root) path,
#canvas-container g.selected:not([data-slot="0"]):not(#cell-root) rect,
#canvas-container g.selected:not([data-slot="0"]):not(#cell-root) polygon,
#canvas-container g.selected:not([data-slot="0"]):not(#cell-root) path {
    stroke: #0d9488 !important;
    stroke-width: 4 !important;
    fill: rgba(13, 148, 136, 0.12) !important;
}

/* Prevent selection wash from clobbering Slot 0 */
#cell-root rect,
g[data-slot="0"] rect,
g[data-slot="0"].selected rect,
#cell-root.selected rect,
g[data-slot="0"].chart-selected rect,
#cell-root.chart-selected rect,
g[data-slot="0"][data-selected="true"] rect,
#cell-root[data-selected="true"] rect,
#cell-root circle,
g[data-slot="0"] circle,
g[data-slot="0"].selected circle,
#cell-root.selected circle,
g[data-slot="0"].chart-selected circle,
#cell-root.chart-selected circle,
g[data-slot="0"][data-selected="true"] circle,
#cell-root[data-selected="true"] circle {
    fill: #0F4C42 !important;
}

/* In InkSaver mode, allow white override */
.palette-ink-saver #cell-root rect,
.palette-ink-saver g[data-slot="0"] rect,
.palette-ink-saver g[data-slot="0"].selected rect,
.palette-ink-saver #cell-root.selected rect,
.palette-ink-saver g[data-slot="0"].chart-selected rect,
.palette-ink-saver #cell-root.chart-selected rect,
.palette-ink-saver g[data-slot="0"][data-selected="true"] rect,
.palette-ink-saver #cell-root[data-selected="true"] rect,
.palette-ink-saver #cell-root circle,
.palette-ink-saver g[data-slot="0"] circle,
.palette-ink-saver g[data-slot="0"].selected circle,
.palette-ink-saver #cell-root.selected circle,
.palette-ink-saver g[data-slot="0"].chart-selected circle,
.palette-ink-saver #cell-root.chart-selected circle,
.palette-ink-saver g[data-slot="0"][data-selected="true"] circle,
.palette-ink-saver #cell-root[data-selected="true"] circle {
    fill: #FFFFFF !important;
}

/* When Slot 0 is selected, keep its fill and text contrast intact, only apply outline stroke */
#chart-viewport g.chart-selected[data-selected="true"][data-slot="0"] rect,
#chart-viewport g.chart-selected[data-selected="true"]#cell-root rect,
#canvas-container g.chart-selected[data-selected="true"][data-slot="0"] rect,
#canvas-container g.chart-selected[data-selected="true"]#cell-root rect,
#chart-viewport g.selected[data-slot="0"] rect,
#chart-viewport g.selected#cell-root rect,
#canvas-container g.selected[data-slot="0"] rect,
#canvas-container g.selected#cell-root rect,
#chart-viewport g.chart-selected[data-selected="true"][data-slot="0"] circle,
#chart-viewport g.chart-selected[data-selected="true"]#cell-root circle,
#canvas-container g.chart-selected[data-selected="true"][data-slot="0"] circle,
#canvas-container g.chart-selected[data-selected="true"]#cell-root circle,
#chart-viewport g.selected[data-slot="0"] circle,
#chart-viewport g.selected#cell-root circle,
#canvas-container g.selected[data-slot="0"] circle,
#canvas-container g.selected#cell-root circle {
    stroke: #14B8A6 !important;
    stroke-width: 4 !important;
}
#chart-viewport g.chart-selected[data-selected="true"] circle,
#canvas-container g.chart-selected[data-selected="true"] circle {
    stroke: #0d9488 !important;
    stroke-width: 3 !important;
}

/* Chart cells are clickable. */
#chart-viewport g[data-person-id],
#canvas-container g[data-person-id] {
    cursor: pointer;
}

/* Nuclear Strip sibling carousel / union cards */
#drawer-siblings::-webkit-scrollbar {
    height: 6px;
}
#drawer-siblings::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 9999px;
}
.dark #drawer-siblings::-webkit-scrollbar-thumb {
    background: #334155;
}

/* Fullscreen Viewport Mode */
#canvas-container:fullscreen,
#canvas-container.is-fullscreen {
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  background-color: #020617;
  padding: 0;
  margin: 0;
}

/* Floating Glass HUD Dock in Fullscreen */
#canvas-container:fullscreen #canvas-toolbar,
#canvas-container.is-fullscreen #canvas-toolbar {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 0.75rem;
  padding: 0.35rem 0.75rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
}

#canvas-container:fullscreen #canvas-toolbar .canvas-mode-info,
#canvas-container.is-fullscreen #canvas-toolbar .canvas-mode-info {
  display: none !important;
}

#canvas-container:fullscreen #canvas-toolbar button,
#canvas-container.is-fullscreen #canvas-toolbar button,
#canvas-container:fullscreen #canvas-toolbar a,
#canvas-container.is-fullscreen #canvas-toolbar a {
  color: #cbd5e1;
}

#canvas-container:fullscreen #canvas-toolbar button:hover,
#canvas-container.is-fullscreen #canvas-toolbar button:hover,
#canvas-container:fullscreen #canvas-toolbar a:hover,
#canvas-container.is-fullscreen #canvas-toolbar a:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

/* Moniker Badge Visibility Toggle */
#canvas-container.hide-monikers .slot-moniker {
  display: none !important;
}

/* ------------------------------------------------------------------
   Thread focus: clicking a descendant highlights its lineage. The
   selected person's ancestors, its spouses, and all its progeny stay at
   full opacity (focused), while every unrelated branch dims to 15%.
   ------------------------------------------------------------------ */
.dimmed-branch:not([data-slot="0"]):not(#cell-root) {
  opacity: 0.15;
  transition: opacity 0.2s ease-in-out;
}

#chart-viewport .focused-tendril,
#canvas-container .focused-tendril {
  stroke: #0d9488 !important;
  stroke-width: 2.5px !important;
  opacity: 1.0 !important;
}

#chart-viewport .focused-node circle,
#canvas-container .focused-node circle {
  stroke: #0d9488 !important;
  stroke-width: 2.5px !important;
  opacity: 1.0 !important;
}

/* Spousal-pedestal marriage rails (vertical stem + horizontal beam) inherit
   the thread-focus state of their owning biological cell: teal when focused. */
#chart-viewport .marriage-rail,
#canvas-container .marriage-rail {
  transition: stroke 0.2s ease-in-out, stroke-width 0.2s ease-in-out,
    opacity 0.2s ease-in-out;
}

#chart-viewport .marriage-rail.focused-tendril,
#canvas-container .marriage-rail.focused-tendril {
  stroke: #0d9488 !important;
  stroke-width: 3px !important;
  opacity: 1.0 !important;
}

/* ------------------------------------------------------------------
   Subtree fold toggles: the minus/plus badges on parent descendant
   nodes. Hovering pops the badge above the perimeter of its bubble.
   ------------------------------------------------------------------ */
#chart-viewport .fold-toggle,
#canvas-container .fold-toggle {
  z-index: 30;
  cursor: pointer;
  transition: transform 0.15s ease;
}

#chart-viewport .fold-toggle:hover,
#canvas-container .fold-toggle:hover {
  transform: scale(1.15);
  transform-origin: center;
}