/* ═══════════════════════════════════════════════════════════════════════════
   ЭКРАН «ЗАДАЧИ» — перенос макета focus-tasks-v4.html один в один.

   Размеры, отступы, радиусы, толщины линий, кегли и тайминги взяты из макета
   БЕЗ ИЗМЕНЕНИЙ. Изменены только значения цветов — вместо хардкода из :root
   макета подставлены переменные Focus:

     макет            → Focus
     --bg   #0B0B0D   → --bg-page
     --surface        → --bg-panel
     --surface-2      → --bg-card
     --surface-3      → --bg-elev
     --line           → --line
     --line-soft      → --line-soft      (заведена в site.css)
     --text           → --text-0
     --text-2         → --text-1
     --muted          → --text-2
     --accent #5B8CFF → --accent         (в Focus почти белый!)
     --accent-soft    → --accent-soft    (заведена в site.css)
     --p-high/mid/low → --priority-high/medium/low

   ⚠️ --accent в Focus светлый (#e8e8ec), а не синий. Везде, где в макете на
   акцентной заливке стоял белый текст (`color:#fff`), здесь тёмный
   (var(--bg-page)) — иначе надпись пропадает.

   ⚠️ ИМЕНА КЛАССОВ. В макете они предельно общие: .row, .tick, .chip, .day,
   .list, .group, .field, .pick, .save, .tag, .dot, .bar, .top, .switch, .arrow.
   В site.css половина этих имён уже занята другими экранами, поэтому все
   правила переносятся с префиксом z2- и живут внутри #z2-root. Значения при
   этом не менялись — вид тот же, что в макете.
   ═══════════════════════════════════════════════════════════════════════════ */

#z2-root{
  --z2-r-md:16px; --z2-r-lg:22px; --z2-r-xl:28px;
  flex:1;min-height:0;display:flex;flex-direction:column;
}
#z2-root *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
#z2-root button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
#z2-root input,#z2-root textarea{font:inherit;color:inherit;background:none;border:0;outline:0;width:100%}

/* Лента из трёх панелей: они лежат в ряд и ездут общим transform.
   ⚠️ display:none у неактивных панелей БОЛЬШЕ НЕТ — иначе во время свайпа
   соседняя панель была бы пустым местом. Класс is-active остался как
   состояние: по нему подсвечивается кнопка в шапке. */
.z2-pager{flex:1;min-height:0;overflow:hidden}
.z2-track{display:flex;width:100%;height:100%;will-change:transform}
.z2-screen{flex:0 0 100%;width:100%;min-width:100%;min-height:0;display:flex;flex-direction:column}

/* шапка */
.z2-top{padding:12px 14px 10px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.z2-head-left{display:flex;align-items:center;gap:3px;min-width:0}
.z2-head-left h1{margin:0;font-size:25px;font-weight:800;letter-spacing:-.02em;white-space:nowrap;color:var(--text-0)}
.z2-head-left .z2-year{font-size:13px;font-weight:600;color:var(--text-2);margin-left:6px;font-variant-numeric:tabular-nums}
.z2-arrow{width:28px;height:28px;border-radius:999px;display:grid;place-items:center;color:var(--text-2);font-size:19px;line-height:1}
.z2-arrow:active{background:var(--bg-card);color:var(--text-0)}
.z2-title-wrap{display:flex;align-items:baseline;gap:6px;min-width:0}
.z2-today-pill{height:26px;padding:0 10px;margin-left:6px;border-radius:999px;background:var(--bg-elev);
  border:1px solid var(--line-strong);font-size:12px;font-weight:650;color:var(--text-0);display:none}
.z2-today-pill.show{display:block}
/* ⚠️ gap УБРАН (был 1px). Физика капли из эталона считает ячейку как
   (clientWidth - PAD*2) / N — при зазоре между кнопками ячейка выходит шире
   кнопки, и капля к третьей иконке уползает мимо центра. Кнопки стоят
   вплотную, зазор рисует сама капля (она уже ячейки).
   Подложки у активной кнопки здесь НЕТ: её роль целиком у капли (site.css). */
.z2-switch{display:flex;background:var(--bg-card);border-radius:999px;padding:3px;gap:0;flex:0 0 auto}
.z2-switch button{width:38px;height:32px;border-radius:999px;display:grid;place-items:center;color:var(--text-2)}
.z2-switch button.on{color:var(--text-0)}

/* полоса долгосрочных задач над сеткой */
.z2-longbar{display:flex;gap:6px;overflow-x:auto;padding:0 14px 10px;flex:0 0 auto}
.z2-longbar:empty{display:none}
.z2-lchip{flex:0 0 auto;display:flex;align-items:center;gap:7px;padding:7px 12px 7px 9px;border-radius:12px;
  background:var(--bg-card);border:1px solid var(--line);font-size:12.5px;font-weight:600;white-space:nowrap;color:var(--text-0)}
.z2-lchip i{width:7px;height:7px;border-radius:99px;flex:0 0 auto}
.z2-lchip s{color:var(--text-2);font-weight:600;text-decoration:none;font-size:11px}
.z2-lchip.done{opacity:.4;text-decoration:line-through}

/* сетка */
.z2-grid-wrap{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--bg-panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.z2-dow{display:grid;grid-template-columns:repeat(7,1fr);padding:9px 0;border-bottom:1px solid var(--line);flex:0 0 auto}
.z2-dow span{text-align:center;font-size:10.5px;font-weight:700;letter-spacing:.05em;color:var(--text-2);text-transform:uppercase}
.z2-dow span.we{color:var(--text-3)}
.z2-scroller{flex:1;min-height:0;overflow:hidden}
/* Переезд месяца задаётся из JS (z2ShiftMonth): ось X у стрелок, ось Y у
   вертикального свайпа. Собственного transition здесь нет — иначе он спорил бы
   с тем, что ставит жест, пока лента идёт за пальцем. */
.z2-grid{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(6,1fr);height:100%;will-change:transform,opacity}
/* Линии сетки заметнее: на --line-soft клетки местами сливались. */
.z2-day{min-height:0;border-right:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);
  padding:3px 2px 4px;display:flex;flex-direction:column;gap:2px;min-width:0;overflow:hidden}
.z2-day:nth-child(7n){border-right:0}
.z2-day:nth-child(n+36){border-bottom:0}
.z2-day.we{background:rgba(255,255,255,.015)}
.z2-day.out{opacity:.3}
.z2-day.drop{background:var(--accent-soft);box-shadow:inset 0 0 0 1.5px var(--accent)}
.z2-dnum{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text-1);width:20px;height:20px;
  display:grid;place-items:center;border-radius:999px;margin-left:2px;flex:0 0 auto}
/* Сегодня — белый светящийся кружок, как отмеченная клетка трекера. */
.z2-day.today .z2-dnum{background:#fff;color:#111;
  box-shadow:0 0 10px rgba(255,255,255,.55),0 0 20px rgba(255,255,255,.25)}
.z2-day.sel:not(.today) .z2-dnum{background:var(--bg-card-2);color:var(--text-0)}
/* Прошедшие дни текущего месяца — приглушены. Будущие остаются как есть. */
.z2-day.past:not(.out) .z2-dnum{color:var(--text-3)}
.z2-day.past:not(.out) .z2-chips{opacity:.55}
.z2-chips{display:flex;flex-direction:column;gap:2px;min-height:0;overflow:hidden}
.z2-chip{position:relative;padding:3px 3px 3px 7px;border-radius:5px;background:var(--bg-card);color:var(--text-0);
  font-size:10.5px;line-height:1.24;font-weight:550;letter-spacing:-.01em;word-break:break-word;touch-action:none;overflow:hidden;
  flex:0 0 auto}
.z2-chip::before{content:"";position:absolute;left:2px;top:3px;bottom:3px;width:2.5px;border-radius:2px;background:var(--priority-medium)}
.z2-chip.p-high::before{background:var(--priority-high)}
.z2-chip.p-low::before{background:var(--priority-low)}
.z2-chip .z2-n{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.z2-chip.done{opacity:.38;text-decoration:line-through}
.z2-chip.ghost{opacity:.22}
/* Выполненная задача уезжает не сразу: держится TASK_COMPLETION_DELAY, потом
   последние полсекунды плавно схлопывается. */
.z2-chip.fading{opacity:0;max-height:0;padding:0;margin:0;transition:all .5s ease;pointer-events:none}
.z2-more{font-size:9.5px;font-weight:800;color:var(--text-2);padding-left:7px;margin-top:1px;flex:0 0 auto;display:none}
.z2-drag-ghost{position:fixed;z-index:1200;pointer-events:none;padding:6px 10px;border-radius:9px;max-width:180px;
  background:var(--bg-elev);border:1px solid var(--accent);color:var(--text-0);font-size:12px;font-weight:600;
  box-shadow:0 12px 30px rgba(0,0,0,.6);transform:translate(-50%,-50%) scale(1.05)}

/* список / папки */
/* Отступы по бокам минимальные — карточки почти во всю ширину экрана.
   В макете было 14px, но там не было внешних полей .main из оболочки Focus. */
.z2-list{flex:1;min-height:0;overflow-y:auto;padding:0 4px 130px}
.z2-group{margin-top:16px}
.z2-group h3{margin:0 0 8px 4px;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-2)}
.z2-group h3 b{color:var(--text-0)}
/* v251: строка стала раскрывающейся — колонка «шапка + тело». Отступ снизу
   держит обёртка .ssw-row, иначе он ездил бы вместе с карточкой при свайпе. */
.z2-row{display:flex;flex-direction:column;padding:0;background:var(--bg-card);border:1px solid var(--line);border-radius:var(--z2-r-md);margin-bottom:0}
.z2-row-head{display:flex;align-items:center;gap:11px;padding:12px}
.z2-row.fading{opacity:0;max-height:0;padding:0;margin:0;border-width:0;transition:all .5s ease;pointer-events:none;overflow:hidden}
/* Чекбокс — ровно как клетка трекера (.habit-cell): маленький квадрат с тонким
   контуром, при нажатии заливается белым и светится.
   ⚠️ Селектор с #z2-root обязателен: выше в этом файле стоит сброс
   `#z2-root button{background:none;border:0}` (перенос из макета), и он бьёт
   по ID — без этого у чекбокса пропадала рамка и его было не видно. */
#z2-root .z2-tick,.z2-tick{width:22px;height:22px;min-width:22px;max-width:22px;
  min-height:22px;max-height:22px;aspect-ratio:1;box-sizing:border-box;border-radius:6px;
  border:1.5px solid var(--line-strong);flex:0 0 auto;display:grid;place-items:center;
  background:transparent;padding:0;transition:all var(--transition-slow)}
#z2-root .z2-tick:hover,.z2-tick:hover{border-color:var(--text-1);transform:scale(1.1)}
#z2-root .z2-tick.on,.z2-tick.on{background:#fff;border-color:#fff;
  box-shadow:0 0 10px rgba(255,255,255,.55),0 0 20px rgba(255,255,255,.25)}
.z2-tick svg{opacity:0;transform:scale(.6);transition:.16s;stroke:#111;width:12px;height:12px}
.z2-tick.on svg{opacity:1;transform:scale(1)}
.z2-tick svg{opacity:0;transform:scale(.6);transition:.16s;stroke:var(--text-0)}
.z2-tick.on svg{opacity:1;transform:scale(1)}
.z2-row-body{min-width:0;flex:1}
.z2-row-title{font-size:15px;font-weight:600;color:var(--text-0)}
.z2-row.done .z2-row-title,.z2-day-row.done .z2-row-title{text-decoration:line-through;color:var(--text-2)}
.z2-row-meta{display:flex;gap:7px;align-items:center;margin-top:4px;font-size:12px;color:var(--text-2);flex-wrap:wrap}
.z2-dot{width:6px;height:6px;border-radius:99px;background:var(--priority-medium);display:inline-block;flex:0 0 auto}
.z2-dot.p-high{background:var(--priority-high)} .z2-dot.p-low{background:var(--priority-low)}
.z2-tag{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:650}

/* карточка папки */
.z2-fcard{background:var(--bg-panel);border:1px solid var(--line-soft);border-radius:var(--z2-r-lg);padding:15px;margin-bottom:10px;position:relative;overflow:hidden}
.z2-fhead{display:flex;align-items:center;justify-content:space-between;gap:10px}
.z2-fname{display:flex;align-items:center;gap:9px;font-size:16.5px;font-weight:700;min-width:0;color:var(--text-0)}
.z2-fname i{width:9px;height:9px;border-radius:99px;flex:0 0 auto}
.z2-fdue{font-size:11.5px;font-weight:650;padding:4px 9px;border-radius:999px;background:var(--bg-card);color:var(--text-1);white-space:nowrap}
.z2-fdue.hot{color:var(--priority-high)}
.z2-bar{height:5px;border-radius:99px;background:var(--bg-elev);margin:12px 0 8px;overflow:hidden}
.z2-bar>span{display:block;height:100%;border-radius:99px;transition:width .4s}
.z2-fmeta{font-size:12px;color:var(--text-2);font-weight:550}
.z2-fprev{margin-top:11px;display:flex;flex-direction:column;gap:7px}
.z2-fprev div{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-1)}
.z2-fprev div i{width:5px;height:5px;border-radius:99px;background:var(--text-2);flex:0 0 auto}
.z2-fprev div.more-p{color:var(--text-2);font-size:12px;font-weight:600;padding-left:13px}
.z2-newf{width:100%;padding:13px;border:1px solid var(--line-strong);border-radius:12px;background:var(--bg-card-2);
  color:var(--text-1);font-size:13px;font-weight:700;margin-bottom:20px;transition:all var(--transition)}
.z2-newf:hover{color:var(--text-0);background:var(--bg-elev)}

/* плавающая кнопка. В макете отступ считался от собственной нижней навигации
   (--nav-h). В Focus навигация своя и её высота меняется, поэтому `bottom`
   проставляет z2FitViewport() по фактическому положению .mobile-nav. */
/* Прозрачная, видна только рамка. #z2-root в селекторе — по той же причине,
   что и у чекбокса: сброс кнопок выше по файлу бьёт по ID. */
#z2-root .z2-fab{position:fixed;right:22px;bottom:24px;width:56px;height:56px;border-radius:999px;
  background:transparent;border:1px solid var(--line-strong);
  display:grid;place-items:center;z-index:25;transition:all .18s}
#z2-root .z2-fab:hover{border-color:var(--text-2)}
.z2-fab:active{transform:scale(.92)}
.z2-fab svg{stroke:var(--text-1)}

/* шторки */
.z2-scrim{position:fixed;inset:0;background:rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .28s;z-index:1400;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.z2-scrim.on{opacity:1;pointer-events:auto}
.z2-sheet{position:fixed;left:0;right:0;bottom:0;z-index:1410;background:var(--bg-panel);border-radius:24px 24px 0 0;border-top:1px solid var(--line);
  transform:translateY(101%);transition:transform .34s cubic-bezier(.32,.72,0,1);padding-bottom:calc(14px + var(--sab));
  max-height:90dvh;display:flex;flex-direction:column;box-shadow:0 -18px 50px rgba(0,0,0,.55)}
.z2-sheet.on{transform:translateY(0)}
@media (min-width:821px){
  .z2-sheet{left:50%;right:auto;width:520px;transform:translate(-50%,101%)}
  .z2-sheet.on{transform:translate(-50%,0)}
}
.z2-grab{width:38px;height:4px;border-radius:99px;background:var(--bg-elev);margin:9px auto 4px;flex:0 0 auto;touch-action:none}
.z2-sheet-head{display:flex;align-items:center;justify-content:space-between;padding:8px 18px 12px;flex:0 0 auto;gap:10px}
.z2-sheet-head h2{margin:0;font-size:18px;font-weight:700;color:var(--text-0)}
.z2-sheet-head .z2-sub{font-size:12px;color:var(--text-2);margin-top:2px}
/* «Отмена» / «Готово» — приглушённый текст без рамки и заливки (в шторках,
   лежащих на уровне body, кнопки иначе получают их из общих стилей). */
.z2-link{font-size:15px;font-weight:600;color:var(--text-1);padding:4px 2px;
  background:none !important;border:0 !important;box-shadow:none !important}
.z2-link:hover{color:var(--text-0)}
.z2-link.mute{color:var(--text-2);font-weight:500}
.z2-sheet-body{overflow-y:auto;padding:0 18px}
/* Поля тёмные: подложка на тон темнее шторки, контур неяркий. */
.z2-field{background:var(--bg-input);border:1px solid var(--line);border-radius:var(--z2-r-md);padding:12px 13px;margin-bottom:9px}
.z2-field label{display:block;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-2);margin-bottom:8px}
/* ⚠️ Сброс полей ввода обязателен и обязателен с !important. Правило макета
   `#z2-root input,#z2-root textarea{background:none;border:0}` действует только
   внутри корня экрана, а шторки лежат на уровне body — там поля подхватывали
   светлый фон и рамку из общих стилей Focus и выглядели белыми плашками. */
.z2-field input,.z2-field textarea{width:100%;font-size:15px;font-weight:550;resize:none;
  color:var(--text-1);background:none !important;border:0 !important;outline:0 !important;
  box-shadow:none !important;padding:0;border-radius:0}
.z2-field input::placeholder,.z2-field textarea::placeholder{color:var(--text-3);font-weight:450}
.z2-field input[type=date],.z2-field input[type=time]{color-scheme:dark}
.z2-two{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.z2-chiprow{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.z2-chiprow.scroll{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;touch-action:pan-x;padding-bottom:2px;scrollbar-width:none}
.z2-chiprow.scroll::-webkit-scrollbar{display:none}
/* Кнопки прозрачные — видна только рамка. */
/* Прозрачные, видна только рамка. !important — в шторках (уровень body) кнопки
   иначе получают заливку из общих стилей Focus. */
.z2-pick{padding:6px 11px;border-radius:10px;background:transparent !important;
  border:1px solid var(--line-strong) !important;font-size:12px;font-weight:650;color:var(--text-2);
  display:flex;align-items:center;gap:6px;white-space:nowrap;flex:0 0 auto;transition:all var(--transition)}
.z2-pick:hover{color:var(--text-0);border-color:var(--text-3) !important}
.z2-pick.on{color:var(--text-0);border-color:var(--text-1) !important;box-shadow:0 0 0 1px var(--text-1) inset}
.z2-hint{font-size:11.5px;color:var(--text-2);margin-top:9px;font-weight:550}

/* Срок: маленькая иконка календаря первой, пресеты дальше. Дата и время —
   строкой ниже, без собственных полей-«окон». */
.z2-calbtn{position:relative;display:grid;place-items:center;width:30px;height:28px;min-width:30px;
  border-radius:10px;background:transparent;border:1px solid var(--line-strong);color:var(--text-2);
  flex:0 0 auto;transition:all var(--transition)}
.z2-calbtn:hover{color:var(--text-0);border-color:var(--text-3)}
.z2-calbtn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
.z2-calbtn input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;color-scheme:dark}
.z2-calbtn.has-value{color:var(--text-0);border-color:var(--text-1);box-shadow:0 0 0 1px var(--text-1) inset}
.z2-duefoot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.z2-duedate{font-size:12.5px;font-weight:600;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.z2-duedate.muted{color:var(--text-3);font-weight:500}
.z2-timebtn{position:relative;display:flex;align-items:center;gap:6px;padding:4px 10px;border-radius:10px;
  background:transparent;border:1px solid var(--line-strong);color:var(--text-3);font-size:12.5px;
  font-weight:700;flex:0 0 auto;font-variant-numeric:tabular-nums;transition:all var(--transition)}
.z2-timebtn svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2}
.z2-timebtn input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;color-scheme:dark}
.z2-timebtn.has-value{color:var(--text-0);border-color:var(--text-1);box-shadow:0 0 0 1px var(--text-1) inset}

.z2-sub-item{display:flex;align-items:center;gap:9px;padding:7px 2px;border-bottom:1px solid var(--line);font-size:14px}
.z2-sub-item:last-child{border-bottom:0}
.z2-sub-item input{font-size:14px}
.z2-sub-item button{color:var(--text-3);font-size:19px;line-height:1;padding:0 4px;
  background:none !important;border:0 !important;box-shadow:none !important}
.z2-sub-item button:hover{color:var(--danger)}
.z2-sub-item .z2-tick{width:17px;height:17px;min-width:17px;border-radius:5px}
/* Теги отдельной строкой под описанием. border-top возвращаем после общего
   сброса рамок выше. */
.z2-tagline{margin-top:9px;padding-top:9px;border-top:1px solid var(--line) !important;
  font-size:13px !important;font-weight:500 !important}
/* «Сохранить» — тёмная, не белая заливка. */
.z2-save{margin:14px 18px 0;height:50px;border-radius:16px;background:var(--bg-elev);border:1px solid var(--line-strong);
  font-size:15.5px;font-weight:700;color:var(--text-0);flex:0 0 auto;transition:all var(--transition)}
.z2-save:hover{background:var(--bg-card-2);border-color:var(--text-3)}
/* Кнопка создания папки — компактнее, по центру и прозрачная. */
.z2-save-sm{height:42px;width:auto;min-width:180px;align-self:center;padding:0 26px;
  background:transparent;font-size:14px}
.z2-day-row{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--line)}
.z2-day-row:last-of-type{border-bottom:0}
/* Тонкая строка добавления — как в трекере, без рамки и заливки.
   background/border с !important: это <button>, и глобальные стили кнопок в
   site.css иначе рисуют ему рамку и почти чёрную подложку. */
.z2-add-inline{display:flex;align-items:center;gap:7px;padding:8px 0 2px;width:100%;
  background:none !important;border:0 !important;box-shadow:none !important;
  color:var(--text-2);font-size:13px;font-weight:600;text-align:left}
.z2-add-inline:hover{color:var(--text-0)}
.z2-swatches{display:flex;gap:9px;flex-wrap:wrap}
.z2-sw{width:30px;height:30px;border-radius:999px;border:2px solid transparent;position:relative}
.z2-sw.on{transform:scale(1.08)}
.z2-sw.on::after{content:"";position:absolute;inset:-5px;border-radius:999px;border:1.5px solid currentColor;opacity:.85}
.z2-empty{padding:18px 0;color:var(--text-2);font-size:14px}

/* Поиск и список заметок (привязка к папке).
   ⚠️ !important и width:100% — строки списка это <button>, и без сброса они
   получают из общих стилей Focus белую заливку и ширину по содержимому:
   вместо списка выходили маленькие белые плашки в ряд. */
.z2-search{width:100%;background:var(--bg-card-2) !important;border:1px solid var(--line) !important;
  border-radius:10px !important;padding:9px 11px !important;font-size:13px !important;
  font-weight:500 !important;color:var(--text-0);margin-bottom:8px;box-shadow:none !important}
.z2-linklist{max-height:190px;overflow-y:auto;display:flex;flex-direction:column;gap:4px}
.z2-linkrow{display:flex;align-items:center;gap:9px;width:100%;padding:8px 9px;border-radius:9px;
  background:transparent !important;border:1px solid var(--line) !important;box-shadow:none !important;
  cursor:pointer;transition:all var(--transition);text-align:left;font-family:var(--sans)}
.z2-linkrow:hover{border-color:var(--line-strong) !important}
.z2-linkrow.on{border-color:var(--text-1) !important;box-shadow:0 0 0 1px var(--text-1) inset !important}
.z2-linkrow span{flex:1;min-width:0;font-size:13px;font-weight:600;color:var(--text-1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.z2-linkrow.on span{color:var(--text-0)}
.z2-linkrow .z2-tick{width:18px;height:18px;min-width:18px;max-width:18px;
  min-height:18px;max-height:18px;border-radius:5px}
.z2-linkempty{padding:10px 2px;color:var(--text-3);font-size:12.5px}

@media (prefers-reduced-motion:reduce){
  #z2-root *,.z2-sheet,.z2-scrim{transition-duration:.01ms !important}
}

/* ── стыковка с оболочкой Focus ────────────────────────────────────────────
   Своя шапка экрана есть у каждого режима (.z2-top), поэтому шапка страницы
   задач в Focus скрывается целиком. !important — потому что на .page-header
   в site.css есть правила с id и !important. */
body #page-tasks > .page-header{display:none !important}

/* ══ ОКНО ЗАДАЧИ КАК НИЖНЯЯ ШТОРКА ═══════════════════════════════════════
   Разметка окна прежняя (#task-modal из «Задачи №1»), меняется только подача:
   на телефоне оно выезжает снизу, как остальные шторки экрана, а закрывают его
   потягиванием за полоску сверху. Анимация та же — 340ms cubic-bezier.       */
.tm-grab{display:none}
@media (max-width:820px){
  body #task-modal{align-items:flex-end;justify-content:center;padding:0}
  body #task-modal .modal{
    max-width:none !important;width:100% !important;margin:0 !important;
    max-height:92dvh;border-radius:22px 22px 0 0;
    border-left:0;border-right:0;border-bottom:0;padding:0 16px calc(16px + var(--sab));
    animation:tmSheetUp .34s cubic-bezier(.32,.72,0,1);
    display:flex;flex-direction:column;overflow-y:auto;
  }
  @keyframes tmSheetUp{from{transform:translateY(101%)}to{transform:translateY(0)}}
  body #task-modal .tm-grab{
    display:block;width:38px;height:4px;border-radius:99px;background:var(--bg-elev);
    margin:10px auto 6px;flex:0 0 auto;touch-action:none;cursor:grab;
    position:sticky;top:0;z-index:2;
  }
  /* «Отмена» больше не нужна — окно закрывают жестом или тапом по фону. */
  body #task-modal .modal-actions .btn:not(.btn-primary):not(.tm-trash):not(.tm-linkstgl){display:none}
  /* Описанию больше места: две строки было мало. */
  body #task-modal .form-textarea{min-height:96px}
}
/* Описание и теги одной рамкой, с тонкой линией между ними. */
.tm-desc-box{background:var(--bg-input);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:10px 12px}
.tm-desc-box .form-textarea{background:none !important;border:0 !important;padding:0 !important;
  box-shadow:none !important;min-height:78px;resize:none}
.tm-desc-box .tm-tags-line{background:none !important;border:0 !important;border-top:1px solid var(--line) !important;
  border-radius:0 !important;padding:8px 0 0 !important;margin-top:8px;box-shadow:none !important;font-size:13px}

/* Карточки почти во всю ширину экрана телефона.
   ⚠️ Отрицательными полями это не решается: у .z2-list стоит overflow-y:auto,
   а при нём overflow-x вычисляется в auto — правое отрицательное поле не
   расширяет блок, а создаёт скрытую прокрутку, и список выходил кривым
   (слева 6px, справа 24px). Поэтому уменьшаем сам боковой отступ оболочки,
   и только пока открыт экран задач: класс вешает navigateTo() в site.js. */
@media (max-width:820px){
  body.z2-wide .main{padding-left:5px !important;padding-right:5px !important}
}

/* ══ ГОДОВОЙ ОБЗОР ══════════════════════════════════════════════════════════
   Кнопка-сетка слева в шапке календаря открывает 12 мини-месяцев 3×4.
   Палитра — та же, что у экрана: карточки на --bg-card, «сегодня» белым
   кружком (как .z2-day.today), текущий месяц обведён рамкой.               */
/* ⚠️ Селектор с #z2-root обязателен — по той же причине, что у .z2-tick и
   .z2-fab: сброс `#z2-root button{background:none;border:0}` выше по файлу
   бьёт по ID и без этого съедает рамку кнопки. */
#z2-root .z2-yearbtn{width:28px;height:28px;min-height:28px;margin-right:2px;border-radius:9px;
  display:grid;place-items:center;color:var(--text-2);background:transparent;
  border:1px solid var(--line-strong);flex:0 0 auto;transition:all var(--transition)}
#z2-root .z2-yearbtn:hover{color:var(--text-0);border-color:var(--text-3)}
#z2-root .z2-yearbtn:active{background:var(--bg-card);color:var(--text-0)}
.z2-yearbtn svg{fill:none;stroke:currentColor}

/* ⚠️ Класс .z2-year уже занят — это мелкая подпись-счётчик в шапке списка и
   папок (.z2-head-left .z2-year). Обзор носит свой префикс .z2-yv. */
/* v255: обзор — НИЖНЯЯ ШТОРКА, ровно как окно задачи: прижата к низу, скруглена
   сверху, выезжает той же кривой и той же длительностью (.34s cubic-bezier),
   высота по содержимому до 90dvh. Полноэкранным он был лишним «переходом на
   другой экран» ради выбора месяца. */
.z2-yv{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:1420;background:var(--bg-panel);
  border-radius:24px 24px 0 0;border-top:1px solid var(--line);
  box-shadow:0 -18px 50px rgba(0,0,0,.55);
  display:flex;flex-direction:column;padding:0 12px calc(14px + var(--sab));
  max-height:90dvh;
  transform:translateY(101%);pointer-events:none;
  transition:transform .34s cubic-bezier(.32,.72,0,1)}
.z2-yv.on{transform:translateY(0);pointer-events:auto}
/* Полоска-ручка сверху — как у остальных шторок */
.z2-yv::before{content:"";display:block;width:38px;height:4px;border-radius:99px;
  background:var(--bg-elev);margin:9px auto 2px;flex:0 0 auto}
/* Лента годов ездит внутри обзора: свайп влево/вправо меняет год */
.z2-yv-grid{will-change:transform}
/* Обзор лежит на уровне body, вне #z2-root — сброс кнопок макета сюда не
   достаёт, и без него браузер рисует свои серые плашки. */
.z2-yv *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.z2-yv button{font:inherit;background:none;border:0;padding:0;cursor:pointer}
.z2-yv .z2-arrow{color:var(--text-2)}
.z2-yv-top{display:flex;align-items:center;gap:4px;padding:4px 4px 12px;flex:0 0 auto}
.z2-yv-num{font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--text-0);
  font-variant-numeric:tabular-nums;min-width:66px;text-align:center}
.z2-yv-close{margin-left:auto}
.z2-yv-grid{flex:1;min-height:0;overflow-y:auto;display:grid;grid-template-columns:repeat(3,1fr);
  gap:10px;padding-bottom:8px;align-content:start}
.z2-yv .z2-ym{display:flex;flex-direction:column;gap:4px;padding:8px 6px;border-radius:14px;text-align:left;
  background:var(--bg-card);border:1px solid var(--line);transition:border-color var(--transition)}
.z2-yv .z2-ym:hover{border-color:var(--line-strong)}
/* Открытый сейчас месяц — обведён, как выбранный элемент экрана задач. */
.z2-yv .z2-ym.cur{border-color:var(--text-1);box-shadow:0 0 0 1px var(--text-1) inset}
.z2-ym-name{font-size:11.5px;font-weight:700;color:var(--text-1);padding-left:2px;margin-bottom:1px}
.z2-ym.cur .z2-ym-name{color:var(--text-0)}
.z2-ym-dows,.z2-ym-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px}
.z2-ym-dows i{font-style:normal;font-size:6.5px;font-weight:700;color:var(--text-3);text-align:center}
.z2-ym-grid i{font-style:normal;aspect-ratio:1;display:grid;place-items:center;border-radius:4px;
  font-size:7.5px;font-variant-numeric:tabular-nums;color:var(--text-2);position:relative}
.z2-ym-grid i.pad{visibility:hidden}
/* День с задачами — точка под числом (тот же источник, что у месячной сетки). */
.z2-ym-grid i.has::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:2.5px;height:2.5px;border-radius:99px;background:var(--accent)}
.z2-ym-grid i.today{background:#fff;color:#111;font-weight:700;
  box-shadow:0 0 8px rgba(255,255,255,.5)}
.z2-ym-grid i.today.has::after{background:#111}

@media (min-width:821px){
  .z2-yv{left:50%;right:auto;transform:translate(-50%,101%);width:min(620px,100%)}
  .z2-yv.on{transform:translate(-50%,0)}
  .z2-yv-grid{grid-template-columns:repeat(4,1fr)}
  .z2-ym-dows i{font-size:8px}
  .z2-ym-grid i{font-size:9.5px}
}

/* ══ ПАПКА-ЦЕЛЬ (связана с накопительным счётом) ════════════════════════════
   Полоса и подпись — те же, что в карточке копилки в «Финансах» (.fin-goal-bar
   / .fin-goal-fill объявлены в site.css, здесь только подпись и пометки).   */
.z2-fgoal .fin-goal-bar{ margin:12px 0 6px }
.z2-fgoal-lbl{ font-size:12px; color:var(--text-1); font-weight:600;
  font-variant-numeric:tabular-nums; margin-bottom:3px }
.z2-fgoal .z2-fmeta{ font-size:11.5px; color:var(--text-2) }
/* Ссылка на счёт — маленькая, рядом с названием папки */
#z2-root .z2-fgoal-link{
  display:inline-grid; place-items:center; width:20px; height:20px; min-height:0;
  margin-left:2px; padding:0; border:0; background:transparent;
  color:var(--accent); opacity:.75; transition:opacity var(--transition);
}
#z2-root .z2-fgoal-link:active{ opacity:1; transform:scale(.9) }
.z2-fgoal-link svg{ width:14px; height:14px; fill:none; stroke:currentColor }
/* Цель достигнута — акцентная рамка (её ставит рендер) + бейдж вместо срока.
   Обратный переход бесплатный: класс считается из суммы на счёте при каждом
   ре-рендере, упала ниже цели — бейдж исчез. */
.z2-fcard.goal-done{ box-shadow:0 0 0 1px var(--accent) inset }
.z2-fgoal-badge{
  flex:0 0 auto; font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:999px;
  background:var(--accent-soft); color:var(--accent); border:1px solid var(--accent);
  white-space:nowrap;
}

/* ══ КНОПКА «ЗАВЕРШЁННЫЕ» В ШАПКЕ ══════════════════════════════════════════
   Стоит слева от переключателя видов и не влияет на его раскладку: у .z2-top
   стоит space-between, а кнопка — отдельный flex-элемент нулевой гибкости.
   #z2-root в селекторе — из-за сброса `#z2-root button{border:0}` выше.     */
#z2-root .z2-donebtn{
  width:32px; height:32px; min-height:32px; flex:0 0 auto; margin-left:auto; margin-right:6px;
  border-radius:999px; display:grid; place-items:center;
  color:var(--text-2); background:var(--bg-card); border:1px solid transparent;
  transition:all var(--transition);
}
#z2-root .z2-donebtn:hover{ color:var(--text-0); border-color:var(--line-strong) }
#z2-root .z2-donebtn:active{ transform:scale(.92); color:var(--text-0) }
.z2-donebtn svg{ width:17px; height:17px; fill:none; stroke:currentColor }

/* ══ ПРАВАЯ ПАНЕЛЬ «ЗАВЕРШЁННЫЕ» ═══════════════════════════════════════════
   По образцу левой менюшки заметок (.notes-list-panel): та же анимация
   .3s cubic-bezier(.4,0,.2,1), та же тень и радиусы — только зеркально,
   справа, и заметно уже (58% против 84%, ~0.69 от её ширины).              */
.tdone-overlay{
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.3);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); z-index:249;
}
.tdone-overlay.open{ display:block }
.tdone-panel{
  position:fixed; top:0; right:0; bottom:0;
  width:58%; max-width:236px;
  background:var(--bg-panel);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  box-shadow:-6px 0 34px rgba(0,0,0,.5);
  border-radius:20px 0 0 20px;
  z-index:250;
  transform:translateX(100%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column; overflow:hidden;
  /* Список идёт ДО САМОГО НИЗА: снизу резервируем только safe-area, а не
     высоту бара — панель лежит поверх него (z-index 250 против 200), и запас
     под бар просто съедал видимые строки. */
  padding:calc(16px + var(--sat)) 10px calc(8px + var(--sab));
}
.tdone-panel.open{ transform:translateX(0) }
.tdone-head{ flex:0 0 auto; display:flex; flex-direction:column; gap:7px; padding:0 4px 10px }
.tdone-title{ font-size:13px; font-weight:700; color:var(--text-0) }
.tdone-title span{ font-variant-numeric:tabular-nums }
.tdone-panel .tdone-clear{
  width:100%; height:32px; min-height:32px; border-radius:9px;
  background:transparent; border:1px solid var(--line-strong); color:var(--text-2);
  font-family:var(--sans); font-size:12px; font-weight:700; cursor:pointer;
  transition:all var(--transition);
}
.tdone-panel .tdone-clear:hover{ color:var(--danger); border-color:var(--danger) }
.tdone-list{ flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column }
.tdone-row{ margin-bottom:6px }
/* Карточка непрозрачная — иначе сквозь неё видно кнопку под свайпом */
.tdone-card{
  background:var(--bg-card); border:1px solid var(--line); border-radius:11px;
  padding:9px 10px; display:flex; flex-direction:column; gap:4px;
}
/* Название — как у уже выполненных задач: приглушённое и зачёркнутое */
.tdone-name{
  font-size:13px; font-weight:600; color:var(--text-2); text-decoration:line-through;
  overflow-wrap:anywhere;
}
.tdone-meta{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  font-size:10.5px; color:var(--text-3);
}
.tdone-meta .z2-tag{ font-size:10px; padding:1px 6px }
.tdone-empty{ margin:auto; padding:20px 8px; text-align:center; font-size:12.5px; color:var(--text-3) }

@media (min-width:821px){
  .tdone-panel{ max-width:280px; width:280px }
}

/* Свайп-панель действий у .ssw-row объявлена в site.css только под
   @media (max-width:820px) — на широком экране её просто не рисовали. В панели
   завершённых она нужна и там: жест мышью общий движок уже поддерживает. */
@media (min-width:821px){
  .tdone-row{ overflow:hidden; border-radius:11px }
  .tdone-row .ssw-act{
    display:flex !important; position:absolute; top:0; right:0; bottom:0; width:56px;
    align-items:center; justify-content:flex-end; padding-right:7px; z-index:0;
  }
  .tdone-row .ssw-pin{
    width:34px; height:34px; min-height:0; border-radius:50%; padding:0; flex:none;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    background:rgba(18,18,20,.78); border:.5px solid rgba(255,255,255,.16); color:var(--text-1);
    box-shadow:0 4px 14px -6px rgba(0,0,0,.75);
    transform:scale(.55); opacity:0;
    transition:transform .3s cubic-bezier(.22,1.3,.36,1), opacity .22s ease, background .18s ease;
  }
  .tdone-row .ssw-pin svg{ width:15px; height:15px }
  .tdone-row.open .ssw-pin{ transform:scale(1); opacity:1 }
  .tdone-row .ssw-card{ position:relative; z-index:1; transition:transform .28s cubic-bezier(.22,1,.36,1) }
  .tdone-row .ssw-card.swiped{ transform:translateX(-56px) }
}

/* ══ СПИСОК ЗАДАЧ v251: секции, раскрытие вниз, свайп с двумя кнопками ══════ */

/* --- Сворачиваемые секции (Просроченные / Сегодня / Без срока) ------------ */
.z2-group-col > h3{
  display:flex; align-items:center; gap:6px; cursor:pointer;
  user-select:none; -webkit-user-select:none;
}
.z2-sec-chev{
  width:15px; height:15px; margin-left:auto; color:var(--text-3);
  transition:transform .2s ease; flex:0 0 auto;
}
.z2-group.closed .z2-sec-chev{ transform:rotate(-90deg) }
/* Плавное сворачивание: высоту ведёт z2SecToggle от фактической до нуля,
   стрелка доворачивается той же длительностью. display:none тут нельзя —
   он мгновенный и анимации не даёт. */
.z2-group-body{ overflow:hidden;
  transition:max-height .3s cubic-bezier(.22,1,.36,1), opacity .22s ease }
.z2-group.closed .z2-group-body{ max-height:0; opacity:0 }
.z2-sec-n{
  font-size:11px; font-weight:700; color:var(--text-3);
  font-variant-numeric:tabular-nums; letter-spacing:0;
}

/* --- Обёртка-свайп: отступ между строками теперь на ней ------------------- */
.z2-list .ssw-row.z2-swrow{ margin-bottom:7px }
.z2-list .ssw-row.z2-swrow .ssw-card{ margin-bottom:0 !important }
/* Закреплённая — тонкая акцентная линия слева */
.z2-row.pinned{ box-shadow:inset 2px 0 0 var(--accent) }

/* --- Раскрытие вниз ------------------------------------------------------- */
.z2-row-caret{
  width:16px; height:16px; flex:0 0 auto; color:var(--text-3);
  transition:transform .22s ease;
}
.z2-row.open .z2-row-caret{ transform:rotate(180deg) }
.z2-row-exp{
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .26s cubic-bezier(.22,1,.36,1), opacity .18s ease, padding .26s ease;
  padding:0 12px;
}
.z2-row.open .z2-row-exp{ max-height:600px; opacity:1; padding:0 12px 12px }
.z2-exp-label{
  font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--text-3); margin:2px 0 6px;
}
.z2-exp-desc{
  font-size:13px; line-height:1.45; color:var(--text-1); white-space:pre-wrap;
  overflow-wrap:anywhere; margin-bottom:8px;
}
/* ⚠️ Задача БЕЗ подзадач: последним в карточке остаётся описание, и до нижнего
   края набегало 26px (8px у .z2-exp-desc + 6px у последнего .tv-p + 12px
   padding) — заметно больше, чем 12px под последней подзадачей. Отступ должен
   быть одинаковый, поэтому у описания-последнего гасим оба нижних поля: и своё,
   и у последнего блока внутри (абзац или картинка со своим margin). */
.z2-row-exp > .z2-exp-desc:last-child,
.z2-row-exp > .z2-exp-desc:last-child > :last-child{ margin-bottom:0 }
.z2-exp-subs{ display:flex; flex-direction:column; gap:6px }
.z2-exp-sub{ display:flex; align-items:center; gap:9px; font-size:13px; color:var(--text-1) }
.z2-exp-sub.done .z2-exp-sub-text{ text-decoration:line-through; color:var(--text-3) }
.z2-exp-tick{
  width:17px; height:17px; min-width:17px; border-radius:5px; flex:0 0 auto;
  border:1.5px solid var(--line-strong); display:grid; place-items:center;
  cursor:pointer; transition:all var(--transition);
}
.z2-exp-sub.done .z2-exp-tick{ background:#fff; border-color:#fff }
.z2-exp-tick svg{ stroke:#111; width:11px; height:11px }
.z2-exp-sub-text{ min-width:0; overflow-wrap:anywhere }
.z2-sub-badge{
  font-size:11px; font-weight:700; color:var(--text-3); font-variant-numeric:tabular-nums;
}
.z2-sub-count{ color:var(--text-2); font-weight:700 }

/* ══ ПОДЗАДАЧА «НЕ ВЫПОЛНЕНА» ══════════════════════════════════════════════
   Крестик справа помечает подзадачу проваленной: текст зачёркивается и уходит
   в ТЁМНО-красный (не сигнальный — это пометка, а не ошибка), в квадратике
   вместо галочки встаёт крестик. Повторный тап снимает пометку.
   Цвет берём из палитры: --danger приглушён затемнением, новых не вводим. */
.z2-exp-sub{ position:relative }
.z2-exp-sub-text{ flex:1 }
#z2-root .z2-exp-fail{
  width:22px; height:22px; min-height:0; padding:0; flex:0 0 auto; margin-left:auto;
  border:0; background:transparent; border-radius:999px;
  display:grid; place-items:center; color:var(--text-3);
  opacity:.55; transition:opacity var(--transition), color var(--transition);
}
#z2-root .z2-exp-fail:hover{ opacity:1; color:var(--danger) }
#z2-root .z2-exp-fail.on{ opacity:1; color:#8f3a30 }
.z2-exp-fail svg{ width:12px; height:12px; stroke:currentColor; fill:none }
/* Сама строка проваленной подзадачи */
.z2-exp-sub.failed .z2-exp-sub-text{
  text-decoration:line-through; color:#8f3a30;
}
.z2-exp-sub.failed .z2-exp-tick{
  border-color:#8f3a30; background:transparent;
}
.z2-exp-sub.failed .z2-exp-tick svg{ stroke:#8f3a30 }

/* ══ ШАПКА v254: место длинным месяцам, счётчики по центру ═════════════════
   «Сентябрь»/«Октябрь» вытесняли правую стрелку за край: заголовок был
   nowrap и не сжимался, а кнопки шапки — тоже. Отдаём заголовку право
   ужиматься, стрелкам и кнопкам — фиксированный размер. */
#z2-scr-month .z2-head-left{ flex:1 1 auto; min-width:0 }
#z2-scr-month .z2-head-left h1{ font-size:21px; min-width:0; overflow:hidden; text-overflow:ellipsis }
#z2-scr-month .z2-title-wrap{ flex:1 1 auto; min-width:0; justify-content:center }
#z2-root .z2-arrow{ flex:0 0 auto }
#z2-root .z2-yearbtn{ flex:0 0 auto }
/* Кнопка правой менюшки компактнее и ближе к переключателю — освобождает
   место названию месяца. */
#z2-root .z2-donebtn{ width:30px; height:30px; min-height:30px; margin-right:4px }
.z2-donebtn svg{ width:16px; height:16px }
#z2-scr-month .z2-top{ gap:6px }

/* Счётчик рядом с заголовком: было align-items:baseline — цифра «падала» на
   базовую линию и казалась мелкой и низкой. Ставим по центру слова. */
.z2-title-wrap{ align-items:center }
.z2-head-left .z2-year{ font-size:14px; font-weight:700; color:var(--text-2); align-self:center }

/* ══ v255: счётчики в шапке и полные названия месяцев ══════════════════════ */
/* Число и слово всегда в одну строку и одним кеглем — и «7 активных», и
   «12 папок». nowrap обязателен: при сотне папок строка иначе переносилась. */
.z2-head-left .z2-year{
  font-size:12.5px; font-weight:650; color:var(--text-2);
  white-space:nowrap; flex:0 0 auto; align-self:center;
}
.z2-title-wrap{ align-items:center; flex-wrap:nowrap }
.z2-head-left h1{ flex:0 1 auto }

/* Месяц пишем ЦЕЛИКОМ: многоточие резало «Сентябрь»/«Октябрь». Вместо обрезки
   даём заголовку ужиматься кеглем и снимаем ellipsis. */
#z2-scr-month .z2-head-left h1{
  font-size:19px; overflow:visible; text-overflow:clip; white-space:nowrap;
}
#z2-scr-month .z2-title-wrap{ flex:0 1 auto; min-width:0; overflow:visible }
#z2-scr-month .z2-head-left{ flex:1 1 auto; min-width:0; gap:1px }

/* ══ v256: папка = такая же свайп-строка, как задача ═══════════════════════ */
.z2-list .ssw-row.z2-frow{ margin-bottom:10px }
.z2-list .ssw-row.z2-frow .z2-fcard{ margin-bottom:0 !important }
/* Карточка непрозрачная — иначе сквозь неё видно кнопки под свайпом */
.z2-frow .z2-fcard{ background:var(--bg-panel) }
.z2-fcard.open{ border-color:var(--line-strong) }
/* Раскрытие вниз — той же кривой, что у задач */
.z2-frow-exp{
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .26s cubic-bezier(.22,1,.36,1), opacity .18s ease, margin .26s ease;
}
.z2-fcard.open .z2-frow-exp{ max-height:900px; opacity:1; margin-top:10px }
.z2-fexp-list{ display:flex; flex-direction:column }
.z2-fcard .z2-exp-label{
  font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--text-3); margin:2px 0 6px;
}
.z2-fcard .z2-exp-desc{
  font-size:13px; line-height:1.45; color:var(--text-1); white-space:pre-wrap;
  overflow-wrap:anywhere; margin-bottom:8px;
}
/* Ручка переноса появляется, как в остальных списках */
.z2-fname .side-drag-handle{ flex:0 0 auto }
.z2-frow.tdrag .z2-fcard{ box-shadow:0 12px 30px rgba(0,0,0,.55) }

/* ══ v257: каплю можно тащить пальцем ══════════════════════════════════════
   ⚠️ ПОЧЕМУ ПЕРЕТАСКИВАНИЕ НЕ РАБОТАЛО. Два независимых стопора:
   1) у переключателя не было touch-action — браузер решал, что начался скролл,
      и ОТМЕНЯЛ поток pointer-событий (pointercancel) сразу после первого
      движения, до того как жест успевал что-то сдвинуть;
   2) тот же жест ловил свайп панелей (#z2-pager) и гасил его своим
      preventDefault — палец тянул сразу двух хозяев.
   Первое лечится здесь, второе — исключением .z2-switch в z2BindPager. */
.z2-switch{ touch-action:none; -webkit-user-select:none; user-select:none }
.z2-switch button{ touch-action:none }

/* ══ v258: поиск в панели завершённых, «Очистить всё» внизу ════════════════ */
.tdone-head{ gap:8px }
.tdone-search{
  width:100%; height:32px; min-height:32px; padding:6px 10px; border-radius:8px;
  background:var(--bg-card); border:1px solid var(--line); color:var(--text-0);
  font-family:var(--sans); font-size:12.5px; outline:0;
}
.tdone-search::placeholder{ color:var(--text-3) }
/* Кнопка уехала вниз: наверху она стояла под пальцем */
.tdone-panel .tdone-clear{ flex:0 0 auto; margin-top:8px }

/* ══ Время задачи: крестик остаётся в строке ═══════════════════════════════
   При «8 ч 30 мин» строка переполнялась и крестик уезжал вниз. Ужимаем САМИ
   поля (кегль текста не трогаем) и разрешаем подписи сжиматься. */
#task-modal .tm-time input[type="time"]{ min-width:0; width:74px; padding:7px 6px }
.tm-times{ flex-wrap:nowrap }
.tm-time{ min-width:0; flex:0 1 auto }
.tm-time-dur{ min-width:0; overflow:hidden; text-overflow:ellipsis; flex:0 1 auto }
#task-modal .tm-time-clear{ flex:0 0 auto }

/* ══ v259: поля времени под 12-часовой формат ══════════════════════════════
   В локали с AM/PM нативное поле шире, и «AM»/«PM» обрезалось. Расширяем сами
   поля, а место под крестик отыгрываем на соседях: подпись длительности
   сжимается и при нехватке места режется многоточием, отступы плотнее.
   Кегль текста НЕ трогаем — просили именно этого. */
#task-modal .tm-time input[type="time"]{
  width:auto !important; min-width:96px !important; max-width:112px;
  padding:7px 4px !important;
}
.tm-times{ gap:5px; flex-wrap:nowrap; align-items:center }
.tm-time{ min-width:0; flex:0 1 auto }
.tm-time-dash{ flex:0 0 auto; padding:0; margin-top:12px }
.tm-time-dur{
  flex:1 1 auto; min-width:0; margin-top:12px; padding:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:right;
}
#task-modal .tm-time-clear{
  flex:0 0 auto; width:22px; height:22px; margin:12px 0 0 0;
}
/* На узких экранах подписи «Начало/Конец» съедают ширину — прячем их,
   поля и так подписаны сами собой. */
@media (max-width:380px){
  .tm-time > span{ display:none }
  .tm-time-dash{ margin-top:0 }
  .tm-time-dur{ margin-top:0 }
  #task-modal .tm-time-clear{ margin-top:0 }
}

/* ══ v261: раскрытие задач и папок — та же кривая, что у секций списка ══════
   max-height ставит JS по фактической высоте (z2ExpandBody), поэтому здесь
   его фиксированных значений быть не должно: с потолком 600px длинный список
   подзадач обрезался, а короткий начинал ехать с задержкой.
   Длительность и кривая — общие с .z2-group-body. */
.z2-row-exp,
.z2-frow-exp{
  transition:max-height .3s cubic-bezier(.22,1,.36,1), opacity .22s ease,
             padding .3s ease, margin .3s ease;
}
.z2-row.open .z2-row-exp{ max-height:none; opacity:1; padding:0 12px 12px }
.z2-fcard.open .z2-frow-exp{ max-height:none; opacity:1; margin-top:10px }

/* ══ v263: РАЗМЕТКА В ОПИСАНИИ ЗАДАЧИ ══════════════════════════════════════
   Описание рисуется той же renderMarkdown, что и заметки (см. taskDescHtml).
   Её кегли рассчитаны на полноэкранный редактор, поэтому внутри карточки их
   ужимаем: иначе один «# Заголовок» перекрывает саму задачу. Значения — от
   размера текста карточки (13px), новых цветов не вводим. */
.z2-exp-desc .tv-p > :first-child{ margin-top:0 }
.z2-exp-desc .tv-p > :last-child{ margin-bottom:0 }
.z2-exp-desc h1{ font-size:15px; font-weight:800; margin:6px 0 4px; color:var(--text-0) }
.z2-exp-desc h2{ font-size:14px; font-weight:750; margin:6px 0 4px; color:var(--text-0) }
.z2-exp-desc h3,
.z2-exp-desc h4,
.z2-exp-desc h5{ font-size:13px; font-weight:700; margin:5px 0 3px; color:var(--text-0) }
.z2-exp-desc p{ margin:0 0 5px }
.z2-exp-desc ul{ margin:2px 0 5px; padding-left:16px }
.z2-exp-desc li{ margin:1px 0 }
.z2-exp-desc li.ord{ list-style:decimal }
.z2-exp-desc blockquote{
  margin:4px 0; padding:2px 0 2px 9px;
  border-left:2px solid var(--line-strong); color:var(--text-2);
}
.z2-exp-desc code{
  font-size:12px; padding:1px 4px; border-radius:5px;
  background:var(--bg-elev); color:var(--text-0);
}
.z2-exp-desc strong{ color:var(--text-0); font-weight:750 }
.z2-exp-desc s{ color:var(--text-3) }
/* Чекбоксы из «- [ ] пункт»: в описании они только показываются, отмечают их
   в подзадачах — поэтому не даём им перехватывать тап по карточке. */
.z2-exp-desc .md-task{ display:flex; align-items:center; gap:7px; margin:2px 0 }
.z2-exp-desc .md-task input{ pointer-events:none; width:14px; height:14px }
.z2-exp-desc .md-task.done span{ text-decoration:line-through; color:var(--text-3) }
/* Инлайн-кегль {h1|…} из живого редактора заметок */
.z2-exp-desc .md-sz1{ font-size:15px; font-weight:800 }
.z2-exp-desc .md-sz2{ font-size:14px; font-weight:750 }
.z2-exp-desc .md-sz3,
.z2-exp-desc .md-sz4,
.z2-exp-desc .md-sz5{ font-size:13px; font-weight:700 }

/* ══ v264: ПРАВКИ ПО ЭКРАНУ ПАПОК ══════════════════════════════════════════ */

/* ---- 1. Счётчик рядом с заголовком — по нижней строке слова ---------------
   .z2-title-wrap выравнивает по базовой линии, но у 25px заголовка и 13px
   счётчика общая база оставляет мелкий текст визуально в середине буквы.
   Опускаем его на пару пикселей — читается как подпись снизу, чего и просили. */
.z2-head-left .z2-year{ position:relative; top:3px }

/* ---- 2. Полоса прогресса ближе к названию папки ---------------------------
   Было 12px сверху — полоса висела сама по себе, отдельно от имени.
   Прижимаем к заголовку; снизу зазор оставляем прежним. */
.z2-bar{ margin-top:6px }
.z2-fcard .fin-goal-bar{ margin-top:6px }

/* ---- 3. Задача внутри раскрытой папки ------------------------------------
   Строка со свайпом: обёртка .ssw-row вложена в карточку папки, поэтому
   разделительную линию рисуем на обёртке, а не на самой карточке — иначе она
   уезжала бы вместе с ней при свайпе. */
.z2-ftrow{ position:relative; border-bottom:1px solid var(--line) }
.z2-ftrow:last-of-type{ border-bottom:0 }
/* ⚠️ display:block ОБЯЗАТЕЛЕН. Карточка носит класс .z2-day-row, а он
   `display:flex` — из-за этого шапка задачи и блок подзадач становились
   соседями по строке, и подзадачи уезжали ВПРАВО от задачи вместо того, чтобы
   раскрываться под ней. Именно это и было видно на экране. */
.z2-ftask{ display:block; background:var(--bg-panel); padding:0; border-bottom:0 }
.z2-ftask-head{ display:flex; align-items:center; gap:11px; padding:11px 0 }
.z2-ftask .z2-row-body{ flex:1; min-width:0 }
/* Подзадачи — ПОД задачей, с отступом слева под галочку. Раскрываются той же
   кривой, что задачи и папки (z2ExpandBody считает высоту по scrollHeight,
   поэтому потолок не задаём — иначе длинный список обрежется). */
.z2-ftask-exp{
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .26s cubic-bezier(.22,1,.36,1), opacity .18s ease, padding .26s ease;
  padding:0 0 0 31px;
}
/* ⚠️ max-height:none ОБЯЗАТЕЛЕН, и вот почему. Высоту при раскрытии ставит
   z2ExpandBody ИНЛАЙНОВЫМ стилем, а он живёт только до ближайшего ре-рендера.
   Любая перерисовка списка — отметил подзадачу, создал новую задачу, пришли
   данные с другого устройства — стирала инлайн, и раскрытая задача схлопывалась
   сама собой (класс .open оставался, а высота падала в 0). Ровно это и было
   видно: «отмечаю подзадачу, а задача закрывается» и «создаю задачу, а
   подзадачи обрезаются». В основном списке такая страховка есть с самого
   начала (.z2-row.open .z2-row-exp), здесь её просто не было. */
.z2-ftask.open .z2-ftask-exp{ max-height:none; opacity:1; padding:2px 0 11px 31px }
.z2-ftask.open .z2-row-caret{ transform:rotate(180deg) }
.z2-ftask .z2-row-caret{ transition:transform .22s ease }
.z2-ftask .z2-exp-subs{ gap:7px }

/* ---- 4. Две кнопки под списком задач папки --------------------------------
   Слева новая задача, справа — существующая, между ними тонкая чёрточка.
   Левая приглушена и мельче: раньше она была одна и тянула на себя внимание,
   а теперь делит строку со второй. */
/* Половины РАВНОЙ ширины (flex:1 1 0) — только так чёрточка встаёт ровно по
   центру карточки, а не «где придётся» между двумя надписями разной длины.
   Левая прижата к левому краю, правая — к правому. */
.z2-fadd-row{
  display:flex; align-items:center; gap:8px; margin-top:2px; padding-top:6px;
  border-top:1px solid var(--line-soft);
}
.z2-fadd-half{ flex:1 1 0; min-width:0; display:flex }
/* Правая подпись прижата К ЧЁРТОЧКЕ, а не к краю карточки: обе кнопки стоят
   вплотную к разделителю и читаются как одна пара, а не как два далёких края. */
.z2-fadd-right{ justify-content:flex-start }
/* Подписи намеренно мелкие и тихие: это служебные действия внизу карточки, а
   не то, на что смотрят в первую очередь. Обычный «+» вместо широкого «＋» —
   он тоньше и не утяжеляет строку. Высота строки задаётся здесь же, иначе
   глобальные стили кнопок вытянули бы её обратно. */
.z2-fadd-row .z2-add-inline{
  width:auto; flex:0 1 auto; min-width:0; padding:2px 0;
  font-size:7.5px; font-weight:500; line-height:1.2;
  color:var(--text-3); opacity:.5; letter-spacing:.03em;
  min-height:0; height:auto;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.z2-fadd-row .z2-add-inline:hover,
.z2-fadd-row .z2-add-inline:active{ color:var(--text-1); opacity:1 }
.z2-fadd-sep{
  flex:0 0 auto; width:1px; height:7px; background:var(--line-strong); opacity:.35;
}
.z2-fadd-ms{ position:static }
/* Список собирается в <body> (см. z2OpenAddDrop): только там position:fixed
   считается от настоящего окна, а не от сдвинутой ленты панелей #z2-track.
   Ширину и координаты ставит JS — здесь всё остальное. */
.z2-fadd-drop{
  position:fixed; left:0; top:0; right:auto; bottom:auto;
  z-index:1500; max-height:none; overflow:visible;
}
.z2-fadd-drop.open{ display:flex; flex-direction:column }

/* ⚠️ Кнопки свайпа — К ВЕРХУ строки, а не по её центру. У раскрытой задачи с
   подзадачами строка высокая, и .ssw-act (он растянут от top:0 до bottom:0 и
   центрирует содержимое) уводил правку с корзиной на середину этой высоты —
   далеко от названия, к которому они относятся. Прижимаем к верхнему краю и
   отбиваем так, чтобы кнопки встали на одну линию с заголовком задачи. */
.z2-ftrow > .ssw-act{ align-items:flex-start; padding-top:8px }
/* Название задачи забирает всю строку, приписка «откуда» жмётся вправо. */
.z2-fadd-opt{ cursor:pointer }
.z2-fadd-opt > span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.z2-fadd-opt{
  justify-content:space-between; width:100%; text-align:left;
  background:none !important; border:0 !important; box-shadow:none !important;
}
.z2-fadd-from{
  flex:0 0 auto; font-style:normal; font-size:10.5px; font-weight:650;
  color:var(--text-3); margin-left:8px; white-space:nowrap;
}

/* ══ v266: ПАПКА — СВАЙП КОРОЧЕ, ВТОРАЯ СТУПЕНЬ ВОЗВРАЩАЕТ, А НЕ УДАЛЯЕТ ════ */

/* Кнопки мельче, чем в списке задач: карточка папки уже, и на прежнем ходу
   строка уезжала почти на треть своей ширины. 2×30px + зазор + отступ ровно
   укладываются в 76px хода (data-openw у строки). */
.z2-ftrow .ssw-pin{ width:30px; height:30px }
.z2-ftrow .ssw-pin svg{ width:14px; height:14px }
.z2-ftrow > .ssw-act{ gap:6px; padding-right:6px }

/* ⚠️ Вторая ступень тут НЕ КРАСНАЯ: задача не удаляется, а вынимается из папки
   и остаётся жить в списке. Красный подтёк обещал бы удаление — заменяем его
   нейтральной подсветкой, а значок берём «выход из папки». */
.z2-ftrow.will-del > .ssw-act{
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.06) 45%, rgba(255,255,255,.14) 100%) !important;
}
.z2-ftrow .ssw-del-back{ color:var(--text-1) }

/* ══ ПЛАВНОСТЬ РАЗДЕЛА «ЗАДАЧИ» ═══════════════════════════════════════════
   Одна кривая на все раскрытия: задача, папка, задача внутри папки, секции
   списка. Прежние .26s с довольно резким входом читались дёргано — берём
   более пологую кривую и чуть больше времени. Значение то же, что у нижних
   шторок приложения, поэтому движение везде ощущается одинаковым. */
.z2-row-exp,
.z2-frow-exp,
.z2-ftask-exp,
.z2-group-body{
  transition:max-height .36s cubic-bezier(.32,.72,0,1),
             opacity .26s ease,
             padding .36s cubic-bezier(.32,.72,0,1),
             margin .36s cubic-bezier(.32,.72,0,1) !important;
}
/* Стрелки поворачиваются в такт раскрытию, а не быстрее его. */
.z2-row-caret,
.z2-fcaret{ transition:transform .36s cubic-bezier(.32,.72,0,1) !important }
/* Карточки списка: подсветка и тени переключаются мягче. */
.z2-row, .z2-fcard, .z2-day-row{ transition:background .22s ease, border-color .22s ease }