/* =============================================================
   Vamsha Vruksham · tree.css
   SVG node, edge, collapse-control, hover, selection, print media.
   ============================================================= */

.node { cursor: pointer; transition: opacity 220ms; }
.node.dimmed { opacity: 0.28; }

.node .frame-bark {
  fill: var(--bark);
  stroke: var(--bark-deep);
  stroke-width: 1.5;
  filter: drop-shadow(0 3px 4px rgba(31,20,8,0.4));
}
.node .frame-gold {
  fill: var(--gold-hi);
  stroke: var(--gold-lo);
}
.node .portrait-bg { fill: var(--parchment); }

.node .initials {
  fill: var(--bark);
  font-family: var(--f-display);
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
}
.node .nameplate { fill: var(--bark); }
.node .name-te {
  fill: var(--cream-hi);
  font-family: var(--f-te);
  font-weight: 500;
  text-anchor: middle;
  dominant-baseline: central;
}
.node .name-en {
  fill: var(--cream-hi);
  font-family: var(--f-body);
  font-weight: 600;
  text-anchor: middle;
  dominant-baseline: central;
}
.node:hover .frame-bark { fill: #4a2d18; }
.node:hover .frame-gold { fill: #f0cf8e; }

.node .glow {
  fill: none;
  stroke: var(--hi-red);
  stroke-width: 3;
  opacity: 0;
  transition: opacity 150ms;
}
.node.selected .glow { opacity: 1; }
.node.search-hit .glow { opacity: 1; stroke: var(--hi-amber); animation: pulse 1.2s ease-out; }
@keyframes pulse {
  0%   { stroke-width: 2; opacity: 0; }
  30%  { stroke-width: 8; opacity: 1; }
  100% { stroke-width: 16; opacity: 0; }
}

/* Leaf wind-sway: applied to the INNER group of each node so it composes
   cleanly with the SVG positioning transform on the outer group. */
.node .leaf-sway {
  animation: sway var(--sway-dur, 6s) ease-in-out infinite;
  transform-origin: center bottom;
  transform-box: fill-box;
}
@keyframes sway {
  0%, 100% { transform: rotate(-1.2deg) translateY(0); }
  50%      { transform: rotate(1.2deg) translateY(-2px); }
}

.edge-parent {
  fill: none;
  stroke: var(--bark-mid);
  stroke-width: 2.5;
  stroke-linecap: round;
  transition: stroke 220ms, stroke-width 220ms, opacity 220ms;
}
.edge-parent.highlighted { stroke: var(--hi-amber); stroke-width: 3.5; }
.edge-parent.dimmed { opacity: 0.18; }

.edge-spouse {
  stroke: var(--gold);
  stroke-width: 3;
  stroke-linecap: round;
  transition: opacity 220ms;
}
.edge-spouse.dimmed { opacity: 0.25; }
.edge-spouse-knot {
  fill: var(--gold-hi);
  stroke: var(--hi-red);
  stroke-width: 1.5;
  transition: opacity 220ms;
}
.edge-spouse-knot.dimmed { opacity: 0.3; }

/* Collapse controls hang below each gen-1 anchor */
.collapse-btn { cursor: pointer; }
.collapse-btn .ring {
  fill: var(--cream);
  stroke: var(--gold);
  stroke-width: 2;
  transition: fill 120ms;
}
.collapse-btn:hover .ring { fill: var(--gold-hi); }
.collapse-btn .glyph {
  fill: var(--bark);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 16px;
  text-anchor: middle;
  dominant-baseline: central;
  user-select: none;
}

/* Portrait corner ornaments */
.portrait-corner { fill: var(--gold-lo); opacity: 0.85; }

/* =============================================================
   PRINT STYLES — NFR: removes animations, uses print-friendly
   colours, hides the interactive chrome.  doPrint() temporarily
   collapses branches beyond the selected generation, refits the
   viewport, invokes window.print(), and then restores the
   original state on the 'afterprint' event.
   ============================================================= */
@media print {
  @page { size: A4 landscape; margin: 10mm; }
  body { background: #fff; overflow: visible !important; height: auto !important; }
  #app { position: static; overflow: visible; }
  #toolbar, #legend, #banner, #side-panel, .modal-overlay, #toasts, #splash,
  #error-card, .collapse-btn { display: none !important; }
  #canvas { position: static; width: 100% !important; height: auto !important; cursor: default !important; }
  .node, .node .leaf-sway { animation: none !important; }
  .node .frame-bark { fill: #4a3218; filter: none; }
  .edge-parent { stroke: #3a2311; opacity: 1 !important; }
  .edge-spouse { stroke: #8a6a3d; opacity: 1 !important; }
  .print-title {
    display: block !important;
    font-family: 'Noto Serif Telugu', serif;
    font-size: 22pt;
    text-align: center;
    color: #3a2311;
    margin: 0 0 10pt;
  }
}
.print-title { display: none; }