/* Задачи: нейтральная поверхность, бирюза — только для действия и состояния.
   Анимируются transform, opacity и height уходящей строки; компоновка соседей не скачет. */
.tasks{--ease:cubic-bezier(.2,.8,.2,1);max-width:760px;margin:0 auto;font-size:var(--font-content)}
.tasks-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:18px}
.tasks-head h1{font-size:28px;line-height:1.2}
.tasks-summary{color:var(--text-muted);font-size:14px;text-align:right}

/* Быстрое добавление: одна строка, Enter добавляет */
.tasks-add{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 14px;border:1px solid var(--border);border-radius:14px;
  background:var(--surface);transition:border-color .2s,box-shadow .25s var(--ease)}
.tasks-add:focus-within{border-color:color-mix(in srgb,var(--teal) 55%,var(--border));box-shadow:0 0 0 4px color-mix(in srgb,var(--teal) 12%,transparent)}
.tasks-add-icon{display:grid;place-items:center;width:22px;height:22px;flex:none;color:var(--text-muted);transition:color .2s,transform .3s var(--ease)}
.tasks-add:focus-within .tasks-add-icon{color:var(--teal);transform:rotate(90deg)}
.tasks-add svg,.task svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tasks-add input[name=title]{flex:1;min-width:0;border:0;background:none;padding:10px 4px;font-size:15px}
.tasks-add input[name=title]::placeholder{color:var(--text-muted)}
.tasks-add-date input{width:auto;min-height:40px;padding:8px 10px;border-radius:10px;font-size:13px;color:var(--text-soft);color-scheme:dark}
.tasks-add .btn{flex:none;width:auto;min-height:40px;padding:9px 18px;font-size:14px}
.tasks-add.is-invalid{animation:tasks-shake .36s var(--ease)}
@keyframes tasks-shake{25%{transform:translateX(-5px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}}

/* Вкладки с подложкой, которая переезжает */
.tasks-tabs{position:relative;display:grid;grid-template-columns:1fr 1fr;width:max-content;min-width:260px;margin:22px 0 12px;padding:4px;
  border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.tasks-tabs button{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:36px;padding:6px 16px;
  border:0;border-radius:9px;background:none;color:var(--text-muted);font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:color .2s}
.tasks-tabs button[aria-selected=true]{color:var(--text)}
.tasks-tabs b{min-width:22px;padding:1px 7px;border-radius:999px;background:var(--bg);color:var(--text-muted);font:500 12px var(--font-mono);transition:background .2s,color .2s}
.tasks-tabs button[aria-selected=true] b{background:color-mix(in srgb,var(--teal) 16%,transparent);color:var(--teal)}
.tasks-tabs-thumb{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:9px;background:var(--surface-2);
  box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform .34s var(--ease)}
.tasks-tabs[data-tab=done] .tasks-tabs-thumb{transform:translateX(100%)}
.tasks-tabs button:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}

/* Строка задачи */
.tasks-list{list-style:none;display:grid;gap:8px}
.task{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:12px;padding:12px 10px 12px 12px;
  border:1px solid var(--border);border-radius:14px;background:var(--surface);overflow:hidden;
  transition:border-color .2s,background .25s,box-shadow .25s,opacity .3s var(--ease),height .32s var(--ease),padding .32s var(--ease),margin .32s var(--ease)}
.task:hover{border-color:color-mix(in srgb,var(--text-muted) 35%,var(--border))}
.task:focus-within{border-color:color-mix(in srgb,var(--teal) 45%,var(--border))}
.task.is-doing{background:linear-gradient(90deg,color-mix(in srgb,var(--teal) 7%,var(--surface)),var(--surface) 55%)}
.task.is-doing::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:var(--teal)}
.tasks-list.is-entering .task{animation:task-in .42s var(--ease) both;animation-delay:calc(var(--i) * 45ms)}
.task.is-new{animation:task-in .42s var(--ease) both,task-glow 1.3s ease-out}
@keyframes task-in{from{opacity:0;transform:translateY(8px) scale(.99)}}
@keyframes task-glow{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--teal) 45%,transparent)}100%{box-shadow:0 0 0 10px transparent}}
.task.is-leaving{opacity:0;padding-top:0;padding-bottom:0;margin-bottom:-8px;border-color:transparent}
.task.is-saved .task-title{animation:task-saved .9s ease-out}
@keyframes task-saved{0%{background:color-mix(in srgb,var(--teal) 16%,transparent)}100%{background:transparent}}

/* Отметка: кольцо заливается, галочка прорисовывается */
.task-check{display:grid;place-items:center;width:32px;height:32px;margin-top:1px;padding:4px;border:0;border-radius:50%;background:none;color:var(--text-muted);cursor:pointer;transition:color .2s,transform .15s}
.task-check:hover{color:var(--teal)}.task-check:active{transform:scale(.9)}
.task-check:focus-visible{outline:2px solid var(--teal);outline-offset:1px}
.task-check-ring{fill:transparent;transition:fill .28s var(--ease),stroke .2s}
.task-check-mark{stroke:#0E1315;stroke-width:2.2;stroke-dasharray:14;stroke-dashoffset:14;transition:stroke-dashoffset .3s var(--ease) .08s}
.task.is-done .task-check,.task.is-completing .task-check{color:var(--teal)}
.task.is-done .task-check-ring,.task.is-completing .task-check-ring{fill:var(--teal)}
.task.is-done .task-check-mark,.task.is-completing .task-check-mark{stroke-dashoffset:0}
.task.is-completing .task-check{animation:task-pop .4s var(--ease)}
.task.is-reopening .task-check-ring{fill:transparent}.task.is-reopening .task-check-mark{stroke-dashoffset:14}
@keyframes task-pop{40%{transform:scale(1.18)}}

.task-main{min-width:0;display:grid;gap:6px}
.task-top{display:flex;align-items:flex-start;gap:4px;min-width:0}
.task-title{display:block;flex:1;min-width:0;padding:5px 6px;margin:0 0 0 -6px;border:1px solid transparent;border-radius:8px;background:transparent;
  color:var(--text);font:600 15px/1.35 var(--font-body);resize:none;overflow:hidden;field-sizing:content;overflow-wrap:anywhere;
  text-decoration:line-through transparent;text-decoration-thickness:1.5px;
  transition:color .3s,text-decoration-color .35s,border-color .15s,background-color .15s}
.task-title:hover{background-color:color-mix(in srgb,var(--surface-2) 70%,transparent)}
.task-title:focus{border-color:var(--teal);background-color:var(--bg);outline:none}
/* Зачёркивание проходит по каждой строке названия, а не одной чертой по блоку. */
.task.is-done .task-title,.task.is-completing .task-title{color:var(--text-muted);text-decoration-color:currentColor}
.task.is-reopening .task-title{text-decoration-color:transparent}

.task-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.task-status,.task-due button{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:4px 10px;border:1px solid var(--border);border-radius:999px;
  background:none;color:var(--text-soft);font:inherit;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;
  transition:color .2s,border-color .2s,background .2s,transform .12s}
.task-status:hover,.task-due button:hover{border-color:var(--text-muted);color:var(--text)}
.task-status:active,.task-due button:active{transform:scale(.96)}
.task-status:focus-visible,.task-due button:focus-visible,.task-del:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.task-status i{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--text-muted);transition:background .25s,border-color .25s,box-shadow .25s}
.task.is-doing .task-status{border-color:color-mix(in srgb,var(--teal) 45%,var(--border));color:var(--teal)}
.task.is-doing .task-status i{border-color:var(--teal);background:var(--teal);animation:task-live 2.2s ease-in-out infinite}
@keyframes task-live{50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--teal) 20%,transparent)}}
.task-status.is-done{cursor:default;border-color:transparent;padding-left:0;color:var(--text-muted)}
.task-status.is-done i{border-color:var(--green);background:var(--green)}
.task-due{position:relative;display:inline-flex}
.task-due svg{width:14px;height:14px;flex:none}
.task-due input{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none;color-scheme:dark}
.task-due.is-none button{border-style:dashed;color:var(--text-muted)}
.task-due.is-soon button{border-color:color-mix(in srgb,var(--amber) 45%,var(--border));color:var(--amber)}
.task-due.is-overdue button{border-color:color-mix(in srgb,var(--red) 50%,var(--border));background:color-mix(in srgb,var(--red) 9%,transparent);color:var(--red)}
.task-due.is-changed button{animation:task-pop .4s var(--ease)}

.task-del{display:grid;place-items:center;flex:none;width:32px;height:32px;padding:7px;border:0;border-radius:10px;background:none;color:var(--text-muted);
  cursor:pointer;opacity:0;transition:opacity .2s,color .2s,background .2s}
.task:hover .task-del,.task:focus-within .task-del{opacity:1}
.task-del:hover{color:var(--red);background:color-mix(in srgb,var(--red) 10%,transparent)}

.tasks-empty{padding:34px 12px;border:1px dashed var(--border);border-radius:14px;color:var(--text-muted);text-align:center;animation:task-in .4s var(--ease)}
.tasks-loading{display:grid;gap:8px;margin-top:84px}
.tasks-loading i{height:74px;border-radius:14px;background:var(--surface);animation:marketing-pulse 1.1s ease-in-out infinite alternate}
.tasks-loading i:nth-child(2){animation-delay:.15s}.tasks-loading i:nth-child(3){animation-delay:.3s}

@media(hover:none){.task-del{opacity:.75}}
@media(max-width:620px){
  .tasks-head{flex-direction:column;align-items:flex-start;gap:2px;margin-bottom:14px}
  .tasks-head h1{font-size:25px}.tasks-summary{text-align:left}
  .tasks-add{flex-wrap:wrap;padding:6px 6px 6px 12px}
  .tasks-add input[name=title]{flex:1 1 calc(100% - 40px)}
  .tasks-add-date{flex:1}.tasks-add-date input{width:100%;min-height:44px}
  .tasks-add .btn{width:auto;min-height:44px}
  .tasks-tabs{width:100%;min-width:0}
  .tasks-tabs button{min-height:40px}
  .task{gap:8px;padding:10px 6px 10px 8px}
  .task-check{width:40px;height:40px;margin-top:-2px;padding:7px}
  .task-status,.task-due button{min-height:34px}
  .task-del{width:40px;height:40px;padding:10px}
}
@media(prefers-reduced-motion:reduce){
  .task.is-doing .task-status i{animation:none}
  .task-check-mark,.task-title,.tasks-tabs-thumb{transition:none}
}