/* External Skeleton · Stage 3 · екран «Планування» (візард із 4 кроків)
   Токени і базові класи (.btn, .task, .micro, .link) — з tokens.css/styles.css.
   Нових кольорів тут немає навмисно. Мобільний < 900 px, десктоп >= 900 px. */

/* ------------------------------------------------------- вхід у візард */

.page__foot {
  margin-top: var(--sp-8);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--divider);
}
.page__foot .link { color: var(--text-2); }

/* ------------------------------------------------------------ оболонка */

.plan__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.plan__title {
  font: var(--w-semibold) 16px var(--font-sans);
  color: var(--text-1);
}
.plan__close {
  flex: none;
  width: var(--touch-min);
  height: var(--touch-min);
  margin-right: -12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-8);
  background: none;
  font: var(--w-regular) 22px/1 var(--font-sans);
  color: var(--text-2);
  cursor: pointer;
}

.plan__layout { display: block; }

/* смуга кроків живе лише на десктопі */
.plan__rail { display: none; }

.plan__stephead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: var(--sp-1);
}
.plan__steptitle { font: var(--w-semibold) 16px var(--font-sans); }
/* Возврат на предыдущий шаг. На телефоне полосы шагов нет, и без этой кнопки
   визард был дорогой в одну сторону: ушёл с разбора инбокса — не вернулся. */
.plan__back {
  order: -1;
  flex: 0 0 auto;
  min-height: 44px;
  min-width: 44px;
  margin-left: calc(var(--sp-2) * -1);
  padding: 0 var(--sp-2);
  border: 0;
  background: none;
  color: var(--text-2);
  font: var(--w-regular) 16px var(--font-sans);
  cursor: pointer;
}
.plan__back:hover { color: var(--text-1); }
.plan__stepof {
  font: var(--w-regular) var(--fs-caption) var(--font-mono);
  color: var(--text-2);
}

/* Корзины сфер. Ряд чипов над счётчиком: мультивыбор, число прямо на чипе.
   Ни цвета, ни иконок — сферы равноправны, и подсветка «важной» была бы
   ранжированием, которого в системе нет по устройству. */
.buckets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.bucket {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--divider);
  border-radius: 999px;
  background: none;
  font: var(--w-regular) 13px var(--font-sans);
  color: var(--text-2);
  cursor: pointer;
}
.bucket:hover { border-color: var(--line); color: var(--text-1); }
.bucket.is-on {
  border-color: var(--line);
  background: var(--bg-2);
  color: var(--text-1);
  font-weight: var(--w-medium);
}
.bucket__n { font-size: 11px; color: var(--text-3); }
.bucket.is-on .bucket__n { color: var(--text-2); }
.bucket[disabled] { color: var(--text-3); cursor: default; }

.plan__counter,
.plan__note,
.plan__hint,
.plan__error {
  color: var(--text-2);
}
.plan__counter {
  font: var(--w-regular) 12px var(--font-mono);
  margin: 0 0 var(--sp-2);
}

/* Перемикач «моя робота» / «чужі зобов'язання» — крок 1. Дві кнопки, не
   випадний список: це бінарний вибір, який роблять часто. Третього стану
   («all», суміш) навмисно немає — саме змішування робить купу невирішуваною. */
.inbox-owner {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.inbox-owner__tab {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--touch-min);
  padding: 0 var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-8);
  background: none;
  font: var(--w-medium) var(--fs-caption) var(--font-sans);
  color: var(--text-2);
  cursor: pointer;
}
.inbox-owner__tab.is-active {
  border-color: var(--text-2);
  background: var(--bg-2);
  color: var(--text-1);
}
.inbox-owner__tab[disabled] {
  cursor: default;
  opacity: 0.6;
}
.inbox-owner__count {
  font: var(--w-regular) 11px var(--font-mono);
  color: var(--text-2);
}
.inbox-owner__tab.is-active .inbox-owner__count { color: var(--text-1); }
.plan__note {
  font: var(--w-regular) 12.5px/1.5 var(--font-sans);
  margin: 0 0 var(--sp-4);
}
.plan__hint {
  font: var(--w-regular) 10.5px/16px var(--font-mono);
  text-align: center;
  margin-top: var(--sp-3);
}
.plan__error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--touch-min);
  font: var(--w-regular) var(--fs-caption) var(--font-sans);
}

.plan__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 176px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-10);
  font: var(--w-regular) 15px var(--font-sans);
  color: var(--text-2);
  margin: var(--sp-4) 0 var(--sp-5);
}

/* Чотири дії. На вузькому екрані — сітка 2×2: чотири кнопки в рядок стискають
   підписи до нечитабельного, а промахнутися тут дорого. */
.plan__actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
}
.plan__actions .btn {
  min-height: var(--touch-min);
  padding: 0 var(--sp-2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
/* «Не моё» — исход другого рода: остальные четыре решают, ЧТО с задачей делать,
   а этот — ЧЬЯ она. Поэтому своя строка во всю ширину, а не пятая клетка в сетке:
   в ряду из пяти он читался бы как ещё один вариант того же выбора. Тише
   остальных — это исправление ошибки извлечения, а не решение по задаче. */
.plan__actions:not(.is-foreign) #inbox-notmine {
  grid-column: 1 / -1;
  border-color: var(--divider);
  color: var(--text-2);
  font-weight: var(--w-regular);
}

/* 008: горизонты своей карточки стоят рядом — своим блоком во всю ширину. Решение
   «когда» читается одним выбором из четырёх, а delete / done ниже — другим.
   Срез 1b добавил «next week · DD.MM» (15 символов) — в три колонки по ~110 px
   на 390-px экране она не помещалась бы без переноса. Grid 2×2 (today / next week
   сверху, this week / to queue снизу) — решение по умолчанию (план 008, «Отвергнутые
   альтернативы»); второй вариант, если станет тесно, — горизонтальный скролл. */
.plan__horizons {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}
/* Чужая карточка: mine · whose? · done · delete — две строки по два, «whose?» — такой
   же выбор, как остальные, а не тихая строка исправления. «В список человека» (004a),
   когда появится, встаёт своей строкой. */
.plan__actions.is-foreign #inbox-agenda { grid-column: 1 / -1; }
/* Пачка вперемешку: mine и whose? делят последнюю строку. Селектор сильнее правила
   «not mine своей строкой» выше (лишний класс), а не просто стоит после него. */
.plan__actions.is-mixed:not(.is-foreign) #inbox-notmine { grid-column: auto; }

.btn__mark {
  color: var(--accent-done);
  font: var(--w-medium) 14px/1 var(--font-sans);
}
.btn[disabled] .btn__mark { color: inherit; }

.plan__next {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--sp-5);
}
.plan__next .btn { min-height: var(--touch-min); }

/* --------------------------------------------------- крок 1 · картка */

/* колода: дві «тіні» позаду показують, що картка не остання */
.deck {
  position: relative;
  min-height: 200px;
  margin: var(--sp-4) 0 var(--sp-5);
}
.deck__ghost {
  position: absolute;
  background: var(--bg-1);
  border-radius: var(--radius-10);
}
.deck__ghost--far {
  left: 16px; right: 16px; top: 16px;
  height: 160px;
  border: 1px solid var(--divider);
}
.deck__ghost--near {
  left: 8px; right: 8px; top: 8px;
  height: 168px;
  border: 1px solid var(--line);
}

.card {
  position: relative;
  min-height: 176px;
  padding: 18px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-10);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  /* свайп по картці не має конкурувати з прокруткою сторінки */
  touch-action: none;
  transition: transform var(--dur-ring) var(--dur-tick-ease);
}
.card.is-dragging { transition: none; }

/* Две метки в ряд: «хвост» и контекст. Ряд нужен, чтобы при отсутствии одной
   из них вторая не съезжала и карточка не дёргалась между задачами. */
.card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-self: flex-start;
}
.card__tag {
  padding: 3px 7px;
  border-radius: var(--radius-4);
  background: var(--bg-0);
  font: var(--w-medium) 10px/14px var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-2);
}
/* Контекст — не предупреждение и не тег важности, поэтому визуально тише «хвоста». */
.card__tag--context {
  background: transparent;
  border: 1px solid var(--line);
  letter-spacing: 0.06em;
}
/* Виконавець — видно лише у зрізі «others»: без цього розбір чужої задачі
   безглуздий, треба бачити, про кого мова. Пунктир — та сама тиха обводка,
   що й у контексту, але інший стиль лінії відрізняє «хто» від «де». */
.card__tag--delegated {
  background: transparent;
  border: 1px dashed var(--line);
  letter-spacing: 0.06em;
}
.card__text {
  font: var(--w-semibold) 19px/26px var(--font-sans);
  color: var(--text-1);
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
/* Формулировку правят прямо в разборе — поэтому текст кликабелен. Подсветка
   слабая: это не кнопка действия, а «здесь можно поправить». */
.card__text--editable { cursor: text; border-radius: 6px; }
.card__text--editable:hover,
.card__text--editable:focus-visible {
  background: var(--bg-0);
  box-shadow: 0 0 0 6px var(--bg-0);
  outline: none;
}

/* Поле правки повторяет метрику текста, чтобы карточка не прыгала при переходе
   в режим редактирования. */
.card__edit {
  width: 100%;
  font: var(--w-semibold) 19px/26px var(--font-sans);
  color: var(--text-1);
  background: var(--bg-0);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  resize: vertical;
  overflow-wrap: anywhere;
}
.card__edit:focus { outline: none; border-color: var(--text-2); }

/* Выбор адресата вместо безымянного «не моё». Занимает место строки действий:
   это один и тот же шаг решения, а не дополнительный экран. */
.whose { display: grid; gap: 10px; }
.whose__title { font: var(--w-semibold) 15px/20px var(--font-sans); color: var(--text-1); }
.whose__search {
  width: 100%;
  font: 15px/20px var(--font-sans);
  color: var(--text-1);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 11px;
}
.whose__search:focus { outline: none; border-color: var(--text-2); }
.whose__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 210px;
  overflow-y: auto;
}
.whose__item {
  font: 14px/18px var(--font-sans);
  color: var(--text-1);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 13px;
  cursor: pointer;
}
.whose__item:hover { background: var(--bg-0); border-color: var(--text-2); }
.whose__empty { color: var(--text-2); }
.whose__foot { display: flex; gap: 8px; }
.whose__foot .btn { flex: 1; }

/* Откуда задача. Дата встречи читается первой — она отвечает на вопрос
   «свежее или хвост»; название идёт следом и мельче, оно только возвращает
   контекст. Обе строки живут в одном блоке, чтобы не разъезжались. */
.card__from {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--sp-2);
}
.card__from-date {
  font: var(--w-medium) 13px var(--font-mono);
  color: var(--text-1);
}
.card__from-title {
  font: var(--w-regular) 12px/17px var(--font-sans);
  color: var(--text-2);
  overflow-wrap: anywhere;
}
/* Задача, заведённая руками: встречи нет — и это сказано, а не оставлено пустым. */
.card__from.is-unknown .card__from-date { color: var(--text-3); }

.card__meta {
  margin-top: auto;
  font: var(--w-regular) 11px var(--font-mono);
  color: var(--text-2);
}

/* Что идёт следом — только даты. Плотный список: он для взгляда, не для чтения. */
.upnext { margin-top: var(--sp-4); }
.upnext__head {
  font: var(--w-regular) 11px var(--font-mono);
  color: var(--text-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
}
.upnext__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--divider);
}
.upnext__row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding: 7px 0;
  border-bottom: 1px solid var(--divider);
}
.upnext__date { font: var(--w-regular) 13px var(--font-mono); color: var(--text-2); }
.upnext__age { font: var(--w-regular) 11px var(--font-mono); color: var(--text-3); }
/* Сколько задач с этой даты — справа: число, а не полоска. Полоска читалась бы
   как оценка «много/мало», а это просто размер пачки с одной встречи. */
.upnext__n { margin-left: auto; font: var(--w-regular) 12px var(--font-mono); color: var(--text-3); }
.upnext__row--more .upnext__date { color: var(--text-3); }

/* відміна останньої дії — рядок, а не спливашка */
.undo {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--touch-min);
  margin-top: var(--sp-2);
}
.undo__text {
  font: var(--w-regular) var(--fs-caption) var(--font-sans);
  color: var(--text-2);
}

/* ---------------------------------------------------- крок 2 · черга */

.queue { display: flex; flex-direction: column; }
.queue__row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: var(--touch-min);
  padding: 14px 0;
  border-bottom: 1px solid var(--divider);
}
.queue__badge {
  flex: none;
  padding: 3px 7px;
  border-radius: var(--radius-4);
  background: var(--text-2);
  font: var(--w-medium) 10px/14px var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bg-0);
}
.queue__text {
  font: var(--w-regular) 16px/22px var(--font-sans);
  color: var(--text-1);
  overflow-wrap: anywhere;
}
.queue__row.is-next .queue__text { font-weight: var(--w-medium); }

/* ------------------------------------------------- крок 3 · розкладка */

/* 008 срез 2 (ТР-13): блок «сегодня» — своя группа сверху, БЕЗ цвета и БЕЗ
   флага срочности (БП-05): визуально это тот же ряд, просто первым. Отступ и
   разделитель — как между обычными секциями, не как предупреждение. */
.slots-today { margin-bottom: var(--sp-3); }
.slots-today .slots { border-bottom: 1px solid var(--divider); }

/* 008 срез 1b (ТР-11): свёрнутая секция «следующая неделя» — `<details>`,
   открывается тем же нативным `<summary>`, без своего JS. */
.slots-nextweek { margin-top: var(--sp-3); }
.slots-nextweek summary {
  cursor: pointer;
  padding: 10px 0;
  color: var(--text-2);
  font: var(--w-medium) 12px/16px var(--font-mono);
  list-style: none;
}
.slots-nextweek summary::-webkit-details-marker { display: none; }
.slots-nextweek[open] summary { color: var(--text-1); }

/* Рядок нічим не керує, крім дня: ані ручки перетягування, ані стрілок
   «вгору/вниз» тут немає навмисно — порядок серверний. */
.slots { display: flex; flex-direction: column; }
.slot-row {
  padding: 14px 0;
  border-bottom: 1px solid var(--divider);
}
.slot-row__text {
  margin: 0;
  font: var(--w-regular) 16px/22px var(--font-sans);
  color: var(--text-1);
  overflow-wrap: anywhere;
}
.slot-row__track {
  margin: 3px 0 0;
  font: var(--w-regular) 11px/16px var(--font-mono);
  color: var(--text-2);
}
/* Поки летить запит — рядок гасне цілком, щоб було видно, що він зайнятий. */
.slot-row.is-busy .slot-row__text { color: var(--text-2); }

.slot-row__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--sp-1);
  margin-top: 10px;
}

/* Сім чипів мусять уміститися в рядок на найвужчому екрані і лишитися
   тач-ціллю: звідси колонка з двох рядків замість «пн, 10» в один. */
.day-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-height: 44px;
  padding: 4px 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-8);
  background: none;
  color: var(--text-2);
  cursor: pointer;
}
.day-chip__wd {
  font: var(--w-regular) 10px/12px var(--font-mono);
  text-transform: lowercase;
}
.day-chip__day { font: var(--w-medium) 13px/16px var(--font-mono); }

/* Сьогодні — накресленням, не кольором: насичені кольори в системі означають
   недоторканність слота, і переносити це значення на дату не можна. */
.day-chip.is-today { border-color: var(--text-2); color: var(--text-1); }
.day-chip.is-today .day-chip__wd {
  font-weight: var(--w-medium);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.day-chip.is-on {
  background: var(--bg-2);
  border-color: var(--text-3);
  color: var(--text-1);
}
.day-chip[disabled] {
  color: var(--text-3);
  border-color: var(--divider);
  cursor: default;
}
.day-chip.is-on[disabled] { background: var(--bg-1); }

/* Придатний день — під трек задачі вже стоїть блок фокуса. Позначено пунктирною
   рамкою, а не кольором чи заливкою: заливка вже означає «обраний день», а
   насичені кольори — недоторканність слота. Підказка мусить читатися як
   підказка, а не як ще один стан вибору. */
.day-chip.is-fit {
  border-style: dashed;
  border-color: var(--text-3);
  color: var(--text-1);
}

/* Задача без трека: підпис замість підсвітки, щоб відсутність підказки не
   виглядала як «слотів немає». */
.slot-row__track--none { font-style: italic; }

/* Дата, на якій задача застрягла з минулого тижня. Факт, не докір. */
.slot-row__was {
  margin: 3px 0 0;
  font: var(--w-regular) 11px/16px var(--font-mono);
  color: var(--text-3);
}
.slot-row.is-overdue .slot-row__text { font-weight: var(--w-medium); }

/* Два выхода рядом. «Сделано» заметнее «не на этой неделе» и с галочкой: это
   исход, а второй — перенос решения. Оба скромные: главное действие в строке —
   выбор дня, а не они. */
.slot-row__actions {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-top: 6px;
}
.slot-row__done {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--touch-min);
  background: none;
  border: 0;
  padding: 0;
  font: var(--w-medium) var(--fs-caption) var(--font-sans);
  color: var(--text-1);
  cursor: pointer;
}
.slot-row__mark { color: var(--accent-done); font: var(--w-medium) 14px/1 var(--font-sans); }
.slot-row__done[disabled] { color: var(--text-3); cursor: default; }
.slot-row__done[disabled] .slot-row__mark { color: inherit; }

.slot-row__drop {
  /* Без align-self: кнопка внутри .slot-row__actions с align-items:center, и
     flex-start прижал бы её к верху, разъехавшись с «сделано». */
  min-height: var(--touch-min);
  background: none;
  border: 0;
  padding: 0;
  font: var(--w-regular) var(--fs-caption) var(--font-sans);
  color: var(--text-2);
  cursor: pointer;
}
.slot-row__drop[disabled] { color: var(--text-3); cursor: default; }

.slot-row__error {
  margin: 4px 0 0;
  color: var(--text-2);
}

/* Щільність тижня — один рядок згори. Числа моноширинні, щоб колонки
   читалися вертикально одним поглядом. */
.week-load {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 var(--sp-4);
}
.week-load__label { color: var(--text-3); }
.week-load__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--sp-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.week-load__day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 6px 0;
  border: 1px solid var(--divider);
  border-radius: var(--radius-8);
  color: var(--text-2);
}
.week-load__wd { font: var(--w-regular) 10px/12px var(--font-mono); }
.week-load__count { font: var(--w-medium) 13px/16px var(--font-mono); }
.week-load__day.is-today .week-load__wd {
  font-weight: var(--w-medium);
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* «Щільно» — накресленням і рамкою, без червоного: це спостереження, не оцінка. */
.week-load__day.is-dense {
  border-color: var(--text-3);
  color: var(--text-1);
}
.week-load__day.is-dense .week-load__count { font-weight: var(--w-semibold); }

/* Попередження про особистий акаунт: факт, а не тривога — тому нейтральна
   поверхня і другорядний текст, без червоного і без значка. */
.slots__warn {
  margin: 0 0 var(--sp-4);
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-8);
  background: var(--bg-1);
  font: var(--w-regular) 12.5px/1.5 var(--font-sans);
  color: var(--text-2);
}

.slots__empty {
  flex-direction: column;
  gap: var(--sp-2);
  height: auto;
  min-height: 176px;
  padding: var(--sp-5);
  text-align: center;
}
.slots__empty p { margin: 0; }
.slots__empty-hint {
  font: var(--w-regular) 12.5px/1.5 var(--font-sans);
  color: var(--text-2);
}

/* ---------------------------------------------------- крок 4 · опора */

.support {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-10);
  padding: var(--sp-5);
  margin-bottom: var(--sp-4);
}
.support .card__tag {
  display: inline-block;
  background: var(--bg-2);
  margin-bottom: 14px;
}
.support__title {
  font: var(--w-semibold) 20px/26px var(--font-sans);
  color: var(--text-1);
  margin: 0 0 var(--sp-2);
}
.support__if {
  font: var(--w-regular) 14px/22px var(--font-sans);
  color: var(--text-2);
  margin: 0 0 var(--sp-5);
}
.support .plan__hint { text-align: left; }

/* ================================================== desktop >= 900 px */

@media (min-width: 900px) {
  .page__foot { margin-top: var(--sp-12); }

  .plan__head { margin-bottom: var(--sp-2); }
  .plan__title { font-size: 18px; }

  .plan__layout {
    display: grid;
    grid-template-columns: 264px 1fr;
    align-items: start;
  }

  .plan__rail {
    display: block;
    padding: var(--sp-7) var(--sp-6) var(--sp-7) 0;
    border-right: 1px solid var(--divider);
    /* Разделитель — на всю высоту шага, а не по высоте трёх пунктов. */
    align-self: stretch;
  }
  .rail { display: flex; flex-direction: column; gap: var(--sp-1); }
  .rail__item {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 10px 12px;
    border-radius: var(--radius-8);
    font: var(--w-regular) 14px var(--font-sans);
    color: var(--text-2);
  }
  .rail__num {
    font: var(--w-medium) var(--fs-micro) var(--font-mono);
    color: var(--text-2);
  }
  .rail__state {
    margin-left: auto;
    font: var(--w-regular) 10px var(--font-mono);
    color: var(--text-2);
  }
  .rail__item.is-now {
    background: var(--bg-2);
    font-weight: var(--w-medium);
    color: var(--text-1);
  }
  .rail__item.is-now .rail__num { color: var(--text-1); }

  /* По шагам можно ходить в любую сторону: они независимы, и запирать пользователя
     на шаге 2 без дороги назад к разбору инбокса было прямой ошибкой. */
  .rail__item { cursor: pointer; }
  .rail__item:hover:not(.is-now) { background: var(--bg-2); color: var(--text-1); }
  .rail__item:focus-visible {
    outline: 2px solid var(--text-2);
    outline-offset: 2px;
  }

  .plan__main { padding: var(--sp-7) 0 var(--sp-7) var(--sp-8); }

  /* на десктопі крок названо у смузі — дублювати «крок N з 4» ні до чого */
  .plan__stepof { display: none; }

  /* На десктопе — три колонки: горизонты одним рядом, под ними delete · done ·
     not mine. Пять в ряд не помещались рядом с открытой панелью встречи: подписи
     с числами пачки («this week 1») ломались на две строки. */
  .plan__actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plan__actions:not(.is-foreign) #inbox-notmine { grid-column: auto; }
  .plan__actions.is-mixed:not(.is-foreign) #inbox-notmine { grid-column: 1 / -1; }
  /* Чужая карточка — все её исходы одним рядом, сколько бы их ни было (4 или 5). */
  .plan__actions.is-foreign {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }
  .plan__actions.is-foreign #inbox-agenda { grid-column: auto; }
  .plan__steptitle { font-size: 18px; }

  .plan__counter { font-size: var(--fs-caption); }
  .plan__hint { font-size: var(--fs-micro); }
  .plan__empty { font-size: 16px; }

  /* Колонка разбора: 720, а не 560 — на мониторе справа оставалась пустота,
     а длинные формулировки со встреч ломались на пять строк. */
  .plan__actions { max-width: 720px; }
  .plan__next { max-width: 720px; }
  .inbox-owner { max-width: 720px; }
  #step-inbox .plan__hint { max-width: 720px; text-wrap: balance; }

  .deck { max-width: 720px; min-height: 232px; }
  .deck__ghost--far { left: 20px; right: 20px; top: 20px; height: 212px; }
  .deck__ghost--near { left: 10px; right: 10px; top: 10px; height: 222px; }
  .card {
    min-height: 232px;
    padding: 26px;
    border-radius: var(--radius-14);
    gap: var(--sp-3);
  }
  .card__text { font-size: 24px; line-height: 32px; }
  .card__meta { font-size: 12px; }
  .card__from-date { font-size: 14px; }
  .card__from-title { font-size: 13px; line-height: 18px; }
  .upnext { max-width: 720px; }

  .queue { max-width: 720px; }
  .queue__text { font-size: 16px; }

  /* Місця вистачає — дні стають поруч із текстом, а не під ним: так рядок
     читається одним поглядом, без переходу очима на другий поверх. */
  .slots { max-width: 720px; }
  .slots__warn { max-width: 720px; font-size: 13px; }
  .slots__empty { max-width: 720px; }
  .slot-row {
    display: flex;
    align-items: center;
    gap: var(--sp-6);
    padding: var(--sp-4) 0;
  }
  .slot-row__body { flex: 1 1 auto; min-width: 0; }
  .slot-row__days {
    flex: 0 0 auto;
    width: 364px;
    gap: 6px;
    margin-top: 0;
  }

  .support {
    max-width: 480px;
    padding: var(--sp-7);
    border-radius: var(--radius-14);
  }
  .support__title { font-size: 22px; line-height: 28px; }
}