/* Switching output (out-switching.js): page layout and the waterfall's marks. */
.swi-out { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-section); }
@container main (width < 56rem) { .swi-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.swi-ishare { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-items: center; margin-bottom: 0.75rem; padding: 0.375rem 0.75rem;
  border-radius: var(--radius-md); background: var(--muted); color: var(--muted-foreground); }
.swi-ishare b { color: var(--foreground); font-weight: 600; }
.swi-chart-note { color: var(--muted-foreground); font-size: var(--text-label); margin-block: 0.5rem; }

.swi-steps { max-width: 45rem; }
.swi-steps tr.swi-row-hidden > :is(td, th) { background: color-mix(in oklab, var(--muted) 50%, transparent); }
.swi-steps tr.swi-row-sum > :is(td, th) { background: var(--muted); font-weight: 600; }

.swi-bar[data-kind="end"] { fill: var(--chart-current); }
.swi-bar[data-kind="gain"] { fill: var(--chart-positive); }
.swi-bar[data-kind="loss"] { fill: var(--chart-negative); }
.swi-bar[data-kind="sum"] { fill: url(#swi-hatch); stroke: var(--foreground); }
/* A step of zero: a neutral tick, neither gain nor loss. */
.swi-zero { stroke: var(--muted-foreground); stroke-width: 2; }
.swi-chart .swi-value { font-size: var(--text-micro); font-weight: 600; font-variant-numeric: tabular-nums; }
.swi-chart .swi-name { font-size: var(--text-micro); }
.swi-chart .swi-dash { fill: var(--muted-foreground); font-size: var(--text-base); font-weight: 700; }
.swi-connector { stroke: var(--muted-foreground); stroke-dasharray: 2 2; }
.swi-break { stroke: var(--background); stroke-width: 3; fill: none; }