/* ============================================================
   HabitFlow — кастомные стили поверх Tailwind.
   Здесь живёт то, что удобнее держать в обычном CSS:
   темы (тёмная/светлая), селекторы по data-атрибутам (статусы),
   heatmap, кольцо score.

   ТЕМЫ. Все цвета заданы CSS-переменными в :root (тёмная тема —
   по умолчанию) и переопределяются в html.light. Каналы вида
   `--c-ink: 11 15 25` использует Tailwind (rgb(var(--x) / alpha)),
   поэтому классы bg-ink/85, text-slate-400 и т.п. автоматически
   меняются с темой. Шкала slate в светлой теме ЗЕРКАЛЬНАЯ:
   slate-100 = «основной текст» остаётся контрастным в обеих темах.
   ============================================================ */

:root {
  color-scheme: dark;

  /* Каналы для Tailwind */
  --c-ink: 11 15 25;        /* фон страницы */
  --c-card: 17 24 39;       /* карточки */
  --c-line: 31 41 55;       /* линии/границы */
  --c-accent: 99 102 241;   /* индиго */
  --s-100: 241 245 249;
  --s-200: 226 232 240;
  --s-300: 203 213 225;
  --s-400: 148 163 184;
  --s-500: 100 116 139;
  --s-600: 71 85 105;
  --s-700: 51 65 85;

  /* Полные цвета для этого файла */
  --ink: rgb(var(--c-ink));
  --card: rgb(var(--c-card));
  --line: rgb(var(--c-line));
  --accent: rgb(var(--c-accent));
  --ok: #10b981;

  /* Тонкие места, различающиеся между темами */
  --glow: rgba(99, 102, 241, 0.45);     /* свечение активного маркера */
  --done-title: #86efac;                /* заголовок завершённого этапа */
  --badge-ind: #a5b4fc;                 /* индиго-бейджи (∥ параллельно) */
  --ext: #d0a355;                       /* строки добавленного времени */
  --hm-0: #17203a;                      /* heatmap: пусто */
  --hm-1: #14532d;
  --hm-2: #15803d;
  --hm-3: #22c55e;
  --hm-4: #86efac;                      /* heatmap: максимум */
  --card-shadow: none;
}

html.light {
  color-scheme: light;

  --c-ink: 243 246 250;
  --c-card: 255 255 255;
  --c-line: 226 232 240;
  --c-accent: 79 70 229;    /* индиго чуть темнее — контраст на белом */
  /* Зеркальная шкала slate: текстовые классы остаются читаемыми */
  --s-100: 15 23 42;
  --s-200: 30 41 59;
  --s-300: 51 65 85;
  --s-400: 71 85 105;
  --s-500: 100 116 139;
  --s-600: 148 163 184;
  --s-700: 203 213 225;

  --glow: rgba(79, 70, 229, 0.2);
  --done-title: #047857;
  --badge-ind: #4f46e5;
  --ext: #a16207;
  --hm-0: #e2e8f0;
  --hm-1: #bbf7d0;
  --hm-2: #86efac;
  --hm-3: #22c55e;
  --hm-4: #15803d;
  --card-shadow: 0 1px 3px rgba(15, 23, 42, 0.07);
}

/* Плавная смена темы и лёгкая тень карточек в светлой */
body { transition: background-color 0.2s, color 0.2s; }
html.light .bg-card { box-shadow: var(--card-shadow); }

/* Кнопка темы в шапке: луна в тёмной, солнце в светлой */
#theme-toggle { color: rgb(var(--s-500)); transition: color 0.15s; }
#theme-toggle:hover { color: rgb(var(--s-100)); }
#theme-toggle .icon-sun { display: none; }
html.light #theme-toggle .icon-sun { display: block; }
html.light #theme-toggle .icon-moon { display: none; }

/* Пара точечных правок Tailwind-утилит под светлый фон
   (!important — стили Play CDN вставляются после этого файла) */
html.light .locked-hint { color: #b45309 !important; }   /* amber-700 */
html.light .task-date { color: #0369a1 !important; }     /* sky-700 */

/* Отступ под нижнюю навигацию на телефонах с «бровью» */
.mobile-nav {
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* ---------------- Toast (уведомления) ---------------- */
/* Тёмная плашка в обеих темах — контрастно и знакомо */
.toast {
  position: fixed;
  left: 50%;
  bottom: 84px;
  transform: translateX(-50%);
  z-index: 60;
  max-width: 90vw;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid #1f2937;
  background: #030712;
  color: #e2e8f0;
  font-size: 13px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  transition: opacity 0.25s, transform 0.25s;
}
.toast.toast-error { border-color: rgba(244, 63, 94, 0.5); color: #fda4af; }
.toast.toast-hidden { opacity: 0; transform: translate(-50%, 8px); pointer-events: none; }
@media (min-width: 768px) { .toast { bottom: 24px; } }

/* ---------------- Кольцо дневного score ---------------- */
/* Процент задаётся CSS-переменной --p (0..100), обновляется из JS */
.score-ring {
  --p: 0;
  width: 84px;
  height: 84px;
  border-radius: 9999px;
  background: conic-gradient(var(--ok) calc(var(--p) * 1%), var(--line) 0);
  display: grid;
  place-items: center;
  transition: background 0.4s;
}
.score-ring::before {
  content: '';
  grid-area: 1 / 1;
  width: 64px;
  height: 64px;
  border-radius: 9999px;
  background: var(--card);
}
.score-ring-value {
  grid-area: 1 / 1;
  z-index: 1;
  font-weight: 800;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

/* ---------------- Чекбоксы привычек и задач ---------------- */
.habit-check,
.task-check {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border: 1.5px solid rgb(var(--s-600));
  border-radius: 8px;
  color: transparent;
  background: transparent;
  transition: all 0.15s;
}
.habit-check { width: 26px; height: 26px; }
.task-check { width: 20px; height: 20px; border-radius: 6px; }
.habit-check:hover, .task-check:hover { border-color: var(--ok); }

.habit-card[data-done="true"] .habit-check,
.task-row[data-done="true"] .task-check {
  background: var(--ok);
  border-color: var(--ok);
  color: #fff;
}
.habit-card[data-done="true"] .habit-name,
.task-row[data-done="true"] .task-title {
  color: rgb(var(--s-500));
  text-decoration: line-through;
}
.task-check:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---------------- Heatmap (стиль GitHub) ---------------- */
.hm-scroll { overflow-x: auto; padding-bottom: 4px; }
.hm-grid {
  display: grid;
  grid-auto-flow: column;          /* заполнение по колонкам: колонка = неделя */
  grid-template-rows: repeat(7, 12px);
  grid-auto-columns: 12px;
  gap: 3px;
  width: max-content;
}
.hm-months {
  display: flex;
  height: 14px;
  margin-bottom: 3px;
  font-size: 10px;
  color: rgb(var(--s-500));
  width: max-content;
}
.hm-months span { display: block; width: 15px; overflow: visible; white-space: nowrap; }
.hm-weekdays {
  display: grid;
  grid-template-rows: repeat(7, 12px);
  gap: 3px;
  margin-top: 17px;                 /* компенсация строки месяцев */
  font-size: 9px;
  color: rgb(var(--s-500));
  text-align: right;
}
.hm-cell {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--hm-0);
}
.hm-l0 { background: var(--hm-0); }
.hm-l1 { background: var(--hm-1); }
.hm-l2 { background: var(--hm-2); }
.hm-l3 { background: var(--hm-3); }
.hm-l4 { background: var(--hm-4); }
.hm-cell.hm-today { outline: 1.5px solid var(--accent); outline-offset: 1px; }

/* ---------------- Таймлайн дорожной карты ---------------- */
/* Вертикальная линия, проходящая через маркеры ячеек */
.cells-list { padding-left: 0; }
.cells-list::before {
  content: '';
  position: absolute;
  left: 19px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  background: rgb(var(--s-700));
}

/* У пустой сферы линию не рисуем */
.cells-list.is-empty::before { display: none; }

.cell-marker {
  position: relative;
  z-index: 1;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  border: 2px solid rgb(var(--s-700));
  background: var(--ink);
  display: grid;
  place-items: center;
  transition: border-color 0.2s, box-shadow 0.2s, color 0.2s;
}
.cell-marker span { display: none; grid-area: 1 / 1; }

/* Видимость иконки и оформление — целиком из data-status узла */
.cell-node[data-status="done"]   .icon-done   { display: grid; }
.cell-node[data-status="active"] .icon-active { display: grid; }
.cell-node[data-status="locked"] .icon-locked { display: grid; }

.cell-node[data-status="done"] .cell-marker {
  border-color: var(--ok);
  color: var(--ok);
}
.cell-node[data-status="active"] .cell-marker {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 18px var(--glow);
}
.cell-node[data-status="locked"] .cell-marker { color: rgb(var(--s-600)); }

.cell-node[data-status="active"] .cell-card { border-color: rgba(99, 102, 241, 0.45); }
.cell-node[data-status="done"] .cell-card h3 { color: var(--done-title); }
.cell-node[data-status="locked"] .cell-card { opacity: 0.55; filter: saturate(0.6); }

/* Подсказка о блокировке видна только в locked-ячейках */
.locked-hint { display: none; }
.cell-node[data-status="locked"] .locked-hint { display: flex; }
.cell-node[data-status="locked"] .task-input,
.cell-node[data-status="locked"] .task-add-btn { opacity: 0.4; pointer-events: none; }

/* Развёрнутое состояние: шеврон крутится */
.cell-node.is-open .cell-chevron { transform: rotate(180deg); }

/* Drag-and-drop (SortableJS) */
.cell-ghost { opacity: 0.35; }
.sortable-chosen .cell-card { outline: 1px dashed var(--accent); }
.sortable-drag { opacity: 0.9; }

/* Уважение к reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---------------- Параллельные группы этапов ---------------- */
/* Кнопка ∥: серая по умолчанию, акцентная у этапа, объединённого с предыдущим */
.cell-link { color: rgb(var(--s-600)); transition: color 0.15s; }
.cell-link:hover { color: rgb(var(--s-400)); }
.cell-node[data-linked="true"] .cell-link { color: var(--accent); }
.cell-link:disabled { opacity: 0.3; cursor: not-allowed; }

/* Бейдж «параллельно» виден только у прилинкованных этапов */
.parallel-badge {
  display: none;
  align-items: center;
  padding: 1px 7px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--badge-ind);
  background: rgba(99, 102, 241, 0.14);
  border: 1px solid rgba(99, 102, 241, 0.35);
  white-space: nowrap;
}
.cell-node[data-linked="true"] .parallel-badge { display: inline-flex; }

/* Параллельный этап прижимается к предыдущему — видно, что это одна группа */
.cells-list > .cell-node[data-linked="true"] { margin-top: 6px !important; }

/* ---------------- Ручное завершение (путь / сфера / этап) ---------------- */
.done-btn {
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  padding: 0.4rem 0.8rem;
  font-size: 12px;
  font-weight: 700;
  color: rgb(var(--s-400));
  transition: all 0.15s;
}
.done-btn:hover { color: #34d399; border-color: rgba(52, 211, 153, 0.4); }
.done-btn[data-done="true"] {
  color: #059669;
  border-color: rgba(16, 185, 129, 0.45);
  background: rgba(16, 185, 129, 0.08);
}

.done-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #059669;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  white-space: nowrap;
}
:root:not(.light) .done-btn[data-done="true"],
:root:not(.light) .done-badge { color: #34d399; }

/* Бейдж и кнопка сферы управляются флагом data-done на секции */
.sphere-badge { display: none; }
.sphere[data-done="true"] .sphere-badge { display: inline-flex; }
.sphere-done { color: rgb(var(--s-600)); transition: color 0.15s; }
.sphere-done:hover { color: rgb(var(--s-400)); }
.sphere[data-done="true"] .sphere-done { color: var(--ok); }

/* Кнопка «Завершить этап»: круглый чекбокс в шапке карточки */
.cell-done {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 999px;
  border: 2px solid rgb(var(--s-700));
  color: transparent;
  transition: all 0.15s;
}
.cell-done:hover { border-color: #34d399; color: #34d399; }
.cell-node[data-status="done"] .cell-done {
  background: #10b981;
  border-color: #10b981;
  color: #fff;
}
.cell-done:disabled { opacity: 0.35; cursor: not-allowed; }
.cell-done:disabled:hover { border-color: rgb(var(--s-700)); color: transparent; }

/* Ссылка из цели на её карточку (проекты/задачи/время) */
.task-link { color: rgb(var(--s-600)); transition: color 0.15s; }
.task-link:hover { color: var(--accent); }

/* ---------------- Вкладка «Цели»: список ---------------- */
.goal-dot {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border-radius: 999px;
  border: 2px solid rgb(var(--s-600));
}
.goal-dot-done { background: #10b981; border-color: #10b981; }

/* ---------------- Карточка цели: задачи и таймер ---------------- */
.task-item[data-done="true"] .task-title {
  color: rgb(var(--s-500));
  text-decoration: line-through;
}

.timer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 999px;
  border: 1px solid rgb(var(--s-700));
  color: rgb(var(--s-400));
  transition: all 0.15s;
}
.timer-btn:hover { color: var(--accent); border-color: var(--accent); }
.timer-btn .timer-icon-stop { display: none; }

/* Идёт таймер: строка подсвечена, иконка меняется на «стоп», кнопка пульсирует */
.task-item[data-running-started] {
  background: rgba(99, 102, 241, 0.08);
  outline: 1px solid rgba(99, 102, 241, 0.35);
}
.task-item[data-running-started] .timer-btn {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
  animation: timer-pulse 2s ease-in-out infinite;
}
.task-item[data-running-started] .timer-btn .timer-icon-play { display: none; }
.task-item[data-running-started] .timer-btn .timer-icon-stop { display: block; }

@keyframes timer-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--glow); }
  50% { box-shadow: 0 0 0 6px rgba(99, 102, 241, 0); }
}

/* Строки добавленного времени с обоснованием */
.ext-line { font-size: 11px; color: var(--ext); }

/* ---------------- Календарь: чипы задач ---------------- */
/* Цвет текста чипов задаётся классами (а не инлайном) — темы работают */
.cal-chip { color: rgb(var(--s-200)); }
.cal-chip[data-done="true"] { color: rgb(var(--s-500)); text-decoration: line-through; }

.goal-chip {
  border: 1px dashed rgba(129, 140, 248, 0.55);
  background: rgba(99, 102, 241, 0.10);
}

/* ================= Геймификация ================= */

/* Чип суммарного опыта в шапке */
.xp-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  white-space: nowrap;
}
html.light .xp-chip { color: #b45309; }

/* Уровни нагрузки: зелёный / жёлтый / красный / бордовый */
.lvl-g { --lvl: #22c55e; }
.lvl-y { --lvl: #eab308; }
.lvl-r { --lvl: #ef4444; }
.lvl-b { --lvl: #7f1d1d; }
html.light .lvl-b { --lvl: #881337; }

/* Точки-индикаторы в углу дня: слева привычки, справа трудочасы */
.day-ind { position: absolute; left: 5px; bottom: 5px; display: flex; gap: 3px; }
.day-dot {
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--lvl); display: inline-block;
}
.day-dot-w { border-radius: 2px; }  /* трудочасы — квадратик, чтобы различать */

/* Чипы медиан месяца/года в шапке календаря */
.stat-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 1px 8px; border-radius: 999px;
  border: 1px solid var(--line);
  color: rgb(var(--s-400));
  font-weight: 700; white-space: nowrap;
}
.stat-chip[class*="lvl-"] { color: var(--lvl); border-color: var(--lvl); }
.stat-chip.lvl-b { background: rgba(127, 29, 29, 0.15); }

/* ---- Привычки проекта: строки иерархии ---- */
.habit-dot {
  width: 12px; height: 12px; flex-shrink: 0;
  border-radius: 999px; border: 2px solid rgb(var(--s-600));
  transition: all 0.15s;
}
.habit-row[data-status="active"] .habit-dot { border-color: var(--accent); box-shadow: 0 0 8px var(--glow); }
.habit-row[data-status="formed"] .habit-dot { background: #10b981; border-color: #10b981; }
.habit-row[data-status="locked"] { opacity: 0.5; filter: saturate(0.6); }
.habit-row[data-status="formed"] .habit-title { color: rgb(var(--s-400)); }

.formed-badge { display: none; }
.habit-row[data-status="formed"] .formed-badge { display: inline-flex; }
.habit-row .parallel-badge { display: none; }
.habit-row[data-linked="true"] .parallel-badge { display: inline-flex; }
.habits-list > .habit-row[data-linked="true"] { margin-top: 2px !important; }

.diff-chip {
  display: inline-flex; gap: 4px; padding: 0 6px;
  border-radius: 6px; border: 1px solid var(--line);
  color: rgb(var(--s-400));
}
.hab-step {
  width: 26px; height: 26px; flex-shrink: 0;
  border-radius: 8px; border: 1px solid var(--line);
  color: rgb(var(--s-300)); font-weight: 800; font-size: 14px;
  transition: all 0.15s;
}
.hab-minus:hover:not(:disabled) { color: #34d399; border-color: #34d399; }
.hab-plus:hover:not(:disabled) { color: #f59e0b; border-color: #f59e0b; }
.hab-step:disabled { opacity: 0.3; cursor: not-allowed; }
.habit-link { color: rgb(var(--s-600)); }
.habit-row[data-linked="true"] .habit-link { color: var(--accent); }
.habit-link:disabled { opacity: 0.3; }

/* ---- Пул ---- */
.pool-active {
  display: grid; place-items: center; width: 20px; height: 20px; flex-shrink: 0;
  border: 1.5px solid rgb(var(--s-600)); border-radius: 6px;
  color: transparent; transition: all 0.15s;
}
.pool-row[data-active="true"] .pool-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.pool-inactive-note { display: none; }
.pool-row[data-active="false"] .pool-inactive-note { display: inline; }
.pool-row[data-active="false"] .habit-title { color: rgb(var(--s-500)); }

/* ---- Кнопки отметки дня в модалке календаря ---- */
.mark-btn {
  min-width: 34px; height: 28px; padding: 0 8px; flex-shrink: 0;
  border-radius: 8px; border: 1px solid var(--line);
  font-size: 12px; font-weight: 800; color: rgb(var(--s-500));
  transition: all 0.15s;
}
.mark-done.on { color: #fff; background: #10b981; border-color: #10b981; }
.mark-violated.on { color: #fff; background: #e11d48; border-color: #e11d48; }
.mark-excused.on { color: #fff; background: rgb(var(--s-500)); border-color: rgb(var(--s-500)); }
.mark-btn:hover:not(.on) { border-color: rgb(var(--s-400)); color: rgb(var(--s-300)); }

/* ================= Календарь: режимы, пул, таймлайн ================= */

/* Переключатель Год/Месяц/Неделя/День */
.view-switch a {
  padding: 5px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  color: rgb(var(--s-400));
  font-weight: 700;
}
.view-switch a.on { color: #fff; background: var(--accent); border-color: var(--accent); }

/* Пул нераспределённых задач */
.pool-task {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--card);
  cursor: grab;
}
.pool-task:active { cursor: grabbing; }
.pool-remaining {
  flex-shrink: 0;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid rgba(99, 102, 241, 0.35);
  background: rgba(99, 102, 241, 0.1);
  color: var(--badge-ind);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.day-cell.drop-hint { outline: 2px dashed var(--accent); outline-offset: -2px; background: rgba(99, 102, 241, 0.08); }

/* Чипы свободных промежутков в модалке размещения */
.slot-chip {
  padding: 3px 9px;
  border-radius: 8px;
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #34d399;
  font-size: 12px;
  font-weight: 700;
}
.slot-chip:hover { background: rgba(16, 185, 129, 0.12); }
html.light .slot-chip { color: #059669; }

/* Таймлайн дня */
#day-timeline { min-height: 200px; }
.tl-hour {
  position: absolute;
  left: 0; right: 0;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
  pointer-events: none;
}
.tl-hour span {
  position: absolute;
  top: -8px; left: 6px;
  font-size: 10px;
  color: rgb(var(--s-600));
  background: var(--card);
  padding: 0 3px;
}
.tl-gap {
  position: absolute;
  left: 52px; right: 8px;
  border-radius: 10px;
  border: 1px dashed rgba(52, 211, 153, 0.35);
  color: rgba(52, 211, 153, 0.75);
  font-size: 11px;
  font-weight: 700;
  text-align: left;
  padding: 4px 10px;
  transition: background 0.15s;
  overflow: hidden;
}
.tl-gap:hover { background: rgba(16, 185, 129, 0.08); }
.tl-block {
  position: absolute;
  left: 52px; right: 8px;
  border-radius: 10px;
  border: 1px solid rgba(99, 102, 241, 0.5);
  background: rgba(99, 102, 241, 0.16);
  overflow: hidden;
  cursor: pointer;
}
.tl-habit {
  border-style: dashed;
  background: rgba(129, 140, 248, 0.10);
  cursor: default;
}
.tl-done { opacity: 0.55; }
.tl-done .tl-label { text-decoration: line-through; }
.tl-prep {
  background: repeating-linear-gradient(135deg,
    rgba(245, 158, 11, 0.25) 0 6px, rgba(245, 158, 11, 0.08) 6px 12px);
  border-bottom: 1px dashed rgba(245, 158, 11, 0.5);
}
.tl-label {
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  color: rgb(var(--s-100));
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* ---- Отложенные привычки («к выполнению позднее») ---- */
.habit-row[data-status="deferred"] .habit-dot {
  border-style: dashed;
  border-color: rgb(var(--s-500));
}
.habit-row[data-status="deferred"] .habit-title { color: rgb(var(--s-400)); }

.deferred-badge {
  display: none;
  align-items: center;
  padding: 1px 7px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  color: rgb(var(--s-400));
  border: 1px dashed rgb(var(--s-600));
  white-space: nowrap;
}
.habit-row[data-status="deferred"] .deferred-badge { display: inline-flex; }

/* Кнопка ▶/⏸: play у отложенной (акцентная), pause у активной; скрыта у locked/formed */
.hab-start {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px; flex-shrink: 0;
  border-radius: 8px;
  border: 1px solid var(--line);
  color: rgb(var(--s-400));
  transition: all 0.15s;
}
.hab-start .hs-play { display: none; }
.habit-row[data-status="deferred"] .hab-start {
  color: #fff; background: var(--accent); border-color: var(--accent);
}
.habit-row[data-status="deferred"] .hab-start .hs-play { display: block; }
.habit-row[data-status="deferred"] .hab-start .hs-pause { display: none; }
.hab-start:hover { border-color: var(--accent); color: var(--accent); }
.habit-row[data-status="deferred"] .hab-start:hover { color: #fff; }
.habit-row[data-status="locked"] .hab-start,
.habit-row[data-status="formed"] .hab-start { display: none; }

/* ---- Важность задач: бордовая -> красная -> жёлтая -> зелёная -> серая ---- */
.lvl-gray { --lvl: #64748b; }
.prio-dot {
  width: 12px; height: 12px; flex-shrink: 0;
  border-radius: 999px;
  background: var(--lvl, #64748b);
  border: none; padding: 0; cursor: pointer;
  transition: transform 0.1s;
}
button.prio-dot:hover { transform: scale(1.25); }
.pool-task .prio-dot, #modal-task-list .prio-dot { cursor: default; }

/* ---- Перетаскивание блоков в дне ---- */
.tl-move {
  position: absolute;
  top: 3px; right: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 6px;
  color: rgb(var(--s-400));
  cursor: grab;
  touch-action: none;   /* палец тянет блок, а не страницу */
}
.tl-move:active { cursor: grabbing; }
.tl-act {
  position: absolute;
  right: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 6px;
  font-size: 12px;
  color: rgb(var(--s-400));
}
.tl-act:hover { color: rgb(var(--s-100)); background: rgba(148, 163, 184, 0.18); }
.tl-act-x { top: 28px; }
.tl-act-jump { top: 53px; }
.tl-move:hover { color: rgb(var(--s-100)); background: rgba(148, 163, 184, 0.15); }
.tl-dragging { z-index: 5; opacity: 0.9; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); }
.tl-conflict {
  border-color: #e11d48 !important;
  background: rgba(225, 29, 72, 0.18) !important;
}

/* ================= Архетипы, карточка задачи, чат ================= */

/* Красиво оформленная аватарка: скругление, кольцо, лёгкое свечение */
.avatar-frame {
  border-radius: 22%;
  object-fit: cover;
  box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--accent),
              0 10px 26px rgba(0, 0, 0, 0.35);
}

.media-card {
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--card);
}
.media-card img { max-height: 220px; }

.grade-chip {
  flex-shrink: 0;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
  border: 1px solid var(--line);
  color: rgb(var(--s-400));
}
.grade-low { color: #22c55e; border-color: rgba(34, 197, 94, 0.5); }
.grade-medium { color: #eab308; border-color: rgba(234, 179, 8, 0.5); }
.grade-high { color: #ef4444; border-color: rgba(239, 68, 68, 0.5); }

/* Кнопки материалов на карточке задачи */
.media-btn {
  padding: 7px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 700;
  color: rgb(var(--s-300));
  transition: all 0.15s;
}
.media-btn:hover { border-color: var(--accent); color: var(--accent); }
/* Поощрение/наказание закрыты, пока задача не завершена */
#task-card[data-done="false"] ~ * .media-award,
#task-card[data-done="false"] + section .media-award { opacity: 0.45; }
.media-punish:hover { border-color: #e11d48; color: #fb7185; }

/* Чат задачи */
.chat-msg {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 12px;
  background: rgba(148, 163, 184, 0.04);
}
.chat-date { display: block; font-size: 10px; color: rgb(var(--s-500)); }
.chat-text { margin-top: 2px; font-size: 14px; color: rgb(var(--s-100)); }
.chat-file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 3px 10px;
  border-radius: 8px;
  border: 1px solid rgba(99, 102, 241, 0.4);
  background: rgba(99, 102, 241, 0.1);
  color: var(--badge-ind);
  font-size: 12px;
  font-weight: 700;
}
.chat-file:hover { border-color: var(--accent); }

/* Карандаш переименования — единый стиль */
.rename-btn { color: rgb(var(--s-600)); flex-shrink: 0; transition: color 0.15s; }
.rename-btn:hover { color: var(--accent); }

/* ================= Мотивационные фотоподборки ================= */
.gallery-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
}
.g-photo {
  position: relative;
  flex-shrink: 0;
  width: 128px;
}
.g-img {
  width: 128px;
  height: 96px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--line);
  cursor: zoom-in;
  transition: transform 0.15s;
}
.g-img:hover { transform: scale(1.03); }
.g-caption {
  margin-top: 3px;
  font-size: 10px;
  line-height: 1.3;
  color: rgb(var(--s-500));
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 13px;
}
.g-controls {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s;
}
.g-photo:hover .g-controls { opacity: 1; }
@media (hover: none) { .g-controls { opacity: 1; } }
.g-controls button {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 8px;
  background: rgba(3, 7, 18, 0.65);
  color: #cbd5e1;
}
.g-controls .g-del:hover { color: #fb7185; }
.g-controls .g-cap-edit:hover { color: #a5b4fc; }

.g-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex-shrink: 0;
  width: 128px;
  height: 96px;
  border-radius: 12px;
  border: 1px dashed var(--line);
  color: rgb(var(--s-500));
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s;
}
.g-add:hover { border-color: var(--accent); color: var(--accent); }

/* Лайтбокс на весь экран */
.g-lightbox {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  background: rgba(0, 0, 0, 0.88);
  cursor: zoom-out;
}
.g-lightbox.open { display: flex; }
.g-lightbox img {
  max-width: 96vw;
  max-height: 82vh;
  border-radius: 14px;
}
.g-lightbox p {
  max-width: 90vw;
  text-align: center;
  font-size: 14px;
  color: #e2e8f0;
}

/* ================= Автослайдшоу мотивации на карточке задачи ================= */
#moto-show { cursor: pointer; }
.moto-overlay {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 26px 14px 12px;
  background: linear-gradient(to top, rgba(2, 6, 16, 0.82), transparent);
  pointer-events: none;
}
.moto-caption {
  font-size: 14px;
  font-weight: 700;
  color: #f1f5f9;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.moto-meta {
  font-size: 11px;
  color: #cbd5e1;
  opacity: 0.85;
}
.moto-state {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(2, 6, 16, 0.7);
  color: #e2e8f0;
  font-size: 11px;
  font-weight: 700;
}
#moto-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: rgba(148, 163, 184, 0.18);
}
#moto-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
}
#moto-bar.run i { animation: moto-progress 10s linear forwards; }
@keyframes moto-progress { from { width: 0; } to { width: 100%; } }

/* ================= Круговая схема ================= */
.leg-dot { display: inline-block; width: 11px; height: 11px; border-radius: 999px; }
.leg-sq { display: inline-block; width: 11px; height: 11px; border-radius: 3px; }

#map-wrap {
  touch-action: pan-x pan-y;    /* один палец листает, щипок обрабатываем сами */
  overscroll-behavior: contain;
}
#map-svg { display: block; }
.map-edge {
  fill: none;
  stroke: rgb(var(--s-700));
  stroke-width: 1;
  opacity: 0.55;
}
.map-node { cursor: pointer; }
.map-node:hover circle,
.map-node:hover rect { filter: brightness(1.25); }
.map-badge {
  font-size: 8px;
  font-weight: 900;
  fill: #fff;
  pointer-events: none;
}
.map-label {
  font-size: 11px;
  fill: rgb(var(--s-300));
  pointer-events: none;
  paint-order: stroke;               /* ореол цвета фона под текстом */
  stroke: var(--card);
  stroke-width: 3px;
  stroke-linejoin: round;
}
.map-label-root { font-size: 13px; font-weight: 800; fill: #fff; }
.map-label-path { font-size: 13px; font-weight: 800; }
.map-label-sphere { font-size: 12px; font-weight: 700; }
.map-label-cell { font-size: 10px; fill: rgb(var(--s-400)); }

.map-pop {
  position: absolute;
  z-index: 20;
  max-width: 260px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

/* ---- Жёлтый/янтарный: тёмные оттенки в светлой теме, иначе не читается ---- */
html.light .lvl-y { --lvl: #ca8a04; }          /* чипы медиан, точки дней */

.detail-box {
  border: 1px solid rgba(245, 158, 11, 0.3);
  background: rgba(245, 158, 11, 0.06);
}
.detail-head { color: #fbbf24; }
.detail-chip { border: 1px solid rgba(245, 158, 11, 0.4); color: #fcd34d; }
.detail-chip:hover { background: rgba(245, 158, 11, 0.12); }
html.light .detail-head { color: #92400e; }
html.light .detail-chip { color: #92400e; border-color: rgba(180, 83, 9, 0.45); }
html.light .detail-chip:hover { background: rgba(245, 158, 11, 0.14); }

/* ---- Подписи нижних уровней схемы ---- */
.map-label-goal { font-size: 10px; fill: rgb(var(--s-300)); }
.map-label-project { font-size: 9.5px; fill: rgb(var(--s-400)); }
.map-label-task { font-size: 9px; fill: rgb(var(--s-400)); }
.map-label-habit { font-size: 9px; fill: rgb(var(--s-400)); font-style: italic; }

/* ================= Результаты, компетенции, счётчики привычек ================= */
.comp-box {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  padding: 10px 14px;
}
.comp-box summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: rgb(var(--s-300));
  list-style: none;
}
.comp-box summary::before { content: '▸ '; color: rgb(var(--s-500)); }
.comp-box[open] summary::before { content: '▾ '; }
.comp-head {
  margin-top: 8px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgb(var(--s-500));
}
.comp-list { margin-top: 4px; font-size: 12px; line-height: 1.45; }
.comp-list li { padding-left: 14px; position: relative; }
.comp-list li::before { content: '•'; position: absolute; left: 2px; }
.comp-got li::before { color: #10b981; }
.comp-todo li::before { color: #f59e0b; }
.comp-todo { color: rgb(var(--s-400)); }
.comp-got { color: rgb(var(--s-300)); }

.streak-chip {
  display: inline-flex;
  gap: 3px;
  padding: 0 7px;
  border-radius: 6px;
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #34d399;
  font-weight: 700;
}
html.light .streak-chip { color: #059669; }
.freq-chip {
  padding: 0 6px;
  border-radius: 6px;
  border: 1px dashed var(--line);
  color: rgb(var(--s-500));
  font-size: 11px;
}
.freq-chip:hover { border-color: var(--accent); color: var(--accent); }

/* ================= Неделя: перетаскивание слотов между днями ================= */
.cal-week .goal-chip[data-slot-id],
.cal-month .goal-chip[data-slot-id] {
  touch-action: none;        /* палец тянет чип, а не прокручивает страницу */
  cursor: grab;
}
.drag-ghost {
  position: fixed;
  z-index: 80;
  pointer-events: none;
  opacity: 0.9;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
}
.day-cell.drop-hint {
  outline: 2px dashed var(--accent);
  outline-offset: -3px;
  background: rgba(99, 102, 241, 0.08);
}

/* ================= Виджет актуальной задачи ================= */
.timer-widget {
  position: fixed;
  right: 12px;
  bottom: 84px;                 /* над нижней навигацией на телефоне */
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: min(320px, calc(100vw - 24px));
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
@media (min-width: 640px) { .timer-widget { bottom: 16px; } }
.tw-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #34d399;
  animation: tw-pulse 1.6s ease-in-out infinite;
  flex: none;
}
@keyframes tw-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.tw-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: rgb(var(--s-200));
}
.tw-title:hover { color: var(--accent); }
.tw-stop {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(244, 63, 94, 0.4);
  color: #fb7185;
  font-size: 12px;
}
.tw-stop:hover { background: rgba(244, 63, 94, 0.12); }

/* Ручка изменения длительности блока задачи (нижний край) */
.tl-resize {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 12px;
  cursor: ns-resize;
  touch-action: none;
}
.tl-resize::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 28px;
  height: 3px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.55);
}
.tl-block:hover .tl-resize::after { background: var(--accent); }

/* ================= Исследования ================= */
.person-chip {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid rgba(99, 102, 241, 0.35);
  background: rgba(99, 102, 241, 0.10);
  font-size: 11px;
  color: #a5b4fc;
}
html.light .person-chip { color: #4f46e5; }
.pf {
  border-radius: 0.5rem;
  border: 1px solid var(--line);
  background: var(--ink);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: rgb(var(--s-200));
  outline: none;
}
.pf:focus { border-color: var(--accent); }

/* Повторяющиеся слоты: дни недели и чипы дат серии */
.dow-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: rgb(var(--s-300));
  cursor: pointer;
}
.dow-chip:has(input:checked) {
  border-color: var(--accent);
  background: rgba(99, 102, 241, 0.12);
  color: var(--accent);
}
.rep-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 8px;
  border: 1px solid var(--line);
  font-size: 11px;
  color: rgb(var(--s-300));
  cursor: pointer;
}
.rep-chip:has(input:not(:checked)) {
  opacity: 0.45;
  text-decoration: line-through;
}

/* Отложенная привычка из пула */
.pool-deferred .habit-title { opacity: 0.55; }
.pool-start { color: rgb(var(--s-500)); }
.pool-start:hover { color: var(--accent); }

.habit-min { color: rgb(var(--s-500)); }
.habit-min:hover { color: var(--accent); }

/* Фокус */
.focus-play {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 999px;
  border: 1px solid rgba(16, 185, 129, 0.45);
  color: #34d399;
  font-size: 12px;
}
.focus-play:hover { background: rgba(16, 185, 129, 0.14); }
.focus-play:disabled { opacity: 0.5; }
.focus-row:hover { background: rgba(148, 163, 184, 0.06); }

.focus-stop {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 999px;
  border: 1px solid rgba(244, 63, 94, 0.45);
  color: #fb7185;
  font-size: 11px;
}
.focus-stop:hover { background: rgba(244, 63, 94, 0.12); }
.focus-row.focus-active { background: rgba(16, 185, 129, 0.07); }

/* Доска приоритетов */
.board-card { touch-action: pan-x; }
.board-ghost { opacity: 0.35; }
.board-card:active { cursor: grabbing; }

/* Линия текущего времени в таймлайне дня */
.tl-now {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 30;
  border-top: 2px solid #f43f5e;
  pointer-events: none;
}
.tl-now::before {
  content: '';
  position: absolute;
  left: 2px;
  top: -5px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #f43f5e;
}
.tl-now-label {
  position: absolute;
  right: 4px;
  top: -9px;
  padding: 0 5px;
  border-radius: 6px;
  background: #f43f5e;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 16px;
}

/* Режимы модалки размещения */
.mode-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: rgb(var(--s-300));
  cursor: pointer;
}
.mode-chip input { display: none; }
.mode-chip:has(input:checked) {
  border-color: var(--accent);
  background: rgba(99, 102, 241, 0.12);
  color: var(--accent);
}

/* Фокус-блоки в дне и чипы 🎯 */
.tl-block[data-kind="focus"] {
  border-color: rgba(45, 212, 191, 0.55);
  background: rgba(45, 212, 191, 0.10);
}
.goal-chip.focus-chip {
  border-color: rgba(45, 212, 191, 0.5);
  background: rgba(45, 212, 191, 0.12);
  color: #5eead4;
}

/* Получасовая сетка внутри свободных промежутков */
.tl-gap .tl-half {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px dashed rgba(148, 163, 184, 0.16);
  pointer-events: none;
}

/* Дедлайны: маркер дня, графа в ячейке, мини-плитки */
.dl-dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 999px;
  background: #f43f5e;
}
.dl-strip {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 6px;
  border: 1px solid rgba(244, 63, 94, 0.4);
  background: rgba(244, 63, 94, 0.10);
  color: #fda4af;
  padding: 0 4px;
  line-height: 16px;
}
.prio-chip-critical { border-color: rgba(159, 18, 57, 0.7); color: #fb7185; background: rgba(159, 18, 57, 0.12); }
.prio-chip-high { border-color: rgba(244, 63, 94, 0.5); color: #fda4af; background: rgba(244, 63, 94, 0.10); }
.prio-chip-medium { border-color: rgba(234, 179, 8, 0.45); color: #fde047; background: rgba(234, 179, 8, 0.10); }
.prio-chip-low { border-color: rgba(16, 185, 129, 0.45); color: #6ee7b7; background: rgba(16, 185, 129, 0.10); }
.prio-chip-none { border-color: var(--line); color: rgb(var(--s-400)); background: transparent; }

/* Чип исполнителя — контрастен и в тёмной, и в светлой теме */
.exec-chip {
  display: inline-block;
  border-radius: 6px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(99, 102, 241, 0.18);
  color: #c7d2fe;
}
html.light .exec-chip { background: rgba(79, 70, 229, 0.10); color: #3730a3; }

/* Светлая тема: дедлайн-графа, фокус-чипы и мини-плитки приоритета */
html.light .dl-strip { color: #be123c; background: rgba(244, 63, 94, 0.08); }
html.light .goal-chip.focus-chip { color: #0f766e; background: rgba(20, 184, 166, 0.10); }
html.light .prio-chip-critical { color: #9f1239; }
html.light .prio-chip-high { color: #be123c; }
html.light .prio-chip-medium { color: #a16207; }
html.light .prio-chip-low { color: #047857; }

/* Метка дедлайна на доске — читаема в светлой теме */
html.light .dl-chip.text-amber-300 { color: #a16207; }
html.light .dl-chip.text-rose-300 { color: #be123c; }

/* Делегированные задачи: не моё время — штриховка, полупрозрачность */
.tl-block.tl-delegated {
  border-style: dashed;
  opacity: 0.75;
  background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(148, 163, 184, 0.10) 6px 8px);
}
.goal-chip.delegated-chip { border-style: dashed; opacity: 0.8; }
.delegated-mark {
  display: inline-block;
  border-radius: 6px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(14, 165, 233, 0.16);
  color: #bae6fd;
}
html.light .delegated-mark { background: rgba(2, 132, 199, 0.10); color: #075985; }

/* Вкладка «Привычки»: клетки дней */
.hcell {
  width: 18px; height: 18px; border-radius: 4px; border: 1px solid transparent;
  background: rgba(148, 163, 184, 0.14); cursor: pointer; vertical-align: middle;
}
.hcell-done { background: #22c55e; }
.hcell-missed { background: rgba(244, 63, 94, 0.22); border-color: rgba(244, 63, 94, 0.6); }
.hcell-violated { background: #f43f5e; }
.hcell-excused { background: rgba(148, 163, 184, 0.35); }
.hcell-frozen { background: rgba(56, 189, 248, 0.35); border-color: #38bdf8; }
.hcell-today { background: transparent; border: 1px dashed var(--accent); }
.hcell-empty { background: rgba(148, 163, 184, 0.10); }
html.light .hcell-missed { background: rgba(244, 63, 94, 0.15); }

/* ================= Боковое меню ================= */
.sidebar {
  position: fixed; top: 3.5rem; bottom: 0; left: 0; z-index: 45;
  width: 13.5rem; overflow-y: auto;
  background: var(--ink);
  border-right: 1px solid var(--line);
  transform: translateX(-100%);
  transition: transform 0.2s ease;
}
html.sb-mobile-open .sidebar { transform: translateX(0); }
@media (min-width: 768px) {
  .sidebar { transform: translateX(0); }
  html.sb-collapsed .sidebar { transform: translateX(-100%); }
  .main-area { margin-left: 13.5rem; max-width: none; transition: margin-left 0.2s ease; }
  html.sb-collapsed .main-area { max-width: 72rem; margin-left: auto; margin-right: auto; }
}
.sb-link {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 10px;
  font-size: 14px; color: rgb(var(--s-400));
}
.sb-link:hover { color: rgb(var(--s-100)); background: rgba(148, 163, 184, 0.08); }
.sb-link.sb-active { color: var(--accent); background: rgba(99, 102, 241, 0.14); font-weight: 600; }
.sb-ico { width: 22px; text-align: center; font-size: 15px; }
.sb-sep { display: block; height: 1px; margin: 6px 8px; background: var(--line); }
html.light .sidebar { background: var(--ink); }
.hcell-before { background: transparent; border: 1px dotted rgba(148, 163, 184, 0.3); cursor: default; }

/* Чипы фильтров предложки */
.sl-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); color: rgb(var(--s-400)); }
.sl-chip:hover { color: rgb(var(--s-100)); }
.sl-chip-on { border-color: var(--accent); color: var(--accent); background: rgba(99, 102, 241, 0.12); }
.sl-chip .prio-dot { margin: 0; }


/* ================= Мобильный календарь и потяни-и-обнови ================= */

/* Ничто не должно распирать страницу вбок на телефоне: режем прокрутку
   на обоих уровнях (iOS умеет прокручивать html даже при спрятанном body). */
@media (max-width: 767px) {
  html, body { overflow-x: clip; overflow-x: hidden; max-width: 100vw; }
  .cal-grid { max-width: 100%; }
}

/* Пул под календарём: на телефоне строка в две линии — заголовок сверху,
   важность/часы/кнопка снизу, ничего не уезжает за экран. */
@media (max-width: 640px) {
  #task-pool .pool-task { flex-wrap: wrap; }
  #task-pool .pool-task > a { flex: 1 1 100%; min-width: 0; }
  /* названия и цепочки переносятся целиком — ничего не срезается краем */
  #task-pool .pool-task > a > span {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
  }
}

/* Сетки календаря: ячейкам можно ужиматься — чипы обрезаются, а не
   распирают страницу вширь (min-width:auto у grid-детей ломал телефоны). */
.cal-grid .grid > * { min-width: 0; }
.cal-grid .goal-chip,
.cal-grid .cal-chip,
.cal-grid .dl-strip { max-width: 100%; }

#ptr-ind {
  position: fixed;
  top: -48px; left: 50%;
  transform: translateX(-50%);
  z-index: 70;
  padding: 8px 14px;
  border-radius: 9999px;
  border: 1px solid rgb(var(--c-line));
  background: rgb(var(--c-card));
  color: rgb(var(--s-300));
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  transition: top 0.15s ease;
  pointer-events: none;
}
#ptr-ind.ptr-show { top: calc(env(safe-area-inset-top, 0px) + 10px); }
#ptr-ind.ptr-ready { border-color: rgb(var(--c-accent)); color: rgb(var(--c-accent)); }


/* Мини-меню статуса дня привычки */
#hb-pop {
  position: fixed;
  z-index: 60;
  width: 250px;
  padding: 6px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
#hb-pop button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 13px;
  color: var(--text, #e2e8f0);
}
#hb-pop button:hover { background: rgba(99, 102, 241, 0.12); }
#hb-pop button span {
  display: block;
  font-size: 10px;
  color: rgb(100 116 139);
}

/* Название в две строки вместо обрезания многоточием */
.clamp2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}


/* ================= План проекта: дерево шагов ================= */
.plan-vp {
  height: 72vh;
  min-height: 420px;
  overflow: auto;
  overscroll-behavior: contain;
  background-image: radial-gradient(circle, rgba(148, 163, 184, 0.16) 1px, transparent 1px);
  background-size: 24px 24px;
}
#plan-sizer { position: relative; }
#plan-world { position: relative; transform-origin: 0 0; }
#plan-edges { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; }
.pl-edge { fill: none; stroke-width: 2; opacity: 0.85; }

.plan-node {
  position: absolute;
  z-index: 2;
  width: 176px;
  padding: 8px 10px 6px;
  border-radius: 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--branch, var(--accent));
  background: var(--card);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;        /* палец тянет карточку, холст скроллится за пустое место */
}
.plan-node.dragging {
  z-index: 9;
  cursor: grabbing;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}
.plan-node.root {
  border: 2px solid rgba(245, 158, 11, 0.7);
  border-left: 4px solid #f59e0b;
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.12), var(--card));
}
.plan-node.done {
  border-color: rgba(52, 211, 153, 0.65);
  border-left-color: #34d399;
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.14), var(--card));
}
.pn-head { display: flex; align-items: flex-start; gap: 6px; }
.pn-title {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: break-word;   /* слово рвётся только если целиком не влезает в строку */
}
.plan-node.done .pn-title { color: #6ee7b7; }
.pn-done {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 8px;
  border: 1px solid rgba(52, 211, 153, 0.5);
  color: rgba(148, 163, 184, 0.75);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.pn-done.on { background: #10b981; border-color: #10b981; color: #fff; }
.pn-tools { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 1px; margin-top: 4px; min-width: 0; }
.pn-tools button, .pn-flag { padding: 2px 5px; border-radius: 8px; font-size: 11px; color: rgb(100 116 139); }
.pn-head .pn-open {
  flex-shrink: 0;
  width: 18px;
  height: 20px;
  margin-left: -2px;
  border-radius: 7px;
  font-size: 12px;
  line-height: 1;
  color: rgb(100 116 139);
}
.pn-head .pn-open:hover { background: rgba(99, 102, 241, 0.14); color: var(--accent); }
.pn-tools button:hover { background: rgba(99, 102, 241, 0.14); color: var(--accent); }
.pl-insert {
  position: absolute;
  z-index: 3;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px dashed rgba(129, 140, 248, 0.75);
  background: var(--card);
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  opacity: 0.6;
  touch-action: manipulation;
}
.pl-insert:hover { opacity: 1; transform: scale(1.15); }

.pn-input {
  display: block;
  width: 100%;
  min-width: 0;
  resize: none;
  border-radius: 8px;
  border: 1px solid rgba(129, 140, 248, 0.6);
  background: rgba(15, 23, 42, 0.45);
  padding: 4px 6px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  color: inherit;
  outline: none;
}
.plan-node.ghost {
  z-index: 10;
  border-style: dashed;
  border-color: rgba(129, 140, 248, 0.8);
  cursor: default;
}
.pn-hint { margin-top: 3px; font-size: 9.5px; color: rgb(100 116 139); }

.tray-task {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  flex-shrink: 0;
  width: 250px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--card);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;        /* палец тянет чип, полка скроллится за пустое место */
}
.tray-task .tt-grip { color: rgb(100 116 139); }
.tray-task .tt-title {
  min-width: 0;
  white-space: normal;             /* название видно целиком, до трёх строк */
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tray-task.open { width: auto; max-width: 420px; }
.tray-task.open .tt-title {       /* тап по чипу — весь текст без обрезки */
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.tray-task.dragging { opacity: 0.35; }
.plan-fly {
  position: fixed;
  z-index: 90;
  pointer-events: none;
  opacity: 0.95;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
}
.plan-node.drop-ok { outline: 2px dashed var(--accent); outline-offset: 3px; }
.pl-insert.drop-ready { opacity: 1; transform: scale(1.35); }

html.light .plan-node { box-shadow: 0 3px 10px rgba(15, 23, 42, 0.1); }
html.light .pn-input { background: rgba(226, 232, 240, 0.5); }
html.light .plan-vp { background-image: radial-gradient(circle, rgba(100, 116, 139, 0.18) 1px, transparent 1px); }


/* Разбор: пружина-проваливание при наведении с карточкой */
@keyframes nav-spring {
  0%, 100% { outline-color: rgba(129, 140, 248, 0.15); }
  50% { outline-color: rgba(129, 140, 248, 0.9); }
}
.drop-node.spring, .nav-back.spring {
  outline: 2px dashed rgba(129, 140, 248, 0.7);
  outline-offset: 2px;
  animation: nav-spring 0.45s linear infinite;
}


/* Светлая тема: жёстко-белые названия проектов и задач делаем тёмными */
html.light .project-title,
html.light .task-title {
  color: #0f172a;
}


/* План: строка меты задачи на карточке и мини-панель ⚙ */
.pn-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  font-size: 10px;
  color: rgb(100 116 139);
}
.pn-meta .prio-dot { width: 10px; height: 10px; cursor: default; }
.pn-meta .pm-dl { color: #fbbf24; }
.pn-meta .pm-over { color: #fb7185; font-weight: 700; }
.pn-meta .pm-exec {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pn-panel {
  display: grid;
  gap: 4px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--line);
}
.pn-panel select,
.pn-panel input {
  width: 100%;
  min-width: 0;
  padding: 3px 6px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(15, 23, 42, 0.45);
  font-size: 11px;
  color: inherit;
  outline: none;
}
html.light .pn-panel select,
html.light .pn-panel input { background: rgba(226, 232, 240, 0.5); }

/* Доска: рамки-подборки */
.board-group .board-list { min-height: 2.4rem; }
html.light .board-group { background: rgba(99, 102, 241, 0.06); }
html.light .grp-title { color: #4338ca; }

/* ---------- План: фокус на ветке, ограничение уровней ---------- */
.plan-node.hidden-node { display: none; }
.pn-zoom {
  margin-right: auto;
  padding: 2px 6px !important;
  border-radius: 999px !important;
  border: 1px solid var(--branch, var(--accent));
  font-weight: 700;
  color: var(--branch, var(--accent)) !important;
  white-space: nowrap;
}
.pn-zoom:hover { background: rgba(99, 102, 241, 0.14) !important; }
.plan-node.cut {                       /* под карточкой ещё что-то есть — «стопка» */
  box-shadow: 4px 4px 0 -1px var(--card), 4px 4px 0 0 var(--line),
              8px 8px 0 -1px var(--card), 8px 8px 0 0 var(--line),
              0 4px 14px rgba(0, 0, 0, 0.25);
}
.plan-node.focus {                     /* локальная вершина открытой ветки */
  border: 2px solid var(--branch, var(--accent));
  border-left-width: 4px;
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.14), var(--card));
}
.plan-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
.plan-crumbs.hidden { display: none; }
.plan-crumbs button, .pl-depth button {
  padding: 2px 9px;
  border-radius: 8px;
  border: 1px solid var(--line);
  color: rgb(148 163 184);
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.plan-crumbs button:hover, .pl-depth button:hover { border-color: var(--accent); color: var(--accent); }
.plan-crumbs button.cur { font-weight: 700; color: #e2e8f0; border-color: var(--accent); background: rgba(99, 102, 241, 0.14); }
.plan-crumbs .crumb-up { font-weight: 700; }
.plan-crumbs .sep { color: rgb(100 116 139); }
.plan-crumbs .crumb-count { color: rgb(100 116 139); font-size: 11px; }
.pl-depth button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
html.light .plan-crumbs button.cur { color: #0f172a; }
html.light .plan-node.focus { background: linear-gradient(180deg, rgba(99, 102, 241, 0.1), var(--card)); }

/* ---------- План: описание шага ---------- */
.pn-note {
  margin-top: 6px;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(148, 163, 184, 0.1);
  font-size: 11px;
  line-height: 1.35;
  color: rgb(203 213 225);
  white-space: pre-line;
  overflow-wrap: anywhere;
  max-height: 14rem;
  overflow: auto;
  cursor: auto;
  user-select: text;
  -webkit-user-select: text;
}
.pn-note.hidden { display: none; }
.pn-meta .pm-note-btn { padding: 0 3px; border-radius: 6px; line-height: 1; }
.pn-meta .pm-note-btn:hover { background: rgba(99, 102, 241, 0.14); }
.pn-panel .pm-note {
  width: 100%;
  margin-top: 4px;
  padding: 4px 6px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--ink);
  font-size: 11px;
  line-height: 1.35;
  color: inherit;
  resize: vertical;
}
html.light .pn-note { background: rgba(100, 116, 139, 0.12); color: #1e293b; }
html.light .pn-panel .pm-note { background: rgba(226, 232, 240, 0.5); }

/* ---------- План: подсветка шага, к которому пришли из карточки задачи ---------- */
@keyframes pn-flash {
  0%, 100% { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); }
  50% { box-shadow: 0 0 0 6px rgba(99, 102, 241, 0.45), 0 4px 14px rgba(0, 0, 0, 0.25); }
}
.plan-node.flash { animation: pn-flash 0.9s ease-in-out 3; }

/* ---------- План: фильтр, подборка, чат в карточке ---------- */
.plan-node.dim { opacity: 0.45; }
.plan-node.dim:hover { opacity: 1; }
.pn-meta .pm-group-chip { color: #a5b4fc; }
.pn-meta .pm-chat-btn { padding: 0 3px; border-radius: 6px; line-height: 1; }
.pn-meta .pm-chat-btn:hover { background: rgba(99, 102, 241, 0.14); }
.pn-note, .pn-chat { touch-action: pan-y; }
.pn-chat {
  margin-top: 6px;
  padding: 6px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(15, 23, 42, 0.25);
  cursor: auto;
  user-select: text;
  -webkit-user-select: text;
}
.pc-list { max-height: 11rem; overflow: auto; display: grid; gap: 4px; font-size: 11px; line-height: 1.35; }
.pc-empty { color: rgb(100 116 139); font-style: italic; }
.pc-msg { padding: 4px 6px; border-radius: 8px; background: rgba(148, 163, 184, 0.12); overflow-wrap: anywhere; }
.pc-at { display: block; font-size: 9.5px; color: rgb(100 116 139); }
.pc-text { white-space: pre-line; color: rgb(226 232 240); }
.pc-file { display: block; color: var(--accent); }
.pc-form { display: flex; gap: 4px; margin-top: 6px; }
.pc-input {
  flex: 1;
  min-width: 0;
  padding: 4px 6px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--ink);
  font-size: 11px;
  color: inherit;
  outline: none;
}
.pc-input:focus { border-color: var(--accent); }
.pc-send { padding: 2px 8px; border-radius: 8px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; }
html.light .pn-chat { background: rgba(226, 232, 240, 0.35); }
html.light .pc-text { color: #0f172a; }
html.light .pc-msg { background: rgba(100, 116, 139, 0.12); }
html.light .pc-input { background: rgba(226, 232, 240, 0.5); }

.plan-node.expanded { z-index: 6; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45); }
.plan-node.expanded.dim { opacity: 1; }