/* Task lists: quick add, rows, checkboxes, chips, groups, «Мой день», drag & swipe. */

/* quick add */
.quickadd {
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-1); margin: 4px 0 18px;
  transition: box-shadow var(--dur-2);
}
.quickadd.is-focused { box-shadow: 0 0 0 2px color-mix(in srgb, var(--tint) 55%, transparent), var(--shadow-2); }
.qa-field { display: flex; align-items: center; gap: 4px; padding: 4px 6px 4px 12px; min-height: 46px; }
.qa-plus { color: var(--tint); display: inline-flex; }
.qa-input-wrap { position: relative; flex: 1; min-width: 0; }
.qa-input, .qa-mirror {
  font: var(--t-body); letter-spacing: var(--tr-body); padding: 8px 6px; margin: 0; white-space: pre; border: 0; min-height: 36px;
}
.qa-input { position: relative; z-index: 1; background: transparent; box-shadow: none !important; width: 100%; }
.qa-input:focus { box-shadow: none; }
.qa-mirror {
  --qa-scroll: 0px;
  position: absolute; inset: 0; color: transparent; overflow: hidden; pointer-events: none; text-indent: var(--qa-scroll);
}
.qa-mark { color: transparent; border-radius: 4px; background: color-mix(in srgb, var(--tint) 18%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--tint) 18%, transparent); }
.qa-mark.qa-priority { background: color-mix(in srgb, var(--p1) 18%, transparent); box-shadow: none; }
.qa-mark.qa-project { background: color-mix(in srgb, var(--c4) 20%, transparent); box-shadow: none; }
.qa-mark.qa-label { background: color-mix(in srgb, var(--c6) 22%, transparent); box-shadow: none; }
.qa-mark.qa-assignee { background: color-mix(in srgb, var(--c1) 22%, transparent); box-shadow: none; }
.qa-mark.qa-recur { background: color-mix(in srgb, var(--c2) 22%, transparent); box-shadow: none; }
.qa-submit {
  width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--accent-fill); color: #fff; display: grid; place-items: center; flex: none;
  transition: opacity var(--dur-1), transform var(--dur-2) var(--ease-spring);
}
.qa-submit:disabled { opacity: 0; transform: scale(.6); pointer-events: none; }
.qa-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px; }
.qa-chips:not(:empty) { padding-bottom: 8px; }
.qa-chip {
  display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 0 9px; border-radius: var(--r-pill);
  background: var(--accent-soft); color: var(--tint-text); font: 500 12.5px/1 var(--font-text); animation: pop-in var(--dur-2) var(--ease-out) both;
}
.qa-chip.is-override { background: var(--fill-3); color: var(--label); }
.qa-chip-x { border: 0; background: transparent; color: inherit; padding: 0; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; }
.qa-tools { display: none; gap: 4px; padding: 2px 8px 8px; border-top: 1px solid var(--separator); margin: 0 4px; padding-top: 6px; flex-wrap: wrap; }
.quickadd.is-focused .qa-tools, .quickadd.has-text .qa-tools, .quickadd.in-sheet .qa-tools { display: flex; }
.qa-tool {
  display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 0 10px; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--label-2); font: 500 13px/1 var(--font-text);
}
@media (hover: hover) { .qa-tool:hover { background: var(--fill-3); color: var(--label); } }

/* groups */
.group { margin-bottom: 18px; }
.group-head { display: flex; align-items: center; gap: 6px; min-height: 36px; border-bottom: 1px solid var(--separator); margin-bottom: 2px; }
.group-toggle {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; border: 0; background: transparent; padding: 6px 0;
  font: var(--t-headline); color: var(--label); text-align: left;
}
.group-toggle > .icon { color: var(--label-3); transition: transform var(--dur-2) var(--ease-out); }
.group.is-collapsed .group-toggle > .icon { transform: rotate(-90deg); }
.group.is-collapsed .task-list { display: none; }
.group-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group-count { color: var(--label-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.group-head.tone-overdue .group-name { color: var(--red); }
.section-rename { font: var(--t-headline); min-height: 30px; padding: 4px 8px; }
.add-row, .add-section {
  display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: transparent; color: var(--label-2);
  min-height: 40px; padding: 6px 4px; border-radius: var(--r-sm); font: var(--t-body); text-align: left;
}
.add-row .icon, .add-section .icon { color: var(--tint); }
.add-section { margin-top: 4px; border-top: 1px dashed var(--separator); border-radius: 0; color: var(--tint-text); font-weight: 500; }
@media (hover: hover) { .add-row:hover { color: var(--tint-text); } }
.list-tail .quickadd { margin: 6px 0 8px; }

/* task row */
.task-row { --swipe: 0px; position: relative; border-bottom: 1px solid var(--separator); touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.task-inner {
  position: relative; z-index: 1; display: flex; align-items: flex-start; gap: 10px; padding: 10px 4px 10px 2px; background: transparent;
  transform: translateX(var(--swipe)); transition: background-color var(--dur-1);
}
.task-row.swipe-settle .task-inner { transition: transform var(--dur-3) var(--ease-sheet); }
.task-row.is-swiping .task-inner, .task-row.swipe-open .task-inner, .task-row.swipe-settle .task-inner { background: var(--bg); }
.task-body { flex: 1; min-width: 0; cursor: pointer; outline: none; border-radius: 4px; }
.task-body:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 60%, transparent); }
.task-title { font: var(--t-body); letter-spacing: var(--tr-body); overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
.task-notes { font: var(--t-footnote); color: var(--label-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.task-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; }
.task-assignee { flex: none; padding-top: 1px; }
.task-row.is-done .task-title { color: var(--label-2); text-decoration: line-through; text-decoration-color: var(--label-3); }
.task-row.is-selected .task-inner { background: color-mix(in srgb, var(--tint) 9%, var(--bg)); }
.task-row.is-selected .task-inner::before { content: ''; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--tint); }
.task-row.is-completing .task-inner { animation: row-done var(--dur-4) var(--ease-out) both; }
@keyframes row-done { 60% { opacity: 1; } to { opacity: .35; } }
@media (hover: hover) { .task-row:hover .task-inner { background: color-mix(in srgb, var(--label) 3%, transparent); } }
.task-row.is-compact .task-inner { padding-block: 7px; }
.drag-handle { display: none; position: absolute; left: -22px; top: 12px; color: var(--label-3); width: 18px; cursor: grab; }
@media (hover: hover) and (pointer: fine) {
  .task-row:hover > .task-inner > .drag-handle { display: inline-flex; }
}

/* checkbox */
.check {
  --pc: var(--label-3);
  width: 22px; height: 22px; flex: none; border-radius: 50%; border: 2px solid var(--pc); background: color-mix(in srgb, var(--pc) 8%, transparent);
  display: grid; place-items: center; padding: 0; color: transparent; margin-top: -1px; position: relative;
  transition: background-color var(--dur-2), color var(--dur-2), transform var(--dur-3) var(--ease-spring);
}
.check::after { content: ''; position: absolute; inset: -11px; }
.check.prio-1 { --pc: var(--p1); } .check.prio-2 { --pc: var(--p2); } .check.prio-3 { --pc: var(--p3); }
.check .icon { transform: scale(.4); opacity: 0; transition: transform var(--dur-3) var(--ease-spring), opacity var(--dur-1); }
.check.is-done { background: var(--pc); color: #fff; }
.check.prio-4.is-done { --pc: var(--label-2); }
.check.is-done .icon { transform: none; opacity: 1; }
.check:active { transform: scale(.85); }
.task-row.is-completing .check { animation: check-pop var(--dur-3) var(--ease-spring); }
@keyframes check-pop { 50% { transform: scale(1.25); } }
@media (hover: hover) { .check:not(.is-done):not(.is-static):hover .icon { opacity: .55; transform: scale(.85); color: var(--pc); } }
.check.is-static { cursor: default; }

/* chips */
.chip { display: inline-flex; align-items: center; gap: 4px; font: 500 12px/16px var(--font-text); color: var(--label-2); white-space: nowrap; max-width: 100%; }
.chip > span { overflow: hidden; text-overflow: ellipsis; }
.chip-due.tone-overdue { color: var(--red); }
.chip-due.tone-today { color: var(--green-text); }
.chip-due.tone-tomorrow { color: var(--orange-text); }
.chip-due.tone-soon { color: var(--purple-text); }
.chip-sun { color: var(--sun); }
.chip-label { color: color-mix(in srgb, var(--c6) 75%, var(--label)); }
.chip-sub.is-complete { color: var(--green-text); }
.chip-project .dot { width: 7px; height: 7px; }
.chip-x { border: 0; background: transparent; color: inherit; padding: 0; width: 16px; height: 16px; display: inline-grid; place-items: center; border-radius: 50%; }

/* drag reorder */
.drag-ghost {
  position: fixed; z-index: 90; pointer-events: none; margin: 0; background: var(--surface); border-radius: var(--r-md);
  box-shadow: var(--shadow-pop); transform: scale(1.02) rotate(.4deg); opacity: .96; list-style: none;
}
.drag-ghost .task-inner { background: transparent; }
.is-drag-source { opacity: .35; }
.is-drag-source .task-inner { background: var(--fill-4); }
body.is-reordering, body.is-reordering * { cursor: grabbing !important; user-select: none !important; }

/* swipe */
.swipe-actions { position: absolute; inset: 0 0 0 auto; display: flex; z-index: 0; }
.swipe-btn {
  width: 68px; border: 0; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font: 600 11px/1 var(--font-text);
}
.swipe-date { background: var(--c7); } .swipe-sun { background: var(--orange); } .swipe-delete { background: var(--red-fill); }
.task-row.swipe-right::before {
  content: ''; position: absolute; inset: 0; background: var(--green); z-index: 0;
}
.task-row.swipe-right .swipe-actions { display: none; }
.task-row.swipe-complete-ready::before { background: var(--green-text); }

/* «Мой день» */
.today-hero { display: flex; align-items: center; gap: 16px; padding: 4px 0 16px; }
.today-hero-text { flex: 1; min-width: 0; }
.today-date { margin: 0; font: 600 13px/18px var(--font-text); color: var(--label-2); text-transform: uppercase; letter-spacing: .03em; }
.today-greeting { margin: 2px 0 2px; font: var(--t-title2); }
.today-summary { margin: 0; color: var(--label-2); font: var(--t-subhead); }
.today-overdue { color: var(--red); }
.ring-box { position: relative; width: 64px; height: 64px; flex: none; }
.ring { width: 64px; height: 64px; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 7; }
.ring-track { stroke: var(--fill-3); }
.ring-value { stroke: var(--tint); stroke-linecap: round; transition: stroke-dashoffset var(--dur-4) var(--ease-out); }
.ring-value.is-full { stroke: var(--green); }
.ring-text { position: absolute; inset: 0; display: grid; place-items: center; font: 700 13px/1 var(--font-rounded); }
.suggest { margin-top: 8px; }
.suggest-head { display: inline-flex; align-items: center; gap: 6px; font: var(--t-headline); color: var(--sun); padding: 8px 0; }
.suggest-row { display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--separator); }
.suggest-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; border: 0; background: transparent; text-align: left; padding: 10px 2px; color: var(--label); }
.suggest-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest-add { color: var(--tint); }

/* search & pull */
.search-box { position: relative; display: flex; align-items: center; color: var(--label-2); margin: 4px 0 14px; }
.search-box > .icon { position: absolute; left: 11px; }
.search-input { padding-left: 34px; min-height: 40px; background: var(--fill-3); border-color: transparent; border-radius: var(--r-md); }
.pull {
  --pull: 0px;
  height: 0; overflow: visible; display: flex; justify-content: center; position: relative; z-index: 2; pointer-events: none;
}
.pull-spinner {
  position: absolute; top: calc(var(--pull) - 40px); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); box-shadow: var(--shadow-2); color: var(--label-2); opacity: 0; transition: opacity var(--dur-1);
}
.pull.is-pulling .pull-spinner, .pull.is-loading .pull-spinner { opacity: 1; }
.pull.is-ready .pull-spinner { color: var(--tint); }
.pull.is-loading .pull-spinner .icon { animation: spin .8s linear infinite; }
.pull:not(.is-pulling) .pull-spinner { transition: top var(--dur-3) var(--ease-out), opacity var(--dur-2); }
@keyframes spin { to { transform: rotate(360deg); } }