/* =============================================================================
   Global shell — chrome shared across modules (concept «Суть ✕ Задачи»).
   Top bar (52px) · module sidebar (240px) · app-rail. Token-driven, both
   [data-theme] palettes, density-aware. No raw Tailwind colour utilities.
   ============================================================================= */

/* ─────────────── Шапка шторки модуля (бренд) ───────────────
   Верхней полосы у приложения больше нет: бренд «Суть ✕ <Модуль>» стоит здесь,
   в шапке левой шторки. Высота та же 52px, но она больше не отрезает 52px у
   КАЖДОГО модуля по всей ширине окна. */
.shell-sidebar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  flex: none;
  padding: 0 12px;
  text-decoration: none;
  color: var(--color-fg);
  border-bottom: var(--hairline-width) solid var(--color-border);
}
.shell-sidebar__mark { width: 28px; height: 28px; flex: none; display: block; }
.shell-sidebar__name {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.02em;
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  white-space: nowrap;
}
.shell-sidebar__x {
  font-family: var(--type-italic);
  font-style: italic;
  font-weight: 500;
  color: var(--color-accent);
  font-size: 16px;
  line-height: 1;
}
.shell-sidebar__module {
  font-weight: 300;
  color: var(--color-fg-muted);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─────────────── Строка главного действия + поиск ───────────────
   Лупа стоит вплотную к главной кнопке модуля — там, где рука уже находится,
   когда создаёт. Это ЕДИНСТВЕННЫЙ вход в поиск на странице. */
.shell-action { display: flex; gap: 8px; margin-bottom: 12px; flex: none; }
.shell-action .shell-compose { flex: 1; min-width: 0; margin-bottom: 0; }

.shell-search-btn {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 12px;
  background: var(--color-bg-elevated);
  border: var(--hairline-width) solid var(--color-border);
  color: var(--color-fg-muted);
  display: grid;
  place-items: center;
  cursor: pointer;
  font: inherit;
  transition: border-color var(--motion-duration-fast) var(--motion-ease),
              color var(--motion-duration-fast) var(--motion-ease),
              box-shadow var(--motion-duration-fast) var(--motion-ease);
}
.shell-search-btn:hover,
.shell-search-btn:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}
/* Модуль без главной кнопки (Главная, Отчёты): лупа занимает всю строку и
   подписывается — иначе строка выглядела бы наполовину пустой. */
.shell-search-btn--wide {
  width: auto;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  padding: 0 10px 0 13px;
}
.shell-search-btn__ph {
  flex: 1;
  min-width: 0;
  text-align: left;
  font-size: 13.5px;
  color: var(--color-fg-subtle);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shell-search-btn__kbd {
  font-family: var(--type-mono);
  font-size: 10px;
  color: var(--color-fg-subtle);
  border: var(--hairline-width) solid var(--color-border);
  border-radius: 6px;
  padding: 3px 7px;
  flex: none;
}

.shell-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  border: 0;
  background: transparent;
  color: var(--color-fg-muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background var(--motion-duration-fast) var(--motion-ease),
              color var(--motion-duration-fast) var(--motion-ease);
}
.shell-icon-btn:hover { background: var(--color-bg-muted); color: var(--color-accent); }
.shell-icon-btn__moon { display: none; }
[data-theme="dark"] .shell-icon-btn__sun { display: none; }
[data-theme="dark"] .shell-icon-btn__moon { display: inline-flex; }

/* Focus-mode minimal header (shown when the sidebar is hidden on desktop). */
.shell-focus-header {
  background: var(--color-bg-elevated);
  border-bottom: var(--hairline-width) solid var(--color-border);
}

/* Таймер и колокол — ленивые turbo-frames в служебной группе рельса.
   turbo-frame ОБЯЗАН иметь box (НЕ display:contents): у loading="lazy" Turbo
   подгружает frame через IntersectionObserver, а элемент с display:contents не
   создаёт box → observer его не видит → frame НИКОГДА не загружается. */
.shell-apprail__timer,
.shell-apprail__bell { flex: none; display: flex; justify-content: center; width: 100%; }
.shell-apprail__timer turbo-frame,
.shell-apprail__bell turbo-frame { display: inline-flex; align-items: center; }

/* Пилюля активного таймера в 56px не помещается горизонтально — складываем её
   в 42×42 плитку: точка-пульс сверху, время под ней моноширинным 9px. ID задачи
   и «стоп» прячем: и то и другое в одном клике отсюда — на самой задаче. */
.shell-apprail__timer .shell-timer-pill {
  flex-direction: column;
  gap: 1px;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 12px;
}
.shell-apprail__timer .shell-timer-pill__link { flex-direction: column; gap: 1px; }
.shell-apprail__timer .shell-timer-pill__id,
.shell-apprail__timer .shell-timer-pill__stop { display: none; }
.shell-apprail__timer .shell-timer-pill__time { font-size: 9px; letter-spacing: -0.03em; }
.shell-apprail__timer .shell-timer-pill__dot { width: 5px; height: 5px; }

.shell-apprail__bell button {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--color-fg-subtle);
  transition: background var(--motion-duration-fast) var(--motion-ease),
              color var(--motion-duration-fast) var(--motion-ease);
}
.shell-apprail__bell button:hover { background: var(--color-bg-muted); color: var(--color-accent); }

.shell-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  overflow: hidden;
  background: linear-gradient(140deg, #F0C9AE, #9A6E55);
  color: #1a1208;
  font-weight: 700;
  font-size: 12px;
  display: grid;
  place-items: center;
  flex: none;
  transition: box-shadow var(--motion-duration-fast) var(--motion-ease);
}
.shell-avatar:hover { box-shadow: 0 0 0 3px var(--color-accent-soft); }
.shell-avatar--lg { width: 42px; height: 42px; font-size: 15px; }
/* Аватар-фото (users.avatar_url) заполняет круг; инициалы-fallback
   центрируются гридом родителя и показываются shell--avatar-контроллером
   при ошибке загрузки <img>. */
.shell-avatar__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shell-avatar__initials { display: grid; place-items: center; width: 100%; height: 100%; }

.shell-apprail__profile { position: relative; flex: none; }
/* Свёрнутая кнопка профиля — только аватар (телефон/роль/тема живут в шторке). */
.shell-apprail__item--profile {
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.shell-apprail__item--profile:hover { background: var(--color-bg-muted); }

.shell-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 80;
  min-width: 248px;
  background: var(--color-bg-elevated);
  border: var(--hairline-width) solid var(--color-border-strong);
  border-radius: 13px;
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  padding: 6px;
}
.shell-menu__head { display: flex; align-items: center; gap: 11px; padding: 9px 9px 11px; }
.shell-menu__name { font-size: 14px; font-weight: 600; color: var(--color-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shell-menu__email { font-family: var(--type-mono); font-size: 11px; color: var(--color-fg-subtle); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shell-menu__div { height: var(--hairline-width); background: var(--color-border); margin: 5px 0; }
.shell-menu__item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 11px;
  border-radius: 9px;
  border: 0;
  background: transparent;
  color: var(--color-fg-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
}
.shell-menu__item:hover { background: var(--color-bg-muted); color: var(--color-fg); }
.shell-menu__item--danger:hover { color: var(--color-danger-text); }
.shell-menu form { margin: 0; }

/* Секция смены роли в шторке (плоский список — не вложенный dropdown). */
.shell-menu__role { display: flex; flex-direction: column; gap: 1px; }
.shell-menu__role-cap {
  font-family: var(--type-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-fg-subtle);
  padding: 6px 11px 3px;
}
.shell-menu__item--role.is-active { color: var(--color-accent); font-weight: 600; }
.shell-menu__item--role.is-active .icon { color: var(--color-accent); }
/* Невыбранные роли выравниваются под активную (галочка-иконка ≈16px). */
.shell-menu__role-spacer { width: 16px; flex: none; }

/* ─────────────────────────── Notification bell ─────────────────────────── */
/* Колокол + выпадашка уведомлений. Та же лексика, что у профиль-шторки
   (.shell-menu): токены, 13px-радиус, shadow-pop. Segmented-табы вместо
   наезжающего ряда. */
.shell-bell { position: relative; display: inline-flex; }
.shell-bell__trigger {
  position: relative;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--color-fg-muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background var(--motion-duration-fast) var(--motion-ease),
              color var(--motion-duration-fast) var(--motion-ease);
}
.shell-bell__trigger:hover { background: var(--color-bg-muted); color: var(--color-accent); }
.shell-bell__trigger:active { transform: scale(0.94); }
/* Колокол «теплеет» (accent), когда есть непрочитанные — счётчик рендерится
   только при count>0, поэтому :has(.shell-bell__count) = «есть непрочитанные». */
.shell-bell:has(.shell-bell__count) .shell-bell__trigger { color: var(--color-accent); }
/* Микро-«звон» иконки на наведение — колокол качается у подвеса. */
.shell-bell__trigger .icon { transform-origin: 50% 3px; }
.shell-bell__trigger:hover .icon { animation: shell-bell-ring 0.75s var(--motion-ease); }
@keyframes shell-bell-ring {
  0%, 100% { transform: rotate(0); }
  12% { transform: rotate(12deg); }
  28% { transform: rotate(-10deg); }
  44% { transform: rotate(7deg); }
  60% { transform: rotate(-5deg); }
  76% { transform: rotate(2deg); }
}

.shell-bell__badge { position: absolute; top: 3px; right: 3px; pointer-events: none; }
/* Счётчик — «живой»: объёмная заливка-градиент, кольцо-обводка под фон шапки
   (отрывает бэйдж от иконки), мягкая тень и пинг-ореол при появлении (3 раза,
   затем покой; повторяется, когда broadcast заменяет счётчик новым числом). */
.shell-bell__count {
  position: relative;
  z-index: 0;
  background: linear-gradient(150deg,
    color-mix(in oklch, var(--color-danger) 84%, white),
    var(--color-danger)) !important;
  box-shadow: 0 0 0 2px var(--color-bg-elevated),
              0 2px 5px color-mix(in oklch, var(--color-danger) 45%, transparent);
}
.shell-bell__count::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 9999px;
  background: var(--color-danger);
  animation: shell-bell-ping 1.8s var(--motion-ease) 3;
}
@keyframes shell-bell-ping {
  0%   { transform: scale(1);   opacity: 0.5; }
  70%  { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}

.shell-bell__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 80;
  width: 360px;
  max-width: calc(100vw - 24px);
  background: var(--color-bg-elevated);
  border: var(--hairline-width) solid var(--color-border-strong);
  border-radius: 14px;
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  /* hover-intent: shell--bell снимает .hidden, затем добавляет .is-open на
     следующем кадре → плавное появление. */
  opacity: 0;
  transform: translateY(-6px) scale(0.985);
  transform-origin: top right;
  transition: opacity var(--motion-duration-fast) var(--motion-ease),
              transform var(--motion-duration-fast) var(--motion-ease);
}
.shell-bell__menu.is-open { opacity: 1; transform: translateY(0) scale(1); }
/* Невидимый мост через зазор колокол↔меню, чтобы hover не прерывался. */
.shell-bell__menu::before {
  content: "";
  position: absolute;
  inset: -10px 0 auto 0;
  height: 10px;
}
.shell-bell__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 14px 10px;
}
.shell-bell__heading { font-size: 14px; font-weight: 600; color: var(--color-fg); }
.shell-bell__markall {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: var(--color-fg-subtle);
  cursor: pointer;
  border-radius: 8px;
  transition: background var(--motion-duration-fast) var(--motion-ease),
              color var(--motion-duration-fast) var(--motion-ease);
}
.shell-bell__markall:hover { background: var(--color-bg-muted); color: var(--color-accent); }
.shell-bell__markall .icon { width: 16px; height: 16px; }

/* Segmented-табы — единый трек со скользящим pill (как у Linear/Vercel). */
.shell-bell__tabs {
  position: relative;
  display: flex;
  gap: 2px;
  margin: 0 12px 8px;
  padding: 3px;
  background: var(--color-bg-muted);
  border-radius: 10px;
}
/* Скользящий pill под активным табом — двигает shell--bell-tabs (transform/width,
   GPU-дёшево). До инициализации JS opacity:0; fallback ниже держит активный. */
.shell-bell__tab-pill {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  width: 0;
  opacity: 0;
  border-radius: 7px;
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-card);
  pointer-events: none;
  will-change: transform, width;
  transition: transform var(--motion-duration-base) var(--motion-ease),
              width var(--motion-duration-base) var(--motion-ease),
              opacity var(--motion-duration-fast) var(--motion-ease);
}
.shell-bell__tab {
  position: relative;
  z-index: 1;
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--color-fg-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  padding: 7px 4px;
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--motion-duration-fast) var(--motion-ease);
}
.shell-bell__tab:hover { color: var(--color-fg); }
/* Грубый focus-ring убран (он давал «двойную рамку»); активный держит pill. */
.shell-bell__tab:focus { outline: none; }
.shell-bell__tab:focus-visible { outline: 2px solid var(--color-accent-soft); outline-offset: -2px; }
.shell-bell__tab[aria-selected="true"] { color: var(--color-fg); }
/* Fallback, если JS не успел спозиционировать pill — статичная подложка. */
.shell-bell__tabs:not(:has(.shell-bell__tab-pill[style*="opacity: 1"])) .shell-bell__tab[aria-selected="true"] {
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-card);
}

.shell-bell__list { max-height: 360px; overflow-y: auto; overscroll-behavior: contain; }
.shell-bell__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px 10px 15px;
  border-bottom: var(--hairline-width) solid var(--color-border);
  transition: background var(--motion-duration-fast) var(--motion-ease);
}
.shell-bell__row:last-child { border-bottom: 0; }
.shell-bell__row:hover { background: var(--color-bg-muted); }
.shell-bell__row.is-unread { background: color-mix(in oklch, var(--color-accent) 7%, transparent); }
.shell-bell__row.is-unread:hover { background: color-mix(in oklch, var(--color-accent) 12%, transparent); }
/* Левый флажок непрочитанного. */
.shell-bell__row-flag {
  position: absolute;
  left: 0; top: 9px; bottom: 9px;
  width: 3px; border-radius: 0 3px 3px 0;
  background: var(--color-accent);
}
/* Основная зона (клик → прочитать + перейти к задаче). */
.shell-bell__row-main {
  display: flex; align-items: center; gap: 11px;
  min-width: 0; flex: 1; text-decoration: none;
}
/* Иконка-в-круге по типу уведомления (тон семантичен). */
.shell-bell__icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.shell-bell__icon .icon { width: 17px; height: 17px; }
.shell-bell__icon--accent  { background: var(--color-accent-soft);  color: var(--color-accent); }
.shell-bell__icon--warning { background: var(--color-warning-soft); color: var(--color-warning-text); }
.shell-bell__icon--danger  { background: var(--color-danger-soft);  color: var(--color-danger-text); }
.shell-bell__icon--success { background: var(--color-success-soft); color: var(--color-success-text); }
.shell-bell__icon--muted   { background: var(--color-bg-muted);     color: var(--color-fg-subtle); }
.shell-bell__row-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
/* Заголовок — до 2 строк (line-clamp), чтобы имя задачи в «Просрочен дедлайн: ХХХ»
   не обрезалось в многоточие. */
.shell-bell__row-title {
  font-size: 13px; font-weight: 500; color: var(--color-fg-muted);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
.shell-bell__row.is-unread .shell-bell__row-title { font-weight: 600; color: var(--color-fg); }
/* Подзаголовок (body) — контекст задачи: проект, срок. Одна строка, приглушён. */
.shell-bell__row-sub {
  font-size: 12px; color: var(--color-fg-subtle); line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.shell-bell__row-time { font-size: 11px; color: var(--color-fg-subtle); opacity: 0.85; }
/* Hover-действия справа: прочитать / удалить (как у топов). */
.shell-bell__row-actions {
  display: flex; align-items: center; gap: 2px; flex: none;
  opacity: 0; transform: translateX(5px);
  transition: opacity var(--motion-duration-fast) var(--motion-ease),
              transform var(--motion-duration-fast) var(--motion-ease);
}
.shell-bell__row:hover .shell-bell__row-actions,
.shell-bell__row:focus-within .shell-bell__row-actions { opacity: 1; transform: none; }
.shell-bell__act {
  display: grid; place-items: center; width: 26px; height: 26px;
  border: 0; background: transparent; color: var(--color-fg-subtle);
  border-radius: 7px; cursor: pointer;
  transition: background var(--motion-duration-fast) var(--motion-ease),
              color var(--motion-duration-fast) var(--motion-ease);
}
.shell-bell__act .icon { width: 15px; height: 15px; }
.shell-bell__act:hover { background: var(--color-bg-elevated); color: var(--color-accent); }
.shell-bell__act--danger:hover { color: var(--color-danger-text); }

/* Stagger-появление строк при открытии меню. */
@keyframes shell-bell-row-in {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}
.shell-bell__menu.is-open .shell-bell__row {
  animation: shell-bell-row-in var(--motion-duration-base) var(--motion-ease) backwards;
}
.shell-bell__menu.is-open .shell-bell__row:nth-child(1) { animation-delay: 20ms; }
.shell-bell__menu.is-open .shell-bell__row:nth-child(2) { animation-delay: 50ms; }
.shell-bell__menu.is-open .shell-bell__row:nth-child(3) { animation-delay: 80ms; }
.shell-bell__menu.is-open .shell-bell__row:nth-child(4) { animation-delay: 110ms; }
.shell-bell__menu.is-open .shell-bell__row:nth-child(5) { animation-delay: 140ms; }
.shell-bell__menu.is-open .shell-bell__row:nth-child(n+6) { animation-delay: 165ms; }

.shell-bell__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 30px 16px;
  color: var(--color-fg-subtle);
  font-size: 13px;
}
.shell-bell__empty .icon { width: 28px; height: 28px; color: var(--color-fg-subtle); opacity: 0.55; }
/* display:flex выше перебивает UA-правило [hidden]{display:none} — возвращаем. */
.shell-bell__empty[hidden] { display: none; }

.shell-bell__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px;
  border-top: var(--hairline-width) solid var(--color-border);
  color: var(--color-accent);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--motion-duration-fast) var(--motion-ease);
}
.shell-bell__foot:hover { background: var(--color-bg-muted); }
.shell-bell__foot .icon { width: 15px; height: 15px; }
.shell-bell form { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .shell-bell__menu.is-open .shell-bell__row { animation: none; }
  .shell-bell__count::after { animation: none; }
  .shell-bell__trigger:hover .icon { animation: none; }
  .shell-bell__trigger:active { transform: none; }
  .shell-bell__tab-pill,
  .shell-bell__row-actions { transition: opacity var(--motion-duration-fast) var(--motion-ease); }
}

/* ─────────────────────────── Module sidebar ─────────────────────────── */
.shell-sidebar {
  width: 250px;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border-right: var(--hairline-width) solid var(--color-border);
  flex: none;
}
.shell-sidebar__scroll {
  flex: 1;
  overflow-y: auto;
  padding: 14px 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.shell-compose {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 44px;
  flex: none; /* never shrink when the sidebar column overflows (e.g. PM tree) */
  border-radius: 12px;
  background: var(--color-accent);
  color: var(--color-accent-on);
  font-weight: 700;
  font-size: 14px;
  border: 0;
  cursor: pointer;
  margin-bottom: 12px;
  box-shadow: var(--shadow-card);
  text-decoration: none;
  transition: background var(--motion-duration-fast) var(--motion-ease),
              transform var(--motion-duration-fast) var(--motion-ease);
}
.shell-compose:hover { background: var(--color-accent-strong); transform: translateY(-1px); }

.shell-nav { display: flex; flex-direction: column; gap: 1px; }
.shell-nav__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 11px;
  border-radius: 10px;
  color: var(--color-fg-muted);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  transition: background var(--motion-duration-fast) var(--motion-ease),
              color var(--motion-duration-fast) var(--motion-ease);
}
.shell-nav__item:hover { background: var(--color-bg-muted); color: var(--color-fg); }
.shell-nav__item.is-active { background: var(--color-bg-muted); color: var(--color-accent); }
.shell-nav__item.is-active::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 999px;
  background: var(--color-accent);
}
.shell-nav__icon { display: inline-flex; flex: none; opacity: 0.85; }
.shell-nav__item.is-active .shell-nav__icon { opacity: 1; }
.shell-nav__label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shell-nav__count { font-family: var(--type-mono); font-size: 11px; color: var(--color-fg-subtle); }
.shell-nav__item.is-active .shell-nav__count { color: var(--color-accent); }
.shell-nav__badge {
  background: var(--color-accent);
  color: var(--color-accent-on);
  border-radius: 999px;
  padding: 1px 8px;
  font-family: var(--type-mono);
  font-size: 11px;
  font-weight: 600;
}

.shell-nav-label { display: flex; align-items: center; padding: 15px 11px 6px; }
.shell-nav-label > span:first-child {
  font-family: var(--type-mono);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-fg-subtle);
}
.shell-nav-label__actions { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.shell-nav-label__add {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  color: var(--color-fg-subtle);
  text-decoration: none;
  transition: background var(--motion-duration-fast) var(--motion-ease),
              color var(--motion-duration-fast) var(--motion-ease);
}
.shell-nav-label__add:hover { background: var(--color-bg-muted); color: var(--color-accent); }

.shell-tree { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.shell-tree__search {
  width: 100%;
  height: 32px;
  border-radius: 9px;
  border: var(--hairline-width) solid var(--color-border);
  background: var(--color-bg-elevated);
  color: var(--color-fg);
  font: inherit;
  font-size: 12.5px;
  padding: 0 11px;
  margin-bottom: 4px;
  outline: none;
}
.shell-tree__search:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); }
.shell-tree__search::placeholder { color: var(--color-fg-subtle); }
.shell-tree__empty { font-size: 12px; color: var(--color-fg-subtle); padding: 6px 11px; }

.shell-sidebar__timer {
  padding: 10px 12px;
  border-top: var(--hairline-width) solid var(--color-border);
  flex: none;
}
.shell-timer-link { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--color-success-text); font-size: 13px; }
.shell-timer-link__time { font-family: var(--type-mono); font-size: 12px; }
.shell-timer-link__id { font-size: 11px; color: var(--color-fg-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Workspace switcher (bottom). */
.shell-ws { position: relative; border-top: var(--hairline-width) solid var(--color-border); padding: 10px 12px; flex: none; }
.shell-ws__current {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  border: var(--hairline-width) solid var(--color-border);
  border-radius: 12px;
  padding: 9px 11px;
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  text-align: left;
}
.shell-ws__current:hover { border-color: var(--color-border-strong); }
.shell-ws__logo {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  flex: none;
  display: grid;
  place-items: center;
  color: #1a1208;
  font-weight: 800;
  font-size: 13px;
  background: linear-gradient(140deg, #C98F68, #F0C9AE);
}
.shell-ws__logo--sm { width: 26px; height: 26px; font-size: 11px; }
.shell-ws__info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.shell-ws__name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shell-ws__role { font-size: 10.5px; color: var(--color-fg-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shell-ws__chev { color: var(--color-fg-subtle); flex: none; }

.shell-ws__menu {
  position: absolute;
  left: 12px;
  right: auto;
  min-width: 248px;
  max-width: 340px;
  width: max-content;
  bottom: 64px;
  z-index: 40;
  background: var(--color-bg-elevated);
  border: var(--hairline-width) solid var(--color-border-strong);
  border-radius: 13px;
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  padding: 5px;
}
.shell-ws__cap { font-family: var(--type-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-fg-subtle); padding: 8px 10px 4px; }
.shell-ws__item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; cursor: pointer; text-decoration: none; color: var(--color-fg); }
.shell-ws__item:hover { background: var(--color-bg-muted); }
.shell-ws__item.is-active { background: var(--color-accent-soft); }
.shell-ws__item-name { flex: 1; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Two-line switcher item (e.g. mail: address + role). PM single-line is unaffected. */
.shell-ws__item-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.shell-ws__item-text .shell-ws__item-name { flex: none; }
.shell-ws__item-sub { font-size: 11px; color: var(--color-fg-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Mail switcher: address shown in mono so the long e-mail fits the narrow button. */
.shell-ws--mail .shell-ws__name { font-family: var(--type-mono); font-size: 12px; letter-spacing: -0.01em; }
.shell-ws__check { color: var(--color-accent); flex: none; }
.shell-ws__div { height: var(--hairline-width); background: var(--color-border); margin: 5px 0; }
.shell-ws__link { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; cursor: pointer; color: var(--color-fg-muted); font-size: 12.5px; font-weight: 500; text-decoration: none; }
.shell-ws__link:hover { background: var(--color-bg-muted); color: var(--color-fg); }
.shell-ws__link .icon { color: var(--color-fg-subtle); flex: none; }

/* On mobile the sidebar fills the slide-in drawer. */
@media (max-width: 768px) { .shell-sidebar { width: 100%; } }

/* Сайдбар — ОСНОВНАЯ мобильная навигация (открывается гамбургером и табом
   «Ещё»), то есть по нему попадают пальцем. Замер на 390px показал 36px у
   пунктов навигации и 22×22 у кнопок «+» — обе ниже WCAG 2.5.5 (44px), и это
   122 промахиваемые цели на КАЖДОМ экране PM. Глобальные правила из
   _mobile.css сюда не достают: они написаны под классы .btn/.input, которых
   шелл не использует. */
@media (pointer: coarse) {
  .shell-nav__item { min-height: var(--tap-min); }
  .shell-tree__search { min-height: var(--tap-min); }

  /* Дерево проектов — то, ради чего сайдбар и открывают пальцем. */
  .pm-sidebar-tree__trigger { min-height: var(--tap-min); }

  /* «⋮» у проекта: 22×22 — как и «+», расширяем зону, а не сам элемент. */
  .pm-sidebar-tree__actions-trigger { position: relative; }
  .pm-sidebar-tree__actions-trigger::after {
    content: "";
    position: absolute;
    inset: calc((var(--tap-min) - 22px) / -2);
  }

  /* У «+» область попадания растягивается псевдоэлементом, а не размером —
     иначе кнопка визуально раздувается втрое и ломает строку заголовка. */
  .shell-nav-label__add { position: relative; }
  .shell-nav-label__add::after {
    content: "";
    position: absolute;
    inset: calc((var(--tap-min) - 22px) / -2);
  }
}

/* ─────────────────────────── App-rail (cross-module) ─────────────────────────── */
.shell-apprail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: var(--app-rail-w);
  height: 100%; /* без 100% .shell-apprail__spacer (flex:1) не имеет свободного
                   места → шестерёнка «Настройки» не прижимается вниз */
  flex: none;
  padding: 14px 0;
  background: var(--color-bg);
  border-left: var(--hairline-width) solid var(--color-border);
}
.shell-apprail__item {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  position: relative;
  color: var(--color-fg-subtle);
  cursor: pointer;
  text-decoration: none;
  border: var(--hairline-width) solid transparent;
  transition: background var(--motion-duration-fast) var(--motion-ease),
              color var(--motion-duration-fast) var(--motion-ease);
}
.shell-apprail__item:hover { background: var(--color-bg-muted); color: var(--color-accent); }
.shell-apprail__item.is-active { background: var(--color-accent); color: var(--color-accent-on); }
.shell-apprail__spacer { flex: 1; }
.shell-apprail__tip {
  position: absolute;
  right: 52px;
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  background: var(--color-bg-elevated);
  color: var(--color-fg);
  border: var(--hairline-width) solid var(--color-border-strong);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--shadow-card);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-duration-fast) var(--motion-ease),
              transform var(--motion-duration-fast) var(--motion-ease);
  z-index: 20;
}
.shell-apprail__item:hover .shell-apprail__tip { opacity: 1; transform: translateY(-50%) translateX(0); }

/* Пункты-кнопки (Юя, поиск) — те же 42×42, что и ссылки: сбрасываем нативную
   обивку <button>, иначе в рельсе появлялась бы серая плашка и другой шрифт. */
.shell-apprail__item {
  padding: 0;
  background: transparent;
  font: inherit;
}
.shell-apprail__div {
  width: 26px;
  height: var(--hairline-width);
  background: var(--color-border-strong);
  margin: 5px 0;
  flex: none;
}

/* Выпадашки рельса — position: FIXED, а не absolute.
   Рельс лежит внутри контейнера с overflow:hidden (строка «шторка · контент ·
   рельс»), и абсолютная шторка профиля/колокола обрезалась бы этим контейнером —
   тот же класс дефекта, что «меню троеточия рендерится внутри overflow-блока»
   (S-B-24/65). Рельс всегда прижат к правому краю и имеет известную ширину,
   поэтому фиксированная привязка к краю окна точна и не зависит от предков. */
.shell-apprail__profile .shell-menu--rail,
.shell-apprail__bell .shell-bell__menu {
  position: fixed;
  right: calc(var(--app-rail-w) + 10px);
  left: auto;
  bottom: auto;
  top: 12px;
  transform-origin: top right;
}
.shell-apprail__profile .shell-menu--rail { transform: none; }
.shell-apprail__bell .shell-bell__menu { transform: translateY(-6px) scale(0.985); }
.shell-apprail__bell .shell-bell__menu.is-open { transform: translateY(0) scale(1); }
/* Мост для hover-intent разворачиваем вправо, к колоколу: меню теперь слева
   от него, а не под ним. */
.shell-apprail__bell .shell-bell__menu::before { inset: 0 -12px 0 auto; width: 12px; height: auto; }


/* ─────────────────────────── Top-bar timer pill ─────────────────────────── */
/* Активный таймер в топбаре (turbo-frame pm_global_timer). Когда таймер не
   запущен — frame пуст (никакого текста «не запущен»). */
.shell-timer-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 4px 0 11px;
  border-radius: var(--radius-full);
  background: var(--color-success-soft);
  border: var(--hairline-width) solid var(--color-success);
  color: var(--color-success-text);
  text-decoration: none;
  white-space: nowrap;
}
.shell-timer-pill > form { margin: 0; display: contents; }
.shell-timer-pill__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
.shell-timer-pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-success);
  flex: none;
  animation: shell-timer-pulse 2s ease-in-out infinite;
}
@keyframes shell-timer-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) {
  .shell-timer-pill__dot { animation: none; }
}
.shell-timer-pill__id { font-size: 11px; font-weight: 600; opacity: 0.85; }
.shell-timer-pill__time { font-family: var(--type-mono); font-size: 12.5px; font-weight: 700; }
.shell-timer-pill__stop {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--color-success-text);
  cursor: pointer;
  flex: none;
  transition: background var(--motion-duration-fast) var(--motion-ease);
}
.shell-timer-pill__stop:hover { background: color-mix(in oklch, var(--color-success) 22%, transparent); }