/* ============================================================
   TaskFlow — стили карточек дашборда
   ЗОНА: дизайн (Анфиса)
   ------------------------------------------------------------
   Отдельный файл, чтобы не пересекаться с style.css.
   Переменные берём оттуда же — палитра общая.

   Розовый (--gap) — служебный цвет. Им помечено всё, чего
   пока нет в данных. В самом продукте он не используется.
   ============================================================ */

:root {
  --gap: #ff2d95;
  --gap-dim: #ffe6f2;
}

/* Строки виджетов (ww/ov-body/lim/c-row) кликабельны — открывают задачу —
   но без этого правила выглядят как обычный текст. inset box-shadow,
   а не background: часть этих строк прозрачна (ww, ov-body, lim), часть
   уже покрашена в красный/жёлтый (.c-row) — тень ложится поверх любого
   фона одинаково, не перебивая существующую тонировку. */
.is-clickable {
  cursor: pointer;
  border-radius: 8px;
  transition: box-shadow 0.12s ease, transform 0.1s ease;
}
.is-clickable:hover {
  box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.045);
}
.is-clickable:active {
  box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.08);
  transform: scale(0.985);
}

/* ---- Сетка карточек ---- */

/* ============================================================
   ВИДЖЕТ — общая рамка

   Виджета, которому нечего показать, на дашборде нет вообще:
   render() вернул null, и сюда ничего не пришло. Поэтому
   пустых состояний у рамки не бывает.
   ============================================================ */
.widgets-main { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.widgets-rail { display: flex; flex-direction: column; gap: 16px; }

/* Календарь и «сделано за неделю» всегда наверху справа и всегда
   квадратные: постоянный размер и постоянное место — глаз находит
   их не читая. Остальные блоки рельса растут по содержимому. */
.widgets-rail > [data-widget="week-done"],
.widgets-rail > [data-widget="calendar"] {
  aspect-ratio: 1 / 1;
}
.widgets-rail > [data-widget="week-done"] .widget-body,
.widgets-rail > [data-widget="calendar"] .widget-body {
  display: flex; flex-direction: column; justify-content: center;
}

.widget {
  background: var(--surface, #fff);
  border-radius: var(--r-lg, 22px);
  box-shadow: var(--shadow-card, 0 4px 24px rgba(18,20,22,0.06));
  display: flex; flex-direction: column;
  overflow: hidden;
  min-width: 0;
}
.widget-title {
  font-size: 11px; font-weight: 800; color: var(--muted, #8a8f9c);
  text-transform: uppercase; letter-spacing: 0.6px;
  padding: 16px 18px 0;
}
.widget-body { padding: 12px 18px 17px; flex: 1; min-width: 0; }

/* ============================================================
   ФИЛЬТР ПО ПРОЕКТАМ

   Проект — способ сузить взгляд, а не рамка, в которой человек
   живёт. Поэтому это полоска кнопок над дашбордом, а не выбор
   в шапке, после которого остальные проекты исчезают.
   ============================================================ */
.pfilter { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.pf {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: inherit; font-size: 11px; font-weight: 700; cursor: pointer;
  background: var(--surface, #fff); border: 1px solid var(--border, #e7e9f0);
  color: var(--muted, #8a8f9c); border-radius: var(--r-pill, 999px); padding: 7px 14px;
  min-height: 30px; transition: all 0.12s; box-shadow: var(--shadow-card, 0 4px 24px rgba(18,20,22,0.06));
}
.pf:hover { border-color: var(--accent, #2401fe); color: var(--accent, #2401fe); }
.pf.active {
  background: var(--brand-gradient, #ff5000); border-color: transparent; color: #fff;
  box-shadow: var(--shadow-brand, 0 8px 20px rgba(255,80,0,0.18));
}
.pf-n {
  font-size: 10px; font-weight: 800; opacity: 0.75;
  background: rgba(18,20,22,0.06); border-radius: 9px; padding: 1px 6px;
}
.pf.active .pf-n { background: rgba(255,255,255,0.25); opacity: 1; }

/* Спокойный день: все виджеты промолчали */
.dash-quiet {
  background: var(--surface, #fff);
  border-radius: var(--r-lg, 22px); padding: 18px 20px; margin-bottom: 16px;
  font-size: 12px; line-height: 1.75; color: var(--muted, #8a8f9c);
  box-shadow: var(--shadow-card, 0 4px 24px rgba(18,20,22,0.06));
}


/* ============================================================
   ЧТО ИДЁТ НЕ ТАК

   Три коротких строки на задачу, в порядке чтения:
   что за задача → что с ней не так → что делать.

   Раньше это была одна длинная строка во всю ширину. Чем дольше
   глаз ведёт одну линию, тем быстрее теряется внимание: на третьей
   такой строке список уже не читают. Короткие строки в узкой
   колонке проходятся сверху вниз одним движением.
   ============================================================ */
.ww {
  position: relative;
  padding: 9px 0 10px 12px;
}
.ww + .ww { border-top: 1px solid var(--border); }
.ww::before {
  content: ''; position: absolute; left: 0; top: 11px; bottom: 12px;
  width: 3px; border-radius: 2px;
}
.ww-red::before { background: var(--red); }
.ww-yellow::before { background: var(--yellow); }

/* 1. Что за задача — тихо, это подпись */
.ww-task {
  font-size: 11px; font-weight: 600; color: var(--muted);
  line-height: 1.35; margin-bottom: 3px;
  display: flex; align-items: baseline; gap: 7px;
}
.ww-task > span { flex-shrink: 0; }

/* 2. Что не так — главное, выделено */
.ww-why {
  font-size: 13px; font-weight: 800; line-height: 1.35; letter-spacing: -0.2px;
  display: flex; align-items: baseline; gap: 7px;
}
.ww-red .ww-why { color: var(--red); }
.ww-yellow .ww-why { color: var(--yellow-ink); }

/* Сколько ещё бед у этой задачи, кроме показанной */
.ww-plus {
  flex-shrink: 0; font-size: 9px; font-weight: 800;
  padding: 1px 5px; border-radius: var(--r-pill, 999px);
  background: var(--surface2); color: var(--muted);
}

/* 3. Что делать — спокойно, но читаемо */
.ww-do {
  font-size: 11px; font-weight: 600; color: var(--text);
  line-height: 1.4; margin-top: 3px; opacity: 0.72;
}

.ww-more {
  font-size: 10px; color: var(--muted);
  padding-top: 9px; margin-top: 4px;
  border-top: 1px solid var(--border);
}

/* Плашка проекта — здесь и в других виджетах */
.ww-project {
  font-size: 9px; font-weight: 700; color: var(--muted);
  background: var(--surface2); padding: 1px 6px; border-radius: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%;
}


/* ============================================================
   ПРОСРОЧЕНО

   Дата — кнопка: срок меняется прямо здесь, и строка исчезает
   из списка. Иначе просроченное копится и на виджет перестают
   смотреть.
   ============================================================ */
.ov { display: flex; gap: 11px; align-items: center; padding: 9px 0; }
.ov + .ov { border-top: 1px solid var(--border, #e4e4ec); }
.ov:first-child { padding-top: 0; }
.ov-edge { width: 3px; align-self: stretch; border-radius: 2px; background: var(--red, #ef4444); flex-shrink: 0; }
.ov-body { flex: 1; min-width: 0; }
.ov-name { font-size: 12px; font-weight: 700; line-height: 1.4; }
.ov-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
           font-size: 10px; color: var(--muted, #8888aa); margin-top: 3px; }
.ov-date {
  flex-shrink: 0; font-family: inherit; cursor: pointer;
  font-size: 10px; font-weight: 800; white-space: nowrap;
  border: 1px solid var(--red); background: var(--red-dim); color: var(--red);
  border-radius: 7px; padding: 6px 10px; min-height: 30px;
}
.ov-date:hover { border-color: var(--red, #ef4444); }


/* ============================================================
   ПРАВКИ И РАУНДЫ

   Полоса приглушённо-зелёная (--limit) намеренно. Исчерпанные
   правки — не авария, а повод написать клиенту. Красный здесь
   начал бы спорить с настоящими бедами в соседнем виджете.
   ============================================================ */
.lim { padding: 8px 0; }
.lim + .lim { border-top: 1px solid var(--border, #e4e4ec); }
.lim:first-child { padding-top: 0; }
.lim-top { display: flex; justify-content: space-between; align-items: baseline; gap: 9px; margin-bottom: 5px; }
.lim-name { font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lim-val { font-size: 10px; font-weight: 700; color: var(--muted, #8888aa); flex-shrink: 0; }
.lim-bg { height: 6px; background: var(--border, #e4e4ec); border-radius: 3px; overflow: hidden; }
.lim-fill { height: 100%; border-radius: 3px; background: var(--limit); }


/* ============================================================
   СДЕЛАНО ЗА НЕДЕЛЮ
   ============================================================ */
.wd-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.wd-num { font-size: 40px; font-weight: 800; letter-spacing: -1.5px; line-height: 1; }
.wd-lab { font-size: 10px; color: var(--muted, #8888aa); margin-top: 5px; line-height: 1.5; }
.wd-diff { text-align: right; flex-shrink: 0; font-size: 13px; font-weight: 800; color: var(--muted, #8888aa); }
.wd-diff.up { color: var(--green); }
.wd-diff.down { color: var(--yellow-ink); }
.wd-diff span { display: block; font-size: 10px; font-weight: 600; color: var(--muted, #8888aa); margin-top: 4px; }
.wd-bars { display: flex; align-items: flex-end; gap: 6px; flex: 1; min-height: 54px; margin-top: 16px; }
.wd-bar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
          align-items: center; gap: 4px; height: 100%; }
.wd-col { width: 100%; border-radius: 3px 3px 0 0; background: var(--sig-ok); min-height: 2px; }
.wd-day { font-size: 8px; color: var(--muted, #8888aa); font-weight: 700; }


/* ============================================================
   БЮДЖЕТЫ И ОБЗОР — строки с полоской

   Одна цифра на строку: осталось, а если ушли за смету —
   перерасход. Процентов нет: полоска и так это показывает.
   ============================================================ */
.bl { margin-bottom: 12px; }
.bl:last-child { margin-bottom: 0; }
.bl-top { display: flex; justify-content: space-between; align-items: baseline; gap: 9px; margin-bottom: 5px; }
.bl-name { font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bl-val { font-size: 11px; font-weight: 700; color: var(--muted, #8888aa); flex-shrink: 0; }
.bl-val.over { color: var(--red, #ef4444); }
.bl-bg { height: 6px; background: var(--border, #e4e4ec); border-radius: 3px; overflow: hidden; }
.bl-fill { height: 100%; border-radius: 3px; background: var(--calm); }
.bl-fill.warn { background: var(--yellow, #f59e0b); }
.bl-fill.over { background: var(--red, #ef4444); }
.bl-fill.accent { background: var(--accent, #5b5fc7); }


/* ---- Пустое состояние ---- */
.c-empty {
  text-align: center;
  padding: 22px 12px;
  color: var(--muted, #8888aa);
  font-size: 12px;
  line-height: 1.6;
}
.c-empty-icon { font-size: 20px; margin-bottom: 6px; opacity: 0.6; }
.c-empty-sub { margin-top: 6px; font-size: 11px; }

/* ---- Строки внутри карточки ---- */
.c-rows { display: flex; flex-direction: column; gap: 6px; }

.c-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--r-md, 16px);
  background: var(--bg, #f5f6f9);
  border-left: 3px solid transparent;
}
.c-row.c-red    { background: var(--red-dim, #fee2e2);    border-left-color: var(--red, #ef4444); }
.c-row.c-yellow { background: var(--yellow-dim, #fef3c7); border-left-color: var(--yellow, #f59e0b); }

.c-row-icon { font-size: 13px; flex-shrink: 0; opacity: 0.85; }
.c-row-body { flex: 1; min-width: 0; }
.c-row-main {
  font-size: 12px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.c-row-sub { font-size: 11px; color: var(--muted, #8888aa); margin-top: 1px; line-height: 1.4; }
.c-row-actions { display: flex; gap: 5px; flex-shrink: 0; }

.c-mini {
  padding: 6px 13px;
  border-radius: var(--r-pill, 999px);
  font-size: 11px;
  font-weight: 700;
  border: none;
  background: var(--brand-gradient, #ff5000);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
  color: #fff;
  cursor: pointer;
  min-height: 28px;
}
.c-mini:hover { filter: brightness(1.05); }
.c-mini.ghost {
  background: transparent;
  color: var(--muted, #8a8f9c);
  border: 1px solid var(--border, #e7e9f0);
}
.c-mini.ghost:hover { color: var(--text, #121416); border-color: var(--muted, #8a8f9c); }

.c-count { font-size: 12px; font-weight: 700; color: var(--muted, #8888aa); }

/* ============================================================
   ЗАГЛУШКИ — то, чего нет в данных
   Розовый, которого нет в палитре продукта: не пропустишь.
   ============================================================ */
.c-gap { display: flex; flex-direction: column; gap: 10px; }

.c-gap-badge {
  align-self: flex-start;
  background: var(--gap-dim);
  color: var(--gap);
  font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.5px;
  padding: 4px 10px; border-radius: 5px;
}

.c-gap-preview { opacity: 0.45; filter: grayscale(0.3); pointer-events: none; }

.c-gap-need {
  font-size: 11px; line-height: 1.6;
  color: var(--text, #1a1a2e);
  background: var(--gap-dim);
  border-radius: 8px;
  padding: 10px 12px;
}
.c-gap-need code {
  font-size: 10px;
  background: rgba(255, 45, 149, 0.12);
  padding: 1px 5px; border-radius: 4px;
}


/* ============================================================
   УЗКИЕ ЭКРАНЫ
   ============================================================ */
@media (max-width: 900px) {
  .widgets-main { grid-template-columns: 1fr; }
  .widget { grid-column: span 1 !important; }
  .ov { flex-wrap: wrap; }
  .ov-date { margin-left: 14px; }
}


/* ============================================================
   ПАНЕЛЬ «ЧТО МЕШАЕТ ДВИГАТЬСЯ»
   ------------------------------------------------------------
   Не сворачивается, пока вопрос не снят.
   Жёлтая — ждём. Красная — встало. Белая — ничего не мешает.
   ============================================================ */
.blk {
  border: 1px solid var(--yellow);
  border-left: 4px solid var(--yellow);
  background: linear-gradient(180deg, rgba(240,180,41,0.1), rgba(240,180,41,0.04)), var(--surface, #fff);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.blk-head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.blk-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--yellow); flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(240, 180, 41, 0.18);
}
.blk-title {
  font-size: 11px; font-weight: 800; color: var(--yellow-ink);
  text-transform: uppercase; letter-spacing: 0.4px;
}
.blk-age { margin-left: auto; font-size: 10px; font-weight: 700; color: var(--yellow-ink); }
.blk-body { font-size: 12px; line-height: 1.65; color: var(--text); }

.blk-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.blk-chip {
  font-size: 10px; font-weight: 700;
  background: var(--surface, #fff); border: 1px solid #f2d69a; color: #8a5a00;
  padding: 4px 9px; border-radius: 20px;
}

.blk-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.blk-file {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600;
  background: var(--surface, #fff); border: 1px solid #f2d69a; color: #7a5200;
  padding: 5px 10px; border-radius: 8px;
}

.blk-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.blk-btn {
  font-size: 11px; font-weight: 700;
  padding: 6px 12px; border-radius: 7px; min-height: 30px;
  border: 1px solid #e8b84b; background: var(--surface, #fff); color: #8a5a00; cursor: pointer;
}
.blk-btn:hover { filter: brightness(0.97); }
.blk-btn.solid { background: var(--yellow); border-color: var(--yellow); color: #fff; }

/* ---- Встало: само не рассосётся ---- */
.blk.blk-red {
  border-color: var(--red, #ef4444);
  border-left-color: var(--red, #ef4444);
  background: var(--red-dim);
}
.blk-red .blk-dot { background: var(--red, #ef4444); box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.18); }
.blk-red .blk-title { color: var(--red-ink); }
.blk-red .blk-age { color: var(--red-ink); }
.blk-red .blk-body { color: var(--text); }
.blk-red .blk-chip,
.blk-red .blk-file { border-color: var(--red); color: var(--red-ink); }
.blk-red .blk-btn { border-color: var(--red); color: var(--red-ink); }
.blk-red .blk-btn.solid { background: var(--red, #ef4444); border-color: var(--red, #ef4444); color: #fff; }

/* ---- Ничего не мешает ---- */
.blk.blk-ok {
  border-color: var(--border, #e4e4ec);
  border-left-color: var(--green, #22c55e);
  background: var(--surface, #fff);
}
.blk-ok .blk-dot { background: var(--green, #22c55e); box-shadow: none; }
.blk-ok .blk-title { color: var(--green, #14804a); }
.blk-ok .blk-head { margin-bottom: 0; }
.blk-ok .blk-btn { margin-left: auto; border-color: var(--border, #e4e4ec); color: var(--muted, #8888aa); }
.blk-ok .blk-btn:hover { border-color: var(--accent, #5b5fc7); color: var(--accent, #5b5fc7); }

/* ---- Бейдж блокировки на карточке задачи ---- */
.blk-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 4px;
  background: var(--yellow-dim, #fef3c7); color: var(--yellow, #8a5a00);
}
.blk-badge.is-stuck { background: var(--red-dim, #fee2e2); color: var(--red, #ef4444); }


/* ============================================================
   ЭКРАН «ДЕНЬГИ» — расходы проекта
   ============================================================ */
.money-top-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.money-tile {
  background: var(--surface, #fff);
  border-radius: var(--r-lg, 22px);
  padding: 18px 20px;
  box-shadow: var(--shadow-card, 0 4px 24px rgba(18,20,22,0.06));
}
.money-tile-k {
  font-size: 10px; font-weight: 800; color: var(--muted, #8888aa);
  text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;
}
.money-tile-v { font-size: 32px; font-weight: 800; letter-spacing: -0.8px; line-height: 1; }
.money-tile-s { font-size: 11px; color: var(--muted, #8888aa); margin-top: 6px; }

.ex-pane {
  background: var(--surface, #fff);
  border-radius: var(--r-lg, 22px);
  padding: 17px 20px 20px;
  box-shadow: var(--shadow-card, 0 4px 24px rgba(18,20,22,0.06));
}
.ex-pane-hd { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.ex-hint { font-size: 10px; color: var(--muted, #8888aa); }

.ex-list { display: flex; flex-direction: column; }
.ex-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--border, #e4e4ec);
}
.ex-row:last-child { border-bottom: none; }
.ex-row-m { flex: 1; min-width: 0; }
.ex-row-n { font-size: 13px; font-weight: 600; }
.ex-row-d { font-size: 11px; color: var(--muted, #8888aa); margin-top: 2px; }
.ex-row-a { font-size: 14px; font-weight: 800; letter-spacing: -0.3px; flex-shrink: 0; text-align: right; }
.ex-row-fx { font-size: 10px; font-weight: 600; color: var(--muted); margin-top: 2px; }
.ex-row-act { flex-shrink: 0; }
.ex-row-act .c-mini { padding: 3px 9px; font-size: 13px; line-height: 1; min-height: 26px; }


/* ---- Кнопка правки в шапке задачи ---- */
.detail-edit {
  margin-left: auto;
  font-size: 10px; font-weight: 700;
  padding: 3px 9px; border-radius: 5px; min-height: 24px;
  border: 1px solid var(--border, #e4e4ec);
  background: transparent; color: var(--muted, #8888aa); cursor: pointer;
}
.detail-edit:hover { border-color: var(--accent, #5b5fc7); color: var(--accent, #5b5fc7); }


/* ============================================================
   ЭКРАН ПРОЕКТА

   Проект — рабочее пространство, а не папка. Сверху кто мы и
   куда идём, потом четыре плитки «как дела», потом вводные
   и задачи. Плитка, которой нечего сказать, не рисуется —
   правило то же, что на дашборде.
   ============================================================ */
.phead {
  background: var(--surface); border-radius: var(--r-lg, 22px);
  box-shadow: var(--shadow-card); padding: 22px 24px; margin-bottom: 16px;
}
.phead-top { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.phead-names { flex: 1; min-width: 0; }
.phead-name { font-size: 22px; font-weight: 800; letter-spacing: -0.7px; line-height: 1.2; }
.phead-meta { font-size: 11px; color: var(--muted); margin-top: 5px; }
.phead-actions { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }

/* Цель — единственное место на экране, где мы позволяем себе
   акцентную заливку: это то, ради чего проект существует. */
.pgoal {
  background: var(--accent-dim); border-radius: var(--r-md, 16px);
  padding: 15px 17px; display: flex; gap: 15px; align-items: flex-start;
}
.pgoal-k {
  font-size: 10px; font-weight: 800; color: var(--accent);
  text-transform: uppercase; letter-spacing: 0.6px;
  width: 46px; flex-shrink: 0; padding-top: 4px;
}
.pgoal-v { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; line-height: 1.5; }
.pgoal-empty .pgoal-v { font-size: 12px; font-weight: 500; color: var(--muted); line-height: 1.65; }
.pgoal-edit {
  flex-shrink: 0; font-family: inherit; cursor: pointer; border: none; background: none;
  font-size: 10px; font-weight: 800; color: var(--accent); padding-top: 5px;
}
.pgoal-edit:hover { text-decoration: underline; }

/* ---- Плитки ---- */
.ptiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
          gap: 14px; margin-bottom: 16px; }
.ptile {
  background: var(--surface); border-radius: var(--r-lg, 22px);
  box-shadow: var(--shadow-card); padding: 17px 19px;
}
.ptile-k { font-size: 10px; font-weight: 800; color: var(--muted);
           text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 9px; }
.ptile-v { font-size: 23px; font-weight: 800; letter-spacing: -0.8px; line-height: 1; }
.ptile-red { color: var(--red); }
.ptile-s { font-size: 11px; color: var(--muted); margin-top: 6px; line-height: 1.5; }
.ptile-bar { height: 6px; background: var(--track-bg, var(--border));
             border-radius: 3px; overflow: hidden; margin-top: 11px; }
.ptile-fill { height: 100%; border-radius: 3px; }

/* ---- Две колонки ---- */
.pcols { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; align-items: start; }
.pcol { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (max-width: 900px) { .pcols { grid-template-columns: 1fr; } }

.pbg { font-size: 13px; line-height: 1.75; white-space: pre-wrap; }
.pempty { font-size: 12px; color: var(--muted); line-height: 1.7; }

/* ---- Строка задачи в проекте ---- */
.prow { display: flex; align-items: center; gap: 10px; padding: 9px 0; font-size: 12px; }
.prow + .prow { border-top: 1px solid var(--border); }
.prow-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--calm); }
.sig-dot-red { background: var(--red); }
.sig-dot-yellow { background: var(--yellow); }
.sig-dot-ok { background: var(--sig-ok); }
.prow-name { flex: 1; min-width: 0; font-weight: 700;
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prow-who { flex-shrink: 0; font-size: 10px; color: var(--muted); font-weight: 600; }


/* ============================================================
   ПЕРВЫЙ ЭКРАН И ПУСТЫЕ СОСТОЯНИЯ

   Пустой экран — не ошибка и не повод извиняться. Это первый
   разговор с человеком: он решает, останется тот или закроет
   вкладку. Поэтому здесь не сообщают об отсутствии, а предлагают
   шаг — и объясняют, зачем этот шаг нужен.
   ============================================================ */
.start { max-width: 780px; margin: 0 auto; padding: 46px 0 30px; text-align: center; }
.start-hi {
  font-size: 22px; font-weight: 800; letter-spacing: -0.6px;
  line-height: 1.25; margin-bottom: 10px;
}
.start-lead {
  font-size: 13px; color: var(--muted); line-height: 1.75;
  max-width: 560px; margin: 0 auto 30px;
}

.scards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.scard {
  background: var(--surface); border-radius: var(--r-lg, 22px);
  box-shadow: var(--shadow-card); padding: 22px 20px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.scard-ic {
  width: 42px; height: 42px; border-radius: 13px; margin-bottom: 13px;
  background: var(--accent-dim); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.scard-t { font-size: 14px; font-weight: 800; letter-spacing: -0.2px; margin-bottom: 7px; }
.scard-w { font-size: 11px; color: var(--muted); line-height: 1.65; flex: 1; }
/* Действие и отказ — одной строкой. Стоя друг под другом они
   читались как два равных шага; в строку — это одно решение
   с двумя ответами. */
.scard-act {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; flex-wrap: wrap; margin-top: 15px;
}

/* Подпись под коротким пустым состоянием */
.empty-sub { font-size: 11px; color: var(--muted); margin-top: 6px; line-height: 1.6; }

@media (max-width: 700px) {
  .start { padding: 26px 0 20px; }
  .start-hi { font-size: 19px; }
  .scards { grid-template-columns: 1fr; }
}


/* ============================================================
   ДАШБОРД НА ТЕЛЕФОНЕ

   Рельс уходит под основную колонку, квадратные плитки перестают
   быть квадратными: на 360px квадрат календаря съел бы весь экран,
   а «сделано за неделю» превратилось бы в пустое поле с цифрой.
   ============================================================ */
@media (max-width: 900px) {
  .widgets-main { grid-template-columns: 1fr; }
  .widget { grid-column: span 1 !important; }
  .widgets-rail > [data-widget="week-done"],
  .widgets-rail > [data-widget="calendar"] { aspect-ratio: auto; }
  .ptiles { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .phead { padding: 18px 17px; }
  .phead-top { flex-direction: column; gap: 12px; }
  .phead-actions { width: 100%; }
  .pgoal { flex-direction: column; gap: 8px; }
  .pgoal-k { width: auto; padding-top: 0; }
  .ov { flex-wrap: wrap; }
  .ov-date { margin-left: 14px; }
  .ww-who { max-width: 100%; }
}

/* Тихий отказ от шага. Намеренно не кнопка: это не действие,
   а способ убрать предложение с глаз. Кнопкой оно спорило бы
   за внимание с тем, что мы предлагаем сделать. */
.scard-skip {
  font-family: inherit; cursor: pointer;
  border: none; background: none; padding: 4px 6px;
  font-size: 11px; font-weight: 600; color: var(--muted);
  white-space: nowrap;
}
.scard-skip:hover { color: var(--text); text-decoration: underline; }

.start-back {
  margin-top: 22px; font-family: inherit; cursor: pointer;
  border: none; background: none; padding: 6px 10px;
  font-size: 11px; font-weight: 600; color: var(--muted);
}
.start-back:hover { color: var(--accent); text-decoration: underline; }


/* ============================================================
   ЭКРАН «СРОКИ» — корзины времени

   Раньше здесь был список карточек по дате: то же, что таймлайн,
   только хуже. Человек думает не отсортированным списком,
   а корзинами: просрочено, сегодня-завтра, эта неделя, дальше.
   Пустая корзина не рисуется.
   ============================================================ */
.dlg { margin-bottom: 18px; }
.dlg-head { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; padding-left: 2px; }
.dlg-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--calm); }
.dlg-red { background: var(--red); }
.dlg-yellow { background: var(--yellow); }
.dlg-title { font-size: 12px; font-weight: 800; letter-spacing: -0.1px; }
.dlg-count {
  font-size: 10px; font-weight: 800; color: var(--muted);
  background: var(--surface2); border-radius: var(--r-pill, 999px); padding: 2px 8px;
}
.dlg-body {
  background: var(--surface); border-radius: var(--r-lg, 22px);
  box-shadow: var(--shadow-card); padding: 6px 18px;
}

.dlr { display: flex; align-items: center; gap: 11px; padding: 11px 0; }
.dlr + .dlr { border-top: 1px solid var(--border); }
.dlr-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--calm); }
.dlr-b { flex: 1; min-width: 0; }
.dlr-n { font-size: 13px; font-weight: 700; line-height: 1.35; }
.dlr-m { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
         font-size: 10px; color: var(--muted); margin-top: 3px; }

/* Дата — кнопка, как в «Просрочено»: перенести срок,
   не открывая задачу. */
.dlr-date {
  flex-shrink: 0; font-family: inherit; cursor: pointer; white-space: nowrap;
  font-size: 11px; font-weight: 700; color: var(--text);
  background: var(--surface2); border: 1px solid transparent;
  border-radius: var(--r-sm, 10px); padding: 7px 12px; min-height: 32px;
}
.dlr-date:hover { border-color: var(--accent); color: var(--accent); }
.dlr-date.hot { background: var(--red-dim); color: var(--red); }
.dlr-date.hot:hover { border-color: var(--red); color: var(--red); }

@media (max-width: 700px) {
  .dlr { flex-wrap: wrap; }
  .dlr-date { margin-left: 18px; }
  .dlg-body { padding: 6px 14px; }
}