/* Экран 01 «Мои мероприятия». Рабочий режим плотности: непрозрачные поверхности, без стекла и blur
   (стекло только поверх реального фото — см. .card__top--photo). Все значения — через токены. */

*, *::before, *::after { box-sizing: border-box; }

/* Побеждает любой `display` класса той же специфичности, что и `[hidden]` (частая ловушка:
   `.btn[hidden]`, `.field-row[hidden]` и т.п. иначе остаются видимыми). */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink-primary);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p { margin: 0; }
b, strong { font-weight: var(--fw-strong); }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select { font: inherit; color: inherit; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--ink-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.skip-link {
  position: absolute; left: var(--space-2); top: -60px; z-index: 10;
  background: var(--ink-primary); color: var(--ink-on-dark);
  padding: var(--space-1) var(--space-2); border-radius: var(--radius-field);
}
.skip-link:focus { top: var(--space-2); }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--space-2);
}
@media (min-width: 768px) { .container { padding-inline: var(--space-4); } }
@media (min-width: 1024px) { .container { padding-inline: var(--space-6); } }

.page { padding-block: var(--space-3) var(--space-10); }
@media (min-width: 1024px) { .page { padding-top: var(--space-6); } }

.muted { color: var(--ink-secondary); }
.caption { font-size: var(--fs-caption); color: var(--ink-secondary); }
.overline {
  font-size: var(--fs-overline); font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-secondary);
}
.link {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
  text-decoration-color: var(--line-control);
  transition: text-decoration-color .15s;
}
.link:hover { text-decoration-color: currentColor; }

/* ---------- шапка продукта ---------- */

.app-header {
  background: var(--canvas);
  border-bottom: 1px solid var(--line-hair);
}
.app-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  min-height: 56px;
}
.app-header__place { display: flex; align-items: center; gap: var(--space-1); min-width: 0; }
.app-header__workspace {
  font-weight: var(--fw-title); letter-spacing: -0.005em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: inherit; text-decoration: none;
}
.app-header__workspace:hover { text-decoration: underline; }
.app-header__user { display: flex; align-items: center; gap: var(--space-1); }
/* На узком экране название агентства уходит в меню профиля, а не обрезается многоточием */
@media (max-width: 599px) { .app-header__workspace { display: none; } }

.profile { position: relative; flex: none; }
.profile__toggle {
  display: inline-flex; align-items: center; gap: var(--space-1);
  min-height: 44px; padding: 0 var(--space-1) 0 var(--space-half);
  border: 0; border-radius: var(--radius-pill); background: transparent; cursor: pointer;
}
.profile__toggle:hover { background: var(--surface-muted); }
.profile__avatar {
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--action-bg); color: var(--action-ink); font-weight: 500; font-size: 13px;
}
.profile__label { font-weight: 400; }
@media (max-width: 479px) { .profile__label { display: none; } }
.profile__caret { font-size: 12px; color: var(--ink-secondary); }
.profile__panel {
  position: absolute; right: 0; top: calc(100% + var(--space-1)); z-index: 20;
  width: min(280px, calc(100vw - 32px));
  padding: var(--space-2);
  background: var(--surface-white);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-button);
  box-shadow: var(--shadow-float);
  display: grid; gap: var(--space-half);
}
.profile__panel[hidden] { display: none; }
.profile__name { font-weight: var(--fw-title); }
.profile__meta { font-size: var(--fs-caption); color: var(--ink-secondary); overflow-wrap: anywhere; }
.profile__link { margin-top: var(--space-1); width: 100%; text-align: center; text-decoration: none; }
.profile__logout { margin-top: var(--space-half); width: 100%; }

.stand-badge {
  flex: none;
  font-size: var(--fs-overline); font-weight: 500;
  padding: 2px var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--status-amber-tint); color: var(--status-amber-ink);
}

/* ---------- кнопки ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-half);
  min-height: var(--control-h);
  padding: 0 var(--space-3);
  border-radius: var(--radius-button);
  border: 1px solid transparent;
  font-weight: var(--fw-title); font-size: 15px; line-height: 1.2; letter-spacing: -0.005em;
  text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn:disabled, .btn[aria-disabled="true"] { cursor: not-allowed; }

.btn--primary { background: var(--action-bg); color: var(--action-ink); border-color: var(--action-border); }
.btn--primary:hover:not(:disabled) { background: var(--action-bg-hover); }
.btn--primary:active:not(:disabled) { background: var(--action-bg-active); }
.btn--primary:disabled { background: var(--surface-muted); color: var(--ink-secondary); }
.btn--primary[aria-busy="true"] { background: var(--action-bg-hover); color: var(--action-ink); }

.btn--secondary { background: var(--surface-white); border-color: var(--line-control); color: var(--ink-primary); }
.btn--secondary:hover:not(:disabled) { border-color: var(--line-control-hover); background: var(--surface-white); }
.btn--secondary:active:not(:disabled) { background: var(--canvas); }
.btn--secondary:disabled { color: var(--ink-secondary); border-color: var(--line-soft); }

.btn--ghost { background: transparent; color: var(--ink-primary); }
.btn--ghost:hover { background: var(--surface-muted); }

.btn--small { min-height: 36px; padding: 0 14px; font-size: var(--fs-caption); border-radius: var(--radius-field); }
/* Интерактивная зона не меньше 44×44 даже у компактной кнопки */
.btn--small { position: relative; }
.btn--small::after { content: ""; position: absolute; inset: -4px 0; }

.btn--on-dark {
  background: transparent; color: var(--ink-on-dark); border-color: var(--line-on-dark);
}
.btn--on-dark:hover:not(:disabled) { background: rgba(247, 247, 247, 0.08); }
.btn--on-dark:focus-visible { outline-color: var(--ink-on-dark); }

.icon-btn {
  width: 44px; height: 44px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--radius-field); background: transparent;
  font-size: 22px; line-height: 1; cursor: pointer; color: var(--ink-secondary);
}
.icon-btn:hover { background: var(--surface-muted); color: var(--ink-primary); }

/* ---------- заголовок страницы ---------- */

.page-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-4);
}
.page-title {
  font-size: var(--fs-display); font-weight: var(--fw-display); line-height: 1.05; letter-spacing: var(--tracking-display);
  overflow-wrap: anywhere;
}
.page-subtitle { margin-top: 12px; color: var(--ink-secondary); }
@media (max-width: 479px) {
  .page-head .page-subtitle { display: none; }
  .page-head__cta { width: 100%; }
}

/* ---------- баннеры ---------- */

.banner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-1) var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-button);
  margin-bottom: var(--space-3);
  font-weight: 400;
}
.banner[hidden] { display: none; }
.banner--error { background: var(--status-blocked-tint); color: var(--status-blocked); }
.banner--warning { background: var(--status-amber-tint); color: var(--status-amber-ink); }
.banner--success { background: var(--olive-tint); color: var(--olive-ink); }
.banner--info { background: var(--sky-tint); color: var(--sky-ink); }

/* ---------- метки статуса: форма + слово ---------- */
/* Компактная геометрия для плотных строк (часть II §1): статус не должен спорить по весу
   с названием задачи. Заголовок строки остаётся крупнее и заметнее самого бейджа. */

.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  font-size: 11px; line-height: 14px; font-weight: 500;
  white-space: normal;
  max-width: 100%;
}
@media (min-width: 768px) { .chip { font-size: 12px; line-height: 16px; } }
.chip > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.chip--planned { background: var(--surface-muted); color: var(--ink-secondary); }
.chip--progress { background: var(--sky-tint); color: var(--sky-ink); }
.chip--blocked { background: var(--status-blocked-tint); color: var(--status-blocked); }
.chip--done { background: var(--olive-tint); color: var(--olive-ink); }
.chip--soon { background: var(--status-amber-tint); color: var(--status-amber-ink); }

/* Чуть крупнее — для одиночного статуса в детальной панели задачи */
.chip--detail { padding: 4px 8px; font-size: 12px; line-height: 16px; }

.shape { flex: none; display: inline-block; width: 10px; height: 10px; position: relative; }
.shape--planned { border: 1.5px solid currentColor; border-radius: 50%; }
.shape--progress {
  border: 1.5px solid currentColor; border-radius: 50%;
  background: linear-gradient(90deg, currentColor 50%, transparent 50%);
}
.shape--blocked { background: currentColor; border-radius: 2px; }
.shape--blocked::after {
  content: "!"; position: absolute; inset: 0;
  color: var(--surface-white); font-size: 8px; font-weight: 700; line-height: 10px; text-align: center;
}
.shape--done { background: currentColor; border-radius: 50%; }
.shape--done::after {
  content: ""; position: absolute; left: 3.4px; top: 1.6px; width: 2.4px; height: 4.8px;
  border: solid var(--surface-white); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
.shape--soon {
  width: 0; height: 0;
  border-left: 5.5px solid transparent; border-right: 5.5px solid transparent;
  border-bottom: 10px solid currentColor;
}

/* ---------- «Требует внимания»: мягкий голубой, локальный акцент (часть II §2) ---------- */

.attention {
  background: var(--attention-surface-subtle);
  color: var(--attention-text);
  border-radius: var(--radius-card);
  padding: 20px var(--space-3) var(--space-2);
  margin-bottom: var(--space-6);
}
@media (min-width: 1024px) { .attention { padding: var(--space-3) var(--space-4) 20px; } }

.attention__title {
  font-size: var(--fs-section); font-weight: var(--fw-heading); line-height: 1.25; letter-spacing: -0.01em;
  margin-bottom: var(--space-1);
}
.attention__list { display: grid; }
.attention-row + .attention-row { border-top: 1px solid var(--attention-divider); }
.attention-row__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "chip arrow" "title arrow" "meta arrow";
  align-items: center;
  gap: 4px var(--space-2);
  min-height: 48px;
  padding: 12px var(--space-1);
  margin-inline: calc(-1 * var(--space-1));
  border-radius: var(--radius-field);
  text-decoration: none;
  color: inherit;
}
.attention-row__link:hover { background: var(--attention-hover); }
.attention-row__link:focus-visible { outline-color: var(--attention-accent); }
.attention-row__chips { grid-area: chip; justify-self: start; display: flex; flex-wrap: wrap; gap: 4px; }
/* Временная подсветка строки, на которую сослались из другого блока (обзор мероприятия v2, §0) —
   обычный класс, а не :target: в этом стеке нативный переход на #якорь ничего не подсвечивает
   для содержимого внутри корневого узла приложения, поэтому подсветку и прокрутку делает JS. */
.attention-row--flash .attention-row__link { background: var(--accent-tint); transition: background-color 1.2s ease; }

/* Пояснение-ссылка «Ещё N задач(и) — в „Требует внимания“» — кнопка, оформленная как ссылка */
.link-button {
  display: inline; padding: 0; border: 0; background: none; font: inherit;
  color: var(--ink-primary); cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
  text-decoration-color: var(--line-control);
}
.link-button:hover { text-decoration-color: currentColor; }
.attention-row__title {
  grid-area: title; font-weight: var(--fw-title); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.attention-row__meta { grid-area: meta; font-size: var(--fs-caption); color: var(--attention-text-secondary); overflow-wrap: anywhere; }
.attention-row__arrow {
  grid-area: arrow; flex: none; font-size: 15px; color: var(--attention-text-secondary);
  transition: transform .15s;
}
.attention-row__link:hover .attention-row__arrow { transform: translateX(2px); }
@media (prefers-reduced-motion: reduce) { .attention-row__link:hover .attention-row__arrow { transform: none; } }

@media (min-width: 900px) {
  .attention-row__link {
    grid-template-columns: 200px minmax(0, 1fr) minmax(0, 260px) auto;
    grid-template-areas: "chip title meta arrow";
  }
}
.attention__controls { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: 12px; }
.attention__error { margin-top: var(--space-1); color: var(--status-blocked); }
@media (max-width: 767px) {
  /* Три строки и кнопка раскрытия — блок не занимает весь первый экран телефона */
  .attention { padding: var(--space-2) var(--space-2) var(--space-2); margin-bottom: var(--space-3); }
  .attention__title { margin-bottom: var(--space-1); }
  .attention-row__link { padding-block: 12px; min-height: 44px; }
  .attention__controls .btn { flex: 1; }
}

/* Кнопки на голубой поверхности: контурные, с тем же акцентом */
.btn--on-blue {
  min-height: 36px; padding: 0 14px; font-size: var(--fs-caption); border-radius: var(--radius-field);
  background: transparent; color: var(--attention-accent); border-color: var(--attention-divider);
}
.btn--on-blue:hover:not(:disabled) { background: var(--attention-hover); border-color: var(--attention-accent); }
.btn--on-blue:focus-visible { outline-color: var(--attention-accent); }
.btn--on-blue:disabled { color: var(--attention-text-secondary); border-color: var(--attention-divider); }

/* Спокойное состояние: сигналов нет — компактная светлая строка, а не пустая голубая панель */
.attention-calm {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-1) var(--space-2);
  padding: 12px var(--space-3);
  margin-bottom: var(--space-6);
  background: var(--olive-tint);
  border-radius: var(--radius-button);
}
.attention-calm__title {
  display: flex; align-items: center; gap: var(--space-1);
  font-size: var(--fs-body); font-weight: var(--fw-title); color: var(--olive-ink);
}
.attention-calm__link {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: var(--fw-title); color: var(--ink-primary); text-underline-offset: 4px; text-decoration-thickness: 1px;
}
.attention--skeleton { display: grid; gap: var(--space-2); }
.attention--skeleton .skeleton { background: rgba(24, 48, 68, 0.1); }
.skeleton--heading { height: 28px; width: 45%; }
.skeleton--row { height: 44px; }

/* Строки внимания внутри пары «В работе»/«Ждём ответа» вдвое уже страницы — широкая раскладка
   в 4 колонки включается по ширине экрана (медиа-запрос выше), а не по ширине контейнера, и на
   такой узкой колонке сжимала название задачи. Более высокая специфичность держит их в столбик. */
.zones .attention-row__link {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "chip arrow" "title arrow" "meta arrow";
}

/* Светлый вариант списка — внутри обзора проекта */
.attention__list--light .attention-row + .attention-row { border-top-color: var(--line-hair); }
.attention__list--light .attention-row__link:hover { background: var(--surface-muted); }
.attention__list--light .attention-row__link:focus-visible { outline-color: var(--ink-primary); }
.attention__list--light .attention-row__meta,
.attention__list--light .attention-row__arrow { color: var(--ink-secondary); }
/* Строки паспорта чаще стоят в один столбец (половина ширины в .zones) и тройная раскладка
   чипа/названия/меты — внутри такой колонки лишняя высота строки не нужна (ТЗ 09-2, §2):
   меньше вертикальный отступ, тот же шрифт. */
.attention__list--light .attention-row__link { padding-block: 10px; min-height: 44px; }

/* ---------- панель списка ---------- */

.toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.toolbar[hidden] { display: none; }

/* Вкладки — фильтр-метки как в разделе «Плотный рабочий раздел» брендбука:
   активная — тёмная, остальные — белые с тонким контуром. */
.tabs {
  display: inline-flex; flex-wrap: wrap; gap: var(--space-1);
}
.tab {
  display: inline-flex; align-items: center;
  min-height: 36px; padding: 0 14px;
  border: 1px solid var(--line-control);
  border-radius: var(--radius-pill);
  background: var(--surface-white);
  text-decoration: none; font-size: 14px; font-weight: 400; white-space: nowrap;
  color: var(--ink-primary);
  transition: border-color .15s, background-color .15s;
}
.tab:hover { border-color: var(--line-control-hover); }
.tab[aria-current="page"] {
  background: var(--action-bg); border-color: var(--action-border-strong); color: var(--action-ink);
}

.toolbar__filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }

.input {
  min-height: var(--control-h);
  padding: 0 var(--space-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-field);
  background: var(--surface-white);
  width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
/* Точечное ТЗ, п. 6: нативный `type="date"` в Chromium рендерит внутренний контрол выше, чем
   `type="time"` (~57px против 44px) при одном и том же min-height, из-за чего «Дата» и «Время»
   в .field-row визуально не совпадали по высоте и линии. Фиксируем обоим ровно --control-h. */
input.input[type="date"], input.input[type="time"] { height: var(--control-h); }
.input:hover:not(:disabled):not(:focus) { border-color: var(--ink-secondary); }
.input::placeholder { color: var(--ink-secondary); opacity: 1; }
/* Фокус поля — тёмная граница (брендбук, TextField): вместо двойного кольца с зазором —
   граница 1 px + внутренняя тень 1 px, итого ровная тёмная линия 2 px без «ореола». */
.input:focus, .input:focus-visible {
  outline: none; border-color: var(--ink-primary); box-shadow: inset 0 0 0 1px var(--ink-primary);
  border-radius: var(--radius-field);
}
.input:disabled { background: var(--surface-muted); border-color: var(--line-soft); color: var(--ink-secondary); }

.search { width: 280px; }
.sort { display: flex; align-items: center; gap: var(--space-1); }
.sort__label { font-size: var(--fs-caption); color: var(--ink-secondary); white-space: nowrap; }
.select {
  width: auto; padding-right: 40px; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  /* Тонкий шеврон 1.5 px цвета ink-secondary (#5E5E5E) вместо системной стрелки */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235E5E5E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 16px center;
  background-size: 12px 8px;
  background-repeat: no-repeat;
}
.sort[hidden], .sort-note[hidden] { display: none; }
.sort-note { font-size: var(--fs-caption); color: var(--ink-secondary); }

@media (max-width: 767px) {
  .toolbar { flex-direction: column; align-items: stretch; }
  .tabs { display: flex; }
  .tab { flex: 1; justify-content: center; }
  .toolbar__filters { flex-wrap: nowrap; }
  .search { flex: 1; width: auto; min-width: 0; }
  .sort__label { display: none; }
  .select { max-width: 150px; }
}
@media (max-width: 379px) {
  .toolbar__filters { flex-wrap: wrap; }
  .search, .sort, .select { width: 100%; max-width: none; flex: 1 1 100%; }
}

.list-note { color: var(--ink-secondary); margin-bottom: var(--space-2); }

/* ---------- карточки ---------- */

.cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  /* Карточки по содержимому: без растяжения до соседа и пустого места над кнопкой */
  align-items: start;
}
@media (min-width: 720px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.card__inner {
  display: flex; flex-direction: column;
  background: var(--surface-white);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: border-color .2s;
}
/* Тень — только у плавающих поверхностей (брендбук §05): при наведении темнеет лишь контур */
.card__inner:hover { border-color: var(--line-control); }
/* Срочность видна из плашки «Срочно · N» внутри карточки (часть II §3) — сплошная красная
   рамка вокруг всей карточки повторялась на каждой карточке сетки и делала её тревожной. */

.card__top {
  position: relative;
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2);
  padding: 20px var(--space-3) var(--space-2);
  /* Без обложки — та же белая поверхность, отделённая тонкой линией: серая плашка-«шапка»
     утяжеляла карточку и спорила с датой */
  background: var(--surface-white);
  border-bottom: 1px solid var(--line-hair);
}
.card--archived .card__top { background: var(--canvas); }
/* ---------- обложка карточки: фото + стекло (брендбук §06) ---------- */
.card__top--photo {
  border-bottom: 0;
  min-height: 176px;
  align-items: flex-end;
  padding: var(--space-2);
  background: var(--surface-muted);            /* пока фото грузится */
  isolation: isolate;
}
.card__top > .chip { flex: 0 1 auto; min-width: 0; white-space: normal; }
.card__photo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: -2;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
/* Лёгкое затемнение снизу — стекло и метка читаются на любом фото */
.card__top--photo::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(30, 30, 30, 0) 40%, rgba(30, 30, 30, 0.28) 100%);
}
.card__inner:hover .card__photo { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .card__inner:hover .card__photo { transform: none; } }

/* Метка статуса на фото — белое плотное стекло, текст тёмный, вес 500 */
.card__top--photo > .chip {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  color: var(--ink-primary);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}
/* Дата — тёмное стекло #1E1E1E 48 % (только поверх фото) */
.card__top--photo .dateblock {
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(1.1); -webkit-backdrop-filter: blur(20px) saturate(1.1);
  color: var(--glass-ink);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-button);
  padding: 10px 14px 10px 16px;
}
.card__top--photo .dateblock__day { font-weight: 500; }
.card__top--photo .dateblock__month,
.card__top--photo .dateblock__unknown { font-weight: 500; color: var(--glass-ink); }
.card__top--photo .dateblock--unknown,
.card__top--photo .dateblock--month { align-self: flex-end; }
.card--archived .card__photo { filter: grayscale(1); opacity: .85; }

.dateblock {
  display: flex; flex-direction: column; align-items: flex-end; text-align: right;
  flex: none;
}
.dateblock__day { font-size: clamp(40px, 4vw, 52px); font-weight: 400; line-height: 0.95; letter-spacing: -0.04em; }
.dateblock__month { margin-top: 6px; font-size: var(--fs-caption); font-weight: 400; }
.dateblock__rel { font-size: var(--fs-caption); color: var(--ink-secondary); }
.card__top--photo .dateblock__rel { color: var(--glass-ink-2); }
.dateblock--unknown { align-self: center; }
.dateblock__unknown { font-weight: 400; color: var(--ink-secondary); }
/* Известен только месяц (ТЗ 07, §1.1) — крупная подпись месяца вместо числа дня. */
.dateblock--month { align-self: center; }
.dateblock__month--big { margin-top: 0; font-size: clamp(20px, 2.4vw, 26px); font-weight: 400; letter-spacing: -0.01em; }

.card__body {
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: 20px var(--space-3) 0;
}
.card__kicker {
  overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card__title {
  font-size: var(--fs-card-title); font-weight: var(--fw-title); line-height: 1.25; letter-spacing: -0.01em;
  margin-bottom: 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: anywhere;
}
.card__title a { text-decoration: none; }
.card__title a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

.card__urgent {
  padding: 12px var(--space-2);
  border-radius: var(--radius-field);
  background: var(--urgent-tint-soft);
}
.card__urgent-label {
  display: flex; align-items: center; gap: 6px;
  color: var(--status-blocked);
  margin-bottom: var(--space-half);
}
.card__urgent-text { overflow-wrap: anywhere; font-size: 14px; }
.card__more { color: var(--ink-secondary); }

.card__work { color: var(--ink-primary); overflow-wrap: anywhere; }
.card__work-label { color: var(--sky-ink); font-weight: var(--fw-title); }
.card__work-empty { color: var(--ink-secondary); }

/* «Настройка: N из M» и «Дальше: …» — те же счётчики, что на обзоре (ТЗ 07, §4.4, §5.3). */
.card__setup { color: var(--ink-secondary); }
.card__setup--caption { font-size: var(--fs-caption); margin-top: var(--space-half); }
.card__upcoming { color: var(--ink-primary); overflow-wrap: anywhere; }
.card__upcoming-label { color: var(--ink-secondary); font-weight: var(--fw-title); }

.card__actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-1);
  padding: var(--space-1) var(--space-3) 12px;
}
.card__open {
  display: inline-flex; align-items: center; gap: 2px; min-height: 44px;
  font-size: 14px; font-weight: var(--fw-title); text-decoration: none;
}
.card__open > span { transition: transform .15s; }
.card__open:hover > span { transform: translateX(2px); }
@media (prefers-reduced-motion: reduce) { .card__open:hover > span { transform: none; } }

.list-more { display: flex; justify-content: center; margin-top: var(--space-4); }

/* ---------- скелетоны ---------- */

.skeleton { background: var(--surface-muted); border-radius: 8px; }
.card--skeleton .card__inner { min-height: 240px; }
.skeleton--chip { width: 110px; height: 22px; border-radius: var(--radius-pill); }
.skeleton--date { width: 64px; height: 56px; }
.skeleton--line { height: 14px; }
.skeleton--short { width: 40%; }
.skeleton--long { width: 70%; }
.skeleton--title { height: 22px; width: 60%; margin-block: var(--space-1); }
@media (prefers-reduced-motion: no-preference) {
  .skeleton { animation: pulse 1.4s ease-in-out infinite; }
  @keyframes pulse { 50% { opacity: 0.55; } }
}

/* ---------- пустые состояния ---------- */

.empty {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  padding: var(--space-4);
  border: 1px dashed var(--line-dashed);
  border-radius: var(--radius-card);
  background: var(--surface-white);
}
.empty > .btn { margin-top: var(--space-1); }
.empty__title { font-size: var(--fs-section); font-weight: var(--fw-heading); line-height: 1.25; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.empty__text { color: var(--ink-secondary); max-width: 52ch; }

/* ---------- диалог ---------- */

.dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0;
  border-radius: var(--radius-card);
  background: var(--surface-white);
  color: var(--ink-primary);
  box-shadow: var(--shadow-float);
}
.dialog::backdrop { background: var(--backdrop); }
.dialog__form { display: flex; flex-direction: column; max-height: inherit; }
.dialog__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: 28px 28px var(--space-2);
}
.dialog__head .icon-btn { margin: -10px -12px -10px 0; }
.dialog__title { font-size: 24px; font-weight: var(--fw-heading); letter-spacing: -0.015em; line-height: 1.2; }
.dialog__body { padding: var(--space-1) 28px; overflow-y: auto; display: grid; gap: 12px; }
.dialog__foot {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-1);
  padding: 20px 28px 28px;
}
/* «+ Добавить нового подрядчика» — всегда на своей строке слева, чтобы не тесниться
   с «Отмена»/«Добавить N» на узком диалоге */
.dialog__foot .dialog__foot-extra { flex: 1 1 100%; order: -1; margin-right: auto; margin-bottom: var(--space-1); }
@media (max-width: 767px) {
  .dialog {
    width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0;
    border-radius: 0;
  }
  .dialog__form { height: 100%; }
  .dialog__body { flex: 1; }
  .dialog__head { padding: 20px var(--space-2) var(--space-1); }
  .dialog__body { padding: var(--space-1) var(--space-2); }
  .dialog__foot { padding: 12px var(--space-2) var(--space-2); border-top: 1px solid var(--line-hair); }
  .dialog__foot .btn { flex: 1; }
}

/* «Данные свадьбы» — смысловые блоки внутри одного диалога (ТЗ 09, §1.2), не отдельные экраны. */
.edit-section { display: grid; gap: var(--space-2); }
.edit-section + .edit-section { margin-top: var(--space-2); padding-top: 20px; border-top: 1px solid var(--line-hair); }
.edit-section__title { margin: 0; }

/* align-content: start — иначе в .field-row (flex, stretch по умолчанию) более короткое поле
   (когда его hint/error пустые и не рендерятся) растягивается на высоту соседа, а его пустые
   грид-строки растягиваются вместе с ним и сдвигают input вниз (точечное ТЗ, п. 6: «Дата» и
   «Время» должны быть на одной линии). */
.field { display: grid; gap: 6px; align-content: start; }
.field__label { font-weight: var(--fw-title); font-size: 14px; }
.field__hint { font-size: var(--fs-caption); color: var(--ink-secondary); min-height: 0; }
.field__hint:empty { display: none; }
.field__error { font-size: var(--fs-caption); color: var(--status-blocked); font-weight: 400; min-height: 1.2em; line-height: 1.2; }
.field--error .input { border-color: var(--status-blocked); }

.checkbox {
  display: inline-flex; align-items: center; gap: var(--space-1);
  min-height: 44px; cursor: pointer; margin-top: -8px; margin-bottom: var(--space-1);
}
.checkbox input { width: 18px; height: 18px; accent-color: var(--ink-primary); }
/* В диалоге чекбокс встаёт в общий ритм полей, пояснение под ним — на уровне текста метки */
.dialog__body .checkbox { margin: 0; }
.dialog__body .checkbox + .caption { margin-top: -14px; padding-left: 26px; }

.confirm {
  margin: 0 28px;
  padding: var(--space-2);
  border-radius: var(--radius-button);
  background: var(--status-amber-tint);
  color: var(--ink-primary);
  display: grid; gap: var(--space-2);
}
.confirm[hidden] { display: none; }
.confirm__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-1); }

.form-error { color: var(--status-blocked); margin-top: var(--space-2); }
.form-error:empty { display: none; }

/* ---------- вход ---------- */

.login { padding-block: var(--space-6); }
.login__panel {
  max-width: 480px; margin: 0 auto;
  background: var(--surface-white);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  padding: var(--space-4);
  display: grid; gap: var(--space-2);
}
@media (max-width: 479px) { .login__panel { padding: var(--space-3); } }
.login-list { display: grid; gap: var(--space-1); }
.login-user {
  width: 100%; text-align: left;
  display: grid; gap: 2px;
  padding: 14px var(--space-2);
  border: 1px solid var(--line-control);
  border-radius: var(--radius-button);
  background: var(--surface-white);
  cursor: pointer;
  transition: border-color .15s;
}
.login-user:hover { border-color: var(--line-control-hover); }
.login-user__name { font-weight: var(--fw-title); }
.login-user__note { font-size: var(--fs-caption); color: var(--ink-secondary); }

.login-form { display: grid; gap: var(--space-2); }
.login-submit { width: 100%; }
.login-show-password { justify-self: start; }
.login-forgot { padding-top: var(--space-1); }

/* ---------- команда ---------- */

/* Компактные, близкие к квадрату карточки участников команды: фото, имя, контакты
   (ТЗ 09-2, §4) — это именно команда пространства, не карточки подрядчиков. */
.team-grid {
  display: grid; gap: var(--space-2); list-style: none; margin: 0; padding: 0;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
@media (max-width: 479px) {
  .team-grid { grid-template-columns: 1fr; }
}
.team-card {
  display: grid; gap: var(--space-half); justify-items: center; text-align: center;
  padding: var(--space-3) var(--space-2) 20px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  background: var(--surface-white);
}
.team-card__photo-wrap { position: relative; cursor: pointer; display: inline-block; }
.team-card__photo {
  width: 64px; height: 64px; border-radius: 50%;
  object-fit: cover; background: var(--canvas);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 400; color: var(--ink-secondary);
  margin-bottom: var(--space-1);
}
.team-card__photo-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.team-card__main { display: grid; gap: 2px; justify-items: center; }
.team-card__name { font-weight: var(--fw-title); }
.team-card__email { color: var(--ink-secondary); overflow-wrap: anywhere; }
.team-card__seen { margin: 0; }
.team-card__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-1); }
/* Роль, право создавать свадьбы, сброс пароля и отключение — рабочие функции, но не в видимой
   части карточки (ТЗ 09-2, §4): открываются через <details>, а не всегда на виду. */
.team-card__details { width: 100%; margin-top: var(--space-half); text-align: left; }
.team-card__summary { cursor: pointer; font-size: var(--fs-caption); font-weight: 400; color: var(--ink-secondary); text-align: center; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--line-control); }
.team-card__settings { display: grid; gap: var(--space-1); margin-top: var(--space-1); }

/* ---------- обзор проекта (минимальный) ---------- */

.back { margin-bottom: var(--space-2); }
.back a {
  display: inline-flex; min-height: 44px; align-items: center;
  font-size: 14px; color: var(--ink-secondary); text-decoration: none;
  transition: color .15s;
}
.back a:hover { color: var(--ink-primary); }

.overview-head { margin-bottom: var(--space-4); }
/* Обложка проекта — hero в эмоциональном режиме брендбука: широкая полоса, скругление 32 */
.overview-cover {
  display: block; width: 100%; height: clamp(160px, 22vw, 280px); object-fit: cover;
  border-radius: var(--radius-hero); margin-bottom: var(--space-3);
  background: var(--surface-muted);
}
@media (max-width: 599px) { .overview-cover { border-radius: var(--radius-card); } }
.overview-head__row {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-2);
}
.overview-head .overline { margin-bottom: var(--space-1); }
.overview-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2);
  margin-top: var(--space-2);
}
.overview-meta__text { overflow-wrap: anywhere; }
.overview-meta__rel { color: var(--ink-secondary); }

/* margin-left: auto держит блок действий у правого края даже когда .overview-head__row
   переносит его на отдельную строку (единственный элемент иначе прижимается к началу) */
.overview-head__actions { display: flex; align-items: center; gap: var(--space-1); margin-left: auto; }
.project-menu { position: relative; flex: none; }
.project-menu__toggle { font-size: 20px; letter-spacing: 1px; }
.project-menu__panel {
  position: absolute; right: 0; top: calc(100% + var(--space-1)); z-index: 20;
  min-width: 220px;
  padding: var(--space-1);
  background: var(--surface-white);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-button);
  box-shadow: var(--shadow-float);
}
.project-menu__panel[hidden] { display: none; }
.project-menu__item {
  display: block; width: 100%; text-align: left;
  min-height: 44px; padding: 0 var(--space-2);
  border: 0; border-radius: var(--radius-field);
  background: transparent; font-weight: 400; cursor: pointer;
}
.project-menu__item:hover { background: var(--surface-muted); }

/* «Настройка свадьбы» (ТЗ 07, §4) — прогресс-бар и список незавершённых шагов; исчезает, когда
   все шаги готовы (см. setupSection в overview.js). */
.setup-block {
  background: var(--surface-white);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  padding: 20px var(--space-3) 12px;
  margin-bottom: var(--space-2);
}
.setup-block__title { font-size: var(--fs-section); font-weight: var(--fw-heading); letter-spacing: -0.01em; line-height: 1.25; margin-bottom: 12px; }
.setup-block__bar {
  height: 2px; border-radius: var(--radius-pill);
  background: var(--surface-muted);
  margin-bottom: var(--space-1);
  overflow: hidden;
}
.setup-block__fill { height: 100%; width: 0; background: var(--olive-ink); border-radius: var(--radius-pill); }
.setup-block__fill--20 { width: 20%; }
.setup-block__fill--40 { width: 40%; }
.setup-block__fill--60 { width: 60%; }
.setup-block__fill--80 { width: 80%; }
.setup-block__fill--100 { width: 100%; }
.setup-block__list { display: grid; }
.setup-step {
  display: flex; align-items: center; gap: 12px;
  min-height: 52px;
}
.setup-step + .setup-step { border-top: 1px solid var(--line-hair); }
.setup-step .shape--planned { color: var(--ink-secondary); }
.setup-step--done .shape--done { color: var(--olive-ink); }
.setup-step--done { color: var(--ink-secondary); }
.setup-step__text { flex: 1 1 auto; overflow-wrap: anywhere; }
.setup-step .btn { margin-left: auto; flex: none; }

/* Пустое состояние внутри раздела (например, «Требует внимания» без задач) с кнопкой действия
   рядом с текстом, а не отдельным блоком. */
.empty-inline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* Краткие числа (обзор проекта §1.2): каждое — переход к своему разделу, не отдельная метрика */
/* Сводка — одна полоса с тонкими разделителями, а не три отдельные коробки */
.stat-row {
  display: flex;
  margin-bottom: var(--space-2);
  overflow-x: auto;
  background: var(--surface-white);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
}
.stat {
  display: flex; flex-direction: row; align-items: baseline; gap: 10px;
  min-height: 64px; min-width: 120px;
  padding: 14px var(--space-3);
  background: transparent;
  border: 0;
  text-decoration: none; color: var(--ink-primary);
  flex: 1 1 0;
  cursor: pointer; font: inherit;
  transition: background-color .15s;
}
.stat + .stat { border-left: 1px solid var(--line-hair); }
.stat:hover { background: var(--canvas); }
.stat:focus-visible { outline-offset: -4px; border-radius: var(--radius-card); }
.stat__num { font-size: 28px; font-weight: var(--fw-display); line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
@media (max-width: 599px) {
  .stat { flex-direction: column; gap: 2px; min-width: 96px; padding: 12px var(--space-2); }
  .stat__num { font-size: 24px; }
}
.stat__label { font-size: var(--fs-caption); color: var(--ink-secondary); }
/* Умеренные акценты по смыслу показателя (ТЗ 09-2, §2), только когда есть что подсветить */
.stat--attention .stat__num { color: var(--accent-ink); }
.stat--progress .stat__num { color: var(--olive-ink); }

/* Когда нет ни одной незавершённой задачи, «В работе»/«Ждём ответа» — незачем в двух пустых
   блоках повторять то же самое, что уже сказано в «Требует внимания» (§4.3). */
.zones-collapsed { margin-bottom: var(--space-3); }

.zones { display: grid; gap: var(--space-2); margin-bottom: var(--space-2); }
@media (min-width: 1024px) { .zones { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.zone {
  background: var(--surface-white);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  padding: 20px var(--space-3) 12px;
  margin-bottom: var(--space-2);
}
@media (max-width: 599px) {
  .zone, .setup-block, .budget-total { padding-inline: 20px; }
  .task-row__link, .budget-line { padding-inline: 20px; }
}
.zone:focus { outline: 2px solid var(--ink-primary); outline-offset: 2px; }
.zone__title { font-size: var(--fs-section); font-weight: var(--fw-heading); letter-spacing: -0.01em; line-height: 1.25; margin-bottom: 4px; }

/* Пустая зона — одна лёгкая строка, а не карточка (ТЗ 09-2, §2): без фона и рамки — иначе
   несколько пустых блоков подряд визуально дублируют то, что уже сказано счётчиками сводки. */
.zone--compact {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2);
  padding: var(--space-1) 0;
  margin-bottom: var(--space-1);
  background: none; border: 0;
}
/* Пустая зона рядом с полноценной в двухколоночной раскладке — заголовок на одной линии с соседним */
@media (min-width: 1024px) { .zones > .zone--compact { padding-top: 21px; } }
.zone__title--inline { font-size: var(--fs-body); font-weight: var(--fw-title); letter-spacing: 0; margin-bottom: 0; white-space: nowrap; }
.zone--compact .empty-inline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
.zone--compact p { margin: 0; }
.zone__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-2);
}
.zone__head .zone__title { margin-bottom: 0; }
.zone__head { margin-bottom: 12px; }
.zone__head-actions { display: flex; flex-wrap: wrap; gap: var(--space-1); }
#section-requires .attention__controls,
#section-requires .btn--small { margin-top: var(--space-2); }
.plan-group + .plan-group { margin-top: var(--space-3); }
.plan-group .overline { margin-bottom: var(--space-1); }
.plan-item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: var(--space-1) 0;
  border-top: 1px solid var(--line-hair);
}
.plan-item > span:first-child { overflow-wrap: anywhere; }
.plan-item--focus { background: var(--accent-tint); margin-inline: calc(-1 * var(--space-1)); padding-inline: var(--space-1); }

/* Пояснение расхождения счётчика и строк, когда часть задач блока уже показана выше (v2 §0) */
.shown-above { margin-top: var(--space-1); padding-bottom: var(--space-1); font-size: 14px; color: var(--ink-secondary); }
.shown-above:first-child { margin-top: 0; }

/* Внутри блока задач, но с явным отступом от карточки подрядчиков ниже (ТЗ 09-2, §2) —
   не должна казаться прилипшей к следующей секции. */
.overview-alltasks { text-align: center; margin: var(--space-3) 0 var(--space-6); }

/* ---------- панель задачи ---------- */

.task-panel {
  background: var(--surface-white);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
  display: grid; gap: var(--space-2);
}
.task-panel:focus { outline: 2px solid var(--ink-primary); outline-offset: 2px; }
.task-panel__project-link { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.task-panel__title { font-size: var(--fs-heading); font-weight: var(--fw-heading); letter-spacing: -0.015em; line-height: 1.2; overflow-wrap: anywhere; }
.task-panel__chips { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.task-panel__facts { margin: 0; display: grid; gap: var(--space-1); }
.task-panel__fact { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--space-2); }
.task-panel__fact dt { color: var(--ink-secondary); }
.task-panel__fact dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 599px) { .task-panel__fact { grid-template-columns: minmax(0, 1fr); gap: 0; } }
.task-panel__status:empty { display: none; }
.task-panel__status { color: var(--status-blocked); }
.task-panel__actions { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.task-missing { margin-bottom: var(--space-3); }
.task-missing:focus { outline: 2px solid var(--ink-primary); outline-offset: 2px; }
.task-missing__actions { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.plan-item__link { min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; overflow-wrap: anywhere; }
.plan-item__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.plan-item__link[aria-current] { font-weight: var(--fw-title); }

/* ---------- задачи проекта: список ---------- */

/* Поиск и статус — видны всегда; остальные условия — под «Фильтры» (ТЗ 09, §3.3): список задач
   не должен начинаться с двух рядов контролов, которые доминируют над содержимым. */
/* Без серой подложки: контролы стоят прямо на фоне и не превращаются в ещё один «раздел» */
.task-filters {
  display: grid; gap: var(--space-1);
  margin: 20px 0 var(--space-2);
}
.task-filters__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
.task-filters__more { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); padding-top: 12px; border-top: 1px solid var(--line-hair); }
.task-filters__more[hidden] { display: none; }
.field--inline { display: flex; align-items: center; gap: var(--space-1); }
.field--inline .field__label { font-size: var(--fs-caption); color: var(--ink-secondary); white-space: nowrap; }
.field--inline[hidden] { display: none; }
.checkbox--filter {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 var(--space-1);
  cursor: pointer; margin: 0;
}
.checkbox--filter[hidden] { display: none; }
.checkbox--filter input { width: 18px; height: 18px; accent-color: var(--ink-primary); }
.task-matched { margin-bottom: 12px; }
@media (max-width: 767px) {
  .task-filters__row { flex-direction: column; align-items: stretch; }
  .task-filters__more { flex-direction: column; align-items: stretch; }
  .task-filters .search { width: auto; }
  .field--inline { justify-content: space-between; }
  .field--inline .select { flex: 1; max-width: none; }
}

.task-list { display: grid; border: 1px solid var(--card-border); border-radius: var(--radius-card); overflow: hidden; background: var(--surface-white); }
.task-row + .task-row { border-top: 1px solid var(--line-hair); }
.task-row__link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  min-height: 56px;
  padding: 12px var(--space-3);
  text-decoration: none;
  color: inherit;
  transition: background-color .15s;
}
.task-row__link:hover { background: var(--canvas); }
.task-row__link:focus-visible { outline: 2px solid var(--ink-primary); outline-offset: -2px; }
.task-row__chips { display: flex; flex-wrap: wrap; gap: 4px; }
.task-row__title { font-weight: var(--fw-title); overflow-wrap: anywhere; }
.task-row__meta { font-size: var(--fs-caption); color: var(--ink-secondary); overflow-wrap: anywhere; }
.task-row__arrow { color: var(--ink-secondary); font-size: 14px; }
@media (max-width: 767px) {
  .task-row__link { grid-template-columns: minmax(0, 1fr); }
  .task-row__arrow { display: none; }
}

/* ---------- диалог задачи ---------- */

.field-row { display: flex; gap: var(--space-1); }
.field-row .field { flex: 1; min-width: 0; }
@media (max-width: 479px) {
  /* gap:0 раньше сжимал соседние поля (например, цену и валюту) вплотную друг к другу при
     переносе в колонку — на мобильном между ними всё равно нужен зазор (ТЗ 09-2, §1/§4). */
  .field-row { flex-direction: column; gap: var(--space-1); }
}

/* ---------- диалог «Новая свадьба» ---------- */

.title-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1); margin-top: -6px; }
.title-preview { color: var(--ink-secondary); overflow-wrap: anywhere; }

.radio-pills { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.radio-pill {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 38px; padding: 0 14px;
  border: 1px solid var(--line-control); border-radius: var(--radius-field);
  font-size: 14px;
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.radio-pill:hover { border-color: var(--line-control-hover); }
.radio-pill:has(input:focus-visible) { outline: 2px solid var(--ink-primary); outline-offset: 2px; }
/* Мягкий фирменный оранжевый — выбранная дата не спорит с основной (тёмной) кнопкой (ТЗ 09, §1). */
.radio-pill:has(input:checked) { background: var(--accent-tint); color: var(--accent-ink); border-color: var(--accent-line); font-weight: var(--fw-title); }
.radio-pill input { position: absolute; opacity: 0; width: 0; height: 0; }

.disclosure-toggle {
  display: flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0; margin-top: var(--space-1);
  background: none; border: none; color: var(--ink-primary); font-weight: var(--fw-title); text-align: left; cursor: pointer;
}
.disclosure-toggle__caret { display: inline-block; transition: transform 0.15s ease; }
.disclosure-toggle--open .disclosure-toggle__caret { transform: rotate(90deg); }
.disclosure-body { display: grid; gap: var(--space-1); margin-top: var(--space-1); }

/* ---------- контакты (диалог редактирования свадьбы) ---------- */

.contacts-list { display: grid; gap: var(--space-2); margin-bottom: var(--space-1); }
.contact-row {
  display: grid; gap: var(--space-1);
  padding: var(--space-2);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-button);
  position: relative;
}
.contact-row .icon-btn { position: absolute; top: 4px; right: 4px; }

/* ---------- диалог «Дата свадьбы изменилась» ---------- */

.due-review-list { display: grid; gap: var(--space-1); list-style: none; margin: 0; padding: 0; }
.due-review-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-2);
  padding: var(--space-1);
  border-bottom: 1px solid var(--line-hair);
}
.due-review-row__check { min-height: 0; margin: 0; flex: 1 1 auto; min-width: 160px; }
.due-review-row__dates { color: var(--ink-secondary); font-size: var(--fs-caption); }
.due-review-row__manual { color: var(--status-amber-ink); flex-basis: 100%; }
textarea.input { min-height: 88px; padding: var(--space-1) var(--space-2); resize: vertical; }

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

.checklist-dialog .dialog__body { display: block; }

/* Форма подрядчика — пары полей в ряд, компактнее и без разъезда на mobile (ТЗ 09-2, §4) */
.vendor-form .dialog__body { gap: var(--space-1); }
.vendor-form textarea.input { min-height: 60px; }
.vendor-form__hint { margin: 0; }
.checklist-note { margin: 0 0 var(--space-2); }
.checklist-groups { display: grid; gap: var(--space-3); }
.checklist-group__title { margin-bottom: var(--space-1); }
.checklist-list { display: grid; gap: var(--space-1); }
.checklist-item {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-1) var(--space-2);
  min-height: 44px;
}
.checklist-item--added { color: var(--ink-secondary); }
.checklist-item__check { margin: 0; min-height: 0; }
.checklist-item__status { font-size: var(--fs-caption); }
.checklist-item__rule { color: var(--ink-secondary); margin-right: auto; }
.checklist-item__date { width: 160px; }
@media (max-width: 479px) {
  .checklist-item { flex-direction: column; align-items: flex-start; }
  .checklist-item__date { width: 100%; }
}

/* summary как заголовок раздела в панели выбора подрядчиков (<details> вместо <div>) */
.checklist-group > summary.checklist-group__title {
  cursor: pointer; list-style: none; margin-bottom: var(--space-1);
  min-height: 32px; display: flex; align-items: center;
}
.checklist-group > summary::-webkit-details-marker { display: none; }
.checklist-group > summary::before { content: '▸'; margin-right: 6px; font-size: 10px; color: var(--ink-secondary); }
.checklist-group[open] > summary::before { content: '▾'; }

/* ---------- подрядчики ---------- */

/* Строки подрядчиков — список с тонкими разделителями, а не карточки внутри карточки */
.vendor-list { display: grid; }
.vendor-row {
  padding: 14px 0;
  background: var(--surface-white);
  display: grid; gap: 4px;
}
.vendor-row + .vendor-row { border-top: 1px solid var(--line-hair); }
.vendor-row__main { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.vendor-row__name { font-weight: var(--fw-title); overflow-wrap: anywhere; }
.vendor-row__price { margin-left: auto; font-variant-numeric: tabular-nums; }
.vendor-row__price--empty { color: var(--ink-secondary); font-size: var(--fs-caption); font-weight: 400; }
.vendor-row__meta { color: var(--ink-secondary); font-size: var(--fs-caption); overflow-wrap: anywhere; margin: 0; }
.vendor-row__note { color: var(--ink-secondary); overflow-wrap: anywhere; margin: 0; }
.vendor-row__actions { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: 6px; }

/* ---------- смета ---------- */

.budget-total {
  padding: 20px var(--space-3);
  border-radius: var(--radius-card);
  background: var(--surface-white);
  border: 1px solid var(--card-border);
  margin-bottom: var(--space-2);
}
.budget-total__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.budget-total__label { font-size: var(--fs-section); font-weight: var(--fw-heading); letter-spacing: -0.01em; }
.budget-total__value { font-size: var(--fs-heading); font-weight: var(--fw-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--accent-ink); }
.budget-total__missing { color: var(--status-amber-ink); margin-top: var(--space-half); }
/* Бюджет пары — справочно, отдельным блоком под итогом сметы (ТЗ 09-2, §3) */
.budget-total__target { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-hair); }
.budget-total__target-value { font-size: var(--fs-section); font-weight: var(--fw-display); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--sky-ink); }
.budget-total__diff { margin-top: 2px; }
.budget-total__diff--ok { color: var(--olive-ink); }
.budget-total__diff--over { color: var(--accent-ink); }
/* Кнопка «Добавить расход» — заметный отступ от сметы сверху и списка строк снизу, чтобы не
   казалось прилипшей к соседним блокам (ТЗ 09-2, §3). */
.budget-add { margin: var(--space-1) 0 var(--space-4); }

.budget-group + .budget-group { margin-top: var(--space-4); }
.budget-group__title { margin-bottom: var(--space-1); }
.budget-list { display: grid; border: 1px solid var(--card-border); border-radius: var(--radius-card); overflow: hidden; background: var(--surface-white); }
.budget-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2);
  padding: 12px var(--space-3);
}
.budget-line + .budget-line { border-top: 1px solid var(--line-hair); }
/* Видимая подпись «Учитывать в итоге» (ТЗ 09, §4) — не только доступное имя для скринридера. */
.budget-line__include { margin: 0; font-size: var(--fs-caption); color: var(--ink-secondary); flex: none; }
.budget-line__include input { width: 18px; height: 18px; accent-color: var(--ink-primary); }
.budget-line__main { flex: 1 1 220px; min-width: 0; display: grid; gap: 2px; }
.budget-line__title { border: 1px solid transparent; border-radius: 8px; background: transparent; padding: 4px 6px; margin-left: -7px; font-weight: var(--fw-title); }
.budget-line__title:hover, .budget-line__title:focus { border-color: var(--line-strong); background: var(--surface-white); }
.budget-line__source { color: var(--ink-secondary); padding-left: 0; }
.budget-line__note { color: var(--status-amber-ink); font-size: var(--fs-caption); margin: 0; overflow-wrap: anywhere; }
.budget-line__amount-wrap { display: flex; align-items: center; gap: 6px; flex: none; }
.budget-line__amount { width: 120px; text-align: right; }
@media (max-width: 599px) {
  .budget-line { flex-direction: column; align-items: stretch; }
  .budget-line__amount-wrap { justify-content: flex-end; }
}

/* =====================================================================
   v2.2 — компактная раскладка и обложки
   ===================================================================== */

/* ---------- список мероприятий: плотнее, до трёх колонок ---------- */
.cards { gap: var(--space-2); }
@media (min-width: 1200px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card__top--photo { min-height: 148px; padding: 12px; }
.card__body { padding: 14px 20px 0; gap: 6px; }
.card__title { font-size: 18px; margin-bottom: 2px; }
.card__actions { padding: 2px 20px 8px; }
.card__urgent { padding: 10px 14px; }
.card__urgent-text, .card__work { font-size: 14px; }
.card__top--photo .dateblock { padding: 8px 12px 8px 14px; }
.card__top--photo .dateblock__day { font-size: 38px; }

/* На пастельных фото — лёгкая светлая вуаль вместо затемнения: стекло остаётся контрастным,
   а цвет снимка не «грязнится» */
.card__top--photo::after {
  background: linear-gradient(180deg, rgba(247, 247, 247, 0) 55%, rgba(30, 30, 30, 0.14) 100%);
}

/* ---------- обзор проекта: hero с обложкой ---------- */

.overview-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; gap: var(--space-2);
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  min-height: 300px;
  padding: var(--space-3);
  margin-bottom: var(--space-3);
  border-radius: var(--radius-hero);
  background: var(--surface-white);
  border: 1px solid var(--card-border);
}
@media (min-width: 900px) {
  .overview-hero { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); padding: var(--space-4); min-height: 320px; }
}
.overview-hero--photo { border: 0; background: var(--surface-muted); }
.overview-hero__photo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
}
/* Светлая вуаль слева — тёмный заголовок читается на пастельном фото (брендбук: «чистая зона
   под заголовок»), правая часть снимка остаётся открытой */
.overview-hero--photo::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(247, 247, 247, 0.82) 0%, rgba(247, 247, 247, 0.55) 38%, rgba(247, 247, 247, 0) 68%);
}
@media (max-width: 899px) {
  .overview-hero--photo::before {
    background: linear-gradient(180deg, rgba(247, 247, 247, 0.2) 0%, rgba(247, 247, 247, 0.78) 55%, rgba(247, 247, 247, 0.9) 100%);
  }
}

.overview-hero__main { display: grid; gap: 12px; align-content: end; min-width: 0; }
.overview-hero__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.overview-hero__tag {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: var(--radius-pill);
  font-size: 12px; line-height: 16px; font-weight: 500;
  background: rgba(255, 255, 255, 0.72); color: var(--ink-primary);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.overview-hero--photo .overview-hero__tags .chip {
  background: rgba(255, 255, 255, 0.72); color: var(--ink-primary);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.overview-hero__title { max-width: 14ch; }
.overview-hero__meta { color: var(--ink-primary); font-weight: 500; }

.overview-hero__actions { position: absolute; top: 12px; right: 12px; }
.overview-hero--photo .overview-hero__actions .icon-btn {
  background: rgba(255, 255, 255, 0.72); color: var(--ink-primary);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}

/* Панель справа — тёмное стекло #1E1E1E 48 %: дата + сводка */
.overview-hero__panel {
  display: grid; gap: var(--space-2);
  padding: 20px;
  border-radius: var(--radius-card);
  background: var(--surface-white);
  border: 1px solid var(--card-border);
}
.overview-hero--photo .overview-hero__panel {
  background: var(--glass-bg);
  backdrop-filter: blur(24px) saturate(1.1); -webkit-backdrop-filter: blur(24px) saturate(1.1);
  border: 1px solid var(--glass-border);
  color: var(--glass-ink);
}
.hero-date { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: end; }
.hero-date__day { grid-row: span 2; font-size: 64px; line-height: 0.85; font-weight: 500; letter-spacing: -0.04em; }
.hero-date__month { font-weight: 500; }
.hero-date__rel { font-size: var(--fs-caption); opacity: .74; }

.overview-hero__panel .stat-row {
  margin: 0; border-radius: 0; background: none; border: 0;
  border-top: 1px solid var(--line-hair);
  padding-top: 12px; overflow: visible;
}
.overview-hero--photo .overview-hero__panel .stat-row { border-top-color: var(--glass-line); }
.overview-hero__panel .stat {
  flex-direction: column; align-items: flex-start; gap: 2px;
  min-width: 0; min-height: 44px; padding: 0 12px 0 0;
  color: inherit; border-radius: 8px;
}
.overview-hero__panel .stat + .stat { border-left: 0; padding-left: 12px; box-shadow: inset 1px 0 0 var(--line-hair); }
.overview-hero--photo .overview-hero__panel .stat + .stat { box-shadow: inset 1px 0 0 var(--glass-line); }
.overview-hero__panel .stat:hover { background: none; opacity: .8; }
.overview-hero__panel .stat__num { font-size: 26px; }
.overview-hero__panel .stat__label { font-size: 12px; line-height: 1.3; }
.overview-hero--photo .overview-hero__panel .stat__label { color: var(--glass-ink-2); }
.overview-hero--photo .stat--attention .stat__num { color: var(--glass-attention); }
.overview-hero--photo .stat--progress .stat__num { color: var(--glass-progress); }
.overview-hero--photo .overview-hero__panel .stat:focus-visible { outline-color: var(--glass-ink); }

/* ---------- обзор: рабочий режим в две колонки ---------- */
.overview-grid { display: grid; gap: var(--space-2); align-items: start; }
@media (min-width: 1024px) {
  .overview-grid { grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr); }
  .overview-grid__side { position: sticky; top: var(--space-2); }
}
.overview-grid__main, .overview-grid__side { display: grid; gap: var(--space-2); min-width: 0; }
.overview-grid .zone, .overview-grid .setup-block { margin-bottom: 0; }
.overview-grid .zones { grid-template-columns: minmax(0, 1fr); margin-bottom: 0; }
.overview-grid .zones > .zone--compact { padding-top: var(--space-1); }
.overview-grid .zone--compact { margin-bottom: 0; padding-inline: 4px; }
.overview-grid .overview-alltasks { margin: var(--space-1) 0 0; text-align: left; }

/* Колонка уже — строки задач всегда в столбик: статус / название / мета */
.overview-grid .attention-row__link {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "chip arrow" "title arrow" "meta arrow";
}
/* Боковая колонка: заголовки и действия подрядчиков компактнее */
.overview-grid__side .zone__head { flex-direction: column; align-items: flex-start; }
.overview-grid__side .setup-step .btn { min-height: 32px; }

/* Варианты кадрирования обложки из базы (см. coverVariant в covers.js) */
.cover--flip { scale: -1 1; }
.cover--top { object-position: 50% 20%; }
.cover--bottom { object-position: 50% 80%; }
.overview-hero__panel .stat { text-align: left; }
@media (max-width: 899px) {
  .overview-hero { padding: 20px; min-height: 0; }
  .overview-hero__tags { padding-right: 52px; }   /* не заходить под кнопку меню */
}

/* =====================================================================
   v2.3 — выравнивание и ритм
   Правила: одна высота контролов в ряду; текст внутри карточек начинается с одной вертикали
   (24 px от края на desktop, 20 px на телефоне); элементы в сетке выровнены по верху и низу.
   ===================================================================== */

/* ---------- один ряд — одна высота (40 px) ---------- */
.toolbar .input, .task-filters .input,
.toolbar .tab, .tabs .tab,
.task-filters .btn, .toolbar .btn { min-height: var(--control-h-compact); height: var(--control-h-compact); }
.toolbar .select, .task-filters .select { padding-block: 0; }
.tabs { margin-bottom: 0; }
.task-filters__row { gap: var(--space-1); }
.field--inline { gap: var(--space-1); }
.field--inline .field__label { margin-left: var(--space-1); }

/* ---------- заголовок страницы: кнопка по центру блока заголовка ---------- */
.page-head { align-items: center; }

/* ---------- карточки мероприятий: ровная сетка ---------- */
.cards { align-items: stretch; }
.card, .card__inner { height: 100%; }
.card__body { flex: 1 1 auto; }
.card__actions { margin-top: auto; padding-top: var(--space-1); }
/* Статус и дата стоят на одной нижней линии фото */
.card__top--photo > .chip { align-self: flex-end; }
.card__top--photo { padding: 12px; }
.card__top:not(.card__top--photo) { align-items: flex-end; }

/* ---------- обзор: пустые зоны на той же вертикали, что текст в карточках ---------- */
.overview-grid .zone--compact { padding: 0 var(--space-3); margin: 0; min-height: 44px; }
.overview-grid .zones > .zone--compact { padding-top: 0; }
.overview-grid .overview-alltasks { margin: 0; }
.overview-grid__main > .overview-alltasks { padding-top: var(--space-1); }
.shown-above { padding-bottom: 12px; }

/* Метки в hero — одной высоты и одного радиуса */
.overview-hero__tags .chip,
.overview-hero__tag { height: 24px; padding: 0 10px; font-size: 12px; line-height: 1; align-items: center; }

/* Панель в hero: первая колонка сводки без отступа слева, остальные — ровно 16 px */
.overview-hero__panel .stat { padding: 0 var(--space-2) 0 0; }
.overview-hero__panel .stat + .stat { padding-left: var(--space-2); }
.overview-hero__panel .stat-row { padding-top: var(--space-2); }
.hero-date { column-gap: var(--space-2); }

/* ---------- заголовки зон: одинаковый отступ до содержимого ---------- */
.zone__title, .setup-block__title { margin-bottom: 12px; }
.zone__head { margin-bottom: 12px; gap: 12px; }
.zone__head .zone__title { margin-bottom: 0; }
.attention__list--light .attention-row:first-child .attention-row__link { padding-top: 4px; }
.setup-block__bar { margin-bottom: 4px; }

/* ---------- список задач: названия в одну колонку, а не «лесенкой» ---------- */
@media (min-width: 900px) {
  .task-row__link { grid-template-columns: 240px minmax(0, 1fr) auto 16px; }
  .attention-row__link { grid-template-columns: 200px minmax(0, 1fr) minmax(0, 260px) 16px; }
}
.task-row__arrow, .attention-row__arrow { justify-self: end; }
.task-row__meta { text-align: right; }
@media (max-width: 899px) { .task-row__meta { text-align: left; } }

/* ---------- смета: сумма и подпись валюты на одной линии ---------- */
.budget-total__row { align-items: center; }
.budget-line { align-items: center; }
.budget-line__include { align-self: center; }

/* ---------- подрядчики: цена по базовой линии имени ---------- */
.vendor-row__main { align-items: baseline; }
.vendor-row__main .chip { align-self: center; }

/* ---------- диалог: равный шаг между полями ---------- */
.dialog__body { gap: var(--space-2); }
.field__error:empty { display: none; }  /* пустые строки ошибок давали неровные промежутки */
.title-row { margin-top: calc(-1 * var(--space-1)); }
.dialog__body .checkbox + .caption { margin-top: calc(-1 * var(--space-2) + 2px); }

/* ---------- команда: карточки одной высоты, действия внизу ---------- */
.team-grid { align-items: stretch; }
.team-card { align-content: start; }
.team-card__details { margin-top: auto; }

@media (max-width: 599px) {
  .overview-grid .zone--compact { padding-inline: 20px; }
  .overview-hero__panel .stat { padding-right: 12px; }
  .overview-hero__panel .stat + .stat { padding-left: 12px; }
}
/* Фото-обложка: стекло на той же вертикали, что и текст карточки (20 px) */
.card__top--photo { padding: 16px 20px; }
/* Пустые зоны: 24 px + 1 px рамки соседних карточек */
.overview-grid .zone--compact { padding-inline: calc(var(--space-3) + 1px); }
@media (max-width: 599px) { .overview-grid .zone--compact { padding-inline: 21px; } }
/* Пустая зона: заголовок и текст на одной базовой линии */
.zone--compact, .zone--compact .empty-inline { align-items: baseline; }
.zone--compact { padding-block: 10px; min-height: 0; }
.checkbox input, .checkbox--filter input { margin: 0; }
/* Телефон: вкладки в одну строку с горизонтальной прокруткой, а не переносом */
@media (max-width: 767px) {
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: 1 0 auto; justify-content: center; }
  .task-filters__row { display: grid; grid-template-columns: 1fr 1fr; }
  .task-filters__row > .search, .task-filters__row > .field--inline { grid-column: 1 / -1; }
}
@media (max-width: 767px) { .field--inline .field__label { margin-left: 0; } }

/* ---------- точечное ТЗ, п. 2: пустая зона снова видимая плашка ---------- */
/* Раньше без фона/рамки текст пустого состояния («Сейчас нет задач…», «Задач со сроком нет»)
   визуально не читался как часть блока с заголовком над ним — плавал сам по себе на странице.
   Возвращаем обычные токены карточки (не новые), которые .zone уже использует. */
.zone--compact {
  background: var(--surface-white);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  padding: var(--space-2) var(--space-3);
  min-height: 0;
}
.overview-grid .zone--compact,
.zones > .zone--compact {
  padding: var(--space-2) var(--space-3);
  padding-top: var(--space-2);
}
@media (max-width: 599px) {
  .overview-grid .zone--compact { padding: var(--space-2) 20px; }
}