:root{font-family:Arial,Helvetica,sans-serif;color:#243a35;background:#f5f6f3;font-size:16px;--green:#254f42;--line:#dce2dc}*{box-sizing:border-box}body{margin:0}button,input,textarea,select{font:inherit}button,.button{cursor:pointer;border:1px solid var(--line);background:white;border-radius:9px;padding:11px 16px;color:inherit;text-decoration:none;display:inline-block}button:hover,.button:hover{filter:brightness(.95)}button:disabled{opacity:.5;cursor:wait}:focus-visible{outline:3px solid #c99038;outline-offset:3px}.primary{background:var(--green);color:white;border-color:var(--green);font-weight:600}.quiet{background:transparent;border-color:transparent}header{padding:24px 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:white;gap:16px}.brand{margin:0;font-size:25px;font-weight:800;letter-spacing:.1em}.brand span{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.15em;border-left:1px solid #bdcbc1;margin-left:14px;padding-left:14px;vertical-align:middle}.account{display:flex;align-items:center;gap:16px;font-size:14px}main{max-width:1050px;margin:auto;padding:50px 24px}.heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:34px}h1{font-family:Georgia,serif;font-weight:400;font-size:clamp(30px,4vw,42px);margin:8px 0}h2{font-size:22px;font-weight:500}.eyebrow{font-size:12px;letter-spacing:.15em;font-weight:700;color:#64766a}nav{display:flex;gap:8px;border-bottom:1px solid var(--line);margin-bottom:20px;padding-bottom:14px}nav button{border:0;background:transparent}nav button[aria-pressed=true]{background:#e1ebe3;color:#214535;font-weight:600}.task{display:flex;align-items:flex-start;gap:18px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px;margin-bottom:12px}.check{width:27px;height:27px;padding:0;border-radius:50%;flex-shrink:0;margin-top:3px}.check[aria-pressed=true]{background:var(--green);color:white}.task-content{flex:1;min-width:0}.task-title{text-align:left;padding:0;border:0;background:none;font-weight:600;font-size:18px;line-height:1.5;overflow-wrap:anywhere}.notes{color:#627269;line-height:1.55;margin:6px 0 10px;white-space:pre-wrap;overflow-wrap:anywhere}.meta{display:flex;gap:18px;flex-wrap:wrap;font-size:14px;margin-top:10px;color:#64766a}.late{color:#a23b27}.badge{font-size:14px;padding:7px 12px;white-space:nowrap;border:0;background:#f0f2ed}.badge.doing{background:#fbebc9;color:#77500a}.badge.done{background:#e1ebe3;color:#254f42}.hint{font-size:14px;color:#64766a;margin-top:24px}.empty{text-align:center;padding:65px 20px;background:white;border:1px dashed #c7d2c9;border-radius:12px}.empty p{color:#64766a;line-height:1.6}#message{padding:14px;background:#e1ebe3;border-radius:8px}.error{color:#9e3328;line-height:1.5}dialog{width:min(580px,calc(100% - 28px));padding:28px;border:1px solid var(--line);border-radius:16px;color:inherit;max-height:90vh}dialog::backdrop{background:#15261dcc;backdrop-filter:blur(3px)}.dialog-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.dialog-heading h2{margin:0}label{display:block;font-size:14px;font-weight:600;margin-bottom:20px}input,select,textarea{display:block;width:100%;margin-top:8px;border:1px solid #bdcbc1;padding:12px;border-radius:7px;background:#fff;color:inherit;font-size:16px}textarea{resize:vertical}.optional{font-weight:400;color:#6d7d72;margin-left:5px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:28px}.login{min-height:100vh;display:grid;place-items:center;background:#e6ece4}.login-card{max-width:440px;width:calc(100% - 32px);background:white;border-radius:16px;padding:48px 35px;box-shadow:0 20px 60px #29463712}.login-card h1{margin-top:42px}.login-card>p:not(.brand){line-height:1.6}.login-card .button{margin:24px 0;width:100%;text-align:center}.login-card small{display:block;color:#64766a;text-align:center;font-size:14px}@media(max-width:600px){header{padding:20px}.brand{font-size:21px}.account{gap:4px;flex-direction:column;align-items:flex-end}main{padding:30px 16px}.heading{align-items:flex-start;flex-direction:column;gap:14px;margin-bottom:24px}.heading .primary{width:100%}.task{padding:18px 14px;gap:12px;flex-wrap:wrap}.task-content{width:calc(100% - 45px)}.badge{margin-left:39px}.form-row{grid-template-columns:1fr;gap:0}nav{gap:0}nav button{padding:11px 13px}dialog{padding:22px}}

@media(max-width:600px){.task-content{flex:1 1 calc(100% - 39px)}}
