/* ============================================================
   YOMI Profit — раскладка веб-кабинета продюсера (светлая тема,
   решение Миши 05.08.2026 — DECISIONS). Здесь только «мы живём в
   браузере на большом экране»: центрированная карточка входа,
   верхняя панель, ширина колонки.
   Цвета, отступы и шрифты — исключительно через var(--токен).
   ============================================================ */

.y-cab {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
}

/* ── Экраны входа: одна карточка по центру ──────────────────── */

.y-cab__auth {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) var(--space-4);
}

.y-cab__card {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-8);
  background: var(--surface);
  border: var(--hairline);
  border-radius: var(--radius-lg);
}

.y-cab__title {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

.y-cab__lead {
  color: var(--text-secondary);
  font-size: var(--text-body);
  margin: 0;
}

.y-cab__hint {
  color: var(--text-muted);
  font-size: var(--text-caption);
  margin: 0;
}

.y-cab__link {
  color: var(--link);
}

.y-cab__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.y-cab__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: var(--hairline);
}

/* Согласие: текст читается до галочки, поэтому блок отделён рамкой,
   а не спрятан под ссылку */
.y-cab__consent {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--surface-sunken);
  border: var(--hairline);
  border-radius: var(--radius-md);
  max-height: 200px;
  overflow-y: auto;
}

.y-cab__consent-text {
  color: var(--text-secondary);
  font-size: var(--text-caption);
  line-height: 1.5;
  margin: 0;
}

/* ── Кабинет: верхняя панель и рабочая область ──────────────── */

.y-cab__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-bottom: var(--hairline);
}

.y-cab__topbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.y-cab__user {
  color: var(--text-secondary);
  font-size: var(--text-caption);
}

.y-cab__body {
  flex: 1 1 auto;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* ── Очередь смен: фильтры, боковая панель разбора ───────────
   Показатели рисует .y-kpistrip, таблицу — .y-tbl (обе в
   components.css): свои .y-kpi/.y-table были заменены при
   переработке Этапа 3 и здесь больше не живут. */

.y-cab__work {
  flex: 1 1 auto;
  display: flex;
  align-items: stretch;
  min-height: 0;
}

.y-cab__queue {
  flex: 1 1 auto;
  padding: var(--space-4) var(--space-6) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  overflow-x: auto;
}

.y-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Панель массовых действий над таблицей */
.y-bulk {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
  background: var(--bg-elevated);
  border: var(--hairline);
  border-radius: var(--radius-md);
}

.y-bulk__acts { display: flex; align-items: center; gap: var(--space-2); flex: 1 1 auto; min-width: 0; }
@media (max-width: 640px) { .y-bulk__acts { flex-wrap: wrap; } .y-bulk__acts .y-bulk__reason { flex-basis: 100%; max-width: none; } }
.y-bulk .y-check { flex: none; font-size: var(--text-caption); font-weight: var(--weight-semibold); white-space: nowrap; }
.y-bulk > form { display: contents; }
.y-bulk__hint {
  font-size: var(--text-caption);
  color: var(--text-secondary);
  /* подсказка не сжимается в колонку из одного слова: либо в строку,
     либо переносом на всю ширину панели */
  flex: 1 1 260px;
  min-width: 0;
}

.y-chip {
  padding: var(--space-1) var(--space-4);
  border: var(--hairline);
  border-radius: var(--radius-pill);
  font-size: var(--text-caption);
  color: var(--text-secondary);
}

.y-chip--on {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--text);
}

.y-money { font-weight: 800; font-variant-numeric: tabular-nums; }
.y-money--dim { font-weight: 600; color: var(--text-secondary); }

.y-cab__detail {
  width: 340px;
  flex: 0 0 340px;
  border-left: var(--hairline);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  overflow-y: auto;
}

.y-cab__detail-title {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  margin: 0;
}

.y-source {
  border-left: 3px solid var(--accent);
  padding-left: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.y-source__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--text-muted);
}

.y-source__text { margin: 0; color: var(--text-secondary); font-size: var(--text-caption); }

.y-comp { display: flex; flex-direction: column; }

.y-comp__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) 0;
  border-bottom: 1px dashed var(--border);
  font-size: var(--text-caption);
}

.y-comp__name { display: block; }

.y-comp__total {
  display: flex;
  justify-content: space-between;
  padding-top: var(--space-3);
  font-size: var(--text-h2);
}

@media (max-width: 900px) {
  .y-cab__work { flex-direction: column; }
  .y-cab__detail { width: 100%; flex: 1 1 auto; border-left: none; border-top: var(--hairline); }
}

.y-cab__invite {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-sunken);
  border: var(--hairline);
  border-radius: var(--radius-md);
}

/* ============================================================
   Каркас панели проекта (Этап 1 переработки, 05.08.2026).
   Донор — референс YOMI-plan: сайдбар 216px + топбар 56px.
   Экраны кабинета переезжают сюда в Этапе 3; классы выше живут
   до конца миграции.
   ============================================================ */

.y-shell {
  display: grid;
  grid-template-columns: 216px 1fr;
  grid-template-rows: 56px 1fr;
  min-height: 100vh;
}

/* Ячейка лого над сайдбаром */
.y-shell__brand {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 var(--space-4);
  border-right: var(--hairline);
  border-bottom: var(--hairline);
}

.y-shell__brand a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
}

.y-shell__brand-name {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 17px;
  line-height: 1.05;
}

.y-shell__topbar {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-6);
  border-bottom: var(--hairline);
  background: var(--bg);
}

.y-shell__sidebar {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-6) 0 var(--space-4);
  border-right: var(--hairline);
  overflow-y: auto;
}

.y-shell__main {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  overflow-x: auto;
}

/* Секция навигации: mono-uppercase eyebrow «№ 01 / …» + пункты */
.y-nav__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.y-nav__eyebrow {
  padding: 0 var(--space-4) var(--space-1);
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--text-muted);
}

.y-nav__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 9px var(--space-4);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.y-nav__item:hover { background: var(--surface); color: var(--text); }

.y-nav__item.is-active {
  background: var(--accent-soft);
  color: var(--accent-press);
  font-weight: var(--weight-bold);
}

/* Оранжевый бегунок активного пункта */
.y-nav__item.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--accent);
}

.y-nav__count {
  margin-left: auto;
  font-size: 11px;
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-secondary);
}

.y-nav__item.is-active .y-nav__count {
  background: var(--accent-soft);
  color: var(--accent-press);
}

/* Лого-кольцо и хлебная крошка топбара */
.y-logo { color: var(--accent); }

.y-crumbs {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  min-width: 0;
}

.y-crumbs a {
  color: var(--text-secondary);
  text-decoration: none;
}

.y-crumbs a:hover { color: var(--text); }

.y-crumbs__sep { color: var(--text-muted); }

.y-crumbs__here {
  font-weight: var(--weight-bold);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Внутренние отступы рабочей области под каркасом */
.y-shell__main > .y-cab__screen {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-8) var(--space-16);
}

/* ============================================================
   Экраны кабинета ВНЕ каркаса проекта (Этап 3 переработки):
   список проектов и контур входа. Каркас .y-shell сюда не
   приходит — знак, сетка карточек и подтверждение живут здесь.
   ============================================================ */

/* Знак YOMI на экранах без сайдбара (partials/cab_brand.html).
   Типографику словесной марки берём у каркаса (.y-shell__brand-name):
   марка одна, и разъезжаться ей нельзя. */
.y-cab__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
}

/* Сетка карточек проектов: колонка не уже 280px, дальше — сколько влезет.
   Одиночная карточка (форма нового проекта) встаёт в первую колонку и не
   растягивается на всю ширину экрана. */
.y-projgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-4);
  align-items: start;
}

/* Код документа — не деньги: у .y-money другая роль, и путать их нельзя.
   Разрядка и моноширинные цифры нужны, чтобы код читался с экрана
   и диктовался по буквам без ошибок. Носители: инвайт-код проекта и
   SPP-номер строки выплаты (по нему платёж узнаётся в выписке банка). */
.y-code {
  align-self: flex-start;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.12em;
  color: var(--text);
  white-space: nowrap;
}

/* Подтверждение необратимого действия раскрытием.
   Диалога confirm здесь быть не может: формы уходят обычным POST (не htmx,
   hx-confirm не сработает), а inline-JS запрещён политикой CSP. Поэтому
   подтверждение — сам шаг «раскрыть и прочитать последствия». */
.y-confirm {
  border: var(--hairline);
  border-radius: var(--radius-md);
}

.y-confirm > summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius-md);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

/* штатный маркер убираем — вместо него своя стрелка справа */
.y-confirm > summary::-webkit-details-marker { display: none; }

.y-confirm > summary::after {
  content: "";
  margin-left: auto;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease);
}

.y-confirm > summary:hover { background: var(--surface); color: var(--text); }

.y-confirm[open] > summary {
  color: var(--text);
  border-bottom: var(--hairline);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.y-confirm[open] > summary::after { transform: rotate(-135deg); }

.y-confirm__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
}

.y-confirm__note {
  margin: 0;
  font-size: var(--text-caption);
  line-height: 1.5;
  color: var(--text-secondary);
}

/* Пустое состояние внутри карточки входа (экран отказа): у карточки уже
   есть свои поля — вертикальный воздух .y-empty здесь избыточен */
.y-cab__card .y-empty { padding: var(--space-4) 0; }

/* ============================================================
   Паттерны экранов ведомостей (Этап 3 переработки, 05.08.2026)
   ============================================================ */

/* Секция-шаг рабочего цикла: eyebrow «№ 01 / …» повторяет язык
   сайдбара, поэтому порядок секций читается как последовательность,
   а не как случайный набор блоков */
.y-sect {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.y-sect__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.y-sect__title {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  line-height: 1.2;
  color: var(--text);
}

.y-sect__sub {
  font-size: var(--text-caption);
  color: var(--text-secondary);
}

/* Низ секции: кнопка сабмита и ссылки-«показать ещё» в одну строку */
.y-sect__foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Подписи второй строкой внутри ячейки таблицы (участник → договор) */
.y-tbl td .y-cab__hint { display: block; }

/* Ячейка «Действия» строки ведомости: несколько мини-форм и раскрытий
   подтверждения компактно, без раздувания строки таблицы. Стиль самих
   раскрытий — общий .y-confirm выше. */
.y-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-2);
}

/* Тело подтверждения в узкой ячейке таблицы не должно расползаться */
.y-acts .y-confirm__body { max-width: 320px; }

/* Форма создания ведомости живёт прямо в шапке экрана: два поля и
   единственное на экране оранжевое действие */
.y-newreg {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.y-newreg .y-field { width: 220px; }
.y-newreg .y-field__control input { padding: 7px 0; }
/* на телефоне поля и кнопка — во всю ширину, а не за правым краем */
@media (max-width: 640px) {
  .y-newreg .y-field { width: 100%; }
  .y-newreg .y-btn { width: 100%; }
}

/* ============================================================
   Паттерны экрана сверки (Этап 3 переработки, 05.08.2026)
   ============================================================ */

/* Смысловой блок формы ручного распределения платёжки. Форма — самое
   сложное место продукта, поэтому она читается тремя шагами («суммы по
   строкам» → «судьба остатка» → «строка переплаты»), а не сплошным
   списком полей: каждый шаг в своей рамке с eyebrow-подписью. */
.y-alloc {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--bg-elevated);
  border: var(--hairline);
  border-radius: var(--radius-md);
}

/* Строка «действие + пояснение»: на узком экране пояснение переносится
   под кнопку, а не выдавливает её за край */
.y-actline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* ============================================================
   Паттерны экранов «Зарплатники» и «Документы»
   (Этап 3 переработки, 05.08.2026)
   ============================================================ */

/* Имя человека в первой колонке таблицы: якорь строки. Подпись под ним
   (позиция, график) уже блочная — см. .y-tbl td .y-cab__hint выше. */
.y-tbl__name {
  display: block;
  font-weight: var(--weight-semibold);
  color: var(--text);
}

/* Мини-форма внутри ячейки таблицы: поле (или два) и кнопка в одну
   строку. Нужна там, где действие принадлежит именно этой строке —
   график зарплатника, начисление за период, оформление договора: уводить
   ради одного поля на отдельный экран дороже, чем показать поле здесь.
   Контролы ужаты по вертикали, чтобы строка таблицы осталась строкой. */
.y-cellform {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-2);
}

.y-cellform .y-field { flex: 1 1 150px; min-width: 130px; }

.y-cellform .y-field__control input,
.y-cellform .y-field__control select {
  padding: 6px 0;
  font-size: 13px;
}

/* Дифф условий «было → стало» в запросе участника.
   Решение принимается глазами: слева — что менялось, дальше две колонки,
   где старое значение приглушено и зачёркнуто, а новое набрано жирным.
   Подписи колонок в разметке строчные — заглавные им даёт этот стиль. */
.y-diff {
  display: flex;
  flex-direction: column;
  border: var(--hairline);
  border-radius: var(--radius-md);
}

.y-diff__row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-2) var(--space-3);
  border-top: var(--hairline);
}

.y-diff__row:first-child { border-top: none; }

.y-diff__label {
  font-size: var(--text-caption);
  color: var(--text-secondary);
}

.y-diff__side { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.y-diff__cap {
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--text-muted);
}

.y-diff__was {
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-decoration: line-through;
}

.y-diff__became {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

@media (max-width: 640px) {
  .y-diff__row { grid-template-columns: 1fr; gap: var(--space-1); }
}

/* Ячейка таблицы с двумя строчками смысла (имя + подпись, договор + дата).
   Обёртка нужна ради мобильной подачи .y-tbl--responsive: там ячейка —
   флекс «подпись колонки ↔ значение», и без обёртки имя и подпись
   разъехались бы по краям экрана. */
.y-cellstack {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* ============================================================
   Каркас панели на узком экране (Этап 5 переработки, 05.08.2026).
   Сетка «сайдбар 216 + топбар 56» рассчитана на десктоп. Ниже 900px
   сайдбар перестаёт быть колонкой и становится горизонтальной лентой
   разделов под топбаром: продюсер работает с ноутбука, но открыть
   проект с планшета в поездке должно быть можно.
   ============================================================ */

@media (max-width: 900px) {
  .y-shell {
    grid-template-columns: 1fr;
    grid-template-rows: 56px auto 1fr;
  }

  .y-shell__brand {
    grid-column: 1;
    grid-row: 1;
    border-right: none;
  }

  /* топбар и лого делят первую строку: лого слева, крошка и выход правее */
  .y-shell__brand { padding-left: var(--space-4); }

  .y-shell__topbar {
    grid-column: 1;
    grid-row: 2;
    height: auto;
    padding: var(--space-2) var(--space-4);
  }

  .y-shell__sidebar {
    grid-column: 1;
    grid-row: 3;
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-right: none;
    border-bottom: var(--hairline);
    overflow-x: auto;
    overflow-y: hidden;
  }

  .y-shell__main {
    grid-column: 1;
    grid-row: 4;
  }

  .y-shell {
    grid-template-rows: 56px auto auto 1fr;
  }

  /* секции навигации выстраиваются в ленту, их подписи-эйтбрау лишние */
  .y-nav__section {
    flex-direction: row;
    align-items: center;
    gap: var(--space-1);
    flex: none;
  }

  .y-nav__eyebrow { display: none; }

  .y-nav__item {
    padding: 8px var(--space-3);
    border-radius: var(--radius-pill);
    white-space: nowrap;
  }

  /* бегунок слева в ленте не читается — активный пункт держит заливка */
  .y-nav__item.is-active::before { content: none; }

  .y-shell__main > .y-cab__screen {
    padding: var(--space-4) var(--space-4) var(--space-12);
  }
}

/* Причина отклонения в панели массовых действий: поле живёт в одной строке с
   кнопками и не должно их выдавливать — растягивается, но не бесконечно.
   На узком экране панель переносит его на свою строку целиком. */
.y-bulk__reason {
  flex: 1 1 200px;
  min-width: 0;
  max-width: 320px;
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  padding: 6px var(--space-3);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text);
}

/* поле причины — textarea (Enter не отправляет форму, ревью T-104):
   высотой в строку, растягивается вниз вручную */
textarea.y-bulk__reason {
  resize: vertical;
  line-height: var(--leading-normal);
  vertical-align: middle;
}

.y-bulk__reason:focus-visible {
  border-color: var(--accent);
  outline: 2px solid var(--focus-ring);
  outline-offset: 0;
}

/* Поля условий позиции на экране продюсера.

   Экран правки условий появился в кабинете 08.08.2026 (продюсер предлагает
   участнику новые ставки), а поля рисует ТОТ ЖЕ макрос, что и Mini App —
   вторая копия разошлась бы с первой на первой правке. Правила там привязаны
   к каркасу `.y-app`, поэтому здесь их зеркало для каркаса кабинета:
   без него ступени переработки и свёрнутое «добавить условие» деградируют
   к нативным fieldset/details — читаемо, но не по дизайн-системе. */
.y-shell .y-tiers {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.y-shell .y-tiers .y-eyebrow { margin-bottom: 0; }
.y-shell .y-tier {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.y-shell .y-tier__title {
  display: block;
  float: none;
  padding: 0;
  margin-bottom: 6px;
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  color: var(--text);
}
.y-shell .y-tier__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  align-items: start;
}
.y-shell .y-tier__row > * { min-width: 0; }
.y-shell .y-add {
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
.y-shell .y-add__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 44px;
  padding: 4px 0;
  cursor: pointer;
  list-style: none;
}
.y-shell .y-add__head::-webkit-details-marker { display: none; }
.y-shell .y-add__head:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.y-shell .y-add__title {
  font-size: 15px;
  font-weight: var(--weight-bold);
  color: var(--text);
}
.y-shell .y-add__hint {
  font-size: var(--text-caption);
  color: var(--text-muted);
}
.y-shell .y-add__body { margin-top: 10px; }

/* ============================================================
   Обзор проекта (25.10.2026): две колонки — работа слева, деньги и
   лента справа. Секции повторяют язык каркаса: eyebrow «№ 01 / …» +
   заголовок Playfair. Ничего нового в палитре — те же роли.
   ============================================================ */
.y-ov {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: var(--space-6);
  align-items: start;
  margin-top: var(--space-6);
}
.y-ov__main, .y-ov__side { display: grid; gap: var(--space-6); min-width: 0; }
.y-ov__section { display: grid; gap: var(--space-3); }
.y-ov__head { display: grid; gap: 2px; }
.y-ov__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-h3);
  letter-spacing: -0.01em;
}
.y-ov__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.y-ov__person { display: inline-flex; align-items: center; gap: var(--space-2); }
.y-avatar {
  width: 28px; height: 28px; border-radius: 999px;
  display: inline-grid; place-items: center;
  background: var(--surface-sunken); color: var(--text);
  font-size: 12px; font-weight: var(--weight-bold); flex: none;
}
.y-ov__list { display: grid; gap: var(--space-2); }
.y-ov__reg {
  display: flex; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-elevated); border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md); color: inherit; text-decoration: none;
  transition: background var(--dur) var(--ease);
}
.y-ov__reg:hover { background: var(--surface); }
.y-ov__reg-right { align-items: flex-end; text-align: right; }
.y-ov__more { justify-self: start; }
.y-ov__feed { list-style: none; margin: 0; padding: 0; display: grid; }
.y-ov__feed-item {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: var(--space-3); align-items: center;
  padding: var(--space-2) 0; border-top: var(--hairline);
  font-size: var(--text-sm);
}
.y-ov__feed-item:first-child { border-top: none; }
.y-ov__feed-date { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.y-ov__feed-sum { white-space: nowrap; }
a.y-crumbs__here { color: inherit; text-decoration: none; }
a.y-crumbs__here:hover { color: var(--link); }
@media (max-width: 960px) {
  .y-ov { grid-template-columns: 1fr; }
}

/* Пульс проекта на карточке стартового экрана: три цифры в одну строку */
.y-projstats {
  display: grid; grid-template-columns: repeat(2, 1fr);
  border: var(--border-width) solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-elevated); overflow: hidden;
}
.y-projstats__cell {
  display: grid; gap: 2px; padding: var(--space-3);
  border-right: var(--hairline); min-width: 0; color: inherit; text-decoration: none;
}
/* сетка 2×2: правая колонка без правой рамки, вторая строка — с верхней */
.y-projstats__cell:nth-child(even) { border-right: none; }
.y-projstats__cell:nth-child(n + 3) { border-top: var(--hairline); }
a.y-projstats__cell:hover { background: var(--surface); }
.y-projstats__cell.is-attn .y-projstats__value { color: var(--link); }
.y-projstats__value {
  font-size: 17px; font-weight: var(--weight-extra);
  font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-tight);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.y-projstats__label {
  font-size: 9px; font-weight: var(--weight-bold); text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--text-muted); line-height: 1.25;
}

/* ============================================================
   Карточка участника (25.10.2026): позиции с условиями — карточками,
   реквизиты и строки ведомостей — справа. Тот же каркас, что у обзора.
   ============================================================ */
.y-mem__positions { display: grid; gap: var(--space-3); }
.y-mem__pos {
  background: var(--bg-elevated); border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5);
  display: grid; gap: var(--space-3);
}
.y-mem__pos-head { display: flex; justify-content: space-between; gap: var(--space-3); align-items: flex-start; flex-wrap: wrap; }
.y-mem__pos-name { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-h3); }
.y-mem__pos-badges { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }
.y-mem__terms {
  margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-2) var(--space-4);
}
.y-mem__terms > div { display: grid; gap: 2px; padding: var(--space-2) 0; border-top: var(--hairline); min-width: 0; }
.y-mem__terms dt { font-size: 10px; font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: var(--label-tracking); color: var(--text-muted); }
.y-mem__terms dd { margin: 0; font-size: var(--text-sm); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.y-mem__terms--card { grid-template-columns: 1fr; background: var(--bg-elevated); border: var(--border-width) solid var(--border); border-radius: var(--radius-md); padding: var(--space-2) var(--space-4); }
.y-mem__pos-foot { display: flex; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.y-mem__pos-actions { display: flex; gap: var(--space-4); font-size: var(--text-sm); }

/* ============================================================
   Стартовый экран (25.10.2026): сводка по всем проектам и карточки
   проектов с пульсом, командой и действиями.
   ============================================================ */
.y-home { display: grid; gap: var(--space-6); align-content: start; }
.y-home .y-projgrid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); }
.y-home__new { display: flex; gap: var(--space-2); align-items: center; }
.y-home__new .y-input { min-width: 260px; }
.y-proj {
  background: var(--surface); border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6);
  display: grid; gap: var(--space-4);
}
.y-proj__head { display: flex; justify-content: space-between; gap: var(--space-3); align-items: flex-start; }
.y-proj__title {
  font-family: var(--font-display); font-weight: var(--weight-semibold);
  font-size: var(--text-h2); color: var(--text); text-decoration: none; letter-spacing: -0.01em;
}
.y-proj__title:hover { color: var(--link); }
.y-proj__team { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.y-proj__avatars { display: inline-flex; }
.y-proj__avatars .y-avatar { margin-right: -8px; border: 2px solid var(--surface); background: var(--bg-elevated); }
.y-avatar--more { font-size: 10px; background: var(--surface-sunken); }
.y-proj__invite { flex-direction: row; justify-content: space-between; align-items: center; gap: var(--space-3); text-align: left; }
.y-proj__invite .y-cellstack { align-items: flex-start; }
.y-proj__invite .y-confirm { flex: none; }
.y-confirm--inline > summary { font-size: var(--text-sm); }
.y-proj__actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
@media (max-width: 720px) {
  .y-home .y-projgrid { grid-template-columns: 1fr; }
  .y-home__new { width: 100%; }
  .y-home__new .y-input { min-width: 0; flex: 1; }
}

/* Карточка участника: позиции в строке смены — одной строкой с многоточием,
   полный список виден в заголовке карточки и в карточках позиций */
.y-mem__shifts .y-mem__pos-cell { max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }

/* ============================================================
   Рабочий стол обзора (26.10.2026): дата выплаты в панели массовых
   действий, отклонение под раскрытием, расшифровка строки ведомости.
   ============================================================ */
.y-bulk__date {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-caption); color: var(--text-secondary); white-space: nowrap;
}
.y-bulk__date input {
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  padding: 5px var(--space-2);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text);
}
.y-bulk__date input:focus-visible {
  border-color: var(--accent);
  outline: 2px solid var(--focus-ring);
  outline-offset: 0;
}
.y-desk__reject { margin-bottom: var(--space-2); }
.y-desk__reject .y-bulk__acts { margin-top: var(--space-2); }

/* Расшифровка строки ведомости: summary — период и число записей,
   раскрытие — назначение платежа и список записей с суммами */
.y-breakdown > summary { white-space: nowrap; }
.y-breakdown__purpose { margin: 0 0 var(--space-2); }
.y-breakdown__list { list-style: none; margin: 0; padding: 0; display: grid; min-width: 320px; }
.y-breakdown__row {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: var(--space-3); align-items: center;
  padding: var(--space-1) 0; border-top: var(--hairline);
  font-size: var(--text-sm); white-space: normal;
}
.y-breakdown__row:first-child { border-top: none; }
.y-breakdown__date { color: var(--text-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .y-bulk__date { width: 100%; justify-content: space-between; }
  .y-breakdown__list { min-width: 0; }
}

/* Рабочий стол: таблица записей шире колонки обзора — прокрутка внутри
   карточки, а не наезд на боковую колонку; «К выставлению» до 1500px
   прячется, как в очереди записей */
.y-tbl-wrap { overflow-x: auto; }
@media (max-width: 1500px) { .y-ov__main .y-tbl__gross { display: none; } }

/* Контрагенты (26.10.2026): раскрытая строка — панель из двух блоков
   под строкой таблицы; суммы остатка подсвечены */
.y-money--attn { color: var(--accent); }
.y-cp__open > td { background: var(--surface); padding: 0; }
.y-cp__panel {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-6); padding: var(--space-4) var(--space-4) var(--space-5);
}
.y-cp__block { display: grid; gap: var(--space-3); align-content: start; }
.y-cp__block .y-btn { justify-self: start; }
@media (max-width: 900px) { .y-cp__panel { grid-template-columns: 1fr; } }

/* Календарь денег (26.10.2026): сетка месяца + боковая панель разбора дня */
/* Сетка месяца и разбор дня рядом только там, где ячейке хватает ~100px
   на сумму (от 1600px); уже — разбор уходит под сетку. */
.y-calwrap {
  display: grid; grid-template-columns: minmax(0, 1fr) 400px;
  gap: var(--space-6); align-items: start; margin-top: var(--space-4);
}
.y-cal { display: grid; gap: 4px; }
.y-cal__head, .y-cal__week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.y-cal__head span {
  font-size: var(--text-caption); color: var(--text-muted); text-transform: uppercase;
  letter-spacing: 0.06em; padding: 0 var(--space-2);
}
.y-cal__day {
  display: grid; align-content: start; gap: 2px; min-height: 86px;
  padding: var(--space-2); border-radius: var(--radius-md);
  background: var(--bg-elevated); border: 1px solid var(--card-border);
  color: inherit; text-decoration: none; font-size: var(--text-sm);
  transition: background var(--dur) var(--ease);
}
.y-cal__day:hover { background: var(--surface); }
.y-cal__day--out { opacity: 0.45; }
.y-cal__day--weekend { background: var(--surface); }
.y-cal__day--today { border-color: var(--accent); }
.y-cal__day--sel { outline: 2px solid var(--accent); outline-offset: 0; }
.y-cal__num { font-weight: var(--weight-semibold); color: var(--text-secondary); }
.y-cal__day--today .y-cal__num { color: var(--accent); }
.y-cal__sum { font-weight: var(--weight-bold); white-space: nowrap; }
.y-cal__sub, .y-cal__debt { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.y-cal__debt { margin-top: auto; }
.y-cal__side { display: grid; gap: var(--space-3); align-content: start; min-width: 0; }
.y-cal__side > * { min-width: 0; max-width: 100%; }
.y-cal__weeks td, .y-cal__weeks th { padding: 8px 6px; font-size: 12.5px; white-space: nowrap; }
.y-cal__range { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.y-cal__row { grid-template-columns: minmax(0, 1fr) auto; }
@media (max-width: 1600px) { .y-calwrap { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1100px) { .y-cal__day { padding: 6px; } .y-cal__sum { font-size: 12px; } }
@media (max-width: 640px) {
  .y-cal__day { min-height: 64px; padding: 4px; }
  .y-cal__sum { font-size: 11px; }
  .y-cal__sub, .y-cal__debt { display: none; }
}

/* Обзор на ноутбуке (1024–1280): содержимое колонки не шире своей дорожки —
   у grid-детей min-width:auto, и широкая панель/таблица выталкивала текст
   под боковую колонку. Ниже 1100px — одна колонка. */
.y-ov__main > *, .y-ov__side > *, .y-ov__section > * { min-width: 0; max-width: 100%; }
.y-bulk { min-width: 0; }
@media (max-width: 1100px) { .y-ov { grid-template-columns: 1fr; } }
/* Контрагенты на ноутбуке: колонка «Записи» уходит, чтобы деньги не резались */
@media (max-width: 1400px) { .y-cp th:last-child, .y-cp td:last-child { display: none; } }