:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft Yahei",sans-serif;color:#27282b;background:#fafafa;font-size:13px;font-synthesis:none;--row:72px;--label:224px}*{box-sizing:border-box}body{margin:0}button,input{font:inherit;color:inherit}button{cursor:pointer;border:0;background:none;touch-action:manipulation}button:focus-visible,input:focus-visible,.scroll:focus-visible{outline:2px solid #a9adb3;outline-offset:3px}button,input{-webkit-tap-highlight-color:transparent}[hidden]{display:none!important}main{max-width:1640px;margin:0 auto;padding:34px 46px 28px}.header{display:flex;align-items:center;justify-content:space-between;margin-bottom:33px}.header h1{font-size:31px;font-weight:650;letter-spacing:-1.8px;margin:0;line-height:1}.header h1 span{color:#e5755d}.add-button,.save{display:flex;align-items:center;justify-content:center;gap:7px;color:white;background:#292a2d;border-radius:6px;font-size:12px;padding:9px 14px;line-height:18px}.add-button>span{font-size:17px;font-weight:300;line-height:16px}.add-button:hover,.save:hover{background:#44454a}.toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;min-height:30px;gap:15px}.date-nav{display:flex;align-items:center;gap:12px}.date-nav>button:not(.today){color:#b6b8bc;width:22px;height:28px;font-size:24px;font-weight:300;line-height:24px;padding:0}.date-nav>button:hover{color:#303136}.date-nav>span{font-size:14px;font-weight:500;min-width:110px;text-align:center;font-variant-numeric:tabular-nums;color:#414248}.today{font-size:10px;color:#9d9fa5;border:1px solid #e6e6e8;border-radius:4px;padding:3px 8px;line-height:18px;margin-left:5px}.today:hover{background:#f0f0f2;color:#62646c}.zoom{display:flex;align-items:center;gap:9px;color:#9d9fa5}.zoom>button{font-size:17px;font-weight:300;width:20px;height:26px;line-height:20px;padding:0}.zoom>button:hover{color:#27282b}.zoom>input{appearance:none;-webkit-appearance:none;width:90px;height:20px;background:transparent;margin:0;cursor:pointer}.zoom>input::-webkit-slider-runnable-track{height:2px;background:#dedee2;border-radius:3px}.zoom>input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:9px;height:9px;background:#7d8087;border-radius:50%;margin-top:-3.5px;box-shadow:0 0 0 3px #fafafa}.zoom>input::-moz-range-track{height:2px;background:#dedee2;border-radius:3px}.zoom>input::-moz-range-thumb{border:0;width:9px;height:9px;background:#7d8087;border-radius:50%}.zoom>span{font-size:10px;width:24px;text-align:right;color:#898c93}.board{display:flex;position:relative;background:#fff;border:1px solid #e8e8eb;border-radius:8px;overflow:hidden;min-height:0}.labels{width:var(--label);flex-shrink:0;border-right:1px solid #eaeaec;position:relative;z-index:2;background:#fff}.labels-header{height:58px;border-bottom:1px solid #eaeaec;display:flex;align-items:center;padding:0 22px;color:#a3a5aa;font-size:10px;background:#fefefe}.label-row{height:var(--row);border-bottom:1px solid #f0f0f2;padding:0 20px;display:flex;align-items:center;gap:10px;position:relative}.label-row>i{width:5px;height:5px;border-radius:50%;flex-shrink:0}.label-row>button{min-width:0;flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:5px;text-align:left;padding:8px 0}.label-row strong{font-size:12px;line-height:18px;font-weight:450;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:100%;color:#515259}.label-row small{font-size:10px;line-height:14px;color:#b2b3ba;font-weight:400;white-space:nowrap;font-variant-numeric:tabular-nums}.label-row:hover{background:#fbfbfc}.label-row .overdue{color:#d08073}.scroll{overflow-x:auto;overflow-y:hidden;flex:1;min-width:0;position:relative;scrollbar-width:thin;scrollbar-color:#d9d9df transparent;overscroll-behavior-x:contain;touch-action:pan-x pan-y;cursor:grab;user-select:none;-webkit-user-select:none;min-height:0}.scroll.dragging{cursor:grabbing}.scroll::-webkit-scrollbar{height:5px}.scroll::-webkit-scrollbar-thumb{background:#dddde3;border-radius:4px}.scroll::-webkit-scrollbar-track{background:transparent}.track{position:relative}canvas{display:block;position:sticky;left:0;top:0;touch-action:pan-x pan-y}.bottom{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:14px;padding:0 2px;min-height:18px}.legend{display:flex;gap:16px;color:#a8a9b0;font-size:10px}.legend>span{display:flex;align-items:center;gap:6px}.legend i{height:4px;width:4px;border-radius:50%}#save-state{font-size:10px;color:#c07865}dialog{border:1px solid #e5e5e9;border-radius:10px;background:white;padding:27px 28px;width:min(410px,calc(100vw - 32px));box-shadow:0 12px 55px #161a2417;color:#4e5057;max-height:calc(100dvh - 32px);overflow:auto}dialog::backdrop{background:#23252b33;backdrop-filter:blur(3px)}.dialog-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}.dialog-header h2{font-weight:550;font-size:19px;margin:0;color:#383a40;letter-spacing:-.4px}.close{font-size:22px;line-height:20px;color:#b0b2b9;width:24px;height:24px;padding:0}.close:hover{color:#4c4e55}.field{display:block;margin-bottom:20px;font-size:11px;color:#9698a1;position:relative}.field>input{display:block;width:100%;min-width:0;padding:10px 11px;margin-top:8px;background:#fff;border:1px solid #e4e4e9;border-radius:5px;font-size:12px;outline:none;height:40px;color:#55575f}.field>input::placeholder{color:#c1c2c9}.field>input:focus{border-color:#a3a5af;box-shadow:0 0 0 2px #33374406}.optional{font-size:9px;float:right;color:#c2c3ca}fieldset{border:0;margin:0 0 21px;padding:0}legend{padding:0;margin-bottom:9px;color:#9698a1;font-size:11px}.priorities{display:flex;gap:8px}.priorities label{flex:1;position:relative;cursor:pointer}.priorities input{position:absolute;opacity:0;width:1px;height:1px}.priorities span{display:flex;align-items:center;justify-content:center;gap:7px;border:1px solid #e9e9ee;border-radius:5px;padding:8px 6px;font-size:11px;color:#a8aab2}.priorities span>i{width:5px;height:5px;border-radius:50%;background:var(--color)}.priorities input:checked+span{border-color:var(--color);background:color-mix(in srgb,var(--color) 10%,white);color:var(--color)}.priorities input:focus-visible+span{outline:2px solid #a9adb3;outline-offset:3px}.date-fields{display:grid;grid-template-columns:1.15fr 1fr;gap:14px}.date-fields .field{margin-bottom:0}.error{font-size:11px;color:#d07869;line-height:1.7;margin:10px 0 0}.error:empty{display:none}.actions{display:flex;align-items:center;justify-content:space-between;margin-top:28px}.save{margin-left:auto;padding:8px 21px;font-size:11px}.delete{padding:7px 0;font-size:11px;color:#b8b9c1}.delete:hover{color:#cc7667}.delete.confirm{color:#cc7667}.scroll:focus{outline-offset:-3px}@media(min-width:1600px){main{padding:42px 60px 32px}}@media(max-width:900px){:root{--label:200px}main{padding:26px 26px}.board{min-height:0}.header{margin-bottom:30px}}@media(max-width:600px){:root{--label:152px;--row:67px}main{padding:24px 14px 20px}.header{margin-bottom:30px}.header h1{font-size:28px}.add-button{font-size:11px;padding:8px 11px}.toolbar{margin-bottom:13px;gap:6px}.date-nav{gap:4px}.date-nav>span{font-size:11px;min-width:91px}.date-nav>button:not(.today){width:17px}.date-nav .today{padding:2px 5px;font-size:8px;margin-left:3px}.zoom{gap:4px}.zoom>input{width:55px}.zoom>button{font-size:15px;width:17px}.zoom>span{font-size:9px;width:20px}.board{min-height:0;border-radius:6px}.labels-header{padding:0 14px;font-size:9px}.label-row{padding:0 12px;gap:7px}.label-row strong{font-size:10px}.label-row small{font-size:8px}.label-row>i{width:4px;height:4px}.legend{font-size:9px;gap:13px}.bottom{margin-top:11px}.legend i{height:4px;width:4px}dialog{padding:23px}.dialog-header{margin-bottom:24px}.date-fields{gap:10px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
/* Readable type throughout the board, including narrow screens. */
:root{font-size:15px;--row:84px;--label:248px}
.header h1{font-size:34px}.add-button,.save{font-size:14px;padding:10px 16px}.add-button>span{font-size:20px}
.date-nav>span{font-size:16px;min-width:127px}.date-nav>button:not(.today){font-size:28px;width:26px;height:32px}
.today{font-size:12px;color:#7b808b;padding:4px 10px}.zoom>button{font-size:21px;width:24px}.zoom>span{font-size:13px;color:#797f8b;width:34px}.zoom{gap:10px}.zoom>input{width:104px}
.labels-header{height:66px;font-size:13px;color:#838995}.label-row strong{font-size:16px;line-height:23px;font-weight:450;color:#41454e}.label-row small{font-size:13px;line-height:18px;color:#9097a2}.label-row>button{gap:6px}.label-row>i{width:8px;height:8px}
.legend{font-size:12px;color:#858b97;gap:20px}.legend i{width:7px;height:7px}#save-state{font-size:12px}
dialog{width:min(450px,calc(100vw - 32px))}.dialog-header h2{font-size:22px}.close{font-size:27px}.field,legend{font-size:14px;color:#7f8692}.field>input{font-size:16px;height:46px}.field>input::placeholder{color:#b1b5bf}.optional{font-size:12px;color:#a3a9b4}.priorities span{font-size:14px;padding:10px 7px}.priorities span>i{width:8px;height:8px}.error{font-size:13px}.delete{font-size:14px}.save{font-size:14px;padding:9px 24px}
@media(max-width:900px){:root{--label:224px}}
@media(max-width:600px){:root{--label:178px;--row:80px}main{padding:22px 12px 20px}.header h1{font-size:32px}.add-button{font-size:14px;padding:9px 12px}.date-nav{gap:2px}.date-nav>span{font-size:13px;min-width:103px}.date-nav>button:not(.today){font-size:25px;width:18px}.date-nav .today{font-size:11px;padding:3px 6px}.zoom{gap:3px}.zoom>input{width:48px}.zoom>button{font-size:19px;width:19px}.zoom>span{font-size:11px;width:30px}.labels-header{font-size:12px;padding:0 13px}.label-row{padding:0 12px;gap:7px}.label-row strong{font-size:14px;line-height:21px}.label-row small{font-size:12px;line-height:17px}.label-row>i{height:7px;width:7px}.legend{font-size:11px;gap:16px}.field>input{font-size:16px}.date-fields{grid-template-columns:1.15fr 1fr;gap:10px}}
/* Completed tasks stay in a quiet, collapsible section at the end. */
.blank-row{height:var(--row);border-bottom:1px solid #f0f0f2}
.label-row>.completion-toggle{width:18px;height:18px;min-width:18px;flex:0 0 18px;border:1.5px solid var(--priority);border-radius:50%;padding:0;display:grid;place-items:center;color:var(--priority);background:#fff;opacity:.85;gap:0;align-self:center}
.completion-toggle svg{width:14px;height:14px;opacity:0}.completion-toggle:hover{background:color-mix(in srgb,var(--priority) 9%,white)}.completion-toggle:hover svg{opacity:1}.completion-toggle:disabled{cursor:wait;opacity:.4}
.label-row>.completion-toggle.is-completed{background:var(--priority);color:#fff;opacity:.6}.completion-toggle.is-completed svg{opacity:1}.label-row.completed .task-button{opacity:.55}.label-row.completed strong{text-decoration:line-through;text-decoration-color:#a9aeb8}.label-row.completed:hover .task-button{opacity:.75}
.archive-header{height:44px;border-top:1px solid #e8e9ed;border-bottom:1px solid #e8e9ed;background:#fafafa;display:flex;align-items:center}.archive-toggle{width:100%;height:100%;display:flex;align-items:center;gap:9px;padding:0 20px;text-align:left;color:#8d929d;font-size:13px}.archive-toggle:hover{color:#5f6672;background:#f4f4f6}.archive-arrow{font-size:16px;line-height:16px;display:inline-block;transform-origin:center;transition:transform .12s}.archive-arrow.expanded{transform:rotate(90deg)}.archive-count{font-size:12px;color:#b0b4bd;margin-left:2px}
.complete{margin-left:auto;padding:9px 13px;border:1px solid #dedfe5;border-radius:5px;font-size:14px;color:#717984;background:#fff}.complete:hover{background:#f6f7f8;color:#414953}.complete:not([hidden])+.save{margin-left:10px}.complete:disabled{opacity:.5;cursor:wait}
@media(max-width:600px){.label-row>.completion-toggle{width:16px;height:16px;min-width:16px;flex-basis:16px}.completion-toggle svg{width:12px;height:12px}.archive-toggle{padding:0 12px;font-size:12px;gap:7px}.archive-count{font-size:11px}.complete{font-size:13px;padding:9px 10px}}