:root{--color-default: map.get($states, "on-deck");--color-on-deck: #ffbaba;--color-in-progress: #ffff00;--color-blocked: #ffd17b;--color-review: #ceffce;--color-done: #d0d0ff}body{font-family:system-ui,sans-serif}code{font-size:1rem}main.task-board-2{display:grid;gap:1.2rem;padding:.5rem;grid-template-columns:1fr}main.task-board-2 h2{display:none}main.task-board-2 div{--color: var(--color-default);border:1px solid oklch(from var(--color) 0.7 c h);border-radius:.5em;background:var(--color);padding:1rem}main.task-board-2 div:has([value=on-deck]:checked){--color: var(--color-on-deck)}main.task-board-2 div:has([value=in-progress]:checked){--color: var(--color-in-progress)}main.task-board-2 div:has([value=blocked]:checked){--color: var(--color-blocked)}main.task-board-2 div:has([value=review]:checked){--color: var(--color-review)}main.task-board-2 div:has([value=done]:checked){--color: var(--color-done)}main.task-board-2 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-2 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-2 div form label:has(input[value=on-deck]){--actionColor: var(--color-on-deck)}main.task-board-2 div form label:has(input[value=in-progress]){--actionColor: var(--color-in-progress)}main.task-board-2 div form label:has(input[value=blocked]){--actionColor: var(--color-blocked)}main.task-board-2 div form label:has(input[value=review]){--actionColor: var(--color-review)}main.task-board-2 div form label:has(input[value=done]){--actionColor: var(--color-done)}main.task-board-2 div form label:has(input:checked){opacity:.5}main.task-board-2 div form label input{display:none}@media only screen and (min-width: 800px){main.task-board-2{grid-template-columns:repeat(5, 1fr);grid-auto-flow:column;background:linear-gradient(90deg, color-mix(in srgb, var(--color-on-deck), rgba(0, 0, 0, 0) 60%) 0 20%, color-mix(in srgb, var(--color-in-progress), rgba(0, 0, 0, 0) 60%) 0 40%, color-mix(in srgb, var(--color-blocked), rgba(0, 0, 0, 0) 60%) 0 60%, color-mix(in srgb, var(--color-review), rgba(0, 0, 0, 0) 60%) 0 80%, color-mix(in srgb, var(--color-done), rgba(0, 0, 0, 0) 60%) 0 100%)}main.task-board-2 h2{display:block;margin:0;border:solid;padding:0 0 .2ch;border-width:0 0 .2ch 0}main.task-board-2 h2.on-deck{grid-column:1}main.task-board-2 h2.in-progress{grid-column:2}main.task-board-2 h2.blocked{grid-column:3}main.task-board-2 h2.review{grid-column:4}main.task-board-2 h2.done{grid-column:5}main.task-board-2 div{grid-column:1}main.task-board-2 div:has([value=on-deck]:checked){grid-column:1}main.task-board-2 div:has([value=in-progress]:checked){grid-column:2}main.task-board-2 div:has([value=blocked]:checked){grid-column:3}main.task-board-2 div:has([value=review]:checked){grid-column:4}main.task-board-2 div:has([value=done]:checked){grid-column:5}main.task-board-2 div form label{width:100%}}