/* Waterfall for /resource-waterfall-analyzer (and the chain tree on
   /critical-request-chain-visualizer, which links this file too).
   The chart scrolls horizontally inside its own region; the page never does. */
:is(#wfApp, #crcApp) .xt-wf { border: 1px solid var(--bm-line); border-radius: 12px; background: var(--bm-surface); overflow: auto; max-height: 620px; }
:is(#wfApp, #crcApp) .xt-wf:focus-visible { outline: 3px solid var(--bm-accent-ring); outline-offset: 2px; }
:is(#wfApp, #crcApp) .xt-wf-inner { min-width: 620px; position: relative; }
:is(#wfApp, #crcApp) .xt-wf-row { display: grid; grid-template-columns: 200px minmax(0, 1fr); align-items: center; min-height: 26px; border-bottom: 1px solid var(--bm-line-2); font-size: .8rem; }
:is(#wfApp, #crcApp) .xt-wf-row:last-child { border-bottom: 0; }
:is(#wfApp, #crcApp) .xt-wf-row.is-head { position: sticky; top: 0; z-index: 2; background: var(--bm-surface); font-weight: 700; color: var(--bm-ink-3); }
:is(#wfApp, #crcApp) .xt-wf-row.is-hot .xt-wf-name { font-weight: 800; color: var(--bm-ink); }
:is(#wfApp, #crcApp) .xt-wf-name { padding: 3px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--bm-ink-2); font-family: var(--xt-mono); position: sticky; left: 0; background: var(--bm-surface); z-index: 1; border-right: 1px solid var(--bm-line-2); }
:is(#wfApp, #crcApp) .xt-wf-track { position: relative; height: 26px; margin-right: 12px; }
:is(#wfApp, #crcApp) .xt-wf-bar { position: absolute; top: 7px; height: 12px; display: flex; min-width: 2px; border-radius: 3px; overflow: hidden; }
:is(#wfApp, #crcApp) .xt-wf-bar > span { display: block; height: 100%; }
:is(#wfApp, #crcApp) .xt-wf-mark { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px dashed var(--ic-t3); z-index: 0; pointer-events: none; }
:is(#wfApp, #crcApp) .xt-wf-mark.is-load { border-left-color: var(--ic-t5); }
:is(#wfApp, #crcApp) .xt-wf-ticks { position: relative; height: 26px; margin-right: 12px; }
:is(#wfApp, #crcApp) .xt-wf-ticks span { position: absolute; top: 5px; transform: translateX(-50%); font-weight: 600; }
:is(#wfApp, #crcApp) .xt-wf-ticks span:first-child { transform: none; }
:is(#wfApp, #crcApp) .xt-wf-label { position: absolute; top: 5px; font-size: .72rem; color: var(--bm-ink-3); white-space: nowrap; }

:is(#wfApp, #crcApp) .xt-tree { list-style: none; margin: 0; padding: 0; font-size: .86rem; }
:is(#wfApp, #crcApp) .xt-tree ul { list-style: none; margin: 0; padding-left: 18px; border-left: 2px solid var(--bm-line-2); }
:is(#wfApp, #crcApp) .xt-tree li { margin: 4px 0; }
:is(#wfApp, #crcApp) .xt-tree-node { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; padding: 4px 8px; border-radius: 8px; }
:is(#wfApp, #crcApp) .xt-tree-node.is-hot { background: var(--ic-warn-soft); }
:is(#wfApp, #crcApp) .xt-tree-node code { overflow-wrap: anywhere; }

@media (forced-colors: active) {
    :is(#wfApp, #crcApp) .xt-wf-bar > span { forced-color-adjust: none; }
    :is(#wfApp, #crcApp) .xt-wf-mark { border-left-color: CanvasText; }
}
@media print { :is(#wfApp, #crcApp) .xt-wf { max-height: none; overflow: visible; } }