/* The sorting chute: one hopper of every kind of income, three pipes, three ruled columns (counts,
   it depends, left out), each entry on its own line like a cash book. Drawn by the build from
   rules.json and read the same without script. Where the browser can tie an animation to scrolling,
   the entries drop down their column as it comes into view; nothing is hidden where it cannot. */

.qi-chute { container: ch / inline-size; margin: 28px 0 0; }
.qi-chute ul { padding: 0; }
.qi-chute li { margin: 0; }
.ch-hopper { margin: 0 auto; max-width: 600px; }
.ch-hopper p { margin: 0; padding: 14px 18% 20px; background: var(--ink); color: var(--paper); text-align: center; font: 600 16px/1.3 var(--sans); clip-path: polygon(0 0, 100% 0, 60% 100%, 40% 100%); }
.ch-pipes { display: block; width: 100%; height: 54px; margin: -1px 0 0; }
.ch-pipes path { stroke: var(--ink); stroke-width: 2px; }
.ch-bins { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) minmax(0, 2fr); gap: 14px; align-items: start; }
.ch-bin { position: relative; min-width: 0; padding: 12px 14px 12px; border: 2px solid var(--ink); border-top: 0; background: var(--card); overflow: hidden; }
.ch-maybe { border-color: var(--slate-2); border-style: dashed; }
.ch-out { border-color: var(--mute-line); background: var(--wash-2); }
.ch-name { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 4px; padding-bottom: 8px; border-bottom: 2px solid var(--ink); font: 400 13px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.ch-maybe .ch-name { border-bottom-color: var(--slate-2); }
.ch-out .ch-name { border-bottom-color: var(--mute-line); }
.ch-name b { font-weight: 600; color: var(--ink); }
.ch-out .ch-name b { color: var(--ink-2); }
.ch-name .fig { font-size: 22px; font-weight: 600; letter-spacing: 0; color: var(--ink); }
.ch-out .ch-name .fig { color: var(--ink-3); }
.ch-bin ul { list-style: none; margin: 0; }
.ch-out ul { columns: 2 150px; column-gap: 18px; }
.ch-slip { padding: 7px 0 6px; border-bottom: 1px solid var(--rule-2); font-size: 15px; line-height: 1.3; color: var(--ink); break-inside: avoid; }
.ch-slip small { display: block; margin-top: 1px; font-size: 13px; color: var(--slate-2); }
.ch-out .ch-slip { color: var(--ink-3); border-bottom-color: var(--rule); }
.ch-note { margin: 10px 0 0; font-size: 14px; line-height: 1.4; color: var(--ink-3); }
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.ch-slip { animation: ch-drop linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
		@keyframes ch-drop { from { opacity: 0; transform: translateY(-48px); } to { opacity: 1; transform: none; } }
	}
}
.qi-why dl { margin: 0 0 4px; }
.qi-why dt { margin: 14px 0 6px; font: 400 12px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.qi-why dt:first-child { margin-top: 0; }
.qi-why dd { margin: 0 0 6px; }

@container ch (max-width: 599px) {
	.ch-hopper p { padding: 12px 21% 20px; font-size: 15px; clip-path: polygon(0 0, 100% 0, 81% 100%, 19% 100%); }
	.ch-pipes { display: none; }
	.ch-bins { grid-template-columns: minmax(0, 1fr); gap: 16px; position: relative; padding: 30px 0 0 22px; }
	/* on a phone the chute runs down the left: from the hopper's neck, along, and down past each column */
	.ch-bins::after { content: ""; position: absolute; left: 7px; top: 0; width: calc(50% - 6px); height: 14px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
	.ch-bins::before { content: ""; position: absolute; left: 7px; top: 14px; bottom: 34px; width: 2px; background: var(--ink); }
	.ch-bin { overflow: visible; }
	.ch-bin > .ch-name::before { content: ""; position: absolute; left: -17px; top: 20px; width: 15px; height: 2px; background: var(--ink); }
	.ch-out ul { columns: 1; }
}