/* =============================================================================
   The Astute Berean — Chapter Family-Tree Chart — chart.css
   Dark theme on harmony.css tokens. Category colours match Characters/Timeline.
============================================================================= */
.brct-app {
  --bg: var(--bg-dark, #050811);
  --soft: var(--bg-dimmer, #111827);
  --panel: var(--bg-sidebar, #0c1220);
  --line: var(--bg-highlight, #1e293b);
  --line2: var(--bg-highlight-hover, #334155);
  --ink: var(--text-body, #e2e8f0);
  --ink-soft: var(--text-sub, #94a3b8);
  --ink-dim: var(--text-gray, #64748b);
  --accent: var(--link-active, #fbbf24);
  --male: var(--blue-text, #60a5fa);
  --female: #f472b6;
  --elohim: var(--link-active, #fbbf24);
  --elohim-hybrid: #a78bfa;
  --animal: var(--green-text, #4ade80);
  --unknown: var(--text-sub, #94a3b8);
  --pc: #8aa0c0;
  --sp: #f472b6;
  display: block;
  width: 100%;
  color: var(--ink);
  font-family: var(--heading-secondary, "Roboto", sans-serif);
  box-sizing: border-box;
}
.brct-app *, .brct-app *::before, .brct-app *::after { box-sizing: border-box; }

.brct-app .cat-male { --cat: var(--male); --cat-soft: rgb(96 165 250 / 16%); }
.brct-app .cat-female { --cat: var(--female); --cat-soft: rgb(244 114 182 / 16%); }
.brct-app .cat-elohim { --cat: var(--elohim); --cat-soft: rgb(251 191 36 / 16%); }
.brct-app .cat-elohim-hybrid { --cat: var(--elohim-hybrid); --cat-soft: rgb(167 139 250 / 18%); }
.brct-app .cat-animal { --cat: var(--animal); --cat-soft: rgb(74 222 128 / 16%); }
.brct-app .cat-unknown { --cat: var(--unknown); --cat-soft: rgb(148 163 184 / 16%); }

/* toolbar */
.brct-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.brct-legend { display: flex; flex-wrap: wrap; gap: 13px; }
.brct-leg { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; color: var(--ink-soft); }
.brct-leg i { width: 12px; height: 12px; border-radius: 3px; background: var(--cat, var(--ink-soft)); flex: none; }
.brct-leg-bridge i { background: var(--ink-dim); opacity: .55; border: 1px dashed var(--ink-soft); }
.brct-leg-pc i, .brct-leg-sp i { width: 20px; height: 0; border-radius: 0; background: none; border-top: 3px solid var(--pc); }
.brct-leg-sp i { border-top-color: var(--sp); }
.brct-zoom { display: flex; gap: 6px; }
.brct-zbtn { min-width: 38px; height: 34px; padding: 0 12px; color: var(--ink); background: var(--panel); border: 1px solid var(--line2); border-radius: 8px; cursor: pointer; font: inherit; font-weight: 700; line-height: 1; }
.brct-zbtn:hover { border-color: var(--accent); color: var(--accent); }

/* status */
.brct-status { font-size: .83rem; color: var(--ink-soft); margin: 0 2px 10px; }
.brct-status[data-state="error"] { color: var(--red-text, #f87171); }

/* stage / canvas */
.brct-stage { position: relative; width: 100%; height: clamp(440px, 72vh, 780px); background: var(--bg); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; touch-action: none; user-select: none; }
.brct-canvas { width: 100%; height: 100%; display: block; cursor: grab; }
.brct-canvas:active { cursor: grabbing; }

/* cards */
.brct-card { cursor: default; }
.brct-card .brct-box { fill: var(--cat-soft, var(--soft)); stroke: var(--cat, var(--line2)); stroke-width: 1.5; transition: stroke-width .12s ease; }
.brct-card .brct-name { fill: var(--ink); font-weight: 700; font-size: 13px; text-anchor: middle; }
.brct-card .brct-dates { fill: var(--ink-soft); font-size: 10.5px; text-anchor: middle; }
.brct-card .brct-age { fill: var(--cat, var(--ink-soft)); font-size: 10.5px; font-weight: 600; text-anchor: middle; }
.brct-card:hover .brct-box { stroke-width: 3; }
/* greyed-out deceased intermediates (bridge nodes) */
.brct-card.is-bridge { --cat: var(--ink-dim); --cat-soft: rgb(100 116 139 / 10%); }
.brct-card.is-bridge .brct-name { fill: var(--ink-soft); }
.brct-card.is-bridge .brct-box { stroke-dasharray: 4 3; }

/* edges */
.brct-edges .brct-line { fill: none; stroke: var(--pc); stroke-width: 2; vector-effect: non-scaling-stroke; }
.brct-edges .brct-hit { fill: none; stroke: transparent; stroke-width: 14; pointer-events: stroke; }
.brct-edge { cursor: pointer; }
.brct-edge-sp .brct-line { stroke: var(--sp); }
.brct-edge.is-hot .brct-line, .brct-edge:hover .brct-line { stroke: var(--accent); stroke-width: 3.5; }

/* minimap */
.brct-mini { position: absolute; right: 12px; bottom: 12px; width: 190px; height: 132px; background: rgb(5 8 17 / 84%); border: 1px solid var(--line2); border-radius: 8px; overflow: hidden; box-shadow: 0 6px 18px rgb(0 0 0 / 45%); }
.brct-mini-svg { width: 100%; height: 100%; display: block; cursor: pointer; }
.brct-mini-bg { fill: transparent; }
.brct-mini-node { fill: var(--cat, #64748b); opacity: .82; }
.brct-mini-node.is-bridge { fill: var(--ink-dim); opacity: .4; }
.brct-mini-vp { fill: rgb(251 191 36 / 14%); stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }

@media (max-width: 768px) {
  .brct-toolbar { flex-direction: column; align-items: stretch; }
  .brct-zoom { justify-content: flex-end; }
  .brct-stage { height: clamp(380px, 64vh, 640px); }
  .brct-mini { width: 132px; height: 96px; }
}