@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Space+Grotesk:wght@700&display=swap');
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;min-width:280px;background:#f5d6b8;color:#332d3a;font-family:'DM Sans',sans-serif;overflow-x:hidden}.wrap{width:100%;max-width:980px;margin:auto;padding:38px clamp(14px,4vw,22px) 70px}.back{display:inline-block;color:#ad4c3e;text-decoration:none;font-weight:700}.back:hover{text-decoration:underline}.intro{padding:clamp(42px,8vw,60px) 0 28px}.tag,.eyebrow{color:#ad4c3e;text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;font-weight:700;margin:0}.intro h1{font:700 clamp(2.8rem,10vw,6.5rem)/.9 'Space Grotesk',sans-serif;margin:15px 0;overflow-wrap:anywhere}.intro p:last-child{font-size:clamp(1rem,3vw,1.15rem);max-width:620px}.panel{width:100%;min-width:0;background:#fff8ed;padding:clamp(17px,4vw,26px);border:2px solid #332d3a;box-shadow:7px 7px 0 rgba(51,45,58,.13)}.panel+.panel{margin-top:24px}.section-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}.section-heading>div{min-width:0}.section-heading h2{font:700 clamp(1.4rem,5vw,2rem)/1.1 'Space Grotesk',sans-serif;margin:5px 0 0;overflow-wrap:anywhere}.date-today,.counter{padding:7px 11px;border:1px solid #332d3a;background:#f5d6b8;font-size:.85rem;font-weight:700;white-space:nowrap}
form{display:grid;grid-template-columns:2fr 1.15fr 1fr 1fr 1.35fr;gap:12px;align-items:end}.field{display:grid;gap:6px;font-size:.82rem;font-weight:700}.field-task{grid-column:span 2}input,select,button{font:inherit}input,select{width:100%;min-width:0;padding:12px;border:2px solid #332d3a;background:white;color:#332d3a}input:focus,select:focus,button:focus-visible{outline:3px solid #ef9f67;outline-offset:2px}.add-button{grid-column:span 3;padding:13px;border:2px solid #332d3a;background:#b9d987;font-weight:700;cursor:pointer}.add-button:hover{background:#a9cd71}.form-error{grid-column:1/-1;color:#a72b22;font-weight:700;margin:0}
.task-list{display:grid;gap:12px}.day-group{display:grid;gap:8px}.day-title{display:flex;align-items:center;gap:12px;margin:8px 0 1px;font-size:.9rem;text-transform:capitalize}.day-title::after{content:'';height:1px;background:#cbbdaf;flex:1}.task-card{display:grid;grid-template-columns:auto 82px 1fr auto;align-items:center;gap:13px;padding:13px;background:#e6efcf;border-left:7px solid #6e9637}.task-check{width:22px;height:22px;accent-color:#6e9637;cursor:pointer}.task-time{font-weight:700;font-size:.88rem}.task-info{min-width:0}.task-name{font-weight:700;overflow-wrap:anywhere}.task-meta{display:flex;gap:8px;align-items:center;margin-top:5px;color:#665e65;font-size:.8rem}.category{display:inline-block;padding:3px 7px;background:#fff8ed;border:1px solid #887b83;border-radius:20px}.delete-button,.clear-button,.restore-button{padding:7px 10px;background:transparent;border:1px solid #332d3a;font-weight:700;cursor:pointer}.delete-button:hover{background:#f3b5a7}.completed{background:#f2eadf}.completed .task-card{background:#e2ddd6;border-left-color:#8b8388}.completed .task-name{text-decoration:line-through;opacity:.65}.completed-actions{display:flex;gap:7px}.restore-button:hover{background:#b9d987}.clear-button{font-size:.82rem}.empty{color:#756b71;margin:6px 0 0;padding:20px;text-align:center;border:1px dashed #a99c93}.empty[hidden]{display:none}
@media(max-width:820px){form{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.field-task,.add-button{grid-column:1/-1}.task-card{grid-template-columns:auto 70px minmax(0,1fr)}.task-card>.delete-button,.completed-actions{grid-column:3}.completed-actions{justify-self:start;flex-wrap:wrap}}
@media(max-width:560px){.wrap{padding-top:25px;padding-bottom:50px}.intro{padding-top:45px}.panel{box-shadow:4px 4px 0 rgba(51,45,58,.13)}form{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.field-task,.field:nth-of-type(2),.field:nth-of-type(5){grid-column:1/-1}.section-heading{align-items:flex-start;flex-direction:column}.task-card{grid-template-columns:auto minmax(0,1fr);gap:8px 10px;padding:12px 10px}.task-time,.task-info,.task-card>.delete-button,.completed-actions{grid-column:2}.task-card>.delete-button{justify-self:start}.date-today,.counter{white-space:normal}.empty{padding:16px 10px}}
@media(max-width:380px){.intro h1{font-size:2.55rem}form{grid-template-columns:1fr}.field,.field-task,.field:nth-of-type(2),.field:nth-of-type(5),.add-button{grid-column:1/-1}.task-card{grid-template-columns:1fr}.task-check,.task-time,.task-info,.task-card>.delete-button,.completed-actions{grid-column:1}.task-check{justify-self:start}.task-time br{display:none}.completed-actions{width:100%}.completed-actions button{flex:1}.clear-button{width:100%}}
@media(hover:none){button{min-height:44px}.task-check{width:26px;height:26px}}