/* ==========================================================================
   Arbor Nodes & Edges
   Node cards, node-type variants, and SVG edge layer.
   ========================================================================== */

/* -------------------------------------------------------------------------
   Nodes
   ------------------------------------------------------------------------- */

.arbor-node {
    position: absolute;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md);
    box-shadow: var(--shadow-card);
    cursor: pointer;
    transition:
        box-shadow var(--duration-fast) var(--ease-out),
        transform var(--duration-fast) var(--ease-out);
    max-width: 200px;
    /* Match NODE_HEIGHT=80 from arbor-geometry.js so the rendered box
	       agrees with the constant both layout math and admin SVG assume. */
    min-height: 80px;
    box-sizing: border-box;
    text-align: center;
}

.arbor-node:hover {
    box-shadow: var(--shadow-card-hover);
    transform: scale(1.02);
}

.arbor-node:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.arbor-node-title {
    display: block;
    font-family: var(--font-serif);
    font-size: var(--text-h4);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
}

.arbor-node-verse {
    display: block;
    font-family: var(--font-serif);
    font-size: var(--text-small);
    color: var(--text-muted);
    font-style: italic;
}

/* Node types */
.arbor-node.root {
    border: 2px solid var(--accent);
    background: var(--bg-surface-alt);
}

.arbor-node.related {
    border-style: dashed;
    border-color: var(--border-strong);
}

/* -------------------------------------------------------------------------
   Edges (SVG layer behind nodes)
   ------------------------------------------------------------------------- */

.arbor-edges {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.arbor-edges line,
.arbor-edges path {
    stroke: var(--border-strong);
    stroke-width: 1.5;
    fill: none;
    stroke-linejoin: round;
    stroke-linecap: round;
}