/* web/css/graf.css */
:root {
    --graph-nw: rgb(180, 80, 100);
    --graph-sw: rgb(224, 150, 90);
    --graph-wt: rgb(80, 160, 100);
    --graph-nr: rgb(70, 130, 180);
    --graph-st: rgb(224, 150, 90);    
    --graph-nw-bg: rgba(180, 80, 100, 0.08);
    --graph-sw-bg: rgba(224, 150, 90, 0.08);
    --graph-wt-bg: rgba(80, 160, 100, 0.08);
    --graph-nr-bg: rgba(70, 130, 180, 0.08);}
.dag-root {margin-bottom: 2rem;}
.dag-toggle-bar {display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem;}
.dag-toggle-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    color: var(--ink3);
    background: var(--bg);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;}
.dag-toggle-btn:hover {background: var(--bg2); color: var(--ink); border-color: var(--ink3);}
.dag-toggle-btn.active {background: var(--accent); border-color: var(--accent); color: white;}
.dag-container {
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--card);
    overflow-x: auto;
    max-width: 100%;
    padding: 0.5rem 0;}
.dag-container.hidden { display: none; }
.dag-svg {display: block; margin: 0 auto; flex-shrink: 0;}
.dag-node {cursor: pointer; transition: opacity 0.15s;}
.dag-node:hover { opacity: 0.75; }
.dag-node-rect {fill: var(--card); stroke: var(--border); stroke-width: 1.5px;}
.dag-node:hover .dag-node-rect {fill: var(--bg2); stroke: var(--ink3);}
.dag-node-center {cursor: default;}
.dag-node-center:hover { opacity: 1; }
.dag-node-center .dag-node-rect {fill: var(--bg2); stroke: var(--ink2); stroke-width: 2px;}
.dag-trigger { cursor: pointer; }
.dag-trigger-arrow {fill: var(--border); transition: fill 0.1s;}
.dag-trigger-arrow.active {fill: var(--ink3);}
.dag-node:hover .dag-trigger-arrow.active {fill: var(--ink);}
.dag-divider {margin: 0.75rem 0; border: none; border-top: 1px solid var(--border);}
.dag-list {padding: 0 0.25rem; display: flex; flex-direction: column; gap: 0.4rem;}
.dag-section {font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; line-height: 1.6; color: var(--ink2);}
.dag-section-label {color: var(--ink3); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;}
.dag-section-nw .dag-section-label { color: var(--graph-nw); }
.dag-section-sw .dag-section-label { color: var(--graph-sw); }
.dag-section-nr .dag-section-label { color: var(--graph-nr); }
.dag-section-wt .dag-section-label { color: var(--graph-wt); }
.dag-link {color: var(--accent); text-decoration: none; font-weight: 500; transition: color 0.1s;}
.dag-link:hover { color: var(--ink); }
.dag-link-secondary {color: var(--ink2); font-weight: 400;}
.dag-link-secondary:hover { color: var(--ink); }
.dag-link-sep {color: var(--ink3, #888); font-size: 0.8rem; user-select: none;}
.dag-tooltip {
    position: fixed;
    background: var(--ink, #1a1814);
    color: var(--bg, #f5f2ec);
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    z-index: 9999;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    max-width: 220px;
    pointer-events: auto;}
.dag-tooltip-title {
    display: block;
    color: inherit;
    text-decoration: none;
    font-weight: 500;
    margin-bottom: 0.25rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid rgba(255,255,255,0.15);}
.dag-tooltip-title:hover { text-decoration: underline; }
.dag-tooltip-list {
    list-style: none;
    padding: 0;
    margin: 0.25rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;}
.dag-tooltip-list a {color: rgba(245, 242, 236, 0.7); text-decoration: none; display: block; transition: color 0.1s;}
.dag-tooltip-list a:hover {color: var(--bg, #f5f2ec); text-decoration: underline;}
.dag-loading, .dag-error {
    padding: 1.5rem;
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    color: var(--ink3);}
.dag-error { color: var(--accent2); }