/* Keep the check path and SVG center fixed throughout completion. */
.check .check-ring{transform-origin:12px 12px;transition:fill 160ms,color 160ms}
.check .check-mark{stroke-dasharray:24;stroke-dashoffset:24;opacity:0;visibility:visible;transition:stroke-dashoffset 140ms,opacity 100ms}
.done .check .check-mark{stroke-dashoffset:0;opacity:1}
.check-enter .check .check-ring{animation:todo-circle-pop 500ms cubic-bezier(.2,.8,.2,1)}
.check-enter .check .check-mark{animation:todo-check-draw 420ms ease-out both}
.check-enter .check:after{content:"";position:absolute;left:50%;top:50%;width:3px;height:3px;border-radius:50%;background:var(--color-primary);pointer-events:none;animation:todo-spark 480ms ease-out both}
.task-text{transition:color 220ms}
@keyframes todo-circle-pop{0%{transform:scale(.88);fill:transparent}45%{transform:scale(1.1);fill:currentColor}75%{transform:scale(.98)}100%{transform:scale(1);fill:currentColor}}
@keyframes todo-check-draw{0%,20%{stroke-dashoffset:24;opacity:0}21%{opacity:1}100%{stroke-dashoffset:0;opacity:1}}
@keyframes todo-spark{0%,25%{opacity:0;transform:translate(7px,-7px) scale(.3)}50%{opacity:.7}100%{opacity:0;transform:translate(17px,-17px) scale(.5)}}
.logo-motion{display:block;flex:0 0 40px;width:40px;height:40px;padding:0;border:0;background:transparent;border-radius:11px;cursor:pointer}
.logo-surface{display:block;width:100%;height:100%;border-radius:26.5625%;background:linear-gradient(135deg,#aacbdc,#7eabc5);transform-origin:center}
.logo-surface svg{display:block;width:100%;height:100%;fill:none;stroke:#fff;stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.logo-play .logo-surface{animation:todo-logo-bounce 620ms cubic-bezier(.2,.75,.25,1)}
@keyframes todo-logo-bounce{0%{border-radius:50%;transform:scale(.82)}36%{border-radius:50%;transform:scale(1.1)}66%{border-radius:26.5625%;transform:scale(.96)}84%{transform:scale(1.025)}100%{border-radius:26.5625%;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.check .check-ring,.check .check-mark,.check-enter .check:after,.task-text,.logo-play .logo-surface{animation:none!important;transition:none!important}.check-enter .check:after{display:none}}
.calendar-day.in-range:not(.selected){background:var(--color-selected);color:var(--color-text)}
/* Readable task hierarchy; period belongs to the right of its task. */
.task-content{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 20px;align-items:center}
.task-content .task-text{grid-column:1;grid-row:1;font-size:16px;line-height:25px;font-weight:400;padding:3px 0}
.task-content .task-dates{grid-column:1/-1;grid-row:2;margin:0;font-size:12px;line-height:20px;color:#687d8b;gap:6px 12px}
.task-content button.task-period{grid-column:2;grid-row:1;justify-self:end;width:auto;height:auto;max-width:100%;min-height:34px;font-size:13px;line-height:20px;font-variant-numeric:tabular-nums;padding:6px 10px;white-space:nowrap;color:#596f7e}
.task-content .task-dates button.inline-date{font-size:12px;line-height:20px;min-height:24px;color:#687d8b}
.task>.check,.task>.delete{margin-top:0;align-self:start}
.footer,.clear{font-size:13px;line-height:21px}
.search{font-size:14px}
@media(max-width:1050px) and (min-width:701px), (max-width:540px){
.task-content{grid-template-columns:minmax(0,1fr);gap:6px}
.task-content .task-text{grid-column:1;grid-row:1}
.task-content button.task-period{grid-column:1;grid-row:2;justify-self:end;white-space:normal;text-align:right}
.task-content .task-dates{grid-column:1;grid-row:3}
}
@media(pointer:coarse){.task-content button.task-period,.task-content .task-dates button.inline-date{min-height:44px}.composer input,.search{font-size:16px}}

/* Compact rows; shared top-line alignment for check, title and period. */
.task{padding:14px 0;min-height:84px}
.task-content{padding-right:0}
.task-content button.task-period{min-height:32px}
.task>.check,.task>.delete{margin-top:0}
@media(max-width:540px){.task{padding:12px 0}.task-content{gap:4px}}
@media(pointer:coarse){.task-content button.task-period{min-height:44px}.task>.check,.task>.delete{margin-top:6px}}