/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V5 */
:root{
  --viz-paper:var(--surface-main);--viz-soft:var(--surface-soft);--viz-ink:var(--text-main);--viz-muted:var(--text-secondary);--viz-line:var(--line);
  --viz-accent:var(--accent-main);--viz-secondary:var(--alloc-1);--viz-third:var(--alloc-2);
  --flow-source-0:var(--alloc-1);--flow-source-1:var(--alloc-2);--flow-source-2:var(--alloc-3);--flow-source-3:var(--alloc-4);--flow-source-4:var(--alloc-0);--flow-pool:var(--accent-main);
}
html,body{overflow-x:clip}
.visual-section,.income-rollup{min-width:0;padding:20px 18px;border-radius:16px;background:var(--viz-soft)}
.visual-section .section,.income-rollup>.section{margin:0 0 4px;align-items:baseline;gap:8px}
.visual-section .section strong{font-size:18px;white-space:nowrap}
.visual-section .small,.income-rollup>.small{margin:0 0 12px}
.income-rollup .segments{margin:15px 0 8px}
.viz-figure{min-width:0;margin:0;padding:3px 0 0}
.viz-figure svg{display:block;width:100%;height:auto;overflow:visible;max-width:100%}
.viz-figure figcaption{font-size:11px;color:var(--viz-muted);line-height:1.55;margin-top:9px}
.viz-track{stroke:var(--viz-line);stroke-width:1}
.viz-tick,.viz-rung.actual{stroke:var(--viz-accent);stroke-width:2;stroke-linecap:round}
.viz-dot{fill:var(--viz-secondary)}
.viz-label{fill:var(--viz-ink);font-size:10px;font-weight:650}
.viz-number{fill:var(--viz-ink);font-size:10.5px;font-weight:750;font-variant-numeric:tabular-nums}
.viz-small{fill:var(--viz-muted);font-size:9px;font-weight:600;font-variant-numeric:tabular-nums}
.viz-small.viz-strong{fill:var(--viz-accent);font-weight:750}
.viz-rung.planned{stroke:var(--viz-muted);stroke-width:1.6;stroke-linecap:round;opacity:.5}
.viz-axis{fill:var(--viz-muted);font-size:9.5px;font-weight:600}
.viz-figure [role=button]{cursor:pointer}
.viz-figure [role=button]:hover .viz-tick,.viz-figure [role=button]:hover .viz-rung.actual{stroke-width:3}
.viz-figure [role=button]:focus-visible{outline:none}
.viz-figure [role=button]:focus-visible rect[fill=transparent]{stroke:var(--viz-accent);stroke-width:1.5;stroke-dasharray:3 3}
.paired-figure{margin-top:9px}
.paired-figure .key{display:inline-block;width:15px;height:5px;border-radius:2px;vertical-align:middle}
.paired-figure .key.planned{background:var(--viz-muted);opacity:.55}
.paired-figure .key.actual{background:var(--viz-accent)}
.income-rollup-table{margin-top:15px;border-top:1px solid var(--viz-line)}
.income-rollup-head,.income-rollup-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:6px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--viz-line);font-variant-numeric:tabular-nums}
.income-rollup-head{font-size:11px;color:var(--viz-muted);font-weight:600}
.income-rollup-row{font-size:12px}
.income-rollup-row strong{font-weight:650;overflow-wrap:anywhere}
.income-rollup-row span:not(:first-child),.income-rollup-head span:not(:first-child){text-align:right}
.income-rollup>.subtle{margin:12px 0 0}
.ribbon-figure{margin-top:2px}
.viz-ribbon{stroke:var(--viz-paper);stroke-width:2;transition:opacity .2s ease}
.viz-ribbon.band-0,.ribbon-legend .band-0{fill:var(--alloc-0);background:var(--alloc-0)}
.viz-ribbon.band-1,.ribbon-legend .band-1{fill:var(--alloc-1);background:var(--alloc-1)}
.viz-ribbon.band-2,.ribbon-legend .band-2{fill:var(--alloc-2);background:var(--alloc-2)}
.viz-ribbon.band-3,.ribbon-legend .band-3{fill:var(--alloc-3);background:var(--alloc-3)}
.viz-ribbon.band-4,.ribbon-legend .band-4{fill:var(--alloc-4);background:var(--alloc-4)}
.viz-ribbon-point{fill:var(--viz-ink);opacity:.7}
.ribbon-legend{display:flex;flex-wrap:wrap;gap:7px 14px;margin-top:5px;font-size:11px;color:var(--viz-ink)}
.ribbon-legend span{display:inline-flex;align-items:center;gap:5px}
.ribbon-legend i{display:inline-block;width:9px;height:9px;border-radius:2px}
.flow-stage-settings{margin:16px 0 10px}
.flow-stage-settings .small{margin:0 0 8px;color:var(--viz-muted)}
.flow-stage-pills{display:flex;flex-wrap:wrap;gap:7px}
.flow-stage-pills button{border:1px solid var(--viz-line);border-radius:8px;background:var(--viz-paper);color:var(--viz-muted);font-size:11px;font-weight:600;min-height:34px;padding:6px 10px;white-space:nowrap}
.flow-stage-pills button.is-on{background:var(--viz-accent);color:#fff;border-color:var(--viz-accent)}
.flow-stage-pills button:disabled{opacity:.85;cursor:default}
.flow-stage-pills button:focus-visible{outline:2px solid var(--viz-ink);outline-offset:2px}
.flow-label-back{fill:var(--viz-paper);fill-opacity:.95}
.viz-figure svg>.viz-row,.viz-figure svg>.viz-pair,.viz-figure svg>.viz-ribbon{animation:viz-arrive .52s cubic-bezier(.2,.7,.1,1) both}
.viz-figure svg>.viz-row:nth-child(2),.viz-figure svg>.viz-pair:nth-child(2),.viz-figure svg>.viz-ribbon:nth-child(2){animation-delay:.08s}
.viz-figure svg>.viz-row:nth-child(3),.viz-figure svg>.viz-pair:nth-child(3),.viz-figure svg>.viz-ribbon:nth-child(3){animation-delay:.16s}
.viz-figure svg>.viz-row:nth-child(4),.viz-figure svg>.viz-pair:nth-child(4),.viz-figure svg>.viz-ribbon:nth-child(4){animation-delay:.24s}
@keyframes viz-arrive{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:350px){.visual-section,.income-rollup{padding:17px 12px}.flow-stage-pills{gap:5px}.flow-stage-pills button{padding:5px 7px;font-size:10px}.viz-figure figcaption{font-size:10px}}
@media(prefers-reduced-motion:reduce){.viz-ribbon{transition:none}.viz-figure svg>.viz-row,.viz-figure svg>.viz-pair,.viz-figure svg>.viz-ribbon{animation:none}}
