/* Flows and Path trace (P1 preview). Every class is prefixed nfp-. */
.nfp-pick { display: flex; gap: 6px; align-items: center; }
.nfp-pick select { max-width: 260px; }
.nfp-spike { font-size: 12px; }
.nfp-spike-h { margin-bottom: 8px; }
.nfp-spike .kv { grid-template-columns: 100px 1fr; }
.nfp-note { padding: 10px 12px; color: var(--muted); font-size: 12px; line-height: 1.5; }

/* path graph */
.nfp-svg { width: 100%; height: auto; max-height: 240px; display: block; }
.nfp-e { fill: none; stroke-width: 2; }
.nfp-e.nfp-ok { stroke: var(--ok); opacity: .7; }
.nfp-e.nfp-warn { stroke: var(--warn); }
.nfp-e.nfp-crit { stroke: var(--crit); stroke-width: 2.6; }
.nfp-e.nfp-off { stroke: var(--line2); stroke-dasharray: 4 4; }
.nfp-el { font-size: 10px; fill: var(--faint); }
.nfp-n rect { fill: var(--panel2); stroke-width: 1.5; }
.nfp-n.nfp-ok rect { stroke: var(--ok); }
.nfp-n.nfp-warn rect { stroke: var(--warn); }
.nfp-n.nfp-crit rect { stroke: var(--crit); fill: color-mix(in srgb, var(--crit) 14%, var(--panel2)); }
.nfp-n.nfp-off rect { stroke: var(--line2); stroke-dasharray: 3 3; fill: var(--panel); }
.nfp-n.nfp-off text { fill: var(--faint); }
.nfp-n[data-href] { cursor: pointer; }
.nfp-nt { font-size: 11px; font-weight: 600; fill: var(--text); }
.nfp-ns { font-size: 10px; fill: var(--muted); }

/* 24 h strip */
.nfp-strip-h { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin: 6px 0 3px; }
.nfp-leg { display: flex; gap: 8px; align-items: center; }
.nfp-leg i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 3px; }
.nfp-strip { display: grid; grid-template-columns: repeat(288, 1fr); gap: 1px; height: 22px; }
.nfp-b { display: block; border-radius: 1px; }
.nfp-b:hover { outline: 1px solid var(--text); }
.nfp-ok { background: color-mix(in srgb, var(--ok) 55%, transparent); }
.nfp-warn { background: var(--warn); }
.nfp-crit { background: var(--crit); }
.nfp-b.nfp-cur { outline: 2px solid var(--accent); outline-offset: 1px; position: relative; z-index: 1; }
.nfp-axis { display: flex; justify-content: space-between; font-size: 10px; color: var(--faint); margin-top: 2px; }

.nfp-paths tr[data-href] { cursor: pointer; }
.nfp-paths tr.nfp-sel td { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.nfp-dim td { opacity: .55; }
.nfp-t-warn { color: var(--warn); }
.nfp-ev { display: flex; flex-direction: column; gap: 8px; font-size: 12px; line-height: 1.45; }
#nfp-conv td, #nfp-talk td { white-space: nowrap; max-width: 175px; overflow: hidden; text-overflow: ellipsis; }
.nfp-paths td { white-space: nowrap; } .nfp-paths td:first-child { max-width: 190px; overflow: hidden; text-overflow: ellipsis; }