:root{--color-on-deck: lightblue;--color-in-progress: lightgreen;--color-done: #ccc}body{font-family:system-ui,sans-serif}code{font-size:1rem}main.task-board{display:grid;gap:1.2rem;padding:.5rem;grid-template-columns:1fr}main.task-board h2{display:none}main.task-board div{--color: var(--color-done);border:1px solid oklch(from var(--color) 0.7 c h);border-radius:.5em;background:var(--color);padding:1rem;--color: var(--color-on-deck)}main.task-board div:has(input[value=in-progress]:checked){--color: var(--color-in-progress)}main.task-board div:has(input[value=done]:checked){--color: var(--color-done)}main.task-board div form{margin:1rem 0 0 auto;opacity:.8;display:flex;gap:0;border:1px solid oklch(from var(--color) 0.7 c h);border-radius:.2rem;width:min-content}main.task-board div form label{cursor:pointer;font-size:small;white-space:nowrap;padding:.2rem .5rem;--actionColor: #0000;background:color-mix(in srgb, var(--actionColor), var(--color))}main.task-board div form label:has(input[value=on-deck]){--actionColor: var(--color-on-deck)}main.task-board div form label:has(input[value=in-progress]){--actionColor: var(--color-in-progress)}main.task-board div form label:has(input[value=done]){--actionColor: var(--color-done)}main.task-board div form label:has(input:checked){opacity:.5}main.task-board div form label input{display:none}@media only screen and (min-width: 800px){main.task-board{grid-template-columns:1fr 1fr 1fr;grid-auto-flow:column;background:linear-gradient(90deg, color-mix(in srgb, var(--color-on-deck), rgba(0, 0, 0, 0) 60%) 33.333%, color-mix(in srgb, var(--color-in-progress), rgba(0, 0, 0, 0) 60%) 0 66.667%, color-mix(in srgb, var(--color-done), rgba(0, 0, 0, 0) 60%) 0)}main.task-board h2{display:block;margin:0;border:solid;padding:0 0 .2ch;border-width:0 0 .2ch 0}main.task-board h2.on-deck{grid-column:1}main.task-board h2.in-progress{grid-column:2}main.task-board h2.done{grid-column:3}main.task-board div{grid-column:1}main.task-board div:has(input[value=in-progress]:checked){grid-column:2}main.task-board div:has(input[value=done]:checked){grid-column:3}main.task-board div form label{width:100%}}