/* Чек-лист. Оболочка общая, здесь только то, что есть у списка.
 *
 * Колонки через CSS-columns, а не через grid: список должен читаться
 * сверху вниз, а потом переходить в соседнюю колонку. Сетка auto-fit
 * раскладывает слева направо и растаскивает группу «Утро» по колонкам.
 * break-inside не даёт разорвать строку пополам.
 */
/* Колонки включаются НЕ по ширине экрана, а по тому, влез ли список
 * в высоту. Короткий список читается одной колонкой на любом мониторе:
 * разложенные по четырём колонкам двенадцать пунктов читать неудобно,
 * и группы «Утро» и «Вечер» при этом разъезжаются. Класс multi ставит
 * скрипт, измерив реальную высоту. */
.checklist{
  columns:1;
  column-gap:28px;
}
@media (min-width:900px){ .checklist.multi{columns:2} }
@media (min-width:1400px){ .checklist.multi{columns:3} }
@media (min-width:1900px){ .checklist.multi{columns:4} }

.ci{
  break-inside:avoid; -webkit-column-break-inside:avoid;
  display:flex; align-items:flex-start; gap:10px;
  padding:7px 0; border-top:1px solid var(--line-soft);
  min-height:var(--tap);
}
.checklist .ci:first-child{border-top:0}

/* Заголовок это обычный пункт с флагом «без галочки». Не группа:
 * вложенности и отдельного редактора групп мы не заводим. */
.ci.head{
  border-top:1px solid var(--line); margin-top:10px; padding-top:12px;
  font-size:10.5px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-3); font-weight:600; min-height:0;
}
.checklist .ci.head:first-child{border-top:0;margin-top:0;padding-top:0}

.ci label{
  display:flex; align-items:flex-start; gap:10px; cursor:pointer;
  min-height:var(--tap); width:100%; padding:2px 0;
}
.ci input[type=checkbox]{
  appearance:none; flex:none; width:22px; height:22px; margin-top:1px;
  border:1.5px solid var(--line); border-radius:6px; background:var(--surface);
  cursor:pointer; position:relative;
}
.ci input[type=checkbox]:checked{background:var(--accent); border-color:var(--accent)}
.ci input[type=checkbox]:checked::after{
  content:""; position:absolute; left:7px; top:3px; width:5px; height:10px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
}
.ci input[type=checkbox]:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.ci .txt{font-size:13.5px; line-height:1.4; min-width:0; overflow-wrap:anywhere;}
.ci.done .txt{color:var(--ink-3); text-decoration:line-through;}

/* ---------- редактор ---------- */
.editor{
  position:fixed; inset:0; z-index:20; display:flex; align-items:flex-start;
  justify-content:center; padding:max(16px,env(safe-area-inset-top)) 12px 12px;
  background:rgba(15,23,32,.5); overflow-y:auto;
}
.editor-card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
  width:100%; max-width:34rem; margin-bottom:24px;
}
.erows{display:flex; flex-direction:column; gap:6px}
.erow{display:flex; gap:6px; align-items:center}
.erow input{flex:1; min-width:0}
.erow.head input{font-weight:600; text-transform:uppercase; font-size:12px; letter-spacing:.08em}
.erow button{min-width:var(--tap); padding:8px 10px; flex:none}
.eadd{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap}
.efoot{
  display:flex; gap:8px; justify-content:flex-end; padding:14px 16px;
  border-top:1px solid var(--line-soft); position:sticky; bottom:0;
  background:var(--surface); border-radius:0 0 var(--radius) var(--radius);
  padding-bottom:max(14px,env(safe-area-inset-bottom));
}