/* Mentask — оформление.
   Много воздуха, мягкие цвета, никаких рамок и разделителей между задачами. */

:root {
  /* Светлая тема */
  --bg:            #ffffff;
  --bg-sidebar:    #f4f5f7;
  --bg-hover:      #eceef1;
  --bg-selected:   #e0e3e7;
  --bg-block:      #f1f2f4;
  --bg-card:       #ffffff;   /* раскрытая карточка задачи */

  --text:          #1d1d1f;
  --text-muted:    #90949c;
  --text-faint:    #b4b8be;

  --line:          #e6e8ea;
  --check-border:  #c6cad0;

  /* Ползунок прокрутки — виден только пока листаешь */
  --scroll-thumb:       rgba(0,0,0,.26);
  --scroll-thumb-hover: rgba(0,0,0,.42);

  /* Кнопки под смахнутой строкой заметки */
  --pin-orange:    #f0a02a;
  --swipe-del:     #ff453a;

  --blue:          #3d8bfd;
  --drag-bg:       #4a80d6;   /* задача, которую тащат: приглушённее обычного синего */
  --yellow:        #f8d648;   /* жёлтый пометок «сегодня» */
  --pink:          #ff4f72;
  --important:     #ff453a;   /* важная задача: квадратик и кнопка «!» — красный, не розовый */
  --teal:          #23b8a0;
  --sand:          #c7b38b;
  --green:         #34c759;

  --radius:        6px;
  --sidebar-w:     232px;

  color-scheme: light dark;
}

/* Тёмная тема. Применяется либо по системной настройке, либо принудительно
   через data-theme — так работает выбор «Светлый / Тёмный / Автоматически» в настройках. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #222222;   /* основная область */
    --bg-sidebar:  #191919;   /* боковая панель — заметно темнее основной */
    --bg-hover:    #2b2b2b;
    --bg-selected: #3b3d40;
    --bg-block:    #2b2b2b;
    --bg-card:     #313131;   /* раскрытая карточка задачи */

    --text:        #e5e5e5;
    --text-muted:  #838383;
    --text-faint:  #626262;

    --line:        #2f2f2f;
    --check-border:#626262;

    --scroll-thumb:       rgba(255,255,255,.24);
    --scroll-thumb-hover: rgba(255,255,255,.40);

    --yellow:      #fbd85e;   /* в тёмной теме жёлтый светлее */
    --drag-bg:     #2f4c8c;   /* в тёмной теме синий приглушён сильнее */
  }
}

/* Тёмная тема — свой набор серых (вариант «Глубже панель», выбран 29.09).
   Боковая панель заметно темнее основной области. */
:root[data-theme="dark"] {
  --drag-bg: #2f4c8c;   /* в тёмной теме синий приглушён сильнее */
  --yellow:  #fbd85e;   /* в тёмной теме жёлтый светлее */
  --bg:      #222222;   /* основная область */
  --bg-sidebar:  #191919;   /* боковая панель — заметно темнее основной */
  --bg-hover:  #2b2b2b;
  --bg-selected: #3b3d40;
  --bg-block:  #2b2b2b;
  --bg-card:   #313131;   /* раскрытая карточка задачи */

  --text:    #e5e5e5;
  --text-muted:  #838383;
  --text-faint:  #626262;

  --line:    #2f2f2f;
  --check-border:#626262;

  --scroll-thumb:       rgba(255,255,255,.24);
  --scroll-thumb-hover: rgba(255,255,255,.40);
}

/* ============================================================
   Мраморные темы
   Фон — не картинка, а рисунок: слои камня сносит турбулентностью, поверх
   ложатся тонкие жилы. Поэтому он ничего не весит, не мылится на любом
   экране и перекрашивается одними переменными — на каждую новую тему нужен
   только набор цветов, а не новый файл.

   Камень живёт ТОЛЬКО в боковой панели. Во всю ширину окна он спорил со
   списком задач: строки в 14px приходилось спасать вуалью, а на широком окне
   текст всё равно выезжал на светлую жилу. Полосой слева он читается как
   отделка панели и списку не мешает вовсе.
   ============================================================ */

/* Слой камня — ровно по ширине панели, вместе с ней и меняется.
   Не прокручивается: обои, а не часть списка разделов. */
#marble {
  position: fixed; top: 0; left: 0;
  width: var(--sidebar-w); height: 100%;
  z-index: 0; pointer-events: none;
  display: none;
}
:root[data-marble] #marble { display: block; }

/* Приложение встаёт поверх камня: без своего слоя оно оказалось бы под
   фиксированным фоном */
:root[data-marble] #app { position: relative; z-index: 1; }

/* Панель полупрозрачна — сквозь неё и виден камень. Плотность заливки задаёт
   --m-veil: под ней названия разделов читаются как на обычном фоне. */
:root[data-marble] #sidebar {
  background: color-mix(in srgb, var(--m-veil-color, var(--bg-sidebar)) var(--m-veil, 60%), transparent);
  border-right-color: color-mix(in srgb, var(--line) 70%, transparent);
}

/* На телефоне левой панели нет вовсе: разделы всплывают листом в правом нижнем
   углу, и полоса камня у левого края экрана оказалась бы сама по себе */
@media (max-width: 760px) {
  :root[data-marble] #marble { display: none; }
  :root[data-marble] #sidebar { background: var(--bg-sidebar); }
}

/* Цвета камня внутри SVG: сам рисунок один на все мраморные темы */
#marble .m-base { fill: var(--m-base); }
#marble .m1 { fill: var(--m1); }
#marble .m2 { fill: var(--m2); }
#marble .m3 { fill: var(--m3); }
#marble .m4 { fill: var(--m4); }
#marble .m-blobs { opacity: var(--m-op, .8); filter: var(--m-filter, url(#m-swirl)); }
#marble .m-veins { opacity: var(--m-veins, .4); mix-blend-mode: var(--m-vein-blend, soft-light); }
#marble .vein-color { flood-color: var(--m-vein-color, #fff); }

/* Кислота — палитра снята с фотографии зажигалки по чистым точкам:
   лайм колпачка #bcdc37, маджента корпуса #db2b65, кислотный жёлтый
   разводов #e8df14.

   Поле розовое, как у самой зажигалки, лайм и жёлтый идут разводами поверх.
   Одна вольность намеренная: текст на панели тёмный, а на исходной мадженте
   #db2b65 он даёт 3.2:1 — читать нельзя. Поэтому розовый осветлён до #ff5b98
   (тот же тон 340°, но 5.1:1 даже в самой тёмной точке).

   Единственная тема, где панель светлая, а список тёмный: под тёмной вуалью
   кислота уходит в хаки и от зажигалки не остаётся ничего. Раз панель яркая,
   тёмных пятен в камне быть не должно — иначе надпись в них пропадёт. */
:root[data-theme="acid"] {
  /* Расклад по слоям не случаен: крупные полосы камня — это m1 и m4, средняя —
     m3, тонкие — m2. Розовое стоит на поле и на обеих крупных полосах, лайм на
     тонкой, жёлтый на средней: перевес розового к зелёному выбран из пяти
     снятых раскладов (варианты-кислота/варианты.png). */
  --m-base: #ff5b98; --m1: #ff86b8; --m2: #9ed419; --m3: #ecec3a; --m4: #ff77ae;
  --m-op: 1; --m-veins: .38; --m-veil: 13%;
  --m-veil-color: #ffffff;
  --m-filter: url(#m-swirl-sharp);
  /* Жилы розовые и кладутся как есть: «экраном» они на светлом поле выцвели бы */
  --m-vein-color: #ff2e7a; --m-vein-blend: normal;

  --bg: #0e090c;
  --bg-sidebar: #0a0609;
  --bg-hover: rgba(255,255,255,.07);
  --bg-selected: rgba(255,255,255,.14);
  --bg-block: rgba(255,255,255,.06);
  --bg-card: rgba(28,18,25,.92);

  --text: #f2ecef;
  --text-muted: #99848e;
  --text-faint: #6d5c65;

  --line: rgba(255,255,255,.11);
  --check-border: #6d5c65;

  --scroll-thumb: rgba(255,255,255,.24);
  --scroll-thumb-hover: rgba(255,255,255,.40);

  --blue: #ff2e7a;
  --drag-bg: #a81f52;
}

/* Панель светлая — значит и текст в ней тёмный, отдельно от остального
   приложения. Ниже только те правила, что перекрашивают панель; список
   задач остаётся тёмным и живёт на общих переменных.

   Строго для компьютера: на телефоне левой панели нет, разделы всплывают
   тёмным листом — и тёмный текст на нём пропал бы целиком. */
@media (min-width: 761px) {
  :root[data-theme="acid"] #sidebar { color: #240711; border-right-color: rgba(0,0,0,.22); }
  :root[data-theme="acid"] #sidebar .nav-item .ico { color: rgba(36,7,17,.6); }
  :root[data-theme="acid"] #sidebar .nav-item.active .ico,
  :root[data-theme="acid"] #sidebar .nav-item:hover .ico { color: #7d0733; }
  :root[data-theme="acid"] #sidebar .nav-item .count { color: rgba(36,7,17,.5); }
  :root[data-theme="acid"] #sidebar .nav-item:hover { background: rgba(0,0,0,.10); }
  :root[data-theme="acid"] #sidebar .nav-item.active { background: rgba(255,255,255,.42); }
  :root[data-theme="acid"] #sidebar .nav-item.nav-add,
  :root[data-theme="acid"] #sidebar .nav-item.nav-add .ico,
  :root[data-theme="acid"] #sidebar-foot button { color: rgba(36,7,17,.45); }
  :root[data-theme="acid"] #sidebar-foot button:hover { background: rgba(0,0,0,.10); color: #240711; }
}

/* Оникс — чёрный камень с белой жилой. Единственный яркий цвет — красный
   акцент: на таком фоне синий из тёмной темы уходил в серость. */
:root[data-theme="onyx"] {
  --m-base: #0d0d0f; --m1: #26262d; --m2: #3a3a44; --m3: #131317; --m4: #a3a3ad;
  --m-op: .66; --m-veins: .4; --m-veil: 52%;
  --m-vein-color: #ffffff; --m-vein-blend: screen;

  --bg: #0d0d0f;
  --bg-sidebar: #09090b;
  --bg-hover: rgba(255,255,255,.07);
  --bg-selected: rgba(255,255,255,.14);
  --bg-block: rgba(255,255,255,.06);
  --bg-card: rgba(26,26,30,.92);

  --text: #ececf0;
  --text-muted: #8b8b95;
  --text-faint: #616169;

  --line: rgba(255,255,255,.11);
  --check-border: #616169;

  --scroll-thumb: rgba(255,255,255,.24);
  --scroll-thumb-hover: rgba(255,255,255,.40);

  --blue: #ff375f;
  --drag-bg: #b02642;
}

/* Размер текста — множитель из настроек (Мелкий / Средний / Крупный) */
:root { --fs: 1; }

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

/* Смахивание вбок внутри приложения должно доставаться приложению, а не
   браузеру: иначе жест по строке уводил «назад» по истории, и строку было
   не смахнуть. overscroll-behavior-x отключает и это, и «оттяг» вбок. */
html, body { overscroll-behavior-x: none; }

/* Оформление пришло: показать страницу и убрать надпись-страховку из index.html */
body { visibility: visible; }
#нет-стилей { display: none; }

body {
  font: 400 14px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  color: var(--text);
  background: var(--bg);
  /* Сглаживание намеренно НЕ «antialiased». Замер по снимку, где мы стоим
     рядом с образцом (снимок ретины): слово «Планы» у обоих одной ширины —
     91 и 92 px, то есть шрифт и кегль совпадают, — но «чернил» в буквах у
     образца на 29% больше, а штрих вдвое толще (2 px против 4). Разница вся
     в сглаживании: `antialiased` подсушивает штрихи, и на тёмном фоне наш
     текст выглядел тоньше и бледнее соседа. Обычное сглаживание даёт +26%
     массы при той же ширине слова — ровно та разница, что была замерена. */
  overflow: hidden;
  /* Ширина на телефоне постоянная: браузер не укрупняет шрифт при повороте
     и двойное касание не приближает страницу. Щипок гасится в app.js. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  touch-action: manipulation;
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea { font: inherit; color: inherit; background: none; border: 0; outline: none; }

/* ---------- Каркас ---------- */

#app { display: flex; height: 100%; }

/* ---------- Боковая панель ---------- */

#sidebar {
  width: var(--sidebar-w);
  flex: none;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  /* Первая строка панели встаёт вровень с заголовком раздела: «Сегодня» слева
     и «Сегодня» справа читаются одной строкой, а не двумя ступеньками.
     Считается так: у содержимого отступ сверху 46px, заголовок выше строки
     панели на 13.4px — половину этой разницы и добавляем сверху.
     На телефоне панель всплывает листом снизу и задаёт себе свой отступ. */
  padding: 52.7px 0 0;
  overflow-y: auto;
  /* Вбок панель не прокручивается никогда — и не должна даже пытаться.
     Строка под курсором подрастает и вылезает за правый край: браузер считал
     это переполнением и поднимал горизонтальную полосу. Полоса съедала 9px
     высоты, подвал с «+ Проект» подпрыгивал, а стоило увести курсор — полоса
     пропадала и он падал обратно. Это и было дёрганье всей панели. */
  overflow-x: hidden;
  user-select: none;
}

.nav-group { padding: 0 10px; }
/* Разрыв между группами: 16px сверх обычного шага */
.nav-group + .nav-group { margin-top: 16px; }

/* Строки панели крупнее и просторнее: раньше они выглядели мелкой служебной надписью рядом с самими задачами. */
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  /* Шаг строки 24px, раньше было 32. Разница вся в отступе и
     кегле: 2px по вертикали и 14px шрифта дают ровно 24. Кегль заодно
     сравнялся с текстом задач: панель и список одного размера. Значок 19px в эти 24 укладывается. */
  padding: 2px 8px;
  border-radius: var(--radius);
  font-size: calc(14px * var(--fs));
  text-align: left;
  transition: background .09s;
}
.nav-item:hover { background: var(--bg-hover); }
.nav-item.active { background: var(--bg-selected); font-weight: 500; }
/* На телефоне «наведение» залипает на пункте, которого коснулись последним:
   подсвеченными оказывались два раздела сразу — текущий и, например, «Корзина».
   Выделен должен быть только тот, где ты сейчас (Илья 27.09.2026). */
@media (hover: none) {
  .nav-item:hover { background: none; }
  .nav-item.active:hover { background: var(--bg-selected); }
  #sidebar .nav-item:not(.active):hover .ico { color: var(--text-muted); }
}

.nav-item .ico { width: 19px; height: 19px; flex: none; }
/* Цвет значков живёт здесь, а не внутри самих рисунков (там currentColor).
   В панели они приглушены, и только у раздела, в котором ты сейчас, значок
   синий: цвет отмечает МЕСТО, а не «что это за раздел». Раньше цвет был зашит
   в каждый рисунок и панель пестрела восемью цветами разом. */
#sidebar .nav-item .ico { color: var(--text-muted); }
#sidebar .nav-item.active .ico,
#sidebar .nav-item:hover .ico { color: var(--blue); }
/* Заголовок раздела — тем же синим: ты внутри этого раздела */
.page-head .ico { color: var(--blue); }
/* Значок и название подрастают под курсором — как иконки в доке на маке.
   Растут только они, не вся строка: соседи не едут, потому что transform места
   не занимает.

   Здесь нет ни :hover, ни transition, и это главное. Размер каждой строки
   считает код на каждом кадре — по расстоянию от неё до курсора (ДОК в app.js).
   Правило по наведению меняло бы размер скачком на границе строк, а никакая
   длительность перехода скачок не убирает, только размазывает. Пальцу
   увеличение ни к чему: код включает его только там, где есть наведение. */
/* Название растёт от левого края: иначе оно наползало бы на значок, а так
   просто отодвигается вправо, к числу. Значок растёт из середины. */
.nav-item .label { transform-origin: left center; }
/* Пока курсор в панели, значки и названия едут на своём слое видеокарты. Без
   этого браузер перерисовывает текст заново на КАЖДОМ кадре роста — буквы
   пересчитываются по-новому, и движение выходит ступеньками. Класс снимается,
   когда курсор ушёл и всё замерло: постоянно держать слои незачем. */
#sidebar.док .nav-item .ico,
#sidebar.док .nav-item .label { will-change: transform; }
:root[data-motion="less"] .nav-item .ico,
:root[data-motion="less"] .nav-item .label { transform: none !important; }
.nav-item .label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item .count {
  font-size: calc(13.5px * var(--fs)); color: var(--text-muted); font-variant-numeric: tabular-nums;
  /* Гаснет, а не пропадает: при быстром проходе по списку мигание чисел
     читалось бы тем же дёрганьем, что и скачок размера */
  transition: opacity .12s;
}

/* Область — заголовок группы проектов */
.nav-item.project { padding-left: 8px; position: relative; }

/* Кнопка «фокус»: в «Сегодня» остаётся только этот список. Обычно не видна —
   появляется при наведении на строку и стоит на месте счётчика, чтобы строка
   не дёргалась. Включённый фокус виден всегда. */
/* z-index обязателен. Название строки под курсором увеличивается (эффект Дока)
   и растёт вправо от своего левого края, а из-за will-change оно лежит на
   отдельном слое — то есть НАД обычным содержимым строки. Разросшееся название
   накрывало кнопку, нажатие уходило в строку, и вместо фокуса просто
   открывался список. Раньше от этого спасало число справа: оно держало место,
   и названию было куда расти. Число у списков сняли — спасать стало нечему. */
.focus-btn {
  display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 6px; flex: none;
  color: var(--text-faint); cursor: pointer;
  position: relative; z-index: 1;
  opacity: 0; transition: opacity .1s, color .1s, background .1s;
}
.focus-btn svg { width: 14px; height: 14px; }
.nav-item.project:hover .focus-btn { opacity: 1; }
/* Число под курсором прячется, но место своё держит: с display:none строка
   перестраивалась (у названия разом прибавлялось 47px ширины), и вместе с
   увеличением текста это читалось как рывок */
.nav-item.project:hover .count { visibility: hidden; opacity: 0; }
.focus-btn:hover { background: var(--bg-selected); color: var(--text); }
.nav-item.project.focused .focus-btn { opacity: 1; color: var(--text-muted); }
.nav-item.project.focused .count { display: none; }

/* На телефоне наведения не бывает, а прозрачная кнопка всё равно ловит
   нажатия: палец попадал в правый край строки — и «Сегодня» молча оставался
   с одним списком, без всякого объяснения. Поэтому здесь она видна всегда,
   приглушённой, и стоит рядом со счётчиком, а не вместо него. */
@media (max-width: 760px) {
  .focus-btn { opacity: .4; }
  .nav-item.project .count { display: inline; }
  .nav-item.project.focused .focus-btn { opacity: 1; color: var(--blue); }
}

/* Список, который переносят: за курсором едет двойник строки, на её месте
   остаётся невидимая щель — как у задач. Двойник серый, а не синий: список
   не выделяют, его просто переносят. */
/* Селектор с двумя классами — иначе position: relative у строки списка
   (он держит кнопку фокуса) перебил бы fixed, и двойник остался бы в потоке */
.nav-item.nav-proxy {
  position: fixed; z-index: 60;
  margin: 0; pointer-events: none;
  cursor: grabbing;
  background: var(--bg-selected); color: var(--text);
  border-radius: var(--radius);
  box-shadow: 0 10px 28px rgba(0,0,0,.22), 0 2px 6px rgba(0,0,0,.14);
}
.nav-item.nav-proxy .focus-btn { display: none; }

/* Щель: строка держит место, но её не видно */
.nav-item.drag-source { visibility: hidden; }
body.is-dragging .nav-item:hover { background: none; }
body.is-dragging #nav-projects .nav-item { touch-action: none; }



/* «+» идёт вплотную под списками, с тем же шагом, что между ними самими:
   это продолжение того же перечня, а не отдельная группа. Разрыв в 16px,
   которым разделены разделы и списки, здесь был бы неправдой. */
.nav-group + .nav-group.nav-group-add { margin-top: 0; }

/* Строка с полем: имя нового списка пишется прямо здесь, без окна поверх экрана */
.nav-item.черновик { cursor: text; }
.nav-item.черновик input.label {
  font: inherit; font-size: inherit; color: var(--text);
  background: none; border: 0; padding: 0; min-width: 0;
}
.nav-item.черновик input.label::placeholder { color: var(--text-faint); }
/* Пока имя набирают, «+» прячется: он бы предлагал завести ещё один поверх */
#sidebar.черновик-списка .nav-add { display: none; }
/* Сама строка без подписи: «+» стоит ровно под значками списков, и понятно,
   что он добавляет ещё один такой же */
/* Высота как у строки списка: та считается по кнопке фокуса (22px) с отступами,
   а здесь подписи нет, и без этой строки ряд был бы на 3px ниже соседних */
.nav-item.nav-add { color: var(--text-faint); min-height: 26px; transition: opacity .12s; }
/* В покое «+» не виден: заводят список редко, а место в панели он занимает
   всегда. Своё место при этом держит — появляется ровно там, где и был, без
   сдвига списков. Прозрачная строка курсор ловит по-прежнему, поэтому навести
   на неё можно и вслепую. Пальцем наведения не бывает, там он виден всегда. */
@media (hover: hover) {
  .nav-item.nav-add { opacity: 0; }
  .nav-item.nav-add:hover, .nav-item.nav-add:focus-visible { opacity: 1; }
}
#sidebar .nav-item.nav-add .ico { color: var(--text-faint); }
#sidebar .nav-item.nav-add:hover .ico { color: var(--blue); }

#sidebar-foot {
  margin-top: auto;
  padding: 8px 12px;
  display: flex; align-items: center; gap: 8px;
}
#sidebar-foot button {
  font-size: 13px; color: var(--text-muted);
  padding: 5px 6px; border-radius: 6px;
  display: grid; place-items: center;
}
#sidebar-foot button:hover { background: var(--bg-hover); color: var(--text); }


/* ---------- Полосы прокрутки ----------
   Появляются только пока листаешь и через секунду гаснут — как в «Заметках»
   на маке. Постоянная серая полоса у каждого столбца зря забирает внимание,
   особенно когда в системных настройках стоит «показывать всегда».
   Правило общее для всех областей: ползунок прозрачен, а на время прокрутки
   скрипт вешает на прокручиваемый элемент класс .is-scrolling (см. app.js). */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: content-box;
  transition: background-color .4s ease;
}
.is-scrolling::-webkit-scrollbar-thumb { background-color: var(--scroll-thumb); }
/* Пока курсор над областью, ползунок держится ярче: значит, за него можно взяться */
.is-scrolling:hover::-webkit-scrollbar-thumb { background-color: var(--scroll-thumb-hover); }

/* Место под полоску занято всегда — меняется только цвет ползунка. Иначе при
   каждом появлении полосы содержимое дёргалось бы вбок на её ширину.
   Правило про scrollbar-width — только для Firefox: в Chrome и Safari оно
   отменяет всё оформление выше и как раз возвращает то самое дёрганье
   (none — полосы нет и места нет, thin — есть и то и другое). */
@supports (-moz-appearance: none) {
  * { scrollbar-width: thin; scrollbar-color: transparent transparent; }
  .is-scrolling { scrollbar-color: var(--scroll-thumb) transparent; }
}

/* ---------- Основная область ---------- */

/* overflow-x: hidden — страховка от съезжающего вбок экрана. Стоит одному
   блоку случайно оказаться шире окна (так уже было с шапкой календаря на
   телефоне), и всё приложение начинает ездить влево-вправо. */
/* Место под полосу прокрутки держим всегда. Иначе раскрытая карточка удлиняла
   короткий список, полоса появлялась и сужала все строки на 9px — текст
   соседних задач перескакивал (Илья 28.09.2026) */
#main { flex: 1; overflow-y: auto; overflow-x: hidden; position: relative; scrollbar-gutter: stable; }
/* Safari место под полосу прокрутки не держит, хотя scrollbar-gutter знает:
   открыли задачу — список стал выше экрана, появилась полоса и съела 9 px.
   Соседние названия переносились по-другому и прыгали (Илья 02.10.2026).
   Поэтому полоса стоит всегда; с полосами «при прокрутке» её не видно вовсе */
#main { overflow-y: scroll; }
/* Содержимое занимает всю ширину окна — без «колонки» посередине.
   Отступ сверху подобран так, чтобы заголовок раздела встал ровно на одной
   линии с этим же разделом в боковой панели. */
#content { padding: 46px 46px 140px; }

.page-head { display: flex; align-items: center; gap: 11px; margin-bottom: 22px; }
.page-head .ico { width: 28px; height: 28px; flex: none; }
.page-head h1 { font-size: calc(26px * var(--fs)); font-weight: 700; letter-spacing: -.02em; }
.page-head .sub { font-size: calc(13px * var(--fs)); color: var(--text-muted); margin-top: 2px; }

/* Название списка правится прямо в шапке. Поле выглядит ровно как заголовок:
   ни рамки, ни подложки, пока на него не навели. Так оно не кричит «форма»,
   но под курсором видно, что сюда можно писать. Растягиваем на всю свободную
   ширину только на странице списка — у остальных разделов ряд шапки прежний,
   иначе переключатель вида в «Планах» уехал бы к правому краю. */
.head-text.edit { flex: 1; min-width: 0; }
.head-title {
  width: 100%;
  font-size: calc(26px * var(--fs)); font-weight: 700; letter-spacing: -.02em;
  color: var(--text);
  padding: 1px 6px; margin-left: -6px;
  border-radius: 7px;
  transition: background .1s;
}
.head-title:hover { background: var(--bg-hover); }
.head-title:focus { background: var(--bg-selected); }
/* Поле по ширине текста, а не во всю строку: подложка под курсором должна
   облегать название, иначе через всю шапку тянется пустая полоса. Где
   field-sizing не поддерживают, остаётся запасной вариант выше — поле во всю
   ширину: длинное название важнее аккуратной подложки. */
@supports (field-sizing: content) {
  .head-title { field-sizing: content; width: auto; max-width: 100%; min-width: 3ch; }
}

/* «⋯» у названия проекта — действия с самим проектом */
.head-menu-wrap { position: relative; margin-left: auto; flex: none; }
.head-menu {
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 7px;
  color: var(--text-faint);
  transition: background .1s, color .1s;
}
.head-menu:hover { background: var(--bg-hover); color: var(--text-muted); }

.head-pop {
  position: absolute; top: 34px; right: 0; z-index: 30;
  min-width: 172px; padding: 4px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 9px;
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
}
.head-pop button {
  display: block; width: 100%;
  padding: 7px 10px; border-radius: 6px;
  font-size: calc(13px * var(--fs)); text-align: left;
  color: var(--pink);
}
.head-pop button:hover { background: color-mix(in srgb, var(--pink) 14%, transparent); }
/* Подпись и ряд цветов в меню списка. Кнопки цвета не наследуют вид пунктов
   меню: те красные и во всю ширину, а эти — кружки в ряд */
.pop-cap {
  padding: 6px 10px 2px; font-size: calc(11.5px * var(--fs));
  color: var(--text-muted); letter-spacing: .01em;
}
.color-row { display: flex; gap: 6px; padding: 4px 10px 8px; }
.head-pop .color-row button {
  width: 18px; height: 18px; padding: 0; border-radius: 50%;
  background: var(--dot); border: 1px solid rgba(0,0,0,.14);
}
.head-pop .color-row button.none {
  background: transparent; border: 1.2px dashed var(--line-strong);
}
.head-pop .color-row button:hover { transform: scale(1.14); }
/* Выбранный цвет — кольцом вокруг кружка, а не галочкой внутри: галочка
   в 18 точках сливается с самим цветом */
.head-pop .color-row button.on {
  box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 3.4px var(--text);
}

/* Слой для меню по правой кнопке. Лежит поверх страницы и вне списка: внутри
   он пропадал бы при каждой перерисовке, а у «Заметок» своя отрисовка. */
#ctx-host { position: fixed; inset: 0; z-index: 70; pointer-events: none; }
#ctx-host:empty { display: none; }
#ctx-host .ctx-menu { pointer-events: auto; }

/* Меню по правой кнопке на задаче. Стоит там, где нажали, поэтому position:
   fixed и координаты из самого события — прокрутка списка его закрывает. */
.ctx-menu {
  position: fixed; z-index: 70;
  min-width: 194px; padding: 5px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 14px 38px rgba(0,0,0,.28);
  animation: pop-in .11s ease;
}
.ctx-menu button {
  display: block; width: 100%;
  padding: 7px 10px; border-radius: 6px;
  font-size: calc(13px * var(--fs)); text-align: left;
  color: var(--text);
  white-space: nowrap;
}
.ctx-menu button:hover { background: var(--blue); color: #fff; }
.ctx-menu button.danger { color: var(--pink); }
.ctx-menu button.danger:hover { background: var(--pink); color: #fff; }
.ctx-sep { height: 1px; margin: 5px 8px; background: var(--line); }
/* Ползунок в настройках: значение стоит рядом и меняется на ходу */
.set-range { display: flex; align-items: center; gap: 10px; flex: none; }
.set-range input[type=range] { width: 148px; accent-color: var(--blue); }
.set-range-val {
  min-width: 40px; text-align: right;
  font-size: calc(12.5px * var(--fs)); color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.ctx-menu button[disabled] { color: var(--text-faint); cursor: default; }
.ctx-menu button[disabled]:hover { background: none; color: var(--text-faint); }

/* Меню буфера в «Заметках» — по образцу ClipMenu: сверху последние
   скопированные куски под номерами, ниже сохранённые заготовки */
.clip-menu { min-width: 268px; max-width: 340px; }
.ctx-title {
  padding: 6px 10px 3px;
  font-size: calc(11px * var(--fs)); font-weight: 600; letter-spacing: .04em;
  color: var(--text-faint); text-transform: uppercase;
}
.ctx-empty {
  padding: 3px 10px 6px;
  font-size: calc(12px * var(--fs)); color: var(--text-faint);
  white-space: normal; line-height: 1.35;
}
/* Номер строки — как в ClipMenu: по нему видно, насколько давно скопировано */
.clip-num {
  display: inline-block; min-width: 15px; margin-right: 7px;
  color: var(--text-faint); font-variant-numeric: tabular-nums;
}
.clip-menu button:hover .clip-num { color: rgba(255,255,255,.75); }
/* Заготовка: сама строка и крестик рядом */
.clip-row { display: flex; align-items: center; gap: 2px; }
.clip-row button:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.clip-del {
  width: 24px; flex: none; padding: 7px 0 !important;
  text-align: center !important; color: var(--text-faint);
}

/* Заголовок раздела внутри списка (например «Выполнено») */
/* Линия идёт под всей строкой заголовка на всю ширину,
   а не обрывком сбоку от текста */
.section {
  display: flex; align-items: center; gap: 8px;
  margin: 26px 0 8px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line);
  font-size: calc(14px * var(--fs)); font-weight: 600;
}

/* Ручка ширины панели. Своя полоса, а не край самой панели: у панели
   прокрутка, и попасть курсором в её границу мешала бы полоса прокрутки.
   В покое невидима — видно только курсор «растянуть»; под курсором
   проступает тонкая линия, чтобы было ясно, за что тянешь. */
#sidebar-grip {
  position: fixed; top: 0; bottom: 0;
  left: calc(var(--sidebar-w) - 3px); width: 7px;
  z-index: 25; cursor: col-resize;
}
#sidebar-grip::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 3px; width: 1px;
  background: var(--blue); opacity: 0;
  transition: opacity .12s;
}
#sidebar-grip:hover::after, body.тянем-панель #sidebar-grip::after { opacity: .85; }
/* Пока тянут — курсор «растянуть» на всём экране, и ничего не выделяется */
body.тянем-панель { cursor: col-resize; user-select: none; }
/* На телефоне левой панели нет — разделы всплывают листом, тянуть нечего */
@media (max-width: 760px) { #sidebar-grip { display: none; } }

/* ---------- Строка задачи ---------- */

/* Пропуск отрисовки строк за краем экрана (content-visibility) здесь не
   годится, хотя и ускорял перерисовку вдвое: строка в две строчки текста
   заявляет неверную высоту — экран прыгает при прокрутке, — а смахивание
   влево обрезается по краю строки, и красная кнопка не видна. Проверено
   23.09.2026, поймано проверками test-devices. */

.task {
  display: flex; align-items: flex-start; gap: 10px;
  /* Шаг строки 28px.
     4px по вертикали при межстрочном 20.3 дают ровно столько.
     На телефоне отступ больше (ниже), там им попадают пальцем. */
  padding: 4px 10px;
  margin: 0 -10px;
  border-radius: var(--radius);
  cursor: default;
}
@media (hover: hover) {
  .task:hover { background: var(--bg-hover); }
}

/* Заголовок «Позже» — ещё и переключатель: по нажатию группа сворачивается */
.later-head { cursor: pointer; user-select: none; }
.later-head:hover { color: var(--text-muted); }
.sec-arrow { font-size: calc(12px * var(--fs)); color: var(--text-faint); margin-left: -2px; }
.sec-count {
  margin-left: 2px;
  font-size: calc(12.5px * var(--fs)); font-weight: 500; color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

/* Обёртка группы «Позже»: сетка в одну строку, которая умеет схлопываться.
   Анимируется grid-template-rows (1fr → 0fr), а не высота — так браузер не
   пересчитывает раскладку всей страницы на каждом кадре. */
/* Столбец — minmax(0, 1fr), а не «по содержимому»: иначе ячейка сетки не
   сжимается уже самого длинного неразрывного куска (ссылки в заметке), и
   раскрытая задача в «Позже» на телефоне уезжала за правый край экрана —
   с крупным шрифтом на 8 точек (снимок Ильи 24.09.2026, iPhone 17e) */
.later-body { display: grid; grid-template-rows: 1fr; grid-template-columns: minmax(0, 1fr); }
.later-inner { min-height: 0; min-width: 0; }
/* Обрезка нужна ТОЛЬКО пока группа едет: иначе задачи вылезали бы из
   схлопывающейся сетки. В покое её быть не должно — раскрытая карточка
   выходит за строку списка отрицательными полями, и обрезка съедала ей
   скругления по бокам вместе с тенью. */
.later-body.едет .later-inner { overflow: hidden; }

/* Отложенное на вечер приглушено — но чуть-чуть: список остаётся читаемым,
   просто дневные дела цепляют глаз первыми */
.task.later .task-title { color: color-mix(in srgb, var(--text) 46%, var(--bg)); }
.task.later .marks { color: var(--text-faint); }
.task.later.selected .task-title { color: #fff; }

/* Двойной щелчок раскрывает карточку — выделять им текст в строке не нужно.
   В самой карточке текст, наоборот, выделяется как обычно: его читают и копируют. */
.task:not(.open) { user-select: none; -webkit-user-select: none; }

/* Выделенная задача — тем же приглушённым синим, что и при перетаскивании:
   один щелчок выделяет, второй раскрывает карточку */
.task.selected:not(.open) { background: var(--drag-bg); color: #fff; }
@media (hover: hover) {
  .task.selected:not(.open):hover { background: var(--drag-bg); }
}
.task.selected:not(.open) .task-sub,
.task.selected:not(.open) .task-sub .chip,
.task.selected:not(.open) .marks { color: rgba(255,255,255,.78); }
/* Квадратик выделенной задачи выглядит так же, как у обычной: выделение
   красит строку, а не квадратик (Илья 28.09.2026) */
.task.selected:not(.open).done .task-title { color: rgba(255,255,255,.6); }
/* Раскрытая задача — отдельная белая карточка с крупным скруглением и мягкой тенью.
   Заметный подъём над списком, много воздуха внутри. */
.task.open {
  background: var(--bg-card);
  cursor: default;
  border-radius: 14px;
  padding: 17px 20px 14px;
  margin: 20px -20px;
  box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 10px 34px rgba(0,0,0,.11);
  position: relative; z-index: 2;
}
.task.open:hover { background: var(--bg-card); }

/* Календарь «Когда» открывается вверх и живёт ВНУТРИ карточки, а у карточки
   свой слой (z-index: 2). Липкая дата дня в «Планах» лежит выше (z-index: 3) —
   и накрывала собой верхнюю половину календаря: дни видно, а нажать нельзя,
   попадаешь в дату. Пока календарь открыт, поднимаем карточку над датой.
   Именно пока открыт: иначе раскрытая задача при прокрутке ехала бы поверх
   даты, а она должна уходить под неё. */
.task.open:has(.when-pop) { z-index: 6; }

/* Название в карточке крупнее, чем в списке — так в оригинале */
.task.open .task-title { font-size: calc(16.5px * var(--fs)); }

/* Чекбокс — скруглённый квадрат (не круг) */
/* Радиус скругления 14.4% стороны, обводка 7.4%.
   Раньше здесь было 5px — вдвое круглее, чем надо. */
/* Размер привязан к тексту: квадратик ростом со строчную букву, не выше.
   Раньше он был крупнее всей строки (17 px против 14.5) и перетягивал внимание.
   Зона нажатия при этом осталась прежней — её расширяет невидимая рамка ниже. */
/* 16.09.2026: сторона 11 → 12.1 px, на десятую часть крупнее. Проверено на
   вариантах: 11 читалось мелковато, 20% уже перетягивают внимание на себя.
   Обводка и галочка внутри растут вместе со стороной — иначе крупный квадратик
   выглядит рыхлым. */
.check {
  position: relative;
  width: calc(12.1px * var(--fs)); height: calc(12.1px * var(--fs));
  flex: none;
  /* Стоит по центру первой строки названия: (высота строки 14.5×1.35 − сторона)/2.
     Отступ множится на размер текста вместе со стороной, иначе при «Крупном»
     квадратик съезжает вверх от середины строки. */
  margin-top: calc((14.5px * 1.35 - 12.1px) * var(--fs) / 2);
  border: 1.32px solid var(--check-color, var(--check-border));
  border-radius: calc(3px * var(--fs));
  background: var(--bg);
  display: grid; place-items: center;
  transition: background .13s, border-color .13s;
}
/* Пальцем и мышью нужно попадать по-прежнему легко, поэтому нажимаемая
   область больше самого квадратика — но её не видно */
.check::after {
  content: ''; position: absolute; inset: -6px;
}
.check:hover { border-color: var(--blue); }
/* Под курсором у квадратика меняется только цвет контура — толще и ярче,
   без заливки и без галочки внутри (Илья 28.09.2026) */
@media (hover: hover) {
  .check:not(.checked):hover {
    border-color: var(--check-color, var(--blue));
    box-shadow: 0 0 0 1px var(--check-color, var(--blue));
  }
  /* Под курсором квадратик подрастает на 20%, как значки в меню. Кривая без
     перелёта и та же быстрота, что у пружины меню: приходит к размеру за
     ~0,25 с и не подрагивает (Илья 03.10.2026). Место transform не занимает,
     поэтому название рядом не сдвигается. */
  .check { transition: background .13s, border-color .13s, transform .24s cubic-bezier(.2, .8, .3, 1); }
  .check:hover { transform: scale(1.2); }
  :root[data-motion="less"] .check:hover { transform: none; }
}

/* Штамп: нажатый квадратик коротко вдавливается и отпружинивает, галочка
   выскакивает на отскоке. Класс ставится только той галочке, которую сейчас
   нажали (см. штампРазметка в app.js), иначе в Архиве запрыгал бы весь список.
   Отрицательная задержка в --штамп вставляет анимацию с того места, на котором
   её застала пересборка списка, — иначе она начиналась бы заново. */
.check.штамп { animation: штамп .34s cubic-bezier(.34, 1.5, .64, 1) var(--штамп, 0ms); }
.check.штамп svg { animation: штамп-галка .3s cubic-bezier(.34, 1.5, .64, 1) calc(var(--штамп, 0ms) + 70ms) both; }
@keyframes штамп {
  0%   { transform: scale(1); }
  28%  { transform: scale(.78); }
  100% { transform: scale(1); }
}
@keyframes штамп-галка {
  from { opacity: 0; transform: scale(.35); }
  to   { opacity: 1; transform: scale(1); }
}
/* Просят меньше движения — квадратик не прыгает, галочка просто появляется */
:root[data-motion="less"] .check.штамп,
:root[data-motion="less"] .check.штамп svg { animation: none; }
/* Выполнено — без заливки: рамка и галочка цвета списка */
.check.checked { border-color: var(--check-color, var(--blue)); color: var(--check-color, var(--blue)); }
/* На синей выделенной строке цветная галочка теряется — там она белая */
.task.selected:not(.open) > .check.checked { border-color: #fff; color: #fff; }
.check svg { width: calc(9.5px * var(--fs)); height: calc(9.5px * var(--fs)); opacity: 0; position: relative; z-index: 1; }
.check.checked svg { opacity: 1; }

/* ---------- Важная задача ----------
   04.09.2026 важность переехала с квадратика на флажок за текстом: цветом
   квадратика распоряжается список. 16.09.2026 по просьбе Ильи вернулась на
   квадратик — красный, с восклицательным знаком внутри. Со списком теперь
   не спутать: у красного списка квадратик пустой, у важной задачи — со знаком.
   Прямой потомок строки: квадратики пунктов чек-листа внутри карточки
   важность задачи не наследуют. */
.task.important > .check { --check-color: var(--important); }
/* Знак «!» — маской на слое, который во всю внутреннюю часть квадратика, а не
   отдельной картинкой внутри. Отдельную картинку браузер ставит с долями точки,
   а рамку прижимает к целым точкам экрана, и знак гулял на точку вправо-влево
   и вверх-вниз — смотря где строка на экране (замер 16.09.2026: до ±1 точки в
   Chrome, до 0.7 на обычном мониторе в Safari). Слой же прижимается к точкам
   вместе с рамкой, и знак стоит ровно по центру на любой позиции. Отступы знака
   заложены в самом рисунке: маска растянута на весь слой, без центрирования. */
.task.important > .check::before {
  content: ''; position: absolute; inset: 0;
  background: var(--check-color);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 2.24V5.64' fill='none' stroke='%23000' stroke-width='1.41' stroke-linecap='round'/%3E%3Ccircle cx='5' cy='7.89' r='.87'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 2.24V5.64' fill='none' stroke='%23000' stroke-width='1.41' stroke-linecap='round'/%3E%3Ccircle cx='5' cy='7.89' r='.87'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
/* Выполнили — «!» сменяет галочка */
.task.important > .check.checked::before { content: none; }
/* Выделенная строка залита синим — знак белый, как и обводка квадратика */
.task.important.selected:not(.open) > .check::before { background: #fff; }
/* Кнопка «!» в нижнем ряду карточки — тем же красным, что и квадратик */
.tool.set.important { color: var(--important); }

.task-body { flex: 1; min-width: 0; }
.task-title {
  font-size: calc(14.5px * var(--fs)); line-height: 1.35;
  word-break: break-word;
}
.task.done .task-title { color: var(--text-faint); }
.task-sub {
  font-size: calc(12px * var(--fs)); color: var(--text-muted);
  margin-top: 1px;
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.task-sub .chip { display: inline-flex; align-items: center; gap: 4px; }
.task-sub .chip.due-today { color: var(--yellow); }
.task-sub .chip.overdue { color: var(--pink); }

/* Значки «есть заметка» / «есть чек-лист» — сразу за текстом, в цвет текста */
.marks {
  display: inline-flex; gap: 5px; align-items: center;
  margin-left: 6px; vertical-align: -2px;
  color: inherit;
}
.marks svg { width: 13px; height: 13px; }

/* Последние слова названия вместе со значками — одной строкой, чтобы на
   последней строке не оставалось обрывка в пару букв */
.task-title .хвост { white-space: nowrap; }

/* ---------- Раскрытая задача ---------- */

/* Заметка, чек-лист и нижний ряд стоят ровно под названием — на одной вертикали.
   Раньше здесь был отступ 27px, из-за которого заметка уезжала правее названия. */
.task-detail { padding: 4px 0 0; }

/* Название в раскрытой карточке — редактируется прямо на месте. Поле растущее,
   а не в одну строку: длинное название переносится по строкам и видно целиком. */
.title-edit {
  width: 100%;
  font-weight: 500;
  padding: 0;
  resize: none; overflow: hidden;
  font-family: inherit;
  line-height: 1.35;
  background: transparent; border: 0; color: var(--text);
  word-break: break-word;
}
.task-detail textarea {
  width: 100%; resize: none; overflow: hidden;
  font-size: calc(14.5px * var(--fs)); color: var(--text);
  line-height: 1.5; padding: 2px 0;
  /* Высота строки — целым числом точек. Настоящий Safari строку готового
     текста округляет вниз (21 вместо 21,75), а поле оставляет дробным. При
     нажатии строка подменяется полем, и абзац прыгал на полторы точки
     (Илья 06.10.2026). Playwright WebKit так не округляет — прыжок виден только
     в живом Safari. Вторая строка — для браузеров без round(): они её пропустят */
  line-height: round(down, calc(14.5px * var(--fs) * 1.5), 1px);
  /* Отбиваем заметку от названия: иначе они читаются одним абзацем, и с
     первого взгляда непонятно, где кончается одно и начинается другое.
     Половина строки — заметно, но не разрывает карточку надвое. */
  margin-top: calc(14.5px * var(--fs) * 0.75);
}
.task-detail textarea::placeholder { color: var(--text-faint); }

/* ---------- Готовый текст: ссылки и блоки для копирования ----------

   Пока в описании или заметке стоит курсор — это обычное поле ввода. Курсор
   ушёл — на его месте тот же текст, но готовый. Поле при этом остаётся в
   разметке: на него завязаны вставка списком, кнопка чекбокса и возврат
   курсора, — просто не видно и места не занимает. */
.спрятано {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  min-height: 0 !important; flex: none !important;
  padding: 0 !important; margin: 0 !important;
  opacity: 0; overflow: hidden; border: 0;
  /* Нажатия принадлежат готовому тексту: иначе щелчок по самому его краю
     попадал бы в спрятанное поле и ставил курсор в начало */
  pointer-events: none;
}

/* Пустое описание над пунктами: места не занимает, пока в него не встали
   курсором — Tab из названия или стрелкой вверх из первого пункта (Илья
   01.10.2026). Только на компьютере: на телефоне нет ни Tab, ни стрелок, и
   описание над списком было бы не завести */
@media (hover: hover) {
  .task-detail textarea.пусто-над-списком:not(:focus) {
    position: absolute; width: 1px; height: 1px; min-height: 0;
    padding: 0; margin: 0; opacity: 0; overflow: hidden; pointer-events: none;
  }
}

.текст-вид { cursor: text; color: var(--text); }
.текст-вид .стр { white-space: pre-wrap; word-break: break-word; }
.текст-вид a { color: var(--blue); text-decoration: none; }
.текст-вид a:hover { text-decoration: underline; }

/* Шрифт и просветы — те же, что у поля: при переходе в правку текст не
   должен дёргаться */
.task-detail .текст-вид {
  font-size: calc(14.5px * var(--fs)); line-height: 1.5; padding: 2px 0;
  line-height: round(down, calc(14.5px * var(--fs) * 1.5), 1px);
  margin-top: calc(14.5px * var(--fs) * 0.75);
}

/* Блок для копирования — как блоки кода в Notion: рамка, моноширинный текст
   и значок в углу. Значок лежит поверх текста, а не отдельной строкой:
   блок должен занимать ровно столько строк, сколько в нём текста. */
.копи-блок {
  position: relative;
  /* Ширина по самому тексту, а не во всю строку. Справа оставлен угол под
     значок — он лежит поверх и текст не закрывает */
  width: fit-content; max-width: 100%;
  margin: 8px 0; padding: 7px 70px 7px 11px;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--bg-hover);
}
.копи-блок pre {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: calc(12.8px * var(--fs)); line-height: 1.55;
  white-space: pre-wrap; word-break: break-word;
}
.копи-кнопка {
  position: absolute; top: 5px; right: 5px;
  display: grid; place-items: center;
  width: 26px; height: 24px; border-radius: 6px;
  color: var(--text-muted);
  background: var(--bg); border: 1px solid var(--line);
  opacity: 0; transition: opacity .12s, color .12s;
}
.копи-блок:hover .копи-кнопка, .копи-кнопка:focus-visible { opacity: 1; }
.копи-кнопка:hover { color: var(--text); border-color: var(--text-faint); }
.копи-кнопка svg { width: 14px; height: 14px; flex: none; }
/* «Убрать блок» — слева от «Скопировать», тоже поверх угла блока */
.копи-убрать { right: 35px; }

/* Поле правки одного куска: заборы ``` в него не попадают, поэтому человек
   правит просто текст и разметки не видит */
.кусок-поле {
  display: block; width: 100%; resize: none; overflow: hidden;
  background: transparent; border: 0; color: var(--text);
  font: inherit; padding: 0;
}
.кусок-поле:focus { outline: none; }
/* В карточке общий стиль полей даёт описанию отбивку сверху и поля по 2 px.
   Строке в правке они не нужны: отбивка уже стоит у всего текста, а строка,
   получив её себе, съезжала на 15 px вниз вместе со всем, что под ней
   (замер 21.09.2026) */
.task-detail .кусок-поле { margin: 0; padding: 0; }
/* Внутри блока поле выглядит так же, как сам блок */
.копи-блок .кусок-поле {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: calc(12.8px * var(--fs)); line-height: 1.55;
}
/* Пока правят блок, ему нужна вся ширина: иначе поле прыгало бы по буквам */
.копи-блок:has(.кусок-поле) { width: auto; }
/* Где наведения нет (телефон), значок виден всегда — иначе до него не добраться */
@media (hover: none) {
  .копи-кнопка { opacity: .75; }
}

/* Нижний ряд карточки. Слева — значение «когда» со своим значком, справа — только значки-действия, без подписей.
   Ряд отчёркнут от текста тонкой линией, а кнопки делятся чертами на группы:
   когда и куда | что внутри | удалить (вариант «Контур», 29.09.2026). */
.card-tools {
  display: flex; align-items: center; gap: 2px;
  margin-top: 18px; padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--text) 9%, transparent);
}
.card-tools .tool[data-act="priority"],
.card-tools .tool[data-act="copy-make"] { margin-right: 13px; }
.card-tools .tool[data-act="priority"]::after,
.card-tools .tool[data-act="copy-make"]::after {
  content: ''; position: absolute; right: -7px; top: 8px; bottom: 8px; width: 1px;
  background: color-mix(in srgb, var(--text) 14%, transparent);
}

/* Телефон. В один ряд семь значков и дата не влезали: значки сжимались до
   23 точек в ширину, и попасть по папке или луне пальцем было трудно (Илья,
   05.10.2026). Дата уходит отдельной строкой наверх, а значки делят всю
   ширину поровну и становятся выше — под палец, а не под курсор */
@media (max-width: 760px) {
  .card-tools { flex-wrap: wrap; row-gap: 4px; }
  .card-tools .tool-when { flex: 1 0 100%; margin-right: 0; align-self: flex-start; justify-content: flex-start; }
  .card-tools .tool { flex: 1 1 34px; min-width: 0; height: 44px; }
  .card-tools .tool svg { width: 21px; height: 21px; }
  .card-tools .tool[data-act="priority"]::after,
  .card-tools .tool[data-act="copy-make"]::after { top: 12px; bottom: 12px; }
}

/* Значение «когда» — слева, заметное */
.tool-when {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  margin-right: auto; margin-left: -7px;   /* чтобы значок встал ровно под текстом названия */
  padding: 5px 9px 5px 7px; border-radius: 7px;
  font-size: calc(13.5px * var(--fs)); font-weight: 600;
  color: var(--text-muted); cursor: pointer;
}
.tool-when svg, .tool-when .ico { width: 17px; height: 17px; flex: none; }
.tool-when:hover { background: var(--bg-hover); }
.tool-when.set { color: var(--text); }
/* ---------- Календарь «Когда» ---------- */
/* Свой, а не системный: в системном нельзя ни «сегодня» нажать, ни «вечером».
   Недели идут подряд, а не помесячно. */

.when-pop {
  position: absolute; bottom: calc(100% + 6px); left: -4px; z-index: 50;
  width: 268px; padding: 8px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0,0,0,.3);
  cursor: default;
  animation: pop-in .12s ease-out;
}
@keyframes pop-in { from { opacity: 0; transform: translateY(4px); } }

/* Сверху не хватило места — открываемся вниз (класс ставит render) */
.when-pop.below { bottom: auto; top: calc(100% + 6px); }
/* Фон под календарём нужен только на телефоне — там и включается */
.when-backdrop { display: none; }

.when-quick button {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 7px 8px; border-radius: 7px;
  font-size: calc(13.5px * var(--fs)); font-weight: 500; color: var(--text);
  text-align: left;
}
.when-quick button:hover { background: var(--bg-hover); }
.when-quick button svg, .when-quick button .ico { width: 17px; height: 17px; flex: none; }
.when-quick .tick { margin-left: auto; color: var(--blue); font-style: normal; }

/* Дни недели стоят над лентой и не прокручиваются вместе с ней.
   Тень снизу — не украшение, а непрозрачная полоса поверх первых пикселей
   ленты. Без неё в момент пересменки подписей месяца (одна уже уехала,
   другая ещё не прилипла) в этой щели мелькали числа. */
.when-weekdays {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px;
  margin-top: 6px; padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
  position: relative; z-index: 2;
  background: var(--bg-card);
  box-shadow: 0 4px 0 var(--bg-card);
}
.when-weekdays span {
  text-align: center;
  font-size: calc(11px * var(--fs)); font-weight: 600; color: var(--text-muted);
}

/* Лента недель на год вперёд — прокручивается внутри окошка */
.when-grid {
  max-height: 196px; overflow-y: auto; overscroll-behavior: contain;
  /* Полоса прокрутки тут только мешает: окошко узкое, и она съедает колонку
     воскресений. Прокрутка при этом работает как обычно. */
  scrollbar-width: none;
}
.when-grid::-webkit-scrollbar { display: none; }

/* Каждый месяц — свой блок со своей подписью. Подпись липнет к верху внутри
   блока: стоит, пока идёт её месяц, и уезжает, когда её выталкивает следующая.
   Одним куском обе подписи липли бы к одному месту и наезжали друг на друга,
   а над ними в просвете мелькали числа. */
.when-month {
  position: sticky; top: 0; z-index: 1;
  padding: 6px 2px 4px;
  background: var(--bg-card);
  font-size: calc(11.5px * var(--fs)); font-weight: 600; color: var(--text-muted);
}
.when-weeks { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.when-grid .day {
  height: 30px; border-radius: 7px;
  font-size: calc(12.5px * var(--fs)); font-weight: 500; color: var(--text);
  transition: background .08s;
}
.when-grid .day:hover:not(:disabled) { background: var(--bg-hover); }
.when-grid .day.past { color: var(--text-faint); cursor: default; }
.when-grid .day.today { color: var(--yellow); font-size: calc(15px * var(--fs)); }
.when-grid .day.chosen { background: var(--blue); color: #fff; }

/* ---------- Календарь повторов ---------- */
/* У шаблона дату не выбирают — её задаёт правило. Календарь показывает,
   в какие дни задача появится: закрашенные клетки и есть будущие повторы. */
.when-pop.dates .when-grid .day {
  display: grid; place-items: center;
  cursor: default;
}
.when-grid .day.hit {
  background: color-mix(in srgb, var(--blue) 34%, transparent);
  color: #fff;
}
.when-pop.dates .when-grid .day.past { color: var(--text-faint); }
.when-note {
  margin-top: 8px; padding: 7px 8px;
  border-radius: 8px; background: var(--bg-block);
  font-size: calc(12px * var(--fs)); color: var(--text-muted); line-height: 1.4;
}

.when-clear {
  width: 100%; margin-top: 8px; padding: 8px;
  border-radius: 8px; background: var(--bg-block);
  font-size: calc(13px * var(--fs)); color: var(--text);
}
.when-clear:hover { background: var(--bg-selected); }

/* Значки-действия справа — без подписей */
.tool {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 30px; border-radius: 7px;
  color: var(--text-faint); cursor: pointer;
  transition: background .1s, color .1s;
}
.tool svg { width: 17px; height: 17px; flex: none; }
.tool:hover { background: var(--bg-hover); color: var(--text); }
.tool.set { color: var(--blue); }
/* Своё display у кнопки перебивает встроенное hidden — возвращаем его силу */
.tool[hidden] { display: none; }
.tool.set.evening { color: #7b8dd6; }
.tool select {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}

.tool.danger:hover { background: color-mix(in srgb, var(--pink) 12%, transparent); color: var(--pink); }

/* Чек-лист внутри задачи */
.checklist { margin-top: 10px; }
/* Пункт бывает в несколько строк, поэтому квадратик прижат к первой строке,
   а не к середине всего пункта */
.checklist-item { display: flex; align-items: flex-start; gap: 9px; padding: 3px 0; }
/* В чек-листе квадратик свой и крупнее (14 px), обводка — прежняя. Стоит так
   же, как у задачи в списке: середина квадратика — на середине заглавных букв
   первой строки. Середина заглавных у этого шрифта на 1 px выше середины
   строки, отсюда «− 1px». Раньше было «+ 2px», под строчные буквы, и квадратик
   сидел на 3 px ниже текста, чем в списке задач (замер по снимку 17.09.2026). */
.checklist-item .check {
  width: 14px; height: 14px; border-radius: 3px; border-width: 1.2px;
  margin-top: calc((13.5px * var(--fs) * 1.45 - 14px) / 2 - 1px * var(--fs));
}
.checklist-item .check svg { width: 10.4px; height: 10.4px; }
/* Растущее поле пункта. Перебивает общие стили заметки в карточке: у пункта
   свой размер, без отбивки сверху и с высотой строки прежнего поля ввода. */
.checklist-item .check-text {
  flex: 1; min-width: 0; width: auto; margin: 0; padding: 0;
  font-size: calc(13.5px * var(--fs)); line-height: 1.45;
  resize: none; overflow: hidden; overflow-wrap: anywhere;
}
/* Строка описания, ставшая пунктом, остаётся на своём месте (просьба Ильи
   22.09.2026). Раньше она съезжала вниз на 15 px: у списка была отбивка
   сверху, у пунктов — поля и свой, мелкий шрифт. Теперь пункты идут той же
   сеткой строк, что и текст описания над ними, а список встаёт вплотную */
.task-detail .текст-вид + .checklist { margin-top: -2px; }
.task-detail .checklist-item { padding: 0; }
.task-detail .checklist-item .check-text { font-size: calc(14.5px * var(--fs)); line-height: 1.5; line-height: round(down, calc(14.5px * var(--fs) * 1.5), 1px); }
.task-detail .checklist-item .check {
  margin-top: calc((14.5px * var(--fs) * 1.5 - 14px) / 2 - 1px * var(--fs));
  margin-top: calc((round(down, calc(14.5px * var(--fs) * 1.5), 1px) - 14px) / 2 - 1px * var(--fs));
}
.checklist-item.done .check-text { color: var(--text-faint); text-decoration: line-through; }
/* Крестика у строки больше нет: пункт убирают клавишей стирания, как текст */

/* Обычная строка текста между пунктами — подзаголовок или пояснение. Квадратика
   нет, текст встаёт на его место: так видно, что строка стоит НАД пунктами, а
   не в одном ряду с ними. */
.checklist-item.plain .check-text { color: var(--text); }

/* Строка списка с адресом: поверх поля лежит тот же текст со ссылками.
   Сетка у слоя та же, что у поля, — шрифт, перенос, высота строки, — поэтому
   буквы совпадают один в один. Нажатия идут сквозь слой в поле, кроме самих
   ссылок. Встали в строку — слоя нет, текст поля снова виден */
.пункт-поле { position: relative; flex: 1; min-width: 0; display: flex; }
.пункт-вид {
  position: absolute; inset: 0; pointer-events: none;
  font-size: calc(13.5px * var(--fs)); line-height: 1.45;
  white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text);
}
.task-detail .пункт-вид { font-size: calc(14.5px * var(--fs)); line-height: 1.5; line-height: round(down, calc(14.5px * var(--fs) * 1.5), 1px); }
.checklist-item.done .пункт-вид { color: var(--text-faint); text-decoration: line-through; }
.пункт-вид a { color: var(--blue); text-decoration: none; pointer-events: auto; }
.пункт-вид a:hover { text-decoration: underline; }
/* Прячемся только от фокуса в самом поле: нажатая ссылка тоже забирает
   фокус, и по :focus-within слой исчезал прямо под пальцем — щелчок падал
   в поле, а ссылка не открывалась */
.пункт-поле .check-text:not(:focus) { color: transparent; }
.пункт-поле .check-text:focus + .пункт-вид { display: none; }
.checklist-item.done .пункт-вид a { color: inherit; }
/* Отдельного отступа перед куском текста нет: строки списка идут ровно, с одним
   и тем же просветом — что между двумя строками текста, что между пунктом
   и текстом. Лишняя щель разрывала список там, где разрыва не задумывали. */

/* Значка «сделать пунктом» справа у строки больше нет (просьба Ильи
   22.09.2026): квадратик ставят и снимают через меню над выделенным текстом
   или кнопкой списка внизу карточки. */


/* Кнопки у строки человека в настройках */
.люди-кнопки { display: flex; gap: 6px; flex: none; justify-content: flex-end; }

/* ---------- Пустое состояние ---------- */

.empty { padding: 60px 0; text-align: center; color: var(--text-faint); font-size: 14px; }
/* Подсказка в пустых «Входящих» и «Сегодня»: как завести задачу. Нажимается */
.empty-new {
  display: block; margin: 10px auto 0; padding: 4px 8px; border: 0; border-radius: 6px;
  background: transparent; color: var(--text-muted); font: inherit; font-size: 13.5px; cursor: pointer;
}
.empty-new:hover { color: var(--text); }
.empty-new kbd {
  font: inherit; font-size: 12px; padding: 1px 6px; margin: 0 2px; border-radius: 5px;
  border: 1px solid var(--line); background: var(--bg-block); color: var(--text);
}
.empty-new b { color: var(--blue); }

/* ---------- Нижняя панель ---------- */

#toolbar {
  position: fixed; bottom: 0; left: var(--sidebar-w); right: 0;
  padding: 12px 46px 16px;
  background: linear-gradient(to top, var(--bg) 62%, transparent);
  display: flex; align-items: center; gap: 10px;
  pointer-events: none;
}
#toolbar > * { pointer-events: auto; }

#new-task {
  flex: 1;   /* поле новой задачи тянется на всю ширину панели */
  display: flex; align-items: center; gap: 9px;
  padding: 9px 13px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 9px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 6px 20px rgba(0,0,0,.05);
}
#new-task input { flex: 1; font-size: calc(14.5px * var(--fs)); }
#new-task .hint { font-size: 11.5px; color: var(--text-faint); flex: none; }

/* ---------- Состояние связи ---------- */

#status {
  position: fixed; top: 12px; right: 16px;
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--text-muted);
  padding: 4px 9px; border-radius: 20px;
  background: var(--bg-block);
  opacity: 0; transition: opacity .3s;
  /* Прозрачный — но нажатия ловил по-прежнему: невидимая плашка в правом
     верхнем углу перехватывала их у всего, что под ней. На кнопках заметки
     это уже мешало. Он только показывает состояние, нажимать его незачем. */
  pointer-events: none;
}
#status.show { opacity: 1; }
#status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
#status.off .dot { background: var(--pink); }
/* Когда всё в порядке — только зелёная точка, без слов и плашки: читать там
   нечего, а «синхронизировано» в углу лишь отвлекает. Слова остаются для
   случаев, когда что-то не так, — вот их прочитать важно. */
#status.ok { background: none; padding: 4px 6px; }
/* Есть неотправленное — говорим об этом прямо и не гасим плашку. Жёлтый, а не
   красный: связь может быть в порядке, просто правки ещё едут. Красный тут
   пугал бы зря, а зелёный — врал бы. */
#status.wait { background: var(--bg-block); }
#status.wait .dot { background: #e0a33a; }
#status.ok #status-text { display: none; }
/* Связь и синхронизация — одна точка без слов и плашки при любом цвете:
   зелёный, жёлтый (правки едут), красный (нет связи) (Илья 01.10.2026) */
#status.точка { background: none; padding: 4px 6px; }
#status.точка #status-text { display: none; }

/* ---------- Мобильная версия ---------- */

#menu-btn, #search-btn { display: none; }
/* Строка поиска в панели. На компьютере стоит по умолчанию (решение Ильи
   17.09.2026), убрать её можно в настройках: «Поиск» первым названием в
   «Разделах в панели». Встаёт над разделами, с тем же отступом, что у групп.
   Прячем по признаку «hide», а не показываем по «show»: иначе при загрузке
   строка мигала бы — появлялась только после того, как прочитаны настройки */
@media (min-width: 761px) {
  #nav-search { width: auto; margin: 0 10px 16px; }
  :root[data-nav-search="hide"] #nav-search { display: none; }
}

#nav-shade { display: none; }

@media (max-width: 760px) {
  /* Насколько панель выехала: 0 — закрыта, 1 — открыта.
     Во время свайпа значение меняется пальцем, поэтому затемнение едет вместе с панелью.
     Живёт только на самом листе и затемнении, а не на корне страницы: значение
     на корне наследуют все 7 тысяч элементов экрана, и каждое движение пальца
     пересчитывало их все — лист ехал с задержкой и рывками (Илья 26.09.2026). */
  #sidebar, #nav-shade { --nav-progress: 0; }

  /* Панель разделов на телефоне — не боковая колонка, а лист под палец.
     Шаг строки 24 px годится для курсора: пальцем в такую
     строку попадают через раз, а соседнюю задевают. Здесь строка 36 px вместо
     26, кегль 15.5 вместо 14, значки 21 вместо 19.
     Крупнее не делаем не из скромности: при строке в 41 px девять разделов
     занимают лист целиком, и из списков видно ровно один — а их перетаскивают
     пальцем прямо здесь. 36 px — самая крупная строка, при которой списки
     остаются на виду. */
  .nav-item {
    padding: 7px 10px;
    gap: 12px;
    font-size: calc(15.5px * var(--fs));
  }
  .nav-item .ico { width: 21px; height: 21px; }
  .nav-item .count { font-size: calc(14.5px * var(--fs)); }
  .nav-group + .nav-group { margin-top: 14px; }

  /* Раскрытая карточка вылезала на 2 px за правый край и там срезалась —
     вместе со скруглением и тенью. Причина: у контента отступы разные (слева
     30 px — под полосу свайпа, справа 18), а поля карточки были одинаковые,
     по -20. Задаём их по отдельности, чтобы от обоих краёв экрана карточка
     отступала одинаково, на 12 px. */
  .task.open { margin: 20px -6px 20px -18px; }

  /* Отклик на нажатие. На телефоне нет наведения курсора: нажал строку — и до
     результата ничего не происходит, попал ли палец, непонятно. Лёгкое
     вдавливание отвечает сразу. Строки задач намеренно не трогаем: их берут
     на перенос и смахивают вбок, там своё движение. */
  .nav-item:active, .head-add:active, .set-btn:active, #menu-btn:active {
    transform: scale(.97);
    transition: transform .08s ease;
  }
  :root[data-motion="less"] .nav-item:active,
  :root[data-motion="less"] .head-add:active,
  :root[data-motion="less"] .set-btn:active,
  :root[data-motion="less"] #menu-btn:active { transform: none; }

  /* Долгое нажатие пальцем не должно вызывать системную лупу и меню
     «Скопировать / Найти»: в списке задач и разделов это чужой жест — им
     задачу берут на перенос, а строку заметки смахивают. Раньше запрет стоял
     только на строках задач, и лупа всплывала во всех остальных местах.
     Поля ввода — исключение: там выделение и лупа как раз нужны, ими ставят
     курсор в середину слова. */
  body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }
  input, textarea, [contenteditable] {
    -webkit-touch-callout: default;
    -webkit-user-select: text;
    user-select: text;
  }

  /* Разделы всплывают листом из правого нижнего угла, а не панелью во всю
     левую стену. Причина простая: телефон держат одной рукой, и большой палец
     достаёт нижнюю правую часть экрана — а до верхних левых пунктов до него
     надо было перехватывать телефон. Верх экрана лист не закрывает: видно,
     из какого списка уходишь. */
  #sidebar {
    position: fixed; z-index: 20;
    right: 10px; left: auto; top: auto;
    /* Лист лежит у самого низа экрана: верхние его пункты — «Поиск»,
       «Входящие», «Сегодня» — иначе уезжают к середине экрана, а тянуться
       туда большим пальцем, которым держат телефон, неудобно. Круглая кнопка
       задачи в это время спрятана, а кнопка «свернуть» стоит в подвале самого
       листа (см. #sidebar-foot ниже) — низ экрана свободен целиком. */
    bottom: calc(12px + env(safe-area-inset-bottom));
    /* Уже и ниже — чтобы верх листа доставал большой палец (Илья 27.09.2026) */
    width: min(256px, calc(100vw - 40px));
    /* Лист растёт снизу ровно под своё содержимое и влезает целиком: сверху
       оставляем только полосу под часы и вырез экрана. Прокрутка появится,
       лишь если списков станет больше, чем помещается на экране. */
    max-height: calc(100dvh - 60px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    border: 1px solid var(--line);
    border-right: 0;
    border-radius: 14px;
    padding: 8px 0 0;
    box-shadow: 0 12px 44px rgba(0,0,0,.26);
    /* Лист поднимается снизу и тает: жест ведут вбок, но растёт он оттуда,
       где стоит кнопка, — видно, что это её меню */
    transform: translateY(calc((1 - var(--nav-progress)) * 22px)) scale(calc(.96 + var(--nav-progress) * .04));
    transform-origin: 100% 100%;
    opacity: var(--nav-progress);
    visibility: hidden;
    transition: transform .22s cubic-bezier(.32,.72,0,1), opacity .18s ease, visibility .22s;
    /* Свой слой заранее: иначе на первом движении пальца браузер заводит его
       на ходу, и лист трогается с запинкой */
    will-change: transform, opacity;
    /* Свайп по самой панели не должен прокручивать её вбок */
    touch-action: pan-y;
    /* Долистал до конца списка — дальше стоп, а не «протекает» на задачи под
       листом: иначе экран позади уезжает вместе с пальцем */
    overscroll-behavior: contain;
  }
  body.nav-open #sidebar, body.nav-open #nav-shade { --nav-progress: 1; }
  /* Пока лист закрыт, он не должен ловить нажатия сквозь себя */
  body.nav-open #sidebar, body.nav-swiping #sidebar { visibility: visible; }

  /* Пока палец ведёт панель — никаких плавных переходов, иначе она отстаёт */
  body.nav-swiping #sidebar { transition: none; }

  /* Затемнение позади панели. Показываем всегда, но прозрачность зависит от того,
     насколько панель выехала — поэтому во время свайпа фон темнеет постепенно. */
  #nav-shade {
    display: block;
    position: fixed; inset: 0; z-index: 15;
    background: rgba(0,0,0,.32);
    opacity: var(--nav-progress);
    pointer-events: none;
    transition: opacity .24s ease;
    will-change: opacity;
  }
  body.nav-swiping #nav-shade { transition: none; }
  body.nav-open #nav-shade { pointer-events: auto; }

  /* Узкая полоса у левого края, с которой начинается свайп.
     Без неё браузер перехватывает жест как «назад по истории». */
  #edge-zone {
    position: fixed; top: 0; bottom: 0; left: 0; width: 24px; z-index: 18;
    touch-action: pan-y;
  }
  /* Смахивание вбок по списку браузеру не отдаём вовсе: иначе Safari уводит
     «назад» и «вперёд» по истории прямо посреди работы. Пальцу остаётся
     вертикальная прокрутка, а наши боковые жесты — открытие панели и
     смахивание строки заметки — работают своим кодом и от этого не страдают. */
  body, #main, #content, #sidebar { touch-action: pan-y; }
  /* Кроме полос, которые сами листаются вбок: там жест нужен им */
  .habit-scroll, .when-grid, [data-scroll-x] { touch-action: pan-x pan-y; }
  /* Отступ слева больше правого не для красоты: у самого края лежит полоса,
     с которой начинается свайп панели (#edge-zone, 24 px). Галочка задачи
     попадала под неё, и пальцем по ней было не попасть. */
  #content { padding: 20px 18px 130px 30px; }
  .page-head h1, .head-title { font-size: 23px; }
  #toolbar { left: 0; padding: 10px 14px calc(14px + env(safe-area-inset-bottom)); }
  /* Кнопка к разделам стоит в правом нижнем углу, столбиком над круглой кнопкой
     задачи: свайп открывает панель и с любого места экрана, но кнопка нужна
     как понятная зацепка — и большим пальцем правой руки, которым обычно
     держат телефон, до верхнего левого угла не дотянуться, а сюда легко.
     Свой кружок под низ — раньше кнопка стояла на плотной шапке и подложка
     была не нужна, а тут под ней едет список, и без круга значок терялся бы. */
  #menu-btn {
    display: grid; place-items: center;
    position: fixed; z-index: 25;
    right: 26px; bottom: calc(92px + env(safe-area-inset-bottom));
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--bg); color: var(--text-muted);
    box-shadow: 0 2px 10px rgba(0,0,0,.16);
  }
  #menu-btn { transition: bottom .2s cubic-bezier(.32,.72,0,1); }
  :root[data-motion="less"] #menu-btn { transition: none; }

  /* Полоски вращаются вокруг середины значка: так верхняя и нижняя сходятся в крестик */
  #menu-btn line {
    transform-box: view-box; transform-origin: 10px 10px;
    transition: transform .22s cubic-bezier(.32,.72,0,1), opacity .12s;
  }
  #menu-btn:active { color: var(--text); transform: scale(.94); }
  /* Лист открыт — кнопки нет: закрывают касанием в стороне. Крестик
     в углу листа был лишним (Илья 27.09.2026) */
  body.nav-open #menu-btn, body.nav-swiping #menu-btn { display: none; }
  /* Поле новой задачи выезжает снизу во всю ширину — кнопке там не место */
  body.adding #menu-btn { display: none; }
  /* Поиск на телефоне переехал в панель разделов */
  #search-btn { display: none; }
  #nav-search { display: flex; }
  /* Кнопка разделов ушла вниз — держать под неё пустую полосу сверху больше
     не нужно, остаётся только запас под вырез телефона */
  #content { padding-top: calc(22px + env(safe-area-inset-top)); }

  /* Подвал листа прилипает к его низу: «+ Проект» и настройки должны быть под
     пальцем сразу, а не в конце длинного списка проектов */
  #sidebar-foot {
    position: sticky; bottom: 0;
    background: var(--bg-sidebar);
    padding-bottom: 10px;
    /* Здесь черта нужна, а на компьютере убрана: на телефоне подвал прибит к
       низу листа и списки уезжают ПОД него — без черты они просто обрываются
       на полуслове. На компьютере панель не прокручивается, разделять нечего. */
    border-top: 1px solid var(--line);
    /* Настройки — в правом углу, под большой палец (Илья 27.09.2026) */
    justify-content: flex-end;
  }
}

/* ---------- «Потянуть, чтобы обновить» ---------- */

/* Значок висит над списком и выезжает ровно настолько, насколько потянули.
   Крутится, только пока идёт обновление, — иначе непонятно, случилось ли что-то. */
#pull {
  position: fixed; top: 0; left: 50%; z-index: 30;
  display: grid; place-items: center;
  width: 34px; height: 34px; margin-left: -17px; border-radius: 50%;
  background: var(--bg-block); color: var(--text-muted);
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
  transform: translateY(-46px);
  opacity: 0;
  pointer-events: none;
}
#pull svg { width: 17px; height: 17px; }
/* Пока тянут — значок идёт за пальцем без задержки, на отпускании возвращается плавно */
#pull.плавно { transition: transform .22s ease, opacity .22s ease; }
/* Список едет вниз вместе со значком: тянется сам экран, а не один кружок над ним.
   Сдвиг только на время жеста — иначе #content стал бы точкой отсчёта для
   всплывающих окошек внутри карточек, и они уехали бы с центра экрана. */
#content.плавно { transition: transform .22s ease; }
/* Не дотянули до обновления — экран возвращается той же пружиной, что и
   списки в macOS (отскок там даёт сама система, а не приложение). Пружина критически затухающая: быстро трогается, плавно
   тормозит и ВСТАЁТ на место — без перелёта и качаний. Перелёт был нашей
   отсебятиной: ни один список Apple выше своего края не подпрыгивает.
   Первое правило — запасное, для браузеров без linear(). */
#pull.отскок { transition: transform .45s cubic-bezier(.25,.9,.25,1), opacity .3s ease; }
#content.отскок { transition: transform .45s cubic-bezier(.25,.9,.25,1); }
#pull.отскок { transition: transform .45s linear(0, 0.021, 0.0729, 0.1425, 0.2209, 0.3019, 0.3813, 0.4566, 0.5264, 0.5898, 0.6466, 0.6971, 0.7414, 0.78, 0.8135, 0.8423, 0.867, 0.8882, 0.9061, 0.9214, 0.9342, 0.9451, 0.9542, 0.9619, 0.9683, 0.9737, 0.9782, 0.9819, 0.9851, 0.9876, 1), opacity .3s ease; }
#content.отскок { transition: transform .45s linear(0, 0.021, 0.0729, 0.1425, 0.2209, 0.3019, 0.3813, 0.4566, 0.5264, 0.5898, 0.6466, 0.6971, 0.7414, 0.78, 0.8135, 0.8423, 0.867, 0.8882, 0.9061, 0.9214, 0.9342, 0.9451, 0.9542, 0.9619, 0.9683, 0.9737, 0.9782, 0.9819, 0.9851, 0.9876, 1); }
#pull.крутится svg { animation: pull-spin .8s linear infinite; }
@keyframes pull-spin { to { transform: rotate(360deg); } }

/* ---------- Меньше движения ---------- */

/* Атрибут ставит applySettings(): либо человек выбрал это сам, либо выбрал
   «как в системе», а в системе включено «уменьшить движение».
   Гасим не всё подряд, а именно перемещения: плавная смена цвета и
   прозрачности движения не создаёт и никого не укачивает. Кружок обновления
   продолжает крутиться — это не украшение, а единственный признак того,
   что данные грузятся. */

:root[data-motion="less"] #sidebar,
:root[data-motion="less"] #menu-btn line,
:root[data-motion="less"] #pull,
:root[data-motion="less"] #content,
:root[data-motion="less"] .note-swipe .note-row,
:root[data-motion="less"] .drag-proxy {
  transition-duration: .01ms;
}

/* Окошки появляются на месте, без подъезда снизу */
:root[data-motion="less"] .ctx-menu,
:root[data-motion="less"] .when-pop { animation-name: pop-in-still; }
@keyframes pop-in-still { from { opacity: 0; } }

/* Плавное появление и уход трёх окон — настроек, повтора и короткого ввода.
   Само окно внутри чуть подрастает: так оно «выходит» к человеку, а не
   возникает готовым. Настройка «Движение → меньше» гасит это ниже. */
#settings-backdrop, #repeat-backdrop {
  opacity: 1;
  transition: opacity .16s ease, display .16s allow-discrete;
}
#settings, #repeat-dialog {
  transition: transform .16s cubic-bezier(.2,.7,.3,1);
  transform: scale(1);
}
#settings-backdrop[hidden] #settings,
#repeat-backdrop[hidden] #repeat-dialog,
@starting-style {
  #settings-backdrop:not([hidden]) #settings,
  #repeat-backdrop:not([hidden]) #repeat-dialog,
}
/* «Движение → меньше»: окна просто появляются и исчезают */
:root[data-motion="less"] #settings-backdrop,
:root[data-motion="less"] #repeat-backdrop,
:root[data-motion="less"] #settings,
:root[data-motion="less"] #repeat-dialog,

/* ---------- Настройки ---------- */

#settings-backdrop {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(0,0,0,.28);
  display: grid; place-items: center;
  padding: 20px;
}
/* Окна появляются и УХОДЯТ плавно. Раньше display:none обрывал уход на
   полуслове: окно исчезало рывком. `allow-discrete` откладывает переключение
   display до конца перехода, а @starting-style задаёт, из чего расти при
   появлении, — всё это чистым CSS, без единой строчки JS. */
#settings-backdrop[hidden] { opacity: 0; display: none; }
@starting-style { #settings-backdrop:not([hidden]) { opacity: 0; } }

/* Высота задана, а не подобрана по содержимому: вкладки разной длины, и окно
   прыгало в размерах на каждом переходе между ними. Теперь оно одно и то же,
   а длинная вкладка прокручивается внутри. */
#settings {
  width: 100%; max-width: 480px;
  height: min(620px, 100%);
  background: var(--bg);
  border-radius: 12px;
  box-shadow: 0 12px 48px rgba(0,0,0,.28);
  display: flex; flex-direction: column;
  overflow: hidden;
}
#settings-tabs, #settings-foot { flex: none; }

/* Панель вкладок сверху — как в настройках macOS */
#settings-tabs {
  display: flex; gap: 2px;
  padding: 10px 10px 0;
  background: var(--bg-sidebar);
  border-bottom: 1px solid var(--line);
}
#settings-tabs button {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 6px 8px;
  border-radius: 7px 7px 0 0;
  font-size: 12px; color: var(--text-muted);
}
#settings-tabs button svg { width: 19px; height: 19px; flex: none; }
/* Вкладки делят ширину поровну, даже если подпись длинная. Без min-width: 0
   «Синхронизация» не давала кнопке сжаться, и у владельца на узком телефоне
   пятая вкладка «Журнал» уезжала за край экрана (замер 24.09.2026, 320 px) */
#settings-tabs button { min-width: 0; }
#settings-tabs button > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 360px) {
  #settings-tabs { padding: 8px 6px 0; }
  #settings-tabs button { padding: 7px 2px 8px; font-size: 11px; }
}
#settings-tabs button:hover { background: var(--bg-hover); }
#settings-tabs button.active { background: var(--bg); color: var(--text); font-weight: 500; }

#settings-body { flex: 1; min-height: 0; padding: 20px 22px 22px; overflow-y: auto; }

.set-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  /* Переключатель из шести кнопок («Праздник при выполнении») в строку не
     влезал и сдавливал подпись до одного слова в строке. Теперь он просто
     переезжает под неё, а не выжимает её в столбик. */
  flex-wrap: wrap;
}
.set-row:last-child { border-bottom: 0; }
.set-row .set-label { font-size: 13.5px; }
.set-row .set-desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; line-height: 1.4; }
.set-row .set-text { flex: 1 1 210px; min-width: 190px; }
/* Что бы ни стояло справа — оно прижато к правому краю, а перенесённое вниз
   растягивается на всю ширину строки */
.set-row > :not(.set-text) { margin-left: auto; }
/* И сам переключатель не шире строки: шесть кнопок иначе вылезали за оба
   края окна и половину из них было не достать */
.set-row .seg { flex: 0 1 auto; max-width: 100%; flex-wrap: wrap; justify-content: flex-end; }

/* Переключатель из нескольких кнопок */
.seg { display: flex; background: var(--bg-block); border-radius: 7px; padding: 2px; flex: none; }
.seg button {
  padding: 4px 11px; border-radius: 5px;
  font-size: 12.5px; color: var(--text-muted); white-space: nowrap;
}
.seg button.active { background: var(--bg); color: var(--text); font-weight: 500; box-shadow: 0 1px 2px rgba(0,0,0,.10); }

/* Разделы панели: восемь названий, каждое включается и выключается само по
   себе. Обычным переключателем «Показывать / Скрыть» на каждый раздел вышло бы
   восемь строк — здесь всё умещается в одну. Выключенное приглушено и зачёркнуто:
   без этого «просто бледное» название читается как недоступное, а не как убранное. */
.nav-chips { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; max-width: 100%; }
.nav-chips button {
  padding: 4px 10px; border-radius: 7px;
  font-size: 12.5px; white-space: nowrap;
  background: var(--bg-block); color: var(--text-muted);
  text-decoration: line-through;
  text-decoration-color: var(--text-faint);
}
.nav-chips button.active {
  color: var(--text); font-weight: 500;
  background: var(--bg-selected);
  text-decoration: none;
}
.nav-chips button:hover { background: var(--bg-selected); }

.set-btn {
  padding: 6px 13px; border-radius: 7px; flex: none;
  font-size: 12.5px;
  background: var(--bg-block); color: var(--text);
}
.set-btn:hover { background: var(--bg-selected); }
.set-btn.danger { color: var(--pink); }
.set-btn.danger:hover { background: color-mix(in srgb, var(--pink) 14%, transparent); }

.set-note {
  font-size: 12px; color: var(--text-muted); line-height: 1.5;
  background: var(--bg-block); border-radius: 8px;
  padding: 10px 12px; margin-top: 14px;
}
.set-note code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; color: var(--text);
  background: var(--bg); padding: 1px 5px; border-radius: 4px;
}

.set-state { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.set-state .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: none; }
.set-state.off .dot { background: var(--pink); }

#settings-foot {
  padding: 12px 22px; border-top: 1px solid var(--line);
  display: flex; justify-content: flex-end;
  background: var(--bg-sidebar);
}

/* Окно настроек плитками (вариант «Вкладки слева», Илья 28.09.2026).
   Справа — заголовок вкладки, плитки и «Готово». На телефоне вкладки
   остаются полосой сверху, заголовок и нижняя кнопка колонки прячутся */
#settings-main { flex: 1; min-height: 0; min-width: 0; display: flex; flex-direction: column; }
#settings-title { display: none; }
#settings-tabs .set-side-title, #settings-tabs .set-side-feedback { display: none; }
#settings-foot { background: var(--bg); }

/* Строки остальных вкладок — тоже плашками */
#settings-body .set-row {
  background: var(--bg-block); border-radius: 14px; border-bottom: 0;
  padding: 12px 14px; margin-bottom: 10px;
}
#settings-body .set-row .set-btn:not(:hover), #settings-body .set-row .seg { background: var(--bg); }
#settings-body .set-row .seg button.active,
#settings-body .set-tile .seg button.active { background: var(--bg-selected); }

.set-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.set-tile {
  background: var(--bg-block); border-radius: 14px; padding: 13px 14px 14px; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
}
.set-tile.wide { grid-column: 1 / -1; }
/* Кнопки у всех плиток — по нижнему краю: в одном ряду плитки одной высоты,
   и переключатели встают на одну линию (Илья 28.09.2026) */
.set-tile > :last-child { margin-top: auto; }
.set-tile h4 {
  margin: 0; font-size: calc(11.5px * var(--fs)); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted);
}
.set-tile-big { font-size: calc(22px * var(--fs)); font-weight: 600; color: var(--text); line-height: 1.15; }
.set-tile-sub { font-size: calc(12.5px * var(--fs)); color: var(--text-muted); line-height: 1.4; margin-top: -3px; }
.set-tile-big + .set-tile-sub { margin-top: -5px; }
/* Переключатель — во всю ширину плитки, кнопки поровну */
.set-tile > .seg { align-self: stretch; background: var(--bg); }
.set-tile > .seg button { flex: 1; padding-left: 6px; padding-right: 6px; }
.set-tile .set-btn:not(:hover) { background: var(--bg); }
#settings-body a.set-btn { text-decoration: none; }
.set-tile .set-range { align-self: stretch; }
.set-tile .set-range input[type=range] { flex: 1; width: auto; }
.set-tile .nav-chips { justify-content: flex-start; }
.set-tile .nav-chips button:not(.active) { background: var(--bg); }
.set-tile-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.set-tile .set-date { font-size: calc(16px * var(--fs)); font-weight: 600; }
@media (hover: hover) {
  .set-tile .seg button { transition: background .12s, color .12s; }
  .set-tile .seg button:not(.active):hover { background: var(--bg-selected); color: var(--text); }
  .set-tile .seg button.active:hover { filter: brightness(1.25); }
}
@media (max-width: 420px) {
  .set-tiles { grid-template-columns: 1fr; }
}

@media (min-width: 640px) {
  #settings { flex-direction: row; max-width: 760px; height: min(640px, 100%); border-radius: 14px; }
  .set-tile-narrow { display: none; }
  #settings-tabs {
    width: 190px; flex: none; flex-direction: column; gap: 2px;
    padding: 14px 10px; border-bottom: 0; border-right: 1px solid var(--line);
  }
  #settings-tabs .set-side-title {
    display: block; padding: 6px 10px 10px;
    font-size: calc(11.5px * var(--fs)); font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase; color: var(--text-muted);
  }
  #settings-tabs button {
    flex: none; flex-direction: row; gap: 10px; align-items: center;
    padding: 8px 10px; border-radius: 8px;
    font-size: calc(13.5px * var(--fs)); text-align: left;
  }
  #settings-tabs button svg { width: 17px; height: 17px; }
  #settings-tabs button.active { background: var(--bg-selected); }
  #settings-tabs .set-side-feedback { display: flex; margin-top: auto; }
  #settings-tabs .set-side-feedback > span { white-space: normal; }
  #settings-title {
    display: block; padding: 18px 22px 0;
    font-size: calc(20px * var(--fs)); font-weight: 700; letter-spacing: -.01em;
  }
  #settings-body { padding: 14px 22px 22px; }
}

/* ---------- Кнопка «добавить» в поле новой задачи ---------- */

#new-submit {
  flex: none;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--blue); color: #fff;
  transition: opacity .15s, transform .12s;
}
#new-submit svg { width: 17px; height: 17px; }
#new-submit:active { transform: scale(.92); }

/* Пока поле пустое — кнопка приглушена и не мешает */
#new-task:not(.has-text) #new-submit {
  background: var(--bg-block); color: var(--text-faint);
}

/* На компьютере вместо кнопки достаточно Enter, поэтому показываем её,
   только когда текст уже введён. На телефоне кнопка нужна всегда:
   там клавиатура не отправляет форму. */
/* На компьютере поля внизу больше нет: задача заводится карточкой прямо
   в списке — пробелом, ⌘N или круглой кнопкой в углу панели. На телефоне
   поле остаётся: там ни клавиш, ни места для карточки под рукой. */
@media (min-width: 761px) {
  #toolbar { display: none; }
}

/* В «Заметках» поле для новой задачи не нужно ни на каком экране */
body.in-notes #toolbar { display: none; }
body.in-notes #fab { display: none; }

/* Круглая кнопка новой задачи. На компьютере она тоже есть — в правом нижнем
   углу списка: и нажать, и потянуть в нужное место, как на телефоне
   (Илья 28.09.2026). Пробел и ⌘N работают по-прежнему. */
#fab {
  display: grid; place-items: center;
  position: fixed; right: 30px; bottom: 28px; z-index: 22;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--blue); color: #fff;
  box-shadow: 0 5px 16px rgba(0,0,0,.24);
  cursor: grab;
  /* Плюс тянут пальцем — жест целиком его, не прокрутка страницы */
  touch-action: none;
  transition: transform .12s ease, opacity .15s;
}
#fab svg { width: 22px; height: 22px; }
#fab:hover { transform: scale(1.06); }
#fab:active { transform: scale(.94); }
body.in-notes #fab { display: none; }
/* На компьютере запасного поля внизу нет: там, где карточку не завести
   (Корзина, Архив, привычки…), плюсу делать нечего */
@media (min-width: 761px) { body.без-плюса #fab { display: none; } }
/* Пока плюс в пути, сама кнопка пустеет — он едет под пальцем */
body.плюс-несут #fab { opacity: 0; }

/* Копия плюса, которая едет за пальцем или курсором */
.плюс-двойник {
  position: fixed; z-index: 1000;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--blue); color: #fff;
  box-shadow: 0 10px 28px rgba(0,0,0,.3);
  pointer-events: none;
  /* Свой слой видеокарты: кружок с размытой тенью иначе перерисовывался
     на каждом сдвиге пальца, и на телефоне не успевал за ним */
  will-change: transform;
}
.плюс-двойник svg { width: 45%; height: 45%; }
/* Щель, куда ляжет новая задача, — серый блок: видно, где она встанет.
   Не прозрачная, как у переносимой задачи: там на её место едет сама строка.
   Двойной класс нужен, чтобы перебить .task.drag-source с его visibility:
   hidden ниже по файлу — из-за него блок и был невидим (Илья 28.09.2026). */
.task.плюс-щель.drag-source {
  visibility: visible;
  background: var(--line);
  border-radius: 8px;
}
/* Клетка календаря, на которую ляжет задача */
.cal-cell.drop-into { box-shadow: inset 0 0 0 2px var(--blue); }

@media (max-width: 760px) {
  #fab {
    right: 18px;
    bottom: calc(22px + env(safe-area-inset-bottom));
    width: 56px; height: 56px;
    box-shadow: 0 6px 20px rgba(0,0,0,.28);
  }
  #fab svg { width: 26px; height: 26px; }
  #fab:hover { transform: none; }
  #fab:active { transform: scale(.94); }

  /* Квадратики задач крупнее компьютерных: пальцем по 12 точкам попадали
     через раз. Сперва сделали в полтора раза, потом убавили на десятую часть
     (Илья 28.09.2026). Отступ сверху держит их по центру первой строки.
     Двойник при переносе живёт вне списка — ему то же правило, иначе квадратик
     в руке сжимался до 12 точек (Илья 05.10.2026) */
  /* Чекбокс справа и крупнее: телефон держат в правой руке, и до левого края
     большой палец тянется через весь экран (Илья выбрал вариант 3, 10.10.2026).
     Значок повтора у шаблонов встаёт туда же, иначе столбик галочек рвался бы.
     Потом на десятую часть меньше: 22 → 19.8. Потом квадратик и значок
     повтора привели к одному среднему размеру (Илья 12.10.2026): квадратик
     19.8, видимый значок повтора 10 — оба стали 14.9. Значок рисуется внутри
     svg с полями, поэтому сам svg крупнее: 14 × 14.9 / 10 = 20.9. Колонка
     у всех одной ширины, svg выходит за неё поровну в обе стороны — центры
     значков на одной вертикали */
  #content .task > .check, .drag-proxy > .check {
    order: 9; margin-left: auto;
    width: calc(14.9px * var(--fs)); height: calc(14.9px * var(--fs));
    margin-top: calc((14.5px * 1.35 - 14.9px) * var(--fs) / 2);
    border-width: 1.5px;
    border-radius: calc(4.1px * var(--fs));
  }
  #content .task > .check svg, .drag-proxy > .check svg { width: calc(10.8px * var(--fs)); height: calc(10.8px * var(--fs)); }
  #content .task.template > .tpl-mark, .drag-proxy > .tpl-mark { order: 9; margin-left: auto; width: calc(14.9px * var(--fs)); }
  /* Будущие повторы в Планах — значок туда же, справа (Илья 12.10.2026) */
  #content .task.ghost > .ghost-mark { order: 9; margin-left: auto; width: calc(14.9px * var(--fs)); }
  #content .task.template > .tpl-mark, .drag-proxy > .tpl-mark,
  #content .task.ghost > .ghost-mark { margin-top: calc((14.5px * 1.35 - 20.9px) * var(--fs) / 2); }
  #content .task.template > .tpl-mark svg, .drag-proxy > .tpl-mark svg,
  #content .task.ghost > .ghost-mark svg { width: calc(20.9px * var(--fs)); height: calc(20.9px * var(--fs));
    /* Широкий svg в узкой колонке сетка прижимает влево, и значок уезжал на
       3 точки вправо от квадратиков — отрицательные поля ставят его по центру */
    margin: 0 calc((14.9px - 20.9px) * var(--fs) / 2); }
  /* В настройках выбрали «Слева» — квадратик и значки повторов на своём
     обычном месте, размер остаётся телефонный */
  :root[data-check-side="left"] #content .task > .check,
  :root[data-check-side="left"] .drag-proxy > .check,
  :root[data-check-side="left"] #content .task.template > .tpl-mark,
  :root[data-check-side="left"] .drag-proxy > .tpl-mark,
  :root[data-check-side="left"] #content .task.ghost > .ghost-mark { order: 0; margin-left: 0; }
  /* Пока открыт лист разделов, круглая кнопка задачи только мешает: она лежит
     выше затемнения и горит синим пятном поверх приглушённого экрана */
  body.nav-open #fab, body.nav-swiping #fab { opacity: 0; pointer-events: none; }

  /* Поле внизу лежит спрятанным и выезжает по нажатию на кнопку: пустая полоса
     через весь низ экрана занимала место и ничего не давала */
  #toolbar { display: none; }
  body.adding #toolbar { display: flex; }
  body.adding #fab { display: none; }

  /* Строки просторнее: пальцем в плотный список попадать тяжело */
  #content .task { padding: 10px 10px; }
  /* Раскрытой карточке — свои поля, как на компьютере. Правило строк выше
     сильнее обычного и отнимало их: текст карточки стоял в 10 px от её края,
     и карточка выглядела тесной (17.09.2026). */
  #content .task.open { padding: 18px 20px 14px; }

  .hint { display: none; }
  #new-task { padding: 7px 8px 7px 13px; gap: 8px; }
  /* Крупнее палец — удобнее попасть */
  #new-submit { width: 34px; height: 34px; }
  #new-task input { font-size: 16px; } /* меньше 16px — iOS зумит страницу при фокусе */

  /* На телефоне календарь висел бы над кнопкой «Когда» — а она внизу длинной
     карточки, и он уезжал за нижний край экрана. Поэтому здесь это окошко
     по центру, как системные диалоги iOS. */
  .when-pop {
    position: fixed; left: 50%; top: 50%; bottom: auto;
    transform: translate(-50%, -50%);
    width: min(300px, calc(100vw - 32px));
    animation: none;
  }
  .when-grid .day { height: 34px; }   /* пальцем попасть в 30px тяжело */

  /* Всё вокруг календаря притухает, нажатие по притухшему закрывает только его.
     Фон лежит в той же карточке под самим окошком; палец по нему список не
     листает. Карточку поднимаем над кнопкой «+» и нижней панелью, иначе они
     светились бы поверх тени и ловили нажатия. */
  .when-backdrop {
    display: block; position: fixed; inset: 0; z-index: 49;
    background: rgba(0,0,0,.38);
    touch-action: none; cursor: pointer;   /* pointer — чтобы Safari на iPhone прислал щелчок */
  }
  .task.open:has(.when-pop) { z-index: 40; }
}

/* ---------- Планы: заголовок дня ---------- */

/* Дата липнет к верху экрана, пока идёт её день. Липнет она внутри своего
   блока .day-group, поэтому следующая дата её выталкивает, а не наезжает
   сверху — так же сделан календарик выбора даты (см. .when-month). */
.day-head {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: baseline; gap: 9px;
  margin: 18px 0 6px; padding: 6px 0;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  /* Задачи выступают на 10px по бокам (у них margin: 0 -10px) — закрываем и эти
     поля, иначе строки проезжали бы в просветах слева и справа от даты */
  box-shadow: 10px 0 0 var(--bg), -10px 0 0 var(--bg);
}
.day-group:first-child .day-head { margin-top: 0; }
/* Дата липнет к верху и накрывает собой то, к чему прокрутились: перешёл к
   задаче поиском или клавишами — а она под шапкой, и нижний ряд кнопок в
   раскрытой карточке ею перехвачен. Просим браузер оставлять запас на высоту
   даты, когда он подводит задачу к краю. */
.day-group .task { scroll-margin-top: 54px; }

/* В «Планах» переключатель «Список / Календарь» стоит в строке даты, справа
   от месяца, и липнет к верху вместе с ней. В саму дату его не положить: дату
   выталкивает следующая, и переключатель уезжал бы с ней. Поэтому он живёт
   отдельно — в липкой полосе нулевой высоты прямо над первой датой, — а месяц
   в каждой дате отодвигается, освобождая ему место. */
.plan-seg-pin { position: sticky; top: 0; z-index: 5; height: 0; }
.plan-seg-pin > .plan-seg { position: absolute; right: 0; margin: 0; }
.plan-seg-pin ~ .day-group .day-month { margin-right: calc(var(--plan-seg-w, 150px) + 14px); }

.day-num { font-size: calc(21px * var(--fs)); font-weight: 700; letter-spacing: -.02em; }
.day-name { font-size: calc(14px * var(--fs)); color: var(--text-muted); }
.day-month { font-size: calc(12.5px * var(--fs)); color: var(--text-faint); margin-left: auto; }

/* ---------- Раздел «Вечером» ---------- */

.section .ico { width: 17px; height: 17px; flex: none; }

/* ---------- Корзина ---------- */

.trash-bar { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.task.trashed .task-title { color: var(--text-muted); }
.task.trashed { align-items: center; }

/* ---------- Поиск ---------- */

.search-box { margin-bottom: 8px; }
#search-input {
  width: 100%;
  font-size: calc(16px * var(--fs));
  padding: 10px 13px;
  background: var(--bg-block);
  border-radius: 9px;
}
.task.place { align-items: center; cursor: pointer; }
.task.place .ico { width: 19px; height: 19px; flex: none; }

/* ---------- Кнопка-переключатель в раскрытой задаче ---------- */

.chip-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; color: var(--text-muted);
  padding: 3px 9px 3px 7px; border-radius: 5px;
  border: 1px solid var(--line);
}
.chip-btn .ico { width: 14px; height: 14px; }
.chip-btn:hover { background: var(--bg-hover); }
.chip-btn.on { color: #7b8dd6; border-color: #7b8dd6; background: color-mix(in srgb, #7b8dd6 12%, transparent); }

/* ---------- Повторяющиеся задачи ---------- */

/* Своего цвета у повторения больше нет: фиолетовый спорил и со строкой задачи,
   и с окном настройки. Везде обычные цвета системы. */

.tool.set.repeat { color: var(--text); }

/* Значок повтора стоит за названием задачи, рядом со значками заметки и
   списка (просьба Ильи 19.09.2026): один ряд значков вместо двух мест */
.mark-repeat {
  display: inline-flex; align-items: center;
  color: var(--text-muted);
}
.mark-repeat svg { width: 13px; height: 13px; }
.task.selected:not(.open) .mark-repeat { color: rgba(255,255,255,.78); }
.task.later .mark-repeat { color: var(--text-faint); }
.task-sub .chip.repeat { color: var(--text); }

/* Правило повторения — строкой под карточкой, справа */
.repeat-under {
  display: flex; align-items: center; gap: 6px;
  margin: 6px 0 10px auto;
  padding: 3px 6px; border-radius: 6px;
  font-size: calc(12.5px * var(--fs)); color: var(--text-muted);
}
.repeat-under svg { width: 14px; height: 14px; flex: none; }
.repeat-under i { font-style: normal; color: var(--text-faint); margin-left: 1px; }
.repeat-under:hover { background: var(--bg-hover); color: var(--text); }

/* Шаблон в разделе «Повторяющиеся»: отмечать нечего — это чертёж, а не задача.
   Вместо квадратика в той же колонке стоит значок повтора, поэтому названия
   шаблонов и обычных задач начинаются с одного места */
.task.template > .tpl-mark {
  flex: none; width: calc(12.1px * var(--fs));
  /* по центру первой строки названия, как квадратик */
  margin-top: calc((14.5px * 1.35 - 14px) * var(--fs) / 2);
  display: grid; place-items: center; color: var(--text-muted);
}
.task.template > .tpl-mark svg { width: calc(14px * var(--fs)); height: calc(14px * var(--fs)); }
.task.template.selected:not(.open) > .tpl-mark { color: rgba(255,255,255,.78); }
.task.template .task-title { color: var(--text); }

/* Будущий повтор в Планах: бледный и без кружка — задачи ещё нет */
.task.ghost { align-items: flex-start; opacity: .62; cursor: pointer; }
/* Выделенный будущий повтор виден в полную силу: бледно-синяя строка читалась
   хуже обычной выделенной */
.task.ghost.selected { opacity: 1; }
/* Та же колонка и та же ширина, что у квадратика: иначе названия будущих
   повторов начинались правее обычных задач (просьба Ильи 18.09.2026) */
.task.ghost .ghost-mark {
  flex: none; width: calc(12.1px * var(--fs));
  margin-top: calc((14.5px * 1.35 - 14px) * var(--fs) / 2);
  display: grid; place-items: center; color: var(--text);
}
.task.ghost .ghost-mark svg { width: calc(14px * var(--fs)); height: calc(14px * var(--fs)); }
/* Повтор из списка — цветом списка, как квадратик у его задач */
.task.ghost:not(.selected) .ghost-mark { color: var(--check-color, var(--text)); }
.task.ghost:hover { opacity: .85; }

/* ---------- Вопрос «Сохранить для будущих повторов?» ---------- */

.повтор-вопрос {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(0,0,0,.28);
  display: grid; place-items: center;
  padding: 20px;
}
.повтор-вопрос-окно {
  width: 100%; max-width: 360px;
  background: var(--bg); color: var(--text);
  border-radius: 12px;
  box-shadow: 0 12px 48px rgba(0,0,0,.28);
  padding: 18px 18px 14px;
}
.повтор-вопрос-окно h3 {
  margin: 0 0 6px;
  font-size: calc(15px * var(--fs)); font-weight: 600;
}
.повтор-вопрос-окно p {
  margin: 0 0 16px;
  font-size: calc(13.5px * var(--fs)); line-height: 1.45;
  color: var(--text-muted);
}
.повтор-вопрос-кнопки { display: flex; justify-content: center; gap: 8px; }
/* Кнопки делят ширину окна поровну (Илья 10.10.2026) */
.повтор-вопрос-кнопки .set-btn { flex: 1; }
@media (max-width: 760px) {
  .повтор-вопрос-кнопки .set-btn { padding: 10px 16px; font-size: 14px; }
}

/* ---------- Окно «Повторять» ---------- */

#repeat-backdrop {
  position: fixed; inset: 0; z-index: 45;
  background: rgba(0,0,0,.28);
  display: grid; place-items: center;
  padding: 20px;
}
#repeat-backdrop[hidden] { opacity: 0; display: none; }
/* Окно прибито верхом, а не стоит по центру: оно меняет высоту от каждого
   нажатия (появилось поле «N раз», дни недели), и по центру весь блок
   прыгал вверх-вниз вслед за высотой (Илья 28.09.2026). Сверху — постоянный
   отступ, растёт окно только вниз */
#repeat-backdrop { align-items: start; padding: max(14px, 3vh) 20px 14px; }
@starting-style { #repeat-backdrop:not([hidden]) { opacity: 0; } }

#repeat-dialog {
  /* Точка отсчёта для выпадающего календаря: он лежит внутри прокручиваемого
     #repeat-body, и если считать его место от строки с датой, край прокрутки
     срезал бы его снизу. Отсчёт от самого окна — календарь свободно ложится
     поверх и строк, и подвала. */
  position: relative;
  width: 100%; max-width: 600px; max-height: 100%;
  background: var(--bg);
  border-radius: 12px;
  box-shadow: 0 12px 48px rgba(0,0,0,.28);
  display: flex; flex-direction: column;
  overflow: hidden;
}

#repeat-body { padding: 14px 18px 16px; overflow-y: auto; }

.rep-title {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: calc(15px * var(--fs)); font-weight: 500;
  padding-bottom: 9px; margin-bottom: 2px;
  border-bottom: 1px solid var(--line);
}
.rep-title svg { width: 17px; height: 17px; flex: none; color: var(--text-muted); margin-top: 4px; }
.rep-title textarea {
  flex: 1; min-width: 0;
  font: inherit; font-family: inherit;
  font-size: calc(15px * var(--fs)); font-weight: 500; line-height: 1.35;
  color: var(--text); background: transparent; border: 0; padding: 2px 4px;
  border-radius: 6px;
  resize: none; overflow: hidden;
  word-break: break-word;
}
.rep-title textarea:hover { background: var(--bg-block); }
.rep-title textarea:focus { background: var(--bg-block); outline: none; }

/* Описание — как в раскрытой карточке задачи: своя строка под названием */
.rep-notes {
  width: 100%; resize: none; overflow: hidden;
  font: inherit; font-size: calc(13.5px * var(--fs)); color: var(--text);
  background: transparent; border: 0; padding: 4px;
  border-radius: 6px;
  margin-bottom: 2px;
}
.rep-notes::placeholder { color: var(--text-faint); }
.rep-notes:hover { background: var(--bg-block); }
.rep-notes:focus { background: var(--bg-block); outline: none; }

/* Пункты чек-листа правила — под описанием, как в карточке задачи */
.rep-checks { display: flex; flex-direction: column; gap: 2px; margin: 0 0 6px; }
.rep-check { display: flex; align-items: flex-start; gap: 6px; padding-left: 4px; }
.rep-box {
  flex: none; width: 13px; height: 13px; margin-top: 4px;
  border: 1.5px solid var(--text-faint); border-radius: 4px;
}
.rep-check textarea {
  flex: 1; min-width: 0;
  font: inherit; font-size: calc(13.5px * var(--fs)); line-height: 1.35;
  color: var(--text); background: transparent; border: 0; padding: 1px 4px;
  border-radius: 6px; resize: none; overflow: hidden;
}
.rep-check textarea:hover { background: var(--bg-block); }
.rep-check textarea:focus { background: var(--bg-block); outline: none; }

/* Переключатель «важное» — тот же вид, что у дней недели, но с подписью */
.rep-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 10px; border-radius: 6px;
  font-size: 12.5px; color: var(--text-muted);
  background: var(--bg-block);
}
.rep-toggle svg { width: 14px; height: 14px; }
.rep-toggle:hover { background: var(--bg-selected); }
.rep-toggle.active { background: var(--pink); color: #fff; }

/* Строка окна повтора читается предложением: «Раз в 1 неделю в пн, ср».
   Раньше это был столбик «подпись — поле», и окно выходило узким и длинным. */
.rep-line {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 0;
}
.rep-cap { color: var(--text-muted); font-size: calc(13.5px * var(--fs)); flex: none; }
/* Блок с самим правилом — отдельной плашкой, как в системном окне */
.rep-frame {
  background: var(--bg-block);
  border-radius: 10px;
  padding: 1px 12px;
  margin: 6px 0 8px;
}
.rep-frame .rep-line + .rep-line { border-top: 1px solid var(--line); }
/* Ближайшие даты — справа, светлее: это подсказка, а не поле */
/* «дальше: 31 авг., 1 сент.» — подсказка к полю даты, поэтому стоит вплотную
   за ним. Раньше её отжимало к правому краю, и она читалась как отдельная
   колонка, не связанная с датой. */
.rep-next { color: var(--text-faint); font-size: calc(12.5px * var(--fs)); }

/* Кнопка-дата вместо системного поля: календарь у нас свой, один и тот же
   в карточке задачи и здесь */
.rep-date {
  font-size: calc(12.5px * var(--fs)); color: var(--text);
  background: var(--bg); border: 1px solid var(--line); border-radius: 6px;
  padding: 5px 10px;
}
.rep-date:hover { border-color: var(--text-faint); }
.rep-date.open { background: var(--bg-selected); border-color: transparent; }
/* Календарь здесь — то же самое всплывающее окошко, что и в карточке задачи
   (класс when-pop): те же клетки, тот же фон, та же тень. Раньше он раскрывался
   строкой прямо внутри плашки, растягивался во всю её ширину — клетка выходила
   76px в ширину при 30px в высоту — и на календарь из карточки не походил вовсе.
   Разница только в направлении: в карточке кнопка «Когда» стоит у нижнего края
   и окошко идёт вверх, а тут строка с датой лежит посреди окна и календарь
   выпадает из-под неё вниз. Класс .up ставит renderRepeat, если снизу не влезло. */
.rep-date-wrap { display: inline-flex; }
/* Лента недель выше, чем у окошка в карточке, ровно на то, что там занимают
   «Сегодня», «Позже сегодня» и «Очистить»: здесь этих кнопок нет — для правила
   повтора они ничего не значат. Окошко от этого выходит того же размера,
   268×351, а место под ними отдано неделям — их видно на три больше. */
.rep-cal .when-grid { max-height: 306px; }
/* Место календаря считает renderRepeat: под кнопкой, а если снизу не влезает —
   над ней. Отсчёт идёт от окна повтора, поэтому здесь только начало координат */
.rep-cal.when-pop { bottom: auto; top: 0; left: 0; }
@media (max-width: 760px) {
  /* На телефоне окошко выходит по центру экрана — как и календарь в карточке.
     Правило стоит здесь, а не в общем блоке телефона: там его перебивал бы по
     весу селектор .rep-cal.when-pop, и календарь уезжал за нижний край. */
  .rep-cal.when-pop { position: fixed; top: 50%; left: 50%; }
}
.rep-extra { gap: 10px; }
.rep-extra select { max-width: 190px; }
.rep-line input[type=number], .rep-line input[type=date], .rep-line select {
  font: inherit; font-size: calc(12.5px * var(--fs)); color: var(--text);
  background: var(--bg); border: 1px solid var(--line); border-radius: 6px;
  padding: 5px 8px;
}
/* Поля внутри плашки — на её фоне, а не на общем: иначе они на нём теряются */
.rep-extra input, .rep-extra select { background: var(--bg-block); border-color: transparent; }
.rep-num { width: 56px; text-align: center; }
.rep-hint { font-size: 12px; color: var(--text-muted); }

/* Дни недели — семь кнопок, можно выбрать несколько */
.rep-days { display: flex; gap: 3px; }
.rep-days button {
  width: 30px; height: 28px; border-radius: 6px;
  font-size: 12px; color: var(--text-muted);
  background: var(--bg-block);
}
.rep-days button:hover { background: var(--bg-selected); }
.rep-days button.active { background: var(--text); color: var(--bg); font-weight: 600; }

/* Итог словами: главная проверка, что настроил то, что хотел */
/* Плитки окна повтора (вариант «Плитки», Илья 28.09.2026): у каждой части
   правила своя плашка — подпись капсом сверху, ниже крупное значение */
.rep-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.rep-tile {
  background: var(--bg-block); border-radius: 14px; padding: 11px 14px 12px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px; min-width: 0;
}
.rep-tile.wide { grid-column: 1 / -1; }
/* «Как повторять»: подпись слева, переключатель справа. На узком экране
   переключатель уходит под подпись, как раньше */
.rep-tile.inline { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 16px; }
.rep-tile.inline > .seg { flex: 1 1 280px; align-self: center; }
.rep-tile h4 {
  margin: 0; display: flex; gap: 7px; align-items: center;
  font-size: calc(11.5px * var(--fs)); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted);
}
.rep-tile h4 svg { width: 14px; height: 14px; }
.rep-tile-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rep-tile-sub { color: var(--text-muted); font-size: calc(12.5px * var(--fs)); margin-top: -3px; }
.rep-tile-big { font-size: calc(22px * var(--fs)); font-weight: 600; color: var(--text); line-height: 1.15; }
/* Переключатель «Как повторять» — во всю ширину плитки, половина на половину */
.rep-tile.wide > .seg { align-self: stretch; }
.rep-tile.wide > .seg button { flex: 1; }
/* Поля внутри плитки — на общем фоне окна: на фоне плитки они потерялись бы */
.rep-tile input[type=number], .rep-tile select {
  font: inherit; font-size: calc(12.5px * var(--fs)); color: var(--text);
  background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px;
}
/* Дата старта — крупным значением, как «Никогда» в соседней плитке. Нажимается
   по-прежнему: рядом раскрывается тот же календарь */
.rep-tile .rep-date-wrap:first-of-type > .rep-date,
.rep-tile > .rep-date-wrap > .rep-date {
  font-size: calc(22px * var(--fs)); font-weight: 600; padding: 0 6px; margin-left: -6px;
  background: none; border-color: transparent; line-height: 1.15;
}
.rep-tile > .rep-date-wrap > .rep-date:hover { background: var(--bg-selected); }
/* Список — крупным значением, но это всё тот же выпадающий список */
.rep-tile select.rep-tile-select {
  font-size: calc(18px * var(--fs)); font-weight: 600; background: none; border-color: transparent;
  padding: 0 4px; margin-left: -4px; max-width: 100%;
  /* Шириной по выбранному списку, а не по самому длинному в выпадашке:
     иначе стрелка уезжала за край плитки */
  field-sizing: content;
}
.rep-tile select.rep-tile-select:hover { background: var(--bg-selected); }
.rep-tile .rep-toggle { background: var(--bg); }
/* Под курсором кнопки плиток отзываются: невыбранный вариант светлеет и
   получает подложку, выбранный — чуть ярче (Илья 28.09.2026) */
@media (hover: hover) {
  .rep-tile .seg button { transition: background .12s, color .12s; }
  .rep-tile .seg button:not(.active):hover { background: var(--bg-selected); color: var(--text); }
  .rep-tile .seg button.active:hover { filter: brightness(1.25); }
  .rep-tile .rep-days button { transition: background .12s, color .12s; }
  .rep-tile .rep-days button:not(.active):hover { color: var(--text); }
  .rep-tile .rep-days button.active:hover { filter: brightness(.9); }
  .rep-tile input[type=number]:hover, .rep-tile select:not(.rep-tile-select):hover { border-color: var(--text-faint); }
  .rep-tile .rep-toggle { transition: background .12s, color .12s; }
  .rep-tile .rep-toggle:not(.active):hover { background: var(--bg-selected); color: var(--text); }
}
/* Список и «важное» — одной строкой: в широкой плитке столбиком было пусто */
.rep-tile-list { gap: 12px 14px; }
@media (max-width: 420px) {
  .rep-tiles { grid-template-columns: 1fr; }
}

.rep-desc {
  margin-top: 6px; padding-top: 6px;
  border-top: 1px solid var(--line);
  font-size: calc(13.5px * var(--fs)); color: var(--text); font-weight: 500;
}

#repeat-foot {
  padding: 10px 18px; border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-sidebar);
}

/* На телефоне в одну строку не влезает: «Никогда · После N раз · До даты» упирается
   в край. Кладём подпись над управлением — тогда хватает даже узкого экрана. */
@media (max-width: 480px) {
  #repeat-body { padding: 16px 16px 18px; }
  .rep-frame { padding: 2px 11px; }
  /* На узком экране «дальше: ...» уводить вправо некуда — кладём под строку */
  .rep-next { margin-left: 0; width: 100%; text-align: left; }
  .rep-days { width: 100%; justify-content: space-between; }
  .rep-days button { flex: 1; }
}
#repeat-foot [hidden] { display: none; }
.set-btn.primary { background: var(--blue); color: #fff; }
.set-btn.primary:hover { background: color-mix(in srgb, var(--blue) 88%, #000); }

/* ---------- Перетаскивание (мышью и пальцем) ---------- */

/* Пальцем задачу берут удержанием, поэтому системное выделение текста
   и вызов меню по долгому нажатию нужно отключить — иначе они мешают */
#content .task {
  touch-action: pan-y;
  -webkit-touch-callout: none;
}

/* За курсором едет сама строка — синяя, приподнятая над списком,
   а на её месте в списке остаётся щель ровно её высоты. Соседи разъезжаются
   заранее, поэтому видно, куда задача встанет, ещё до того как её отпустили. */
.drag-proxy {
  position: fixed; z-index: 60;
  margin: 0; pointer-events: none;
  cursor: grabbing;
  background: var(--drag-bg); color: #fff;
  border-radius: 7px;
  box-shadow: 0 10px 28px rgba(0,0,0,.22), 0 2px 6px rgba(0,0,0,.14);
  will-change: transform;   /* свой слой: тень не перерисовывается на каждом сдвиге */
  /* Ширину НЕ анимируем. Раньше она плавно росла обратно, а строка внутри
     показывалась сразу же, и на эти 0,13 секунды двойник превращался в узкую
     синюю полосу с текстом в столбик во весь экран — тот самый «баг с полоской
     сбоку». Теперь ширина меняется в тот же миг, что и содержимое. */
  transition: border-radius .13s ease, padding .13s ease;
}
.drag-proxy .task-sub, .drag-proxy .marks, .drag-proxy .task-sub .chip { color: rgba(255,255,255,.78); }
/* Квадратик у несомой задачи — как у обычной, см. выделенную выше */

/* Над боковой панелью задача сжимается в кружок со счётчиком — иначе строка
   во всю ширину накрывала бы проекты, на которые её и несут */
.drag-count { display: none; font-size: 12px; font-weight: 600; line-height: 1; }
/* Ширину задаёт ТОЛЬКО этот файл, а не код: раньше код ставил её вручную рядом
   с классом, и они могли разойтись — тогда двойник оставался в полную высоту,
   но шириной в 24 пикселя, и текст вставал в столбик синей полосой поверх
   панели («баг с полоской сбоку»). Теперь ширина следует за классом сама.
   Полная ширина приходит переменной --w, её ставит код в начале переноса. */
.drag-proxy { width: var(--w, auto); overflow: hidden; }
/* Форма — как у строки в списке: её высота и поля (их ставит код при захвате) */
.drag-proxy:not(.mini) { box-sizing: border-box; min-height: var(--h, 0); padding: var(--pad, 0); }
.drag-proxy.mini {
  width: 24px; height: 24px; padding: 0;
  border-radius: 50%;
  display: grid; place-items: center;
  box-shadow: 0 3px 10px rgba(0,0,0,.3);
}
.drag-proxy.mini > *:not(.drag-count) { display: none; }
.drag-proxy.mini .drag-count { display: block; }

/* Щель: строка остаётся в потоке и держит место, но её не видно */
.task.drag-source { visibility: hidden; }

/* Пока тащим — страница не прокручивается и текст не выделяется */
body.is-dragging { user-select: none; -webkit-user-select: none; overflow: hidden; }
body.is-dragging #content .task { touch-action: none; }
body.is-dragging #content .task:hover { background: none; }

/* Проект в боковой панели подсвечивается, когда на него можно бросить */
.nav-item.drop-into {
  background: color-mix(in srgb, var(--blue) 18%, transparent);
  box-shadow: inset 0 0 0 1.5px var(--blue);
}

@media (min-width: 761px) {
  #content .task { cursor: grab; }
  #content .task.open { cursor: default; }
}

/* ---------- Привычки ---------- */
/* Табло: слева названия, справа лента дней. Отмеченные дни подряд сливаются
   в одну полосу, и чем длиннее серия, тем она светлее — видно не «сколько
   всего», а держится ли ряд. */

.habits-head { align-items: center; }
.habit-nav { margin-left: auto; display: flex; gap: 2px; }
.habit-arrow {
  width: 30px; height: 30px; border-radius: 7px;
  color: var(--text-faint); font-size: 19px; line-height: 1;
}
.habit-arrow:hover { background: var(--bg-hover); color: var(--text); }
/* На краях ленты стрелке ехать некуда — гасим, чтобы нажатие «в никуда»
   не выглядело поломкой */
.habit-arrow[disabled] { opacity: .3; cursor: default; }
.habit-arrow[disabled]:hover { background: none; color: var(--text-faint); }

.habits { display: flex; align-items: flex-start; gap: 10px; }

.habit-side { flex: none; width: 210px; position: relative; z-index: 3; }
/* Края ленты не режут кружки ножом: у названий и у правого края клетки
   растворяются в фоне. Сплошная часть слева закрывает зазор между
   названиями и лентой, дальше идёт мягкий переход */
.habits { position: relative; }
.habit-side::after, .habits::after {
  content: ''; position: absolute; top: 0; bottom: 0; z-index: 3; pointer-events: none;
}
.habit-side::after { left: 100%; width: 38px; background: linear-gradient(to right, var(--bg) 10px, transparent); }
.habits::after { right: 0; width: 28px; background: linear-gradient(to left, var(--bg), transparent); }
.habit-side-head { height: 46px; }          /* пустой угол над названиями */

.habit-name {
  display: flex; align-items: center; gap: 9px;
  height: 44px; padding: 0 10px;
  border-radius: 9px;
}
.habit-name:hover { background: var(--bg-hover); }
/* Привычку переставляют за название: курсор показывает, что строку можно взять */
.habit-name { cursor: default; }
.habit-name .habit-title { cursor: text; }
/* Двойник строки, который едет за курсором, и щель на её месте */
.habit-name.habit-proxy {
  position: fixed; z-index: 60;
  margin: 0; pointer-events: none; cursor: grabbing;
  background: var(--bg-selected); color: var(--text);
  box-shadow: 0 10px 28px rgba(0,0,0,.22), 0 2px 6px rgba(0,0,0,.14);
}
.habit-name.habit-proxy .habit-del { display: none; }
.habit-name.drag-source { visibility: hidden; }
.habit-row.drag-source { opacity: .25; }
body.is-dragging .habit-name:hover { background: none; }
body.is-dragging .habit-name { touch-action: none; }
.habit-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); flex: none; }
/* Кружок — ручка переноса. Сам он маленький, но берётся за всю высоту строки:
   невидимая подложка вокруг, иначе в него попадали бы с третьей попытки */
.habit-dot { position: relative; cursor: grab; transition: transform .14s ease; }
.habit-dot::before { content: ''; position: absolute; inset: -19px -9px; }
.habit-name:hover .habit-dot { transform: scale(1.5); }
body.is-dragging .habit-dot { cursor: grabbing; }
/* Многострочное поле: длинное название переносится на вторую строку, а не
   обрезается. Высоту подгоняет подогнатьНазвание() — не больше двух строк,
   чтобы строка привычки осталась вровень со своими кружками */
.habit-title {
  flex: 1; min-width: 0;
  display: block; resize: none; overflow: hidden; overflow-wrap: anywhere;
  padding: 0; line-height: 1.25; height: 1.25em; max-height: 2.5em;
  font-size: calc(14.5px * var(--fs));
}
.habit-del {
  opacity: 0; flex: none;
  width: 22px; height: 22px; border-radius: 6px;
  color: var(--text-faint); font-size: 12px;
}
.habit-name:hover .habit-del { opacity: 1; }
.habit-del:hover { background: var(--bg-selected); color: var(--text); }

.habit-add {
  display: flex; align-items: center; gap: 6px;
  margin-top: 4px; padding: 6px 10px; border-radius: 8px;
  font-size: calc(13.5px * var(--fs)); color: var(--text-faint);
}
.habit-add:hover { background: var(--bg-hover); color: var(--text); }

/* Лента дней прокручивается вбок, полосу прокрутки не показываем.
   На компьютере её тащат мышкой (см. app.js): полосы нет, а колесом вбок
   крутят не все мыши — без этого до начала месяца было не добраться. */
/* overscroll-behavior-x: доехав до края ленты, жест не передаётся странице и
   не превращается в «назад». Это и позволило снять с «Привычек» сторожа жеста
   на JS, из-за которого Safari листал ленту только основным потоком */
.habit-scroll { flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; cursor: grab;
                overscroll-behavior-x: contain; }
.habit-scroll::-webkit-scrollbar { display: none; }
/* Пока тащат — курсор-кулак поверх всего, и текст не выделяется */
body.habit-drag, body.habit-drag * { cursor: grabbing !important; user-select: none; }
/* Пока тащат, клетки под курсором не нужны: ни подсветки, ни щелчка всё равно
   не будет. Так браузер не перебирает их на каждом движении мыши */
body.habit-drag .habit-grid { pointer-events: none; }

/* Сетка — отдельным слоем (will-change). Без него Safari при каждом сдвиге
   ленты заново рисовал только что показавшиеся клетки: первый проход по
   месяцу шёл рывками и с пустыми клетками, ровно — только после нескольких
   прокруток туда-обратно. Своим слоем сетка рисуется заранее и при прокрутке
   просто едет. Замер в приложении из Дока 24.09.2026: подтормаживающих
   кадров было 8–17 на смахивание, стало 0, лента обновляется 60 раз в секунду
   вместо ~40. Остальные варианты (без свечения, без наведения, без черт
   месяца) не помогали. */
.habit-grid { display: inline-block; min-width: 100%; will-change: transform; }

/* Граница месяца в сплошной ленте — не черта, а разрыв (Илья 30.09.2026):
   колонка первого числа шире на --разрыв, и всё её содержимое сдвинуто
   вправо. Перемычка серии у последнего дня месяца длиннее ровно на разрыв,
   поэтому ряд через границу месяцев не рвётся. У первого числа вместо дня
   недели стоит название месяца, поэтому оно чуть темнее. */
.habits { --разрыв: 24px; }
.habit-day-head.month-start,
.habit-cell.month-start,
.habit-total.month-start { padding-left: var(--разрыв); }
.habit-cell.month-end.link-right::after { width: calc(100% + var(--разрыв)); }
.hd-wd.месяц { color: var(--text-muted); font-weight: 600; }
.habit-row { display: grid; grid-template-columns: var(--колонки, repeat(var(--days), 40px)); }

/* Шапка: число и день недели */
.habit-day-head {
  height: 46px; display: grid; place-items: center; align-content: center; gap: 1px;
  border-radius: 9px 9px 0 0;
}
.hd-num { font-size: calc(13px * var(--fs)); color: var(--text); font-variant-numeric: tabular-nums; }
.hd-wd { font-size: 10.5px; color: var(--text-faint); }
.habit-day-head.today .hd-num { font-weight: 700; color: var(--blue); }
.habit-day-head.today .hd-wd { color: var(--blue); }

/* Клетка дня: бусина по центру, при серии — перемычка вправо до соседа.
   Бусина растёт и теплеет вместе с непрерывным рядом: одинокий день —
   маленькая бирюзовая, десятый подряд — крупная золотая (цвет и размер
   считает renderHabits, здесь только правила). Так «соединил ещё один день»
   видно не подписью, а самой отметкой. */
.habit-cell {
  height: 44px; position: relative;
  display: grid; place-items: center;
  cursor: pointer;
}
.habit-cell::before {
  content: ''; position: relative; z-index: 2;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid var(--check-border);
  transition: background .12s, border-color .12s;
}
.habit-cell:hover:not(.future)::before { border-color: var(--teal); }
.habit-cell.on::before {
  width: var(--s); height: var(--s);
  border-color: transparent;
  background: var(--c);
}
/* С пятого дня бусина начинает светиться, и свечение растёт вместе с рядом */
.habit-cell.on.deep::before { box-shadow: 0 0 calc((6 + var(--k)) * 1px) -1px var(--c); }
/* Перемычка тоже толстеет: длинный ряд читается как тёплая нить с бусинами */
.habit-cell.link-right::after {
  content: ''; position: absolute; z-index: 1;
  top: 50%; left: 50%; width: 100%; height: var(--link-h, 4px);
  transform: translateY(-50%);
  background: var(--link-c, var(--teal));
  border-radius: 4px;
}
.habit-cell.future { cursor: default; }
.habit-cell.future::before { opacity: .35; }
/* Обведён вчерашний день: привычки отмечают за прошедший день, сегодняшний
   ещё идёт. Обводка — подсказка, куда нажимать, а не запрет на остальные дни */
.habit-cell.aim::before {
  outline: 2px solid color-mix(in srgb, var(--text) 80%, transparent);
  outline-offset: 3px;
}

/* Нажали — бусина подпрыгивает, и по её серии в обе стороны бежит волна:
   отклик на нажатие и есть та причина, по которой к привычкам возвращаются */
@keyframes habit-pop { 0% { transform: scale(.8); } 55% { transform: scale(1.16); } 100% { transform: scale(1); } }
@keyframes habit-wave { 0%, 100% { filter: none; } 45% { filter: brightness(1.45); } }
.habit-cell.just::before { animation: habit-pop .34s cubic-bezier(.34, 1.56, .64, 1) var(--pd, 0ms); }
.habit-cell.wave::before, .habit-cell.wave::after { animation: habit-wave .5s ease var(--wd, 0ms); }
:root[data-motion="less"] .habit-cell::before,
:root[data-motion="less"] .habit-cell::after { animation: none; }

/* Итог дня: сколько привычек удержано */
.habit-total {
  height: 30px; display: grid; place-items: center;
  font-size: calc(12.5px * var(--fs)); color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  border-radius: 0 0 9px 9px;
}

.habit-empty { padding: 30px 0; color: var(--text-muted); }
.habit-empty p { margin-bottom: 12px; font-size: calc(14px * var(--fs)); }
.habit-empty .habit-add { margin-left: -10px; }

@media (max-width: 760px) {
  .habit-side { width: 132px; }
  .habit-title { font-size: calc(13px * var(--fs)); }
  .habits { gap: 8px; }
}
/* Наведения на телефоне нет, и невидимый крестик зря съедал место у названия:
   показываем его только пока название правят */
@media (max-width: 760px), (hover: none) {
  .habit-del { display: none; }
  .habit-name:focus-within .habit-del { display: block; opacity: 1; }
}

/* ---------- Заметки ---------- */
/* Заметка — не задача: у неё нет кружка, срока и проекта. Список выглядит
   стопкой карточек, а сама заметка занимает раздел целиком: длинный текст
   в узкой строке списка читать невозможно. */

/* Кнопки в шапке раздела. Размер выбран под палец: 32 px были мелковаты, до
   «плюса» приходилось целиться. Значок внутри тоже подрос, иначе кнопка
   выглядела бы пустой рамкой вокруг маленького крестика. */
.head-add {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 10px;
  margin-left: auto; flex: none;
  color: var(--text-muted);
  transition: background .1s, color .1s;
}
.head-add svg { width: 23px; height: 23px; }
/* На телефоне ещё крупнее: там по кнопке попадают пальцем, а не курсором */
@media (max-width: 760px) {
  .head-add { width: 44px; height: 44px; }
  .head-add svg { width: 25px; height: 25px; }
}
.head-add:hover { background: var(--bg-hover); color: var(--text); }

/* ----- Заметки: слева список, справа текст, как в «Заметках» на маке -----
   Раздел занимает всё окно целиком, поэтому обычные отступы #content здесь
   сняты, а прокрутка живёт внутри каждого столбца отдельно: список листается
   сам по себе, длинный текст — сам по себе. */
body.notes-view #main { overflow: hidden; }
#content.notes-full { padding: 0; height: 100%; }

.notes-split { display: flex; height: 100%; min-height: 0; }

.notes-side {
  width: 300px; flex: none;
  display: flex; flex-direction: column; min-height: 0;
  border-right: 1px solid var(--line);
}
.notes-side-head {
  display: flex; align-items: center; gap: 9px;
  padding: 18px 14px 12px 18px;
  flex: none;
}
.notes-side-head .ico { width: 22px; height: 22px; flex: none; }
.notes-side-head h1 { font-size: calc(19px * var(--fs)); font-weight: 700; letter-spacing: -.02em; }
.notes-side-head .head-add { margin-left: auto; }
/* Кнопка «отдельным окном» стоит перед «+», к правому краю прижат только «+» */
.notes-side-head .note-window { margin-left: auto; }
.notes-side-head .note-window + .head-add { margin-left: 0; }
/* На телефоне отдельных окон не бывает — window.open там открыл бы вкладку.
   Раз соседняя кнопка спрятана, «плюсу» возвращаем прижим к правому краю:
   правило выше обнуляло его в расчёте на видимого соседа, и на телефоне
   «плюс» стоял вплотную к заголовку, посреди шапки. */
@media (max-width: 760px) {
  .note-window { display: none; }
  .notes-side-head .note-window + .head-add { margin-left: auto; }
}
/* Совет «как сделать значок в Доке». Стоит посреди экрана поверх заметок:
   сбоку в столбце его не замечали. Закрывается «Понятно», щелчком мимо и Esc. */
.dock-tip-back {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(0,0,0,.32);
  display: grid; place-items: center;
  padding: 20px;
}
.dock-tip {
  width: 100%; max-width: 370px;
  background: var(--bg);
  border-radius: 12px;
  box-shadow: 0 12px 48px rgba(0,0,0,.28);
  padding: 18px 20px 16px;
  font-size: calc(13.5px * var(--fs));
  line-height: 1.45;
  color: var(--text-muted);
}
.dock-tip b { color: var(--text); font-weight: 600; }
.dock-tip > b { display: block; font-size: calc(15px * var(--fs)); margin-bottom: 9px; }
.dock-tip p { margin: 8px 0 0; }
.dock-tip-ok { margin-top: 15px; }

/* position: relative — чтобы удалённая строка могла догаснуть на своём месте */
.notes-scroll { flex: 1; overflow-y: auto; padding: 0 10px 24px; min-height: 0; position: relative; }

/* Подзаголовок группы: «Закреплено» и «Заметки» */
.note-group {
  padding: 12px 8px 5px;
  font-size: calc(12px * var(--fs)); font-weight: 700;
  color: var(--text-faint); text-transform: uppercase; letter-spacing: .04em;
}

/* Строка списка. В узком столбце в одну линию не влезть — заголовок сверху,
   продолжение под ним, время в углу */
/* Обойма строки: под самой строкой лежат кнопки, а строка ездит поверх них.
   Пальцем — как в «Заметках»: вправо открывается закрепление, влево удаление.
   touch-action: pan-y — чтобы список по-прежнему листался вверх-вниз, а вбок
   жест доставался нам. */
.note-swipe {
  position: relative; overflow: hidden;
  border-radius: var(--radius); margin-bottom: 1px;
  touch-action: pan-y;
}
/* Кнопки видно только во время жеста и пока строка стоит открытой. Иначе они
   просвечивали цветными уголками сквозь скругления строки, и список выглядел
   так, будто заметки чем-то помечены. */
.note-act {
  position: absolute; top: 0; bottom: 0; width: 74px;
  display: grid; place-items: center;
  color: #fff;
  opacity: 0; pointer-events: none;
  transition: opacity .12s ease;
}
.note-swipe.тянут-вправо .note-act.left,
.note-swipe.тянут-влево  .note-act.right { opacity: 1; pointer-events: auto; }
.note-act svg { width: 21px; height: 21px; }
.note-act.left  { left: 0;  background: var(--pin-orange); }
.note-act.right { right: 0; background: var(--swipe-del); }

.note-row {
  display: grid; grid-template-columns: 1fr auto; gap: 1px 8px;
  padding: 8px 9px;
  border-radius: var(--radius);
  cursor: pointer;
  /* Строка непрозрачна: иначе кнопки под ней просвечивали бы всё время */
  position: relative; z-index: 1; background: var(--bg);
  transition: transform .24s cubic-bezier(.32,.72,0,1);
}
/* Пока палец ведёт строку — никаких переходов, иначе она отстаёт от пальца */
.note-swipe.ведут .note-row { transition: none; }
.note-row:hover { background: var(--bg-hover); }
.note-row.current { background: var(--blue); }
.note-row.current .note-row-title,
.note-row.current .note-row-text,
.note-row.current .note-row-when { color: #fff; }
.note-row.current .note-row-text { opacity: .8; }
.note-row-title {
  font-size: calc(14px * var(--fs)); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.note-row-text {
  grid-column: 1 / -1;
  font-size: calc(12.5px * var(--fs)); color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.note-row-when {
  flex: none; font-size: calc(11.5px * var(--fs)); color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

/* Правый столбец с текстом */
.notes-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.note-none {
  flex: 1; display: grid; place-items: center;
  color: var(--text-faint); font-size: calc(14px * var(--fs)); text-align: center; line-height: 1.6;
}

/* ----- Раскрытая заметка ----- */

.note-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 18px;
}
.note-back {
  padding: 6px 10px 6px 6px; border-radius: 8px;
  font-size: calc(14px * var(--fs)); font-weight: 600; color: var(--text-muted);
}
.note-back:hover { background: var(--bg-hover); color: var(--text); }
.note-when { font-size: calc(12.5px * var(--fs)); color: var(--text-faint); }
.note-del {
  display: grid; place-items: center;
  width: 32px; height: 30px; border-radius: 7px;
  margin-left: auto; color: var(--text-faint);
}
.note-del svg { width: 17px; height: 17px; }
.note-del:hover { background: var(--bg-hover); color: var(--red); }

/* Текст занимает весь правый столбец до самого низа окна и листается сам.
   Раньше поле было в 60% высоты экрана и росло по мере набора — длинную
   заметку приходилось листать всей страницей, а поле прыгало под курсором. */
.note-editor { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 18px 30px 0; }
.note-text {
  display: block; flex: 1; width: 100%; min-height: 0;
  padding-bottom: 40px;
  font: inherit; font-size: calc(15px * var(--fs)); line-height: 1.55;
  color: var(--text); background: none; border: 0; resize: none;
  overflow-y: auto;
}
.note-text::placeholder { color: var(--text-faint); }
.note-text:focus { outline: none; }
/* Первая строка — заголовок заметки, поэтому ей вес и размер */
.note-text::first-line { font-size: calc(19px * var(--fs)); font-weight: 700; }

/* Готовый текст заметки занимает то же место, что и поле, и так же листается */
.note-view {
  flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 40px;
  font-size: calc(15px * var(--fs)); line-height: 1.55;
}
/* Первая строка — заголовок заметки, поэтому ей вес и размер. Первым ребёнком
   стоит либо строка готового текста, либо поле — когда эту строку правят */
.note-view > :first-child,
.note-view > :first-child > .стр:first-child {
  font-size: calc(19px * var(--fs)); font-weight: 700;
}

/* Кнопка «сделать блоком» в шапке заметки — рядом с корзиной */
.note-block {
  display: grid; place-items: center;
  width: 32px; height: 30px; border-radius: 7px;
  color: var(--text-faint);
}
.note-block svg { width: 17px; height: 17px; }
.note-block:hover { background: var(--bg-hover); color: var(--text); }

/* Кнопка «закрепить» рядом с корзиной */
.note-pin {
  display: grid; place-items: center;
  width: 32px; height: 30px; border-radius: 7px;
  margin-left: auto; color: var(--text-faint);
}
.note-pin svg { width: 17px; height: 17px; }
.note-pin:hover { background: var(--bg-hover); color: var(--text); }
.note-pin.on { color: var(--blue); }
.note-del { margin-left: 0; }

@media (max-width: 760px) {
  /* Двум столбцам на телефоне не разойтись: показываем что-то одно —
     сначала список, выбрал заметку — её текст на весь экран */
  .notes-side { width: 100%; border-right: 0; }
  .notes-side-head { padding: 14px 14px 10px 18px; }
  .notes-split.open-note .notes-side { display: none; }
  .notes-split:not(.open-note) .notes-main { display: none; }
  .note-editor { padding: 14px 18px 0; }
}

/* ---------- Планы календарём ---------- */
/* Тот же список задач, но месяцем: видно, где день перегружен, а где пуст.
   Клетка тесная — менять задачу в ней негде, поэтому день раскрывается
   панелью под сеткой, и там задачи обычные, со всем тем же, что в списке. */

.plan-seg { margin-left: auto; }
.cal-head { margin-bottom: 16px; }
.cal-nav { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.cal-head .plan-seg { margin-left: 0; margin-right: 6px; }
.cal-today {
  display: grid; place-items: center;
  height: 28px; min-width: 28px; padding: 0 8px; border-radius: 7px;
  font-size: calc(13.5px * var(--fs)); color: var(--text-muted);
}
.cal-today:hover { background: var(--bg-hover); color: var(--text); }

/* Лента тянется на годы, поэтому название месяца и дни недели держатся у
   верхнего края: без них через два экрана прокрутки уже не понять, ни какой
   идёт месяц, ни где какая колонка. Отступы страницы шапка перекрывает собой —
   иначе сквозь них просвечивали бы уезжающие клетки. */
.cal-head {
  position: sticky; top: 0; z-index: 4;
  background: var(--bg);
  margin: -46px -46px 0; padding: 46px 46px 10px;
}
.cal-grid { border-top: 1px solid var(--line); }
.cal-week.head {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  position: sticky; top: var(--cal-head-h, 92px); z-index: 3;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

/* Подпись месяца внутри ленты — обычная полоса-разделитель. Липкой её делать
   нельзя: прилипнув, она накрывала бы числа верхней строки клеток. */
.cal-month-label {
  grid-column: 1 / -1;
  padding: 9px 4px 7px;
  background: var(--bg-sidebar);
  border-bottom: 1px solid var(--line);
  font-size: calc(13px * var(--fs)); font-weight: 600; color: var(--text-muted);
}
.cal-weekday {
  padding: 8px 4px; text-align: center;
  font-size: calc(12px * var(--fs)); font-weight: 600; color: var(--text-muted);
}
/* minmax(0, 1fr), а не 1fr: иначе длинное название задачи растягивает свою
   колонку, и семь дней недели перестают быть одинаковой ширины */
.cal-body {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  border-left: 1px solid var(--line);
}
.cal-cell {
  position: relative;
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  min-height: 116px; padding: 5px 5px 7px;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.cal-cell:hover { background: var(--bg-hover); }
.cal-cell.weekend { background: color-mix(in srgb, var(--bg-sidebar) 60%, transparent); }
.cal-cell.weekend:hover { background: var(--bg-hover); }
/* Дни соседних месяцев видно, но они явно не «свои» */
.cal-cell.other .cal-num { color: var(--text-faint); }
.cal-cell.other .cal-task { opacity: .65; }

.cal-num {
  align-self: flex-end;
  padding: 1px 6px; margin-bottom: 2px; border-radius: 999px;
  font-size: calc(12.5px * var(--fs)); color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.cal-cell.today .cal-num { background: var(--blue); color: #fff; font-weight: 600; }

/* Задача в клетке — одной строкой: длинные названия обрезаются */
.cal-task {
  display: flex; align-items: center; gap: 4px;
  width: 100%; padding: 3px 6px; border-radius: 5px;
  background: var(--bg-block);
  font-size: calc(12px * var(--fs)); text-align: left; color: var(--text);
}
.cal-task > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-task:hover { background: var(--bg-selected); }
.cal-task.done { color: var(--text-faint); text-decoration: line-through; }
.cal-task.ghost { opacity: .62; }
.cal-mark { display: inline-flex; flex: none; color: var(--text-muted); }
.cal-mark svg { width: 11px; height: 11px; }
/* Точка цвета списка: в клетке нет галочки, а цвет списка узнаётся так же */
.cal-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; }

/* Задержали курсор на дне — клетка раскрывается целиком поверх соседей.
   Список длинного дня листается внутри, а не тянет сетку вниз */
.cal-all {
  position: absolute; z-index: 20; left: -1px; right: -1px; top: -1px;
  display: flex; flex-direction: column; gap: 2px;
  min-height: calc(100% + 2px); max-height: 420px; overflow-y: auto;
  padding: 5px 5px 7px; border-radius: 8px;
  background: var(--bg); box-shadow: 0 10px 34px rgba(0, 0, 0, .22), 0 0 0 1px var(--line);
  animation: клетка-вынос .16s ease-out both;
}
@keyframes клетка-вынос { from { opacity: 0; transform: scale(.985); } }
.cal-cell.раскрыта > .cal-num, .cal-cell.раскрыта > .cal-task, .cal-cell.раскрыта > .cal-more {
  visibility: hidden;
}
.cal-all .cal-task { flex: none; }

.cal-more {
  align-self: flex-start;
  padding: 2px 6px; border-radius: 5px;
  font-size: calc(11.5px * var(--fs)); color: var(--text-muted);
}
.cal-more:hover { background: var(--bg-selected); color: var(--text); }

/* Раскрытый день — под сеткой */
/* Панель раскрытого дня живёт ВНУТРИ сетки, под своей неделей, и занимает
   всю её ширину — тем же приёмом, что и подпись месяца. Раньше она лежала
   после всей сетки, а сетка тянется на годы: панель оказывалась на тысячи
   точек ниже экрана, и нажатие на «+ ещё» выглядело как «ничего не произошло». */
.cal-day-panel {
  grid-column: 1 / -1;
  padding: 14px 12px 18px;
  background: var(--bg-block);
  border-bottom: 1px solid var(--line);
}
/* Если день открыли не из ленты (его в ней нет), панель по-прежнему ложится
   в конец страницы — там сетки вокруг нет, и фон с отступами ей не нужны */
.cal-grid + .cal-day-panel,
#content > .cal-day-panel {
  grid-column: auto; padding: 0; margin-top: 26px;
  background: none; border-bottom: 0;
}
.cal-day-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px; padding-bottom: 7px;
  border-bottom: 1px solid var(--line);
  font-size: calc(14px * var(--fs)); font-weight: 600;
}
.cal-day-close {
  margin-left: auto; width: 24px; height: 24px; border-radius: 6px;
  color: var(--text-faint); font-size: 13px;
}
.cal-day-close:hover { background: var(--bg-hover); color: var(--text); }
.cal-day-panel .empty { padding: 26px 0; }

@media (max-width: 760px) {
  /* На телефоне управление не влезает в одну строку с названием месяца —
     переносим его отдельным рядом под заголовком */
  .cal-head { flex-wrap: wrap; }
  .cal-nav { width: 100%; margin-left: 0; justify-content: flex-end; gap: 4px; }
  .cal-head .plan-seg { margin-right: auto; }
  .cal-head .plan-seg button { padding: 4px 9px; font-size: 12px; }
  .cal-head h1 { font-size: 20px; }

  /* Шапка перекрывает отступы страницы собой, а они на телефоне другие. С
     «настольными» 46 пикселями она вылезала за правый край, и весь экран
     начинал ездить вбок. */
  .cal-head { margin: -60px -18px 0 -30px; padding: 60px 18px 8px 30px; }
  .cal-month-label { top: 28px; padding: 7px 3px 5px; }
  .cal-cell { min-height: 58px; padding: 4px 3px; }
  .cal-task > span:last-child { font-size: calc(10px * var(--fs)); }
  .cal-task { padding: 2px 3px; }
  .cal-mark svg { width: 9px; height: 9px; }
  .cal-dot { width: 5px; height: 5px; }
  .cal-more { font-size: calc(10px * var(--fs)); white-space: nowrap; align-self: center; padding: 1px 3px; }
  .cal-num { align-self: center; padding: 0 5px; }
}

/* ---------- Новые задачи за ночь ---------- */
/* Утренний список выглядит так же, как вчерашний, — и непонятно, что в нём
   прибавилось. Плашка говорит, сколько дел пришло само (повторы и перенос
   невыполненного), а точки показывают, какие именно. */

.new-bar {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px; padding: 9px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--yellow) 16%, transparent);
  font-size: calc(13.5px * var(--fs)); color: var(--text);
}
.new-bar b { font-weight: 700; }
.new-ok {
  margin-left: auto; padding: 5px 14px; border-radius: 8px;
  background: var(--yellow); color: #2b2600;
  font-size: calc(13px * var(--fs)); font-weight: 600;
}
.new-ok:hover { filter: brightness(1.06); }

/* Плашка «хостинг заканчивается». Оранжевая, а не жёлтая: жёлтой уже помечены
   новые задачи, и две одинаковые полосы рядом слились бы в одну. Кнопки «ОК»
   у неё нет намеренно — это не уведомление, которое отмахнул и забыл: пока
   не оплатишь, предупреждение обязано висеть. */
.pay-bar {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px; padding: 9px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, #f5893a 18%, transparent);
  font-size: calc(13.5px * var(--fs)); color: var(--text);
}
.pay-bar b { font-weight: 700; }
/* Срок уже прошёл — цвет тревожный: сервер могут остановить в любой момент */
.pay-bar.over { background: color-mix(in srgb, var(--pink) 18%, transparent); }

/* Поле даты в настройках — под общий вид полей, а не браузерное по умолчанию */
.set-date {
  padding: 6px 10px; border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg); color: var(--text);
  font-size: calc(13px * var(--fs)); font-family: inherit;
}

.new-dot {
  flex: none; width: 7px; height: 7px; margin-top: 6px;
  border-radius: 50%; background: var(--yellow);
}

/* ---------- Праздник при выполнении ---------- */
/* Слой поверх всего, сквозь который проходят нажатия: это украшение,
   а не элемент управления. */

.cheer { position: fixed; inset: 0; z-index: 80; pointer-events: none; overflow: hidden; }
.cheer-bit { position: fixed; will-change: transform, opacity; }

/* ---------- Вкладка «Журнал» ---------- */
/* Список коротких записей со всех устройств. Странности выделены цветом слева,
   чтобы взгляд цеплялся за них, а не за ровный поток обычных событий. */

.logs { display: flex; flex-direction: column; gap: 6px; }
.log-row {
  padding: 8px 10px;
  background: var(--bg-block);
  border-radius: 8px;
  border-left: 3px solid transparent;
}
.log-row.bad { border-left-color: #e5484d; }
/* Правка текста — не поломка, поэтому не красная. Дописанное и убранное
   разведены цветом: глаз сразу находит, что именно прибавилось в задаче. */
.log-diff { margin-top: 5px; display: flex; flex-direction: column; gap: 2px; font-size: 12px; line-height: 1.35; }
.log-diff > div { padding: 2px 6px; border-radius: 5px; word-break: break-word; }
.log-add { background: rgba(48, 164, 108, .13); }
.log-del { background: rgba(229, 72, 77, .10); text-decoration: line-through; opacity: .75; }
.log-rename { background: var(--bg-card); }
.log-arrow { opacity: .5; padding: 0 2px; }
.log-more { color: var(--text-faint); font-size: 11px; padding-left: 6px; }
.log-head {
  display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
  font-size: 11px; color: var(--text-faint);
}
.log-who { opacity: .8; }
.log-msg { margin-top: 3px; font-size: 13px; line-height: 1.35; word-break: break-word; }
.log-details {
  margin-top: 5px; padding: 6px 8px;
  background: var(--bg-card);
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; line-height: 1.4;
  color: var(--text-muted);
  white-space: pre-wrap; word-break: break-word;
  max-height: 150px; overflow-y: auto;
}

/* ---------- Окно «только заметки» (?win=notes) ---------- */
/* Второе окно приложения на Маке. Всё, что не про заметки, спрятано:
   панель разделов, поиск по задачам, кнопки новой задачи. Сами заметки
   занимают окно целиком. Разделы отсюда недоступны и через клавиши —
   это держит renderMain(), стили только прибирают лишнее с глаз. */

body.notes-only #sidebar,
body.notes-only #menu-btn,
body.notes-only #edge-zone,
body.notes-only #search-btn,
body.notes-only #fab,
/* Ручка ширины панели: панели в этом окне нет, а полоса оставалась —
   висела поперёк списка заметок и ещё и тянулась мышью, двигая пустоту */
body.notes-only #sidebar-grip,
body.notes-only #toolbar { display: none; }


/* Почта человека во вкладке «Люди»: поле, а не надпись — её меняют по-настоящему */
/* Ширина задана числом, а не остатком места. Иначе у владельца (ему нельзя
   удалить самого себя, и кнопка одна) поле дотягивалось до своего предела, и
   его строка выглядела длиннее соседних — будто у владельца что-то другое. */
.люди-почта { width: 220px; max-width: 100%; flex: none; text-align: left; font-size: 13.5px; }
.люди-звание { margin-left: 7px; font-size: 12px; color: var(--text-muted); }
/* Заголовок группы людей или ссылок: откуда пришли, сколько */
.люди-группа {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--text);
  margin: 22px 2px 10px;
}
.люди-группа:first-child { margin-top: 2px; }
.люди-группа span { font-weight: 400; color: var(--text-muted); font-size: 12.5px; }
/* Карточка человека: шапка (почта и кнопки), под ней цифры недели плашками
   и подписанные факты. Раньше всё шло одним абзацем и слипалось */
#settings-body .set-row.люди-карточка { display: block; padding: 14px 16px; }
/* Адрес для нейросети — длинный и без пробелов: переносим где угодно, иначе
   на телефоне строка вылезает за край окна */
.ai-адрес { word-break: break-all; font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; }
.люди-шапка { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.люди-кто { flex: 1 1 220px; min-width: 0; }
.люди-кто .set-desc { margin-top: 6px; }
.люди-неделя { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.люди-подпись { font-size: 11.5px; color: var(--text-muted); margin-bottom: 7px; }
.люди-цифры { display: flex; flex-wrap: wrap; gap: 6px; }
.люди-цифра {
  display: inline-flex; align-items: baseline; gap: 5px;
  background: var(--bg); border-radius: 8px; padding: 5px 9px;
  font-size: 12px; color: var(--text-muted); white-space: nowrap;
}
.люди-цифра b { font-size: 14px; font-weight: 600; color: var(--text); }
.люди-цифра.ноль b { color: var(--text-muted); }
.люди-факты { margin: 12px 0 0; display: grid; grid-template-columns: max-content 1fr; gap: 5px 14px; font-size: 12.5px; }
.люди-факты > div { display: contents; }
.люди-факты dt { color: var(--text-muted); }
.люди-факты dd { margin: 0; color: var(--text); min-width: 0; }

/* Пока несут задачу, список не прокручивается сам: жест целиком наш.
   Одного правила мало (браузер решает про жест в момент касания) — рядом
   стоит гашение touchmove в app.js, а это страхует следующие движения. */
body.is-dragging #content, body.is-dragging #content .task { touch-action: none; }

/* Запас пустоты под списком, пока набирают новую задачу: только так последнюю
   строку можно поднять к верху экрана, из-под клавиатуры. Убирается сразу,
   как только карточку закрыли. */
@media (max-width: 760px) {
  body.есть-черновик #content { padding-bottom: 60vh; }
}

/* ---------- Смахивание задачи в корзину ---------- */
/* Красное поле рисуется отдельным слоем ровно по месту строки: так разметку
   списка трогать не приходится, а от неё зависят перенос задач и щель. */
/* Родитель строки на время жеста становится точкой отсчёта: поле лежит
   ровно под своей строкой и едет вместе со списком */
.есть-смах { position: relative; }
.task-swipe-back {
  position: absolute; z-index: 0;
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: 34px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--pink) 78%, var(--bg));
  color: #fff;
  pointer-events: none;
  transition: background .14s;
}
/* Строка дошла до кнопки — цвет наливается: видно, что тут она и встанет.
   «Открыт» — кнопка стоит на месте и ждёт нажатия, «готово» — протянули до
   середины строки, отпускай, и задача уедет прямо из жеста. */
.task-swipe-back.налит,
.task-swipe-back.открыт,
.task-swipe-back.готово { background: var(--pink); }
/* Пока кнопка стоит открытой, она принимает нажатие — этим её и нажимают */
.task-swipe-back.открыт { pointer-events: auto; cursor: pointer; }
.task-swipe-back.уходит { opacity: 0; transition: opacity .15s; }
.task-swipe-icon svg { width: 21px; height: 21px; display: block; transition: width .12s, height .12s; }
/* Дотянули до середины — корзина подрастает: тот же знак, что и щелчок */
.task-swipe-back.готово .task-swipe-icon svg { width: 25px; height: 25px; }
/* Пока строку ведут, она едет поверх красного поля и не подсвечивается */
.task.смахивают { position: relative; z-index: 4; background: var(--bg); }

/* Порог пройден — значок наливается цветом: видно, что можно отпускать.
   Тот же приём, что в приложениях Apple, только без системного «щелчка». */
#pull.готово { background: var(--blue); color: #fff; }

/* ---------- Обучение: экскурсия с подсветкой ---------- */
/* Затемняем всё, кроме того места, о котором речь. Вырез — не отдельный слой
   с дыркой, а тень наружу на 9999px: одним элементом и без масок, поэтому
   ничего не рассинхронизируется при прокрутке. */

.тур-вырез {
  position: fixed; z-index: 58;
  border-radius: 9px;
  box-shadow: 0 0 0 2.5px var(--blue), 0 0 0 9999px rgba(10,12,16,.72);
  pointer-events: none;
  transition: all .2s cubic-bezier(.2,.7,.3,1);
}
:root[data-motion="less"] .тур-вырез { transition: none; }

/* Шаг, которому нечего подсвечивать (задача заводится «прямо в списке»):
   тот же слой, но сплошной заливкой во весь экран */
.тур-вырез.сплошной {
  left: 0; top: 0; width: 100%; height: 100%;
  border-radius: 0; box-shadow: none;
  background: rgba(10,12,16,.72);
}

.тур-карточка {
  position: fixed; z-index: 60;
  width: min(360px, calc(100vw - 28px));
  padding: 18px 20px 16px;
  border-radius: 12px;
  background: rgba(24,26,32,.94);
  color: #fff;
  box-shadow: 0 18px 50px rgba(0,0,0,.4);
  animation: тур-вход .2s cubic-bezier(.2,.7,.3,1);
}
@keyframes тур-вход { from { opacity: 0; transform: translateY(6px); } }
:root[data-motion="less"] .тур-карточка { animation: none; }

.тур-заг { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.тур-текст { font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.82); }
.тур-низ { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.тур-дальше {
  padding: 8px 16px; border-radius: 8px;
  background: #fff; color: #16181d;
  font-size: 13px; font-weight: 600;
}
.тур-дальше:hover { background: rgba(255,255,255,.86); }
.тур-счёт { font-size: 12.5px; color: rgba(255,255,255,.58); }
.тур-пропустить { color: rgba(255,255,255,.58); font-size: 12.5px; text-decoration: underline; }
.тур-пропустить:hover { color: #fff; }

/* Пока идёт экскурсия, под затемнением ничего не нажимается: шаг ведут
   кнопкой, а не случайным попаданием по интерфейсу */
body.обучение-идёт #app, body.обучение-идёт #toolbar, body.обучение-идёт #fab { pointer-events: none; }
/* «+» под списками прозрачен до наведения мыши; шаг «Списки» про него
   рассказывает — на время экскурсии показываем его */
body.обучение-идёт #sidebar .nav-item.nav-add { opacity: 1; }

.тур-вырез.круглый { border-radius: 50%; }

/* Текст сообщения на вкладке «Люди»: переносы строк автора сохраняем */
.отзыв-текст { margin-top: 4px; white-space: pre-wrap; font-size: 13.5px; line-height: 1.45; color: var(--text); }
/* Вопрос перед удалением: окно уже, кнопки справа */
.вопрос-низ { justify-content: flex-end; margin-top: 4px; }

/* Рисунок жеста «Меню разделов» (телефон): палец ведёт слева направо, снизу
   из угла вырастает лист — как у настоящей панели. Цикл 2,8 с. */
.тур-мини {
  position: relative; width: 116px; height: 188px; margin: 2px auto 16px;
  border-radius: 20px; border: 3px solid rgba(255,255,255,.9);
  overflow: hidden; background: #f4f5f7;
}
.тур-мини-строка { height: 7px; border-radius: 4px; background: #d3d8e0; margin: 13px 12px 0; }
.тур-мини-тень { position: absolute; inset: 0; background: rgba(0,0,0,.32); opacity: 0; animation: тур-мини-тень 2.8s infinite; }
.тур-мини-лист {
  position: absolute; right: 6px; bottom: 6px; width: 74%; height: 60%; padding: 8px 8px 0;
  border-radius: 11px; background: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.25);
  transform-origin: 100% 100%; animation: тур-мини-лист 2.8s infinite;
}
.тур-мини-лист i { position: relative; display: block; height: 6px; margin: 0 0 9px 12px; border-radius: 3px; background: #e5e8ee; }
.тур-мини-лист i::before {
  content: ''; position: absolute; left: -13px; top: -1px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--blue);
}
.тур-мини-палец {
  position: absolute; top: 44%; left: 8px; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,.96); box-shadow: 0 0 0 5px rgba(47,125,246,.35), 0 3px 8px rgba(0,0,0,.3);
  animation: тур-мини-палец 2.8s infinite;
}
@keyframes тур-мини-палец {
  0% { opacity: 0; transform: translateX(0) scale(1.25); }
  8% { opacity: 1; transform: translateX(0) scale(1); }
  45% { opacity: 1; transform: translateX(62px) scale(1); }
  55%, 100% { opacity: 0; transform: translateX(70px) scale(1); }
}
@keyframes тур-мини-лист {
  0%, 10% { opacity: 0; transform: translateY(12px) scale(.94); }
  45%, 80% { opacity: 1; transform: none; }
  92%, 100% { opacity: 0; transform: translateY(8px) scale(.97); }
}
@keyframes тур-мини-тень { 0%, 10% { opacity: 0; } 45%, 80% { opacity: 1; } 92%, 100% { opacity: 0; } }
/* «Меньше движения» — один неподвижный кадр: палец в конце пути, лист открыт */
:root[data-motion="less"] .тур-мини-лист,
:root[data-motion="less"] .тур-мини-тень { animation: none; opacity: 1; transform: none; }
:root[data-motion="less"] .тур-мини-палец { animation: none; opacity: 1; transform: translateX(62px); }

/* ---------- Первый шаг экскурсии: значок в Dock ----------
   Выбран 11.09.2026 из трёх вариантов («Угадал сам»). Путь по меню браузера
   показан мини-сценой в стиле рисунка жеста: курсор или палец идёт по нему по
   кругу. Шаг сцены — data-s, его переключает подключитьУстановку() в app.js. */
.тур-карточка.тур-широкая { width: min(380px, calc(100vw - 28px)); }
.уст-сег { display: flex; gap: 3px; padding: 3px; margin: 14px 0 6px; border-radius: 9px; background: rgba(255,255,255,.1); }
.уст-сег button {
  flex: 1; height: 28px; border: 0; border-radius: 7px; cursor: pointer;
  background: transparent; color: rgba(255,255,255,.7); font: inherit; font-size: 12.5px; font-weight: 600;
}
.уст-сег button.вкл { background: #fff; color: #16181d; }
/* Высота строки постоянная: без текста (выбран не угаданный браузер) она
   иначе становилась ниже, и карточка подпрыгивала при переключении */
.уст-угадал {
  height: 16px; line-height: 16px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: 11.5px; color: rgba(255,255,255,.5);
}
/* Инструкции всех браузеров лежат стопкой в одной ячейке сетки: карточка
   берёт размер самой высокой и при переключении не прыгает. Видна одна */
.уст-стопка { display: grid; }
.уст-вариант { grid-area: 1 / 1; visibility: hidden; }
.уст-вариант.вкл { visibility: visible; }
.уст-место { display: flex; justify-content: center; margin-top: 12px; }
.уст-шаги { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; counter-reset: уст-шаг; }
.уст-шаги li {
  counter-increment: уст-шаг; display: flex; gap: 8px; align-items: center;
  font-size: 13px; line-height: 1.4; color: rgba(255,255,255,.48); transition: color .2s;
}
.уст-шаги li::before {
  content: counter(уст-шаг); flex: none; width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; font-size: 10.5px; font-weight: 700; color: #fff;
  background: rgba(255,255,255,.14); transition: background .2s;
}
.уст-шаги li.идёт { color: #fff; }
.уст-шаги li.идёт::before { background: var(--blue); }
.уст-сноска { margin-top: 10px; font-size: 11.5px; line-height: 1.45; color: rgba(255,255,255,.55); }

/* Мини-сцена: серые полоски вместо текста, подписаны только нужные пункты */
.уст-сц {
  position: relative; overflow: hidden; flex: none; color: #1c1f26; text-shadow: none; line-height: 1.2;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.уст-с { display: block; height: 6px; border-radius: 3px; background: #d3d8e0; }
.уст-выпад .уст-с, .уст-мен-тел .уст-с, .уст-анд-меню .уст-с, .уст-строка .уст-с { height: 5px; }
.уст-тело { padding: 2px 14px; }
.уст-тело .уст-с { margin-top: 9px; }
.уст-вид { opacity: 0; transform: translateY(-3px) scale(.97); transition: opacity .16s, transform .16s; }
.уст-кноп {
  position: absolute; right: 10px; bottom: 10px; height: 14px; line-height: 14px; padding: 0 8px;
  border-radius: 4px; background: var(--blue); color: #fff; font-size: 7.5px; font-weight: 600;
}
.уст-курсор { position: absolute; left: 0; top: 0; z-index: 5; transition: transform .55s cubic-bezier(.3,.7,.3,1); }
.уст-курсор svg { display: block; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.35)); }
.уст-курсор::after {
  content: ''; position: absolute; left: -8px; top: -8px; width: 16px; height: 16px;
  border-radius: 50%; background: rgba(47,125,246,.5); opacity: 0;
}

/* Компьютер: рабочий стол, окно браузера, Dock */
.уст-комп {
  box-sizing: content-box; width: 320px; height: 200px; border-radius: 12px;
  border: 3px solid rgba(255,255,255,.9); background: linear-gradient(160deg, #c9d6ee, #e6dcef);
}
.уст-огни { position: absolute; left: 8px; top: 5px; display: flex; gap: 3px; }
.уст-огни i { width: 6px; height: 6px; border-radius: 50%; background: #ff605c; }
.уст-огни i + i { background: #ffbd44; }
.уст-огни i + i + i { background: #00ca4e; }
.уст-док {
  position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%);
  display: flex; gap: 5px; padding: 4px 5px; border-radius: 9px;
  background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.85);
}
.уст-док i { width: 18px; height: 18px; border-radius: 5px; background: #a9b7cf; }
.уст-док i:nth-child(2) { background: #c7b6d6; }
.уст-док i:nth-child(3) { background: #b3cfc2; }
.уст-док i:nth-child(4) { background: #d8c8ad; }
.уст-док img { width: 0; height: 18px; border-radius: 5px; opacity: 0; transition: width .25s, opacity .2s; }
@keyframes уст-прыг { 0%, 100% { transform: none; } 30% { transform: translateY(-9px); } 60% { transform: none; } 78% { transform: translateY(-3px); } }

/* Safari на Mac: Файл → «Добавить в Dock…» → «Добавить» */
.уст-меню { position: absolute; left: 0; top: 0; right: 0; height: 16px; background: rgba(255,255,255,.92); font-size: 8.5px; }
.уст-меню b, .уст-меню span { position: absolute; top: 2px; height: 12px; line-height: 12px; padding: 0 4px; border-radius: 3px; }
.уст-меню b { left: 8px; }
.уст-окно {
  position: absolute; left: 22px; top: 26px; width: 276px; height: 124px; border-radius: 8px;
  background: #f4f5f7; box-shadow: 0 6px 18px rgba(20,30,60,.22); overflow: hidden;
}
.уст-полоса { position: relative; height: 18px; background: #e9ecf1; }
.уст-адрес { position: absolute; left: 70px; right: 70px; top: 4px; height: 10px; border-radius: 5px; background: #fff; }
.уст-выпад {
  position: absolute; left: 44px; top: 16px; width: 136px; padding: 4px; box-sizing: border-box;
  background: #fff; border-radius: 6px; box-shadow: 0 8px 20px rgba(20,30,60,.25);
}
.уст-выпад > div { height: 14px; display: flex; align-items: center; padding: 0 6px; border-radius: 3px; font-size: 8px; }
.уст-диалог {
  position: absolute; left: 100px; top: 62px; width: 150px; height: 72px; background: #fff;
  border-radius: 9px; box-shadow: 0 10px 26px rgba(20,30,60,.3);
}
.уст-диалог img { position: absolute; left: 12px; top: 12px; width: 20px; height: 20px; border-radius: 5px; }
.уст-диалог b { position: absolute; left: 38px; top: 13px; font-size: 8px; }
.уст-диалог .уст-с { position: absolute; left: 38px; top: 27px; width: 90px; height: 5px; }
.уст-мак[data-s="2"] .уст-файл { background: var(--blue); color: #fff; }
.уст-мак[data-s="2"] .уст-выпад, .уст-мак[data-s="3"] .уст-диалог { opacity: 1; transform: none; transition-delay: .05s; }
.уст-мак[data-s="2"] .уст-пункт { background: var(--blue); color: #fff; transition: background .1s .45s, color .1s .45s; }
.уст-мак[data-s="4"] .уст-док img, .уст-хром[data-s="3"] .уст-док img { width: 18px; opacity: 1; animation: уст-прыг .7s .15s; }
.уст-мак[data-s="0"] .уст-курсор { transform: translate(150px, 100px); }
.уст-мак[data-s="1"] .уст-курсор { transform: translate(56px, 7px); }
.уст-мак[data-s="2"] .уст-курсор { transform: translate(110px, 53px); }
.уст-мак[data-s="3"] .уст-курсор { transform: translate(214px, 114px); }
.уст-мак[data-s="4"] .уст-курсор { transform: translate(236px, 160px); }

/* Chrome на компьютере: значок в адресной строке → «Установить» */
.уст-хр-окно {
  position: absolute; left: 14px; top: 6px; width: 292px; height: 150px; border-radius: 9px;
  background: #f4f5f7; overflow: hidden; box-shadow: 0 6px 18px rgba(20,30,60,.22);
}
.уст-хр-верх { position: absolute; left: 0; right: 0; top: 0; height: 38px; background: #dde2ea; transition: opacity .25s; }
.уст-вкладка {
  position: absolute; left: 44px; top: 4px; width: 84px; height: 14px; box-sizing: border-box;
  display: flex; align-items: center; gap: 4px; padding: 0 6px; border-radius: 6px 6px 0 0; background: #fff;
}
.уст-вкладка img { width: 8px; height: 8px; border-radius: 2px; }
.уст-вкладка .уст-с { width: 44px; height: 4px; }
.уст-хр-адрес { position: absolute; left: 6px; right: 6px; top: 18px; height: 15px; border-radius: 8px; background: #fff; }
.уст-хр-адрес .уст-с { position: absolute; left: 10px; top: 5px; width: 96px; height: 5px; }
.уст-знак {
  position: absolute; right: 4px; top: 1.5px; width: 12px; height: 12px; border-radius: 50%;
  display: grid; place-items: center; color: #5f6368;
}
.уст-хр-прил {
  position: absolute; left: 0; right: 0; top: 0; height: 14px; line-height: 14px; background: #e9ecf1;
  text-align: center; font-size: 7px; font-weight: 600; opacity: 0; transition: opacity .25s;
}
.уст-хр-прил .уст-огни { top: 4px; }
.уст-хр-тело { position: absolute; left: 0; right: 0; top: 38px; transition: transform .3s; }
.уст-попап {
  position: absolute; left: 142px; top: 44px; width: 156px; height: 70px; background: #fff;
  border-radius: 9px; box-shadow: 0 10px 26px rgba(20,30,60,.3);
}
.уст-попап b { position: absolute; left: 10px; top: 9px; font-size: 8px; }
.уст-ряд { position: absolute; left: 10px; display: flex; gap: 5px; align-items: center; font-size: 7.5px; }
.уст-попап .уст-ряд { top: 25px; }
.уст-попап .уст-ряд img { width: 13px; height: 13px; border-radius: 3px; }
.уст-попап .уст-отм { position: absolute; right: 76px; bottom: 12px; font-size: 7.5px; color: var(--blue); }
.уст-хром[data-s="1"] .уст-знак, .уст-хром[data-s="2"] .уст-знак { background: var(--blue); color: #fff; transition: background .1s .45s, color .1s .45s; }
.уст-хром[data-s="2"] .уст-попап { opacity: 1; transform: none; transition-delay: .05s; }
.уст-хром[data-s="3"] .уст-хр-верх { opacity: 0; }
.уст-хром[data-s="3"] .уст-хр-прил { opacity: 1; }
.уст-хром[data-s="3"] .уст-хр-тело { transform: translateY(-22px); }
.уст-хром[data-s="0"] .уст-курсор { transform: translate(150px, 105px); }
.уст-хром[data-s="1"] .уст-курсор { transform: translate(288px, 30px); }
.уст-хром[data-s="2"] .уст-курсор { transform: translate(259px, 95px); }
.уст-хром[data-s="3"] .уст-курсор { transform: translate(236px, 160px); }

/* Телефон — тот же мини-телефон, что у жеста «Меню разделов» */
.уст-тел {
  box-sizing: border-box; width: 132px; height: 214px; border-radius: 22px;
  border: 3px solid rgba(255,255,255,.9); background: #f4f5f7;
}
.уст-тел .уст-тело { padding: 8px 12px 0; }
.уст-тень { position: absolute; inset: 0; background: rgba(10,12,16,.3); opacity: 0; transition: opacity .25s; }
.уст-дом {
  position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 20px); gap: 10px 9px;
  justify-content: center; align-content: start; padding-top: 24px;
  background: linear-gradient(170deg, #c9d6ee, #e8dcef); opacity: 0; transition: opacity .3s;
}
.уст-дом i { width: 20px; height: 20px; border-radius: 6px; background: rgba(255,255,255,.62); }
.уст-дом img { width: 20px; height: 20px; border-radius: 6px; transform: scale(0); transition: transform .35s cubic-bezier(.3,1.6,.5,1) .25s; }
.уст-палец {
  position: absolute; left: -11px; top: -11px; z-index: 5; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,.96); box-shadow: 0 0 0 4px rgba(47,125,246,.35), 0 3px 8px rgba(0,0,0,.3);
  transition: transform .55s cubic-bezier(.3,.7,.3,1), opacity .2s;
}
.уст-палец::after { content: ''; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid var(--blue); opacity: 0; }

/* iPhone, Safari на iOS 26: ••• → «Поделиться» → «На экран „Домой“» → «Добавить» */
.уст-низ { position: absolute; left: 8px; right: 8px; bottom: 8px; height: 20px; border-radius: 10px; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.уст-низ .уст-с { position: absolute; left: 12px; top: 7.5px; width: 52px; height: 5px; }
.уст-точки {
  position: absolute; right: 6px; top: 3px; height: 14px; line-height: 14px; padding: 0 3px; border-radius: 6px;
  font-size: 8px; font-weight: 700; letter-spacing: .5px; color: #3a3f48;
}
.уст-мен-тел {
  position: absolute; left: 26px; top: 102px; width: 92px; padding: 4px 0; box-sizing: border-box;
  background: #fff; border-radius: 9px; box-shadow: 0 8px 20px rgba(0,0,0,.22);
}
.уст-мен-тел > div { height: 16px; display: flex; align-items: center; gap: 4px; padding: 0 8px; font-size: 7.5px; }
.уст-лист {
  position: absolute; left: 0; right: 0; bottom: 0; height: 124px; border-radius: 16px 16px 0 0; background: #fff;
  transform: translateY(105%); transition: transform .3s cubic-bezier(.2,.8,.3,1);
}
.уст-кружки { display: flex; gap: 9px; justify-content: center; padding-top: 12px; }
.уст-кружки i { width: 18px; height: 18px; border-radius: 50%; background: #d7dce5; }
.уст-ряды { margin-top: 10px; }
.уст-строка { height: 18px; margin: 0 8px; padding: 0 6px; display: flex; align-items: center; gap: 5px; border-radius: 6px; font-size: 7.5px; }
.уст-доб { position: absolute; left: 6px; right: 6px; top: 6px; height: 78px; border-radius: 12px; background: #fff; box-shadow: 0 8px 20px rgba(0,0,0,.2); }
.уст-доб .уст-отм { position: absolute; left: 9px; top: 8px; font-size: 7px; color: var(--blue); }
.уст-доб-кн { position: absolute; right: 7px; top: 6px; padding: 2px 3px; border-radius: 4px; font-size: 7.5px; font-weight: 700; color: var(--blue); }
.уст-доб img { position: absolute; left: 10px; top: 26px; width: 22px; height: 22px; border-radius: 5px; }
.уст-доб .уст-с { position: absolute; height: 5px; }
.уст-айфон[data-s="1"] .уст-точки { background: #e6e8ec; transition: background .1s .45s; }
.уст-айфон[data-s="2"] .уст-мен-тел, .уст-айфон[data-s="4"] .уст-доб { opacity: 1; transform: none; transition-delay: .05s; }
.уст-айфон[data-s="2"] .уст-делиться, .уст-айфон[data-s="3"] .уст-домой, .уст-айфон[data-s="4"] .уст-доб-кн,
.уст-андроид[data-s="2"] .уст-анд-пункт, .уст-андроид[data-s="3"] .уст-кн-уст {
  background: rgba(47,125,246,.14); color: var(--blue); transition: background .1s .45s, color .1s .45s;
}
.уст-айфон[data-s="3"] .уст-тень, .уст-айфон[data-s="4"] .уст-тень, .уст-андроид[data-s="3"] .уст-тень { opacity: 1; }
.уст-айфон[data-s="3"] .уст-лист { transform: none; }
.уст-айфон[data-s="5"] .уст-дом, .уст-андроид[data-s="4"] .уст-дом { opacity: 1; }
.уст-айфон[data-s="5"] .уст-дом img, .уст-андроид[data-s="4"] .уст-дом img { transform: scale(1); }
.уст-айфон .уст-палец { transform: translate(60px, 150px); opacity: 0; }
.уст-айфон[data-s="1"] .уст-палец { transform: translate(102px, 190px); opacity: 1; }
.уст-айфон[data-s="2"] .уст-палец { transform: translate(74px, 130px); opacity: 1; }
.уст-айфон[data-s="3"] .уст-палец { transform: translate(66px, 151px); opacity: 1; }
.уст-айфон[data-s="4"] .уст-палец { transform: translate(95px, 19px); opacity: 1; }
.уст-айфон[data-s="5"] .уст-палец { transform: translate(95px, 19px); opacity: 0; }

/* Android, Chrome: ⋮ → «Добавить на главный экран» → «Установить» */
.уст-андроид .уст-тело { padding-top: 26px; }
.уст-верх { position: absolute; left: 8px; right: 8px; top: 8px; height: 18px; border-radius: 9px; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.уст-верх .уст-с { position: absolute; left: 10px; top: 6.5px; width: 60px; height: 5px; }
.уст-анд-точки {
  position: absolute; right: 3px; top: 2px; width: 14px; height: 14px; line-height: 14px; text-align: center;
  border-radius: 50%; font-size: 10px; font-weight: 700; color: #3a3f48;
}
.уст-анд-меню {
  position: absolute; right: 4px; top: 6px; width: 108px; padding: 4px 0; box-sizing: border-box;
  background: #fff; border-radius: 6px; box-shadow: 0 8px 20px rgba(0,0,0,.22);
}
.уст-анд-меню > div { height: 16px; display: flex; align-items: center; padding: 0 8px; font-size: 7px; }
.уст-анд-меню .уст-анд-пункт { height: 24px; line-height: 1.25; }
.уст-значки { gap: 12px; }
.уст-значки i { width: 10px; height: 10px; border-radius: 3px; background: #d3d8e0; }
.уст-анд-диалог { position: absolute; left: 12px; right: 12px; top: 60px; height: 80px; border-radius: 14px; background: #fff; box-shadow: 0 10px 24px rgba(0,0,0,.25); }
.уст-анд-диалог b { position: absolute; left: 10px; top: 10px; font-size: 7.5px; }
.уст-анд-диалог .уст-ряд { top: 30px; }
.уст-анд-диалог .уст-ряд img { width: 16px; height: 16px; border-radius: 4px; }
.уст-анд-диалог .уст-отм { position: absolute; right: 54px; bottom: 10px; font-size: 7px; color: var(--blue); }
.уст-кн-уст { position: absolute; right: 8px; bottom: 8px; padding: 2px 3px; border-radius: 4px; font-size: 7px; font-weight: 700; color: var(--blue); }
.уст-андроид[data-s="1"] .уст-анд-точки { background: #e6e8ec; transition: background .1s .45s; }
.уст-андроид[data-s="2"] .уст-анд-меню, .уст-андроид[data-s="3"] .уст-анд-диалог { opacity: 1; transform: none; transition-delay: .05s; }
.уст-андроид .уст-палец { transform: translate(60px, 120px); opacity: 0; }
.уст-андроид[data-s="1"] .уст-палец { transform: translate(108px, 17px); opacity: 1; }
.уст-андроид[data-s="2"] .уст-палец { transform: translate(70px, 70px); opacity: 1; }
.уст-андроид[data-s="3"] .уст-палец { transform: translate(82px, 126px); opacity: 1; }
.уст-андроид[data-s="4"] .уст-палец { transform: translate(82px, 126px); opacity: 0; }

/* Касание: кольцо в момент, когда рука дошла до цели */
.уст-тап::after { animation: уст-тап .9s ease-out; }
@keyframes уст-тап { 0%, 45% { opacity: 0; transform: scale(.3); } 60% { opacity: 1; transform: scale(.8); } 100% { opacity: 0; transform: scale(1.7); } }
/* «Меньше движения»: шаги сцены сменяются без переездов и колец — как слайды */
:root[data-motion="less"] .уст-сц *,
:root[data-motion="less"] .уст-сц *::after { transition: none !important; animation: none !important; }

/* ---------- Подсказки «Обновить список» и «Поиск» ----------
   Перенесены 17.09.2026 из одобренного макета онбординг-обновление-и-поиск.html.
   Все классы с приставкой мс- (мини-сцена): короткие имена вроде «ряд» или
   «лист» легко задеть стилями самого приложения. Шаг сцены — data-s, его
   переключает подключитьСцены() в app.js. Переключатель, стопка вариантов и
   шаги в такт — те же .уст-*, что у значка в Dock. */
.мс-место { display: flex; justify-content: center; margin: 2px 0 16px; }
.мс {
  position: relative; overflow: hidden; flex: none; box-sizing: border-box;
  color: #1c1f26; text-shadow: none; line-height: 1.2; text-align: left;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.мс *, .мс *::before, .мс *::after { box-sizing: border-box; }
.мс-с { display: block; height: 5px; border-radius: 3px; background: #d3d8e0; }
.мс-кв { flex: none; width: 7px; height: 7px; border-radius: 2px; border: 1.2px solid #b9c0cc; background: #fff; }
.мс-ряд { display: flex; align-items: center; gap: 6px; height: 18px; font-size: 8px; }
.мс mark { background: transparent; color: inherit; padding: 0; border-radius: 2px; transition: background .2s; }
.уст-сноска kbd {
  display: inline-block; min-width: 18px; padding: 0 4px; border-radius: 4px;
  background: rgba(255,255,255,.14); color: #fff; font: 600 11px/16px -apple-system, BlinkMacSystemFont, sans-serif; text-align: center;
}

/* Палец и курсор — как .уст-палец и .уст-курсор, только ещё и тают */
.мс-палец {
  position: absolute; left: -11px; top: -11px; z-index: 6; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,.96); box-shadow: 0 0 0 4px rgba(61,139,253,.35), 0 3px 8px rgba(0,0,0,.3);
  transition: transform .55s cubic-bezier(.3,.7,.3,1), opacity .2s;
}
.мс-курсор { position: absolute; left: 0; top: 0; z-index: 6; transition: transform .55s cubic-bezier(.3,.7,.3,1), opacity .2s; }
.мс-курсор svg { display: block; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.35)); }
.мс-палец::after, .мс-курсор::after { content: ''; position: absolute; border-radius: 50%; opacity: 0; pointer-events: none; }
.мс-палец::after { inset: -7px; border: 2px solid var(--blue); }
.мс-курсор::after { left: -8px; top: -8px; width: 16px; height: 16px; background: rgba(61,139,253,.5); }
.мс-тап::after { animation: уст-тап .9s ease-out; }

/* Значок обновления — как #pull */
.мс-обн {
  position: absolute; left: 50%; top: 0; z-index: 4; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%;
  display: grid; place-items: center; background: #fff; color: #7b828f; box-shadow: 0 2px 8px rgba(0,0,0,.18);
  opacity: 0; transform: translateY(-26px);
  transition: transform .6s cubic-bezier(.3,.7,.3,1), opacity .25s, background .15s, color .15s;
}
.мс-обн svg { width: 12px; height: 12px; }
/* Отпустили — значок крутится, пока список подтягивается */
.мс-обн-тел[data-s="3"] .мс-обн svg, .мс-трекпад[data-s="3"] .мс-обн svg { animation: мс-крутится .8s linear infinite; }
@keyframes мс-крутится { to { transform: rotate(360deg); } }

/* Мини-телефон */
.мс-тел { width: 132px; height: 214px; border-radius: 22px; border: 3px solid rgba(255,255,255,.9); background: #f4f5f7; }
.мс-шапка { display: flex; align-items: center; gap: 5px; padding: 12px 12px 4px; font-size: 10px; font-weight: 700; }
.мс-шапка i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--blue); }
.мс-лента { position: relative; padding: 2px 12px; transition: transform .6s cubic-bezier(.3,.7,.3,1); }
.мс-кнопки { position: absolute; right: 9px; bottom: 9px; display: grid; gap: 7px; justify-items: center; }
.мс-кн-меню { width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 5px rgba(0,0,0,.18); display: grid; place-items: center; transition: background .15s; }
.мс-кн-меню svg { width: 11px; height: 11px; color: #6b7280; }
.мс-кн-плюс { width: 26px; height: 26px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; font-size: 17px; font-weight: 300; line-height: 1; }

/* Мини-компьютер */
.мс-комп { width: 320px; height: 200px; border-radius: 12px; border: 3px solid rgba(255,255,255,.9); background: linear-gradient(160deg, #c9d6ee, #e6dcef); }
.мс-окно {
  position: absolute; left: 14px; top: 10px; width: 292px; height: 148px; border-radius: 9px;
  background: #fff; overflow: hidden; box-shadow: 0 6px 18px rgba(20,30,60,.22); display: flex;
}
.мс-огни { position: absolute; left: 8px; top: 7px; display: flex; gap: 3px; z-index: 2; }
.мс-огни i { width: 6px; height: 6px; border-radius: 50%; background: #ff605c; }
.мс-огни i + i { background: #ffbd44; }
.мс-огни i + i + i { background: #00ca4e; }
.мс-бок { position: relative; width: 78px; flex: none; background: #f1f3f6; padding: 22px 8px 0; }
.мс-бок .мс-ряд { height: 15px; gap: 5px; padding: 0 5px; border-radius: 4px; }
.мс-бок .мс-ряд i { flex: none; width: 7px; height: 7px; border-radius: 2px; background: #b9c3d3; }
.мс-бок .мс-ряд.мс-вкл { background: #dfe7f5; }
.мс-бок .мс-ряд.мс-вкл i { background: var(--blue); }
.мс-тело { position: relative; flex: 1; padding: 20px 14px 0; }
.мс-заг { font-size: 10px; font-weight: 700; margin-bottom: 6px; transition: opacity .18s; }
.мс-список { position: relative; transition: transform .6s cubic-bezier(.3,.7,.3,1), opacity .25s; }

/* Новая задача «с другого устройства» — появляется после обновления */
.мс-новый { position: absolute; left: 0; right: 0; top: 0; opacity: 0; transform: translateY(-4px) scale(.98); transition: opacity .3s, transform .3s cubic-bezier(.2,.8,.3,1); }
.мс-ярлык { padding: 1px 5px; border-radius: 4px; background: rgba(61,139,253,.14); color: var(--blue); font-size: 7.5px; font-weight: 600; }
.мс-старые { transition: transform .3s cubic-bezier(.2,.8,.3,1); }
/* В ленте телефона у строк поля по бокам — новая встаёт по ним, а не по краю экрана */
.мс-лента > .мс-новый { left: 12px; right: 12px; top: 2px; }

/* Телефон: потянуть вниз */
.мс-обн-тел .мс-палец { transform: translate(66px, 70px); opacity: 0; }
.мс-обн-тел[data-s="0"] .мс-палец { opacity: 1; }
.мс-обн-тел[data-s="1"] .мс-палец, .мс-обн-тел[data-s="2"] .мс-палец { transform: translate(66px, 132px); opacity: 1; }
.мс-обн-тел[data-s="1"] .мс-лента, .мс-обн-тел[data-s="2"] .мс-лента { transform: translateY(40px); }
.мс-обн-тел[data-s="1"] .мс-обн, .мс-обн-тел[data-s="2"] .мс-обн, .мс-обн-тел[data-s="3"] .мс-обн { opacity: 1; transform: translateY(40px); }
.мс-обн-тел[data-s="2"] .мс-обн, .мс-обн-тел[data-s="3"] .мс-обн { background: var(--blue); color: #fff; }
.мс-обн-тел[data-s="3"] .мс-обн { transform: translateY(16px); transition-duration: .45s; }
.мс-обн-тел[data-s="3"] .мс-лента { transition: transform .45s cubic-bezier(.25,.9,.25,1); }
.мс-обн-тел[data-s="4"] .мс-новый, .мс-обн-тел[data-s="5"] .мс-новый { opacity: 1; transform: none; }
.мс-обн-тел[data-s="4"] .мс-старые, .мс-обн-тел[data-s="5"] .мс-старые { transform: translateY(18px); }

/* Компьютер: трекпадом. Два пальца — две точки, которые едут вниз по списку */
.мс-два { position: absolute; left: 0; top: 0; z-index: 6; display: flex; gap: 6px; transition: transform .6s cubic-bezier(.3,.7,.3,1), opacity .2s; }
.мс-два i { width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,.96); box-shadow: 0 0 0 3px rgba(61,139,253,.35), 0 2px 6px rgba(0,0,0,.28); }
.мс-трекпад .мс-обн { top: 4px; }
.мс-трекпад .мс-два { transform: translate(176px, 58px); opacity: 0; }
.мс-трекпад[data-s="0"] .мс-два { opacity: 1; }
.мс-трекпад[data-s="1"] .мс-два, .мс-трекпад[data-s="2"] .мс-два { transform: translate(176px, 118px); opacity: 1; }
.мс-трекпад[data-s="1"] .мс-список, .мс-трекпад[data-s="2"] .мс-список { transform: translateY(30px); }
.мс-трекпад[data-s="1"] .мс-обн, .мс-трекпад[data-s="2"] .мс-обн, .мс-трекпад[data-s="3"] .мс-обн { opacity: 1; transform: translateY(26px); }
.мс-трекпад[data-s="2"] .мс-обн, .мс-трекпад[data-s="3"] .мс-обн { background: var(--blue); color: #fff; }
.мс-трекпад[data-s="3"] .мс-обн { transform: translateY(4px); transition-duration: .45s; }
.мс-трекпад[data-s="3"] .мс-список { transition: transform .45s cubic-bezier(.25,.9,.25,1); }
.мс-трекпад[data-s="4"] .мс-новый, .мс-трекпад[data-s="5"] .мс-новый { opacity: 1; transform: none; }
.мс-трекпад[data-s="4"] .мс-старые, .мс-трекпад[data-s="5"] .мс-старые { transform: translateY(18px); }

/* Компьютер: правой кнопкой → «Перезагрузить» */
.мс-меню-пкм {
  position: absolute; left: 150px; top: 88px; z-index: 5; width: 108px; padding: 4px; border-radius: 7px;
  background: rgba(250,250,252,.98); box-shadow: 0 8px 22px rgba(20,30,60,.3), 0 0 0 .5px rgba(0,0,0,.12);
  font-size: 8px; opacity: 0; transform: scale(.96); transform-origin: 0 0; transition: opacity .12s, transform .12s;
}
.мс-меню-пкм div { height: 14px; display: flex; align-items: center; padding: 0 7px; border-radius: 4px; color: #1c1f26; }
.мс-меню-пкм .мс-серый { color: #a0a6b0; }
.мс-меню-пкм hr { border: 0; height: 1px; background: #e3e6eb; margin: 3px 4px; }
.мс-крутилка { position: absolute; left: 50%; top: 58%; width: 16px; height: 16px; margin: -8px; border-radius: 50%; border: 2px solid #d3d8e0; border-top-color: var(--blue); opacity: 0; transition: opacity .2s; animation: мс-крутится .8s linear infinite; }
.мс-пкм .мс-курсор { transform: translate(200px, 150px); opacity: 0; }
.мс-пкм[data-s="0"] .мс-курсор { opacity: 1; }
.мс-пкм[data-s="1"] .мс-курсор, .мс-пкм[data-s="2"] .мс-курсор { transform: translate(150px, 88px); opacity: 1; }
.мс-пкм[data-s="2"] .мс-меню-пкм, .мс-пкм[data-s="3"] .мс-меню-пкм { opacity: 1; transform: none; transition-delay: .05s; }
.мс-пкм[data-s="3"] .мс-курсор { transform: translate(196px, 126px); opacity: 1; }
.мс-пкм[data-s="3"] .мс-перезагрузить { background: var(--blue); color: #fff; transition: background .1s .45s, color .1s .45s; }
.мс-пкм[data-s="4"] .мс-список { opacity: 0; }
.мс-пкм[data-s="4"] .мс-крутилка { opacity: 1; }
.мс-пкм[data-s="4"] .мс-курсор { transform: translate(196px, 126px); opacity: 0; }
.мс-пкм[data-s="5"] .мс-новый, .мс-пкм[data-s="6"] .мс-новый { opacity: 1; transform: none; }
.мс-пкм[data-s="5"] .мс-старые, .мс-пкм[data-s="6"] .мс-старые { transform: translateY(18px); }

/* Компьютер: поиск набором */
.мс-клавиши { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); display: flex; gap: 5px; }
.мс-клавиши span {
  width: 22px; height: 20px; border-radius: 5px; display: grid; place-items: center;
  background: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.95); box-shadow: 0 2px 0 rgba(40,50,80,.18);
  font-size: 9px; font-weight: 600; color: #3a3f48; transition: transform .1s, background .1s, box-shadow .1s;
}
.мс-поле {
  position: absolute; left: 14px; right: 14px; top: 18px; z-index: 3; height: 18px; border-radius: 6px;
  background: #eef1f5; display: flex; align-items: center; gap: 5px; padding: 0 7px; font-size: 8.5px;
  opacity: 0; transform: translateY(-6px); transition: opacity .18s, transform .18s cubic-bezier(.2,.8,.3,1);
}
.мс-поле svg, .мс-тел-поле svg { width: 8px; height: 8px; color: #7b828f; flex: none; }
.мс-буква { display: none; }
.мс-каретка { width: 1px; height: 10px; background: var(--blue); animation: мс-мигает 1s steps(1) infinite; }
@keyframes мс-мигает { 50% { opacity: 0; } }
/* Только в сценах поиска: в сценах обновления у новой строки свой переезд */
.мс-набор .мс-список .мс-ряд, .мс-в-панели .мс-список .мс-ряд, .мс-тел-поиск .мс-лента .мс-ряд { transition: opacity .2s, transform .3s cubic-bezier(.2,.8,.3,1); }
.мс-набор[data-s="1"] .мс-поле, .мс-набор[data-s="2"] .мс-поле, .мс-набор[data-s="3"] .мс-поле, .мс-набор[data-s="4"] .мс-поле { opacity: 1; transform: none; }
.мс-набор[data-s="1"] .мс-заг, .мс-набор[data-s="2"] .мс-заг, .мс-набор[data-s="3"] .мс-заг, .мс-набор[data-s="4"] .мс-заг { opacity: 0; }
.мс-набор[data-s="1"] .мс-б1, .мс-набор[data-s="2"] .мс-б1, .мс-набор[data-s="2"] .мс-б2, .мс-набор[data-s="3"] .мс-б1, .мс-набор[data-s="3"] .мс-б2, .мс-набор[data-s="3"] .мс-б3,
.мс-набор[data-s="4"] .мс-б1, .мс-набор[data-s="4"] .мс-б2, .мс-набор[data-s="4"] .мс-б3 { display: inline; }
.мс-набор[data-s="1"] .мс-к1, .мс-набор[data-s="2"] .мс-к2, .мс-набор[data-s="3"] .мс-к3 { transform: translateY(2px); box-shadow: none; background: var(--blue); color: #fff; border-color: var(--blue); }
.мс-набор[data-s="1"] .мс-мимо1, .мс-набор[data-s="2"] .мс-мимо1, .мс-набор[data-s="2"] .мс-мимо2,
.мс-набор[data-s="3"] .мс-мимо1, .мс-набор[data-s="3"] .мс-мимо2, .мс-набор[data-s="3"] .мс-мимо3,
.мс-набор[data-s="4"] .мс-мимо1, .мс-набор[data-s="4"] .мс-мимо2, .мс-набор[data-s="4"] .мс-мимо3 { opacity: 0; }
.мс-набор[data-s="3"] .мс-нашлось, .мс-набор[data-s="4"] .мс-нашлось { transform: translateY(-36px); }
.мс-набор[data-s="3"] .мс-нашлось mark, .мс-набор[data-s="4"] .мс-нашлось mark { background: rgba(255,189,68,.45); }

/* Компьютер: строка «Поиск» стоит первой в панели — нажали, и печатаем */
.мс-поиск-в-бок {
  position: absolute; left: 8px; right: 8px; top: 22px; height: 15px; padding: 0 5px; border-radius: 4px;
  display: flex; align-items: center; gap: 5px; font-size: 7.5px; transition: background .15s;
}
.мс-поиск-в-бок svg { width: 7px; height: 7px; color: #6b7280; }
.мс-бок-ряды { margin-top: 20px; }
.мс-в-панели .мс-курсор { transform: translate(170px, 120px); opacity: 0; }
.мс-в-панели[data-s="0"] .мс-курсор { opacity: 1; }
.мс-в-панели[data-s="1"] .мс-курсор { transform: translate(40px, 36px); opacity: 1; }
.мс-в-панели[data-s="2"] .мс-курсор, .мс-в-панели[data-s="3"] .мс-курсор, .мс-в-панели[data-s="4"] .мс-курсор,
.мс-в-панели[data-s="5"] .мс-курсор, .мс-в-панели[data-s="6"] .мс-курсор { transform: translate(40px, 36px); opacity: 0; }
.мс-в-панели[data-s="1"] .мс-поиск-в-бок { background: #dfe7f5; transition-delay: .45s; }
.мс-в-панели[data-s="2"] .мс-поиск-в-бок, .мс-в-панели[data-s="3"] .мс-поиск-в-бок, .мс-в-панели[data-s="4"] .мс-поиск-в-бок,
.мс-в-панели[data-s="5"] .мс-поиск-в-бок, .мс-в-панели[data-s="6"] .мс-поиск-в-бок { background: #dfe7f5; }
.мс-в-панели[data-s="2"] .мс-поле, .мс-в-панели[data-s="3"] .мс-поле, .мс-в-панели[data-s="4"] .мс-поле,
.мс-в-панели[data-s="5"] .мс-поле, .мс-в-панели[data-s="6"] .мс-поле { opacity: 1; transform: none; }
.мс-в-панели[data-s="2"] .мс-заг, .мс-в-панели[data-s="3"] .мс-заг, .мс-в-панели[data-s="4"] .мс-заг,
.мс-в-панели[data-s="5"] .мс-заг, .мс-в-панели[data-s="6"] .мс-заг { opacity: 0; }
.мс-в-панели[data-s="3"] .мс-б1, .мс-в-панели[data-s="4"] .мс-б1, .мс-в-панели[data-s="4"] .мс-б2,
.мс-в-панели[data-s="5"] .мс-б1, .мс-в-панели[data-s="5"] .мс-б2, .мс-в-панели[data-s="5"] .мс-б3,
.мс-в-панели[data-s="6"] .мс-б1, .мс-в-панели[data-s="6"] .мс-б2, .мс-в-панели[data-s="6"] .мс-б3 { display: inline; }
.мс-в-панели[data-s="3"] .мс-мимо1, .мс-в-панели[data-s="4"] .мс-мимо1, .мс-в-панели[data-s="4"] .мс-мимо2,
.мс-в-панели[data-s="5"] .мс-мимо1, .мс-в-панели[data-s="5"] .мс-мимо2, .мс-в-панели[data-s="5"] .мс-мимо3,
.мс-в-панели[data-s="6"] .мс-мимо1, .мс-в-панели[data-s="6"] .мс-мимо2, .мс-в-панели[data-s="6"] .мс-мимо3 { opacity: 0; }
.мс-в-панели[data-s="5"] .мс-нашлось, .мс-в-панели[data-s="6"] .мс-нашлось { transform: translateY(-36px); }
.мс-в-панели[data-s="5"] .мс-нашлось mark, .мс-в-панели[data-s="6"] .мс-нашлось mark { background: rgba(255,189,68,.45); }

/* Телефон: поиск через меню разделов */
.мс-лист {
  position: absolute; left: 6px; right: 6px; bottom: 6px; z-index: 4; height: 128px; padding: 8px 8px 0; border-radius: 13px;
  background: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.25); transform-origin: 100% 100%;
  opacity: 0; transform: translateY(12px) scale(.94); transition: opacity .22s, transform .3s cubic-bezier(.2,.8,.3,1);
}
.мс-лист .мс-ряд { height: 17px; padding: 0 5px; border-radius: 5px; font-size: 8px; }
.мс-лист .мс-ряд svg { width: 8px; height: 8px; color: #6b7280; flex: none; }
.мс-лист .мс-ряд i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
.мс-тень { position: absolute; inset: 0; z-index: 3; background: rgba(0,0,0,.3); opacity: 0; transition: opacity .25s; }
.мс-тел-поле { position: absolute; left: 10px; right: 10px; top: 10px; z-index: 2; height: 18px; border-radius: 6px; background: #e9ecf1; display: flex; align-items: center; gap: 4px; padding: 0 6px; font-size: 8.5px; opacity: 0; transition: opacity .2s; }
.мс-клава { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 70px; background: #d1d5db; padding: 7px 5px; display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px 3px; align-content: start; transform: translateY(100%); transition: transform .3s cubic-bezier(.2,.8,.3,1); }
.мс-клава i { height: 12px; border-radius: 3px; background: #fff; }
.мс-шапка { transition: opacity .2s; }
.мс-тел-поиск .мс-палец { transform: translate(90px, 176px); opacity: 0; }
.мс-тел-поиск[data-s="1"] .мс-палец { transform: translate(104px, 156px); opacity: 1; }
.мс-тел-поиск[data-s="1"] .мс-кн-меню { background: #e6e8ec; transition-delay: .45s; }
.мс-тел-поиск[data-s="2"] .мс-лист, .мс-тел-поиск[data-s="3"] .мс-лист { opacity: 1; transform: none; }
.мс-тел-поиск[data-s="2"] .мс-тень, .мс-тел-поиск[data-s="3"] .мс-тень { opacity: 1; }
.мс-тел-поиск[data-s="2"] .мс-палец { transform: translate(64px, 120px); opacity: 1; }
.мс-тел-поиск[data-s="3"] .мс-палец { transform: translate(40px, 91px); opacity: 1; }
.мс-тел-поиск[data-s="3"] .мс-ряд-поиск { background: rgba(61,139,253,.14); color: var(--blue); transition: background .1s .45s, color .1s .45s; }
.мс-тел-поиск[data-s="4"] .мс-палец, .мс-тел-поиск[data-s="5"] .мс-палец, .мс-тел-поиск[data-s="6"] .мс-палец { transform: translate(40px, 91px); opacity: 0; }
.мс-тел-поиск[data-s="4"] .мс-тел-поле, .мс-тел-поиск[data-s="5"] .мс-тел-поле, .мс-тел-поиск[data-s="6"] .мс-тел-поле { opacity: 1; }
.мс-тел-поиск[data-s="4"] .мс-клава, .мс-тел-поиск[data-s="5"] .мс-клава, .мс-тел-поиск[data-s="6"] .мс-клава { transform: none; }
.мс-тел-поиск[data-s="4"] .мс-шапка, .мс-тел-поиск[data-s="5"] .мс-шапка, .мс-тел-поиск[data-s="6"] .мс-шапка { opacity: 0; }
.мс-тел-поиск[data-s="5"] .мс-б1, .мс-тел-поиск[data-s="6"] .мс-б1, .мс-тел-поиск[data-s="6"] .мс-б2 { display: inline; }
.мс-тел-поиск[data-s="4"] .мс-лента, .мс-тел-поиск[data-s="5"] .мс-лента, .мс-тел-поиск[data-s="6"] .мс-лента { transform: translateY(18px); }
.мс-тел-поиск[data-s="5"] .мс-мимо1, .мс-тел-поиск[data-s="6"] .мс-мимо1, .мс-тел-поиск[data-s="6"] .мс-мимо2 { opacity: 0; }
.мс-тел-поиск[data-s="6"] .мс-нашлось { transform: translateY(-36px); }
.мс-тел-поиск[data-s="6"] .мс-нашлось mark { background: rgba(255,189,68,.45); }

/* «Меньше движения» — как у сцен значка в Dock: шаги сменяются без переездов */
:root[data-motion="less"] .мс *,
:root[data-motion="less"] .мс *::after { transition: none !important; animation: none !important; }

/* ---------- Лист-знакомство ----------
   Первое, что видит новый человек (29.09.2026, макет в стиле поста LinkedIn):
   приветствие от автора с его фото, потом карусель возможностей — ролик,
   мысль и где это найти, — и кнопка «Начать». Показывается один раз, потом
   открывается из настроек. Лист всегда тёмный, при любой теме приложения:
   так он задуман. Все правила заперты в #about — имена классов короткие
   и не должны задеть остальное приложение. */

/* Шрифты листа лежат у нас: без запросов к Google, только кириллица и латиница.
   Грузятся, только когда лист открыт — остальное приложение их не использует */
@font-face { font-family: 'Golos Text'; font-weight: 400; font-display: swap;
  src: url(/fonts/GolosText-cyrillic-721d01.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Golos Text'; font-weight: 400; font-display: swap;
  src: url(/fonts/GolosText-latin-65c68b.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Golos Text'; font-weight: 500; font-display: swap;
  src: url(/fonts/GolosText-cyrillic-721d01.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Golos Text'; font-weight: 500; font-display: swap;
  src: url(/fonts/GolosText-latin-65c68b.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Golos Text'; font-weight: 600; font-display: swap;
  src: url(/fonts/GolosText-cyrillic-721d01.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Golos Text'; font-weight: 600; font-display: swap;
  src: url(/fonts/GolosText-latin-65c68b.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Golos Text'; font-weight: 700; font-display: swap;
  src: url(/fonts/GolosText-cyrillic-721d01.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Golos Text'; font-weight: 700; font-display: swap;
  src: url(/fonts/GolosText-latin-65c68b.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Tenor Sans'; font-weight: 400; font-display: swap;
  src: url(/fonts/TenorSans-cyrillic-c8b80c.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Tenor Sans'; font-weight: 400; font-display: swap;
  src: url(/fonts/TenorSans-latin-0c77c1.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Unbounded'; font-weight: 600; font-display: swap;
  src: url(/fonts/Unbounded-cyrillic-cb504d.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Unbounded'; font-weight: 600; font-display: swap;
  src: url(/fonts/Unbounded-latin-37e641.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Unbounded'; font-weight: 800; font-display: swap;
  src: url(/fonts/Unbounded-cyrillic-cb504d.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Unbounded'; font-weight: 800; font-display: swap;
  src: url(/fonts/Unbounded-latin-37e641.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

#about-backdrop {
  position: fixed; inset: 0; z-index: 45;
  background: rgba(10,10,14,.62);
  display: grid; place-items: center;
  padding: 24px 16px;
  opacity: 1;
  transition: opacity .16s ease, display .16s allow-discrete;
}
#about-backdrop[hidden] { opacity: 0; display: none; }
@starting-style { #about-backdrop:not([hidden]) { opacity: 0; } }

#about {
  --ink: #16161A; --line: #2C2C32; --text: #FFFFFF; --soft: #CFCFD6;
  --muted: #A0A0AA; --pink: #FF3D7F; --acc: #FFD23F; --ролик: 340px;
  color-scheme: dark;
  position: relative;
  width: 100%; max-width: 920px; max-height: 100%;
  display: flex; flex-direction: column;
  background: var(--ink); color: var(--text);
  border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 24px 80px rgba(0,0,0,.5);
  overflow: hidden;
  font-family: 'Golos Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  animation: лист-вход .45s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes лист-вход { from { opacity: 0; transform: translateY(16px) scale(.985); } }
#about *, #about *::before, #about *::after { box-sizing: border-box; }
#about ::selection { background: var(--acc); color: var(--ink); }

#about-close {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  color: var(--soft); background: rgba(255,255,255,.06);
  transition: background .14s ease, color .14s ease;
}
#about-close:hover { background: rgba(255,255,255,.14); color: var(--text); }
#about-close svg { width: 16px; height: 16px; }

#about-body { overflow-y: auto; overscroll-behavior: contain; }

/* Шапка: приветствие слева, фото справа */
#about .шапка {
  position: relative; display: grid; grid-template-columns: 1fr 250px; gap: 20px;
  padding: 0 44px; border-bottom: 1px solid var(--line);
}
#about .привет { position: relative; z-index: 1; padding-block: 44px 14px; display: flex; flex-direction: column; gap: 16px; }
#about .привет h1 { margin: 0; font: 800 32px/1.2 'Unbounded', 'Golos Text', sans-serif; letter-spacing: -.02em; text-wrap: balance; }
#about .привет h1 em { font-style: normal; background: var(--acc); color: var(--ink); padding: 0 8px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
#about .привет p { margin: 0; max-width: 540px; font-size: 15.5px; line-height: 1.55; color: var(--soft); text-wrap: pretty; }
#about .привет p.приватность { font-size: 13px; line-height: 1.5; color: var(--muted); }
#about .приватность a { color: var(--soft); text-decoration: underline; text-underline-offset: 2px; }
/* Ссылки — жёлтой плашкой, как слово Mentask; прижаты к нижней линии шапки */
#about .ссылки { display: flex; gap: 10px; margin-top: auto; padding-top: 8px; }
#about .ссылки a { background: var(--acc); color: var(--ink); font: 600 13px 'Unbounded', 'Golos Text', sans-serif; text-decoration: none; padding: 5px 9px; transition: filter .15s; }
#about .ссылки a:hover { filter: brightness(1.08); }
#about .ссылки a:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
/* Фото в потоке само задаёт высоту шапки: голова не упирается в край */
#about .аватар { align-self: end; padding-top: 24px; }
#about .аватар img { width: 230px; aspect-ratio: 600 / 567; display: block; }
#about .подпись-автора {
  position: absolute; right: 14px; bottom: 14px;
  display: inline-flex; align-items: center; writing-mode: vertical-rl; transform: rotate(180deg);
  font: 11px 'Tenor Sans', sans-serif; text-transform: uppercase; letter-spacing: .32em; white-space: nowrap; line-height: 1;
}
#about .подпись-автора i { display: inline-block; width: 1.5px; height: 30px; margin: 10px 0; background: currentColor; }
#about .подпись-автора b { font-weight: 400; color: var(--pink); }

/* Карусель: ролик с текстом слева, названия возможностей столбиком справа */
#about .тело { padding: 26px 44px 28px; display: flex; flex-direction: column; gap: 22px; }
#about .карусель { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: stretch; }
#about .карусель > .лента { grid-column: 1; grid-row: 1; min-width: 0; }
#about .карусель > .вкладки { grid-column: 2; grid-row: 1; }
#about .вкладки { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; min-width: 150px; }
#about .вкладка {
  flex: none; white-space: nowrap;
  display: flex; flex-direction: column; justify-content: space-between; gap: 8px;
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 500; text-align: left; line-height: 1.3;
  color: #8A8A93; transition: color .15s ease;
}
#about .вкладка:hover, #about .вкладка[aria-selected="true"] { color: var(--text); }
#about .вкладка:focus-visible { outline: 2px solid var(--acc); outline-offset: 4px; border-radius: 4px; }
/* Полоска заполняется по ходу ролика */
#about .полоса { position: relative; height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; }
#about .полоса::after { content: ""; position: absolute; inset: 0; background: var(--pink); border-radius: inherit; transform-origin: left; transform: scaleX(var(--p, 0)); }

#about .лента { display: flex; gap: 28px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
#about .лента::-webkit-scrollbar { display: none; }
#about .слайд { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; display: grid; grid-template-columns: var(--ролик) 1fr; gap: 28px; align-items: start; }
#about .кадр { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid var(--line); cursor: pointer; }
#about .кадр video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Пауза: видна на паузе всегда, во время показа — только пока двигается мышь над роликом
   (класс «движение» ставит about.js и снимает через 1,5 с покоя). На телефоне во время
   показа её нет: висела поверх ролика всё время (жалоба Ильи 09.10) */
#about .пауза {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 64px; height: 64px; border-radius: 50%;
  border: 0; background: rgba(22,22,26,.78); color: #fff; cursor: pointer;
  display: grid; place-items: center; opacity: 0; transition: opacity .15s;
}
#about .кадр.движение .пауза, #about .пауза:focus-visible, #about .кадр.стоп .пауза { opacity: 1; }
#about .пауза svg { width: 24px; height: 24px; fill: currentColor; }
#about .пауза .иг { display: none; margin-left: 3px; }
#about .кадр.стоп .пауза .иг { display: block; }
#about .кадр.стоп .пауза .ип { display: none; }
/* Текст тянется на высоту ролика, стрелки — к его нижнему краю */
#about .текст { align-self: stretch; display: flex; flex-direction: column; gap: 10px; max-width: 520px; }
#about .текст h2 { margin: -5px 0 0; font-size: 22px; font-weight: 700; line-height: 1.3; text-wrap: balance; }
#about .текст p { margin: 0; white-space: pre-line; font-size: 15.5px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
#about .стрелки { display: flex; gap: 8px; margin-top: auto; }
#about .стрелка {
  width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--line); background: none;
  color: var(--soft); font-size: 16px; cursor: pointer; transition: border-color .15s, color .15s;
}
#about .стрелка:hover { border-color: var(--pink); color: var(--text); }
#about .стрелка:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

#about-start {
  display: block; width: 100%; padding: 16px; border: 0; border-radius: 14px;
  background: var(--pink); color: #fff; font: 600 16px 'Unbounded', 'Golos Text', sans-serif;
  cursor: pointer; transition: filter .14s, transform .14s;
}
#about-start:hover { filter: brightness(1.08); transform: translateY(-1px); }
#about-start:active { transform: scale(.995); }
#about-start:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }

/* На телефоне лист во весь экран, полоски вкладок — строкой над роликом */
@media (max-width: 720px) {
  #about-backdrop { padding: 0; }
  #about { max-width: none; height: 100%; border-radius: 0; border: 0; }
  #about .шапка { grid-template-columns: 1fr; padding: 0 20px; gap: 0; }
  #about .привет { padding-block: 24px 4px; gap: 12px; padding-right: 30px; }
  #about .привет h1 { font-size: 26px; }
  #about .привет p { font-size: 15px; }
  #about .аватар { padding-top: 12px; justify-self: center; }
  #about .аватар img { width: 228px; }
  #about .подпись-автора { bottom: 20px; right: 12px; }
  #about .тело { padding: 18px 20px calc(22px + env(safe-area-inset-bottom)); gap: 16px; }
  #about .карусель { display: flex; flex-direction: column; gap: 8px; }
  #about .вкладки { flex-direction: row; min-width: 0; gap: 5px; }
  #about .вкладки > .вкладка { flex: 1 1 0; padding-block: 10px; }
  #about .вкладка .имя { display: none; }
  #about .лента { gap: 18px; }
  #about .слайд { grid-template-columns: 1fr; gap: 16px; }
  #about .текст h2 { font-size: 19px; }
  #about .текст p { font-size: 15px; }
  /* Стрелки листают и на телефоне: свайп находят не все. Две половины на всю ширину — под палец */
  #about .стрелки { gap: 10px; padding-top: 4px; }
  #about .стрелка { flex: 1 1 0; width: auto; height: 46px; border-radius: 14px; font-size: 18px; }
}
/* На сенсорном экране :hover залипает после нажатия — розовый контур не держим */
@media (hover: none) { #about .стрелка:hover { border-color: var(--line); color: var(--soft); } }
:root[data-motion="less"] #about { animation: none; }


/* ---------- Аналитика привычек ---------- */

/* Кнопка рядом со стрелками месяцев */
.habit-stats-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 10px; border-radius: 8px;
  color: var(--text-muted); font-size: calc(13px * var(--fs));
}
.habit-stats-btn:hover { background: var(--bg-hover); color: var(--text); }
.habit-stats-btn .ico { width: 15px; height: 15px; }

#stats-backdrop {
  position: fixed; inset: 0; z-index: 46;
  background: rgba(0,0,0,.28);
  display: grid; place-items: center;
  padding: 20px;
  transition: opacity .16s ease;
}
#stats-backdrop[hidden] { opacity: 0; display: none; }
@starting-style { #stats-backdrop:not([hidden]) { opacity: 0; } }

#stats-dialog {
  width: 100%; max-width: 680px; max-height: 100%;
  background: var(--bg); border-radius: 12px;
  box-shadow: 0 12px 48px rgba(0,0,0,.28);
  display: flex; flex-direction: column; overflow: hidden;
  animation: стат-вход .2s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes стат-вход { from { opacity: 0; transform: translateY(10px) scale(.99); } }
:root[data-motion="less"] #stats-dialog { animation: none; }

#stats-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px 10px;
}
#stats-head h2 { margin: 0; font-size: calc(16px * var(--fs)); font-weight: 600; }
#stats-close {
  margin-left: auto; width: 28px; height: 28px; border-radius: 7px;
  display: grid; place-items: center; color: var(--text-muted);
}
#stats-close svg { width: 15px; height: 15px; }
#stats-close:hover { background: var(--bg-hover); color: var(--text); }

#stats-body { padding: 4px 16px 18px; overflow-y: auto; }

.стат-верх { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 14px; }
.стат-число { display: flex; flex-direction: column; gap: 2px; }
.стат-число b { font-size: calc(24px * var(--fs)); font-weight: 650; letter-spacing: -.01em; }
.стат-число span { font-size: calc(12.5px * var(--fs)); color: var(--text-muted); }

.стат-режимы { display: inline-flex; gap: 2px; padding: 3px; margin-bottom: 12px;
  background: var(--bg-block); border-radius: 999px; }
.стат-режим {
  height: 26px; padding: 0 12px; border-radius: 999px;
  color: var(--text-muted); font-size: calc(13px * var(--fs));
}
.стат-режим.chosen { background: var(--bg); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.12); }

.стат-график { display: block; width: 100%; height: 200px; }
.стат-сетка { stroke: var(--line); stroke-width: 1; }
.стат-ось, .стат-подпись {
  fill: var(--text-faint); font-size: 10px; font-family: inherit;
}
.стат-ось { text-anchor: end; }
.стат-подпись { text-anchor: middle; }
/* Столбики вырастают снизу — по очереди, слева направо */
.стат-столбик rect { fill: var(--teal); transform-box: fill-box; transform-origin: bottom;
  animation: стат-рост .32s cubic-bezier(.2,.8,.3,1) both; animation-delay: calc(var(--i) * 14ms); }
@keyframes стат-рост { from { transform: scaleY(0); } }
:root[data-motion="less"] .стат-столбик rect { animation: none; }
.стат-столбик:hover rect { fill: var(--blue); }

.стат-пояснение { margin: 10px 0 0; font-size: calc(12.5px * var(--fs)); color: var(--text-faint); }
.стат-пусто { color: var(--text-muted); font-size: calc(14px * var(--fs)); }

@media (max-width: 720px) {
  .стат-верх { gap: 16px; }
  .habit-stats-btn span { display: none; }
}

/* ---------- Строка с чекбоксом прямо в тексте ----------
   «☐ купить хлеб» в заметке или описании: квадратик нажимается и ставит
   галочку в самом тексте, а строка рядом правится как обычная. Квадратик —
   тот же, что у пунктов в карточке, только стоит по середине своей строки. */
.текст-вид .чек-стр { display: flex; align-items: flex-start; gap: 8px; }
.текст-вид .чек-стр .check {
  width: calc(13px * var(--fs)); height: calc(13px * var(--fs));
  margin-top: calc((1lh - 13px * var(--fs)) / 2);
  cursor: pointer;
}
.текст-вид .чек-стр .check svg { width: calc(9.8px * var(--fs)); height: calc(9.8px * var(--fs)); }
.текст-вид .чек-текст { flex: 1; min-width: 0; }
.текст-вид .чек-стр.сделано .чек-текст { color: var(--text-faint); text-decoration: line-through; }

/* ---------- Меню над выделенным текстом ----------
   Как в Notion: выделил слова — рядом кнопки «Чекбокс» и «Блок для
   копирования». Координаты ставит app.js, от выделения. */
.меню-выделения {
  position: fixed; z-index: 80;
  display: flex; gap: 2px; padding: 4px;
  background: var(--bg-card);
  border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0,0,0,.22), 0 2px 6px rgba(0,0,0,.14);
  animation: pop-in .11s ease;
  -webkit-user-select: none; user-select: none;
}
.меню-выделения[hidden] { display: none; }
.меню-выделения button {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 7px;
  font-size: calc(13px * var(--fs)); color: var(--text);
  white-space: nowrap;
}
.меню-выделения button:hover { background: var(--bg-hover); }
.меню-выделения button[hidden] { display: none; }
.меню-выделения svg { width: 16px; height: 16px; flex: none; color: var(--text-muted); }
/* Пальцем попадать труднее, чем мышью, — кнопки выше */
@media (hover: none) {
  .меню-выделения button { padding: 10px 12px; }
}

/* Прозрачная подпись над кнопкой со спрятанным переключателем — ради
   системного щелчка на iPhone (см. ЩЕЛЧОК в app.js). Шире самого квадратика
   на те же 6 точек, что и его невидимая зона нажатия. */
.щелчок {
  position: absolute; inset: -6px; z-index: 2;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
#fab .щелчок, #menu-btn .щелчок { inset: 0; border-radius: 50%; }
.task-swipe-back .щелчок, .note-act .щелчок { inset: 0; }
/* Плюс тянут пальцем — жест целиком его */
#fab .щелчок { touch-action: none; }
.щелчок input {
  position: absolute; width: 1px; height: 1px; margin: 0;
  visibility: hidden;
}

/* ---------- Окошко «Отменить» после удаления ----------
   Тёмная пилюля по центру списка: кольцо с цифрой тает за три секунды,
   справа белая «Отменить» (вариант «Кольцо», 30.09.2026). Тёмная в обеих
   темах — как системные уведомления, на любом фоне читается одинаково. */
.отмена-окно {
  position: fixed; z-index: 70;
  left: calc(var(--sidebar-w) + (100vw - var(--sidebar-w)) / 2); bottom: 28px;
  transform: translate(-50%, 0);
  display: flex; align-items: center; gap: 12px;
  padding: 6px 6px 6px 8px; border-radius: 999px;
  background: #2c2c30; color: #eee; font-size: 14px;
  box-shadow: 0 10px 34px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.06) inset;
  transition: transform .28s cubic-bezier(.2,.9,.3,1.15), opacity .2s ease;
  -webkit-user-select: none; user-select: none; touch-action: none;
}
.отмена-окно.прячется { opacity: 0; transform: translate(-50%, 16px); pointer-events: none; }
.отмена-окно .кольцо { position: relative; width: 30px; height: 30px; flex: none; }
.отмена-окно svg { width: 30px; height: 30px; transform: rotate(-90deg); }
.отмена-окно circle { fill: none; stroke-width: 2.5; }
.отмена-окно .фон { stroke: rgba(255,255,255,.12); }
.отмена-окно .дуга { stroke: var(--pink); stroke-linecap: round; stroke-dasharray: 75.4;
  stroke-dashoffset: calc(75.4 * (1 - var(--ост, 1))); }
.отмена-окно.стоит .дуга { stroke: #8b8b93; }
.отмена-окно b { position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.отмена-окно .отменить { padding: 8px 14px; border-radius: 999px; background: #fff; color: #111;
  font-size: 13.5px; font-weight: 600; }
.отмена-окно .отменить:hover { background: #e9e9ee; }
@media (max-width: 760px) {
  .отмена-окно { left: 50%; bottom: calc(22px + env(safe-area-inset-bottom)); }
  .отмена-окно .отменить { padding: 10px 16px; }
}
:root[data-motion="less"] .отмена-окно { transition: opacity .2s ease; }

/* ---------- Идеальный день в привычках ----------
   Все привычки дня отмечены — за столбцом золотая капсула от шапки до итога,
   внизу вместо числа звезда (вариант «Колонна», 30.09.2026). Капсула собрана
   из фона шапки, клеток и итога: строки идут вплотную, поэтому она сплошная.
   Отступ по 3px с боков — чтобы соседние идеальные дни не слипались. */
.habits { --идеал-фон: rgba(255, 210, 63, .15); --идеал-край: rgba(255, 210, 63, .38); --идеал-звезда: #FFD23F; }
:root:not([data-theme="dark"]) .habits { --идеал-фон: rgba(245, 165, 36, .14); --идеал-край: rgba(214, 140, 20, .38); --идеал-звезда: #E39A12; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .habits { --идеал-фон: rgba(255, 210, 63, .15); --идеал-край: rgba(255, 210, 63, .38); --идеал-звезда: #FFD23F; } }
.habit-day-head.идеал, .habit-cell.идеал, .habit-total.идеал {
  margin-inline: 3px;
  background-color: var(--идеал-фон);
  box-shadow: inset 1px 0 0 var(--идеал-край), inset -1px 0 0 var(--идеал-край);
}
.habit-day-head.идеал { border-radius: 18px 18px 0 0;
  box-shadow: inset 1px 0 0 var(--идеал-край), inset -1px 0 0 var(--идеал-край), inset 0 1px 0 var(--идеал-край); }
.habit-total.идеал { border-radius: 0 0 18px 18px; color: var(--идеал-звезда); font-size: calc(15px * var(--fs));
  box-shadow: inset 1px 0 0 var(--идеал-край), inset -1px 0 0 var(--идеал-край), inset 0 -1px 0 var(--идеал-край); }
/* Первое число месяца: разрыв даёт отступ слева, а не внутреннее поле —
   иначе капсула залезла бы в промежуток между месяцами */
.habit-day-head.идеал.month-start, .habit-cell.идеал.month-start, .habit-total.идеал.month-start {
  margin-left: calc(3px + var(--разрыв)); padding-left: 0;
}
/* Растёт снизу вверх: каждая ступенька загорается чуть позже нижней */
.habit-day-head.растёт, .habit-cell.растёт { animation: идеал-вход .32s ease-out var(--ид, 0ms) both; }
.habit-total.растёт { animation: идеал-вход .32s ease-out var(--ид, 0ms) both, идеал-звезда .55s cubic-bezier(.2, 1.6, .3, 1) calc(var(--ид, 0ms) + 380ms) both; }
@keyframes идеал-вход { from { background-color: transparent; box-shadow: none; } }
@keyframes идеал-звезда { from { transform: scale(.2) rotate(-40deg); } }
:root[data-motion="less"] .habit-day-head.растёт, :root[data-motion="less"] .habit-cell.растёт,
:root[data-motion="less"] .habit-total.растёт { animation: none; }
/* Клетка в капсуле уже на 6px, а перемычка серии должна дотянуться до
   соседней бусины — удлиняем её ровно на отступы */
.habit-cell.идеал.link-right::after { width: calc(100% + 6px); }
.habit-cell.идеал.month-end.link-right::after { width: calc(100% + 6px + var(--разрыв)); }